/* ============================================================
   BOVROZHAY — components
   ============================================================ */

/* ---------------- header ---------------- */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: transform var(--dur-3) var(--ease), background var(--dur-3) var(--ease),
              box-shadow var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr__bar {
  width: var(--wrap);
  margin-inline: auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.hdr__logo { flex: none; display: block; }
.hdr__logo img {
  height: 30px; width: auto;
  transition: filter var(--dur-3) var(--ease);
}
.hdr__nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-4), 1.8vw, var(--sp-7));
  margin-inline: auto;
}
.hdr__nav a {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .01em;
  position: relative;
  padding-block: var(--sp-2);
  white-space: nowrap;
}
.hdr__nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-3) var(--ease);
}
.hdr__nav a:hover::after,
.hdr__nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.hdr__act { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.icon-btn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  position: relative;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.icon-btn:hover { background: rgba(20,32,15,.07); }
.icon-btn svg { width: 21px; height: 21px; stroke-width: 1.6; }
.cart-count {
  position: absolute; top: 4px; right: 3px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: none; place-items: center;
  background: var(--clay); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1;
  border-radius: var(--r-pill);
}
.cart-count.is-on { display: grid; }
.hdr__burger { display: none; }

/* transparent over hero */
.hdr--top { background: transparent; }
.hdr--top .hdr__bar { color: var(--paper); }
.hdr--top .hdr__logo img { filter: brightness(0) invert(1); }
.hdr--top .icon-btn:hover { background: rgba(255,255,255,.16); }

.hdr--solid {
  background: rgba(246,241,229,.9);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--line-soft);
}
.hdr--hide { transform: translateY(-100%); }

/* mobile drawer */
.mnav {
  position: fixed; inset: 0; z-index: 120;
  background: var(--moss); color: var(--paper);
  padding: var(--sp-6);
  display: flex; flex-direction: column;
  transform: translateY(-100%);
  transition: transform var(--dur-4) var(--ease);
  overflow-y: auto;
}
.mnav[hidden], .mnav:not(.is-open) { visibility: hidden; }
.mnav.is-open { transform: none; visibility: visible; }
.mnav__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-8); }
.mnav__top img { height: 28px; width: auto; filter: brightness(0) invert(1); }
.mnav__list { display: flex; flex-direction: column; gap: var(--sp-2); }
.mnav__list a {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--moss-line);
  display: flex; align-items: center; justify-content: space-between;
}
.mnav__foot { margin-top: auto; padding-top: var(--sp-7); display: grid; gap: var(--sp-3); }

