/* ==========================================================================
   CATHAROS LABS — Design System
   Navy/ice-blue clinical science aesthetic. Verification is the brand.
   ========================================================================== */

/* Familjen Grotesk · Inter · IBM Plex Mono · Fraunces are SELF-HOSTED by the build
   (brand_assets/fonts/, all OFL) — never @import a font (engine/FRONTEND-CONTRACT.md §E). */
:root {
  /* Color */
  --navy-950: #0a0f1c;
  --navy-900: #0f172e;
  --navy-900-text: #2C4470;
  --navy-800: #16213f;
  --navy-700: #1f3057;
  --blue-600: #3a5fa0;
  --blue-500: #5c82c4;
  --blue-300: #9dbde8;
  --blue-100: #e4ecf8;
  --ink-900: #1C2B4A;
  --ink-600: #4b5768;
  --ink-400: #7c8698;
  --line: #dbe3f0;
  --bg: #eef2f8;
  --bg-flat: #f5f8fc;
  --white: #ffffff;
  --amber: #d99a3f;
  --amber-bg: #12172a;
  --green: #16a34a;
  --red: #c1463f;

  /* Type */
  --display: 'Familjen Grotesk', 'Familjen Grotesk Fallback', 'Inter', 'Inter Fallback', sans-serif;
  --body: 'Inter', 'Inter Fallback', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', 'IBM Plex Mono Fallback', ui-monospace, monospace;

  /* Layout */
  --maxw: 1180px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

* { box-sizing: border-box; }

/* A clear, on-brand focus ring for keyboard navigation — :focus-visible means this
   only appears when tabbing, not on a mouse click, so it never feels like visual noise. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid var(--blue-500);
  outline-offset: 2px;
  border-radius: 4px;
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink-900);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* ---- Compliance strip ---- */
.compliance-strip {
  background: var(--amber-bg);
  color: #cbd5e6;
  font-size: 13px;
  padding: 10px 32px;
  text-align: center;
  line-height: 1.5;
}
.compliance-strip strong { color: var(--amber); font-weight: 600; }

.pd-sticky-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(15,30,60,.12);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  align-items: center; justify-content: space-between; gap: 14px;
  transform: translateY(100%);
  transition: transform .25s ease;
}
.pd-sticky-bar.visible { transform: translateY(0); }
.pd-sticky-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pd-sticky-name { font-size: 12px; color: var(--ink-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-sticky-price { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink-900); }
.pd-sticky-btn { flex-shrink: 0; padding: 12px 22px; font-size: 14px; white-space: nowrap; }
.pd-sticky-btn.pd-sticky-notify { background: var(--navy-700); }

@media (max-width: 700px) {
  .pd-sticky-bar { display: flex; }
  body { padding-bottom: 0; }
}

/* ---- Announcement bar (the client, 2026-09-24) ----
   A brand-blue strip above the nav on every page that has one; it scrolls away with the page
   and the sticky nav stays. Still and centred until catharos-cart.js has laid in the live
   messages and set .is-rolling; then the track slides one set's width forever, a hover
   pauses it, and reduced motion never rolls. White on #2456c8 measures 6.5:1. */
.ca-announce { --ann-h: 32px; height: var(--ann-h); overflow: hidden; background: #2456c8; color: #ffffff; font-family: var(--body); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; line-height: 1; } /* Inter, the nav's own face; 700 (was 600) on the owner's word, 2026-09-24 */
.ca-announce[hidden] { display: none; }
.ca-announce-track { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; }
.ca-announce.is-rolling .ca-announce-track { justify-content: flex-start; width: max-content; animation: caAnnounce var(--ann-dur, 30s) linear infinite; will-change: transform; }
.ca-announce.is-rolling:hover .ca-announce-track { animation-play-state: paused; }
.ca-announce-set { display: flex; flex-shrink: 0; }
.ca-announce-msg { position: relative; white-space: nowrap; padding: 0 30px; }
.ca-announce.is-rolling .ca-announce-msg::after { content: ''; position: absolute; right: -2px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: rgba(255,255,255,.6); }
@keyframes caAnnounce { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 480px) { .ca-announce { --ann-h: 30px; font-size: 12px; } .ca-announce-msg { padding: 0 22px; } }
@media (prefers-reduced-motion: reduce) { .ca-announce-track { animation: none !important; } }

/* ---- Nav ---- */
.nav {
  background: var(--navy-950);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky;
  top: 0;
  z-index: 40;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.logo { display: flex; align-items: center; gap: 11px; }
.logo-mark { width: 30px; height: 30px; flex-shrink: 0; }
.logo-text { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--white); letter-spacing: 0.2px; line-height: 1; }
.logo-sub { font-family: var(--body); font-weight: 600; font-size: 10px; letter-spacing: 3px; color: var(--blue-300); display: block; margin-top: 3px; }
.nav-links { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-size: 14.5px; font-weight: 500; color: #a9b6cc; border-bottom: 2px solid transparent; padding-bottom: 4px; transition: color .15s, border-color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--white); border-color: var(--blue-300); }
.nav-icons { display: flex; align-items: center; gap: 18px; }
.nav-icons svg { width: 21px; height: 21px; stroke: #cdd7e8; }
.nav-icons svg.nav-flag-icon { width: 19px; height: 23.7px; }
.nav-flag-icon { width: 19px; height: 23.7px; }
.nav-flag-mobile { display: none; }
@media (max-width: 900px) {
  .nav-flag-desktop { display: none; }
  .nav-flag-mobile { display: inline-block; margin-right: 14px; }
}
.nav-cart-wrap { position: relative; display: flex; }
@keyframes cartPulse { 0% { transform: scale(1); } 35% { transform: scale(1.25); } 100% { transform: scale(1); } }
.nav-cart-wrap.pulse svg { animation: cartPulse .4s ease; }
.nav-cart-badge { position: absolute; top: -7px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 10px; background: var(--blue-500); color: var(--white); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  border: none;
  transition: transform .12s ease, box-shadow .12s ease, background .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--navy-700); color: var(--white); }
.btn-primary:hover { background: var(--navy-800); box-shadow: 0 6px 20px rgba(15,23,46,.25); }
.btn-secondary { background: transparent; color: var(--navy-900-text); border: 1.5px solid var(--line); }
.btn-secondary:hover { border-color: var(--navy-700); }
.btn-light { background: var(--blue-300); color: var(--navy-950); }
.btn-light:hover { background: var(--blue-500); color: var(--white); }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }

/* ---- Eyebrow ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blue-600);
}
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-500); flex-shrink: 0; }
.eyebrow.on-dark { color: var(--blue-300); }

/* ---- Hero ---- */
/* Full-bleed dark photo hero (2026-09-17 restyle): .hero-bg carries the
   photograph so the Ken Burns transform never touches the content layer;
   .hero-mist and .hero-sweep are decorative motion above it; .hero-scrim
   guarantees the text column's contrast regardless of what the photo does.
   Stacking: hero-bg(0) < hero-mist < hero-sweep < hero-scrim < hero-inner(1).

   THE VIAL IS IN THE PHOTOGRAPH (the client, 2026-09-17 evening: "the vial is
   sitting on top of the stone in this photo"). The floating cutout is gone; the
   scene is one generated frame per breakpoint — the client's own 30mg render
   photographed standing on the rock, label read back by the OCR gate — so the
   glass is grounded: contact shadow, wet-stone reflection, mist in front of it.
   Desktop: a 21:9 frame with the vial dead centre, so under `cover` it stays in
   the middle column at every width (the three columns are symmetric below).
   Phone: a 9:16 frame with the vial lower-right; the text keeps to the left 58%.
   Two files: hero-desktop.webp · hero-mobile.webp (brand_assets/hero/). */
.hero {
  position: relative;
  overflow: hidden;
  padding: 84px 32px 64px;
  background-color: #0b1630; /* solid fallback: legible before/without the image */
}

/* THE PHOTO IS STILL (the client, 2026-09-22: "the static looks jittery … images need
   to be fixed no matter the animation overlayed on top"). No zoom, no drift, no
   transform on this layer — only the smoke layers above it move. The photograph rides
   a ::before sized to ITS OWN shape (height-fitted, 21:9), centred where the vial should
   stand, with a fade on the image's own left and right edges — the earlier fade was on
   the hero box, so on a wide monitor the photo ended in a hard vertical edge inside it. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-bg::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: calc(50% + 12vw);   /* the vial is at the photo's centre; this parks it at 62% */
  transform: translateX(-50%);
  height: 100%;
  aspect-ratio: 2688 / 1152;
  background: url(brand_assets/hero/hero-desktop.webp) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%);
}
@media (min-width: 1700px) {
  .hero-bg::before { left: 50%; }
}

/* LIVING SMOKE (the client, 2026-09-22: "a subtle smoke animation around the existing
   smoke — very subtle but enough to make it look alive"). Two layers of soft blue
   blobs, blurred, screened onto the photo and masked to its lower half where the mist
   already is. Each layer drifts, breathes (scale) and fades on its own clock — 38 s and
   27 s, alternating — so the two never phase-lock into a visible loop. Peak alpha ~.16:
   the vial and the rock stay as sharp as the photo; only the mist moves. */
.hero-mist, .hero-sweep {
  position: absolute;
  inset: -4%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(16px);
  -webkit-mask-image: linear-gradient(180deg, transparent 34%, #000 62%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 34%, #000 62%, #000 100%);
  will-change: transform, opacity;
}
.hero-mist {
  opacity: .95;
  background:
    radial-gradient(closest-side, rgba(168,204,246,.20), transparent 70%) 18% 84% / 58% 40% no-repeat,
    radial-gradient(closest-side, rgba(168,204,246,.18), transparent 70%) 62% 90% / 66% 42% no-repeat,
    radial-gradient(closest-side, rgba(150,190,240,.11), transparent 70%) 40% 72% / 46% 28% no-repeat;
  animation: heroSmokeA 38s ease-in-out infinite alternate;
}
.hero-sweep {
  opacity: .85;
  background:
    radial-gradient(closest-side, rgba(180,212,250,.17), transparent 70%) 80% 80% / 54% 38% no-repeat,
    radial-gradient(closest-side, rgba(168,204,246,.16), transparent 70%) 30% 94% / 60% 36% no-repeat,
    radial-gradient(closest-side, rgba(150,190,240,.09), transparent 70%) 55% 66% / 40% 26% no-repeat;
  animation: heroSmokeB 27s ease-in-out infinite alternate;
}
@keyframes heroSmokeA {
  0%   { transform: translate3d(-2.5%, .8%, 0) scale(1);    opacity: .62; }
  50%  { transform: translate3d(.4%, -.6%, 0) scale(1.05);  opacity: .95; }
  100% { transform: translate3d(2.5%, .3%, 0) scale(1.02);  opacity: .72; }
}
@keyframes heroSmokeB {
  0%   { transform: translate3d(2%, -.4%, 0) scale(1.03);   opacity: .55; }
  50%  { transform: translate3d(-.6%, .7%, 0) scale(1);     opacity: .85; }
  100% { transform: translate3d(-2.2%, -.2%, 0) scale(1.06); opacity: .62; }
}

/* the scrim now stops before the middle column — the vial lives in the photo
   and must not be dimmed; the headline's own third stays as dark as before */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,18,40,.8) 0%, rgba(8,18,40,.6) 24%, rgba(8,18,40,.18) 40%, rgba(8,18,40,0) 48%),
    linear-gradient(180deg, rgba(8,18,40,.3) 0%, rgba(8,18,40,0) 22%, rgba(8,18,40,0) 78%, rgba(8,18,40,.3) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero-mist, .hero-sweep, .hero-text-col::after {
    animation: none;
    transform: none;
  }
  .hero-bg { background-position: center; }
  .hero-mist { opacity: .85; }
}

.hero-inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; }
.hero-inner-flex { display: flex; align-items: center; gap: 36px; }
/* symmetric outer columns so the middle (spacer) column — and the vial the
   photo puts at 50% — is dead centre of the row */
/* the ILS card left the hero 2026-09-22 (the client): the text keeps to the left 44%,
   the vial in the photo stands at 62% (see .hero-bg), the right stays open sky */
.hero-text-col { flex: 0 0 44%; max-width: 560px; min-width: 280px; }
.hero-verify-col { display: none; }

.hero .eyebrow { color: var(--blue-300); }
.hero .eyebrow::before { background: var(--blue-300); }

.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: 1.04;
  letter-spacing: -1.5px;
  margin: 22px 0 24px;
  color: #ffffff;
  max-width: 15ch;
}
.hero h1 .accent { color: #6ea1e8; display: block; }
.hero .lede { font-size: 18px; line-height: 1.6; color: #d6deeb; max-width: 46ch; margin: 0 0 34px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* Buttons: --navy-700 measures ~1.4:1 on the photo (fails the 3:1 UI-component
   floor), so the primary button gets its own solid mid-blue surface in the
   hero; the secondary button goes to a white outline on transparent. */
.hero .btn-primary {
  background: #3b6fd8;
  color: #ffffff;
  box-shadow: 0 10px 28px -10px rgba(5,12,30,.65);
}
.hero .btn-primary:hover {
  background: #3262c4;
  box-shadow: 0 12px 32px -8px rgba(5,12,30,.75);
}
.hero .btn-secondary {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255,255,255,.7);
}
.hero .btn-secondary:hover {
  background: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.92);
  color: var(--navy-900);
}

/* the middle column is a SPACER — the vial is in the photograph, and the 99%+
   purity tag that sat here came out on the client's word (2026-09-17 evening) */
.hero-vial-col { flex: 0.8; min-width: 220px; min-height: 420px; position: relative; display: flex; justify-content: center; padding: 20px 0; }
.hero-photo-band { display: none; }

/* UNDER 900 the hero stacks: text, then the COA card. How the photo rides depends
   on the width, because the two frames have opposite shapes:
     ≤480   the 9:16 PHONE frame is the background, the vial lower-right, the text in
            the left 54% beside it — the client's mock;
     481–900 (tablet / a narrow window) that frame would run 2-3x taller than the text
            block and drop the vial under the COA card (measured at 800px), so the
            background is plain sky and the DESKTOP frame rides as an in-flow band
            between the text and the card: height-fitted, vial centred. */
