/*
Theme Name: JoyCat B2B
Theme URI: https://www.joypet.cn/
Author: OpenAI Codex
Description: A custom B2B marketing theme for JoyCat.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: joypet-b2b
*/

:root {
  --jp-bg: #f5efe6;
  --jp-surface: #fffaf3;
  --jp-card: #f8f3eb;
  --jp-card-strong: #ede3d5;
  --jp-text: #2f241b;
  --jp-muted: #6b5d4e;
  --jp-line: rgba(47, 36, 27, 0.12);
  --jp-accent: #6d8b5a;
  --jp-accent-deep: #47603a;
  --jp-accent-soft: #dce8d3;
  --jp-sand: #cfb89f;
  --jp-shadow: 0 8px 28px rgba(61, 46, 30, 0.07);
  --jp-radius-xl: 24px;
  --jp-radius-lg: 18px;
  --jp-radius-md: 18px;
  --jp-container: min(1180px, calc(100vw - 40px));
  --jp-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --jp-sans: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--jp-sans);
  color: var(--jp-text);
  background: #f7f5ef;
  line-height: 1.65;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.jp-site {
  overflow: clip;
}

.jp-shell {
  width: var(--jp-container);
  margin: 0 auto;
}

.jp-site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  background: rgba(247, 241, 233, 0.82);
  border-bottom: 1px solid rgba(47, 36, 27, 0.08);
}

.jp-header-inner {
  width: var(--jp-container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
}

.jp-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.jp-brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--jp-accent) 0%, var(--jp-accent-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
}

.jp-brand-mark::before,
.jp-brand-mark::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
}

.jp-brand-mark::before {
  width: 22px;
  height: 16px;
  border-radius: 13px 13px 10px 10px;
  left: 11px;
  top: 16px;
}

.jp-brand-mark::after {
  width: 12px;
  height: 12px;
  border-radius: 4px 10px 4px 10px;
  left: 16px;
  top: 9px;
  transform: rotate(45deg);
}

.jp-brand-mark-image {
  object-fit: contain;
  background: transparent;
  box-shadow: none;
}

.jp-brand-mark-image::before,
.jp-brand-mark-image::after {
  content: none;
}

.jp-brand-copy strong {
  display: block;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.jp-brand-copy span {
  display: block;
  font-size: 0.86rem;
  color: var(--jp-muted);
}

.jp-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.jp-nav a {
  font-size: 0.95rem;
  color: var(--jp-muted);
}

.jp-nav a:hover {
  color: var(--jp-text);
}

.jp-nav .jp-button {
  color: #fff;
}

.jp-nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(47, 36, 27, 0.16);
  border-radius: 999px;
  background: transparent;
  color: var(--jp-text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.jp-nav-toggle-bars,
.jp-nav-toggle-bars::before,
.jp-nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.jp-nav-toggle-bars {
  position: relative;
}

.jp-nav-toggle-bars::before,
.jp-nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.jp-nav-toggle-bars::before {
  top: -6px;
}

.jp-nav-toggle-bars::after {
  top: 6px;
}

.jp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.96rem;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.jp-button:hover {
  transform: translateY(-2px);
}

.jp-button-primary {
  background: var(--jp-accent-deep);
  color: #fff;
  box-shadow: 0 4px 12px rgba(71, 96, 58, 0.12);
}

.jp-button-secondary {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--jp-line);
}

.jp-hero {
  padding: 72px 0 32px;
}

.jp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: 36px;
  align-items: start;
}

.jp-panel {
  background: rgba(255, 250, 243, 0.9);
  border: 1px solid rgba(47, 36, 27, 0.08);
  border-radius: var(--jp-radius-xl);
  box-shadow: var(--jp-shadow);
}

.jp-hero-copy {
  padding: 38px;
  position: relative;
}

.jp-intro-bar {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 18px;
  padding: 16px 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(237, 227, 213, 0.82));
  border: 1px solid rgba(47, 36, 27, 0.08);
}

.jp-intro-company strong,
.jp-intro-contact strong {
  display: block;
  font-size: 0.96rem;
  line-height: 1.35;
}

.jp-intro-label,
.jp-intro-contact span {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jp-muted);
}

.jp-intro-contact {
  display: grid;
  gap: 10px;
}

.jp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--jp-accent-soft);
  color: var(--jp-accent-deep);
}

.jp-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.jp-hero h1,
.jp-section h2,
.jp-story-copy h3,
.jp-cta-copy h2,
.jp-page-title {
  margin: 18px 0 0;
  font-family: var(--jp-serif);
  line-height: 1.05;
  letter-spacing: 0;
}

.jp-hero h1 {
  max-width: 12.5ch;
  font-size: clamp(3.1rem, 5.1vw, 5.15rem);
  line-height: 0.96;
}

.jp-hero-lead {
  margin-top: 18px;
  font-size: 1.02rem;
  color: var(--jp-muted);
  max-width: 42rem;
}

.jp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

.jp-deck-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.jp-deck-strip span {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(109, 139, 90, 0.1);
  border: 1px solid rgba(71, 96, 58, 0.12);
  color: var(--jp-accent-deep);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.jp-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.jp-stat {
  padding: 15px;
  border-radius: var(--jp-radius-md);
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(47, 36, 27, 0.06);
}

.jp-stat strong {
  display: block;
  font-size: 1.32rem;
  font-family: var(--jp-serif);
}

.jp-stat span {
  display: block;
  font-size: 0.92rem;
  color: var(--jp-muted);
}

.jp-hero-visual {
  align-self: start;
  padding: 16px;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 14px;
  background: linear-gradient(180deg, rgba(255, 250, 243, 0.94), rgba(240, 234, 224, 0.94));
}

.jp-hero-visual-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  min-height: 390px;
  aspect-ratio: 1.22 / 0.9;
  background: #e9e1d6;
}

.jp-hero-stamp {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 1;
  padding: 14px 16px;
  border-radius: 22px;
  background: rgba(255, 250, 243, 0.88);
  border: 1px solid rgba(47, 36, 27, 0.08);
  text-align: right;
  box-shadow: 0 16px 30px rgba(61, 46, 30, 0.16);
}

.jp-hero-stamp span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jp-muted);
}