/* ---------------- hero ---------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  animation: heroZoom 22s var(--ease-io) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(9,15,6,.90) 0%, rgba(9,15,6,.62) 34%, rgba(9,15,6,.12) 62%, rgba(9,15,6,.32) 100%),
    linear-gradient(180deg, rgba(9,15,6,.55) 0%, rgba(9,15,6,.05) 26%, rgba(9,15,6,.34) 62%, rgba(9,15,6,.90) 100%),
    radial-gradient(110% 70% at 80% 24%, rgba(255, 226, 160, .22), transparent 62%);
}
.hero__grain {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: .5;
  mix-blend-mode: overlay;
}
.hero__inner {
  width: var(--wrap);
  margin-inline: auto;
  padding-block: clamp(var(--sp-8), 12vh, var(--sp-12));
  position: relative;
}
.hero__eyebrow {
  color: rgba(255,255,255,.72);
  margin-bottom: var(--sp-5);
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 500;
  line-height: .93;
  letter-spacing: -.03em;
  max-width: 15ch;
}
.hero__title .ln { display: block; overflow: hidden; }
.hero__title .ln > span {
  display: block;
  transform: translateY(110%);
  animation: lnUp 1.15s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes lnUp { to { transform: none; } }
.hero__title em {
  font-style: italic;
  color: var(--sprout);
}
.hero__row {
  margin-top: var(--sp-7);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-7);
  flex-wrap: wrap;
}
.hero__lead {
  max-width: 46ch;
  font-size: var(--t-lead);
  color: rgba(255,255,255,.84);
  opacity: 0;
  animation: fadeUp 1s var(--ease) .75s forwards;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero__cta {
  display: flex; gap: var(--sp-3); flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 1s var(--ease) .95s forwards;
}
.hero__cta .btn--ghost { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); color: #fff; }
.hero__cta .btn--ghost::before { background: var(--paper); }
.hero__cta .btn--ghost:hover { color: var(--moss); }

/* stat strip — real numbers, animated correctly */
.hero__stats {
  margin-top: var(--sp-9);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255,255,255,.22);
  opacity: 0;
  animation: fadeUp 1s var(--ease) 1.15s forwards;
}
.stat__n {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  line-height: 1;
  font-weight: 500;
  display: flex; align-items: baseline; gap: .06em;
}
.stat__n sup { font-size: .42em; font-family: var(--font-ui); font-weight: 700; top: -.9em; }
.stat__l {
  margin-top: var(--sp-2);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
}
.hero__scroll {
  position: absolute;
  right: max(4vw, calc((100vw - var(--wrap)) / 2));
  bottom: var(--sp-6);
  display: grid; justify-items: center; gap: var(--sp-3);
  font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  writing-mode: vertical-rl;
}
.hero__scroll i {
  display: block; width: 1px; height: 54px;
  background: linear-gradient(rgba(255,255,255,.7), transparent);
  animation: scrollPulse 2.4s var(--ease-io) infinite;
}
@keyframes scrollPulse { 0%,100% { transform: scaleY(.4); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------------- marquee ---------------- */
.marq {
  border-block: 1px solid var(--line);
  padding-block: var(--sp-5);
  overflow: hidden;
  background: var(--paper-warm);
}
.marq__track {
  display: flex; gap: var(--sp-8);
  width: max-content;
  animation: marq 46s linear infinite;
}
.marq:hover .marq__track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
.marq__item {
  display: flex; align-items: center; gap: var(--sp-8);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  color: var(--ink-soft);
  white-space: nowrap;
}
.marq__item::after {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sprout);
  flex: none;
}

/* ---------------- category bento ---------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: var(--sp-4);
}
.cat {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  display: flex;
  align-items: flex-end;
  min-height: 100%;
  color: var(--paper);
  isolation: isolate;
  background: var(--moss);
}
.cat--xl { grid-column: span 2; grid-row: span 2; }
.cat--w  { grid-column: span 2; }
.cat--full { grid-column: 1 / -1; min-height: 220px; }
.cat img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease), filter var(--dur-3) var(--ease);
}
.cat::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(16,26,12,.05) 30%, rgba(16,26,12,.82) 100%);
  transition: background var(--dur-3) var(--ease);
}
.cat:hover img { transform: scale(1.07); }
.cat:hover::after { background: linear-gradient(180deg, rgba(16,26,12,.18) 20%, rgba(16,26,12,.9) 100%); }
.cat__in { padding: var(--sp-5); width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); }
.cat__t { font-family: var(--font-display); font-size: clamp(1.15rem, 1.8vw, 1.9rem); line-height: 1.1; }
.cat--xl .cat__t { font-size: clamp(1.6rem, 3vw, 2.75rem); }
.cat__n { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: var(--sp-2); }
.cat__go {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.cat:hover .cat__go { background: var(--sprout); transform: rotate(-45deg); }

/* ---------------- product card ---------------- */
.grid-p {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-5) var(--sp-4);
}
.pcard {
  display: flex; flex-direction: column;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.pcard:hover { border-color: var(--line); box-shadow: var(--sh-2); transform: translateY(-3px); }
.pcard__media {
  position: relative;
  aspect-ratio: 1;
  background: var(--paper-warm);
  overflow: hidden;
}
.pcard__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--sp-4);
  transition: transform var(--dur-4) var(--ease);
}
.pcard:hover .pcard__media img { transform: scale(1.05); }
.pcard__tags {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start;
  z-index: 2;
}
.pcard__quick {
  position: absolute; inset: auto var(--sp-3) var(--sp-3) var(--sp-3);
  transform: translateY(calc(100% + var(--sp-3)));
  opacity: 0;
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-3) var(--ease);
}
.pcard:hover .pcard__quick, .pcard:focus-within .pcard__quick { transform: none; opacity: 1; }
.pcard__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.pcard__cat { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.pcard__t {
  font-family: var(--font-ui);
  font-size: 0.9375rem; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard__t a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pcard__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); }