@media (max-width: 900px) {
  .hero { padding: 64px 20px 48px; }
  .hero-inner-flex { flex-direction: column; align-items: stretch; gap: 28px; }
  .hero-text-col { min-width: 0; }
  .hero h1 { font-size: clamp(26px, 8vw, 44px); }
  .hero .lede { font-size: 15.5px; margin-bottom: 24px; }
  .hero-ctas .btn { white-space: normal; text-align: center; }
  .hero-vial-col { display: none; }
  .hero-verify-col { min-width: 0; width: 100%; }
  .verify-card { max-width: 100%; width: 100%; }
  .compare { flex-direction: column; }
  .compare-bad { border-right: none; border-bottom: 1px solid var(--line); }
}
@media (min-width: 481px) and (max-width: 900px) {
  .hero-bg::before { display: none; }
  .hero-scrim { background: linear-gradient(180deg, rgba(8,18,40,.35) 0%, rgba(8,18,40,0) 30%); }
  .hero-photo-band {
    display: block; height: 400px; margin: -8px -20px 0;
    background: url(brand_assets/hero/hero-desktop.webp) 50% 62% / auto 100% no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%);
  }
}
@media (max-width: 480px) {
  /* PHONE: the photo is painted by the TEXT COLUMN itself (::before, bled to the
     viewport edges), so it is exactly as tall as the headline / lede / buttons block
     at every phone width. The 188vw band before it scaled with the width while the
     text did not: on a 390px phone (the owner, 2026-09-17 late) it ran 160px past the
     buttons and the COA card landed on the vial. The scrim rides inside the same
     paint as the top background layer, because this box paints ABOVE .hero-scrim.
     Top padding is the mock's: the eyebrow sits right under the nav. */
  /* THE OWNER'S REFERENCE (2026-09-23, "match this layout on mobile identically"). Every
     length below is the reference MEASURED at a 390px phone and written in --u (1/390 of the
     viewport), so a 360 or a 430 phone gets the same picture scaled, not a re-flowed one.
     The hero is as tall as its content again (it ends ~30u under the buttons, as in the
     reference) — this supersedes the 2026-09-22 whole-first-screen hero. The photo rides
     .hero-bg::before once more (the 9:16 phone frame, 344u wide, the vial's label read off
     the reference to place it), so the smoke and the scrim layer over it the way they do on
     desktop and the text column paints nothing.
     THE FULL FIRST SCREEN AGAIN, SAME PICTURE (the owner, 2026-09-23 later: "fit a full phone
     screen while maintaining overall proportions and layout"). The type keeps its --u sizes;
     the five gaps (top · eyebrow→h1 · h1→lede · lede→buttons · bottom = 102.5 of the
     reference's 510) carry --g instead, which is solved so the hero is exactly the screen
     under the nav: g = (screen − nav − 409.9u of type) / 102.5, never below u. The photo is
     solved from the same two anchors the reference has — the cap level with the headline's
     third line, the vial's foot just under Shop Products — so the vial grows and moves with
     the gaps and stays beside the text. At a short screen g = u and it is the reference. */
  /* --nav-ph is everything above the hero at the top of the page: the 30px announcement bar
     (2026-09-24) and the 63px nav (53 at ≤340, set there) */
  .hero {
    --u: calc(100vw / 390); --nav-ph: 93px; --vh-ph: 100vh;
    --g: max(var(--u), calc((var(--vh-ph) - var(--nav-ph) - 409.9 * var(--u)) / 102.5));
    min-height: calc(var(--vh-ph) - var(--nav-ph));
    padding: calc(31.2 * var(--g)) calc(20 * var(--u)) calc(31.6 * var(--g)); background-color: #011122;
  }
  .hero-bg::before {
    display: block; transform: none; aspect-ratio: auto;
    left: calc(84.4 * var(--u) - 23.49 * var(--g)); top: calc(22.4 * var(--g) - 73 * var(--u)); bottom: auto;
    width: calc(34.1 * var(--g) + 310.4 * var(--u)); height: calc(60.63 * var(--g) + 551.8 * var(--u));
    background: url(brand_assets/hero/hero-mobile.webp) 0 0 / 100% 100% no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
    mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  }
  /* the text side stays the reference's flat deep navy; a soft blue haze top-right */
  .hero-scrim {
    display: block;
    background:
      radial-gradient(ellipse 48% 30% at 82% 12%, rgba(38,86,150,.34), transparent 72%),
      linear-gradient(90deg, rgba(1,17,34,.72) 0%, rgba(1,17,34,.42) 42%, rgba(1,17,34,0) 58%);
  }
  /* the living smoke: the desktop layer, re-aimed at the rock the vial stands on */
  .hero-mist {
    inset: 0; filter: blur(14px);
    background:
      radial-gradient(closest-side, rgba(172,208,248,.22), transparent 70%) 20% 92% / 76% 30% no-repeat,
      radial-gradient(closest-side, rgba(172,208,248,.20), transparent 70%) 84% 96% / 70% 28% no-repeat,
      radial-gradient(closest-side, rgba(160,198,244,.14), transparent 70%) 52% 80% / 60% 24% no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent 45%, #000 70%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 45%, #000 70%, #000 100%);
    animation-duration: 34s;
  }
  .hero-sweep { display: none; }
  .hero-inner-flex { display: block; position: relative; }
  .hero-text-col { width: calc(215 * var(--u)); max-width: none; }
  /* THE FONTS ARE THE SITE'S (the owner, 2026-09-23: "I don't want the font changed"): the
     eyebrow stays IBM Plex Mono 600 at its own 12 / 2 spacing, split onto two lines; the
     headline stays Familjen Grotesk at its own tracking (-1.5 at 31.2 = -.048em), undrawn —
     sized so "Independently" spans the reference's 208u. */
  .hero .eyebrow {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    font-size: calc(12 * var(--u)); letter-spacing: calc(2 * var(--u));
    line-height: calc(15.6 * var(--u)); color: #5a8fe0;
  }
  .hero h1 {
    font-size: calc(36.6 * var(--u)); line-height: calc(37.6 * var(--u)); letter-spacing: -.048em;
    max-width: none; margin: calc(11 * var(--g)) 0 calc(12.4 * var(--g));
  }
  .hero h1 .accent { color: #4298fc; }
  .hero .lede {
    font-size: calc(13.2 * var(--u)); line-height: calc(20.1 * var(--u)); color: #bcc5d4;
    max-width: calc(200 * var(--u)); margin: 0 0 calc(16.3 * var(--g));
  }
  .hero-ctas { flex-direction: column; gap: calc(9.4 * var(--u)); width: calc(185 * var(--u)); }
  .hero-ctas .btn {
    position: relative; width: 100%; height: calc(40.4 * var(--u)); min-height: 0; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center; gap: calc(13 * var(--u));
    font-size: calc(12.8 * var(--u)); border-radius: 5px;
  }
  /* a 44px finger target round a 40px button: 2px of invisible hit area above and below,
     inside the 9.4px gap, so the two targets never overlap */
  .hero-ctas .btn::before { content: ''; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
  .hero .btn-primary { background: #236bed; box-shadow: none; }
  .hero .btn-secondary { border: 1.5px solid rgba(225,232,245,.72); background: rgba(1,17,34,.35); }
  .hero .btn-arrow { display: block; width: calc(19 * var(--u)); height: calc(19 * var(--u)); flex-shrink: 0; }
  /* the reference's 99%+ purity card above the vial is NOT carried (the owner, 2026-09-23) */
}
/* the phone hero measures the SMALL viewport where the browser has it (the toolbars shown),
   so the buttons are never under Safari's bar on first load */
@supports (height: 100svh) { @media (max-width: 480px) { .hero { --vh-ph: 100svh; } } }
/* the button arrows are the phone's alone */
@media (min-width: 481px) { .hero .btn-arrow { display: none; } }

/* ---- The four standards (the client's mock, 2026-09-22): one dark band straight under
   the hero — Full Panel Tested · 99% Purity Guarantee · USA Sourced · Same Day Shipping (his
   words, 2026-09-23) — blue line icons (the nav's shield for USA), two-line labels, hairline
   dividers. Four across at every width. */
.home-std { background: #0b1630; border-top: 1px solid rgba(150,190,240,.10); border-bottom: 1px solid rgba(150,190,240,.10); }
.home-std-row { list-style: none; margin: 0 auto; padding: 26px 16px; max-width: var(--maxw); display: flex; }
.home-std-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: #e8eef9; font-size: 15.5px; line-height: 1.3; font-weight: 500; padding: 0 8px; }
.home-std-item + .home-std-item { border-left: 1px solid rgba(150,190,240,.28); }
.home-std-item svg { width: 40px; height: 40px; color: #4d8ff2; flex-shrink: 0; }
/* the nav's own shield (24 × 28 art), at the height of its neighbours */
.home-std-item svg.home-std-flag { width: 34px; }
@media (max-width: 480px) {
  .home-std-row { padding: 20px 4px; }
  .home-std-item { font-size: 12.5px; gap: 9px; padding: 0 4px; }
  .home-std-item svg { width: 32px; height: 32px; }
  .home-std-item svg.home-std-flag { width: 27.5px; }
}

/* ---- Verification card (signature component) ---- */
.verify-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -20px rgba(15,30,60,.25);
  padding: 0 28px 26px;
  max-width: 380px;
  overflow: hidden;
}
.coa-banner-inline {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 18px; padding: 12px 14px;
  border: 1px solid #cfe8d9; border-radius: 10px;
  background: #f2f9f4;
}
.coa-banner-inline .coa-icon { width: 34px; height: 34px; border-radius: 9px; }
.coa-banner-inline .coa-icon svg { width: 17px; height: 17px; }
.coa-banner-inline strong { display: block; font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--ink-900); }
.coa-banner-inline span { font-size: 12px; color: var(--ink-600); }
.verify-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-top: 22px; }
.verify-lab-badge { display: flex; align-items: center; gap: 8px; }
.verify-lab-badge .chip { background: var(--navy-700); color: var(--white); font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 4px; letter-spacing: 1px; }
.verify-lab-badge span.name { font-weight: 600; font-size: 14.5px; }
.verify-status { display: flex; align-items: center; gap: 5px; background: #e7f5ec; color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: .5px; padding: 5px 10px; border-radius: 20px; }
.verify-status svg { width: 12px; height: 12px; }
.verify-purity { font-family: var(--display); font-size: 46px; font-weight: 700; color: var(--ink-900); line-height: 1; }
.verify-purity span { color: var(--green); font-size: 28px; }
.verify-purity-label { font-family: var(--mono); font-size: 11.5px; color: var(--ink-400); letter-spacing: 1px; margin: 6px 0 16px; text-transform: uppercase; }
.verify-adulterant-banner { display: flex; align-items: center; gap: 10px; background: #e7f5ec; border: 1px solid #bfe4cd; border-radius: 8px; padding: 10px 12px; margin-bottom: 16px; }
.verify-adulterant-banner svg { width: 22px; height: 22px; color: var(--green); flex-shrink: 0; }
.verify-adulterant-banner strong { display: block; font-size: 13px; color: var(--green); }
.verify-adulterant-banner span { display: block; font-size: 11.5px; color: #4d8064; }
.verify-rows { border-top: 1px solid var(--line); padding-top: 4px; }
.verify-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; font-size: 13px; border-bottom: 1px solid #eef1f7; }
.verify-row .k { color: var(--ink-600); }
.verify-row .v { font-weight: 600; color: var(--green); white-space: nowrap; }
.verify-row .v.neutral { color: var(--ink-600); }
.verify-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.verify-foot .lot { font-family: var(--mono); font-size: 12px; color: var(--ink-400); }
.verify-foot a, .verify-foot button { font-size: 13px; font-weight: 600; color: var(--blue-600); appearance: none; -webkit-appearance: none; background: none; border: none; padding: 0; font-family: var(--body); cursor: pointer; }

/* ---- Trust bar / stats ---- */
.section { padding: 76px 32px; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.section-head h2 { font-family: var(--display); font-size: clamp(30px, 3.6vw, 42px); font-weight: 700; letter-spacing: -0.8px; margin: 14px 0 12px; }
.section-head p { color: var(--ink-600); font-size: 16.5px; line-height: 1.6; }
.section-head.on-dark h2 { color: var(--white); }
.section-head.on-dark p { color: #a9b6cc; }

.checks-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; max-width: var(--maxw); margin: 0 auto; }
.check-item { text-align: center; padding: 0 10px; }
.check-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--blue-600); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; position: relative; }
.check-icon svg { width: 24px; height: 24px; stroke: #ffffff; }
.check-item .label { font-size: 13.5px; font-weight: 600; color: var(--ink-900); line-height: 1.3; }
.checks-foot { text-align: center; margin-top: 32px; font-size: 14px; color: var(--ink-600); }

.trust-strip { display: flex; gap: 18px; max-width: var(--maxw); margin: 32px auto 0; background: var(--white); border-radius: var(--radius-lg); padding: 24px 32px; box-shadow: 0 16px 40px -18px rgba(15,30,60,.22); }
.trust-badge { flex: 1; display: flex; align-items: center; gap: 14px; }
.trust-badge:not(:last-child) { border-right: 1px solid var(--line); padding-right: 18px; }
.trust-icon { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trust-icon svg { width: 21px; height: 21px; }
.trust-badge strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink-900); }
.trust-badge span { font-size: 12.5px; color: var(--ink-600); }

/* four badges since 2026-09-17 (the client: "Same-Day Shipping" beside purity, protection and
   COAs) — the strip is a 2x2 grid on a tablet and a single column on a phone */
@media (max-width: 1100px) {
  .trust-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
  .trust-badge:not(:last-child) { border-right: none; padding-right: 0; }
}
@media (max-width: 560px) {
  .trust-strip { grid-template-columns: 1fr; gap: 16px; }
  .trust-badge:not(:last-child) { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
}
.checks-foot a { color: var(--blue-600); font-weight: 600; }

/* ---- Verify explorer (interactive tabbed panel) ---- */
.verify-explorer { max-width: var(--maxw); margin: 0 auto; }
.ve-layout { display: flex; gap: 44px; align-items: flex-start; }
.ve-main { flex: 1.5; min-width: 0; }
.ve-visual { flex: 1; max-width: 340px; position: sticky; top: 100px; }
.ve-visual-card {
  position: relative;
  background: linear-gradient(160deg, #eef2f8, #dde5f2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: 36px 28px 28px;
  display: flex; justify-content: center;
}
.ve-visual-card img { width: 78%; filter: drop-shadow(0 20px 30px rgba(15,30,60,.18)); }
.ve-floating-badge {
  position: absolute; top: 20px; right: -14px;
  background: var(--white); border-radius: var(--radius-md);
  box-shadow: 0 12px 30px -10px rgba(15,30,60,.3);
  padding: 10px 14px; display: flex; align-items: center; gap: 9px;
  max-width: 190px;
}
.ve-floating-badge svg { width: 17px; height: 17px; color: var(--green); flex-shrink: 0; }
.ve-floating-badge strong { display: block; font-size: 12.5px; color: var(--ink-900); }
.ve-floating-badge span { font-size: 10.5px; color: var(--ink-600); }

@media (max-width: 900px) {
  .ve-layout { flex-direction: column; }
  .ve-visual { max-width: 260px; margin: 0 auto; position: static; }
}
.coa-banner {
  display: flex; align-items: center; gap: 18px;
  background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--green);
  border-radius: var(--radius-lg); padding: 22px 26px; margin-bottom: 36px;
}
.coa-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: #e7f5ec; display: flex; align-items: center; justify-content: center; }
.coa-icon svg { width: 22px; height: 22px; color: var(--green); }
.coa-banner strong { display: block; font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--ink-900); margin-bottom: 2px; }
.coa-banner span { font-size: 14px; color: var(--ink-600); }
.ve-stats { display: flex; gap: 44px; justify-content: center; margin-bottom: 40px; }
.ve-stat { text-align: center; }
.ve-stat strong { display: block; font-family: var(--display); font-size: 30px; font-weight: 700; color: var(--navy-900-text); }
.ve-stat span { font-size: 13px; color: var(--ink-600); }
.ve-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 0; }
.ve-tab {
  display: flex; align-items: center; gap: 7px;
  background: #f2f4f8; border: none; border-radius: 30px;
  padding: 9px 16px; font-family: var(--body); font-weight: 600; font-size: 13.5px;
  color: var(--ink-600); transition: all .15s ease;
}
.ve-tab svg { width: 14px; height: 14px; color: var(--ink-400); transition: color .15s ease; opacity: 0.85; }
.ve-tab:hover { background: #e7ebf2; color: var(--navy-900-text); }
.ve-tab.active { background: var(--navy-700); color: var(--white); }
.ve-tab.active svg { color: var(--blue-300); }
.ve-panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px 44px; margin-top: 22px; min-height: 168px; max-width: 820px; margin-left: auto; margin-right: auto; }
.ve-panel-inner { display: none; animation: veFade .25s ease; }
.ve-panel-inner.active { display: block; }
@keyframes veFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.ve-panel-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ve-panel-head h3 { font-family: var(--display); font-size: 22px; font-weight: 700; margin: 0; }
.ve-badge { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--green); background: #e7f5ec; padding: 4px 10px; border-radius: 20px; }
.ve-panel-inner p { font-size: 15.5px; line-height: 1.65; color: var(--ink-600); max-width: 62ch; margin: 0 0 18px; }
.ve-why { border-left: 3px solid var(--blue-500); background: var(--bg-flat); padding: 12px 18px; font-size: 14.5px; line-height: 1.6; color: var(--ink-900); max-width: 62ch; border-radius: 0 8px 8px 0; }
.ve-why strong { color: var(--navy-900-text); }

@media (max-width: 700px) {
  .ve-stats { gap: 24px; }
  .ve-panel { padding: 28px 24px; }
  .ve-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 8px; padding: 4px 32px 8px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; margin: 0 -32px; }
  .ve-tab { flex-shrink: 0; scroll-snap-align: center; white-space: nowrap; }
}

/* ---- Product cards ---- */
.product-card { background: var(--white); padding: 20px 20px 18px; display: flex; flex-direction: column; height: 100%; }
.product-media { position: relative; background: radial-gradient(ellipse 70% 60% at 50% 35%, #f6f9fd 0%, #dde7f6 100%); border-radius: var(--radius-md); aspect-ratio: 4/5; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 16px; overflow: hidden; padding-bottom: 8%; }
.product-coa-strip { display: flex; align-items: center; justify-content: space-between; background: var(--bg-flat); border: 1px solid var(--line); border-radius: 8px; padding: 9px 13px; font-size: 12.5px; margin: -6px 0 16px; }
.product-coa-strip .purity-mini { display: flex; align-items: center; gap: 4px; font-weight: 700; color: var(--green); }
.product-coa-strip .purity-mini svg { width: 11px; height: 11px; }
.product-coa-strip .coa-link-mini { appearance: none; -webkit-appearance: none; background: var(--white); border: 1px solid var(--blue-300); color: var(--blue-600); font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 20px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.product-coa-strip .coa-link-mini:hover { background: var(--blue-100); border-color: var(--blue-500); }
.product-media .product-img { width: 90%; height: auto; object-fit: contain; position: relative; z-index: 2; filter: drop-shadow(0 4px 6px rgba(15,30,60,.15)); }
.product-media .contact-shadow { position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%); width: 58%; height: 16px; background: radial-gradient(ellipse, rgba(20,35,70,.38) 0%, rgba(20,35,70,0) 72%); z-index: 1; filter: blur(2px); }
.product-media .product-reflection { width: 90%; height: auto; position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%) scaleY(-1); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 55%); mask-image: linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 55%); opacity: 0.9; z-index: 1; }
.product-cat { font-family: var(--mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--blue-600); font-weight: 600; margin-bottom: 8px; }
.product-name { font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.3; margin-bottom: 10px; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-verified { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--green); margin-bottom: 10px; }
.product-status { font-size: 12px; color: var(--ink-400); margin-top: 6px; }
.product-verified svg { width: 13px; height: 13px; flex-shrink: 0; }
.product-dose { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--blue-600); background: var(--blue-100); border-radius: 20px; padding: 5px 13px; margin-bottom: 4px; margin-right: 6px; opacity: 0.55; }
.product-dose.product-dose-live { opacity: 1; }
.card-dose-btn { border: none; cursor: pointer; font-family: var(--body); transition: background .12s ease, color .12s ease; }
.card-dose-btn.active { background: var(--navy-700); color: var(--white); opacity: 1; }
.card-dose-btn:hover:not(.active) { background: var(--blue-300); }
.product-card-media-link, .product-card-text-link { display: block; color: inherit; text-decoration: none; }
.product-dose-row { margin-bottom: 8px; }
.product-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; flex-wrap: wrap; gap: 8px; }
.product-price { font-family: var(--display); font-weight: 700; font-size: 22px; display: block; color: var(--navy-900-text); }
.product-unit { font-size: 12.5px; color: var(--ink-400); }
.view-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--navy-900-text); white-space: nowrap; background: var(--bg-flat); border: 1px solid var(--line); border-radius: 20px; padding: 8px 15px; transition: background .15s, border-color .15s; }
.add-to-cart-btn { appearance: none; -webkit-appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; font-family: var(--body); color: var(--white); white-space: nowrap; background: var(--navy-700); border: 1px solid var(--navy-700); border-radius: 20px; padding: 8px 15px; transition: background .15s ease, transform .1s ease; }
.add-to-cart-btn:hover { background: var(--navy-800); }
.add-to-cart-btn:active { transform: scale(0.97); }
.add-to-cart-btn.added { background: var(--green); border-color: var(--green); }
.product-card:hover .view-link { background: var(--navy-700); color: var(--white); border-color: var(--navy-700); }