.jp-hero-stamp strong {
  display: block;
  margin-top: 3px;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.jp-hero-visual-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.jp-floating-note {
  position: absolute;
  left: 18px;
  bottom: 18px;
  max-width: 285px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(34, 30, 26, 0.78);
  color: #f8f3eb;
  backdrop-filter: blur(12px);
}

.jp-floating-note strong {
  display: block;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.jp-floating-note span {
  display: block;
  margin-top: 6px;
  font-size: 0.92rem;
  color: rgba(248, 243, 235, 0.82);
}

.jp-tile-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jp-mini-tile {
  border-radius: 18px;
  overflow: hidden;
  min-height: 148px;
  aspect-ratio: 1.55 / 1;
  position: relative;
  background: #ede6db;
  border: 1px solid rgba(47, 36, 27, 0.08);
}

.jp-mini-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.jp-mini-tile span {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255, 250, 243, 0.88);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.jp-hero-proof-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 250, 243, 0.78);
  border: 1px solid rgba(47, 36, 27, 0.08);
}

.jp-hero-proof-strip span {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(109, 139, 90, 0.1);
  color: var(--jp-accent-deep);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

.jp-home-hero {
  padding: 64px 0 42px;
}

.jp-home-hero-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.72fr) minmax(0, 1.28fr);
  gap: 42px;
  align-items: start;
}

.jp-home-hero-copy {
  padding-top: 2px;
}

.jp-home-hero-copy h1,
.jp-home-intro h2,
.jp-home-section-head h2,
.jp-home-feature-copy h2,
.jp-home-split-cta h2 {
  margin: 18px 0 0;
  font-family: var(--jp-sans);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.jp-home-hero-copy h1 {
  max-width: 100%;
  font-size: clamp(2.6rem, 3.75vw, 4rem);
  font-weight: 800;
  /* The shared rule below tracks the heading hard (-0.045em) at a line-height of
     1.02. At hero size that closed the counters up and let the longest word run
     past the column into the photo, so the hero sets its own, looser values. */
  line-height: 1.09;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.jp-home-hero-copy h1 span {
  display: block;
  color: var(--jp-accent-deep);
}

.jp-home-hero-copy p {
  max-width: 35rem;
  margin: 22px 0 0;
  font-size: 1.02rem;
  color: var(--jp-muted);
}

.jp-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.jp-home-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.jp-home-hero-points span {
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(109, 139, 90, 0.12);
  color: var(--jp-accent-deep);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.jp-home-hero-media,
.jp-home-feature-media,
.jp-home-split-cta img {
  overflow: hidden;
  border-radius: var(--jp-radius-xl);
  box-shadow: var(--jp-shadow);
  background: #efe6db;
}

.jp-home-hero-media {
  position: relative;
  aspect-ratio: 1.42 / 0.86;
  padding: 0;
  border-radius: 28px;
}

/* The hero photo used to carry a large radial white veil (up to 98% opaque,
   plus a 2px backdrop blur) over its middle, which washed the banner out. The
   photo is sharp artwork and needs no overlay. */

.jp-home-feature-media img,
.jp-home-split-cta img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jp-home-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: inherit;
}

.jp-home-section {
  padding: 46px 0;
}

.jp-home-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
  padding: 46px;
  border-radius: var(--jp-radius-xl);
  background: rgba(255, 250, 243, 0.76);
  border: 1px solid rgba(47, 36, 27, 0.08);
}

.jp-home-intro h2,
.jp-home-section-head h2,
.jp-home-feature-copy h2,
.jp-home-split-cta h2 {
  max-width: 720px;
  font-size: clamp(2.45rem, 4.2vw, 4.5rem);
}

.jp-home-intro-copy p,
.jp-home-feature-copy p,
.jp-home-split-cta p {
  margin: 0;
  color: var(--jp-muted);
  font-size: 1.05rem;
}

.jp-home-facts,
.jp-home-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.jp-home-facts span,
.jp-home-checks span {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(109, 139, 90, 0.12);
  color: var(--jp-accent-deep);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.jp-home-section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.5fr);
  align-items: end;
  gap: 42px;
  margin-bottom: 26px;
}

.jp-home-section-head p {
  margin: 0 0 8px;
  color: var(--jp-muted);
  font-size: 1rem;
  line-height: 1.7;
}

.jp-home-section-head h2 {
  max-width: 650px;
  font-size: clamp(2.15rem, 3.2vw, 3.35rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.jp-home-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.jp-home-product-card {
  overflow: hidden;
  border-radius: var(--jp-radius-xl);
  background: rgba(255, 250, 243, 0.9);
  border: 1px solid rgba(47, 36, 27, 0.08);
  box-shadow: 0 18px 42px rgba(61, 46, 30, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.jp-home-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px rgba(61, 46, 30, 0.14);
}

.jp-home-product-card img {
  width: 100%;
  aspect-ratio: 1 / 0.72;
  object-fit: cover;
  background: #fff;
}

.jp-home-product-card > div {
  padding: 22px;
}

.jp-home-product-card h3 {
  margin: 0;
  font-size: 1.28rem;
}

.jp-home-product-card p {
  margin: 10px 0 16px;
  color: var(--jp-muted);
}

.jp-home-product-card span {
  color: var(--jp-accent-deep);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.jp-home-more-link {
  margin: 22px 0 0;
}

.jp-home-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: 42px;
  align-items: center;
}

.jp-home-feature-media {
  aspect-ratio: 1.22 / 0.82;
}

.jp-home-feature-copy {
  padding: 10px 0;
}

.jp-home-checks {
  display: grid;
  grid-template-columns: 1fr;
}

.jp-home-checks span {
  border-radius: 18px;
  text-transform: none;
  letter-spacing: 0;
}

.jp-home-split-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.38fr);
  gap: 36px;
  align-items: center;
  padding: 42px;
  border-radius: var(--jp-radius-xl);
  background: linear-gradient(135deg, #2f241b 0%, #5a4735 100%);
  color: #fffaf3;
  box-shadow: 0 30px 80px rgba(47, 36, 27, 0.26);
}

.jp-home-split-cta p {
  max-width: 55rem;
  margin-top: 18px;
  color: rgba(255, 250, 243, 0.78);
}

.jp-home-split-cta img {
  aspect-ratio: 1 / 0.9;
}

.jp-gallery-band {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.9fr;
  gap: 18px;
  align-items: stretch;
}

.jp-gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--jp-radius-xl);
  min-height: 280px;
  box-shadow: var(--jp-shadow);
}