.price { display: flex; align-items: baseline; gap: var(--sp-2); }
.price__now { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; line-height: 1; white-space: nowrap; }
.price__old { font-size: var(--t-sm); color: var(--ink-mute); text-decoration: line-through; white-space: nowrap; }
.price--sale .price__now { color: var(--clay); }
.pcard__add {
  position: relative; z-index: 2;
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  background: var(--paper-warm);
  display: grid; place-items: center;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.pcard__add:hover { background: var(--clay); color: #fff; transform: scale(1.08); }
.pcard__add svg { width: 18px; height: 18px; }
.pcard__add.is-added { background: var(--sprout); color: #fff; }

/* horizontal scroller */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 26%);
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-4);
}
.rail > * { scroll-snap-align: start; }

/* ---------------- sowing calendar ---------------- */
.cal { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-8); align-items: start; }
.cal__months { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.cal__m {
  padding: var(--sp-3) var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 600;
  text-align: center;
  transition: all var(--dur-2) var(--ease);
}
.cal__m:hover { border-color: var(--sprout); color: var(--sprout-deep); }
.cal__m[aria-selected="true"] {
  background: var(--moss); color: var(--paper); border-color: var(--moss);
}
.cal__m.is-now::after {
  content: "";
  display: block; width: 5px; height: 5px; margin: var(--sp-2) auto 0;
  border-radius: 50%; background: var(--clay);
}
.cal__panel {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(var(--sp-5), 3vw, var(--sp-8));
  min-height: 380px;
}
.cal__h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.cal__lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-6); }
.cal__list h4 {
  font-family: var(--font-ui);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute);
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
}
.cal__list h4 svg { width: 16px; height: 16px; color: var(--sprout); }
.cal__list li {
  font-size: var(--t-sm);
  padding-block: var(--sp-2);
  color: var(--ink-soft);
  display: flex; gap: var(--sp-3);
}
.cal__list li::before { content: ""; flex: none; width: 4px; height: 4px; margin-top: .6em; border-radius: 50%; background: var(--line); }
.cal__empty { font-size: var(--t-sm); color: var(--ink-mute); font-style: italic; padding-block: var(--sp-2); }
.cal__tip {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper-warm);
  border-left: 2px solid var(--clay);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-sm);
  color: var(--ink-soft);
}
.cal__works { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.cal__work { display: flex; gap: var(--sp-3); font-size: var(--t-sm); color: var(--ink-soft); }
.cal__work svg { flex: none; width: 17px; height: 17px; margin-top: .2em; color: var(--gold); }

/* ---------------- timeline ---------------- */
.tl { position: relative; display: grid; gap: 0; }
.tl::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--line);
}
.tl__i {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--sp-6);
  padding: var(--sp-6) 0 var(--sp-6) var(--sp-6);
  position: relative;
  border-bottom: 1px solid var(--line-soft);
}
.tl__i::before {
  content: "";
  position: absolute; left: -4px; top: calc(var(--sp-6) + .55em);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--ink-mute);
  transition: background var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.tl__i.is-in::before { background: var(--sprout); border-color: var(--sprout); transform: scale(1.25); }
.tl__y { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1; color: var(--ink-mute); }
.tl__i.is-in .tl__y { color: var(--ink); }
.tl__d { font-size: var(--t-body); color: var(--ink-soft); max-width: 62ch; }

