/* ============================================================
   OPTML — Research-Use-Only Peptides
   Shared stylesheet · mobile-first · no JavaScript
   ------------------------------------------------------------
   Everything you'll want to re-theme lives in :root below.
   Swap these values and the whole site re-skins.
   ============================================================ */

/* ---- Brand webfont ---- */
@font-face {
  font-family: "Onest";
  src: url("../fonts/Onest-VariableFont_wght.ttf") format("truetype-variations"),
       url("../fonts/Onest-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   1 · DESIGN TOKENS  (edit these)
   ============================================================ */
:root {
  /* --- Colour · core --- */
  --color-ink:      #222326;   /* brand near-black — text, primary button */
  --color-paper:    #ffffff;   /* page background */
  --color-sand:     #f5f6f7;   /* soft neutral "studio" surface */

  /* --- Colour · neutral ramp --- */
  --n-0:   #ffffff;
  --n-25:  #fafbfc;
  --n-50:  #f5f6f7;
  --n-100: #eceef0;
  --n-200: #e0e2e6;   /* hairline */
  --n-300: #cfd2d7;   /* strong hairline / input border */
  --n-400: #a6a9b0;   /* placeholder */
  --n-500: #7c8089;   /* metadata */
  --n-600: #5b5e66;   /* secondary text */
  --n-700: #3f4147;   /* body text */
  --n-800: #2c2d31;
  --n-900: #222326;

  /* --- Colour · functional goal palette (base / dark / light) ---
     Values copied verbatim from the OPTML Colour System board — do not
     re-derive. "base" = vivid brand tone (dots, badges, gradient use);
     "dark" = deep tone for text-on-light; "light" = soft tint/wash. */
  --restore:       #1f4cbb;  --restore-dark: #1f4cbb;  --restore-light: #bcdeff;  --restore-wash: #c1ddf7;
  --glow:          #ffc3d6;  --glow-dark:    #a93e74;  --glow-light:    #ffc3d6;
  --energy:        #ff7848;  --energy-dark:  #5f240f;  --energy-light:  #fe7d4e;
  --weight:        #ff8787;  --weight-dark:  #792122;  --weight-light:  #fe8b8c;
  --growth:        #92e8a6;  --growth-dark:  #24462c;  --growth-light:  #96e9a9;
  --vitality:      #f0ea6a;  --vitality-dark:#383110;  --vitality-light:#f0e86c;
  --sleep:         #d0b3ff;  --sleep-dark:   #3b2a57;  --sleep-light:   #d1b5ff;
  --immunity:      #aeda51;  --immunity-dark:#385201;  --immunity-light:#aeda51;
  --edge:          #febffc;  --edge-dark:    #553654;  --edge-light:    #fdc2fb;

  /* --- Colour · semantic --- */
  --color-primary:      var(--color-ink);
  --color-primary-hover:#34363b;
  --text-strong:   var(--color-ink);
  --text-body:     var(--n-700);
  --text-muted:    var(--n-500);
  --text-inverse:  var(--color-paper);
  --border:        var(--n-200);
  --border-strong: var(--n-300);
  --focus-ring:    rgba(34,35,38,.18);

  /* --- Typography --- */
  --font-sans: "Onest", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-display: var(--font-sans);
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   800;

  /* Fluid type scale */
  --fs-hero:    clamp(2.7rem, 1.6rem + 5.2vw, 5.4rem);
  --fs-display: clamp(2.1rem, 1.4rem + 3.4vw, 3.6rem);
  --fs-h2:      clamp(1.7rem, 1.25rem + 2.1vw, 2.7rem);
  --fs-h3:      clamp(1.25rem, 1.05rem + 1vw, 1.65rem);
  --fs-h4:      1.18rem;
  --fs-lead:    clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.78rem;
  --lh-tight:   1.02;
  --lh-snug:    1.14;
  --lh-body:    1.62;
  --track-tight: -0.03em;
  --track-snug:  -0.015em;
  --track-over:  0.16em;

  /* --- Spacing (4px base) --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px;
  --section-y: clamp(56px, 8vw, 120px);
  --container: 1200px;
  --container-wide: 1340px;
  --gutter: clamp(20px, 5vw, 40px);

  /* --- Radius --- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px;
  --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px; --r-full: 50%;

  /* --- Elevation --- */
  --shadow-xs: 0 1px 2px rgba(34,35,38,.06);
  --shadow-sm: 0 2px 10px rgba(34,35,38,.06);
  --shadow-md: 0 10px 30px rgba(34,35,38,.09);
  --shadow-lg: 0 24px 60px rgba(34,35,38,.14);

  /* --- Motion --- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: .22s;
}

/* ============================================================
   2 · RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text-strong);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  text-wrap: balance;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
strong { font-weight: var(--w-semi); color: var(--text-strong); }

::selection { background: var(--color-ink); color: #fff; }

:focus-visible {
  outline: 2.5px solid var(--color-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: absolute; left: 12px; top: -60px;
  background: var(--color-ink); color: #fff;
  padding: 10px 18px; border-radius: var(--r-pill);
  font-weight: var(--w-semi); z-index: 200;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 12px; }

/* ============================================================
   3 · LAYOUT PRIMITIVES
   ============================================================ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { max-width: var(--container-wide); }
.section { padding-block: var(--section-y); }
.section-sm { padding-block: clamp(40px, 6vw, 72px); }
.center { text-align: center; }
.stack > * + * { margin-top: var(--sp-4); }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-over);
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow-accent { color: var(--restore); }

.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--n-600); }
.muted { color: var(--text-muted); }

.section-head { max-width: 640px; }
.section-head .eyebrow { margin-bottom: var(--sp-3); }
.section-head h2 { font-size: var(--fs-h2); letter-spacing: var(--track-tight); }
.section-head p { margin-top: var(--sp-4); }
.section-head.center { margin-inline: auto; }

.head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); }

/* ============================================================
   4 · BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: 14px 26px;
  min-height: 48px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--w-semi);
  letter-spacing: -0.01em;
  cursor: pointer;
  text-align: center;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; }

.btn-primary { background: var(--color-primary); color: var(--text-inverse); }
.btn-primary:hover { background: var(--color-primary-hover); }

.btn-outline { background: transparent; color: var(--color-ink); border-color: var(--border-strong); }
.btn-outline:hover { border-color: var(--color-ink); background: var(--n-50); }

.btn-ghost { background: transparent; color: var(--color-ink); padding-inline: 14px; }
.btn-ghost:hover { background: var(--n-100); }

.btn-lg { min-height: 56px; padding: 16px 32px; font-size: var(--fs-body); }
.btn-block { display: flex; width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: var(--w-semi); font-size: var(--fs-sm); color: var(--color-ink);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ============================================================
   5 · HEADER / NAV  (CSS-only mobile menu via <details>)
   ============================================================ */
.site-header {
  position: sticky; top: 40px; z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 70px;
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 26px; width: auto; }
.brand .tm { font-size: 10px; color: var(--text-muted); margin-left: 2px; align-self: flex-start; }

.nav-menu { display: contents; }
.nav-links { display: flex; align-items: center; gap: var(--sp-1); }
.nav-links a {
  padding: 9px 14px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: var(--w-medium); color: var(--n-700);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-links a:hover { background: var(--n-100); color: var(--color-ink); }
.nav-links a[aria-current="page"] { color: var(--color-ink); font-weight: var(--w-semi); background: var(--n-100); }
.nav-actions { display: flex; align-items: center; gap: var(--sp-3); }

/* mobile disclosure */
.nav-toggle { position: relative; }
.nav-toggle > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--color-paper);
}
.nav-toggle > summary::-webkit-details-marker { display: none; }
.nav-toggle > summary svg { width: 22px; height: 22px; }
.nav-toggle > summary .ic-close { display: none; }
.nav-toggle[open] > summary .ic-open { display: none; }
.nav-toggle[open] > summary .ic-close { display: block; }
.nav-panel {
  position: absolute; right: 0; top: calc(100% + 12px);
  width: min(84vw, 320px);
  background: var(--color-paper);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: 2px;
}
.nav-panel a {
  padding: 13px 16px; border-radius: var(--r-md);
  font-weight: var(--w-medium); color: var(--n-700); font-size: 1rem;
}
.nav-panel a:hover, .nav-panel a[aria-current="page"] { background: var(--n-100); color: var(--color-ink); }
.nav-panel .btn { margin-top: var(--sp-3); }
.nav-panel a.btn-primary { color: var(--text-inverse); }
.nav-panel a.btn-primary:hover { background: var(--color-primary-hover); color: var(--text-inverse); }

.nav-desktop { display: none; }

@media (min-width: 940px) {
  .nav-toggle { display: none; }
  .nav-desktop { display: flex; align-items: center; gap: var(--sp-6); }
}

/* Announcement bar */
.announce {
  position: sticky; top: 0; z-index: 101;
  background: var(--color-ink); color: rgba(255,255,255,.92);
  font-size: 14px; letter-spacing: 0.02em; text-align: center;
  height: 40px; line-height: 40px; padding-block: 0; padding-inline: var(--gutter);
  font-weight: var(--w-medium);
  overflow: hidden;
}
.announce strong { color: #fff; }
.announce { white-space: nowrap; }
@media (max-width: 780px) {
  .announce-tail { display: none; }
}

/* ============================================================
   6 · HERO
   ============================================================ */
.hero { position: relative; padding-top: clamp(24px, 4vw, 44px); }
.hero-panel {
  position: relative; overflow: hidden;
  border-radius: var(--r-2xl);
  background: linear-gradient(140deg, var(--color-sand) 0%, var(--restore-light) 52%, var(--restore-wash) 128%);
  padding: clamp(36px, 6vw, 88px);
  display: grid; gap: var(--sp-8);
}
.hero-panel .eyebrow { color: var(--restore-dark); }
.hero h1 {
  font-size: var(--fs-hero); line-height: var(--lh-tight);
  letter-spacing: var(--track-tight); font-weight: var(--w-bold);
  max-width: 15ch;
}
.hero .lead { max-width: 46ch; color: var(--n-700); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.hero-vials {
  display: flex; gap: var(--sp-4); align-items: flex-end;
}
.hero-vials img {
  width: clamp(90px, 22vw, 150px); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.hero-media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: 300px;
  box-shadow: var(--shadow-md);
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}
.hero-feature {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hero-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.hero-feature-label {
  font-size: var(--fs-xs); font-weight: var(--w-semi);
  letter-spacing: var(--track-over); text-transform: uppercase;
  color: var(--text-muted);
}
.hero-feature-title { font-size: 1.05rem; font-weight: var(--w-bold); color: var(--restore); letter-spacing: -0.01em; }
.hero-feature-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: var(--w-semi); color: var(--text-strong);
  margin-top: 4px; text-decoration: underline; text-underline-offset: 3px;
}
.hero-feature-link svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.hero-feature:hover .hero-feature-link svg { transform: translateX(4px); }

.live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: var(--r-full);
  background: var(--color-ink); margin-right: 8px; vertical-align: 1px;
}

.hero-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-8);
  margin: 0;
  border-bottom: 1px solid var(--border);
  padding-block: var(--sp-8);
}
@media (min-width: 640px) { .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hero-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.hero-stats dt {
  font-size: var(--fs-xs); font-weight: var(--w-semi);
  letter-spacing: var(--track-over); text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 6px;
}
.hero-stats dd { margin: 0; font-size: 1.08rem; font-weight: var(--w-bold); color: var(--text-strong); letter-spacing: -0.01em; }

@media (min-width: 900px) {
  .hero-panel { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
  .hero-vials { justify-content: flex-end; }
}

/* ============================================================
   7 · TRUST STRIP / MARQUEE-LESS LOGO ROW
   ============================================================ */
.trust {
  display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-8);
  align-items: center; justify-content: center;
  padding-block: var(--sp-8);
  border-block: 1px solid var(--border);
}
.trust-item { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: var(--w-medium); color: var(--n-700); }
.trust-item svg { width: 24px; height: 24px; fill: none; stroke: var(--color-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ============================================================
   8 · GOAL / CATEGORY TILES
   ============================================================ */
.goal-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-8); }
@media (min-width: 560px) { .goal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .goal-grid { grid-template-columns: repeat(3, 1fr); } }

.goal-tile {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); min-height: 172px;
  padding: var(--sp-6);
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.goal-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.goal-tile h3 { font-size: var(--fs-h4); letter-spacing: var(--track-snug); }
.goal-tile .goal-tag { font-size: var(--fs-sm); opacity: .82; margin-top: 2px; }
.goal-tile .link-arrow { margin-top: var(--sp-4); }
.goal-tile img.goal-badge {
  position: absolute; right: -14px; top: 16px; width: 84px; opacity: .9;
}
/* goal color themes */
.g-restore  { background: linear-gradient(150deg, var(--n-50), var(--restore-light)); }
.g-restore, .g-restore h3, .g-restore .link-arrow { color: var(--restore-dark); }
.g-glow     { background: linear-gradient(150deg, var(--n-50), var(--glow)); }
.g-glow, .g-glow h3, .g-glow .link-arrow { color: var(--glow-dark); }
.g-energy   { background: linear-gradient(150deg, var(--n-50), var(--energy)); }
.g-energy, .g-energy h3, .g-energy .link-arrow { color: var(--energy-dark); }
.g-weight   { background: linear-gradient(150deg, var(--n-50), var(--weight)); }
.g-weight, .g-weight h3, .g-weight .link-arrow { color: var(--weight-dark); }
.g-growth   { background: linear-gradient(150deg, var(--n-50), var(--growth)); }
.g-growth, .g-growth h3, .g-growth .link-arrow { color: var(--growth-dark); }
.g-vitality { background: linear-gradient(150deg, var(--n-50), var(--vitality)); }
.g-vitality, .g-vitality h3, .g-vitality .link-arrow { color: var(--vitality-dark); }
.g-sleep    { background: linear-gradient(150deg, var(--n-50), var(--sleep)); }
.g-sleep, .g-sleep h3, .g-sleep .link-arrow { color: var(--sleep-dark); }
.g-immunity { background: linear-gradient(150deg, var(--n-50), var(--immunity)); }
.g-immunity, .g-immunity h3, .g-immunity .link-arrow { color: var(--immunity-dark); }
.g-edge     { background: linear-gradient(150deg, var(--n-50), var(--edge)); }
.g-edge, .g-edge h3, .g-edge .link-arrow { color: var(--edge-dark); }

/* ============================================================
   8b · PRODUCT CATEGORIES — editorial portrait cards (homepage)
   Palettes are derived from the official brand tokens via
   color-mix (never invented) — mixed toward white to hit the
   muted, premium pastel the section calls for.
   ============================================================ */
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.5vw, 32px);
  margin-top: var(--sp-10);
  width: 100%;
}
@media (min-width: 768px) { .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cat-card {
  position: relative;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 3 / 4.3;
  min-height: 0;
  border-radius: 20px;
  padding: clamp(16px, 2.4vw, 28px);
  box-shadow: 0 1px 3px rgba(34,35,38,.05);
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s cubic-bezier(.2,.7,.2,1);
  opacity: 0; transform: translateY(18px);
  animation: catFadeUp .6s cubic-bezier(.2,.7,.2,1) forwards;
}
.cat-card:hover, .cat-card:focus-visible { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(34,35,38,.13); }
.cat-card:nth-child(1) { animation-delay: .04s; }
.cat-card:nth-child(2) { animation-delay: .11s; }
.cat-card:nth-child(3) { animation-delay: .18s; }
.cat-card:nth-child(4) { animation-delay: .25s; }
.cat-card:nth-child(5) { animation-delay: .32s; }
.cat-card:nth-child(6) { animation-delay: .39s; }
.cat-card:nth-child(7) { animation-delay: .46s; }
.cat-card:nth-child(8) { animation-delay: .53s; }
@keyframes catFadeUp { to { opacity: 1; transform: translateY(0); } }

.cat-top { display: flex; align-items: flex-start; justify-content: flex-end; }
.cat-meta { display: flex; align-items: center; gap: 8px; }
.cat-icon { width: 21px; height: 21px; transition: transform .28s cubic-bezier(.2,.7,.2,1); }
img.cat-icon { width: 50px; height: 50px; border-radius: 50%; }
.cat-card:hover .cat-icon { transform: scale(1.12); }

.cat-body { margin-top: auto; }
.cat-brand { display: block; font-size: 11px; font-weight: var(--w-semi); letter-spacing: .05em; opacity: .58; margin-bottom: 10px; }
.cat-brand sup { font-size: 8px; }
.cat-title { font-size: clamp(1.3rem, 0.65rem + 2vw, 2.35rem); font-weight: var(--w-bold); letter-spacing: -0.02em; line-height: .98; margin-bottom: clamp(8px, 1.2vw, 14px); white-space: nowrap; }
.cat-desc { font-size: clamp(12.5px, 1.8vw, 14.5px); line-height: 1.45; max-width: 25ch; opacity: .82; }
.cat-cta { margin-top: clamp(12px, 1.8vw, 20px); display: inline-flex; align-items: center; gap: 7px; font-size: clamp(12.5px, 1.7vw, 14px); font-weight: var(--w-semi); }
.cat-cta svg { width: 15px; height: 15px; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.cat-card:hover .cat-cta svg { transform: translateX(5px); }

.cat-restore    { background: radial-gradient(120% 100% at 22% 0%, rgba(255,255,255,.85), transparent 55%), linear-gradient(165deg, color-mix(in srgb, var(--restore-light) 45%, white), var(--restore-light)); color: var(--restore-dark); }
.cat-restore:hover   { background: radial-gradient(120% 100% at 22% 0%, rgba(255,255,255,.6), transparent 55%), linear-gradient(165deg, color-mix(in srgb, var(--restore-light) 65%, white), color-mix(in srgb, var(--restore-light) 80%, var(--restore-wash))); }
.cat-weight     { background: radial-gradient(120% 100% at 22% 0%, rgba(255,255,255,.85), transparent 55%), linear-gradient(165deg, color-mix(in srgb, var(--weight) 16%, white), color-mix(in srgb, var(--weight) 34%, white)); color: var(--weight-dark); }
.cat-weight:hover    { background: radial-gradient(120% 100% at 22% 0%, rgba(255,255,255,.6), transparent 55%), linear-gradient(165deg, color-mix(in srgb, var(--weight) 24%, white), color-mix(in srgb, var(--weight) 48%, white)); }
.cat-glow       { background: radial-gradient(120% 100% at 22% 0%, rgba(255,255,255,.85), transparent 55%), linear-gradient(165deg, color-mix(in srgb, var(--glow) 20%, white), color-mix(in srgb, var(--glow) 40%, white)); color: var(--glow-dark); }
.cat-glow:hover      { background: radial-gradient(120% 100% at 22% 0%, rgba(255,255,255,.6), transparent 55%), linear-gradient(165deg, color-mix(in srgb, var(--glow) 30%, white), color-mix(in srgb, var(--glow) 55%, white)); }
.cat-energy     { background: radial-gradient(120% 100% at 22% 0%, rgba(255,255,255,.85), transparent 55%), linear-gradient(165deg, color-mix(in srgb, var(--energy) 15%, white), color-mix(in srgb, var(--energy) 32%, white)); color: var(--energy-dark); }
.cat-energy:hover    { background: radial-gradient(120% 100% at 22% 0%, rgba(255,255,255,.6), transparent 55%), linear-gradient(165deg, color-mix(in srgb, var(--energy) 23%, white), color-mix(in srgb, var(--energy) 46%, white)); }
.cat-growth     { background: radial-gradient(120% 100% at 22% 0%, rgba(255,255,255,.85), transparent 55%), linear-gradient(165deg, color-mix(in srgb, var(--growth) 20%, white), color-mix(in srgb, var(--growth) 42%, white)); color: var(--growth-dark); }
.cat-growth:hover    { background: radial-gradient(120% 100% at 22% 0%, rgba(255,255,255,.6), transparent 55%), linear-gradient(165deg, color-mix(in srgb, var(--growth) 30%, white), color-mix(in srgb, var(--growth) 58%, white)); }
.cat-edge       { background: radial-gradient(120% 100% at 22% 0%, rgba(255,255,255,.85), transparent 55%), linear-gradient(165deg, color-mix(in srgb, var(--edge) 20%, white), color-mix(in srgb, var(--edge) 42%, white)); color: var(--edge-dark); }
.cat-edge:hover      { background: radial-gradient(120% 100% at 22% 0%, rgba(255,255,255,.6), transparent 55%), linear-gradient(165deg, color-mix(in srgb, var(--edge) 30%, white), color-mix(in srgb, var(--edge) 58%, white)); }
.cat-vitality   { background: radial-gradient(120% 100% at 22% 0%, rgba(255,255,255,.85), transparent 55%), linear-gradient(165deg, color-mix(in srgb, var(--vitality) 24%, white), color-mix(in srgb, var(--vitality) 48%, white)); color: var(--vitality-dark); }
.cat-vitality:hover  { background: radial-gradient(120% 100% at 22% 0%, rgba(255,255,255,.6), transparent 55%), linear-gradient(165deg, color-mix(in srgb, var(--vitality) 34%, white), color-mix(in srgb, var(--vitality) 62%, white)); }
/* Longevity borrows the palette's lime/sage tone (brand token: Immunity) — unused elsewhere in this curated set */
.cat-longevity  { background: radial-gradient(120% 100% at 22% 0%, rgba(255,255,255,.85), transparent 55%), linear-gradient(165deg, color-mix(in srgb, var(--immunity) 18%, white), color-mix(in srgb, var(--immunity) 38%, white)); color: var(--immunity-dark); }
.cat-longevity:hover { background: radial-gradient(120% 100% at 22% 0%, rgba(255,255,255,.6), transparent 55%), linear-gradient(165deg, color-mix(in srgb, var(--immunity) 28%, white), color-mix(in srgb, var(--immunity) 52%, white)); }

.cat-restore .cat-title { color: var(--restore-dark); }
.cat-weight .cat-title { color: var(--weight-dark); }
.cat-glow .cat-title { color: var(--glow-dark); }
.cat-energy .cat-title { color: var(--energy-dark); }
.cat-growth .cat-title { color: var(--growth-dark); }
.cat-edge .cat-title { color: var(--edge-dark); }
.cat-vitality .cat-title { color: var(--vitality-dark); }
.cat-longevity .cat-title { color: var(--immunity-dark); }

@media (min-width: 768px) and (max-width: 1099px) {
  .cat-title { font-size: clamp(1.2rem, 2.2vw, 1.7rem); }
}

@media (prefers-reduced-motion: reduce) {
  .cat-card { opacity: 1; transform: none; animation: none; }
}

/* ============================================================
   9 · GOAL CHIP
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 8px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--w-semi);
  letter-spacing: -0.01em;
}
.chip .dot { width: 9px; height: 9px; border-radius: var(--r-full); }
.chip-restore  { background: var(--restore-light); color: var(--restore-dark); } .chip-restore .dot { background: var(--restore); }
.chip-glow     { background: var(--glow-light); color: var(--glow-dark); } .chip-glow .dot { background: var(--glow); }
.chip-energy   { background: var(--energy-light); color: var(--energy-dark); } .chip-energy .dot { background: var(--energy); }
.chip-weight   { background: var(--weight-light); color: var(--weight-dark); } .chip-weight .dot { background: var(--weight); }
.chip-growth   { background: var(--growth-light); color: var(--growth-dark); } .chip-growth .dot { background: var(--growth); }
.chip-edge     { background: var(--edge-light); color: var(--edge-dark); } .chip-edge .dot { background: var(--edge); }
.chip-vitality { background: var(--vitality-light); color: var(--vitality-dark); } .chip-vitality .dot { background: var(--vitality); }
.chip-sleep    { background: var(--sleep-light); color: var(--sleep-dark); } .chip-sleep .dot { background: var(--sleep); }
.chip-immunity { background: var(--immunity-light); color: var(--immunity-dark); } .chip-immunity .dot { background: var(--immunity); }
.chip-essentials { background: var(--n-100); color: var(--n-700); } .chip-essentials .dot { background: var(--n-500); }

/* ============================================================
   10 · PRODUCT CARDS
   ============================================================ */
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-5); margin-top: var(--sp-8); }
@media (min-width: 720px) { .product-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-6); } }
@media (min-width: 1040px) { .product-grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.product-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.product-media {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 1 / 1; background: var(--color-sand);
}
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.card-media-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.product-card:hover .product-media img { transform: scale(1.045); }
.product-flag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--color-ink); color: #fff;
  font-size: var(--fs-xs); font-weight: var(--w-semi);
  padding: 5px 11px; border-radius: var(--r-pill);
}
.product-add {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  width: 46px; height: 46px; border-radius: var(--r-full);
  border: none; background: var(--color-ink); color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: .95; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.product-add:hover { transform: scale(1.06); opacity: 1; }
.product-add:active { transform: scale(.92); }
.product-title { font-size: 1.02rem; font-weight: var(--w-semi); color: var(--text-strong); letter-spacing: -0.01em; }
.product-sub { font-size: var(--fs-sm); color: var(--text-muted); }
.product-meta { display: flex; align-items: baseline; gap: var(--sp-3); margin-top: 2px; }
.product-price { font-size: 1.02rem; font-weight: var(--w-bold); color: var(--text-strong); }
.product-serves { font-size: var(--fs-xs); color: var(--text-muted); margin-left: auto; }
.rating { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--n-600); }
.rating svg { width: 14px; height: 14px; fill: var(--color-ink); }