.jp-gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jp-gallery-overlay {
  position: absolute;
  inset: auto 18px 18px 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(34, 30, 26, 0.72);
  color: #fffaf3;
  backdrop-filter: blur(12px);
}

.jp-gallery-overlay strong {
  display: block;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.jp-gallery-overlay span {
  display: block;
  margin-top: 8px;
  font-size: 0.92rem;
  color: rgba(255, 250, 243, 0.82);
}

.jp-essay {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 24px;
  align-items: stretch;
}

.jp-essay-copy {
  padding: 34px;
}

.jp-essay-copy h2 {
  margin: 12px 0 0;
  font-family: var(--jp-serif);
  font-size: 3rem;
  line-height: 1.06;
}

.jp-essay-copy p {
  color: var(--jp-muted);
}

.jp-micro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.jp-micro-card {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(47, 36, 27, 0.08);
}

.jp-micro-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.jp-micro-card span {
  color: var(--jp-muted);
  font-size: 0.92rem;
}

.jp-essay-visual {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 16px;
}

.jp-essay-visual-main,
.jp-essay-visual-row > div {
  overflow: hidden;
  border-radius: var(--jp-radius-xl);
  box-shadow: var(--jp-shadow);
}

.jp-essay-visual-main img,
.jp-essay-visual-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jp-essay-visual-main {
  min-height: 360px;
}

.jp-essay-visual-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.jp-capability-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.jp-capability-tile {
  padding: 24px;
  border-radius: var(--jp-radius-md);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(47, 36, 27, 0.08);
  box-shadow: 0 14px 34px rgba(61, 46, 30, 0.06);
}

.jp-capability-tile strong {
  display: block;
  margin-bottom: 8px;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jp-accent-deep);
}

.jp-capability-tile h3 {
  margin: 0 0 10px;
  font-size: 1.16rem;
}

.jp-capability-tile p {
  margin: 0;
  color: var(--jp-muted);
}

.jp-section {
  padding: 34px 0;
}

.jp-section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.58fr);
  align-items: end;
  gap: 34px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(47, 36, 27, 0.08);
}

.jp-section-head-compact {
  align-items: start;
}

.jp-section h2 {
  max-width: 760px;
  font-size: 3rem;
}

.jp-section-intro {
  max-width: 38rem;
  color: var(--jp-muted);
}

.jp-grid-3,
.jp-grid-4 {
  display: grid;
  gap: 18px;
}

.jp-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jp-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jp-card {
  padding: 24px;
  border-radius: var(--jp-radius-lg);
  background: rgba(255, 250, 243, 0.85);
  border: 1px solid rgba(47, 36, 27, 0.08);
  box-shadow: 0 18px 42px rgba(61, 46, 30, 0.08);
}

.jp-card h3,
.jp-process-step h3 {
  margin: 14px 0 10px;
  font-size: 1.15rem;
}

.jp-card p,
.jp-process-step p,
.jp-story-copy p,
.jp-cta-copy p,
.jp-page-content p,
.jp-page-content li {
  color: var(--jp-muted);
}

.jp-card-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(109, 139, 90, 0.14), rgba(207, 184, 159, 0.24));
  color: var(--jp-accent-deep);
  font-weight: 700;
}

.jp-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 24px;
  align-items: center;
}

.jp-story-visual {
  overflow: hidden;
  border-radius: var(--jp-radius-xl);
  box-shadow: var(--jp-shadow);
  min-height: 440px;
}

.jp-story-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jp-story-copy {
  padding: 28px;
}

.jp-story-copy h3 {
  font-family: var(--jp-serif);
  font-size: 2.75rem;
}

.jp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.jp-badge {
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--jp-accent-soft);
  color: var(--jp-accent-deep);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.jp-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.jp-process-step {
  position: relative;
  padding: 26px 22px 22px;
  background: linear-gradient(180deg, rgba(255, 250, 243, 0.95), rgba(237, 227, 213, 0.8));
  border-radius: var(--jp-radius-lg);
  border: 1px solid rgba(47, 36, 27, 0.08);
}

.jp-process-step strong {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--jp-accent-deep);
  color: #fff;
}

.jp-cta {
  padding: 34px 0 72px;
}

.jp-cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 20px;
  padding: 30px;
  border-radius: var(--jp-radius-xl);
  background: linear-gradient(140deg, #2f241b 0%, #5a4735 100%);
  color: #fffaf3;
  box-shadow: 0 30px 80px rgba(47, 36, 27, 0.28);
}

.jp-cta-copy p {
  color: rgba(255, 250, 243, 0.78);
}

.jp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