/* ---------------- trust / features ---------------- */
.feat { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-6); }
.feat__i { display: grid; gap: var(--sp-3); }
.feat__ic {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: rgba(80,176,104,.12);
  color: var(--sprout-deep);
}
.band-dark .feat__ic { background: rgba(255,255,255,.09); color: var(--sprout); }
.feat__ic svg { width: 22px; height: 22px; stroke-width: 1.5; }
.feat__t { font-family: var(--font-ui); font-size: 1.0625rem; font-weight: 700; }
.feat__d { font-size: var(--t-sm); color: var(--ink-soft); }

/* dealers */
.dealers { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.dealer {
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .02em;
}

/* ---------------- editorial split ---------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--sp-6), 5vw, var(--sp-11)); align-items: center; }
.split--r > :first-child { order: 2; }
.split__media { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.split__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.split__media--wide img { aspect-ratio: 4/3; }
.split__note {
  position: absolute; left: var(--sp-5); bottom: var(--sp-5);
  background: rgba(246,241,229,.94);
  backdrop-filter: blur(8px);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  max-width: 62%;
  color: var(--ink);
}
.split__note b { font-family: var(--font-display); font-size: 1.5rem; display: block; }
.split__note span { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }

/* ---------------- blog cards ---------------- */
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-6); }
.post { display: grid; gap: var(--sp-4); position: relative; }
.post__media { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 3/2; background: var(--paper-warm); }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.post:hover .post__media img { transform: scale(1.05); }
.post__meta { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.post__t { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.22; }
.post__t a::after { content: ""; position: absolute; inset: 0; }
.post__x { font-size: var(--t-sm); color: var(--ink-soft); }

/* ---------------- CTA band ---------------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; color: var(--paper); }
.cta-band img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(16,26,12,.94), rgba(16,26,12,.62));
}

/* ---------------- footer ---------------- */
.ftr { background: var(--moss-deep); color: var(--paper); padding-block: var(--sp-10) var(--sp-6); }
.ftr__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: var(--sp-8); padding-bottom: var(--sp-8); border-bottom: 1px solid var(--moss-line); }
.ftr__logo img { height: 32px; width: auto; filter: brightness(0) invert(1); margin-bottom: var(--sp-4); }
.ftr__x { font-size: var(--t-sm); color: #A9B69C; max-width: 34ch; }
.ftr .ftr__h {
  font-family: var(--font-ui);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #8FA083;
  margin-bottom: var(--sp-4);
}
.ftr li { margin-bottom: var(--sp-2); }
.ftr a { font-size: var(--t-sm); color: #D6DDCD; transition: color var(--dur-2) var(--ease); }
.ftr a:hover { color: var(--sprout); }
.ftr__contact { display: grid; gap: var(--sp-3); font-size: var(--t-sm); color: #D6DDCD; }
.ftr__contact div { display: flex; gap: var(--sp-3); align-items: flex-start; }
.ftr__contact svg { width: 17px; height: 17px; flex: none; margin-top: .2em; color: var(--sprout); }
.ftr__bot {
  padding-top: var(--sp-6);
  display: flex; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap;
  font-size: var(--t-xs); color: #7E8C73;
}
.ftr__soc { display: flex; gap: var(--sp-2); }
.ftr__soc a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--moss-line);
  display: grid; place-items: center;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.ftr__soc a:hover { background: var(--sprout); border-color: var(--sprout); color: #fff; transform: translateY(-2px); }
.ftr__soc svg { width: 18px; height: 18px; }

/* ---------------- cart drawer ---------------- */
.scrim {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(11,18,8,.5);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-3) var(--ease);
}
.scrim.is-on { opacity: 1; pointer-events: auto; }
.cart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 140;
  width: min(430px, 100vw);
  background: var(--paper);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-4) var(--ease);
  box-shadow: var(--sh-3);
}
.cart.is-open { transform: none; }
.cart__h { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5) var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--line-soft); }
.cart__h h3 { font-size: 1.375rem; }
.cart__body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-4); align-content: start; }
.cart__empty { text-align: center; padding-block: var(--sp-10); color: var(--ink-mute); display: grid; gap: var(--sp-4); justify-items: center; }
.cart__empty svg { width: 46px; height: 46px; color: var(--line); }
.ci { display: grid; grid-template-columns: 68px 1fr auto; gap: var(--sp-4); align-items: start; }
.ci__img { width: 68px; height: 68px; border-radius: var(--r-sm); background: var(--paper-warm); object-fit: contain; padding: var(--sp-2); }
.ci__t { font-size: var(--t-sm); font-weight: 600; line-height: 1.3; }
.ci__p { font-size: var(--t-sm); color: var(--ink-soft); margin-top: var(--sp-2); }
.qty { display: inline-flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px var(--sp-2); }
.qty button { width: 24px; height: 24px; display: grid; place-items: center; font-size: 1rem; line-height: 1; color: var(--ink-soft); }
.qty button:hover { color: var(--clay); }
.qty span { font-size: var(--t-sm); font-weight: 700; min-width: 18px; text-align: center; }
.ci__rm { color: var(--ink-mute); font-size: var(--t-xs); }
.ci__rm:hover { color: var(--clay); }
.cart__f { padding: var(--sp-5); border-top: 1px solid var(--line-soft); display: grid; gap: var(--sp-4); }
.cart__sum { display: flex; justify-content: space-between; align-items: baseline; }
.cart__sum b { font-family: var(--font-display); font-size: 1.625rem; }