/* ---- Comparison ---- */
.compare { max-width: 900px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 20px 50px -20px rgba(15,30,60,.18); display: flex; }
.compare-half { padding: 36px 38px; flex: 1; }
.compare-bad { background: var(--white); border-right: 1px solid var(--line); }
.compare-good { background: var(--navy-900); color: var(--white); }
.compare-title { font-family: var(--display); font-style: normal; font-weight: 700; font-size: 15px; letter-spacing: 0.2px; text-transform: none; color: var(--ink-600); margin-bottom: 20px; }
.compare-good .compare-title { color: var(--blue-300); }
.compare-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(0,0,0,.06); font-family: var(--body); font-style: normal; font-weight: 500; font-size: 15px; color: var(--ink-900); }
.compare-good .compare-row { border-bottom: 1px solid rgba(255,255,255,.08); color: var(--white); font-weight: 500; }
.compare-row:last-child { border-bottom: none; }
.compare-row svg { width: 17px; height: 17px; flex-shrink: 0; }
.compare-bad .compare-row svg { stroke: var(--red); }
.compare-good .compare-row svg { stroke: #3ddc84; }

/* ---- Benefit grid ---- */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: var(--maxw); margin: 0 auto; }
.section-connector { text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-400); text-transform: uppercase; letter-spacing: 1px; margin: 48px 0 24px; }
.benefit-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 24px; }
a.benefit-card { display: block; transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; cursor: pointer; }
a.benefit-card:hover { border-color: var(--blue-500); box-shadow: 0 16px 32px -20px rgba(15,30,60,.3); transform: translateY(-2px); }
.contact-response-note { font-size: 12.5px; color: var(--ink-400); margin-top: -6px; }
.benefit-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.benefit-icon svg { width: 22px; height: 22px; }
.benefit-card h4 { font-family: var(--display); font-size: 16px; font-weight: 700; margin: 0 0 8px; color: var(--ink-900); }
.benefit-card p { font-size: 14px; line-height: 1.55; color: var(--ink-600); margin: 0; }

@media (max-width: 900px) {
  .benefit-grid { grid-template-columns: 1fr; }
}

/* ---- CTA banner ---- */
.cta-banner { background: linear-gradient(135deg, var(--navy-800), var(--navy-950)); border-radius: var(--radius-lg); padding: 52px 48px; display: flex; align-items: center; justify-content: space-between; gap: 40px; max-width: var(--maxw); margin: 0 auto; }
.cta-banner h3 { font-family: var(--display); color: var(--white); font-size: 28px; font-weight: 700; margin: 0 0 10px; }
.cta-banner p { color: #b7c3d9; font-size: 15.5px; max-width: 46ch; margin: 0; }

.cta-dual { display: flex; gap: 20px; max-width: var(--maxw); margin: 0 auto; }
.cta-banner-half { flex: 1; background: linear-gradient(135deg, var(--navy-800), var(--navy-950)); border-radius: var(--radius-lg); padding: 40px 36px; }
.cta-banner-half h3 { font-family: var(--display); color: var(--white); font-size: 22px; font-weight: 700; margin: 0 0 10px; }
.cta-banner-half p { color: #b7c3d9; font-size: 14.5px; line-height: 1.55; margin: 0 0 22px; max-width: 40ch; }

/* ---- Footer ---- */
.footer { background: var(--navy-950); color: #8b96ab; padding: 64px 32px 28px; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer .logo-text { color: var(--white); }
.footer-col h4 { color: #cfd8e8; font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 16px; font-weight: 600; }
.footer-col a { display: block; font-size: 14.5px; margin-bottom: 11px; color: #a9b4c8; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { max-width: var(--maxw); margin: 40px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12.5px; text-align: center; color: #6b7690; line-height: 1.7; }
.footer-bottom strong { color: var(--amber); }

/* ---- Breadcrumb / misc utility ---- */
.crumb { font-size: 13.5px; color: var(--ink-400); padding: 20px 0 0; }
.crumb a { color: var(--ink-600); }
.crumb a:hover { color: var(--blue-600); }

.badge-warn { display: flex; gap: 10px; align-items: flex-start; background: #fdf6e9; border: 1px solid #f0dfb8; border-radius: var(--radius-sm); padding: 12px 16px; font-size: 13.5px; color: #7a5c1e; line-height: 1.5; }
.badge-warn strong { color: #8a5f00; }
.badge-warn svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; stroke: #c99a2e; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .checks-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; row-gap: 0; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding: 4px 4px 10px; margin: 0 -32px; padding-left: 32px; padding-right: 32px; }
  .checks-grid .check-item { flex: 0 0 92px; scroll-snap-align: center; }
  body .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .benefit-grid { grid-template-columns: 1fr !important; }
  .benefit-grid-scroll {
    display: flex !important; flex-wrap: nowrap; overflow-x: auto; gap: 14px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    padding: 4px 4px 10px; margin: 0 -32px; padding-left: 32px; padding-right: 32px;
  }
  .benefit-grid-scroll .benefit-card { flex: 0 0 240px; scroll-snap-align: center; }
  .cta-dual { flex-direction: column; }
  .cta-banner { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ---- Mobile nav toggle ---- */
.nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 30px; height: 30px; background: none; border: none; padding: 0; cursor: pointer; flex-shrink: 0; }
.nav-toggle span { display: block; height: 2px; width: 22px; background: #ffffff; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-menu { display: none; flex-direction: column; background: var(--navy-950); border-top: 1px solid rgba(255,255,255,.08); position: fixed; top: var(--nav-h, 64px); left: 0; right: 0; z-index: 39; max-height: calc(100vh - var(--nav-h, 64px)); overflow-y: auto; box-shadow: 0 12px 24px rgba(0,0,0,.25); }
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu a { padding: 16px 32px; font-size: 15.5px; font-weight: 500; color: #a9b6cc; border-bottom: 1px solid rgba(255,255,255,.06); }
.nav-mobile-menu a.active { color: #ffffff; background: rgba(255,255,255,.04); }
.nav-mobile-menu a:last-child { border-bottom: none; }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
}
@media (min-width: 901px) {
  .nav-mobile-menu { display: none !important; }
}
@media (min-width: 901px) and (max-width: 1140px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .cta-banner { flex-direction: column; align-items: flex-start; }
  .cta-dual { flex-direction: column; }
}

/* ---- Partner earnings calculator ---- */
.calc-layout { display: flex; gap: 40px; align-items: stretch; max-width: var(--maxw); margin: 0 auto; }
.calc-main { flex: 1.4; min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px 44px; box-shadow: 0 20px 50px -24px rgba(15,30,60,.2); }
.calc-side { flex: 1; max-width: 380px; display: flex; flex-direction: column; gap: 20px; }
.calc-controls { display: flex; flex-direction: column; gap: 26px; margin-bottom: 6px; }
.calc-field { }
.calc-field-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.calc-field label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--ink-600); }
.calc-field-val { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--navy-900-text); }
.calc-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 4px; background: var(--line); outline: none; }
.calc-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--navy-700); border: 3px solid var(--white); box-shadow: 0 2px 8px rgba(15,30,60,.35); cursor: pointer; }
.calc-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--navy-700); border: 3px solid var(--white); box-shadow: 0 2px 8px rgba(15,30,60,.35); cursor: pointer; border: none; }
.calc-hint { font-size: 12px; color: var(--ink-400); margin-top: 8px; }

.calc-chart-wrap { margin: 32px 0 8px; }
.calc-chart-label { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-400); margin-bottom: 10px; }
.calc-chart { width: 100%; height: auto; overflow: visible; }
.calc-bar { fill: var(--blue-100); transition: height .35s ease, y .35s ease; }
.calc-bar.new { fill: var(--blue-600); }
.calc-bar-month { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-400); }
.calc-legend { display: flex; gap: 22px; margin-top: 14px; }
.calc-legend-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-600); }
.calc-legend-swatch { width: 11px; height: 11px; border-radius: 3px; }

.calc-results { display: flex; gap: 1px; background: var(--line); border-radius: var(--radius-md); overflow: hidden; margin-top: 28px; border: 1px solid var(--line); }
.calc-result { flex: 1; background: var(--bg-flat); padding: 18px 20px; }
.calc-result strong { display: block; font-family: var(--display); font-size: 26px; font-weight: 700; color: var(--navy-900-text); }
.calc-result span { font-size: 12px; color: var(--ink-600); }
.calc-disclaimer { font-size: 11.5px; color: var(--ink-400); margin-top: 16px; line-height: 1.5; }

