/* Rep Nineteen — site styles. Builds on brand/tokens.css.
   Look: UI mockups round 4 — black ground, bone panels, burnt-rust accents,
   condensed caps, wide-tracked mono. Separation from hairlines and space:
   no gradients, glows or shadows. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
/* Card and button links carry no underline; running-text links use .link. */
:where(a[class]) { text-decoration: none; }
button { font: inherit; }
[hidden] { display: none !important; }

::selection { background: var(--accent); color: var(--ink-on-accent); }

:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Layout + text helpers ---------- */

:root { --gutter: var(--space-12); } /* side space on every page; phones get less below */
.wrap { max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter); }

.section { padding: var(--space-20) 0; }
.section-tight { padding: var(--space-12) 0; }
.section-flush { padding-top: 0; }

.section-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-content: start; }
.section-row {
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.ink { color: var(--ink-primary); }
.muted { color: var(--ink-muted); }
.subtle { color: var(--ink-subtle); }
.body-copy { color: var(--ink-body); }
.accent-text { color: var(--accent-strong); }

.rule-bar { width: 48px; height: 5px; background: var(--accent); margin: var(--space-8) 0 var(--space-6); }

.skip {
  position: absolute; left: var(--space-4); top: -48px; z-index: 10;
  padding: var(--space-2) var(--space-3);
  background: var(--ink-primary); color: var(--ink-inverse); text-decoration: none;
}
.skip:focus { top: var(--space-4); }

/* ---------- Wordmark: set type, stacked ---------- */

.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font: 900 28px/0.82 var(--font-display);
  font-stretch: 72%;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* ---------- Announcement bar ---------- */

.announce {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: var(--space-2) var(--space-12);
  padding: 10px var(--space-4);
  background: var(--accent); color: var(--ink-on-accent);
  font-size: 11px; text-align: center;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  background: var(--surface-base);
  border-bottom: 1px solid var(--hairline);
}

.header-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "nav brand actions";
  align-items: center;
  gap: var(--space-4);
  padding-block: 20px;
}
.site-nav { grid-area: nav; }
.brand { grid-area: brand; text-decoration: none; }
.header-actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-6); }

.nav { display: flex; gap: 28px; }
.nav a, .nav-link { text-decoration: none; color: var(--ink-muted); white-space: nowrap; }
.nav a:hover, .nav-link:hover, .nav a[aria-current] { color: var(--ink-primary); }

.cart {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 10px 14px;
  background: var(--ink-primary); color: var(--ink-inverse);
  border-radius: var(--radius-md);
  text-decoration: none;
}
.cart-count {
  padding: 1px 6px;
  background: var(--accent); color: var(--ink-on-accent);
  border-radius: var(--radius-sm);
  letter-spacing: 0;
}

/* Header search: looks like a field, opens the search dialog. */
.search-bar {
  display: flex; align-items: center; gap: var(--space-3);
  width: clamp(170px, 18vw, 320px); min-height: 42px; padding: 0 var(--space-3);
  background: var(--surface-raised); color: var(--ink-subtle);
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-md);
  font: 400 14px/1 var(--font-text); text-align: left; cursor: text;
}
.search-bar:hover { border-color: var(--ink-muted); color: var(--ink-muted); }
.search-bar:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 1px; }
.search-bar svg { flex: none; color: var(--ink-muted); }
.search-bar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-bar-key { flex: none; padding: 2px 7px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); color: var(--ink-subtle); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4);
  min-height: 56px;
  padding: 18px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: 800 17px/1 var(--font-display);
  font-stretch: 80%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  /* Settling back down is 1.5x faster than the lift. */
  transition: background-color 120ms, color 120ms, border-color 120ms,
              transform 170ms cubic-bezier(0.4, 0, 1, 1);
}

.btn-accent { background: var(--accent); color: var(--ink-on-accent); }
.btn-accent:hover { background: var(--accent-hover); }

.btn-ink { background: var(--ink-inverse); color: var(--surface-bone); }
.btn-ink:hover { background: var(--accent); color: var(--ink-on-accent); }

.btn-outline { background: transparent; color: var(--ink-primary); border-color: var(--hairline-strong); font-size: 15px; min-height: 48px; padding: 14px 20px; }
.btn-outline:hover { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); }

.btn-block { width: 100%; }

/* Motion borrowed from liquid-buttons: lift on hover, slam down on click,
   bounce, then a full flip. Movement only, so still no shadow or glow. */
.btn:hover {
  transform: translateY(-3px);
  transition: background-color 120ms, color 120ms, border-color 120ms,
              transform 260ms cubic-bezier(0.45, 0, 0.55, 1) 100ms;
}

.btn.is-pressed { animation: btn-press 950ms linear; }

/* 0.11s slam · 0.22s bounce · 0.62s flip */
@keyframes btn-press {
  0%    { transform: perspective(600px) translateY(-3px) scale(1, 1)       rotateX(0);      animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  11.6% { transform: perspective(600px) translateY(2px)  scale(1.02, 0.88) rotateX(0);      animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1); }
  23%   { transform: perspective(600px) translateY(-2px) scale(1, 1)       rotateX(0);      animation-timing-function: ease-in-out; }
  34.7% { transform: perspective(600px) translateY(0)    scale(1, 1)       rotateX(0);      animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100%  { transform: perspective(600px) translateY(0)    scale(1, 1)       rotateX(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
  .btn.is-pressed { animation: none; }
}

.text-link {
  color: var(--ink-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: 3px;
  white-space: nowrap;
}
.text-link:hover { border-color: var(--ink-primary); }

.link {
  color: var(--ink-primary);
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
}
.link:hover { text-decoration-color: var(--ink-primary); }

/* Chips: radio options and filter buttons share one look. */
.chip { position: relative; display: block; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span, .chip-btn {
  display: block;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms, color 120ms;
}
.chip:hover span, .chip-btn:hover { border-color: var(--ink-muted); color: var(--ink-primary); }
.chip input:checked + span, .chip-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); }
.chip input:focus-visible + span { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
.chip-soon { cursor: not-allowed; }
.chip-soon span { border-style: dashed; color: var(--ink-subtle); }
.chip-soon:hover span { border-color: var(--hairline-strong); color: var(--ink-subtle); }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.tag {
  display: inline-block;
  padding: 5px 8px;
  background: var(--ink-primary); color: var(--ink-inverse);
  font-size: 10px; letter-spacing: 0.14em;
}

/* Stat cells: condensed figure over a mono label, ruled with hairlines. */
.stat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--hairline-strong);
}
.stat-grid-4 { grid-template-columns: repeat(4, 1fr); }
.stat-grid > div {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-1);
  padding: var(--space-4);
}
.stat-grid > div + div { border-left: 1px solid var(--hairline-strong); }
.stat-grid .spec-label { font-size: 10px; letter-spacing: 0.14em; }
.stat-grid .stat { font-size: clamp(26px, 2.5vw, 40px); white-space: nowrap; }

/* ---------- Hero: photo as background ----------
   The photo is 16:9 and fills the width, so the tub sits from about 34% of the
   viewport width. The copy column stays left of it on the dark part of the frame,
   with no overlay: the photo is dimmed evenly instead of with a gradient. */

.hero-bg {
  --col: calc(33.75vw - 88px);
  position: relative;
  height: min(56.25vw, 820px);
  min-height: 640px;
  overflow: hidden;
  background: var(--surface-base);
}
.hero-bg-media { position: absolute; inset: 0; }
.hero-bg-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  filter: brightness(0.8);
}
.hero-bg-inner {
  position: relative; height: 100%;
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-8);
  padding: var(--space-12) var(--space-12) var(--space-8);
}
.hero-bg-copy { display: flex; flex-direction: column; gap: var(--space-4); align-self: center; width: max(var(--col), 330px); }
.hero-bg-title { font-size: min(calc(var(--col) / 4.4), 112px); }
.hero-bg-copy .rule-bar { margin: var(--space-2) 0; }
.hero-bg-copy .body-lg { color: var(--ink-primary); }
.hero-bg-copy .actions { margin-top: var(--space-4); }
.hero-stats { flex: none; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }

.stat-row {
  display: flex; gap: 1px;
  background: var(--hairline-strong);
  border: 1px solid var(--hairline-strong);
}
.stat-row > div {
  display: flex; flex-direction: column-reverse; gap: var(--space-1);
  padding: 14px 18px;
  background: var(--surface-base);
}
.stat-row .stat { font-size: 30px; white-space: nowrap; }

/* Rep counter: 19 ticks, the programme ends at 12, the 19th is rust. */
.reps { margin-top: var(--space-16); }
.reps-strip { margin-top: 0; padding-block: var(--space-8) var(--space-12); }
.reps-track { display: grid; grid-template-columns: repeat(19, 1fr); gap: var(--space-1); height: 48px; align-items: end; }
.reps-track li { height: 20px; background: var(--hairline); }
.reps-track li.is-over { height: 28px; background: var(--ink-subtle); }
.reps-track li.is-last { height: 48px; background: var(--accent); }
.reps-scale {
  display: grid; grid-template-columns: repeat(19, 1fr); gap: var(--space-1);
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}
.reps-twelve { grid-column: 12 / span 6; white-space: nowrap; }
.reps-nineteen { grid-column: 19; justify-self: end; color: var(--accent-strong); font-weight: 600; }

/* ---------- Facts strip (bone) ---------- */

.facts { background: var(--surface-bone); color: var(--ink-inverse); }
.facts-list { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1440px; margin: 0 auto; }
.facts-list li { display: flex; align-items: center; gap: var(--space-4); padding: 28px 32px; }
.facts-list li + li { border-left: 1px solid var(--hairline-bone); }
.facts-num { font: 900 34px/1 var(--font-display); font-stretch: 66%; }
.facts-num-accent { color: var(--accent); }