/* ============================================================
   11 · GENERIC CARD / FEATURE
   ============================================================ */
.card {
  background: var(--color-paper); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: var(--sp-6);
}
.card-hair { box-shadow: none; border: 1px solid var(--border); }

.feature-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); margin-top: var(--sp-8); }
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .feature-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }

.feature { display: flex; flex-direction: column; gap: var(--sp-3); }
.feature-ic {
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: var(--n-50); display: flex; align-items: center; justify-content: center;
}
.feature-ic svg { width: 26px; height: 26px; fill: none; stroke: var(--color-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature h3 { font-size: var(--fs-h4); }
.feature p { font-size: var(--fs-sm); color: var(--n-600); }

/* ============================================================
   12 · STATS / PROOF BAND (dark)
   ============================================================ */
.proof {
  background: var(--color-ink); color: #fff;
  border-radius: var(--r-2xl); padding: clamp(32px, 5vw, 60px);
  display: grid; gap: var(--sp-8);
}
.proof .eyebrow { color: rgba(255,255,255,.5); }
.proof-lead { font-size: var(--fs-h3); font-weight: var(--w-semi); line-height: 1.22; color: #fff; max-width: 30ch; }
.proof-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-8); }
@media (min-width: 720px) { .proof-stats { grid-template-columns: repeat(3, 1fr); } }
.stat .stat-num { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); font-weight: var(--w-bold); letter-spacing: var(--track-tight); line-height: 1; color: #fff; }
.stat .stat-label { font-size: var(--fs-sm); font-weight: var(--w-semi); margin-top: 8px; color: #fff; }
.stat .stat-note { font-size: var(--fs-xs); color: rgba(255,255,255,.55); margin-top: 2px; }
@media (min-width: 900px) { .proof { grid-template-columns: 1fr 1.6fr; align-items: center; } }

/* QR trust variant of the proof panel */
.proof-qr { padding: clamp(20px, 3vw, 40px); gap: clamp(24px, 4vw, 56px); }
@media (min-width: 900px) { .proof-qr { grid-template-columns: 1fr 1.1fr; } }
.qr-media { border-radius: var(--r-xl); overflow: hidden; }
.qr-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-points { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-2); }
.qr-points li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.qr-points svg { width: 26px; height: 26px; flex: none; color: #fff; margin-top: 2px; }
.qr-points strong { display: block; color: #fff; font-weight: var(--w-semi); font-size: 1rem; }
.qr-points span { display: block; color: rgba(255,255,255,.6); font-size: var(--fs-sm); margin-top: 2px; }

/* ============================================================
   13 · PROCESS TIMELINE
   ============================================================ */
.timeline { display: grid; gap: var(--sp-6); margin-top: var(--sp-10); counter-reset: step; }
@media (min-width: 860px) { .timeline { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); } .timeline.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding-top: var(--sp-8); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-size: var(--fs-sm); font-weight: var(--w-bold); letter-spacing: 0.04em;
  color: var(--restore);
}
.step::after {
  content: ""; position: absolute; top: 8px; left: 34px; right: 0; height: 1px;
  background: var(--border);
}
@media (max-width: 859px) { .step::after { display: none; } }
.step h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.step p { font-size: var(--fs-sm); color: var(--n-600); }

/* ============================================================
   14 · COMPARISON TABLE
   ============================================================ */
.compare-wrap { margin-top: var(--sp-8); overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border); }
.compare { width: 100%; border-collapse: collapse; min-width: 560px; background: var(--color-paper); }
.compare th, .compare td { padding: 16px 20px; text-align: left; font-size: var(--fs-sm); border-bottom: 1px solid var(--border); }
.compare thead th { font-weight: var(--w-semi); color: var(--text-strong); background: var(--n-50); }
.compare thead th.col-us { background: var(--color-ink); color: #fff; }
.compare tbody th { font-weight: var(--w-medium); color: var(--n-700); }
.compare td { color: var(--n-600); }
.compare td.col-us { background: var(--n-25); color: var(--text-strong); font-weight: var(--w-medium); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: none; }
.tick { display: inline-flex; width: 22px; height: 22px; border-radius: var(--r-full); align-items: center; justify-content: center; }
.tick-yes { background: var(--growth-light); color: var(--growth-dark); }
.tick-no { background: var(--n-100); color: var(--n-400); }
.tick svg { width: 13px; height: 13px; }

/* ============================================================
   15 · FAQ ACCORDION (details/summary)
   ============================================================ */
.accordion { margin-top: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-3); }
.acc-item { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--color-paper); overflow: hidden; transition: border-color var(--dur) var(--ease); }
.acc-item[open] { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.acc-item > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: 20px 22px; font-weight: var(--w-semi); color: var(--text-strong); font-size: 1.02rem;
}
.acc-item > summary::-webkit-details-marker { display: none; }
.acc-item > summary .plus { position: relative; width: 20px; height: 20px; flex: none; }
.acc-item > summary .plus::before, .acc-item > summary .plus::after {
  content: ""; position: absolute; background: var(--n-500); border-radius: 2px;
  transition: transform var(--dur) var(--ease);
}
.acc-item > summary .plus::before { left: 0; right: 0; top: 9px; height: 2px; }
.acc-item > summary .plus::after { top: 0; bottom: 0; left: 9px; width: 2px; }
.acc-item[open] > summary .plus::after { transform: rotate(90deg); opacity: 0; }
.acc-body { padding: 0 22px 22px; color: var(--n-600); font-size: var(--fs-sm); }
.acc-body p + p { margin-top: var(--sp-3); }