/* ---------------- breadcrumbs ---------------- */
.crumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--t-xs); color: var(--ink-mute); padding-top: calc(var(--header-h) + var(--sp-6)); }
.crumbs a:hover { color: var(--clay); }
.crumbs span { opacity: .5; }

/* ---------------- page head ---------------- */
.phead { padding-block: var(--sp-6) var(--sp-8); }
.phead h1 { margin-block: var(--sp-4) var(--sp-4); }
.phead .lead { max-width: 60ch; }

/* ---------------- filters ---------------- */
.shop { display: grid; grid-template-columns: 250px 1fr; gap: var(--sp-8); align-items: start; }
.side { position: sticky; top: calc(var(--header-h) + var(--sp-4)); display: grid; gap: var(--sp-6); }
.side h4 { font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: var(--sp-3); }
.side__list { display: grid; gap: 1px; }
.side__list a {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--t-sm);
  border-radius: var(--r-sm);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.side__list a:hover { background: var(--paper-warm); }
.side__list a[aria-current="page"] { background: var(--moss); color: var(--paper); }
.side__list em { font-style: normal; color: var(--ink-mute); font-size: var(--t-xs); }
.side__list a[aria-current="page"] em { color: rgba(255,255,255,.6); }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line-soft); }
.toolbar select {
  border: 1px solid var(--line); background: var(--surface);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  font-size: var(--t-sm); cursor: pointer;
}

/* ---------------- product page ---------------- */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--sp-6), 5vw, var(--sp-10)); align-items: start; }
.pdp__media { position: sticky; top: calc(var(--header-h) + var(--sp-4)); background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; }
.pdp__media img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: var(--sp-8); }
.pdp__info { display: grid; gap: var(--sp-5); }
.pdp h1 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
.pdp__price { display: flex; align-items: baseline; gap: var(--sp-4); }
.pdp__price .price__now { font-size: clamp(2rem, 4vw, 2.75rem); }
.pdp__buy { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.pdp__specs { display: grid; gap: 0; border-top: 1px solid var(--line-soft); }
.pdp__specs div { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm); }
.pdp__specs dt { color: var(--ink-mute); }
.pdp__specs dd { font-weight: 600; text-align: right; }
.pdp__desc { font-size: var(--t-body); color: var(--ink-soft); line-height: 1.75; }
.pdp__trust { display: grid; gap: var(--sp-4); padding: var(--sp-5); background: var(--paper-warm); border-radius: var(--r-md); }
.pdp__trust div { display: flex; gap: var(--sp-3); font-size: var(--t-sm); }
.pdp__trust svg { width: 19px; height: 19px; flex: none; color: var(--sprout-deep); }