/* ---------- Product cards ---------- */

.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  display: flex; flex-direction: column;
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.card-media {
  position: relative; display: block;
  container-type: inline-size;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.card:hover .card-media img { transform: scale(1.04); }
.card-media .pack { height: 100%; border: 0; border-radius: 0; padding-top: 4.6em; }
.card-badge {
  position: absolute; top: 12px; left: 12px;
  padding: 5px 8px;
  background: var(--accent); color: var(--ink-on-accent);
  font-size: 10px; letter-spacing: 0.14em;
}

.card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px; }
.card-meta { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 12px; }
.card-title { font: 800 30px/0.95 var(--font-display); font-stretch: 70%; text-transform: uppercase; }
.card-title a { text-decoration: none; }
.card-title a:hover { color: var(--accent-strong); }
.card-stats { font-size: 11px; letter-spacing: 0.06em; font-weight: 400; }
.card-price { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.card-amount { font: 600 18px/1 var(--font-mono); }
.card-amount small { font-size: 11px; color: var(--ink-subtle); letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Pack: type-only label, sized in em ---------- */

.pack {
  --pack-pad: 2.4em;
  display: grid; grid-template-rows: auto 1fr auto auto; gap: 1.6em;
  aspect-ratio: 1 / 1;
  padding: var(--pack-pad);
  background: var(--surface-raised);
  color: var(--ink-primary);
  font-size: 2.85cqi; /* ~35em across: scales with its container */
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.pack-top { display: flex; justify-content: space-between; align-items: flex-start; }
.pack-mark { font: 900 3.4em/0.82 var(--font-display); font-stretch: 66%; text-transform: uppercase; }
.pack-tag {
  padding-left: 1em; border-left: 1px solid var(--hairline-strong);
  font: 600 0.72em/1.7 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-subtle);
}
.pack-mid { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; min-height: 0; }
.pack-name-wrap { display: grid; gap: 0.7em; }
.pack-name { font: 800 1.9em/0.95 var(--font-display); font-stretch: 70%; text-transform: uppercase; max-width: 8em; }
.pack-bar { width: 1.6em; height: 0.2em; background: var(--accent); }
.pack-19 { font: 900 10em/0.8 var(--font-display); font-stretch: 66%; color: var(--accent); }
.pack-facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline-strong); }
.pack-facts > div { display: flex; flex-direction: column; gap: 0.25em; padding-top: 0.9em; }
.pack-facts > div + div { padding-left: 0.9em; border-left: 1px solid var(--hairline-strong); }
.pack-facts dd { font: 900 1.75em/1 var(--font-display); font-stretch: 66%; text-transform: uppercase; }
.pack-facts dt { font: 600 0.62em/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-subtle); }
.pack-foot { display: flex; justify-content: space-between; align-items: center; }
.pack-flavour {
  padding: 0.45em 0.8em;
  background: var(--accent); color: var(--ink-on-accent);
  font: 600 0.72em/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.pack-net { font: 600 0.72em/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-subtle); }

/* ---------- Training day ---------- */

.routine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.routine-step { display: flex; flex-direction: column; background: var(--surface-raised); border-radius: var(--radius-md); overflow: hidden; }
.routine-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; container-type: inline-size; border-bottom: 1px solid var(--hairline); text-decoration: none; }
.routine-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.routine-step:hover .routine-media img { transform: scale(1.04); }
.routine-pack { display: block; height: 100%; }
.routine-pack .pack { aspect-ratio: auto; height: 100%; border: 0; border-radius: 0; font-size: 2.2cqi; }
.routine-body { display: grid; gap: var(--space-2); padding: var(--space-6); }
.routine-body h3 a { text-decoration: none; }
.routine-body h3 a:hover { color: var(--accent-strong); }

/* ---------- Split banner (bone copy | photo) ---------- */

.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  max-width: 1440px; margin: var(--space-12) auto 0;
  background: var(--surface-bone); color: var(--ink-inverse);
}
.split-copy { display: flex; flex-direction: column; justify-content: center; gap: var(--space-6); padding: var(--space-16) 56px; }
.split-copy .eyebrow, .split-copy .body-lg { color: var(--ink-on-bone-muted); }
.split-copy .body-lg { max-width: 460px; }
.split-copy .text-link { color: var(--ink-inverse); border-color: var(--ink-on-bone-muted); }
.split-media { position: relative; min-height: 520px; overflow: hidden; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Shop by category: photo tiles ---------- */

.cat-head { margin-bottom: var(--space-6); }
.cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.cat {
  position: relative; display: block;
  aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  text-decoration: none;
}
.cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.cat:hover img { transform: scale(1.05); }
.cat-label {
  position: absolute; left: var(--space-4); bottom: var(--space-4);
  display: grid; gap: var(--space-1);
  padding: 14px 18px;
  background: var(--surface-base);
  border-radius: var(--radius-sm);
  transition: background-color 150ms;
}
.cat:hover .cat-label { background: var(--accent); }
.cat:hover .cat-label .muted { color: var(--ink-on-accent); }
.cat-type { display: grid; place-items: center; }
.cat-big { font: 900 clamp(96px, 14vw, 220px)/1 var(--font-display); font-stretch: 66%; color: var(--accent); text-transform: uppercase; margin-bottom: 20%; }

/* ---------- Batch check ---------- */

.proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-4); }

.proof-check {
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-12);
  background: var(--surface-bone); color: var(--ink-inverse);
  border-radius: var(--radius-md);
}
.proof-check .eyebrow, .proof-check .body-lg { color: var(--ink-on-bone-muted); }
.proof-check .body-lg { max-width: 440px; }

.lookup { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-top: auto; }
.lookup-row { display: flex; gap: 10px; }
.lookup input {
  flex: 1; min-width: 0; min-height: 56px;
  padding: 0 var(--space-4);
  background: transparent; color: var(--ink-inverse);
  border: 1.5px solid var(--ink-inverse);
  border-radius: var(--radius-md);
  font-size: 14px;
}
.lookup input::placeholder { color: var(--ink-on-bone-muted); }
.lookup input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.proof-check .link { color: var(--ink-inverse); text-decoration-color: var(--ink-inverse); }
#lookup-result:empty { display: none; }
.proof-check #lookup-result { color: var(--ink-inverse); }

.proof-batch {
  display: flex; flex-direction: column;
  padding: 40px 44px;
  background: var(--surface-raised);
  border-radius: var(--radius-md);
}
.proof-batch-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); padding-bottom: var(--space-6); }

.batch-table { width: 100%; border-collapse: collapse; }
.batch-table th, .batch-table td { padding: 14px var(--space-3) 14px 0; text-align: left; border-bottom: 1px solid var(--hairline); font-weight: 400; }
.batch-table thead th { border-bottom-color: var(--hairline-strong); padding-top: 0; }
.batch-table tbody th { font: 400 16px/1.4 var(--font-text); }
.batch-table td:last-child { text-align: right; padding-right: 0; }
.coa-link { color: var(--accent-strong); text-decoration: none; white-space: nowrap; }
.coa-link:hover { color: var(--ink-primary); }

.batch-meta { border-top: 1px solid var(--hairline-strong); }
.batch-meta > div { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-4); padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.tested-head { margin: var(--space-8) 0 var(--space-2); }
.tested-list li { display: grid; grid-template-columns: 48px 1fr; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--hairline); }

/* ---------- FAQ ---------- */

#faq { border-top: 1px solid var(--hairline); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-12); }
.faq { border-top: 1px solid var(--hairline-strong); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { display: flex; justify-content: space-between; gap: var(--space-4); padding: 22px 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 600 18px/1.55 var(--font-mono); color: var(--ink-subtle); }
.faq details[open] summary::after { content: "−"; color: var(--accent-strong); }
.faq summary:hover::after { color: var(--ink-primary); }
.faq details p { padding: 0 var(--space-12) 22px 0; max-width: 62ch; }

/* ---------- Shop page ---------- */

.shop-banner { padding: var(--space-16) 0 var(--space-12); }
.shop-banner-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-12); }
.shop-title { font-size: clamp(64px, 9vw, 130px); }
.shop-lede { max-width: 420px; }
.shop-bar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-4) 0; margin-bottom: var(--space-6);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}

/* ---------- Product page ---------- */

.draft-note {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 6px var(--space-4);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-subtle); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
.draft-note::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.crumb { padding-block: 18px; text-transform: uppercase; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--ink-primary); }

.pdp {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  max-width: 1440px; margin: 0 auto;
  border-top: 1px solid var(--hairline);
}