/* ============================================================
   16 · TESTIMONIAL GRID
   ============================================================ */
.reviews { columns: 1; column-gap: var(--sp-5); margin-top: var(--sp-8); }
@media (min-width: 640px) { .reviews { columns: 2; } }
@media (min-width: 980px) { .reviews { columns: 3; } }
.review {
  break-inside: avoid; margin-bottom: var(--sp-5);
  background: var(--color-paper); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-6);
}
.review .rating { margin-bottom: var(--sp-3); }
.review p { font-size: var(--fs-sm); color: var(--n-700); line-height: 1.6; }
.review .who { margin-top: var(--sp-4); display: flex; align-items: center; gap: 10px; }
.avatar { width: 38px; height: 38px; border-radius: var(--r-full); background: var(--color-sand); display: flex; align-items: center; justify-content: center; font-weight: var(--w-bold); font-size: var(--fs-sm); color: var(--n-700); }
.who .name { font-size: var(--fs-sm); font-weight: var(--w-semi); color: var(--text-strong); }
.who .role { font-size: var(--fs-xs); color: var(--text-muted); }

/* ============================================================
   17 · CTA BAND
   ============================================================ */
.cta-band {
  border-radius: var(--r-2xl);
  background: linear-gradient(140deg, var(--color-sand), var(--restore-light) 120%);
  padding: clamp(36px, 6vw, 72px);
  text-align: center;
  display: grid; gap: var(--sp-5); justify-items: center;
}
.cta-band h2 { font-size: var(--fs-display); letter-spacing: var(--track-tight); }
.cta-band p { max-width: 48ch; }
.cta-band .hero-cta { justify-content: center; }