/* ---------------- toast ---------------- */
.toast {
  position: fixed; left: 50%; bottom: var(--sp-6); z-index: 150;
  transform: translate(-50%, calc(100% + var(--sp-8)));
  background: var(--moss); color: var(--paper);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 600;
  display: flex; align-items: center; gap: var(--sp-3);
  box-shadow: var(--sh-3);
  transition: transform var(--dur-3) var(--ease);
}
.toast.is-on { transform: translate(-50%, 0); }
.toast svg { width: 18px; height: 18px; color: var(--sprout); }

/* ---------------- search ---------------- */
.srch { position: fixed; inset: 0; z-index: 145; display: none; }
.srch.is-open { display: block; }
.srch__panel {
  position: relative; z-index: 2;
  width: min(760px, 92vw);
  margin: clamp(var(--sp-8), 12vh, var(--sp-12)) auto 0;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
  animation: fadeUp .5s var(--ease);
}
.srch__in { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5); border-bottom: 1px solid var(--line-soft); }
.srch__in svg { width: 22px; height: 22px; color: var(--ink-mute); flex: none; }
.srch__in input { flex: 1; border: 0; background: none; font-size: 1.125rem; outline: none; }
.srch__res { max-height: min(52vh, 460px); overflow-y: auto; }
.srch__r { display: flex; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5); align-items: center; transition: background var(--dur-1) var(--ease); }
.srch__r:hover { background: var(--paper-warm); }
.srch__r img { width: 46px; height: 46px; object-fit: contain; background: var(--paper-warm); border-radius: var(--r-sm); padding: 3px; }
.srch__r b { font-size: var(--t-sm); font-weight: 600; display: block; }
.srch__r span { font-size: var(--t-xs); color: var(--ink-mute); }
.srch__r i { margin-left: auto; font-style: normal; font-family: var(--font-display); font-size: 1.0625rem; }
.srch__none { padding: var(--sp-8); text-align: center; color: var(--ink-mute); font-size: var(--t-sm); }

/* ---------------- article ---------------- */
.article { font-size: 1.0625rem; line-height: 1.8; color: var(--ink-soft); }
.article h2 { margin-block: var(--sp-8) var(--sp-4); color: var(--ink); }
.article h3 { margin-block: var(--sp-6) var(--sp-3); color: var(--ink); }
.article p { margin-bottom: var(--sp-4); }
.article ul { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.article ul li { display: flex; gap: var(--sp-3); }
.article ul li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: .72em; border-radius: 50%; background: var(--sprout); }
.article strong { color: var(--ink); font-weight: 700; }
.article__lead { font-size: var(--t-lead); color: var(--ink); margin-bottom: var(--sp-6); }
.article blockquote {
  margin: var(--sp-6) 0; padding: var(--sp-5) var(--sp-6);
  background: var(--paper-warm); border-left: 2px solid var(--sprout);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-family: var(--font-display); font-size: 1.25rem; line-height: 1.5; color: var(--ink);
}

/* ---------------- responsive ---------------- */
/* sibling-category chips (mobile only) */
.chips { display: none; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-3); margin-bottom: var(--sp-4); }
.chips::-webkit-scrollbar { display: none; }
.chips a {
  flex: none; padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
  background: var(--surface);
}
.chips a[aria-current="page"] { background: var(--moss); color: var(--paper); border-color: var(--moss); }