/* Dashboard preview card */
.dash-card { background: var(--navy-950); border-radius: var(--radius-lg); padding: 26px 24px 22px; color: var(--white); box-shadow: 0 24px 60px -20px rgba(15,30,60,.4); position: sticky; top: 100px; flex: 1; display: flex; flex-direction: column; }
.dash-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.dash-card-top strong { font-family: var(--display); font-size: 14.5px; font-weight: 700; }
.dash-preview-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--blue-300); background: rgba(157,189,232,.12); padding: 4px 8px; border-radius: 20px; }
.dash-link-row { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 10px 12px; margin-bottom: 18px; }
.dash-link-row span { font-family: var(--mono); font-size: 12px; color: #cdd7e8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.dash-copy-btn { background: var(--blue-300); color: var(--navy-950); border: none; border-radius: 5px; font-size: 11px; font-weight: 700; padding: 6px 9px; flex-shrink: 0; }
.coa-copy-row { display: inline-flex; align-items: center; gap: 6px; }
.coa-copy-btn { appearance: none; -webkit-appearance: none; background: none; border: 1px solid var(--line); border-radius: 4px; color: var(--ink-400); font-size: 12px; line-height: 1; padding: 3px 5px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.coa-copy-btn:hover { background: var(--bg-flat); color: var(--ink-900); }
.coa-copy-btn.copied { background: var(--green); border-color: var(--green); color: var(--white); }
.coa-stat-grid .coa-copy-btn { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.6); }
.coa-stat-grid .coa-copy-btn:hover { background: rgba(255,255,255,.1); color: #ffffff; }
.dash-copy-btn.copied { background: #3ddc84; }
.dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.08); border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
.dash-stat { background: rgba(255,255,255,.03); padding: 14px 14px; }
.dash-stat strong { display: block; font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--white); }
.dash-stat span { font-size: 11px; color: #94a1ba; }
.dash-spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-bottom: 6px; }
.dash-spark div { flex: 1; background: linear-gradient(180deg, var(--blue-300), var(--blue-600)); border-radius: 2px 2px 0 0; }
.dash-spark-label { font-size: 10.5px; color: #94a1ba; }
.dash-example-note { font-size: 10.5px; color: #6b7690; margin-top: 14px; text-align: center; }

/* Activity feed inside dashboard preview */
.dash-divider { border: none; border-top: 1px solid rgba(255,255,255,.08); margin: 18px 0; }
.dash-section-label { font-family: var(--body); font-size: 11.5px; font-weight: 600; color: #94a1ba; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 12px; }
.dash-activity { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.dash-activity-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.dash-activity-row:last-child { border-bottom: none; }
.dash-activity-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dash-activity-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--blue-500), var(--blue-600)); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 12px; font-weight: 700; color: var(--white); }
.dash-activity-text strong { display: block; font-size: 13px; font-weight: 600; color: var(--white); }
.dash-activity-text span { font-size: 11.5px; color: #94a1ba; }
.dash-activity-amt { font-family: 'Fraunces', 'Fraunces Fallback', serif; font-style: italic; font-weight: 600; font-size: 15px; color: #3ddc84; white-space: nowrap; }
.dash-payout-row { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 12px 14px; margin-top: 16px; }
.dash-payout-row span { font-size: 12px; color: #94a1ba; }
.dash-payout-row strong { font-size: 13px; color: var(--white); font-weight: 600; }

@media (max-width: 900px) {
  .calc-layout { flex-direction: column; }
  .calc-side { max-width: none; }
  .dash-card { position: static; }
  .calc-main { padding: 30px 24px; }
}

/* ---- Rate story (the two-number moment) ---- */
.rate-story { display: flex; align-items: center; justify-content: center; gap: 28px; max-width: 720px; margin: 0 auto 8px; flex-wrap: wrap; }
.rate-box { flex: 1; min-width: 220px; background: var(--white); border-radius: var(--radius-lg); padding: 34px 30px; text-align: center; box-shadow: 0 20px 44px -26px rgba(15,30,60,.28); }
.rate-figure { font-family: 'Fraunces', 'Fraunces Fallback', serif; font-style: italic; font-weight: 600; font-size: 56px; color: var(--navy-900-text); line-height: 1; }
.rate-figure sup { font-style: normal; font-size: 22px; top: -0.9em; }
.rate-caption { font-size: 14.5px; color: var(--ink-600); margin-top: 10px; line-height: 1.5; }
.rate-caption strong { color: var(--ink-900); }
.rate-connector { display: flex; flex-direction: column; align-items: center; color: var(--ink-400); flex-shrink: 0; }
.rate-connector svg { width: 22px; height: 22px; }
.rate-connector span { font-size: 11px; margin-top: 4px; }

/* ---- Calculator: warmer, narrative number treatment ---- */
.calc-field label { font-family: var(--body); font-size: 15px; text-transform: none; letter-spacing: normal; color: var(--ink-900); font-weight: 500; }
.calc-field-val { font-family: 'Fraunces', 'Fraunces Fallback', serif; font-style: italic; font-weight: 600; font-size: 24px; }
.calc-chart-label { font-family: var(--body); font-size: 13px; text-transform: none; letter-spacing: normal; color: var(--ink-600); }
.calc-result strong { font-family: 'Fraunces', 'Fraunces Fallback', serif; font-style: italic; font-weight: 600; font-size: 30px; }

.dash-stat strong.figure-serif { font-family: 'Fraunces', 'Fraunces Fallback', serif; font-style: italic; font-weight: 600; }

/* ---- Legal document pages (Privacy / Terms) ---- */
.legal-layout { display: flex; gap: 56px; max-width: var(--maxw); margin: 0 auto; align-items: flex-start; }
.legal-toc { flex: 0 0 240px; position: sticky; top: 100px; }
.legal-toc-label { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-400); margin-bottom: 14px; }
.legal-toc a { display: block; font-size: 13.5px; color: var(--ink-600); padding: 7px 0; border-left: 2px solid var(--line); padding-left: 14px; }
.legal-toc a:hover { color: var(--navy-900-text); border-left-color: var(--blue-500); }
.legal-body { flex: 1; max-width: 720px; }
.legal-updated { font-family: var(--mono); font-size: 12px; color: var(--ink-400); margin-bottom: 36px; }
.legal-body h2 { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--ink-900); margin: 44px 0 14px; scroll-margin-top: 100px; }
.legal-body h2:first-of-type { margin-top: 0; }
.legal-body p { font-size: 15px; line-height: 1.75; color: var(--ink-600); margin: 0 0 16px; }
.legal-body ul, .legal-body ol { font-size: 15px; line-height: 1.75; color: var(--ink-600); margin: 0 0 16px; padding-left: 22px; }
.legal-body li { margin-bottom: 6px; }
.legal-body strong { color: var(--ink-900); }
.legal-body a { color: var(--blue-600); font-weight: 600; }
.legal-disclaimer { display: flex; gap: 12px; align-items: flex-start; background: #fdf6e9; border: 1px solid #f0dfb8; border-radius: var(--radius-md); padding: 16px 18px; font-size: 13.5px; color: #7a5c1e; line-height: 1.6; margin-bottom: 40px; }
.legal-disclaimer strong { color: #8a5f00; }
.legal-disclaimer svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; stroke: #c99a2e; }

@media (max-width: 900px) {
  .legal-layout { flex-direction: column; gap: 28px; }
  .legal-toc { position: static; flex: none; width: 100%; }
  .legal-toc-scroll { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 6px; }
  .legal-toc-scroll a { border-left: none; border-bottom: 2px solid var(--line); padding: 6px 12px; white-space: nowrap; flex-shrink: 0; }
}

/* ---- COA quick-view modal ---- */
.coa-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(10, 18, 36, 0.55); z-index: 200; align-items: flex-start; justify-content: center; padding: 5vh 20px; overflow-y: auto; }
.coa-modal-overlay.open { display: flex; }
.coa-modal { background: var(--bg-flat); border-radius: var(--radius-lg); max-width: 980px; width: 100%; box-shadow: 0 40px 80px -20px rgba(0,0,0,.4); animation: coaModalIn .18s ease; }
@keyframes coaModalIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.coa-modal-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 28px 32px 0; }
.coa-modal-doses { display: none; gap: 8px; flex-wrap: wrap; padding: 18px 32px 0; }
.coa-modal-dose-btn { appearance: none; -webkit-appearance: none; cursor: pointer; font-family: var(--body); font-weight: 700; font-size: 13px; color: var(--blue-600); background: var(--blue-100); border: none; border-radius: 20px; padding: 8px 16px; transition: background .15s ease, color .15s ease; }
.coa-modal-dose-btn:hover { background: var(--blue-300); }
.coa-modal-dose-btn.active { background: var(--navy-700); color: var(--white); }
.coa-modal-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--blue-600); margin-bottom: 6px; }
.coa-modal-top h3 { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--ink-900); margin: 0; }
.coa-modal-close { background: var(--white); border: 1px solid var(--line); border-radius: 50%; width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-600); }
.coa-modal-close:hover { background: var(--bg-flat); color: var(--ink-900); }
.coa-modal-close svg { width: 16px; height: 16px; }
.coa-modal-body { padding: 8px 32px 8px; }

/* ---- Quick-view COA content (modal) — lighter, modern summary ---- */
.coa-quick { max-width: 560px; margin: 0 auto; padding: 8px 0 28px; }
.coa-quick-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 24px; font-size: 13px; font-weight: 600; color: var(--ink-600); }
.coa-quick-brand .chip { background: var(--navy-700); color: var(--white); font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 6px; }
.coa-quick-top { display: flex; align-items: baseline; gap: 16px; justify-content: center; }
.coa-quick-figure { font-family: 'Fraunces', 'Fraunces Fallback', serif; font-style: italic; font-weight: 600; font-size: 64px; color: var(--navy-900-text); line-height: 1; }
.coa-quick-figure span { font-size: 26px; font-style: normal; }
.coa-quick-pass { display: flex; align-items: center; gap: 5px; background: #e7f5ec; color: var(--green); font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 20px; }
.coa-quick-pass svg { width: 13px; height: 13px; }
.coa-quick-sub { text-align: center; font-size: 13px; color: var(--ink-400); margin: 6px 0 28px; }

.coa-quick-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px; }
.coa-quick-facts > div { background: var(--bg-flat); border-radius: 12px; padding: 14px 10px; text-align: center; }
.coa-quick-facts span { display: block; font-size: 11.5px; color: var(--ink-400); margin-bottom: 5px; }
.coa-quick-facts strong { font-size: 14px; color: var(--ink-900); font-weight: 700; }

.coa-quick-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 24px; }
.coa-quick-checks span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--green); font-weight: 600; background: #e7f5ec; border-radius: 8px; padding: 8px 10px; }
.coa-quick-checks svg { width: 14px; height: 14px; flex-shrink: 0; }

.coa-quick-footer { text-align: center; padding-top: 20px; border-top: 1px solid var(--line); }
.coa-quick-id { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-400); margin-bottom: 16px; }
.coa-quick-verify { display: inline-block; background: var(--navy-700); color: var(--white); font-weight: 700; font-size: 14px; padding: 12px 26px; border-radius: 30px; transition: background .15s ease; }
.coa-quick-verify:hover { background: var(--navy-950); }

@media (max-width: 600px) {
  .coa-quick-facts { grid-template-columns: repeat(2, 1fr); }
  .coa-quick-checks { grid-template-columns: repeat(2, 1fr); }
  .coa-quick-figure { font-size: 52px; }
}
.coa-modal-body .coa-hero-grid { max-width: none; margin: 0; }
.coa-modal-footer { padding: 8px 32px 28px; text-align: center; }
.coa-modal-full-link { font-size: 13.5px; font-weight: 600; color: var(--blue-600); }

@media (max-width: 800px) {
  .coa-modal-body .coa-hero-grid { flex-direction: column; }
  .coa-modal-top, .coa-modal-body, .coa-modal-footer, .coa-modal-doses { padding-left: 20px; padding-right: 20px; }
}

/* ---- Catalog / Products page ---- */
.catalog-hero { background: radial-gradient(ellipse 900px 500px at 70% -10%, #dde7f6 0%, transparent 60%), var(--bg); padding: 56px 32px 44px; }
.catalog-hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 4.4vw, 50px); letter-spacing: -1px; margin: 16px 0 16px; color: var(--ink-900); }
.catalog-hero .lede { font-size: 16.5px; line-height: 1.6; color: var(--ink-600); max-width: 58ch; margin: 0 0 34px; }
.catalog-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; max-width: 720px; }
.catalog-stat { background: var(--white); padding: 18px 20px; }
.catalog-stat strong { display: block; font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--navy-900-text); margin-bottom: 2px; }
.catalog-stat span { font-size: 12px; color: var(--ink-600); }

.catalog-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: var(--maxw); margin: 0 auto 8px; flex-wrap: wrap; }
.catalog-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.cf-tab { background: #f2f4f8; border: none; border-radius: 30px; padding: 9px 18px; font-family: var(--body); font-weight: 600; font-size: 13.5px; color: var(--ink-600); transition: all .15s ease; }
.cf-tab:hover { background: #e7ebf2; color: var(--navy-900-text); }
.cf-tab.active { background: var(--navy-700); color: var(--white); }
.cf-count { opacity: 0.6; font-weight: 500; font-size: 12.5px; }
.catalog-controls-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.catalog-sort { border: 1px solid var(--line); border-radius: 30px; padding: 10px 16px; font-size: 13.5px; font-family: var(--body); color: var(--ink-900); background: var(--white); }
.catalog-sort:focus { border-color: var(--blue-500); }
.catalog-search { border: 1px solid var(--line); border-radius: 30px; padding: 10px 18px; font-size: 13.5px; font-family: var(--body); width: 220px; color: var(--ink-900); }
.catalog-search:focus { border-color: var(--blue-500); }
.catalog-count { max-width: var(--maxw); margin: 0 auto 18px; font-size: 13px; color: var(--ink-400); }

.catalog-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: var(--maxw); margin: 0 auto; }
.catalog-grid .product-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; flex: 0 0 calc((100% - 60px) / 4 - 1px); min-width: 0; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.catalog-grid .product-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -16px rgba(15,30,60,.22); border-color: var(--blue-300); }
.catalog-empty { text-align: center; padding: 60px 20px; color: var(--ink-400); font-size: 15px; max-width: var(--maxw); margin: 0 auto; }
.product-coa-strip-pending { justify-content: center; background: var(--bg-flat); }
.pending-mini { font-size: 11.5px; font-weight: 600; color: var(--ink-400); font-family: var(--mono); letter-spacing: 0.3px; }
.product-status-instock { color: var(--green); font-weight: 700; }

/* MORE VISIBLE CARDS (the client, 2026-09-22: "larger product images, more legible
   font"). The catalog runs THREE across on a desktop instead of four, the photo box
   is square and the client's photograph is zoomed 1.18 inside it (his shots carry a
   lot of white around the vial), and every type size on the card steps up. */
.catalog-grid .product-card { flex-basis: calc((100% - 40px) / 3 - 1px); padding: 20px 20px 18px; }
/* the client's photos carry the shadows of neighbouring vials at their left and right
   edges (outer ~14% each side) — a 4:5 box filled by the square photo crops 20% off the
   sides, and the 1.12 zoom takes the rest while keeping cap and base inside */
.catalog-grid .product-media { aspect-ratio: 4 / 5; overflow: hidden; }
.catalog-grid .product-media .product-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transform-origin: 50% 52%; }
.catalog-grid .product-media .product-reflection { display: none; }
.catalog-grid .product-cat { font-size: 12px; }
.catalog-grid .product-name { font-size: 21px; }
.catalog-grid .product-dose { font-size: 14px; padding: 6px 14px; }
.catalog-grid .product-price { font-size: 25px; }
.catalog-grid .product-unit { font-size: 13.5px; }
.catalog-grid .product-verified { font-size: 13.5px; }
.catalog-grid .view-link, .catalog-grid .add-to-cart-btn { font-size: 14.5px; padding: 10px 16px; }
.catalog-grid .product-status { font-size: 13px; }

@media (max-width: 1140px) {
  .catalog-grid .product-card { flex-basis: calc((100% - 20px) / 2); }
  .catalog-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .catalog-grid .product-card { flex-basis: calc((100% - 20px) / 2); padding: 12px 12px 14px; }
  /* phone tiles use the separate mobile <img>: fill the tall box instead of fitting the
     whole square photo into it, which is what showed the neighbours' shadows */
  .catalog-grid .product-media { aspect-ratio: 0.72 / 1; }
  .catalog-grid .product-img-mobile { object-fit: cover; padding: 0; transform: scale(1.06); transform-origin: 50% 52%; }
  /* the phone's compact dose pills must win over the desktop type-size step-up, or
     "10mg 20mg +2" runs off the tile (the owner, GLP-3 RT3) */
  .catalog-grid .card-dose-btn, .catalog-grid .product-dose { font-size: 10.5px; padding: 10px 6px; }
  .catalog-grid .product-dose-more { font-size: 10.5px; }
  .catalog-grid .product-name { font-size: 17px; white-space: normal; }
  .catalog-grid .product-price { font-size: 22px; }
  .catalog-controls { flex-direction: column; align-items: stretch; }
  .catalog-controls-right { flex-direction: column; align-items: stretch; }
  .catalog-search { width: 100%; font-size: 16px; }
  .catalog-sort { width: 100%; font-size: 16px; }
}