.jp-cta-panel .jp-button-secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.jp-contact-card {
  padding: 24px;
  border-radius: var(--jp-radius-lg);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.jp-contact-card dl {
  margin: 0;
}

.jp-contact-card dt {
  color: rgba(255, 250, 243, 0.65);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.jp-contact-card dd {
  margin: 8px 0 18px;
  font-size: 1rem;
}

.jp-site-footer {
  padding: 24px 0 48px;
}

.jp-footer-inner {
  width: var(--jp-container);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  color: var(--jp-muted);
  font-size: 0.92rem;
}

.jp-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 24px;
  align-items: center;
}

.jp-footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.jp-footer-brand .jp-brand-mark {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

.jp-footer-brand strong {
  display: block;
  color: var(--jp-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.jp-footer-brand span {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jp-muted);
}

.jp-footer-copy p {
  margin: 0 0 8px;
}

.jp-footer-links {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.jp-footer-links a {
  color: var(--jp-muted);
}

.jp-footer-links a:hover {
  color: var(--jp-text);
}

.jp-footer-legal {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(47, 36, 27, 0.08);
  grid-column: 1 / -1;
}

.jp-footer-legal a {
  color: var(--jp-muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.jp-footer-legal a:hover {
  color: var(--jp-text);
}

.jp-page {
  padding: 52px 0 72px;
}

.jp-page-article {
  padding: 34px;
}

.jp-page-title {
  font-size: 3.35rem;
}

.jp-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: 24px;
  align-items: stretch;
}

.jp-page-hero > div:first-child {
  align-self: center;
}

.jp-page-hero p {
  max-width: 46rem;
  color: var(--jp-muted);
}

.jp-start-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.jp-page-hero-media {
  overflow: hidden;
  min-height: 340px;
  border-radius: var(--jp-radius-xl);
  background: linear-gradient(180deg, rgba(237, 227, 213, 0.8), rgba(255, 250, 243, 0.9));
  box-shadow: var(--jp-shadow);
}

.jp-page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jp-event-hero-media {
  display: grid;
  min-height: auto;
  aspect-ratio: 5 / 3;
  background: #fff;
}

.jp-event-hero-media img {
  object-fit: contain;
}

.jp-page-hero-media img[src*="product-sheet-"],
.jp-product-card img[src*="product-sheet-"] {
  object-fit: contain;
  background: #fff;
}

.jp-filter-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 24px;
}

.jp-filter-pills a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(73, 108, 65, 0.18);
  background: rgba(233, 239, 222, 0.72);
  color: var(--jp-green-dark);
  font-weight: 800;
  text-decoration: none;
}

.jp-filter-pills a:hover,
.jp-filter-pills a.is-active {
  background: var(--jp-green);
  color: #fff;
  border-color: var(--jp-green);
}

.jp-sheet-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.jp-sheet-card {
  overflow: hidden;
  border-radius: var(--jp-radius-md);
  border: 1px solid rgba(47, 36, 27, 0.08);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 36px rgba(61, 46, 30, 0.07);
}

.jp-sheet-card-media {
  aspect-ratio: 4 / 5;
  background: #fff;
}

.jp-sheet-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
}

.jp-sheet-card-copy {
  padding: 16px 18px 18px;
}

.jp-sheet-card-copy h3 {
  margin: 0;
  font-family: var(--jp-serif);
  font-size: 1.3rem;
}

.jp-sheet-card-copy p {
  margin: 10px 0 0;
  color: var(--jp-muted);
}

.jp-event-banner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 22px;
  padding: 24px;
  border-radius: var(--jp-radius-xl);
  background:
    linear-gradient(135deg, rgba(220, 232, 211, 0.5), rgba(255, 250, 243, 0.92)),
    rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(47, 36, 27, 0.08);
  box-shadow: var(--jp-shadow);
}

.jp-event-banner-media,
.jp-event-preview-media {
  overflow: hidden;
  border-radius: var(--jp-radius-xl);
  background: #fff;
}

.jp-event-banner-media img,
.jp-event-preview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jp-event-banner-copy {
  align-self: center;
  padding-right: 12px;
}

.jp-event-banner-copy h2 {
  font-size: 2.6rem;
  line-height: 1.08;
}

.jp-event-banner-copy p {
  color: var(--jp-muted);
}

.jp-event-preview {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 28px;
  align-items: center;
}

.jp-event-preview-media {
  aspect-ratio: 1 / 1;
}

.jp-event-preview .jp-checklist div {
  border-radius: var(--jp-radius-md);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(47, 36, 27, 0.07);
}

.jp-page-hero-media-contain {
  background: #fff;
}

.jp-page-hero-media-contain img {
  object-fit: contain;
}

.jp-page-content {
  margin-top: 24px;
}

.jp-page-content ul {
  padding-left: 20px;
}

/* Legal and other text-only pages come through page.php, where the marketing
   layouts give neither a reading measure nor distinguishable links. */
.jp-prose .jp-page-title {
  font-size: 2.6rem;
}

.jp-prose .jp-page-content {
  max-width: 68ch;
}

.jp-prose .jp-page-content h2 {
  margin: 34px 0 10px;
  font-family: var(--jp-serif);
  font-size: 1.45rem;
  line-height: 1.3;
}

.jp-prose .jp-page-content h3 {
  margin: 26px 0 8px;
  font-size: 1.12rem;
  line-height: 1.35;
}

.jp-prose .jp-page-content a {
  color: var(--jp-accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.jp-prose .jp-page-content ul,
.jp-prose .jp-page-content ol {
  margin: 14px 0 18px;
  padding-left: 22px;
}

.jp-prose .jp-page-content li + li {
  margin-top: 8px;
}

.jp-form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.jp-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.jp-field {
  display: grid;
  gap: 8px;
}

.jp-field label {
  font-size: 0.92rem;
  font-weight: 600;
}

.jp-field input,
.jp-field textarea,
.jp-field select {
  width: 100%;
  border: 1px solid var(--jp-line);
  border-radius: 16px;
  padding: 14px 16px;
  font: inherit;
  color: var(--jp-text);
  background: rgba(255, 255, 255, 0.88);
}

.jp-field textarea {
  min-height: 170px;
  resize: vertical;
}

.jp-form-note,
.jp-form-success,
.jp-form-error {
  padding: 14px 16px;
  border-radius: 16px;
}

.jp-form-note {
  background: rgba(109, 139, 90, 0.08);
  color: var(--jp-muted);
}

.jp-form-privacy-link {
  margin: 10px 2px 0;
  color: var(--jp-muted);
  font-size: 0.86rem;
}

/* Honeypot: reachable by a bot that fills every field, invisible to people. */
.jp-form-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.jp-form-success {
  background: rgba(109, 139, 90, 0.16);
  color: var(--jp-accent-deep);
}

.jp-form-error {
  background: rgba(158, 65, 48, 0.14);
  color: #7e3427;
}

.jp-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.jp-product-card {
  overflow: hidden;
  padding: 0;
}

.jp-card-link {
  color: inherit;
}

.jp-card-link:hover {
  transform: translateY(-3px);
}

.jp-product-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #fff;
}

.jp-product-copy {
  padding: 22px;
}

.jp-product-copy h2 {
  margin: 0 0 10px;
  font-family: var(--jp-serif);
}

.jp-product-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.jp-product-card-badges span,
.jp-home-product-card .jp-product-card-badges span {
  display: inline-flex;
  width: auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(109, 139, 90, 0.14);
  color: var(--jp-accent-deep);
  font-family: var(--jp-sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}

/* Catalog shots are mostly portrait, so a 4:3 cover crop would cut off the top
   perch or the ceiling mount that the product is named after. */
.jp-product-card img {
  object-fit: contain;
  background: #f7f4ee;
}

.jp-product-card-spec {
  margin: 10px 0 0;
  color: var(--jp-muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.jp-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 26px;
}

.jp-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid rgba(43, 40, 36, 0.14);
  border-radius: 999px;
  background: #fff;
  color: var(--jp-text);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
}

.jp-filter-chip span {
  color: var(--jp-muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.jp-filter-chip:hover,
.jp-filter-chip.is-active {
  border-color: var(--jp-accent-deep);
  background: var(--jp-accent-deep);
  color: #fff;
}

.jp-filter-chip.is-active span,
.jp-filter-chip:hover span {
  color: rgba(255, 255, 255, 0.78);
}

.jp-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.jp-pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  border: 1px solid rgba(43, 40, 36, 0.14);
  border-radius: 12px;
  color: var(--jp-text);
  font-weight: 800;
  text-decoration: none;
}

.jp-pagination-link:hover,
.jp-pagination-link.is-active {
  border-color: var(--jp-accent-deep);
  color: var(--jp-accent-deep);
}

.jp-section-title-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.jp-section-title-row h2 {
  margin-bottom: 0;
}

.jp-text-link {
  display: inline-flex;
  margin-top: 10px;
  color: var(--jp-accent-deep);
  font-weight: 700;
}

.jp-text-link::after {
  content: " ->";
}

.jp-feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.jp-feature-list span {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--jp-accent-soft);
  color: var(--jp-accent-deep);
  font-size: 0.82rem;
}

.jp-split-section {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 22px;
  margin-top: 26px;
}

.jp-stack {
  display: grid;
  gap: 18px;
}

.jp-info-card {
  padding: 24px;
  border-radius: var(--jp-radius-lg);
  background: rgba(255, 250, 243, 0.82);
  border: 1px solid rgba(47, 36, 27, 0.08);
}

.jp-info-card h2,
.jp-info-card h3 {
  margin: 0 0 12px;
  font-family: var(--jp-serif);
}

.jp-info-card p,
.jp-info-card li {
  color: var(--jp-muted);
}

.jp-info-card ul {
  margin: 0;
  padding-left: 20px;
}

.jp-product-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 28px;
  align-items: center;
}

.jp-product-detail-copy {
  padding: 10px 0;
}

.jp-product-lede {
  max-width: 44rem;
  color: var(--jp-muted);
  font-size: 1.16rem;
  line-height: 1.7;
}

.jp-product-detail-media {
  overflow: hidden;
  min-height: 430px;
  border-radius: var(--jp-radius-xl);
  background: #fff;
  box-shadow: var(--jp-shadow);
}

.jp-product-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.jp-product-video {
  overflow: hidden;
  margin-top: 18px;
  border-radius: var(--jp-radius-lg);
  background: #111;
}

.jp-product-video video {
  width: 100%;
  display: block;
}

.jp-product-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.jp-product-gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: var(--jp-radius-md);
  background: #fff;
  border: 1px solid rgba(47, 36, 27, 0.08);
}

.jp-spec-list {
  display: grid;
  gap: 12px;
}

.jp-spec-list div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(47, 36, 27, 0.08);
}