@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .chips { display: flex; }
  .shop { display: flex; flex-direction: column; }
  .shop > * { min-width: 0; width: 100%; }
  .side { order: 2; padding-top: var(--sp-6); border-top: 1px solid var(--line-soft); }
  .cat--xl { grid-column: span 2; grid-row: span 2; }
  .ftr__top { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
  .shop { grid-template-columns: 1fr; }
  .side { position: static; }
  .side__list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); display: grid; gap: var(--sp-2); }
  .cal { grid-template-columns: 1fr; }
  .cal__months { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .hdr__nav { display: none; }
  .hdr__burger { display: grid; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-4); }
  .hero__scroll { display: none; }
  .split { grid-template-columns: 1fr; }
  .split--r > :first-child { order: 0; }
  .pdp { grid-template-columns: 1fr; }
  .pdp__media { position: static; }
  .tl__i { grid-template-columns: 1fr; gap: var(--sp-2); }
  .rail { grid-auto-columns: minmax(210px, 68%); }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: minmax(200px, auto); }
  .cat--xl, .cat--w, .cat--full { grid-column: span 1; grid-row: span 1; }
  .cat--xl { min-height: 320px; }
  .grid-p { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-3); }
  .price { flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
  .price__now { font-size: 1.125rem; }
  .pcard__add { width: 34px; height: 34px; }
  .pcard__add svg { width: 16px; height: 16px; }
  .pcard__t { font-size: 0.875rem; }
  .pcard__body { padding: var(--sp-3); }
  .pcard__quick { display: none; }
  .ftr__top { grid-template-columns: 1fr; }
  .cal__months { grid-template-columns: repeat(3, 1fr); }
  .posts { grid-template-columns: 1fr; }
}


/* ---------------- safety: content must never depend on animation ------- */
@media (prefers-reduced-motion: reduce) {
  .hero__title .ln > span { transform: none; animation: none; }
  .hero__lead,
  .hero__cta,
  .hero__stats { opacity: 1; transform: none; animation: none; }
  .hero__media img { transform: none; animation: none; }
  .marq__track { animation: none; }
}
@supports not (animation-name: lnUp) {
  .hero__title .ln > span { transform: none; }
  .hero__lead, .hero__cta, .hero__stats { opacity: 1; }
}

/* article hero image */
.post-hero-wrap { border-radius: var(--r-lg); overflow: hidden; }
.post-hero { width: 100%; aspect-ratio: 16/8; object-fit: cover; }

/* ---------------- category banner ---------------- */
.cbanner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-lg);
  min-height: clamp(190px, 27vh, 300px);
  display: flex;
  align-items: flex-end;
  color: var(--paper);
  background: var(--moss);
  margin-bottom: var(--sp-7);
}
.cbanner img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.cbanner::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg, rgba(14,22,10,.88) 0%, rgba(14,22,10,.55) 46%, rgba(14,22,10,.20) 100%),
              linear-gradient(180deg, rgba(14,22,10,.10) 40%, rgba(14,22,10,.70) 100%);
}
.cbanner__in { padding: clamp(var(--sp-5), 3vw, var(--sp-8)); max-width: 62ch; }
.cbanner h1 { margin-block: var(--sp-3) var(--sp-3); }
.cbanner .lead { color: rgba(255,255,255,.86); font-size: var(--t-body); }
.cbanner .eyebrow { color: rgba(255,255,255,.7); }
@media (max-width: 620px) {
  .cbanner { min-height: 170px; border-radius: var(--r-md); }
}