.gallery {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-12);
  border-right: 1px solid var(--hairline);
}
.gallery-thumbs { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 112px; }
.thumb {
  display: block; padding: 0; aspect-ratio: 1 / 1; overflow: hidden;
  container-type: inline-size;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.thumb[aria-selected="true"] { border-color: var(--ink-primary); outline: 1px solid var(--ink-primary); }
.thumb:hover { border-color: var(--ink-muted); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .pack { border: 0; border-radius: 0; height: 100%; }
.gallery-main {
  position: sticky; top: 112px;
  container-type: inline-size;
  aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--surface-raised);
  border-radius: var(--radius-md);
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-main .pack { height: 100%; border: 0; }

.pdp-info { display: flex; flex-direction: column; gap: var(--space-6); padding: 40px var(--space-12) var(--space-12); }
.pdp-head { display: grid; gap: var(--space-3); justify-items: start; }
.pdp-title { font-size: clamp(52px, 6vw, 104px); }

.price-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.price { display: flex; align-items: baseline; gap: var(--space-3); }
.price-amount { font: 900 56px/1 var(--font-display); font-stretch: 66%; font-variant-numeric: tabular-nums; }

.buy { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.options { margin: 0; padding: 0; border: 0; min-width: 0; }
.options legend { margin-bottom: var(--space-3); padding: 0; font-size: 11px; }
.option-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.buy-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.buy-row .btn-cart { flex-basis: 140px; }
.qty { display: flex; align-items: center; border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); }
.qty-btn { width: 44px; height: 100%; background: none; border: 0; color: var(--ink-primary); font: 600 18px/1 var(--font-mono); cursor: pointer; }
.qty-btn:hover { color: var(--accent-strong); }
.qty-val { min-width: 32px; text-align: center; font: 600 16px/1 var(--font-mono); }
.btn-cart { flex: 1; min-width: 0; justify-content: space-between; min-height: 64px; font-size: 20px; }
.btn-cart span:last-child { font: 600 16px/1 var(--font-mono); letter-spacing: 0.02em; }
#cart-status:empty { display: none; }

.trust-row { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--hairline); }
.trust-row li { display: grid; gap: 2px; padding: 14px var(--space-4); }
.trust-row li + li { border-left: 1px solid var(--hairline); }
.trust-row .spec-label { font-size: 11px; letter-spacing: 0.14em; }
.trust-row a { text-decoration: none; }
.trust-row a:hover { color: var(--ink-primary); }

.pdp-acc { border-top: 1px solid var(--hairline); }
.pdp-acc details { border-bottom: 1px solid var(--hairline); }
.pdp-acc summary { display: flex; justify-content: space-between; padding: 16px 0; cursor: pointer; list-style: none; color: var(--ink-primary); }
.pdp-acc summary::-webkit-details-marker { display: none; }
.pdp-acc summary::after { content: "+"; font: 600 16px/1 var(--font-mono); color: var(--ink-subtle); }
.pdp-acc details[open] summary::after { content: "−"; }
.pdp-acc p { padding-bottom: var(--space-3); max-width: 60ch; }
.pdp-acc p + p { margin-top: calc(-1 * var(--space-2)); }

/* Key-number strip. The track holds the set twice and slides one set width. */
.marquee { overflow: hidden; background: var(--accent); color: var(--ink-on-accent); border-block: 1px solid var(--accent); }
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee-set { display: flex; align-items: center; gap: var(--space-8); padding: 22px var(--space-8) 22px 0; }
.marquee-set span { font: 900 40px/1 var(--font-display); font-stretch: 66%; text-transform: uppercase; white-space: nowrap; }
.marquee-set span[aria-hidden] { opacity: 0.55; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* Per-scoop panel (bone). */
.panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 1440px; margin: 0 auto;
  background: var(--surface-bone); color: var(--ink-inverse);
}
.panel-copy { padding: var(--space-16) 56px; }
.panel-copy .eyebrow { color: var(--ink-on-bone-muted); margin-bottom: 14px; }
.panel-copy h2 { margin-bottom: 28px; font-size: 72px; }
.dose-table { width: 100%; border-collapse: collapse; font: 400 14px/1.5 var(--font-mono); }
.dose-table tr { border-top: 1px solid var(--hairline-bone); }
.dose-table tr:first-child { border-top: 1.5px solid var(--ink-inverse); }
.dose-table tr:last-child { border-bottom: 1px solid var(--hairline-bone); }
.dose-table th, .dose-table td { padding: 16px 0; text-align: left; vertical-align: top; font-weight: 400; }
.dose-table th b { display: block; font-weight: 600; }
.dose-table th span { display: block; font-size: 12px; color: var(--ink-on-bone-muted); }
.dose-table td { text-align: right; white-space: nowrap; padding-left: var(--space-6); font-weight: 600; }
.panel-media { position: relative; min-height: 560px; overflow: hidden; background: var(--surface-base); }
.panel-media img { width: 100%; height: 100%; object-fit: cover; }
.panel-pack { display: grid; place-items: center; height: 100%; padding: var(--space-12); }
.pack-wrap { width: min(100%, 520px); container-type: inline-size; }

/* Built-this-way: big headline accordions. */
.points-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-12); }
.points { border-top: 1px solid var(--hairline-strong); }
.points details { border-bottom: 1px solid var(--hairline); }
.points summary { display: flex; align-items: baseline; gap: var(--space-6); padding: 24px 0; cursor: pointer; list-style: none; }
.points summary::-webkit-details-marker { display: none; }
.points summary::after { content: "+"; margin-left: auto; font: 600 20px/1 var(--font-mono); color: var(--ink-subtle); }
.points details[open] summary::after { content: "−"; color: var(--accent-strong); }
.point-title { font: 800 40px/0.95 var(--font-display); font-stretch: 70%; text-transform: uppercase; }
.points summary:hover .point-title { color: var(--accent-strong); }
.points details p { padding: 0 var(--space-12) 28px calc(var(--space-6) + 2ch); max-width: 64ch; }

/* Batch report block. */
.batch-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-4); align-items: stretch; }
.batch-card-lg { display: flex; flex-direction: column; gap: var(--space-6); padding: 40px 44px; background: var(--surface-raised); border-radius: var(--radius-md); }
.batch-code { font: 600 clamp(32px, 3.6vw, 52px)/1 var(--font-mono); letter-spacing: -0.02em; color: var(--accent-strong); overflow-wrap: anywhere; }
.batch-card-lg .batch-meta { margin-top: auto; }
.batch-copy { display: flex; flex-direction: column; justify-content: center; gap: var(--space-6); padding: 40px 44px; border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.batch-copy .body-lg { max-width: 520px; }

.advisory {
  display: grid; grid-template-columns: 160px 1fr; gap: var(--space-6);
  padding-block: var(--space-6);
  border-block: 1px solid var(--hairline);
}
.advisory .body-sm { max-width: 90ch; }

/* Mobile sticky buy bar. */
.sticky-buy { display: none; }

/* ---------- Loader: the 19, flickering on ----------
   Covers only the box that is still loading. No glow: the "light" is the
   mark switching between an unlit hairline grey and lit rust. */

.loader {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  background: var(--surface-raised);
  pointer-events: none;
  transition: opacity 250ms ease;
}
.loader.is-done { opacity: 0; }
.loader svg { width: clamp(28px, 14%, 56px); height: auto; overflow: visible; }
.loader-one, .loader-nine { color: var(--hairline-strong); fill: currentColor; }
.loader-one  { animation: r19-flicker-one 1.9s infinite; }
.loader-nine { animation: r19-flicker-nine 1.9s infinite; }

/* Irregular on/off steps read as a tube light striking, then holding. */
@keyframes r19-flicker-one {
  0%, 6%   { color: var(--hairline-strong); }
  8%       { color: var(--accent); }
  10%      { color: var(--hairline-strong); }
  14%      { color: var(--accent-strong); }
  16%      { color: var(--hairline); }
  20%, 78% { color: var(--accent); }
  80%      { color: var(--hairline-strong); }
  82%, 90% { color: var(--accent); }
  92%, 100% { color: var(--hairline-strong); }
}
@keyframes r19-flicker-nine {
  0%, 26%  { color: var(--hairline-strong); }
  28%      { color: var(--accent-strong); }
  30%      { color: var(--hairline); }
  33%      { color: var(--accent); }
  35%      { color: var(--hairline-strong); }
  38%, 84% { color: var(--accent); }
  86%      { color: var(--hairline-strong); }
  88%, 90% { color: var(--accent); }
  92%, 100% { color: var(--hairline-strong); }
}
.loader-one, .loader-nine { animation-timing-function: steps(1, end); }

/* Hero: the copy sits on the photo, so the loader is see-through and centred
   on the tub side of the frame rather than covering the headline. */
.hero-bg-media .loader { background: transparent; left: 34%; }
.hero-bg-media .loader svg { width: 72px; }

/* Product page placeholder while the details render. */
.loader-block { position: relative; min-height: 70vh; }
.loader-block .loader { background: transparent; }
.loader-block .loader svg { width: 64px; }

@media (prefers-reduced-motion: reduce) {
  .loader-one, .loader-nine { animation: none; color: var(--accent); }
  .loader svg { opacity: 0.6; }
}

/* ---------- Footer ---------- */

.site-footer { padding: var(--space-16) 0 var(--space-8); border-top: 1px solid var(--hairline); }
.footer-top { display: grid; grid-template-columns: 1.4fr 3fr; gap: var(--space-12); margin-bottom: var(--space-16); }
.footer-brand { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-content: start; }
.footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-12); }
.footer-nav h2 { margin-bottom: var(--space-4); color: var(--ink-primary); font-size: 13px; letter-spacing: 0.06em; }
.footer-nav ul { display: grid; gap: 10px; }
.footer-nav li { font: 400 13px/1.5 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { color: var(--ink-primary); }
.footer-mark { font: 900 clamp(min(120px, 42vw), 18vw, 260px)/0.84 var(--font-display); font-stretch: 62%; letter-spacing: -0.02em; text-transform: uppercase; }
.footer-mark span { color: var(--accent); }
.footer-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-8); padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
}

/* ---------- Responsive ---------- */