/* ---- Homepage catalog card overrides (must come last for cascade priority) ---- */
.product-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; max-width: 1340px; margin: 0 auto; }
.product-grid .product-card { padding: 14px 12px 18px; min-width: 0; }
.product-grid .product-media { padding-bottom: 6%; margin-bottom: 16px; }
.product-grid .product-img { width: 88%; }
.product-grid .product-reflection { width: 88%; }
.product-grid .product-coa-strip { padding: 8px 12px; font-size: 12.5px; margin: -4px 0 14px; }
.product-grid .product-cat { font-size: 11.5px; margin-bottom: 7px; }
.product-grid .product-name { font-size: 18px; margin-bottom: 8px; }
.product-grid .product-dose { font-size: 12.5px; padding: 5px 11px; }
.product-grid .product-price { font-size: 21px; }

/* ---- Mobile-only cropped vial image (hidden on desktop by default) ---- */
.product-img-mobile { display: none; }

/* Sizes label — hidden by default (desktop keeps interactive pills instead) */
.product-dose-more { display: none; }

.featured-scroll-hint { display: none; }

@media (max-width: 700px) {
  .featured-scroll-hint { display: block; text-align: right; font-size: 12.5px; font-weight: 600; color: var(--blue-600); max-width: var(--maxw); margin: -8px auto 10px; padding: 0 4px; }
}

/* ---- Mobile: compact 2-column product cards, larger vial photo ---- */
@media (max-width: 700px) {
  #featuredGrid { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 14px; grid-template-columns: none !important; padding: 4px 4px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  #featuredGrid .product-card { flex: 0 0 210px; scroll-snap-align: center; }
  #featuredGrid .product-media { aspect-ratio: 0.72 / 1; }

  .product-card { padding: 10px; }
  .product-media { margin-bottom: 8px; aspect-ratio: 0.62 / 1; padding-bottom: 0; background: var(--bg-flat); }
  .product-media .product-img, .product-media .product-reflection { display: none; }
  .product-img-mobile { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; box-sizing: border-box; }

  .product-coa-strip { padding: 6px 10px; font-size: 11px; margin: -2px 0 8px; flex-wrap: nowrap; gap: 6px; justify-content: center; background: transparent; border: none; }
  .product-coa-strip .purity-mini { display: none; }
  .product-coa-strip .coa-link-mini { font-size: 11px; padding: 10px 16px; white-space: nowrap; border-radius: 30px; }
  .product-coa-strip .pending-mini { font-size: 10.5px; background: var(--bg-flat); padding: 8px 14px; border-radius: 30px; }

  .product-cat { display: none; }
  .product-name { font-size: 14.5px; margin-bottom: 4px; white-space: normal; overflow: hidden; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.4em; }
  .product-dose-row { display: flex; flex-wrap: nowrap; gap: 4px; align-items: center; }
  .card-dose-btn { font-size: 10.5px; padding: 10px 6px; min-height: 36px; margin-right: 0 !important; flex-shrink: 0; }
  .card-dose-btn:nth-child(n+3) { display: none; }
  .product-dose-more {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 36px; padding: 0 8px; border-radius: 30px; flex-shrink: 0;
    background: var(--bg-flat); color: var(--ink-600); font-weight: 700; font-size: 10.5px;
  }

  .verify-foot { flex-wrap: wrap; gap: 8px; }
  .verify-foot a, .verify-foot button { padding: 10px 6px; margin: -10px -6px; }
  .product-status { font-size: 10.5px; margin-bottom: 4px; }
  .product-bottom { padding-top: 6px; flex-direction: column; align-items: stretch; }
  .product-bottom .view-link, .product-bottom .add-to-cart-btn { align-self: flex-start; }
  .product-price { font-size: 15px; }
  .product-unit { font-size: 10px; }
  .view-link { font-size: 11px; padding: 5px 10px; }
  .add-to-cart-btn { font-size: 12.5px; padding: 10px 16px; min-height: 36px; }
}
.product-grid .product-unit { font-size: 12px; }
.product-grid .view-link { font-size: 13.5px; padding: 8px 14px; }
.product-grid .product-status { font-size: 12px; margin-top: 6px; }
.product-grid .product-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 20px 18px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.product-grid .product-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -16px rgba(15,30,60,.22); border-color: var(--blue-300); }

/* ---- Product Detail page ---- */
.pd-layout { display: flex; gap: 56px; max-width: var(--maxw); margin: 0 auto; align-items: flex-start; }
.pd-media { flex: 1; position: sticky; top: 100px; }
.pd-media-box { position: relative; background: radial-gradient(ellipse 70% 60% at 50% 35%, #f6f9fd 0%, #dde7f6 100%); border-radius: var(--radius-lg); aspect-ratio: 4/5; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8%; overflow: hidden; }
.pd-img { width: 88%; position: relative; z-index: 2; filter: drop-shadow(0 8px 10px rgba(15,30,60,.18)); }
.pd-contact-shadow { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); width: 30%; height: 16px; background: radial-gradient(ellipse, rgba(20,35,70,.35) 0%, rgba(20,35,70,0) 72%); z-index: 1; filter: blur(2px); }
.pd-reflection { width: 88%; position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%) scaleY(-1); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 55%); mask-image: linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 55%); opacity: .9; z-index: 1; }
.pd-badge { position: absolute; top: 20px; right: 20px; background: var(--white); border-radius: var(--radius-md); box-shadow: 0 12px 30px -10px rgba(15,30,60,.3); padding: 10px 16px; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; color: var(--ink-900); z-index: 3; }
.pd-badge svg { width: 16px; height: 16px; color: var(--green); }

.pd-info { flex: 1; padding-top: 8px; }
.pd-title { font-family: var(--display); font-weight: 700; font-size: 40px; letter-spacing: -0.5px; margin: 10px 0 14px; color: var(--ink-900); }
.pd-title-sub { font-weight: 500; color: var(--ink-400); font-size: 26px; }
.pd-verified { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--green); margin-bottom: 22px; flex-wrap: wrap; }
.pd-verified svg { width: 16px; height: 16px; flex-shrink: 0; }
.pd-verified a { color: var(--blue-600); font-weight: 600; margin-left: 2px; }
.pd-desc { font-size: 15px; line-height: 1.7; color: var(--ink-600); margin-bottom: 28px; max-width: 52ch; }

.pd-dose-select { margin-bottom: 22px; }
.pd-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-600); margin-bottom: 10px; }
.pd-dose-options { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-dose-btn { background: var(--white); border: 1.5px solid var(--line); border-radius: 8px; padding: 10px 20px; font-weight: 700; font-size: 14px; color: var(--ink-600); }
.pd-dose-btn.active { border-color: var(--navy-700); background: var(--navy-700); color: var(--white); }

.pd-order-box { background: var(--bg-flat); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 24px; }
.pd-price-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pd-price { font-family: var(--display); font-weight: 700; font-size: 28px; color: var(--navy-900-text); }
.pd-stock { font-size: 13px; font-weight: 600; color: var(--ink-400); background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 5px 12px; }
.pd-stock.in-stock { color: var(--green); background: #e7f5ec; border-color: #bfe4cd; }
.pd-qty-row { display: flex; gap: 10px; }
.pd-qty-select { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font-size: 16px; font-family: var(--body); color: var(--ink-900); background: var(--white); width: 90px; }
.pd-qty-row .btn { flex: 1; }

.coa-pending { max-width: 640px; margin: 0 auto; text-align: center; background: var(--bg-flat); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 52px 40px; }
.coa-pending svg { width: 38px; height: 38px; color: var(--ink-400); margin-bottom: 18px; }
.coa-pending h3 { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--ink-900); margin: 0 0 10px; }
.coa-pending p { color: var(--ink-600); font-size: 14.5px; line-height: 1.65; margin: 0; }
.coa-pending a { color: var(--blue-600); font-weight: 600; }
.pd-dose-btn { cursor: pointer; position: relative; }
.pd-dose-btn-pending { color: var(--ink-400); }
.pd-dose-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #d9a441; margin-left: 4px; vertical-align: middle; }
.pd-verified-pending { color: var(--ink-400); }
.pd-verified-pending svg { color: var(--ink-400); }
.pd-verified-pending a { color: var(--blue-600); }
.pd-verified-na { color: var(--ink-400); }
.pd-verified-na svg { color: var(--ink-400); }
.pd-notify { display: flex; gap: 10px; flex-wrap: wrap; }
.pd-notify input { flex: 1; min-width: 160px; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font-size: 16px; font-family: var(--body); }
.pd-notify input:focus { border-color: var(--blue-500); }
.pd-notify-note { font-size: 12.5px; color: var(--ink-400); margin: 12px 0 0; }

.pd-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line); }
.pd-fact { display: flex; flex-direction: column; gap: 3px; }
.pd-fact .k { font-size: 11.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-400); }
.pd-fact .v { font-size: 14px; font-weight: 600; color: var(--ink-900); }

/* ---- COA document ---- */
.coa-doc { max-width: 780px; margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 24px 60px -24px rgba(15,30,60,.25); padding: 40px 44px; }
.coa-doc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.coa-doc-brand { display: flex; align-items: center; gap: 12px; }
.coa-doc-brand .chip { background: var(--navy-700); color: var(--white); font-family: var(--mono); font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 6px; }
.coa-doc-brand strong { display: block; font-size: 15px; }
.coa-doc-brand span { font-size: 12px; color: var(--ink-400); }
.coa-doc-status { display: flex; align-items: center; gap: 6px; background: #e7f5ec; color: var(--green); font-weight: 700; font-size: 13px; letter-spacing: .5px; padding: 7px 14px; border-radius: 20px; }
.coa-doc-status svg { width: 14px; height: 14px; }

.coa-doc-banner { display: flex; align-items: center; gap: 14px; background: #f2f9f4; border: 1px solid #cfe8d9; border-radius: 10px; padding: 14px 18px; margin-bottom: 26px; }
.coa-doc-banner svg { width: 22px; height: 22px; color: var(--green); flex-shrink: 0; }
.coa-doc-banner strong { display: block; font-size: 14px; color: var(--green); }
.coa-doc-banner span { font-size: 12.5px; color: #4d8064; }

.coa-doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; padding-bottom: 26px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.coa-doc-grid > div { display: flex; justify-content: space-between; font-size: 13.5px; }
.coa-doc-grid .k { color: var(--ink-600); }
.coa-doc-grid .v { font-weight: 600; color: var(--ink-900); }
.coa-doc-grid .v.pass-text { color: var(--green); }

.coa-doc-subhead { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-600); margin: 26px 0 12px; font-weight: 600; }

.coa-table { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.coa-table th { text-align: left; font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-400); font-weight: 600; padding: 8px 10px; border-bottom: 1.5px solid var(--line); }
.coa-table td { font-size: 13.5px; padding: 11px 10px; border-bottom: 1px solid #eef1f7; color: var(--ink-900); }
.coa-table td:first-child { font-weight: 600; }
.coa-table .pass { color: var(--green); font-weight: 700; font-size: 11.5px; letter-spacing: .3px; }
.coa-table .neutral { color: var(--ink-400); font-weight: 700; font-size: 11.5px; letter-spacing: .3px; }

.coa-doc-note { font-size: 12px; line-height: 1.6; color: var(--ink-400); font-style: italic; margin-top: 14px; }
.coa-doc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); flex-wrap: wrap; gap: 12px; }
.coa-doc-foot .k { display: block; font-size: 11px; color: var(--ink-400); text-transform: uppercase; letter-spacing: .5px; }
.coa-doc-foot .v { font-size: 13px; font-weight: 600; color: var(--ink-900); }
.coa-doc-foot .v a { color: var(--blue-600); font-family: var(--mono); font-size: 12px; }

@media (max-width: 900px) {
  .pd-layout { flex-direction: column; gap: 32px; align-items: stretch; }
  .pd-media { position: static; }
  .pd-title { font-size: 32px; }
  .pd-facts { grid-template-columns: 1fr; }
  .coa-doc { padding: 28px 22px; }
  .coa-doc-grid { grid-template-columns: 1fr; }
  .coa-table { display: block; overflow-x: auto; }
}

/* ---- HPLC Chromatogram ---- */
.coa-chromatogram { background: var(--bg-flat); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px 14px; }
.coa-chromatogram-label { font-family: var(--mono); font-size: 11px; color: var(--ink-600); margin-bottom: 8px; text-align: center; }
.coa-chromatogram-svg { width: 100%; height: 140px; display: block; }
.coa-chromatogram-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; color: var(--ink-400); padding: 2px 4px 0; }
.coa-chromatogram-caption { text-align: center; font-size: 11px; color: var(--ink-400); margin-top: 8px; font-style: italic; }

/* ---- Commonly Ordered Alongside ---- */
.pd-alongside { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.pd-alongside-row { display: flex; gap: 10px; }
.pd-alongside-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 12px 8px; transition: border-color .15s, box-shadow .15s; }
.pd-alongside-item:hover { border-color: var(--blue-300); box-shadow: 0 8px 20px -10px rgba(15,30,60,.2); }
/* bigger thumbs and type (the client, 2026-09-22 — his photo of these cards) */
.pd-alongside-thumb { width: 100%; max-width: 128px; aspect-ratio: 1 / 1; height: auto; background: var(--bg-flat); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 10px; }
.pd-alongside-thumb.pd-generic-vial svg { width: 55%; height: 55%; }
.pd-alongside-thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transform-origin: 50% 55%; }
.pd-alongside-item strong { font-size: 14.5px; font-weight: 700; color: var(--ink-900); line-height: 1.3; }
.pd-alongside-item > span:not(.pd-alongside-price) { font-size: 13px; color: var(--ink-400); margin-top: 3px; }
.pd-alongside-price { font-size: 15px; font-weight: 700; color: var(--navy-900-text); margin-top: 7px; }

/* ---- COA hero: two-card layout (stat card + QC panel) ---- */
.coa-hero-grid { display: flex; gap: 20px; max-width: 900px; margin: 0 auto 24px; align-items: stretch; }