.jp-spec-list div:last-child {
  border-bottom: 0;
}

.jp-spec-list strong {
  color: var(--jp-text);
}

.jp-spec-list span {
  color: var(--jp-muted);
}

.jp-product-inquiry-panel {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 30px;
  border-radius: var(--jp-radius-xl);
  background:
    linear-gradient(135deg, rgba(47, 36, 27, 0.94), rgba(85, 69, 49, 0.94)),
    var(--jp-text);
  color: #fffaf3;
}

.jp-product-inquiry-panel h2 {
  max-width: 760px;
  color: #fffaf3;
}

.jp-product-inquiry-panel p {
  max-width: 760px;
  color: rgba(255, 250, 243, 0.78);
}

.jp-faq-list {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.jp-faq-item {
  padding: 20px 22px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(47, 36, 27, 0.08);
}

.jp-faq-item h3 {
  margin: 0 0 10px;
  font-size: 1.06rem;
}

.jp-checklist {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.jp-checklist div {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(109, 139, 90, 0.08);
  color: var(--jp-text);
}

.jp-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.jp-margin-top {
  margin-top: 26px;
}

.jp-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.jp-meta-strip span {
  padding: 10px 13px;
  border-radius: 999px;
  background: rgba(109, 139, 90, 0.1);
  color: var(--jp-accent-deep);
  font-size: 0.84rem;
  font-weight: 700;
}

.jp-process-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.jp-event-page {
  background:
    linear-gradient(135deg, rgba(220, 232, 211, 0.48), rgba(255, 250, 243, 0.88)),
    rgba(255, 250, 243, 0.9);
}

.jp-post-list {
  display: grid;
  gap: 18px;
}

.jp-post-card {
  padding: 24px;
}

.jp-post-card h2 {
  margin: 0 0 10px;
  font-family: var(--jp-serif);
}

.jp-mobile-only {
  display: none;
}

@media (max-width: 1240px) and (min-width: 981px) {
  .jp-nav {
    gap: 12px;
  }

  .jp-nav a {
    font-size: 0.86rem;
    white-space: nowrap;
  }

  .jp-nav .jp-button {
    padding: 12px 16px;
    font-size: 0.86rem;
  }

  .jp-brand-copy span {
    display: none;
  }
}

@media (max-width: 980px) {
  .jp-hero-grid,
  .jp-home-hero-grid,
  .jp-home-intro,
  .jp-home-product-grid,
  .jp-home-feature,
  .jp-home-split-cta,
  .jp-gallery-band,
  .jp-essay,
  .jp-story,
  .jp-cta-panel,
  .jp-page-hero,
  .jp-grid-3,
  .jp-grid-4,
  .jp-sheet-grid,
  .jp-process,
  .jp-process-5,
  .jp-product-grid,
  .jp-product-detail-hero,
  .jp-product-gallery,
  .jp-capability-strip,
  .jp-split-section,
  .jp-event-banner,
  .jp-event-preview {
    grid-template-columns: 1fr;
  }

  .jp-tile-row {
    grid-template-columns: 1fr 1fr;
  }

  .jp-hero-visual {
    grid-template-rows: auto auto auto;
  }

  .jp-hero-visual-card {
    min-height: 320px;
  }

  .jp-intro-bar {
    grid-template-columns: 1fr;
  }

  .jp-stat-row {
    grid-template-columns: 1fr;
  }

  .jp-home-section-head {
    display: block;
  }

  .jp-section-title-row,
  .jp-product-inquiry-panel {
    display: block;
  }

  .jp-product-detail-media {
    min-height: 280px;
  }

  .jp-spec-list div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .jp-home-feature {
    gap: 28px;
  }

  .jp-header-inner {
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
  }

  .jp-brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Decorative tagline: dropping it keeps the logo and menu button on one short row. */
  .jp-brand-copy span {
    display: none;
  }

  /* The toggle only makes sense once JS can drive it; no-JS visitors get the plain list. */
  .jp-js .jp-nav-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: auto;
  }

  /* Without JS the nav stays a visible wrapped list, so the menu is never unreachable. */
  .jp-js .jp-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0 4px;
  }

  .jp-js .jp-nav.is-open {
    display: flex;
  }

  .jp-js .jp-nav a:not(.jp-button) {
    padding: 13px 4px;
    font-size: 1rem;
    border-bottom: 1px solid rgba(47, 36, 27, 0.07);
  }

  .jp-js .jp-nav .jp-button {
    margin-top: 14px;
    justify-content: center;
  }

  .jp-essay-visual-row,
  .jp-micro-grid {
    grid-template-columns: 1fr;
  }

  .jp-footer-grid {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .jp-footer-links {
    justify-content: flex-start;
  }

  .jp-footer-legal {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .jp-hero-copy,
  .jp-home-intro,
  .jp-home-split-cta,
  .jp-page-article,
  .jp-card,
  .jp-process-step,
  .jp-contact-card {
    padding: 22px;
  }

  .jp-hero {
    padding-top: 36px;
  }

  .jp-home-hero {
    padding: 42px 0 24px;
  }

  .jp-home-section {
    padding: 28px 0;
  }

  .jp-home-hero-grid {
    gap: 28px;
  }

  .jp-home-hero-copy h1 {
    max-width: none;
    font-size: clamp(2.15rem, 6.2vw, 2.85rem);
  }

  .jp-home-intro h2,
  .jp-home-section-head h2,
  .jp-home-feature-copy h2,
  .jp-home-split-cta h2 {
    font-size: 2.35rem;
  }

  .jp-home-hero-media,
  .jp-home-feature-media {
    aspect-ratio: 1 / 0.78;
  }

  .jp-hero h1 {
    font-size: 2.7rem;
    max-width: none;
    line-height: 1.02;
  }

  .jp-form-grid {
    grid-template-columns: 1fr;
  }

  .jp-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .jp-mini-tile {
    min-height: 120px;
  }

  .jp-tile-row {
    grid-template-columns: 1fr;
  }

  .jp-hero-visual {
    padding: 14px;
  }

  .jp-hero-visual-card {
    min-height: 280px;
    aspect-ratio: 1 / 0.9;
  }

  .jp-floating-note {
    left: 14px;
    right: 14px;
    bottom: 14px;
    max-width: none;
  }

  .jp-hero-proof-strip {
    grid-template-columns: 1fr 1fr;
  }

  .jp-hero-stamp {
    right: 14px;
    top: 14px;
    padding: 12px 14px;
  }
}

/* Persistent WhatsApp entry: social traffic converts in chat, not through forms. */
.jp-whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--jp-accent-deep);
  color: #fffaf3;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 14px 30px rgba(47, 36, 27, 0.28);
}