@media (max-width: 1200px) {
  /* The menu gets its own scrollable row once it can't share one with the actions. */
  .header-row {
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand actions" "nav nav";
    row-gap: var(--space-3);
    padding-bottom: 0;
  }
  .site-nav { overflow-x: auto; margin-inline: calc(-1 * var(--space-4)); padding: 0 var(--space-4) var(--space-3); scrollbar-width: none; }
  .nav { gap: var(--space-6); }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .proof, .faq-grid, .points-grid, .batch-block, .pdp, .panel, .split { grid-template-columns: minmax(0, 1fr); }
  /* Below 1100px the copy no longer fits beside the tub: stack photo over copy. */
  .hero-bg { height: auto; min-height: 0; }
  .hero-bg-media { position: relative; aspect-ratio: 16 / 9; }
  .hero-bg-media .loader { left: 0; }
  .hero-bg-img { filter: none; }
  .hero-bg-inner { flex-direction: column; align-items: stretch; padding: var(--space-8) var(--space-12) var(--space-6); }
  .hero-bg-copy { width: auto; max-width: 620px; }
  .hero-bg-title { font-size: clamp(56px, 11vw, 104px); }
  .hero-stats { align-self: flex-start; }
  .split-media { min-height: 380px; order: -1; }
  .routine { grid-template-columns: minmax(0, 1fr); }
  .routine-step { flex-direction: row; }
  .routine-media { flex: 0 0 38%; aspect-ratio: auto; min-height: 220px; border-bottom: 0; border-right: 1px solid var(--hairline); }
  .facts-list { grid-template-columns: 1fr 1fr; }
  .facts-list li:nth-child(3) { border-left: 0; }
  .facts-list li:nth-child(n+3) { border-top: 1px solid var(--hairline-bone); }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .gallery { border-right: 0; padding-right: var(--space-12); }
  .gallery-thumbs { position: static; }
  .gallery-main { position: relative; top: auto; }
  .panel-media { min-height: 420px; }
  .card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .card-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .cat-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .shop-banner-row, .section-row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
  :root { --gutter: clamp(20px, 6vw, 24px); }
  .section { padding: var(--space-12) 0; }
  .display-lg { font-size: clamp(36px, 14vw, 52px); }
  .hide-sm { display: none; }
  .announce { gap: 2px var(--space-3); font-size: 10px; letter-spacing: 0.14em; }
  .hero-bg-inner { padding-inline: var(--gutter); }
  .hero-stats { align-self: stretch; }
  .stat-row .spec-label { font-size: 10px; letter-spacing: 0.1em; }
  .routine-step { flex-direction: column; }
  .routine-media { flex: none; aspect-ratio: 4 / 3; min-height: 0; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .cat-grid { grid-template-columns: minmax(0, 1fr); }
  .cat { aspect-ratio: 4 / 3; }
  .split-copy { padding: var(--space-12) var(--space-4); }
  .stat-row > div { flex: 1; min-width: 0; padding: 12px; }
  .lookup .btn { padding-inline: 20px; }
  .reps-twelve { grid-column: 8 / span 10; justify-self: end; }
  .facts-list li { padding: 20px var(--space-4); gap: var(--space-3); }
  .card-grid { grid-template-columns: minmax(0, 1fr); }
  .stat-grid, .stat-grid-4 { grid-template-columns: 1fr 1fr; }
  .stat-grid > div:nth-child(3) { border-left: 0; }
  .stat-grid > div:nth-child(n+3) { border-top: 1px solid var(--hairline-strong); }
  .trust-row { grid-template-columns: 1fr; }
  .trust-row li + li { border-left: 0; border-top: 1px solid var(--hairline); }
  .proof-check, .proof-batch, .batch-card-lg, .batch-copy { padding: var(--space-8) var(--space-6); }
  .batch-meta > div { grid-template-columns: 1fr; gap: 2px; }
  .batch-table thead { display: none; }
  .batch-table tr { display: grid; grid-template-columns: 1fr auto; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
  .batch-table th, .batch-table td { border: 0; padding: 2px 0; }
  .batch-table td:last-child { grid-row: 1; grid-column: 2; }
  .faq details p { padding-right: 0; }
  .footer-nav { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .panel-copy { padding: var(--space-12) var(--space-4); }
  .panel-copy h2 { font-size: 52px; }
  .panel-media { min-height: 320px; }
  .gallery { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  .gallery-thumbs { order: 2; flex-direction: row; overflow-x: auto; }
  .thumb { flex: 0 0 64px; }
  .pdp-info { padding: var(--space-6) var(--space-4) var(--space-12); }
  .point-title { font-size: 30px; }
  .points details p { padding: 0 0 22px; }
  .advisory { grid-template-columns: 1fr; gap: var(--space-2); }
  .marquee-set span { font-size: 30px; }

  .sticky-buy {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
    display: grid; gap: 8px;
    padding: 12px var(--space-4) calc(12px + env(safe-area-inset-bottom));
    background: var(--surface-base);
    border-top: 1px solid var(--hairline-strong);
    transform: translateY(100%);
    transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .sticky-buy.is-on { transform: none; }
  .sticky-buy .btn-cart { min-height: 52px; font-size: 16px; }
}

/* ---------- Form fields (shared) ---------- */

.inline-field { display: flex; gap: var(--space-2); }
.inline-field input { flex: 1; width: 100%; min-width: 0; }
.inline-field input, .field input, .unit-field input, .offline-form textarea, .select-field select, .stack select, .plan select {
  min-height: 48px;
  padding: 0 var(--space-4);
  background: var(--surface-sunken);
  color: var(--ink-primary);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  font: 400 15px/1.4 var(--font-text);
}
.offline-form textarea { width: 100%; padding: var(--space-3) var(--space-4); resize: vertical; }
.inline-field input::placeholder, .offline-form textarea::placeholder, .unit-field input::placeholder { color: var(--ink-subtle); }
.inline-field input:focus-visible, .offline-form textarea:focus-visible, select:focus-visible, .unit-field input:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 1px; }
select { cursor: pointer; }
.offline-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
[data-offline-msg]:empty, [data-pin-result]:empty { display: none; }

.btn-sm { min-height: 48px; padding: 12px 18px; font-size: 14px; }
.icon-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  background: none; color: var(--ink-muted);
  border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer; font: 600 16px/1 var(--font-mono);
}
.icon-btn:hover { color: var(--ink-primary); border-color: var(--hairline-strong); }
.link-btn { background: none; border: 0; padding: 0; color: var(--ink-subtle); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--ink-primary); }

/* ---------- Header: Shop drop-down ---------- */

.nav-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-muted); white-space: nowrap;
}
.nav-btn:hover, .nav-btn[aria-expanded="true"], .nav-btn[aria-current] { color: var(--ink-primary); }
.nav a[aria-current], .nav-btn[aria-current] { color: var(--ink-primary); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 8px; }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface-base);
  border-bottom: 1px solid var(--hairline);
  border-top: 1px solid var(--hairline);
}
.mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: var(--space-8); padding-block: var(--space-8); }
.mega ul { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.mega ul a { text-decoration: none; color: var(--ink-body); font: 400 16px/1.3 var(--font-text); }
.mega ul a:hover { color: var(--ink-primary); text-decoration: underline; text-underline-offset: 3px; }
.mega-feature { position: relative; display: block; min-height: 220px; overflow: hidden; border-radius: var(--radius-md); text-decoration: none; }
.mega-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mega-feature-label { position: absolute; left: var(--space-3); bottom: var(--space-3); display: grid; gap: 2px; padding: 12px 14px; background: var(--surface-base); border-radius: var(--radius-sm); }
.mega-feature:hover .mega-feature-label { background: var(--accent); }
.mega-feature:hover .mega-feature-label .muted { color: var(--ink-on-accent); }

/* ---------- Dialogs: cart drawer, picker, search ---------- */

dialog { color: var(--ink-primary); }
dialog::backdrop { background: rgba(0, 0, 0, 0.72); }

.drawer {
  margin: 0 0 0 auto; padding: 0;
  width: min(440px, 100vw); max-width: 100vw; height: 100%; max-height: 100%;
  background: var(--surface-base);
  border: 0; border-left: 1px solid var(--hairline);
}
.drawer[open] { animation: drawer-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes drawer-in { from { transform: translateX(100%); } }
.drawer-panel { display: flex; flex-direction: column; height: 100%; }
.drawer-head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--hairline);
}
.drawer-body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-6); display: grid; align-content: start; gap: var(--space-6); }
.drawer-foot { padding: var(--space-4) var(--space-6) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--hairline); display: grid; gap: var(--space-3); }
.drawer-foot:empty { display: none; }

.cart-empty { display: grid; gap: var(--space-4); justify-items: start; padding-top: var(--space-8); }
.ship-bar { display: grid; gap: var(--space-2); }
.ship-track { height: 6px; background: var(--hairline); border-radius: var(--radius-sm); overflow: hidden; }
.ship-track span { display: block; height: 100%; background: var(--accent); }

.cart-lines { display: grid; }
.cart-line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info price" "qty remove";
  gap: var(--space-2) var(--space-4); align-items: center;
  padding: var(--space-4) 0; border-bottom: 1px solid var(--hairline);
}
.cart-line-info { grid-area: info; }
.cart-line-name { font: 800 20px/1 var(--font-display); font-stretch: 70%; text-transform: uppercase; text-decoration: none; }
.cart-line-name:hover { color: var(--accent-strong); }
.cart-line-price { grid-area: price; font-weight: 600; }
.cart-line .qty { grid-area: qty; justify-self: start; }
.cart-line [data-remove] { grid-area: remove; justify-self: end; }
.qty-sm { height: 36px; }
.qty-sm .qty-btn { width: 36px; }

.cart-addons { display: grid; gap: var(--space-2); }
.cart-addon { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--surface-raised); border-radius: var(--radius-md); }
.cart-sum { display: grid; gap: var(--space-1); }
.cart-sum > div { display: flex; justify-content: space-between; }
.cart-total { padding-top: var(--space-2); margin-top: var(--space-1); border-top: 1px solid var(--hairline); align-items: baseline; }
.cart-total dd { font: 900 32px/1 var(--font-display); font-stretch: 66%; }
.cart-note { text-align: center; }