.coa-stat-card { flex: 1; background: linear-gradient(155deg, var(--navy-800), var(--navy-950)); border-radius: var(--radius-lg); padding: 26px 26px 24px; color: var(--white); display: flex; flex-direction: column; }
.coa-stat-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.coa-stat-card .coa-doc-brand strong { color: var(--white); }
.coa-stat-card .coa-doc-brand span { color: #93a2bd; font-size: 11.5px; }
.coa-stat-check { width: 26px; height: 26px; border-radius: 50%; background: rgba(61,220,132,.22); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.coa-stat-check svg { width: 15px; height: 15px; color: #3ddc84; }
.coa-stat-label { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--blue-300); margin-bottom: 8px; }
.coa-stat-number { font-family: var(--display); font-size: 46px; font-weight: 700; line-height: 1; color: var(--white); }
.coa-stat-number span { font-size: 26px; color: #3ddc84; }
.coa-stat-sub { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #93a2bd; margin: 6px 0 20px; }
.coa-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); margin-bottom: 18px; }
.coa-stat-grid .k { display: block; font-size: 10.5px; color: #7c8698; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.coa-stat-grid .v { font-size: 14px; font-weight: 700; color: var(--white); }
.coa-stat-grid .v.green { color: #3ddc84; }
.coa-stat-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.coa-stat-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; padding: 6px 12px; font-size: 11px; font-weight: 600; color: #cfd8e8; }
.coa-stat-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: block; }
.coa-stat-pdf { margin-top: auto; display: block; text-align: center; background: var(--white); color: var(--navy-900-text); font-weight: 700; font-size: 13.5px; border-radius: 8px; padding: 12px; }
.coa-stat-pdf:hover { background: var(--blue-100); }

.coa-panel-card { flex: 1.15; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px; }
.coa-panel-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.coa-panel-summary { font-size: 12px; font-weight: 700; color: var(--green); }
.coa-panel-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #eef1f7; }
.coa-panel-row:last-child { border-bottom: none; }
.coa-panel-row strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-900); }
.coa-panel-row > div:first-child span { font-size: 11px; color: var(--ink-400); font-family: var(--mono); }
.coa-panel-result { display: flex; align-items: center; gap: 10px; }
.coa-panel-result > span:first-child { font-size: 13px; font-weight: 600; color: var(--ink-600); }
.coa-panel-result .pass, .coa-panel-result .neutral { font-size: 10.5px; font-weight: 700; letter-spacing: .3px; padding: 3px 8px; border-radius: 5px; }
.coa-panel-result .pass { color: var(--green); background: #e7f5ec; }
.coa-panel-result .neutral { color: var(--ink-400); background: var(--bg-flat); }

@media (max-width: 900px) {
  .coa-hero-grid { flex-direction: column; }
}

/* ---- Testing Standards page ---- */
.ils-card { max-width: 780px; margin: 0 auto; background: linear-gradient(155deg, var(--navy-800), var(--navy-950)); border-radius: var(--radius-lg); padding: 32px 36px; color: var(--white); }
.ils-card-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.ils-card-brand .chip { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: var(--white); font-family: var(--mono); font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 6px; }
.ils-card-brand strong { display: block; font-size: 17px; }
.ils-card-brand span { font-size: 12.5px; color: #93a2bd; }
.ils-card-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 20px 0; margin-bottom: 20px; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
.ils-card-facts .k { display: block; font-size: 10.5px; color: #7c8698; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.ils-card-facts .v { font-size: 14px; font-weight: 700; color: var(--white); }
.ils-card-note { font-size: 14px; line-height: 1.7; color: #b7c3d9; margin: 0; }

.std-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.std-item { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); overflow: hidden; }
.std-header { width: 100%; display: flex; align-items: center; gap: 18px; padding: 18px 22px; background: none; border: none; text-align: left; cursor: pointer; }
.std-icon { width: 44px; height: 44px; border-radius: 11px; background: var(--blue-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.std-icon svg { width: 21px; height: 21px; }
.std-header-text { flex: 1; }
.std-header-text h3 { font-family: var(--display); font-size: 16.5px; font-weight: 700; margin: 0 0 3px; color: var(--ink-900); }
.std-method { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--blue-600); }
.std-item-num { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink-400); flex-shrink: 0; }
.std-chevron { width: 18px; height: 18px; color: var(--ink-400); flex-shrink: 0; transition: transform .2s ease; }
.std-item.open .std-chevron { transform: rotate(180deg); }
.std-panel { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.std-item.open .std-panel { max-height: 200px; }
.std-panel p { font-size: 14.5px; line-height: 1.7; color: var(--ink-600); margin: 0; padding: 0 22px 22px 84px; max-width: 62ch; }

.howto-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: var(--maxw); margin: 0 auto; }
.howto-grid-3 { grid-template-columns: repeat(3, 1fr); max-width: 920px; }
.howto-item { background: var(--bg-flat); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 20px; }
.howto-num { width: 30px; height: 30px; border-radius: 50%; background: var(--navy-700); color: var(--white); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.howto-item h4 { font-family: var(--display); font-size: 15px; font-weight: 700; margin: 0 0 8px; color: var(--ink-900); }
.howto-item p { font-size: 13px; line-height: 1.6; color: var(--ink-600); margin: 0; }

@media (max-width: 900px) {
  .ils-card-facts { grid-template-columns: 1fr; }
  .std-panel p { padding-left: 22px; }
  .howto-grid { grid-template-columns: 1fr 1fr; }
  .howto-grid-3 { display: flex !important; flex-wrap: nowrap; overflow-x: auto; gap: 14px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding: 4px 4px 10px; margin: 0 -32px; padding-left: 32px; padding-right: 32px; max-width: none; }
  .howto-grid-3 .howto-item { flex: 0 0 240px; scroll-snap-align: center; }
}

/* ---- Certificate Library ---- */
.coa-lib-search { display: flex; align-items: center; gap: 12px; max-width: 480px; margin: 0 auto 36px; background: var(--bg-flat); border: 1px solid var(--line); border-radius: 30px; padding: 13px 20px; }
.coa-lib-search svg { width: 18px; height: 18px; color: var(--ink-400); flex-shrink: 0; }
.coa-lib-search input { border: none; background: none; outline: none; font-size: 14px; font-family: var(--body); width: 100%; color: var(--ink-900); }

.coa-lib-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: var(--maxw); margin: 0 auto; }
.coa-lib-card { flex: 0 1 380px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.coa-lib-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -16px rgba(15,30,60,.22); border-color: var(--blue-300); }
.coa-lib-thumb { background: radial-gradient(ellipse 70% 60% at 50% 35%, #f6f9fd 0%, #dde7f6 100%); border-radius: 10px; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.coa-lib-thumb img { width: 30%; filter: drop-shadow(0 6px 8px rgba(15,30,60,.15)); }
.coa-lib-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.coa-lib-top strong { display: block; font-size: 15px; font-weight: 700; color: var(--ink-900); }
.coa-lib-top span { font-size: 12px; color: var(--ink-400); }
.coa-lib-badge { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--green); background: #e7f5ec; padding: 4px 8px; border-radius: 5px; white-space: nowrap; }
.coa-lib-purity { margin-bottom: 6px; }
.coa-lib-purity .num { font-family: var(--display); font-size: 26px; font-weight: 700; color: var(--ink-900); }
.coa-lib-purity .pct { font-size: 15px; font-weight: 700; color: var(--green); }
.coa-lib-purity .lbl { font-size: 12px; color: var(--ink-400); margin-left: 2px; }
.coa-lib-lot { font-family: var(--mono); font-size: 11.5px; color: var(--ink-400); margin-bottom: 12px; }
.coa-lib-status { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--green); margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.coa-lib-status svg { width: 13px; height: 13px; }
.coa-lib-actions { display: flex; gap: 8px; }
.coa-lib-actions .btn { flex: 1; text-align: center; display: flex; align-items: center; justify-content: center; gap: 5px; }

.coa-lib-pending { max-width: var(--maxw); margin: 24px auto 0; background: var(--bg-flat); border: 1px dashed var(--line); border-radius: var(--radius-lg); padding: 20px 24px; display: flex; align-items: center; gap: 16px; }
.coa-lib-pending svg { width: 30px; height: 30px; color: var(--ink-400); flex-shrink: 0; }
.coa-lib-pending p { font-size: 13.5px; line-height: 1.6; color: var(--ink-600); margin: 0; }

@media (max-width: 900px) {
  .coa-lib-grid { grid-template-columns: 1fr; }
}

/* ---- Section divider (within merged sections) ---- */
.std-divider { display: flex; align-items: center; gap: 16px; max-width: var(--maxw); margin: 52px auto 40px; }
.std-divider::before, .std-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.std-divider span { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-400); white-space: nowrap; }

/* ---- Certificate showcase top (vial + caption) ---- */
.coa-showcase-top { text-align: center; margin-bottom: 40px; }
.coa-showcase-vial { width: 130px; filter: drop-shadow(0 10px 14px rgba(15,30,60,.2)); margin: 0 auto 14px; display: block; }
.coa-showcase-caption { font-size: 14px; color: var(--ink-600); max-width: 46ch; margin: 0 auto; }

/* ---- 8-Point Panel table (always visible, educational) ---- */
.std-table-wrap { max-width: var(--maxw); margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.std-table { width: 100%; border-collapse: collapse; }
.std-table thead th { text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-400); font-weight: 600; padding: 16px 20px; background: var(--bg-flat); border-bottom: 1px solid var(--line); }
.std-table tbody tr { border-bottom: 1px solid var(--line); }
.std-table tbody tr:last-child { border-bottom: none; }
.std-table td { padding: 18px 20px; vertical-align: top; font-size: 13.5px; line-height: 1.6; color: var(--ink-600); }
.std-table-name { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--ink-900); white-space: nowrap; }
.std-table-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--blue-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.std-table-icon svg { width: 17px; height: 17px; }
.std-table td:nth-child(2) { font-family: var(--mono); font-size: 12px; color: var(--blue-600); max-width: 220px; }
.std-table td:nth-child(3) { max-width: 340px; }

@media (max-width: 900px) {
  .std-table-wrap { overflow-x: auto; }
  .std-table { min-width: 800px; }
}

/* ---- Standards page: colorful stats bar ---- */
.std-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: var(--maxw); margin: 0 auto; }
.std-stat-card { border-radius: var(--radius-lg); padding: 26px 22px; text-align: center; }
.std-stat-card strong { display: block; font-family: var(--display); font-size: 26px; font-weight: 700; color: var(--ink-900); margin-bottom: 6px; }
.std-stat-card span { font-size: 12.5px; color: var(--ink-600); font-weight: 600; }
.std-stat-green { background: #e7f5ec; }
.std-stat-blue { background: #e3ecfa; }
.std-stat-amber { background: #fbf1de; }
.std-stat-purple { background: #ece7fa; }

/* ---- Standards page: 8-point ghost-number card grid ---- */
.std-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; max-width: var(--maxw); margin: 0 auto; }
.std-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.std-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -16px rgba(15,30,60,.2); border-color: var(--blue-300); }
.std-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.std-card-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--blue-600); display: flex; align-items: center; justify-content: center; }
.std-card-icon svg { width: 18px; height: 18px; }
.std-card-ghost { font-family: var(--display); font-style: italic; font-size: 26px; font-weight: 700; color: var(--line); line-height: 1; }
.std-card h4 { font-family: var(--display); font-size: 15.5px; font-weight: 700; margin: 0 0 6px; color: var(--ink-900); }
.std-card-method { display: inline-block; font-family: var(--mono); font-size: 10.5px; color: var(--blue-600); background: var(--blue-100); padding: 3px 9px; border-radius: 12px; margin-bottom: 10px; }
.std-card p { font-size: 13px; line-height: 1.6; color: var(--ink-600); margin: 0; }

@media (max-width: 1100px) {
  .std-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .std-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Interactive "How to Read a Certificate" layout ---- */
.coa-interactive-wrap { display: flex; gap: 40px; max-width: var(--maxw); margin: 0 auto; align-items: stretch; }
.coa-interactive-left { flex: 0 0 320px; text-align: center; display: flex; flex-direction: column; }
.coa-interactive-right { flex: 1; display: flex; flex-direction: row; gap: 20px; align-items: stretch; }
.coa-interactive-right .coa-stat-card { flex: 1; min-width: 0; }
.coa-interactive-right .coa-panel-card { flex: 1.1; min-width: 0; }

.std-steps-vertical { display: flex; flex-direction: column; gap: 10px; text-align: left; flex: 1; }
.std-step { display: flex; gap: 14px; align-items: center; background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; flex: 1; }
.std-step:hover { border-color: var(--blue-300); }
.std-step.active { border-color: var(--blue-600); background: var(--blue-100); box-shadow: 0 8px 20px -12px rgba(58,95,160,.35); }
.std-step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--line); color: var(--ink-600); font-weight: 700; font-size: 12.5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .18s ease, color .18s ease; }
.std-step.active .std-step-num { background: var(--blue-600); color: var(--white); }
.std-step h4 { font-family: var(--display); font-size: 14.5px; font-weight: 700; margin: 0 0 4px; color: var(--ink-900); }
.std-step p { font-size: 12.5px; line-height: 1.5; color: var(--ink-600); margin: 0; }

[data-highlight-group] { transition: background .3s ease, box-shadow .3s ease, border-radius .3s ease; }
.std-highlighted { background: rgba(93, 148, 232, .55) !important; box-shadow: 0 0 0 3px rgba(93, 148, 232, .65); border-radius: 4px; scroll-margin-top: 90px; }

@media (max-width: 1000px) {
  .coa-interactive-wrap { flex-direction: column; }
  .coa-interactive-left { flex: none; width: 100%; }
  .coa-interactive-right { flex-direction: column; }
}

/* ---- Wholesale page ---- */
.wholesale-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; }
.wholesale-tier { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius-lg); padding: 32px 24px; text-align: center; position: relative; }
.wholesale-tier-featured { border-color: var(--blue-600); box-shadow: 0 16px 32px -18px rgba(58,95,160,.35); }
.wholesale-tier-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--blue-600); color: var(--white); font-size: 11px; font-weight: 700; letter-spacing: .3px; padding: 5px 14px; border-radius: 20px; white-space: nowrap; }
.wholesale-tier-label { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-400); margin-bottom: 10px; }
.wholesale-tier-pct { display: block; font-family: var(--display); font-size: 40px; font-weight: 700; color: var(--navy-900-text); margin-bottom: 8px; }
.wholesale-tier-range { font-size: 13.5px; color: var(--ink-600); }
.wholesale-tiers-note { text-align: center; font-size: 12px; color: var(--ink-400); font-style: italic; margin: 18px 0 0; }