/* ---------------- pagination ---------------- */
.woocommerce-pagination, .pagination, .navigation.pagination {
  margin-top: var(--sp-8);
  display: flex;
  justify-content: center;
}
.woocommerce-pagination ul, .nav-links {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
}
.woocommerce-pagination li { list-style: none; }
.woocommerce-pagination a, .woocommerce-pagination span,
.nav-links a, .nav-links span {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 600;
  background: var(--surface);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.woocommerce-pagination a:hover, .nav-links a:hover {
  border-color: var(--sprout);
  color: var(--sprout-deep);
}
.woocommerce-pagination .current, .nav-links .current {
  background: var(--moss);
  color: var(--paper);
  border-color: var(--moss);
}

/* ---------------- legal / article tables ---------------- */
.article table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--sp-5);
  font-size: var(--t-sm);
}
.article th, .article td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}
.article th {
  background: var(--paper-warm);
  font-weight: 700;
  color: var(--ink);
  border-bottom-color: var(--line);
}
.article tbody tr:last-child td { border-bottom: 0; }
.article code {
  background: var(--paper-warm);
  padding: .15em .45em;
  border-radius: var(--r-xs);
  font-size: .9em;
}
.article hr {
  border: 0;
  border-top: 1px solid var(--line-soft);
  margin-block: var(--sp-6);
}
.article a { color: var(--clay); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   Scrollbars — part of the design, not a browser leftover.

   Chrome ignores ::-webkit-scrollbar as soon as the standard
   scrollbar-width / scrollbar-color are set on the same element, and falls
   back to its own rendering (complete with stepper arrows). So: webkit
   pseudo-elements everywhere, standard properties fenced off for Firefox.
   ============================================================ */

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper-warm); }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border: 3px solid var(--paper-warm);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: var(--paper-warm); }

/* Horizontal product rails — the bar doubles as a progress indicator */
.rail { padding-bottom: var(--sp-4); }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-track {
  background: var(--line-soft);
  border-radius: var(--r-pill);
}
.rail::-webkit-scrollbar-thumb {
  background: var(--sprout);
  border: 0;
  border-radius: var(--r-pill);
}
.rail::-webkit-scrollbar-thumb:hover { background: var(--sprout-deep); }

.band-warm .rail::-webkit-scrollbar-track { background: var(--paper-deep); }

.band-dark .rail::-webkit-scrollbar-track { background: var(--moss-line); }
.band-dark ::-webkit-scrollbar-track { background: var(--moss-line); }
.band-dark ::-webkit-scrollbar-thumb { background: var(--sprout); border-color: var(--moss-line); }

/* Cart drawer and search results sit on a light panel — keep them quiet */
.cart__body, .srch__res { scroll-behavior: smooth; }
.cart__body::-webkit-scrollbar,
.srch__res::-webkit-scrollbar { width: 8px; }
.cart__body::-webkit-scrollbar-track,
.srch__res::-webkit-scrollbar-track { background: transparent; }
.cart__body::-webkit-scrollbar-thumb,
.srch__res::-webkit-scrollbar-thumb {
  background: var(--line);
  border: 2px solid var(--paper);
  border-radius: var(--r-pill);
}
.cart__body::-webkit-scrollbar-thumb:hover,
.srch__res::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); }

/* Wide tables inside legal pages */
.article div[style*="overflow-x"] { padding-bottom: var(--sp-2); }
.article div[style*="overflow-x"]::-webkit-scrollbar { height: 8px; }
.article div[style*="overflow-x"]::-webkit-scrollbar-track {
  background: var(--paper-warm);
  border-radius: var(--r-pill);
}
.article div[style*="overflow-x"]::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: var(--r-pill);
}

/* Category chips stay clean — the row is short and self-evident */
.chips::-webkit-scrollbar { display: none; }

/* Firefox has no pseudo-elements for scrollbars; give it the token colours. */
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; scrollbar-color: var(--line) var(--paper-warm); }
  .rail { scrollbar-color: var(--sprout) var(--line-soft); }
  .band-warm .rail { scrollbar-color: var(--sprout) var(--paper-deep); }
  .band-dark .rail { scrollbar-color: var(--sprout) var(--moss-line); }
  .cart__body, .srch__res { scrollbar-color: var(--line) transparent; }
  .chips { scrollbar-width: none; }
}

/* Touch devices overlay their own bars; keep the rail hint subtle */
@media (hover: none) {
  .rail::-webkit-scrollbar { height: 4px; }
}