.picker {
  padding: 0; width: min(480px, calc(100vw - 32px));
  background: var(--surface-base);
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-md);
}
.picker-form { display: grid; gap: var(--space-4); padding-bottom: var(--space-6); }
.picker-form > :not(.drawer-head) { margin-inline: var(--space-6); }
.picker .btn-cart { min-height: 56px; font-size: 18px; }

.search {
  margin: 10vh auto auto; padding: 0;
  width: min(640px, calc(100vw - 32px)); max-height: 76vh;
  background: var(--surface-base);
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-md);
}
.search-box { display: grid; grid-template-rows: auto 1fr; max-height: 76vh; }
.search-row { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-3); border-bottom: 1px solid var(--hairline); }
.search-row input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--space-3);
  background: transparent; color: var(--ink-primary); border: 0;
  font: 400 18px/1.3 var(--font-text);
}
.search-row input:focus-visible { outline: none; }
.search-results { overflow-y: auto; padding: var(--space-3) var(--space-4) var(--space-4); display: grid; gap: var(--space-1); align-content: start; }
.search-results .spec-label { margin-top: var(--space-3); }
.search-hit {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-3); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--ink-primary);
}
.search-hit:hover, .search-hit:focus-visible { background: var(--surface-raised); }

/* ---------- Product page additions ---------- */

.plans { display: grid; gap: var(--space-2); }
.plan {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start;
  padding: var(--space-4);
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-md);
  cursor: pointer;
}
.plan > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.plan-dot { width: 16px; height: 16px; margin-top: 3px; border: 1.5px solid var(--ink-muted); border-radius: 50%; }
.plan-text { display: grid; gap: var(--space-1); }
.plan-text b { font: 600 16px/1.3 var(--font-text); }
.plan-price { display: grid; justify-items: end; gap: 2px; font-weight: 600; }
.plan select { min-height: 32px; padding: 0 var(--space-2); margin: 0 2px; font: 600 13px/1 var(--font-mono); }
.plan:has(input:checked) { border-color: var(--accent); }
.plan input:checked + .plan-dot { border-color: var(--accent); padding: 3px; background: var(--accent); background-clip: content-box; }
.plan input:focus-visible + .plan-dot { outline: 2px solid var(--ink-primary); outline-offset: 2px; }

.chip-soon-btn { border-style: dashed; color: var(--ink-subtle); }
.chip-soon-btn:hover { border-style: solid; }
.notify { padding: var(--space-4); border: 1px dashed var(--hairline-strong); border-radius: var(--radius-md); }

.buy-with { display: grid; gap: var(--space-2); }
.buy-with-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center;
  padding: var(--space-2); background: var(--surface-raised); border-radius: var(--radius-md);
}
.buy-with-media { display: block; width: 56px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-sm); container-type: inline-size; background: var(--surface-base); text-decoration: none; }
.buy-with-media img { width: 100%; height: 100%; object-fit: cover; }
.buy-with-media .pack { height: 100%; border: 0; border-radius: 0; }
.buy-with-name { font: 800 18px/1 var(--font-display); font-stretch: 70%; text-transform: uppercase; text-decoration: none; }
.buy-with-name:hover { color: var(--accent-strong); }

.pdp-tabs {
  position: sticky; top: var(--header-h, 88px); z-index: 4;
  background: var(--surface-base);
  border-block: 1px solid var(--hairline);
}
.pdp-tabs-inner { display: flex; gap: var(--space-8); max-width: 1440px; margin: 0 auto; padding: 0 var(--space-12); overflow-x: auto; scrollbar-width: none; }
.pdp-tabs a { padding: 16px 0; white-space: nowrap; text-decoration: none; color: var(--ink-muted); border-bottom: 2px solid transparent; }
.pdp-tabs a:hover { color: var(--ink-primary); border-color: var(--accent); }
#doses, #why, #compare, #batch, #qa, #reviews { scroll-margin-top: calc(var(--header-h, 88px) + 56px); }

.compare-grid, .qa-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-12); align-items: start; }
.table-scroll { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; font: 400 15px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
.compare th, .compare td { padding: 14px var(--space-4); text-align: left; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.compare thead th { font: 800 24px/1 var(--font-display); font-stretch: 70%; text-transform: uppercase; border-bottom: 1.5px solid var(--hairline-strong); }
.compare thead a { text-decoration: none; }
.compare thead a:hover { color: var(--accent-strong); }
.compare tbody th { width: 34%; font-weight: 600; }
.compare .is-current { background: var(--surface-raised); }
.compare thead .is-current { border-top: 3px solid var(--accent); }
.table-note { margin-top: var(--space-3); }

.qa-by { padding-bottom: var(--space-4); margin-top: calc(-1 * var(--space-3)); }
.ask { margin-top: var(--space-8); }
.reviews-empty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-12); align-items: end; padding-block: var(--space-8); border-top: 1px solid var(--hairline); }

/* ---------- Home: stack builder ---------- */

.stack {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-6);
  margin-top: var(--space-4); padding: var(--space-6);
  background: var(--surface-raised); border-radius: var(--radius-md);
}
.stack-rows { display: grid; gap: var(--space-2); }
.stack-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 1.4fr) minmax(0, 1.4fr); gap: var(--space-2); align-items: center; }
.stack-row select { width: 100%; min-height: 44px; }
.stack-name { font: 800 22px/1 var(--font-display); font-stretch: 70%; text-transform: uppercase; color: var(--ink-primary); }
.stack-total { display: grid; gap: var(--space-2); align-content: center; padding-left: var(--space-6); border-left: 1px solid var(--hairline); }
.stack-amount { font: 900 48px/1 var(--font-display); font-stretch: 66%; color: var(--ink-primary); }

/* ---------- Shop filters ---------- */

.shop-filters { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; flex: 1; }
.shop-selects { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.select-field { display: flex; align-items: center; gap: var(--space-2); }
.select-field select { min-height: 44px; }

/* ---------- Content pages ---------- */

.page-hero { padding: var(--space-16) 0 var(--space-12); }
.page-hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-12); }
.page-title { font-size: clamp(56px, 8vw, 120px); }
.page-lede { max-width: 460px; }
.prose { display: grid; gap: var(--space-4); max-width: 62ch; }
.draft-inline { padding-left: var(--space-3); border-left: 2px dashed var(--hairline-strong); }
.cta-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); flex-wrap: wrap; padding-block: var(--space-8); border-block: 1px solid var(--hairline); }

.choose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.choose { display: grid; gap: var(--space-4); align-content: start; justify-items: start; padding: var(--space-8); background: var(--surface-raised); border-radius: var(--radius-md); }
.tick-list { display: grid; gap: var(--space-2); color: var(--ink-body); }
.tick-list li { display: grid; grid-template-columns: 20px 1fr; }
.tick-list li::before { content: "—"; color: var(--accent-strong); }

.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.calc-form { display: grid; gap: var(--space-6); padding: var(--space-8); background: var(--surface-raised); border-radius: var(--radius-md); }
.field { display: grid; gap: var(--space-2); }
.unit-field { display: flex; align-items: center; gap: var(--space-3); }
.unit-field input { width: 140px; font: 600 24px/1 var(--font-mono); }
.calc-result { display: grid; gap: var(--space-4); padding: var(--space-8); background: var(--surface-bone); color: var(--ink-inverse); border-radius: var(--radius-md); }
.calc-result .subtle, .calc-result .body-copy { color: var(--ink-on-bone-muted); }
.calc-range { font: 900 clamp(64px, 8vw, 112px)/0.9 var(--font-display); font-stretch: 66%; }
.calc-breakdown { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--hairline-bone); }
.calc-breakdown > div { display: flex; flex-direction: column-reverse; gap: var(--space-1); padding: var(--space-4) 0; }
.calc-breakdown > div + div { padding-left: var(--space-4); border-left: 1px solid var(--hairline-bone); }
.calc-result .btn-accent { color: var(--ink-on-accent); }
.calc-result .text-link { color: var(--ink-inverse); border-color: var(--ink-on-bone-muted); }
.calc-note { margin-top: var(--space-4); max-width: 90ch; }

.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1.5px solid var(--hairline-strong); }
.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps li { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6) var(--space-6) var(--space-6) 0; }
.steps li + li { padding-left: var(--space-6); border-left: 1px solid var(--hairline); }
.steps-num { font: 900 48px/1 var(--font-display); font-stretch: 66%; color: var(--ink-subtle); }
.steps-num-accent { color: var(--accent); }

.tests-table td { text-align: center; }
.tests-table thead th { font-size: 20px; }
.panel-solo { grid-template-columns: minmax(0, 1fr); }
.panel-solo .panel-copy { max-width: 900px; }
.coa-foot { margin-top: var(--space-6); color: var(--ink-on-bone-muted); max-width: 70ch; }
.report-head { margin: var(--space-3) 0; }

.help-jump { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.help-jump .chip-btn { text-decoration: none; }
.help-section { border-top: 1px solid var(--hairline); scroll-margin-top: var(--header-h, 88px); }
.help-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-content: start; }
.help-facts { display: grid; border-top: 1px solid var(--hairline-strong); }
.help-facts > div { display: grid; grid-template-columns: 180px 1fr; gap: var(--space-4); padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.pin { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-6); background: var(--surface-raised); border-radius: var(--radius-md); }
.pay-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.pay-list li { display: grid; gap: var(--space-1); padding: var(--space-4); background: var(--surface-raised); border-radius: var(--radius-md); }
.outline { display: grid; gap: var(--space-4); counter-reset: o; max-width: 70ch; }
.outline li { counter-increment: o; display: grid; grid-template-columns: 40px 1fr; }
.outline li::before { content: counter(o, decimal-leading-zero); font: 600 13px/1.8 var(--font-mono); color: var(--ink-subtle); }
.outline b { color: var(--ink-primary); }