/* Split CTA with packaging imagery */
.cta-split { text-align: left; grid-template-columns: 1fr; padding: clamp(24px, 4vw, 48px); align-items: center; }
.cta-split .cta-copy { display: grid; gap: var(--sp-5); justify-items: start; }
.cta-split .hero-cta { justify-content: flex-start; }
.cta-split .cta-media { border-radius: var(--r-xl); overflow: hidden; }
.cta-split .cta-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 860px) { .cta-split { grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 4vw, 56px); } }

/* ============================================================
   18 · PAGE HEADER (interior pages)
   ============================================================ */
.page-head { padding-top: clamp(40px, 6vw, 72px); }
.breadcrumb { font-size: var(--fs-sm); color: var(--text-muted); display: flex; gap: 8px; align-items: center; }
.breadcrumb a:hover { color: var(--color-ink); }
.page-head h1 { font-size: var(--fs-display); letter-spacing: var(--track-tight); margin-top: var(--sp-4); }
.page-head .lead { margin-top: var(--sp-4); max-width: 56ch; }

/* ============================================================
   19 · FILTER CHIPS (shop)
   ============================================================ */
.filter-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.filter-chip {
  padding: 9px 16px; border-radius: var(--r-pill); border: 1px solid var(--border-strong);
  background: var(--color-paper); color: var(--n-700);
  font-size: var(--fs-sm); font-weight: var(--w-medium); cursor: default;
}
.filter-chip.is-active { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }

/* ---- CSS-only shop filter (radios + pills) ---- */
.filter-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.shop-filterbar {
  display: flex; gap: var(--sp-2);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px; margin-bottom: var(--sp-2);
}
.shop-filterbar::-webkit-scrollbar { display: none; }
.filter-pill {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; min-height: 44px;
  border-radius: var(--r-pill); border: 1px solid var(--border-strong);
  background: var(--color-paper); color: var(--n-700);
  font-size: var(--fs-sm); font-weight: var(--w-medium);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filter-pill:hover { border-color: var(--color-ink); background: var(--n-50); }
.filter-pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.filter-pill img { width: 19px; height: 19px; border-radius: 50%; }

#f-all:checked ~ .shop-filterbar label[for="f-all"],
#f-restore:checked ~ .shop-filterbar label[for="f-restore"],
#f-weight:checked ~ .shop-filterbar label[for="f-weight"],
#f-glow:checked ~ .shop-filterbar label[for="f-glow"],
#f-energy:checked ~ .shop-filterbar label[for="f-energy"],
#f-growth:checked ~ .shop-filterbar label[for="f-growth"],
#f-edge:checked ~ .shop-filterbar label[for="f-edge"],
#f-vitality:checked ~ .shop-filterbar label[for="f-vitality"],
#f-sleep:checked ~ .shop-filterbar label[for="f-sleep"],
#f-immunity:checked ~ .shop-filterbar label[for="f-immunity"],
#f-essentials:checked ~ .shop-filterbar label[for="f-essentials"] {
  background: var(--color-ink); color: #fff; border-color: var(--color-ink);
}
#f-all:focus-visible ~ .shop-filterbar label[for="f-all"],
#f-restore:focus-visible ~ .shop-filterbar label[for="f-restore"],
#f-weight:focus-visible ~ .shop-filterbar label[for="f-weight"],
#f-glow:focus-visible ~ .shop-filterbar label[for="f-glow"],
#f-energy:focus-visible ~ .shop-filterbar label[for="f-energy"],
#f-growth:focus-visible ~ .shop-filterbar label[for="f-growth"],
#f-edge:focus-visible ~ .shop-filterbar label[for="f-edge"],
#f-vitality:focus-visible ~ .shop-filterbar label[for="f-vitality"],
#f-sleep:focus-visible ~ .shop-filterbar label[for="f-sleep"],
#f-immunity:focus-visible ~ .shop-filterbar label[for="f-immunity"],
#f-essentials:focus-visible ~ .shop-filterbar label[for="f-essentials"] {
  outline: 2.5px solid var(--color-ink); outline-offset: 3px;
}

/* filtering */
#f-restore:checked ~ .shop-grid .product-card:not(.p-restore),
#f-weight:checked ~ .shop-grid .product-card:not(.p-weight),
#f-glow:checked ~ .shop-grid .product-card:not(.p-glow),
#f-energy:checked ~ .shop-grid .product-card:not(.p-energy),
#f-growth:checked ~ .shop-grid .product-card:not(.p-growth),
#f-edge:checked ~ .shop-grid .product-card:not(.p-edge),
#f-vitality:checked ~ .shop-grid .product-card:not(.p-vitality),
#f-sleep:checked ~ .shop-grid .product-card:not(.p-sleep),
#f-immunity:checked ~ .shop-grid .product-card:not(.p-immunity),
#f-essentials:checked ~ .shop-grid .product-card:not(.p-essentials) { display: none; }

/* ---- Pagination (applies to the "All" view only; every category holds ≤12 products) ---- */
#f-all:checked ~ #pg1:checked ~ .shop-grid .product-card:not(.pg1),
#f-all:checked ~ #pg2:checked ~ .shop-grid .product-card:not(.pg2),
#f-all:checked ~ #pg3:checked ~ .shop-grid .product-card:not(.pg3),
#f-all:checked ~ #pg4:checked ~ .shop-grid .product-card:not(.pg4),
#f-all:checked ~ #pg5:checked ~ .shop-grid .product-card:not(.pg5) { display: none; }

.shop-pager {
  display: none;
  align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-8);
  justify-content: center;
}
#f-all:checked ~ .shop-pager { display: flex; }
.shop-pager-label { font-size: var(--fs-sm); color: var(--text-muted); margin-right: var(--sp-2); }
.pager-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-full); border: 1px solid var(--border-strong);
  background: var(--color-paper); color: var(--n-700);
  font-size: var(--fs-sm); font-weight: var(--w-semi);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pager-pill:hover { border-color: var(--color-ink); background: var(--n-50); }
#pg1:checked ~ .shop-pager label[for="pg1"],
#pg2:checked ~ .shop-pager label[for="pg2"],
#pg3:checked ~ .shop-pager label[for="pg3"],
#pg4:checked ~ .shop-pager label[for="pg4"],
#pg5:checked ~ .shop-pager label[for="pg5"] {
  background: var(--color-ink); color: #fff; border-color: var(--color-ink);
}
#pg1:focus-visible ~ .shop-pager label[for="pg1"],
#pg2:focus-visible ~ .shop-pager label[for="pg2"],
#pg3:focus-visible ~ .shop-pager label[for="pg3"],
#pg4:focus-visible ~ .shop-pager label[for="pg4"],
#pg5:focus-visible ~ .shop-pager label[for="pg5"] {
  outline: 2.5px solid var(--color-ink); outline-offset: 3px;
}

.shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--sp-5); }
@media (min-width: 1040px) { .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- Stretched link: whole product card is clickable via its title anchor ---- */
.product-card { position: relative; }
.product-card a.product-title::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.product-card .product-add { z-index: 2; }
.product-card .dose-pill { position: relative; z-index: 2; }

/* ---- Multi-strength variant cards (CSS-only dose selector) ---- */
.product-card > .vsel { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.product-card { position: relative; }
.vimg { display: none; }
.vprice { display: none; }
.dose-row { display: flex; flex-wrap: wrap; gap: 8px; }
.dose-pill {
  display: inline-flex; align-items: center;
  padding: 6px 13px; min-height: 32px;
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  background: var(--color-paper); color: var(--n-700);
  font-size: var(--fs-xs); font-weight: var(--w-medium);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.dose-pill:hover { border-color: var(--color-ink); }
.product-card:has(.vr-1:checked) .vimg.vpos-1,
.product-card:has(.vr-2:checked) .vimg.vpos-2,
.product-card:has(.vr-3:checked) .vimg.vpos-3 { display: block; }
.product-card:has(.vr-1:checked) .vprice.vpos-1,
.product-card:has(.vr-2:checked) .vprice.vpos-2,
.product-card:has(.vr-3:checked) .vprice.vpos-3 { display: flex; width: 100%; align-items: baseline; gap: var(--sp-3); }
.product-card:has(.vr-1:checked) .dose-pill.vpos-1,
.product-card:has(.vr-2:checked) .dose-pill.vpos-2,
.product-card:has(.vr-3:checked) .dose-pill.vpos-3 {
  background: var(--color-ink); color: #fff; border-color: var(--color-ink);
}
.product-card:has(.vr-1:focus-visible) .dose-pill.vpos-1,
.product-card:has(.vr-2:focus-visible) .dose-pill.vpos-2,
.product-card:has(.vr-3:focus-visible) .dose-pill.vpos-3 {
  outline: 2.5px solid var(--color-ink); outline-offset: 2px;
}

/* ============================================================
   20b · OPTML STANDARD PAGE — cards, image slots, trust strip
   ============================================================ */
.std-strip-legacy {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--sp-6) var(--sp-8);
  border-block: 1px solid var(--border);
  padding-block: var(--sp-8);
}
@media (min-width: 860px) { .std-strip-legacy { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.std-strip {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  margin-top: var(--sp-2);
}
@media (min-width: 860px) { .std-strip { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.std-strip-item { display: flex; flex-direction: column; gap: 6px; background: var(--color-paper); padding: var(--sp-6) var(--sp-5); }
.std-strip-num { font-size: 1.9rem; font-weight: var(--w-bold); letter-spacing: var(--track-tight); color: var(--text-strong); line-height: 1; }
.std-strip-label { font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--w-medium); line-height: 1.4; text-wrap: balance; }

.step-cards {
  display: grid; gap: var(--sp-5);
  margin-top: var(--sp-10);
  counter-reset: none;
}
@media (min-width: 780px) { .step-cards { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.step-card {
  background: var(--color-paper);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.step-media {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--n-50), var(--restore-light));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: var(--sp-5);
  overflow: hidden;
}
.step-media img { width: 100%; height: 100%; object-fit: cover; }
.step-media svg { width: 64px; height: 64px; fill: none; stroke: var(--restore-dark); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.step-media .ph-label { font-size: 10.5px; color: var(--n-400); letter-spacing: .04em; text-transform: uppercase; font-weight: var(--w-medium); text-align: center; padding-inline: 12px; }
.step-num { display: block; font-size: var(--fs-sm); font-weight: var(--w-bold); letter-spacing: .06em; color: var(--restore); margin-bottom: var(--sp-2); }
.step-card h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.step-card p { font-size: var(--fs-sm); color: var(--n-600); }

/* Dark step cards — matches the QR trust panel scheme */
.step-cards-dark .step-card { background: var(--color-ink); border-color: rgba(255,255,255,.08); }
.step-cards-dark .step-card:hover { border-color: rgba(255,255,255,.22); box-shadow: var(--shadow-lg); }
.step-cards-dark .step-media { background: linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,120,72,.5)); }
.step-cards-dark .step-media svg { stroke: #ffd9c9; }
.step-cards-dark .step-num { color: var(--energy); }
.step-cards-dark .step-card h3 { color: #fff; }
.step-cards-dark .step-card p { color: rgba(255,255,255,.68); }
.step-cards-dark .step-card a.inline-link { color: #ffb596 !important; }

.std-grid { display: grid; gap: var(--sp-5); margin-top: var(--sp-8); }
@media (min-width: 640px) { .std-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 960px) { .std-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.std-card {
  background: var(--n-25);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.std-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
.std-card h3 { font-size: var(--fs-h4); margin: var(--sp-4) 0 var(--sp-2); }
.std-card p { font-size: var(--fs-sm); color: var(--n-600); }
.std-chip {
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: var(--restore-light);
  display: inline-flex; align-items: center; justify-content: center;
}
.std-chip svg { width: 25px; height: 25px; fill: none; stroke: var(--restore-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.outcome-grid { display: grid; gap: var(--sp-5); margin-top: var(--sp-10); }
@media (min-width: 720px) { .outcome-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.outcome-card {
  background: var(--color-paper);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.outcome-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.outcome-pass { border-top: 3px solid var(--growth); }
.outcome-fail { border-top: 3px solid var(--energy); }
.outcome-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

/* ---- Dark variants (match the QR trust panel scheme) ---- */
.std-grid-dark .std-card { background: var(--color-ink); border-color: rgba(255,255,255,.08); }
.std-grid-dark .std-card:hover { border-color: rgba(255,255,255,.22); box-shadow: var(--shadow-lg); }
.std-grid-dark .std-card h3 { color: #fff; }
.std-grid-dark .std-card p { color: rgba(255,255,255,.68); }
.std-grid-dark .std-chip { background: rgba(255,120,72,.18); }
.std-grid-dark .std-chip svg { stroke: #ffb596; }

.outcome-grid-dark .outcome-card { border-color: transparent; }
.outcome-grid-dark .outcome-pass { background: linear-gradient(145deg, var(--growth-light), #a9e6ba); border-top: 3px solid var(--growth); }
.outcome-grid-dark .outcome-fail { background: linear-gradient(145deg, var(--energy-light), #ffbe9e); border-top: 3px solid var(--energy); }
.outcome-grid-dark .outcome-card:hover { box-shadow: var(--shadow-md); }
.outcome-grid-dark .outcome-pass h3 { color: var(--growth-dark); }
.outcome-grid-dark .outcome-fail h3 { color: var(--energy-dark); }
.outcome-grid-dark .outcome-pass p.muted { color: var(--growth-dark); }
.outcome-grid-dark .outcome-fail p.muted { color: var(--energy-dark); }
.outcome-grid-dark .badge-pass { background: rgba(255,255,255,.75); }
.outcome-grid-dark .outcome-fail .badge { background: rgba(255,255,255,.75) !important; }

.callout.callout-dark { background: var(--color-ink); }
.callout.callout-dark svg { stroke: #ffb596; }
.callout.callout-dark strong { color: #fff; }
.callout.callout-dark p { color: rgba(255,255,255,.72); }

.cta-band-dark { background: var(--color-ink); }
.cta-band-dark h2 { color: #fff; }
.cta-band-dark .lead { color: rgba(255,255,255,.68); }
.cta-band-dark .eyebrow-accent { color: var(--energy); }
.cta-band-dark .btn-primary { background: #fff; color: var(--color-ink); }
.cta-band-dark .btn-primary:hover { background: var(--n-100); }
.std-chip.chip-pass { background: var(--growth-light); }
.std-chip.chip-pass svg { stroke: var(--growth-dark); stroke-width: 2.4; }
.std-chip.chip-fail { background: var(--energy-light); }
.std-chip.chip-fail svg { stroke: var(--energy-dark); stroke-width: 2; }

/* ============================================================
   20 · VERIFY WIDGET
   ============================================================ */
.verify-box {
  background: var(--color-paper); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-md);
  padding: clamp(24px, 4vw, 44px); max-width: 560px;
}
.verify-field { display: flex; flex-direction: column; gap: 8px; margin-top: var(--sp-5); }
.verify-inline { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.verify-inline .form-input { flex: 1 1 200px; }

.stepgrid { display: grid; gap: var(--sp-6); margin-top: var(--sp-8); }
@media (min-width: 780px) { .stepgrid { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   21 · COA LIBRARY
   ============================================================ */
.coa-controls { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); align-items: center; }
.coa-table-wrap { margin-top: var(--sp-8); overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); }
.coa-table { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--color-paper); }
.coa-table th, .coa-table td { padding: 15px 20px; text-align: left; font-size: var(--fs-sm); border-bottom: 1px solid var(--border); }
.coa-table thead th { background: var(--n-50); font-weight: var(--w-semi); color: var(--text-strong); position: sticky; top: 0; }
.coa-table tbody tr:hover { background: var(--n-25); }
.coa-table td { color: var(--n-600); }
.coa-table .code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--fs-xs); color: var(--n-700); }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--w-semi);
}
.badge-pass { background: var(--growth-light); color: var(--growth-dark); }
.badge-pass .dot { width: 7px; height: 7px; border-radius: var(--r-full); background: var(--growth); }
.coa-dl { color: var(--restore); font-weight: var(--w-semi); display: inline-flex; align-items: center; gap: 6px; }
.coa-dl svg { width: 15px; height: 15px; }

/* ============================================================
   22 · FORMS
   ============================================================ */
.form { display: grid; gap: var(--sp-5); }
.form-row { display: grid; gap: var(--sp-5); }
@media (min-width: 620px) { .form-row.two { grid-template-columns: 1fr 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field label { font-size: var(--fs-sm); font-weight: var(--w-semi); color: var(--text-strong); }
.form-field .hint { font-size: var(--fs-xs); color: var(--text-muted); }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 13px 15px;
  background: var(--color-paper); color: var(--text-strong);
  border: 1.5px solid var(--border-strong); border-radius: var(--r-md);
  font-size: var(--fs-body); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--n-400); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--color-ink); box-shadow: 0 0 0 4px var(--focus-ring);
}
.form-textarea { min-height: 130px; resize: vertical; }
.form-check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--n-700); }
.form-check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--color-ink); flex: none; }
.req { color: var(--weight-dark); }

/* ============================================================
   23 · LEGAL / LONGFORM DOC
   ============================================================ */
.doc-layout { display: grid; gap: var(--sp-10); margin-top: var(--sp-10); }
@media (min-width: 900px) { .doc-layout { grid-template-columns: 240px 1fr; gap: var(--sp-16); align-items: start; } }
/* Mobile: TOC is a wrapping row of pill links in normal flow */
.doc-toc { position: static; }
.doc-toc h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track-over); color: var(--text-muted); margin-bottom: var(--sp-3); }
.doc-toc nav, .doc-toc { display: block; }
.doc-toc a {
  display: inline-block; padding: 8px 14px; margin: 0 8px 8px 0;
  font-size: var(--fs-sm); color: var(--n-600);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.doc-toc a:hover { color: var(--color-ink); border-color: var(--color-ink); }
/* Desktop: sticky side rail */
@media (min-width: 900px) {
  .doc-toc { position: sticky; top: 96px; }
  .doc-toc a {
    display: block; padding: 7px 0 7px var(--sp-4); margin: 0;
    border: none; border-left: 2px solid var(--border); border-radius: 0;
  }
  .doc-toc a:hover { border-color: var(--color-ink); }
}
.doc-body { max-width: 68ch; }
.doc-body section + section { margin-top: var(--sp-10); }
.doc-body h2 { font-size: var(--fs-h3); scroll-margin-top: 96px; margin-bottom: var(--sp-4); letter-spacing: var(--track-snug); }
.doc-body h3 { font-size: var(--fs-h4); margin: var(--sp-6) 0 var(--sp-3); }
.doc-body p, .doc-body li { font-size: var(--fs-body); color: var(--n-700); line-height: 1.7; }
.doc-body p + p { margin-top: var(--sp-4); }
.doc-body ul { margin: var(--sp-3) 0; padding-left: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.doc-body ul li { position: relative; padding-left: var(--sp-6); }
.doc-body ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--restore); }
.doc-body a.inline-link { color: var(--restore); font-weight: var(--w-medium); text-decoration: underline; text-underline-offset: 2px; }
.doc-updated { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-4); }

/* ============================================================
   24 · CALLOUT / DISCLAIMER
   ============================================================ */
.callout {
  border-radius: var(--r-lg); padding: var(--sp-6);
  display: flex; gap: var(--sp-4); align-items: flex-start;
}
.callout svg { width: 24px; height: 24px; flex: none; margin-top: 2px; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.callout-warn { background: var(--energy-light); }
.callout-warn svg { stroke: var(--energy-dark); }
.callout-warn strong { color: var(--energy-dark); }
.callout-info { background: var(--restore-light); }
.callout-info svg { stroke: var(--restore-dark); }
.callout p { font-size: var(--fs-sm); color: var(--n-700); }

.ruo-strip {
  background: var(--color-ink); color: rgba(255,255,255,.86);
  border-radius: var(--r-md); padding: 14px 20px;
  font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: var(--w-semi); text-align: center;
}

/* ============================================================
   25 · FOOTER
   ============================================================ */
.site-footer { background: var(--color-ink); color: rgba(255,255,255,.72); margin-top: var(--section-y); }
.footer-top { display: grid; gap: var(--sp-10); padding-block: var(--sp-16) var(--sp-12); align-items: start; }
@media (min-width: 720px) { .footer-top { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: var(--sp-8) var(--sp-12); } }
.footer-brand img { height: 41px; }
.footer-brand p { font-size: var(--fs-sm); color: rgba(255,255,255,.58); margin-top: var(--sp-5); max-width: 32ch; line-height: 1.7; }
.footer-col h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track-over); color: rgba(255,255,255,.45); margin-bottom: var(--sp-5); }
.footer-col a { display: block; padding: 7px 0; font-size: var(--fs-sm); color: rgba(255,255,255,.75); transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.footer-col a:hover { color: #fff; transform: translateX(2px); }
.footer-social { display: flex; gap: var(--sp-2); margin-top: var(--sp-6); }
.footer-social a {
  width: 38px; height: 38px; border-radius: var(--r-full);
  border: 1px solid rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer-social a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); transform: translateY(-2px); }
.footer-social svg { width: 16px; height: 16px; fill: #fff; }
.footer-contact { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.12); font-size: var(--fs-sm); display: flex; flex-direction: column; gap: 2px; }
.footer-contact a { color: rgba(255,255,255,.85); font-weight: var(--w-medium); }
.footer-contact a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: var(--sp-6);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center;
  font-size: var(--fs-xs); color: rgba(255,255,255,.5);
}
.footer-bottom .foot-legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer-bottom a:hover { color: #fff; }
.footer-ruo { font-size: var(--fs-xs); color: rgba(255,255,255,.45); padding-top: var(--sp-6); padding-bottom: var(--sp-8); line-height: 1.7; border-top: 1px solid rgba(255,255,255,.12); max-width: 88ch; }

/* ============================================================
   26 · UTILITIES
   ============================================================ */
.grid-2 { display: grid; gap: var(--sp-8); }
@media (min-width: 860px) { .grid-2 { grid-template-columns: 1fr 1fr; align-items: center; } }
.media-frame { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.mt-0 { margin-top: 0; }
.pill-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pill-list .badge { background: var(--n-100); color: var(--n-700); }

/* ---- Product carousel (CSS-only scroll-snap, no JS) ---- */
.carousel {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--sp-5);
  margin-top: var(--sp-8);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-bottom: var(--sp-4);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > .product-card { scroll-snap-align: start; }
@media (min-width: 560px) { .carousel { grid-auto-columns: 44%; } }
@media (min-width: 900px) { .carousel { grid-auto-columns: 30%; gap: var(--sp-6); } }
@media (min-width: 1100px) { .carousel { grid-auto-columns: calc((100% - 3 * var(--sp-6)) / 4); } }
.carousel-hint {
  margin-top: var(--sp-3); font-size: var(--fs-xs); font-weight: var(--w-semi);
  letter-spacing: var(--track-over); text-transform: uppercase; color: var(--text-muted);
}
@media (min-width: 1100px) { .carousel-hint { display: none; } }

/* ============================================================
   27 · PRODUCT DETAIL PAGE (PDP)
   ============================================================ */
.pdp { padding-top: clamp(20px, 3vw, 36px); }
.pdp-grid { display: grid; gap: var(--sp-8); }
@media (min-width: 900px) { .pdp-grid { grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: start; } }

/* Gallery */
.pdp-gallery { display: flex; flex-direction: column; gap: var(--sp-4); }
@media (min-width: 900px) { .pdp-gallery { position: sticky; top: 92px; } }
.pdp-hero-img {
  position: relative; border-radius: var(--r-2xl); overflow: hidden;
  aspect-ratio: 1 / 1; background: linear-gradient(150deg, var(--n-50), var(--restore-light));
}
.pdp-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.pdp-hero-flag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: var(--color-ink); color: #fff;
  font-size: var(--fs-xs); font-weight: var(--w-semi);
  padding: 6px 13px; border-radius: var(--r-pill);
}
.pdp-hero-purity {
  position: absolute; bottom: 16px; left: 16px; z-index: 2;
  background: rgba(34,35,38,.72); color: #fff; backdrop-filter: blur(4px);
  font-size: var(--fs-xs); font-weight: var(--w-medium);
  padding: 6px 12px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 6px;
}
.pdp-hero-purity svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.pdp-thumb {
  border-radius: var(--r-md); overflow: hidden; aspect-ratio: 1 / 1;
  background: var(--n-50); border: 1px solid var(--border);
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Variant hero swap: dose radio drives which hero image shows */
.pdp-hero-img img.vhero { display: none; }
.pdp-grid:has(#s-1:checked) img.vhero-1,
.pdp-grid:has(#s-2:checked) img.vhero-2,
.pdp-grid:has(#s-3:checked) img.vhero-3 { display: block; }
label.pdp-thumb { cursor: pointer; transition: border-color var(--dur) var(--ease); }
.pdp-grid:has(#s-1:checked) label.pdp-thumb[for="s-1"],
.pdp-grid:has(#s-2:checked) label.pdp-thumb[for="s-2"],
.pdp-grid:has(#s-3:checked) label.pdp-thumb[for="s-3"] { border: 1.5px solid var(--color-ink); }

/* Buy box */
.pdp-buy { display: flex; flex-direction: column; gap: var(--sp-5); }
.pdp-eyebrow-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.pdp-title { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.7rem); letter-spacing: var(--track-tight); line-height: 1.05; }
.pdp-sub { font-size: var(--fs-lead); color: var(--n-600); margin-top: -6px; }
.pdp-rating-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.pdp-rating-row .rating svg { width: 16px; height: 16px; }
.pdp-rating-link { font-size: var(--fs-sm); color: var(--n-600); text-decoration: underline; text-underline-offset: 2px; }
.pdp-price-row { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.pdp-price { font-size: 2rem; font-weight: var(--w-bold); color: var(--text-strong); letter-spacing: var(--track-snug); }
.pdp-price-note { font-size: var(--fs-sm); color: var(--text-muted); }
.pdp-instock { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: var(--w-semi); color: var(--growth-dark); }
.pdp-instock .dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--growth); }

.pdp-divider { height: 1px; background: var(--border); border: 0; margin: 0; }

.pdp-field-label { font-size: var(--fs-sm); font-weight: var(--w-semi); color: var(--text-strong); margin-bottom: var(--sp-3); display: flex; justify-content: space-between; align-items: center; }
.pdp-field-label .muted { font-weight: var(--w-regular); }

/* Dose selector (CSS-only) */
.pdp-doses { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.pdp-dose {
  flex: 1 1 auto; min-width: 92px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 16px; cursor: pointer;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--color-paper);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.pdp-dose:hover { border-color: var(--color-ink); }
.pdp-dose .d-strength { font-weight: var(--w-semi); color: var(--text-strong); font-size: var(--fs-sm); }
.pdp-dose .d-price { font-size: var(--fs-xs); color: var(--text-muted); }
.pdp-dose-in { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pdp-dose-in:checked + .pdp-dose { border-color: var(--color-ink); background: var(--n-50); box-shadow: inset 0 0 0 1px var(--color-ink); }
.pdp-dose-in:focus-visible + .pdp-dose { outline: 2.5px solid var(--color-ink); outline-offset: 3px; }

/* Quantity + CTA */
.pdp-actions { display: flex; flex-direction: column; gap: var(--sp-3); }
.pdp-qty-row { display: flex; gap: var(--sp-3); align-items: stretch; }
.qty-stepper {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-pill);
  padding: 2px; flex: none;
}
.qty-stepper button {
  width: 42px; height: 42px; border-radius: var(--r-full); border: none;
  background: transparent; cursor: pointer; font-size: 20px; color: var(--n-700);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease);
}
.qty-stepper button:hover { background: var(--n-100); }
.qty-stepper input {
  width: 40px; text-align: center; border: none; background: transparent;
  font-weight: var(--w-semi); color: var(--text-strong); font-size: var(--fs-body);
  -moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp-actions .btn-add { flex: 1 1 auto; }

/* Reassurance list */
.pdp-reassure { display: grid; gap: var(--sp-3); margin-top: var(--sp-2); }
.pdp-reassure li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-sm); color: var(--n-700); }
.pdp-reassure svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--color-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.pdp-reassure strong { color: var(--text-strong); font-weight: var(--w-semi); }

/* COA mini-card */
.pdp-coa {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg);
  background: var(--restore-light);
}
.pdp-coa svg { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--restore-dark); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pdp-coa .coa-t { font-weight: var(--w-semi); color: var(--restore-dark); font-size: var(--fs-sm); }
.pdp-coa .coa-d { font-size: var(--fs-xs); color: var(--restore-dark); opacity: .8; }
.pdp-coa a { margin-left: auto; font-weight: var(--w-semi); color: var(--restore-dark); font-size: var(--fs-sm); white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; }

/* Spec table */
.pdp-specs { width: 100%; border-collapse: collapse; }
.pdp-specs th, .pdp-specs td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); vertical-align: top; }
.pdp-specs th { font-weight: var(--w-medium); color: var(--n-600); width: 42%; }
.pdp-specs td { color: var(--text-strong); font-weight: var(--w-medium); }
.pdp-specs tr:last-child th, .pdp-specs tr:last-child td { border-bottom: none; }

/* Sticky mobile add bar */
.pdp-stickybar {
  position: sticky; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--sp-4);
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 12px var(--gutter);
  margin-top: var(--sp-8);
}
.pdp-stickybar .sb-info { display: flex; flex-direction: column; line-height: 1.2; }
.pdp-stickybar .sb-name { font-weight: var(--w-semi); font-size: var(--fs-sm); color: var(--text-strong); }
.pdp-stickybar .sb-price { font-weight: var(--w-bold); color: var(--text-strong); }
.pdp-stickybar .btn { margin-left: auto; }
@media (min-width: 900px) { .pdp-stickybar { display: none; } }

/* ============================================================
   28 · SCROLL REVEAL — pure CSS, progressive enhancement
   No JS: uses scroll-driven view() timelines. Animates only
   opacity + transform (compositor-friendly). Falls back to
   fully-visible content where unsupported or reduced-motion.
   The above-the-fold hero is intentionally excluded to keep LCP fast.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .section-head,
    .goal-tile, .cat-card, .product-card,
    .feature, .review, .step, .acc-item,
    .proof, .compare-wrap, .cta-band, .card,
    .stat, .qr-points li, .pdp-buy,
    .doc-body > section, .step-card, .std-card,
    .trust-item {
      animation: revealUp linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 22%;
    }
  }
}
@keyframes revealUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Section divider bars ---- */
.section-rule {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.section-rule::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--n-200) 10%, var(--n-200) 90%, transparent);
}

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