.jp-whatsapp-float:hover,
.jp-whatsapp-float:focus-visible {
  background: var(--jp-accent);
  color: #fffaf3;
}

@media (max-width: 640px) {
  .jp-whatsapp-float {
    right: 14px;
    bottom: 14px;
    padding: 12px 16px;
  }
}

/* --- 2026 cat catalog: share row, rated load, social discovery ------------- */

/*
 * The share row is a plain list of network links rather than a JS share sheet:
 * a buyer forwarding a product on a phone, and a crawler with no JavaScript,
 * both need the same target URL.
 */
.jp-share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.jp-share-label {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jp-muted);
  margin-right: 4px;
}

.jp-share-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--jp-line);
  border-radius: 999px;
  background: var(--jp-surface);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--jp-muted);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.jp-share-link:hover,
.jp-share-link:focus-visible {
  border-color: var(--jp-accent);
  color: var(--jp-accent-deep);
  transform: translateY(-1px);
}

/*
 * Rated load and net weight are different numbers and buyers misread them, so
 * the spec table says so explicitly instead of leaving the reader to guess.
 */
.jp-spec-footnote {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--jp-muted);
}

/* Footer social links double as the visible half of Organization.sameAs.
   Icon-only buttons: 38px circles, name carried by aria-label + title. */
.jp-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  align-items: center;
}

.jp-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.14);
  color: var(--jp-accent-deep);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.jp-footer-social a svg {
  display: block;
}

.jp-footer-social a:hover,
.jp-footer-social a:focus-visible {
  background: var(--jp-accent-deep);
  border-color: var(--jp-accent-deep);
  color: #fff;
}

/* Flat category routes: link equity to the pages buyers search for. */
.jp-footer-seo {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--jp-line);
}

.jp-footer-seo h2 {
  margin: 0 0 12px;
  font-family: var(--jp-serif);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jp-muted);
}

.jp-footer-seo-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.jp-footer-seo-links a {
  font-size: 0.88rem;
  color: var(--jp-muted);
  transition: color 0.2s ease;
}

.jp-footer-seo-links a:hover,
.jp-footer-seo-links a:focus-visible {
  color: var(--jp-accent-deep);
}

/* FAQ block: answers the buyer's pre-inquiry questions on the page itself, and
   the same array is emitted as FAQPage schema. */