.trial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.trial { display: flex; flex-direction: column; background: var(--surface-raised); border-radius: var(--radius-md); overflow: hidden; }
.trial-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; container-type: inline-size; border-bottom: 1px solid var(--hairline); }
.trial-media img { width: 100%; height: 100%; object-fit: cover; }
.trial-media .pack { height: 100%; border: 0; border-radius: 0; }
.trial-media-type { display: grid; place-items: center; }
.trial-media-type .cat-big { margin: 0; }
.trial-body { display: grid; gap: var(--space-3); padding: var(--space-6); flex: 1; align-content: start; }
.trial-price { display: flex; align-items: baseline; gap: var(--space-2); font: 900 40px/1 var(--font-display); font-stretch: 66%; margin-top: auto; }
.trial-soon .cat-big { color: var(--ink-subtle); }

.offer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.offer { display: grid; gap: var(--space-4); align-content: start; justify-items: start; padding: var(--space-8); background: var(--surface-raised); border-radius: var(--radius-md); }
.offer-lead { background: var(--accent); color: var(--ink-on-accent); }
.offer-lead .body-copy { color: var(--ink-on-accent); }
.offer-lead .btn-ink { background: var(--surface-base); color: var(--ink-primary); }
.offer-num { font: 900 clamp(64px, 7vw, 104px)/0.9 var(--font-display); font-stretch: 66%; }

.newsletter { max-width: 420px; margin-top: var(--space-2); }

@media (max-width: 1100px) {
  .mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega-feature { display: none; }
  .compare-grid, .qa-grid, .reviews-empty, .calc, .stack { grid-template-columns: minmax(0, 1fr); }
  .stack-total { padding-left: 0; padding-top: var(--space-4); border-left: 0; border-top: 1px solid var(--hairline); }
  .steps, .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .steps li:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  .trial-grid, .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp-tabs-inner { padding-inline: var(--space-6); }
}

@media (max-width: 720px) {
  .mega { position: static; max-height: calc(100vh - var(--header-h, 120px)); overflow-y: auto; }
  .mega-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-block: var(--space-6); }
  .page-hero-row { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
  .page-hero { padding: var(--space-12) 0 var(--space-8); }
  .page-title { font-size: clamp(36px, 13vw, 64px); }
  .pdp-title { font-size: clamp(40px, 14vw, 52px); }
  .point-title { min-width: 0; font-size: clamp(28px, 10vw, 40px); }
  .text-link { white-space: normal; }
  .choose-grid, .trial-grid, .offer-grid, .pay-list, .steps, .steps-4 { grid-template-columns: minmax(0, 1fr); }
  .steps li, .steps li + li { padding: var(--space-6) 0; border-left: 0; border-top: 1px solid var(--hairline); }
  .steps li:first-child { border-top: 0; }
  .stack-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stack-name { grid-column: 1 / -1; }
  .help-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .choose, .calc-form, .calc-result, .offer, .stack { padding: var(--space-6); }
  .pdp-tabs-inner { padding-inline: var(--gutter); gap: var(--space-6); }
  .compare th, .compare td { padding: 12px var(--space-2); font-size: 13px; }
  .compare thead th { font-size: 18px; }
  .shop-filters { flex-direction: column; align-items: stretch; }
  .select-field { justify-content: space-between; }
  .drawer-head, .drawer-body, .drawer-foot { padding-inline: var(--space-4); }
  .picker-form > :not(.drawer-head) { margin-inline: var(--space-4); }
}

/* ---------- Scroll reveal ----------
   Only active when site.js adds .js-reveal to <html> (script ran, motion
   allowed). Transform and opacity only, so it stays smooth on phones. */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--d, 0) * 80ms);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* The 19 reps rise one after another, then the 19th flickers on. */
.js-reveal .reps .reps-track li {
  transform: scaleY(0.08);
  transform-origin: bottom;
  transition: transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i, 0) * 45ms);
}
.js-reveal .reps.is-in .reps-track li { transform: none; }
.js-reveal .reps.is-in .reps-track li.is-last { animation: r19-strike 900ms steps(1, end) 1100ms both; }
@keyframes r19-strike {
  0%       { background: var(--hairline-strong); }
  18%      { background: var(--accent); }
  28%      { background: var(--hairline-strong); }
  42%      { background: var(--accent-strong); }
  52%      { background: var(--hairline); }
  66%, 100% { background: var(--accent); }
}

/* ---------- Mobile menu sheet ---------- */

.menu-btn { display: none; }