.wholesale-form { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.wholesale-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.wholesale-form-field { display: flex; flex-direction: column; gap: 8px; }
.wholesale-form-field label { font-size: 12.5px; font-weight: 700; color: var(--ink-900); }
.wholesale-form-field input, .wholesale-form-field select, .wholesale-form-field textarea { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font-size: 16px; font-family: var(--body); color: var(--ink-900); background: var(--white); resize: vertical; }
.wholesale-form-field input:focus, .wholesale-form-field select:focus, .wholesale-form-field textarea:focus { border-color: var(--blue-500); }
.wholesale-form button { align-self: flex-start; }

@media (max-width: 800px) {
  .wholesale-tiers { grid-template-columns: 1fr; }
  .wholesale-form-row { grid-template-columns: 1fr; }
}


/* ==========================================================================
   ENGINE INTEGRATION — MJ Design, 2026-09-05. Everything above is the client's
   own stylesheet, byte for byte. Below: the store's cart drawer in his tokens,
   the logo <img> that replaces his inline SVG mark, and two layout guards.
   ========================================================================== */
/* his --green #16a34a measures 2.93:1 as the pass-state text on its own tint (QA
   contrast target "pass state"); the same hue walked darker until it clears 4.5:1
   on every surface this site paints — the one token changed, for legibility. */
:root { --green: #0D7947; }
/* HIS 2026-09-10 DEPLOY LIGHTENED THE INK: his --ink-900 went #0f1729 → #1C2B4A and a new
   --navy-900-text (#2C4470) took over the emphasised figures — both arrive through his stylesheet
   above. The engine pages this client still keeps (login, account, orders, track, gate, the
   password pages) read the master's --sf-text (#1A2438, theme.css) and the legacy sheet's
   --ca-ink; both are pinned to his new ink so no page on the site is darker than his. */
:root { --sf-text: #1C2B4A; }
/* his logo, with the network-C mark drawn bigger (owner, 2026-09-05, twice: 30 → 44 → 54) */
.nav .logo-mark, .footer .logo-mark { width: 54px; height: 54px; max-width: none; flex-shrink: 0; }
/* THE BAR IS HIS ON EVERY PAGE (owner 2026-09-05: "on checkout pages spacing for logo is off").
   The engine pages still load catharos-legacy.css (as a cascade layer) and two of its generic
   rules reached the bar wherever his sheet sets nothing: body line-height 1.62 grew the LABS
   line from 12px to 16px and pushed the wordmark off centre; svg max-width:100% let the mobile
   grid squeeze the shield to 14px. Measured on track.html against index.html. The bar and the
   footer now pin what his pages inherit by default. */
.nav, .footer { line-height: normal; font-size: 16px; }
.nav svg, .footer svg { max-width: none; }
/* a faint white glow behind the whole logo, nav-wide (owner 2026-09-05): a soft halo under it
   and a light bloom off the strokes and letters */
/* owner 2026-09-06, on the live site: "the lighting on the catharos logo is too intense tone it
   down" — bloom .32 → .14 and tighter, halo .13 → .05: present, not lit */
.nav .logo { position: relative; filter: drop-shadow(0 0 5px rgba(255, 255, 255, .14)); }
.nav .logo::before { content: ""; position: absolute; inset: -18px -28px; border-radius: 50%; background: radial-gradient(ellipse at 42% 50%, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015) 48%, transparent 74%); z-index: -1; pointer-events: none; }
/* the USA shield between the account and cart icons. His .nav-icons svg rule outranked the
   class: it forced 21×21 (the 24×28 art letterboxed) and its light-grey stroke inherited into
   every stripe and star — the washed-out look (owner 2026-09-05: "too white faded"). */
.nav .nav-icons svg.nav-flag-icon, .nav svg.nav-flag-icon { width: 24px; height: 28px; stroke: none; flex-shrink: 0; }
/* OWNER 2026-09-05: "a white studio background / professional white simple background" behind
   the product renders — his blue radial wash on the card media and the product page media box
   becomes a white studio ground (white to a faint warm grey at the foot). The renders are
   cutouts, so the ground is this CSS. */
.product-media, .pd-media-box { background: #ffffff; align-items: center; }
/* The renders are studio photographs with their own ground and shadow (owner 2026-09-05), so
   the cutout dressing his cards gave a transparent image — drop-shadow, mirrored reflection,
   contact shadow — comes off; the photograph fills the media box. */
.product-media .product-img, .product-media .product-img-mobile, .pd-img { filter: none; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }
.pd-img { border-radius: var(--radius-lg); }
.product-reflection, .pd-reflection, .contact-shadow, .pd-contact-shadow { display: none; }
/* MOBILE NAV — THE CLIENT'S OWN ARRANGEMENT, relayed by the owner 2026-09-09 ("follow his
   instructions: the drop down bar on the left and then the logo and the name next to it on the
   left. Then on the right I want the flag and then the other two icons next to it"). It
   supersedes the 09-05 / 09-06 owner layouts (icons left · logo centred · hamburger right).
   One flex row:  [hamburger] [mark + CATHAROS/LABS]  …  [flag] [account] [cart].
   His CSS parked the badge beside the hamburger (.nav-flag-mobile) and spread the blocks with
   space-between; the flag shown here is OUR shield (the desktop copy — kept by owner
   instruction 2026-09-09, "the image/shape we use for the logo or flag in the nav bar"),
   ordered first in the right-hand group. */
@media (max-width: 900px) {
  .nav-inner { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 14px 14px; }
  .nav-links { display: none; }
  .nav-inner .nav-toggle { order: 0; }
  .nav-inner .logo { order: 1; }
  .nav-inner .nav-icons { order: 2; margin-left: auto; gap: 10px; }
  /* flag, THEN account, THEN cart — the DOM keeps his desktop order (account · flag · cart) */
  .nav-icons .nav-flag-desktop { order: -1; }
  .nav-icons .nav-account svg, .nav-icons .nav-cart-wrap svg { width: 18px; height: 18px; }
  .nav .nav-icons svg.nav-flag-icon, .nav svg.nav-flag-icon { width: 19px; height: 22px; }
  /* the engine's account dropdown (account-menu.js, .lum-acct-menu) hangs from the icon's
     RIGHT edge; the icon is on the right again, so that is correct — only cap the width to
     the screen (the 09-06 left-hang rule came out with the layout that needed it). */
  .nav .lum-acct-menu { width: min(232px, calc(100vw - 28px)); }
  /* 44 px TAP TARGETS (the master's mobile contract, qa.mjs "controls are ≥44px touch targets";
     his Privacy/Terms are dressed by a layer, so the hand-authored WARN branch never sees them
     and this was the last FAIL on HEAD's gauntlet). The icons stay 18 px: padding grows the hit
     area and the negative margin gives the space back — 13 px vertically, 7 px horizontally, so
     account and cart (18 + 10 gap + 18) sit 22 px apart glyph to glyph and their 44 px hit
     boxes overlap by only 4 px. The shield before them is not a control. */
  .nav-icons .nav-account, .nav-icons .nav-cart-wrap { padding: 13px; margin: -13px -7px; display: inline-flex; align-items: center; justify-content: center; }
  /* the count badge sat at right:-8px of a box that already overhangs its slot by 7px, so on a
     phone it ran past the viewport edge (the owner, 2026-09-22); seat it over the icon's
     top-right corner inside the padded box instead */
  .nav-icons .nav-cart-wrap .nav-cart-badge { top: 5px; right: 4px; }
  .nav-inner .nav-toggle { padding: 7px; margin: -7px; width: 44px; height: 44px; box-sizing: border-box; }
  /* 46, not 44: the gauntlet measures the CLOSED menu, which the engine holds at scale(.98) —
     44 × .98 measured 43 and failed five pages. 46 × .98 = 45.1 open or closed. */
  /* #site-nav, not .nav: on the three engine-rendered legal pages sf-base.css is ACTIVE, and its
     mobile control rule "html body :is(…, .lum-acct-item, …, input:not([type=…]) x4)" carries the
     specificity of its most specific argument — (0,4,3) — so two classes lose and 44 (→43 measured)
     shipped there. sf-base's own comment names the pin: an id or !important. The id.
     (No backticks in this comment: the whole block is a JS template literal.) */
  #site-nav .lum-acct-item { min-height: 46px; }
  .nav-flag-desktop { display: inline-block !important; }
  .nav-flag-mobile { display: none !important; }
  /* the entry gate's bar carries the logo and a contact link only: logo left, link right.
     The link takes the LAST slot explicitly — the .logo { order: 1 } above would otherwise
     put it after the (order 0) link, and the logo's glow halo (::before, 28 px past the mark)
     then pokes past the right edge: MEASURED 389 px at 375 (gauntlet: overflow · gate.html). */
  .nav-gate .nav-inner { justify-content: space-between; }
  .nav-gate .nav-gate-contact { order: 2; }
}
/* THE PHONE BAR, to the owner's reference (2026-09-23): 63px tall instead of 83 (the 54px mark
   keeps its size, the padding goes), the wordmark one step smaller and tucked closer to the
   mark, a slightly lighter navy than the hero under it, a finer hamburger, fuller icons.
   Every page's bar, so the site reads the same off the home page. */
@media (max-width: 480px) {
  .nav { background: linear-gradient(180deg, #0b192f 0%, #061529 100%); }
  .nav-inner { padding: 4px 9px 4px 12px; gap: 11px; }
  .nav-inner .nav-icons { gap: 7px; }
  .nav-icons .nav-flag-desktop { margin-right: 4px; }
  .nav-toggle { gap: 4.5px; }
  .nav-toggle span { width: 20px; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .nav .logo { gap: 6.5px; }
  .nav .logo-text { font-size: 16px; }
  .nav .logo-sub { font-size: 9px; letter-spacing: 2.6px; margin-top: 4px; }
  .nav-icons .nav-account svg { width: 18.5px; height: 18.5px; }
  .nav-icons .nav-cart-wrap svg { width: 23px; height: 23px; }
}
/* the narrowest phones (MEASURED 2026-09-09: the row is 334 px wide at 320 — the 54 px mark, the
   160 px lockup and the 12 px gaps overran by 14 px and the page scrolled sideways; 360 and 375
   were clean). Below 340 the mark and the wordmark step down one size and the gaps tighten —
   14 + 30 + 8 + 137 + 8 + 91 + 14 = 302 < 320. */
@media (max-width: 340px) {
  .nav-inner { gap: 8px; }
  .nav-inner .nav-icons { gap: 8px; }
  .nav .logo { gap: 9px; }
  .nav .logo-mark { width: 44px; height: 44px; }
  .nav .logo-text { font-size: 17px; }
  /* the 44px mark makes the phone bar 53px here; the full-screen hero subtracts that and
     the 30px announcement bar above it */
  .hero { --nav-ph: 83px; }
}
/* the previous front end's eyebrow drew a dot and a rule before the text; on the engine pages
   that still wear that sheet, his eyebrow is the eyebrow */
.eyebrow::before, .eyebrow::after { content: none !important; }
/* the entry gate's logo-only bar */
.nav-gate .nav-inner { justify-content: space-between; }
.nav-gate-contact { padding: 8px 16px; font-size: 13px; }
/* the current page's link, marked by aria-current (his .active look, same rules) */
.nav-links a[aria-current="page"] { color: var(--white); border-color: var(--blue-300); }
.nav-mobile-menu a[aria-current="page"] { color: var(--white); }
.nav-account { display: flex; }
.nav-account svg { width: 21px; height: 21px; stroke: #cdd7e8; }
button.nav-cart-wrap { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.nav-cart-badge.cart-badge { display: none; }
input, select, textarea { min-width: 0; }
fieldset { min-inline-size: 0; }

#cart-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(10,15,28,.55); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
#cart-overlay.open { opacity: 1; visibility: visible; }
#cart-panel {
  position: fixed; top: 0; right: 0; z-index: 91;
  width: min(26rem, 100%); background: var(--white); color: var(--ink-900);
  border-left: 1px solid var(--line); font-family: var(--body);
  display: flex; flex-direction: column;
  /* THE WHOLE DRAWER SCROLLS (BUILD-DEFAULTS §2h · engine bd5974a · owner 2026-09-05, from
     the live vanta store: "the entire your cart screen should be scrollable"; applied to
     catharos 2026-09-05: "4, apply"). The PANEL is the one scroll surface — header, items,
     totals and the Checkout button move together — sized to the VISIBLE viewport (dvh, vh
     fallback) so the button is never behind a phone's toolbar. overscroll-behavior:contain,
     or iOS scrolls the locked page under the drawer, which reads as "stuck". */
  height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  transform: translateX(100%); transition: transform .24s cubic-bezier(.22,.61,.36,1);
}
#cart-panel.open { transform: translateX(0); }
/* NO SIDEWAYS PAN ON A PHONE (owner 2026-09-17: "on mobile you can slide your finger left and right
   and it moves the entire site"). Measured at 375 px: the only element past the viewport edge on any
   page is this drawer, parked off-screen by translateX(100%). Chrome ignores a fixed element there;
   iOS Safari counts it toward the page's scrollable width, so the whole site dragged sideways. Closed
   now also means NOT RENDERED: visibility flips to hidden the moment the slide-out has finished and
   back to visible the instant it opens, so the animation is unchanged, the off-screen buttons leave
   the tab order, and nothing extends the page. html gets overflow-x: clip as the belt to that brace:
   clip (unlike hidden) never turns the root into a scroll container, so sticky chrome keeps working. */
#cart-panel { visibility: hidden; transition: transform .24s cubic-bezier(.22,.61,.36,1), visibility 0s linear .24s; }
#cart-panel.open { visibility: visible; transition: transform .24s cubic-bezier(.22,.61,.36,1), visibility 0s; }
html { overflow-x: clip; }
#cart-panel > header { flex-shrink: 0; position: sticky; top: 0; z-index: 1; background: var(--white); display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.cart-panel-title { font-family: var(--display); font-weight: 700; font-size: 18px; flex: 1; }
.cart-panel-close { background: none; border: 0; padding: 4px; color: var(--ink-600); display: flex; cursor: pointer; }
/* the drawer's header is his cart page's header (2026-09-10): "Your Cart (N items)" and
   "Continue Shopping", the X kept as the drawer's own affordance */
#cart-panel > header { align-items: flex-start; }
.cart-panel-head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cart-panel-title { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.3px; color: var(--ink-900); }
.cart-panel-count { color: var(--ink-400); font-weight: 500; font-size: 0.72em; margin-left: 4px; }
.cart-panel-continue { background: none; border: 0; padding: 0; font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--blue-600); cursor: pointer; text-align: left; }
.cart-panel-continue:hover { text-decoration: underline; }
#cart-items { flex: 0 0 auto; padding: 16px 22px; }
#cart-footer { flex-shrink: 0; margin-top: auto; border-top: 1px solid var(--line); padding: 16px 22px calc(16px + env(safe-area-inset-bottom, 0px)); }
/* THE PINNED FOOT (the client, 2026-09-17): the wallet buttons and "Proceed to Checkout" sit
   at the BOTTOM of the drawer and never leave the screen. Created by catharos-cart-drawer.js
   as a sibling after #cart-items. Sticky to the panel's OWN scrollport — the panel is still
   the one scroll surface (§2h above), so on a phone 100dvh keeps it above the toolbar.
   margin-top:auto seats it at the bottom of a short cart; sticky pins it under a long one.
   Capped so a shown consent block can never eat the whole viewport: it scrolls inside the
   foot instead. */
#ca-cart-foot { position: sticky; bottom: 0; z-index: 1; flex-shrink: 0; margin-top: auto; background: var(--white); border-top: 1px solid var(--line); padding: 14px 22px calc(14px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 28px -14px rgba(10,15,28,.28); max-height: 75vh; max-height: 75dvh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#ca-cart-foot[hidden] { display: none; }
/* ONE ROW OF TWO BLACK PILLS (the client's reference, 2026-09-22): Apple / Google Pay on
   the left at 38%, "Proceed to Checkout →" filling the rest, both 48px, fully rounded,
   near-black. The express wrap is display:contents so its parts join this row: the
   consent box and the error take a full line above the pills when they show; the "or"
   divider is gone. With no wallet the checkout pill runs the full width. */
#ca-cart-foot #vx2-consent { flex: 0 0 100%; order: 1; margin-bottom: 0; }
#ca-cart-foot #vx2-error { flex: 0 0 100%; order: 2; margin: 0; }
#ca-cart-foot #vx2-element { flex: 0 0 36%; order: 3; min-height: 48px; }
#ca-cart-foot .vx2-or { display: none; }
#ca-cart-foot .cart-checkout-btn { flex: 1 1 0; min-width: 0; order: 4; margin: 0; min-height: 48px; padding: 0 12px; border-radius: 999px; background: #0c0d10; color: #fff; font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
#ca-cart-foot .cart-checkout-btn:hover { background: #1a1b20; box-shadow: none; }

/* the footer's disclosure block (owner 2026-09-05: "rebuild footers" — his columns and
   compliance strip stay; the engine footer's disclosure set + entity/contact/21+ sit
   between them, in his footer's own type and tone). Markup: frontend/_foot.part. */
.footer-legal { max-width: var(--maxw); margin: 40px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12.5px; line-height: 1.7; color: #8b96ab; }
.footer-legal p { margin: 0 0 10px; }
.footer-legal strong { color: #cfd8e8; font-weight: 600; }
.footer-legal a { color: #a9b4c8; text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover { color: var(--white); }
.footer-legal + .footer-bottom { margin-top: 14px; padding-top: 0; border-top: 0; }

/* ==========================================================================
   ENGINE PAGES IN HIS DESIGN (owner 2026-09-05, step 3). Checkout, my account,
   my orders, order success, track, the entry gate, the certificate library and
   the password pages keep their working markup — the money seam, the attestation
   block, the QA hooks — and their components take his look. Every selector here is
   a class only those pages use (checked against his sheet); his pages never render
   a <main>, so the element rules scoped to main cannot reach them either.
   ========================================================================== */
main { background: var(--bg); }
.sheet { background: transparent; }
.constellation::before, .constellation::after, .wash-deep::before, .wash-deep::after, .wash-soft::before, .wash-soft::after { content: none !important; }
/* his site has no entrance choreography — nothing waits for an observer to show it */
.rise, .quorum, .stamp, .focus-in, .tl, .inkline { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
main h1, main h2, main h3, main h4, main .display { font-family: var(--display); color: var(--ink-900); letter-spacing: -0.5px; }
main h1 { font-size: clamp(32px, 4.2vw, 46px); font-weight: 700; line-height: 1.1; letter-spacing: -1px; }
main h2 { font-size: 24px; font-weight: 700; }
main h3 { font-size: 18px; font-weight: 700; }
main p, main li, main td, main th, main dd, main dt { font-family: var(--body); color: var(--ink-600); }
main th, main dt, main strong { color: var(--ink-900); }
main .muted { color: var(--ink-600); }
main .hint { color: var(--ink-400); font-size: 13px; }
main .num, main .mono, main code { font-family: var(--mono); color: var(--ink-900); }
main a:not(.btn) { color: var(--blue-600); font-weight: 600; }
main hr, main .rule-node { border: 0; border-top: 1px solid var(--line); }

/* cards */
.record, .panel, .paybox, .co-step, .stat-grid, .acct-card, .order-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(15, 30, 60, .05);
}
.record-head, .panel-h, .panel-n { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--ink-900); letter-spacing: -0.3px; }
.panel-sub, .record-body { color: var(--ink-600); }

/* forms */
.field > span, .field > label, main label > span { font-size: 13px; font-weight: 600; color: var(--ink-600); }
.field input, .field select, .field textarea,
main input[type="text"], main input[type="email"], main input[type="password"], main input[type="tel"], main input[type="search"], main input[type="number"], main select, main textarea {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); color: var(--ink-900);
  font-family: var(--body); font-size: 15px; padding: 12px 14px; box-shadow: none;
}
main input:focus, main select:focus, main textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(92, 130, 196, .18); }
main input[type="checkbox"], main input[type="radio"] { accent-color: var(--blue-600); }
.check { color: var(--ink-900); }

/* option rows (shipping method, payment rail) */
.optrow { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); }
.optrow:has(input:checked) { border-color: var(--blue-600); box-shadow: 0 0 0 2px rgba(58, 95, 160, .15); }
.optrow-name { font-weight: 600; color: var(--ink-900); }
.optrow-note, .optrow-body { color: var(--ink-600); }

/* ledgers, stats, timelines */
.ledger-row { border-bottom: 1px solid var(--line); color: var(--ink-600); }
.ledger-row .v, .stat .v { font-family: var(--mono); color: var(--ink-900); }
.stat .k, .ledger-row .k, .trail-when { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-400); }
.trail-what { color: var(--ink-900); }
.stamp { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); color: var(--ink-900); }

/* messages */
.msg { color: var(--ink-600); }
.msg-bad { color: var(--red); }
.msg-ok { color: var(--green); }

/* his buttons cover the legacy variants */
.btn-ghost { background: transparent; color: var(--navy-900); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--navy-700); }
.btn-glass { background: var(--blue-100); color: var(--navy-900); }
.btn-glass:hover { background: var(--blue-300); }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }

/* pills and tabs → his catalogue tabs */
.pill, .tab, .co-steps > * { background: #f2f4f8; border: none; border-radius: 30px; padding: 9px 18px; font-family: var(--body); font-weight: 600; font-size: 13.5px; color: var(--ink-600); }
.pill.active, .tab.active, .tab[aria-selected="true"], .co-steps > .active, .co-steps > [aria-current] { background: var(--navy-700); color: var(--white); }
.co-steps { display: flex; gap: 8px; flex-wrap: wrap; }

/* ==========================================================================
   HIS CART PAGE, INSIDE THE DRAWER (the client, 2026-09-10: "the cart page becomes the slider").
   First his cart.html <style> block, verbatim; then the drawer context: the panel is at most
   26rem wide on any viewport, so his under-700px arrangement applies at every width here.
   ========================================================================== */
.cart-layout { max-width: 900px; margin: 0 auto; }
.cart-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.cart-item-thumb { width: 76px; height: 76px; flex-shrink: 0; border-radius: 10px; background: var(--bg-flat); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cart-item-thumb img { width: 80%; height: 80%; object-fit: contain; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink-900); }
.cart-item-dose { font-size: 13px; color: var(--ink-400); margin-top: 2px; }
.cart-item-dose-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cart-dose-pill { appearance: none; -webkit-appearance: none; background: var(--bg-flat); border: none; border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 600; font-family: var(--body); color: var(--ink-600); cursor: pointer; }
.cart-dose-pill.active { background: var(--navy-700); color: var(--white); }
.cart-item-controls { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.cart-item-coa { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--green); text-decoration: none; }
.cart-item-coa:hover { text-decoration: underline; }
.cart-item-coa svg { width: 14px; height: 14px; stroke: var(--green); fill: none; stroke-width: 2; flex-shrink: 0; }
.cart-item-coa strong { font-weight: 700; }
.cart-item-why { display: block; font-size: 11px; color: var(--ink-400); text-decoration: none; margin-top: 3px; margin-left: 20px; }
.cart-item-why:hover { color: var(--blue-600); text-decoration: underline; }
.cart-bulk-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--ink-600); text-align: center; margin-top: 14px; padding: 10px; }
.cart-bulk-note a { color: var(--navy-900-text); font-weight: 700; text-decoration: none; }
.cart-bulk-note a:hover { text-decoration: underline; }
.cart-qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cart-qty button { appearance: none; -webkit-appearance: none; background: var(--bg-flat); border: none; width: 38px; height: 38px; font-size: 16px; font-weight: 700; color: var(--ink-700); cursor: pointer; }
.cart-qty button:hover { background: var(--blue-100); }
.cart-qty input { width: 42px; height: 38px; text-align: center; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); font-size: 14px; font-family: var(--body); color: var(--ink-900); }
.cart-item-remove { background: none; border: none; color: var(--ink-400); font-size: 13px; font-weight: 600; cursor: pointer; padding: 10px 8px; min-height: 38px; }
.cart-item-remove:hover { color: var(--navy-900); }
.cart-item-price { text-align: right; flex-shrink: 0; }
.cart-item-price .unit { font-size: 27px; font-family: var(--display); font-weight: 700; color: var(--ink-900); }
.cart-item-price .each { font-size: 12px; color: var(--ink-400); display: block; margin-top: 2px; }