.jp-faq-list {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.jp-faq-item {
  padding: 18px 20px;
  border: 1px solid var(--jp-line);
  border-radius: var(--jp-radius-md);
  background: var(--jp-card);
}

.jp-faq-item h3 {
  margin: 0 0 8px;
  font-family: var(--jp-serif);
  font-size: 1.06rem;
  line-height: 1.4;
  color: var(--jp-text);
}

.jp-faq-item p {
  margin: 0;
  color: var(--jp-muted);
  font-size: 0.95rem;
}

/* B2B presentation refresh: restrained surfaces and clear buying information. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--jp-accent-deep);
  outline-offset: 4px;
}
.jp-button { min-height: 48px; border-radius: 12px; }
.jp-kicker { padding: 0; background: transparent; border-radius: 0; font-weight: 600; }
.jp-home-hero { padding: 48px 0 32px; }
.jp-home-hero-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 48px; }
.jp-home-hero-copy h1 { font-size: clamp(2.4rem, 4vw, 3.65rem); line-height: 1.12; font-weight: 700; }
.jp-home-hero-copy p { margin-top: 20px; line-height: 1.65; }
.jp-home-hero-media { aspect-ratio: 1.35; }
.jp-home-hero-points { gap: 8px 18px; margin-top: 22px; }
.jp-home-hero-points span { padding: 0; background: transparent; border-radius: 0; font-size: 0.76rem; letter-spacing: 0; text-transform: none; }
.jp-home-hero-points span::before { content: "\2713"; margin-right: 6px; }
.jp-home-intro h2, .jp-home-section-head h2, .jp-home-feature-copy h2, .jp-home-split-cta h2 {
  font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.16; letter-spacing: -0.025em;
}
.jp-home-intro { gap: 40px; padding: 32px; }
.jp-home-facts span, .jp-home-checks span { border-radius: 8px; background: #edf1e7; }
.jp-home-product-card { box-shadow: none; border: 1px solid var(--jp-line); }
.jp-home-product-card:hover { box-shadow: 0 8px 24px rgba(47, 36, 27, 0.08); }
.jp-page-title, .jp-info-card h2, .jp-product-inquiry-panel h2 {
  font-family: var(--jp-sans); letter-spacing: -0.025em; line-height: 1.16;
}
.jp-page-title { font-size: clamp(2rem, 3.3vw, 3rem); }
.jp-product-detail-copy { padding: 0; }
.jp-product-detail-copy .jp-feature-list:empty { display: none; }
.jp-product-lede { font-size: 1.05rem; }
.jp-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; font-size: 0.85rem; color: var(--jp-muted); }
.jp-breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.jp-product-quick-specs { margin: 24px 0; border-top: 1px solid var(--jp-line); }
.jp-product-quick-specs div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--jp-line); font-size: 0.9rem; }
.jp-product-quick-specs dt { color: var(--jp-muted); }
.jp-product-quick-specs dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.jp-product-diagram { margin: 24px 0; padding: 12px; background: #fff; border: 1px solid var(--jp-line); border-radius: 12px; }
.jp-product-diagram img { display: block; width: 100%; height: auto; border-radius: 6px; }
.jp-sourcing-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 0; margin: 28px 0 0; list-style: none; }
.jp-sourcing-steps li { padding: 24px 0; border-top: 1px solid var(--jp-line); }
.jp-sourcing-steps li > span { color: var(--jp-accent-deep); font-size: 0.82rem; font-weight: 700; }
.jp-sourcing-steps h3 { margin: 12px 0 8px; font-size: 1.2rem; }
.jp-sourcing-steps p { margin: 0; color: var(--jp-muted); }
.jp-faq-section .jp-faq-list { display: block; }
.jp-faq-section details { padding: 18px 0; border-bottom: 1px solid var(--jp-line); background: transparent; border-radius: 0; }
.jp-faq-section summary { cursor: pointer; font-weight: 600; line-height: 1.5; }
.jp-faq-section summary::marker { color: var(--jp-accent-deep); }
.jp-faq-section details p { max-width: 80ch; margin: 12px 0 0; }
.jp-chat-clearance { display: none; }
.jp-whatsapp-float.is-obscuring-control { visibility: hidden; pointer-events: none; }
@media (min-width: 641px) and (max-width: 980px) {
  .jp-home-hero-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .jp-home-hero-copy h1 { font-size: 2.5rem; }
  .jp-home-product-grid, .jp-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .jp-home-hero { padding: 26px 0 12px; }
  .jp-home-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .jp-home-hero-copy h1 { margin-top: 14px; font-size: clamp(2rem, 8.8vw, 2.6rem); }
  .jp-home-hero-copy p { margin-top: 14px; font-size: 0.95rem; }
  .jp-home-actions { margin-top: 20px; gap: 10px; }
  .jp-home-actions .jp-button { flex: 1 1 auto; padding: 12px 14px; font-size: 0.88rem; }
  .jp-home-hero-points { margin-top: 16px; gap: 8px 12px; }
  .jp-home-hero-media { aspect-ratio: 1.5; }
  .jp-home-intro { padding: 22px; gap: 20px; }
  .jp-home-intro h2, .jp-home-section-head h2, .jp-home-feature-copy h2, .jp-home-split-cta h2 { font-size: 1.9rem; }
  .jp-page-title { font-size: 2rem; overflow-wrap: anywhere; }
  .jp-sourcing-steps { grid-template-columns: 1fr; gap: 0; }
  .jp-product-detail-hero { gap: 24px; }
  .jp-product-detail-media { min-height: 0; }
  .jp-product-detail-copy .jp-inline-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .jp-product-detail-copy .jp-inline-actions .jp-button { flex: 1 1 auto; padding: 12px; font-size: 0.87rem; }
  .jp-whatsapp-float {
    left: 0; right: 0; bottom: 0; min-height: 56px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    border-radius: 0; box-shadow: 0 -2px 12px rgba(47, 36, 27, 0.1);
  }
  .jp-chat-clearance { display: block; height: calc(76px + env(safe-area-inset-bottom)); }
  /* Keep focused controls and anchor destinations above the fixed chat dock. */
  html { scroll-padding-top: 100px; scroll-padding-bottom: 90px; }
  .jp-button, input, select, textarea, summary { scroll-margin-bottom: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Product artwork must remain complete at every breakpoint. The banners and
   catalog sheets already have their own composition; never crop them to a
   fixed card ratio. Let primary images determine their container height. */
.jp-home-hero-media,
.jp-home-feature-media,
.jp-home-split-cta img {
  aspect-ratio: auto;
}
.jp-home-hero-media img,
.jp-home-feature-media img,
.jp-home-split-cta img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.jp-home-product-card img,
.jp-product-card img,
.jp-page-hero-media img {
  object-fit: contain;
}

/* About JOYCAT: company identity, owned manufacturing and sourcing support. */
.jp-about-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.jp-about .jp-page-title { margin: 14px 0 18px; font-size: clamp(2.2rem, 4vw, 3.5rem); }
.jp-about-lead { margin: 0 0 18px; font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.35; font-weight: 600; letter-spacing: -0.02em; }
.jp-about-intro p, .jp-about-section p, .jp-about-services dd, .jp-about-cta p { color: var(--jp-muted); line-height: 1.7; }
.jp-about-intro p { margin: 0 0 24px; }
.jp-about-visual { margin: 0; min-width: 0; }
.jp-about-visual img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 22px; background: #edf1e7; }
.jp-about-visual figcaption { padding: 12px 0 0; color: var(--jp-muted); font-size: 0.8rem; }
.jp-company-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.jp-company-photo { margin: 0; min-width: 0; }
.jp-company-photo-frame { aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #ede8df; }
.jp-company-photo-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.jp-company-photo figcaption, .jp-factory-hero-photo figcaption { padding-top: 12px; color: var(--jp-muted); font-size: 0.85rem; line-height: 1.5; }
.jp-factory-hero-photo { margin: 0; min-height: 0; overflow: visible; background: transparent; border-radius: 0; }
.jp-factory-hero-photo img { display: block; width: 100%; height: auto; border-radius: 18px; object-fit: contain; }
.jp-about-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 38px 0 0; padding: 26px 30px; border: 1px solid var(--jp-line); border-radius: 18px; background: #edf1e7; }
.jp-about-facts div { padding: 0 24px; border-left: 1px solid rgba(69, 95, 56, 0.16); }
.jp-about-facts div:first-child { padding-left: 0; border-left: 0; }
.jp-about-facts dt { color: var(--jp-muted); font-size: 0.82rem; }
.jp-about-facts dd { margin: 5px 0 0; font-size: 1.18rem; font-weight: 700; }
.jp-about-section { padding: 52px 0; border-bottom: 1px solid var(--jp-line); }
.jp-about-section h2, .jp-about-cta h2 { margin: 12px 0 0; font-size: clamp(1.8rem, 2.7vw, 2.5rem); line-height: 1.2; letter-spacing: -0.03em; }
.jp-about-company, .jp-about-support { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 60px; }
.jp-about-company p { margin: 0 0 16px; }
.jp-about-company p:last-child { margin-bottom: 0; }
.jp-about-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.jp-about-link { color: var(--jp-accent-deep); font-size: 0.9rem; font-weight: 700; }
.jp-about-link:hover { text-decoration: underline; }
.jp-about-ranges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.jp-about-range { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--jp-line); border-radius: 18px; background: var(--jp-surface); }
.jp-about-range:hover { border-color: var(--jp-accent); }
.jp-about-number { color: var(--jp-accent-deep); font-size: 0.82rem; font-weight: 700; }
.jp-about-range h3, .jp-about-process h3 { margin: 18px 0 10px; font-size: 1.25rem; line-height: 1.3; }
.jp-about-range p { margin: 0 0 22px; }
.jp-about-range .jp-about-link { margin-top: auto; }
.jp-about-services { margin: 0; }
.jp-about-services div { padding: 22px 0; border-bottom: 1px solid var(--jp-line); }
.jp-about-services div:first-child { padding-top: 0; }
.jp-about-services div:last-child { padding-bottom: 0; border-bottom: 0; }
.jp-about-services dt { font-size: 1.18rem; font-weight: 700; }
.jp-about-services dd { margin: 8px 0 0; }
.jp-about-quality-intro { max-width: 760px; margin: 0 0 28px; }
.jp-about-process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.jp-about-process li { padding-top: 20px; border-top: 2px solid #dce3d3; }
.jp-about-process p { margin: 0; }
.jp-about-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; margin-top: 42px; padding: 34px; border: 1px solid var(--jp-line); border-radius: 22px; background: var(--jp-surface); }
.jp-about-cta p { max-width: 640px; margin: 16px 0 0; }
.jp-about-cta .jp-inline-actions { margin-top: 0; }
@media (max-width: 980px) {
  .jp-about-hero, .jp-about-company, .jp-about-support, .jp-about-cta { grid-template-columns: 1fr; gap: 28px; }
  .jp-about-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jp-about-ranges { gap: 14px; }
  .jp-about-range { padding: 22px; }
}
@media (max-width: 640px) {
  .jp-about-hero { gap: 28px; }
  .jp-about-lead br { display: none; }
  .jp-about .jp-inline-actions { gap: 10px; }
  .jp-about .jp-inline-actions .jp-button { flex: 1 1 auto; padding: 12px 14px; font-size: 0.88rem; }
  .jp-about-facts { grid-template-columns: 1fr; margin-top: 28px; padding: 8px 22px; }
  .jp-about-facts div, .jp-about-facts div:first-child { padding: 16px 0; border-left: 0; border-bottom: 1px solid rgba(69, 95, 56, 0.16); }
  .jp-about-facts div:last-child { border-bottom: 0; }
  .jp-about-section { padding: 34px 0; }
  .jp-about-section-head { flex-direction: column; align-items: start; gap: 16px; }
  .jp-about-ranges, .jp-about-process, .jp-company-gallery { grid-template-columns: 1fr; }
  .jp-about-company, .jp-about-support { gap: 22px; }
  .jp-about-range h3 { margin-top: 12px; }
  .jp-about-cta { margin-top: 30px; padding: 24px; gap: 24px; }
}

/* Mobile rhythm: compact type, equal actions and separate product badges. */
@media (max-width: 640px) {
  .jp-header-inner { padding: 12px 0; }
  .jp-home-hero-copy h1 { font-size: clamp(1.9rem, 7.8vw, 2.4rem); line-height: 1.18; }
  .jp-home-actions .jp-button { flex: 1 1 140px; text-align: center; justify-content: center; }
  .jp-home-hero-points { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .jp-home-intro h2, .jp-home-section-head h2, .jp-home-feature-copy h2,
  .jp-home-split-cta h2 { font-size: clamp(1.6rem, 6.8vw, 1.9rem); line-height: 1.25; }
  .jp-home-section-head p { margin: 14px 0 0; }
  .jp-home-facts { gap: 8px; margin-top: 18px; }
  .jp-home-facts span { padding: 8px 10px; font-size: 0.78rem; letter-spacing: 0; text-transform: none; }
  .jp-home-product-grid { gap: 18px; }
  .jp-home-product-card > div { padding: 18px; }
  .jp-home-product-card h3 { font-size: 1.15rem; line-height: 1.35; }
  .jp-home-product-card p { font-size: 0.94rem; line-height: 1.6; }
  .jp-home-product-card .jp-product-card-badges { margin-bottom: 10px; }
}