.menu-sheet {
  margin: 0; padding: 0;
  width: 100vw; max-width: 100vw; height: 100%; max-height: 100%;
  background: var(--surface-base);
  border: 0;
}
.menu-sheet[open] { animation: sheet-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes sheet-in { from { transform: translateX(-100%); } }
.menu-sheet-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(10px + env(safe-area-inset-top, 0px)) var(--space-4) 10px;
  border-bottom: 1px solid var(--hairline);
}
.menu-sheet-head .wordmark { font-size: 22px; align-items: flex-start; }
.menu-sheet-body {
  display: grid; gap: var(--space-8); align-content: start;
  max-height: calc(100% - 72px); overflow-y: auto;
  padding: var(--space-4) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
}
.menu-big a {
  display: block; padding: 10px 0;
  font: 900 40px/1 var(--font-display); font-stretch: 66%; text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
}
.menu-big a:hover, .menu-big a:focus-visible { color: var(--accent-strong); }
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.menu-cols ul { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.menu-cols a { text-decoration: none; color: var(--ink-body); font: 400 16px/1.3 var(--font-text); }
.menu-sheet[open] .menu-big li { animation: rise-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.menu-sheet[open] .menu-big li:nth-child(2) { animation-delay: 40ms; }
.menu-sheet[open] .menu-big li:nth-child(3) { animation-delay: 80ms; }
.menu-sheet[open] .menu-big li:nth-child(4) { animation-delay: 120ms; }
.menu-sheet[open] .menu-big li:nth-child(5) { animation-delay: 160ms; }
.menu-sheet[open] .menu-big li:nth-child(6) { animation-delay: 200ms; }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  .menu-sheet[open], .menu-sheet[open] .menu-big li, .drawer[open], .announce > span.is-on { animation: none; }
}

/* ---------- Up to 1100px: hero keeps the photo behind the copy ----------
   The photo is pinned to the top of the hero and dimmed evenly. The copy
   starts over the dark concrete at the bottom of the frame and continues on
   black, so no gradient is needed to keep it readable. */

@media (max-width: 1100px) {
  .hero-bg { --media-h: min(66svh, 560px); height: auto; min-height: 0; }
  .hero-bg-media { position: absolute; inset: 0 0 auto 0; height: var(--media-h); aspect-ratio: auto; }
  .hero-bg-img { filter: brightness(0.72); object-position: 52% 50%; }
  .hero-bg-inner { padding-top: calc(var(--media-h) - 96px); }
  .hero-bg-copy { gap: var(--space-3); }
  .hero-bg-media .loader { left: 0; }
}

/* ---------- Phones and small tablets: compact header ---------- */

@media (max-width: 860px) {
  .menu-btn { display: inline-grid; grid-area: menu; justify-self: start; margin-left: -10px; color: var(--ink-primary); }
  .site-nav, .mega { display: none !important; }
  .header-row {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "menu brand actions";
    padding-block: 10px;
    row-gap: 0;
  }
  .brand { justify-self: center; }
  .wordmark { font-size: 22px; }
  .header-actions { gap: var(--space-1); }
}

@media (max-width: 720px) {
  /* One announcement at a time. */
  .announce { display: block; padding: 8px var(--space-4); }
  .announce > span { display: none; }
  .announce > span.is-on { display: block; animation: rise-in 400ms ease both; }

  .draft-note { font-size: 10px; letter-spacing: 0.08em; padding: 5px var(--space-4); }
  .cart-text { display: none; }
  .cart { padding: 9px 10px; gap: 6px; }

  /* 16px stops iPhones zooming into form fields. */
  input, select, textarea,
  .inline-field input, .offline-form textarea, .select-field select, .stack select, .plan select, .unit-field input,
  .lookup input, .search-row input { font-size: 16px; }

  .section { padding: 40px 0; }
  .section-tight { padding: 32px 0; }
  .section-row { margin-bottom: var(--space-6); }

  /* Comfortable tap targets. */
  .chip span, .chip-btn { min-height: 44px; display: flex; align-items: center; }
  .qty-btn { min-width: 44px; }

  /* Swipeable rows with the next card peeking in. */
  .card-grid:not([data-filterable]), .cat-grid, .routine {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .card-grid:not([data-filterable])::-webkit-scrollbar, .cat-grid::-webkit-scrollbar, .routine::-webkit-scrollbar { display: none; }
  .card-grid:not([data-filterable]) > *, .cat-grid > *, .routine > * { scroll-snap-align: start; }
  .cat { aspect-ratio: 4 / 5; }
  .routine-step { flex-direction: column; }
  .routine-media { flex: none; aspect-ratio: 4 / 3; min-height: 0; border-right: 0; border-bottom: 1px solid var(--hairline); }

  /* Shop: compact two-column grid. */
  .card-grid[data-filterable] { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card-grid[data-filterable] .card-body { padding: 12px; gap: 6px; }
  .card-grid[data-filterable] .card-title { font-size: 20px; }
  .card-grid[data-filterable] .card-stats, .card-grid[data-filterable] .card-meta span:last-child { display: none; }
  .card-grid[data-filterable] .card-price { flex-direction: column; align-items: flex-start; gap: 2px; }
  .card-grid[data-filterable] .card-amount { font-size: 16px; }
  .card-grid[data-filterable] .btn { min-height: 44px; padding: 10px; font-size: 13px; }
  .card-grid[data-filterable] .card-badge { top: 8px; left: 8px; padding: 4px 6px; font-size: 9px; }

  /* Stack builder: one control per line so flavour names fit. */
  .stack-row { grid-template-columns: minmax(0, 1fr); }
  .stack-amount { font-size: 40px; }

  .hero-stats .stat { font-size: 24px; }
  .crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .footer-top { gap: var(--space-8); margin-bottom: var(--space-12); }
}

/* ---------- Scroll-driven product rows (phones) ----------
   site.js adds .hs-on and makes the section taller; the content pins under
   the header while the row slides sideways. */
.hs-progress { display: none; }
@media (max-width: 720px) {
  .hs-on > .wrap { position: sticky; top: calc(var(--header-h, 65px) + 12px); overflow: hidden; }
  .hs-on .card-grid { overflow: visible; scroll-snap-type: none; will-change: transform; }
  .hs-on .hs-progress { display: block; height: 3px; margin-top: var(--space-4); background: var(--hairline); border-radius: var(--radius-sm); overflow: hidden; }
  .hs-progress span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
  /* Compact while pinned, so the whole block fits under the header. */
  .hs-on .section-row { margin-bottom: var(--space-3); }
  .hs-on .section-head .display-lg { font-size: 36px; }
  .hs-on .card-grid { grid-auto-columns: 74%; }
  .hs-on .card-media { aspect-ratio: 4 / 3; }
  .hs-on .card-stats { display: none; }
  .hs-on .card-body { padding: 12px 14px; gap: 6px; }
  .hs-on .card-title { font-size: 22px; }
  .hs-on .hs-progress { margin-top: var(--space-3); }
}

/* Light exists for print. */
@media (max-width: 1366px) { .header-actions > .nav-link { display: none; } }
/* Phones and tablets: the search bar gets its own full-width row. */
@media (max-width: 860px) {
  .header-row { grid-template-areas: "menu brand actions" "search search search"; row-gap: var(--space-3); padding-bottom: var(--space-3); }
  .header-actions .search-bar { grid-area: search; }
  .header-actions { display: contents; }
  .header-actions > .cart { grid-area: actions; justify-self: end; }
  .search-bar { width: 100%; min-height: 44px; font-size: 16px; }
  .search-bar-key { display: none; }
}

/* ---------- Homepage sections ---------- */
.hero-carousel { position: relative; }
.hero-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide { flex: 0 0 100%; scroll-snap-align: start; }
.hero-controls { position: absolute; left: 0; right: 0; bottom: var(--space-6); display: flex; align-items: center; gap: var(--space-4); }
.hero-arrow { width: 44px; height: 44px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); background: var(--surface-base); color: var(--ink-primary); font: 600 18px/1 var(--font-mono); cursor: pointer; }
.hero-arrow:hover { border-color: var(--accent); }
.hero-dots { display: flex; gap: var(--space-2); }
.hero-dot { width: 28px; height: 4px; padding: 0; border: 0; background: var(--hairline-strong); cursor: pointer; }
.hero-dot[aria-selected="true"] { background: var(--accent); }
.section-row-center { justify-content: center; }
.section-title-center { text-align: center; margin-bottom: var(--space-8); }
.section-more { display: flex; justify-content: center; margin-top: var(--space-8); }
.tabs { display: flex; justify-content: center; gap: var(--space-8); flex-wrap: wrap; }
.tabs-small { gap: var(--space-2); margin-bottom: var(--space-6); }
.tab { padding: var(--space-2) 0; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--ink-subtle); cursor: pointer; text-transform: uppercase; }
.tabs-small .tab { padding: var(--space-2) var(--space-4); border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); }
.tab[aria-selected="true"] { color: var(--ink-primary); border-bottom-color: var(--accent); }
.tabs-small .tab[aria-selected="true"] { border-color: var(--accent); background: var(--accent); color: var(--ink-on-accent); }
.tab-note { text-align: center; margin: 0 auto var(--space-6); max-width: 560px; }
.card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; }
.goal-strip { display: grid; grid-template-columns: 1.1fr repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: 0 0 var(--space-8); padding: 0; list-style: none; }
.goal-label { display: grid; align-content: center; padding: var(--space-6); background: var(--surface-bone); color: var(--ink-inverse); border-radius: var(--radius-md); }
.goal { display: grid; gap: var(--space-2); height: 100%; padding-bottom: var(--space-4); background: var(--surface-raised); border-radius: var(--radius-md); overflow: hidden; }
.goal > :not(.goal-media) { padding-inline: var(--space-4); }
.goal-media { display: block; aspect-ratio: 1; overflow: hidden; background: var(--surface-sunken); }
.goal-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.goal-media-type { display: grid; place-content: center; justify-items: center; gap: var(--space-1); border-bottom: 1px solid var(--hairline); }
.goal-big { font: 900 clamp(56px, 7vw, 96px)/.9 var(--font-display); font-stretch: 66%; color: var(--ink-primary); }
.goal:hover .goal-big { color: var(--accent-strong); }
.goal:hover .goal-media img { transform: scale(1.05); }
.goal:hover .goal-name { color: var(--accent-strong); }
.media-band { position: relative; min-height: 420px; display: grid; align-items: end; overflow: hidden; }
.media-band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.media-band-inner { position: relative; padding-block: var(--space-16) var(--space-12); width: 100%; }
.media-band-line { margin-bottom: var(--space-8); }
.learn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); padding: 0; margin: 0; list-style: none; }
.learn { display: grid; gap: var(--space-3); height: 100%; padding: var(--space-8) var(--space-6); background: var(--surface-raised); border-radius: var(--radius-md); border-top: 5px solid var(--accent); }
.learn-num { font: 900 56px/1 var(--font-display); font-stretch: 66%; color: var(--ink-subtle); }
.learn:hover .display-md { color: var(--accent-strong); }
.range-scroll { overflow-x: auto; }
.range-table { width: 100%; border-collapse: collapse; }
.range-table th, .range-table td { padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--hairline); text-align: left; white-space: nowrap; }
.range-table td:last-child { text-align: right; }
@media (max-width: 1100px) {
  .goal-strip { grid-template-columns: repeat(5, 240px); overflow-x: auto; scroll-snap-type: x mandatory; }
  .goal-strip > li { scroll-snap-align: start; }
}
@media (max-width: 720px) {
  .hero-controls { bottom: var(--space-4); }
  .learn-grid, .card-grid-2 { grid-template-columns: 1fr; }
  .goal-strip { grid-template-columns: repeat(5, 72%); }
  .tabs { gap: var(--space-6); }
  .media-band { min-height: 340px; }
}

/* ---------- Batch lookup warning ---------- */
#lookup-result.lookup-warn { color: var(--ink-inverse); font-weight: 600; border-left: 3px solid var(--accent); padding-left: var(--space-3); }
.email-action { display: flex; gap: var(--space-4); }
#batches { scroll-margin-top: calc(var(--header-h, 72px) + var(--space-4)); }

/* ---------- Checkout and order status ---------- */
.page-hero-compact { padding: var(--space-12) 0 var(--space-8); }
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-12); align-items: start; }
.checkout[hidden], .co-empty[hidden], .order-card[hidden] { display: none; }
.checkout-form, .order-lookup { display: grid; gap: var(--space-6); }
.co-group { display: grid; gap: var(--space-4); margin: 0; padding: 0; border: 0; min-width: 0; }
.co-group legend { padding: 0; margin-bottom: var(--space-4); }
.co-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.co-field { display: grid; gap: var(--space-2); min-width: 0; }
.co-field label { font: 600 12px/1.2 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.co-field input, .co-field select {
  width: 100%; min-height: 48px; padding: 0 var(--space-4);
  background: var(--surface-sunken); color: var(--ink-primary);
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-md);
  font: 400 15px/1.4 var(--font-text);
}
.co-field select { min-width: 0; text-overflow: ellipsis; }
/* Light checkout: fields read as paper, not wells. */
:root[data-theme="light"] .co-field input, :root[data-theme="light"] .co-field select { background: var(--surface-raised); }
:root[data-theme="light"] .co-promo input { background: var(--surface-base); }
.co-field input::placeholder { color: var(--ink-subtle); }
.co-field input:focus-visible, .co-field select:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 1px; }
.co-field input:user-invalid, .co-field select:user-invalid { border-color: var(--accent-strong); }
.plan.is-disabled { cursor: not-allowed; opacity: .55; }
.co-consent { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; cursor: pointer; }
.co-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.checkout-form .btn-cart { min-height: 56px; justify-content: space-between; }
.checkout-form .btn[disabled] { opacity: .6; cursor: progress; }
#co-msg:empty, #ord-msg:empty { display: none; }
.co-summary, .order-card {
  display: grid; gap: var(--space-4); padding: var(--space-6);
  background: var(--surface-raised); border-radius: var(--radius-md);
}
.co-summary { position: sticky; top: 96px; }
.co-sum-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); list-style: none; cursor: default; }
.co-sum-head::-webkit-details-marker { display: none; }
.co-sum-peek { display: none; align-items: center; gap: var(--space-3); color: var(--ink-primary); }
.co-sum-chev { width: 8px; height: 8px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.co-sum[open] .co-sum-chev { margin-top: 4px; transform: rotate(-135deg); }
.co-sum-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.co-summary { grid-template-columns: minmax(0, 1fr); }
.co-promo input { width: 100%; }
.co-lines { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.co-lines li { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--hairline); }
.co-empty { display: grid; gap: var(--space-6); justify-items: start; }
.order-wrap { display: grid; gap: var(--space-8); max-width: 720px; }
.order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }

@media (max-width: 860px) {
  /* minmax(0, …): the long state names in the select must not widen the page. */
  .checkout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .co-summary { position: static; order: -1; }
  .co-sum-head { cursor: pointer; min-height: 24px; }
  .co-sum-head:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 4px; }
  .co-sum-peek { display: inline-flex; }
  .co-sum[open] .co-sum-peek > .spec { visibility: hidden; }
}
@media (max-width: 720px) {
  .page-hero-compact { padding: var(--space-8) 0 var(--space-6); }
  .page-hero-compact .display-lg { font-size: 40px; }
  .page-hero-compact + .section-flush { padding-top: 0; }
  .checkout { gap: var(--space-6); }
  .checkout-form { gap: var(--space-8); }
  .co-group { gap: var(--space-3); }
  .co-group legend { margin-bottom: var(--space-3); }
  .co-row { grid-template-columns: 1fr; gap: var(--space-3); }
  .co-row-keep { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .co-field input, .co-field select { font-size: 16px; }
  .co-summary, .order-card { padding: var(--space-4); }
}

@media print {
  :root {
    --surface-base: #FFFFFF; --surface-raised: #FFFFFF; --surface-sunken: #FFFFFF; --surface-bone: #ECE8E1;
    --ink-primary: #121211; --ink-body: #3D3B37; --ink-muted: #4A4843; --ink-subtle: #5A5750;
    --ink-inverse: #121211; --ink-on-bone-muted: #4A4843;
    --hairline: #CFCAC1; --hairline-strong: #8E8A82; --hairline-bone: #CFCAC1;
    --accent-strong: #9C4526;
  }
  .site-header, .gallery-thumbs, .gallery-main { position: static; }
  .skip, .lookup, .buy, .announce, .sticky-buy, .marquee, .pdp-tabs, .mega, .menu-btn, dialog { display: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Promo codes ---------- */
.co-promo { display: grid; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid var(--hairline); }
.co-promo input { text-transform: uppercase; font-family: var(--font-mono); letter-spacing: .06em; }
.co-promo .co-ok { color: var(--ink-primary); }
.co-promo .co-err { color: var(--accent-strong); }
.co-promo p:empty { display: none; }
.code-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); margin: var(--space-8) 0 var(--space-4); }
.code-card { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); background: var(--surface-raised); border-radius: var(--radius-md); border-top: 5px solid var(--accent); }
.code-card .offer-num { margin: 0; }
.code-chip { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-4); border: 1px dashed var(--accent); border-radius: var(--radius-md); background: transparent; color: var(--ink-primary); font: 600 18px var(--font-mono); letter-spacing: .08em; cursor: pointer; }
.code-chip:hover { background: var(--accent); color: var(--ink-on-accent); }

/* ---------- Phones: every homepage section sized to the screen ---------- */
@media (max-width: 720px) {
  /* Hero: one slide = one screen. Photo fills the slide, copy sits at the
     foot on the darkened photo; stats drop out to make room. */
  .hero-slide.hero-bg { --media-h: 100%; height: auto; min-height: min(80svh, 660px); display: flex; flex-direction: column; justify-content: flex-end; }
  .hero-slide .hero-bg-media { position: absolute; inset: 0; height: 100%; }
  .hero-slide .hero-bg-img { filter: brightness(0.42); }
  .hero-slide .hero-bg-inner { position: relative; padding: var(--space-16) var(--space-4) var(--space-6); }
  .hero-slide .hero-bg-title { font-size: clamp(42px, 13vw, 56px); }
  .hero-slide .hero-bg-copy { gap: var(--space-2); }
  .hero-slide .body-lg { font-size: 15px; line-height: 1.45; }
  .hero-slide .rule-bar { margin: var(--space-1) 0; }
  .hero-slide .actions { margin-top: var(--space-2); }
  .hero-slide .hero-stats { display: none; }
  .hero-controls { position: static; justify-content: center; padding-block: var(--space-3); }
  .hero-arrow { width: 40px; height: 40px; }

  /* Product tabs */
  .tabs { gap: var(--space-6); }
  .tab.display-md { font-size: 24px; }
  .section-title-center { margin-bottom: var(--space-6); }
  .section-title-center.display-lg { font-size: 40px; }

  /* Goal strip: label across the top, then a 2 x 2 grid. No sideways scroll. */
  .goal-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin-bottom: var(--space-6); }
  .goal-label { grid-column: 1 / -1; padding: var(--space-4); }
  .goal-label .display-lg { font-size: 36px; }
  .goal-label br { display: none; }
  .goal-media { aspect-ratio: 4 / 3; }
  .goal { gap: var(--space-1); padding-bottom: var(--space-3); }
  .goal > :not(.goal-media) { padding-inline: var(--space-3); }
  .goal-name.display-md { font-size: 20px; }
  .goal .spec { font-size: 11px; }

  /* Picture band */
  .media-band { min-height: 0; }
  .media-band-inner { padding-block: var(--space-12) var(--space-8); }
  .media-band-line { font-size: 36px; margin-bottom: var(--space-6); }

  /* Learn cards: compact rows */
  .learn { grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); padding: var(--space-4); align-items: start; }
  .learn-num { grid-row: 1 / span 3; font-size: 32px; min-width: 56px; }
  .learn .display-md { font-size: 22px; }

  /* Range: each size becomes a two-column card instead of a wide table. */
  .range-scroll { overflow: visible; }
  .range-table, .range-table tbody { display: block; }
  .range-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--hairline); }
  .range-table th, .range-table td { padding: 0; border: 0; white-space: normal; }
  .range-table th { grid-column: 1 / -1; }
  .range-table td:nth-child(3), .range-table td:nth-child(5) { text-align: right; }
  .range-table td:last-child { grid-column: 1 / -1; text-align: left; margin-top: var(--space-2); }
  .range-table td:last-child .btn { width: 100%; }
  .tabs-small { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }

  /* Story */
  .split-media { min-height: 240px; }
  .split-copy { gap: var(--space-4); padding: var(--space-8) var(--space-4); }
  .split-copy .display-lg { font-size: 40px; }

  /* Quality strip and batch check */
  .facts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts-list li { padding: var(--space-4); gap: var(--space-3); }
  .facts-list li:nth-child(3) { border-left: 0; }
  .facts-list li:nth-child(n+3) { border-top: 1px solid var(--hairline-bone); }
  .facts-num { font-size: 28px; }
  .proof-check, .proof-batch { padding: var(--space-6) var(--space-4); }
  .proof-check .display-lg, #faq-title { font-size: 40px; }
  .batch-table { width: 100%; table-layout: fixed; }
  .batch-table th, .batch-table td { overflow-wrap: anywhere; }
}

.tested-more { display: none; }

/* ---------- Phones: compact homepage cards, stack box and batch check ---------- */
@media (max-width: 720px) {
  /* Lineup: two small cards per row, no sideways swipe. */
  .card-grid.home-cards {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto;
    gap: 10px; overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none;
  }
  .home-cards .card-media { aspect-ratio: 1 / 1; }
  .home-cards .card-body { padding: 10px; gap: 6px; }
  .home-cards .card-title { font-size: 19px; }
  .home-cards .card-stats, .home-cards .card-meta span:last-child { display: none; }
  .home-cards .card-meta { font-size: 11px; }
  .home-cards .card-price { flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 0; }
  .home-cards .card-amount { font-size: 15px; }
  .home-cards .card-price .spec { font-size: 11px; }
  .home-cards .btn { min-height: 40px; padding: 8px; font-size: 13px; }
  .home-cards .card-badge { top: 6px; left: 6px; padding: 3px 6px; font-size: 9px; }
  .home-cards .pack-top { visibility: hidden; }
  .tab-note { font-size: 14px; margin-bottom: var(--space-4); }
  .section-more { margin-top: var(--space-6); }

  /* Stack box: name above a row of two selects; total beside the button. */
  .stack { gap: var(--space-3); padding: var(--space-4); }
  .stack-rows { gap: var(--space-3); }
  .stack-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .stack-row .stack-name { grid-column: 1 / -1; font-size: 17px; }
  .stack-row select { min-height: 40px; padding: 0 var(--space-2); font-size: 16px; }
  .stack-row > .spec { align-self: center; padding-left: var(--space-2); }
  .stack-total { grid-template-columns: auto 1fr; align-items: center; gap: 2px var(--space-3); padding-top: var(--space-3); }
  .stack-total .spec-label { grid-column: 1; font-size: 10px; }
  .stack-amount { grid-column: 1; font-size: 32px; }
  .stack-total .btn { grid-column: 2; grid-row: 1 / span 2; min-height: 48px; padding: 10px; font-size: 14px; }

  /* Batch check: lookup and current batches only; the test list is a link. */
  .proof-check .body-lg { font-size: 15px; }
  .proof { gap: var(--space-3); }
  .proof-batch-head { padding-bottom: var(--space-3); }
  .proof-batch-head .body-sm { display: none; }
  .tested-head, .tested-list { display: none; }
  .tested-more { display: inline-block; margin-top: var(--space-4); }
}

@media (max-width: 380px) { .draft-note { letter-spacing: 0.02em; padding-inline: var(--space-3); } }