.cart-protection-row { display: flex; align-items: flex-start; gap: 14px; padding: 18px; background: var(--bg-flat); border-radius: 12px; margin-top: 20px; }
.cart-protection-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--navy-700); display: flex; align-items: center; justify-content: center; }
.cart-protection-icon svg { width: 20px; height: 20px; color: var(--white); }
.cart-protection-text { flex: 1; min-width: 0; }
.cart-protection-title { font-weight: 700; font-size: 14.5px; color: var(--ink-900); }
.cart-protection-val { font-weight: 700; color: var(--navy-700); margin-left: 6px; }
.cart-protection-sub { font-size: 12.5px; color: var(--ink-600); line-height: 1.5; margin-top: 3px; }

.cart-crosssell { display: flex; align-items: center; gap: 14px; padding: 16px; background: linear-gradient(135deg, var(--blue-100), #eef8f0); border: 1px solid var(--blue-300); border-radius: 12px; margin-top: 16px; }
.cart-crosssell-thumb { width: 68px; height: 68px; flex-shrink: 0; border-radius: 10px; background: var(--white); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.cart-crosssell-thumb img { width: 78%; }
.cart-crosssell-info { flex: 1; min-width: 0; }
.cart-crosssell-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.cart-crosssell-name { font-weight: 700; font-size: 15.5px; color: var(--ink-900); margin-top: 2px; }
.cart-crosssell-sub { font-size: 12.5px; color: var(--ink-600); margin-top: 1px; }
.cart-crosssell-add { flex-shrink: 0; appearance: none; -webkit-appearance: none; background: var(--navy-900); color: #fff; border: none; border-radius: 20px; padding: 0 18px; min-height: 42px; font-weight: 800; font-size: 14px; font-family: var(--body); cursor: pointer; white-space: nowrap; box-shadow: 0 2px 8px rgba(15,23,46,0.25); }
.cart-crosssell-add:hover { background: var(--navy-800); }

.cart-promo-row { display: flex; gap: 10px; margin-top: 20px; }
.cart-promo-row input { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font-size: 16px; font-family: var(--body); }
.cart-promo-row button { appearance: none; -webkit-appearance: none; background: var(--bg-flat); border: 1px solid var(--line); border-radius: 8px; padding: 0 20px; min-height: 44px; font-weight: 700; font-size: 14px; color: var(--ink-900); cursor: pointer; }
.cart-incentive-card { padding: 18px; background: var(--bg-flat); border-radius: 12px; margin-top: 16px; }
.cart-incentive-divider { border-top: 1px solid var(--line); margin: 18px 0 0; }
.cart-incentive-card .cart-promo-row { margin-top: 16px; }
.cart-incentive-card .cart-shipping-progress { margin-top: 0; }
.cart-incentive-card .cart-cutoff-note { margin-top: 14px; }
.cart-promo-applied { display: none; align-items: center; justify-content: space-between; margin-top: 12px; padding: 10px 14px; background: var(--blue-100); border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--navy-900); }
.cart-promo-applied button { background: none; border: none; color: var(--blue-600); text-decoration: underline; font-size: 13px; cursor: pointer; }
.cart-promo-error { display: none; font-size: 13px; font-weight: 600; color: var(--navy-900); margin-top: 8px; }

.cart-shipping-progress { margin-top: 22px; }
.cart-shipping-progress-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 8px; }
.cart-shipping-progress-fill { height: 100%; background: var(--navy-700); border-radius: 3px; transition: width .3s ease, background .3s ease; }
.cart-shipping-progress-fill.unlocked { background: var(--green); }
.cart-shipping-progress-text { font-size: 13px; color: var(--ink-600); }
.cart-shipping-progress-text strong { color: var(--ink-900); }
.cart-shipping-progress-text.unlocked strong { color: var(--green); }

.cart-cutoff-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-600); margin-top: 14px; flex-wrap: wrap; }
.cart-cutoff-note svg { width: 15px; height: 15px; color: var(--blue-600); flex-shrink: 0; }
.cart-cutoff-note span:first-of-type { flex: 1; min-width: 180px; }
.cart-arrival-date { color: var(--ink-600); white-space: nowrap; }
.cart-arrival-date strong { color: var(--ink-900); }
.cart-cutoff-note strong { color: var(--ink-900); }

.cart-summary { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.cart-summary-row { display: flex; justify-content: space-between; font-size: 14.5px; color: var(--ink-600); padding: 5px 0; }
.cart-summary-row.discount { color: var(--navy-700); }
.cart-summary-row.total { font-size: 19px; font-weight: 700; color: var(--ink-900); font-family: var(--display); padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--line); }

.cart-checkout-btn { width: 100%; margin-top: 20px; padding: 16px; font-size: 16px; }
.cart-checkout-panel { display: none; margin-top: 16px; padding: 18px; background: var(--bg-flat); border-radius: 12px; font-size: 13.5px; color: var(--ink-600); line-height: 1.6; }
.cart-checkout-panel a.btn { display: inline-flex; margin-top: 10px; }

.cart-empty { text-align: center; padding: 60px 20px; }
.cart-empty svg { width: 56px; height: 56px; color: var(--ink-300); margin-bottom: 16px; }
.cart-empty h2 { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--ink-900); margin-bottom: 8px; }
.cart-empty p { color: var(--ink-600); margin-bottom: 22px; }
.cart-empty-recs { max-width: 560px; margin: 10px auto 0; }
.cart-empty-recs-label { text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 14px; }
.cart-empty-recs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cart-empty-rec { display: block; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 14px; text-align: center; }
.cart-empty-rec-thumb { background: var(--bg-flat); border-radius: 8px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; overflow: hidden; }
.cart-empty-rec-thumb img { width: 70%; height: 70%; object-fit: contain; }
.cart-empty-rec-name { font-size: 12.5px; font-weight: 700; color: var(--ink-900); line-height: 1.3; }
.cart-empty-rec-price { font-size: 12px; color: var(--ink-400); margin-top: 3px; }

@media (max-width: 700px) {
  .cart-empty-recs-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cart-empty-rec { padding: 8px; }
  .cart-empty-rec-name { font-size: 11px; }
}

@media (max-width: 700px) {
  .cart-item { flex-wrap: wrap; }
  .cart-item-price { order: 1; width: 100%; text-align: left; display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
  .cart-item-price .each { margin-top: 0; }
  .cart-dose-pill { padding: 9px 13px; min-height: 36px; font-size: 12.5px; }

  .cart-crosssell { gap: 10px; padding: 14px; }
  .cart-crosssell-thumb { width: 52px; height: 52px; }
  .cart-crosssell-name { font-size: 14px; }
  .cart-crosssell-sub { display: none; }
  .cart-crosssell-add { padding: 0 14px; font-size: 13px; }
}
/* the panel is a column flex box and #cart-items is its item: the default min-width auto lets
   the content's min-content width (a nowrap price button, four dose pills) push past the panel
   at 375 (MEASURED 2026-09-10: 417 in 375, the right edge clipped) */
#cart-items { min-width: 0; width: 100%; overflow-x: hidden; }
#cart-panel .cart-layout { max-width: none; }
#cart-panel .cart-item { flex-wrap: wrap; }
#cart-panel .cart-item-price { order: 1; width: 100%; text-align: left; display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
#cart-panel .cart-item-price .each { margin-top: 0; }
#cart-panel .cart-item-price .unit { font-size: 22px; }
#cart-panel .cart-dose-pill { padding: 9px 13px; min-height: 36px; font-size: 12.5px; }
#cart-panel .cart-crosssell { gap: 10px; padding: 14px; }
#cart-panel .cart-crosssell-thumb { width: 52px; height: 52px; }
#cart-panel .cart-crosssell-name { font-size: 14px; }
#cart-panel .cart-crosssell-sub { display: none; }
#cart-panel .cart-crosssell-add { padding: 0 14px; font-size: 13px; }
#cart-panel .cart-empty { padding: 40px 10px 24px; }
#cart-panel .cart-empty-recs-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
#cart-panel .cart-empty-rec { padding: 8px; }
#cart-panel .cart-empty-rec-name { font-size: 11px; }
#cart-panel .cart-checkout-btn { display: flex; justify-content: center; }

/* THE PRODUCT PAGE'S "You Might Also Need" ROW IS A CAROUSEL ON MOBILE TOO (the client, 2026-09-10:
   "the carousel does not run on the product page"). His sheet lays the three cards side by side at
   every width (flex: 1, no scroll), so at 375 they were three narrow tiles and nothing moved; under
   700px the row takes the same treatment as his other rows and product.html arms setupAutoRotate on
   it after every render. */
@media (max-width: 700px) {
  .pd-alongside-row { flex-wrap: nowrap; overflow-x: auto; gap: 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding: 4px 4px 10px; }
  .pd-alongside-item { flex: 0 0 176px; scroll-snap-align: center; }
}