/* BEIBANGAN — DESIGN SYSTEM · Direction C: Navy + Warm Bridge */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Core palette — Direction C */
  --navy:         #102A4A;
  --navy-deep:    #0A1E36;
  --navy-mid:     #1A3A5C;
  --teal:         #0C6E78;
  --teal-bright:  #2BB9C9;
  --blue:         #2E78C2;
  --paper:        #F4F2EE;
  --paper-warm:   #EDE9E2;
  --surface:      #FFFFFF;
  /* --wrap is THE container token. Before it, .hero-inner was 1360 and .bb-inner
     1180 while the rest of the page used 1200 — five different left edges, so the
     reader's anchor wandered 114px between sections. Route every container through
     this; never hardcode a max-width again. */
  --wrap:         1200px;
  --t-h2:         clamp(29px, 3vw, 36px);   /* ONE section-title rank */
  --t-h3:         clamp(20px, 2.2vw, 26px);
  --gutter:       clamp(20px, 5vw, 32px);
  /* ONE ink. These three were still the RETIRED navy build (#0E2038/#2C3E54/#4A5568)
     and body{color:var(--ink)} meant ~52 elements rendered blue-black next to the
     white-clinical graphite #14181C. Four darks that are ALMOST the same is exactly
     the near-miss that reads as "off" without being nameable. */
  --ink:          #14181C;
  --ink-soft:     rgba(20,24,28,.80);
  --body:         rgba(20,24,28,.62);
  --hairline:     #DDD9D1;
  --hairline-cool:#D0D8E4;
  --accent:       #0C6E78;
  --accent-press: #0A5A63;
  --cool-panel:   #EEF2F6;
  --clay:         #C98A4B;
  --btc-gold:     #F7931A;

  /* Brand gradient */
  --grad-brand:   linear-gradient(180deg, #0C6E78 0%, #2E78C2 100%);
  --grad-brand-h: linear-gradient(90deg,  #0C6E78 0%, #2E78C2 100%);

  /* Type families — "Journal & Instrument": STIX Two (scientific-journal serif) + IBM Plex superfamily */
  --f-display: 'STIX Two Text', 'Times New Roman', Georgia, serif;
  --f-text:    'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:    'IBM Plex Mono', Consolas, 'Courier New', monospace;

  /* Brand signature — sampled from the BBA lettermark; never a UI semantic */
  /* ONE red. #E9504B and #CD4642 both shipped: too close to read as distinct, too
     far to read as identical. Unified on #CD4642 (already the hero CTA, and the
     AA-safe one: white on it = 4.61:1 vs 3.68:1). Do not reintroduce a second red. */
  --brand-red:       #CD4642;

  /* Spacing — 3 tiers */
  --space-section-xl:    128px;
  --space-section:        88px;
  --space-section-tight:  56px;

  /* Shared easing */
  --ease: cubic-bezier(.2,.6,.2,1);

  /* ── WHITE-CLINICAL-GLASS (P1) — additive token sheet, blueprint §2 ──
     Was "Dark Instrument"; flipped white-clinical 2026-07-14. Scoped to
     shell regions (promo/header/hero/frame/rails/footer) this phase; the
     di-commerce/di-exhibits blocks inherit these tokens too (expected,
     Phase 2/3 finishes their re-skin). ─────────────────────────────── */
  --canvas:       #F2F1EE;
  --canvas-deep:  #EAE7E0;
  --surface-1:    #FFFFFF;
  --surface-2:    #FAF8F4;
  --surface-3:    #F0EDE6;
  --di-glass:     rgba(255,255,255,.55);
  --di-glass-fallback: rgba(252,251,248,.90);
  --hair-1:       rgba(20,26,32,.10);
  --hair-2:       rgba(20,26,32,.16);
  --hair-3:       rgba(20,26,32,.26);
  --hair-hover:   rgba(20,26,32,.34);
  --text-hi:      #14181C;
  --text-body-di: rgba(20,24,28,.80);
  --text-mono-di: rgba(20,24,28,.62);
  --text-ghost:   rgba(20,24,28,.38);
  --di-red:       #CD4642;   /* same single red — see --brand-red */
  --di-teal:      #0C6E78;
  --di-teal-glow: #2BB9C9;
  --di-teal-ink:  #0C6E78;
  --di-paper:     #F4F1EA;
  --grid-line:    rgba(0,0,0,.05);
  --s1:8px; --s2:16px; --s3:32px; --s4:64px; --s5:112px; --s6:176px; --s7:256px;
  --f-archivo: 'Archivo', 'Arial Narrow', sans-serif;
  --f-doto: 'Doto', 'IBM Plex Mono', monospace;
  --di-dur: 320ms;
  --di-ease: cubic-bezier(.2,.75,.3,1);
}

/* ── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 15px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--f-text);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

a { color: var(--ink); text-decoration: underline; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

img, svg { display: block; }

/* ── GRID SYSTEM ─────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

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

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
/* Display: STIX Two Text — hero H1 + section H2 + product names */
.display-h1 {
  font-family: var(--f-display);
  font-size: clamp(42px, 5.2vw, 64px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: var(--ink);
}

.display-h2 {
  font-family: var(--f-display);
  font-size: clamp(29px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
}

/* Text/UI: IBM Plex Sans — everything except display + data */
.body-text {
  font-family: var(--f-text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--body);
}

/* Mono: IBM Plex Mono — all numbers and identifiers */
.mono {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: 0.02em;
}

.mono-label {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums slashed-zero;
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 120ms var(--ease), color 120ms var(--ease);
}

.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn:active { transform: translateY(1px); filter: brightness(.96); }

.btn-primary {
  background: var(--navy);
  color: #fff;
  padding: 12px 24px;
}
.btn-primary:hover { background: var(--navy-mid); color: #fff; }

.btn-grad {
  background: var(--grad-brand-h);
  color: #fff;
  padding: 12px 24px;
}
.btn-grad:hover { filter: brightness(1.08); }

.btn-sm {
  padding: 9px 16px;
  font-size: 13px;
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline);
  padding: 9px 16px;
}
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }

/* ── HEADER ──────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
  height: 72px;
  border-bottom: 1px solid rgba(43,185,201,0.15);
  transition: border-color 200ms var(--ease);
}
.site-header.scrolled { border-bottom-color: rgba(43,185,201,0.25); }

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 40px;
}

.header-logo { flex-shrink: 0; }
.header-logo a { text-decoration: none; }

.header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
  list-style: none;
}

.header-nav a {
  font-family: var(--f-text);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms var(--ease);
}
.header-nav a:hover { color: #fff; }
.header-nav a:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 2px; }

/* Collapse the primary nav to the hamburger below 1120px, so the desktop text
   nav only renders where all 7 items (incl. Track Order) + Cart fit on one line
   (nav right edge ~1047px; overflowed at the old 1024px breakpoint). */
@media (max-width: 1120px) {
  .header-nav { display: none; }
  /* !important so this beats the base `.hamburger-btn{display:none}` defined later
     in the file — otherwise the hamburger stays hidden while the nav is gone. */
  .hamburger-btn { display: flex !important; align-items: center; }
  #mobile-cart-btn { display: flex !important; }
}

.cart-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  transition: color 120ms var(--ease);
}
.cart-btn:hover { color: #fff; }
.cart-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 2px; border-radius: 4px; }

/* Labeled cart pill (desktop) — makes the cart obvious vs. the text nav links */
.cart-btn-labeled {
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid rgba(43,185,201,0.5);
  border-radius: 999px;
  color: #fff;
  margin-left: 6px;
}
.cart-btn-labeled:hover { background: rgba(43,185,201,0.16); border-color: rgba(43,185,201,0.85); color: #fff; }
.cart-btn-text {
  font-family: var(--f-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.cart-btn-labeled .cart-badge { top: -5px; right: -5px; border: 2px solid var(--navy); box-sizing: content-box; }

/* Labeled contact pill — same treatment as the cart pill, message icon + label */
.header-nav a.nav-contact-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid rgba(43,185,201,0.5);
  border-radius: 999px;
  color: #fff;
  line-height: 1.2; /* icon governs height → matches the 38px cart pill */
}
.header-nav a.nav-contact-pill:hover { background: rgba(43,185,201,0.16); border-color: rgba(43,185,201,0.85); color: #fff; }
.header-nav a.nav-contact-pill::after { display: none; }

.cart-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--grad-brand-h);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── HERO ────────────────────────────────────────────────── */
.hero {
  background: var(--paper);
  padding-top: var(--space-section-xl);
  padding-bottom: 0;
  overflow: hidden;
  position: relative;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 560px; height: 100%;
  background: radial-gradient(ellipse at 80% 40%, rgba(43,185,201,0.07) 0%, transparent 65%),
              radial-gradient(ellipse at 60% 70%, rgba(46,120,194,0.05) 0%, transparent 55%);
  pointer-events: none;
}

.hero-inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  align-items: end;
  min-height: 520px;
}

.hero-copy {
  grid-column: 1 / 9;
  padding-bottom: 64px;
  /* left-weighted */
  align-self: end;
}

.hero-h1 { margin-bottom: 20px; }
.hero-h1 em {
  font-style: italic;
}

.hero-sub {
  font-family: var(--f-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 540px;
  margin-bottom: 32px;
}

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

.hero-vial-wrap {
  position: absolute;
  bottom: 0;
}

.hero-vial-wrap.v1 {
  right: 4px;
  width: 156px;
  z-index: 3;
}
.hero-vial-wrap.v2 {
  right: 122px;
  width: 120px;
  bottom: 16px;
  z-index: 2;
}
.hero-vial-wrap.v3 {
  right: 216px;
  width: 95px;
  bottom: 36px;
  z-index: 1;
}

/* ── TRUST STRIP ─────────────────────────────────────────── */
.trust-strip {
  background: var(--navy);
  border-top: 1px solid rgba(43,185,201,0.2);
  border-bottom: none;
  padding: 32px 0;
  margin-top: 0;
}

.trust-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.trust-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 0 0 20px;
  border-left: 2px solid rgba(43,185,201,0.3);
}

.trust-item-label {
  font-family: var(--f-text);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

.trust-item-label.heavy {
  font-size: 14px;
}

.trust-item-sub {
  font-family: var(--f-text);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
}

/* ── CATALOG ─────────────────────────────────────────────── */
.catalog {
  padding: var(--space-section) 0;
}

.section-header {
  margin-bottom: 40px;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Retatrutide: wide 2-col landscape spotlight in row 1 */
.catalog-card--featured {
  grid-column: span 7;
}

/* Second card in row 1: narrower */
.catalog-card--standard-wide {
  grid-column: span 5;
}

/* Row 2: varied spans */
.catalog-card--narrow {
  grid-column: span 3;
}
.catalog-card--mid {
  grid-column: span 4;
}
.catalog-card--wide {
  grid-column: span 5;
}
/* One card spans 2 rows */
.catalog-card--tall {
  grid-column: span 4;
  grid-row: span 2;
}

/* PRODUCT CARD */
.product-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 140ms var(--ease);
}

.product-card:hover { border-color: rgba(43,185,201,0.35); box-shadow: 0 6px 24px rgba(16,42,74,0.08); }

.product-card--featured { border-radius: 0; }

.card-image-zone {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.card-image-zone.tall-zone {
  aspect-ratio: 3/4;
}

.card-image-zone svg {
  width: 100%;
  height: 100%;
}

.card-meta {
  padding: 16px 18px 18px;
  border-top: 1px solid var(--hairline);
}

.card-name {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 4px;
}

.card-name--featured {
  font-size: 20px;
}

.card-desc {
  font-family: var(--f-text);
  font-size: 13px;
  color: var(--body);
  line-height: 1.5;
  margin-bottom: 12px;
}

.card-data-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.card-dose {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.card-cas {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--body);
  font-variant-numeric: tabular-nums slashed-zero;
}

.card-price {
  font-family: var(--f-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  background: var(--grad-brand-h);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.in-stock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--teal);
  letter-spacing: 0.03em;
}

.in-stock-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--teal);
  flex-shrink: 0;
}

/* .editorial* removed — section not used in this build */

/* ── PRODUCT DETAIL ──────────────────────────────────────── */
.product-detail {
  padding: var(--space-section) 0;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  align-items: start;
}

.detail-main {
  grid-column: 1 / 8;
  /* cols 1-7 */
}

.detail-rail {
  grid-column: 8 / 13;
  /* cols 8-12 */
  position: sticky;
  top: 88px;
}

.detail-vial-gallery {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
}

.gallery-main {
  flex: 1;
  background: #EAECF0;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-main svg { width: 80%; height: 80%; }

.gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 64px;
}

.gallery-thumb {
  width: 64px;
  height: 64px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 140ms var(--ease);
}
.gallery-thumb.active { border-color: var(--accent); }
.gallery-thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gallery-thumb svg { width: 90%; height: 90%; }

.detail-breadcrumb {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--body);
  margin-bottom: 16px;
}

.detail-name {
  font-family: var(--f-display);
  font-size: clamp(32px, 3.5vw, 44px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 8px;
}

.detail-tagline {
  font-family: var(--f-text);
  font-size: 16px;
  color: var(--body);
  margin-bottom: 28px;
}

.detail-what {
  font-family: var(--f-text);
  font-size: 15px;
  color: var(--body);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 560px;
}

/* SPEC TABLE */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 32px;
}

.spec-table th {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--body);
  font-weight: 400;
  text-align: left;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
}

.spec-table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

.spec-table .spec-key {
  font-family: var(--f-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  width: 140px;
}

.spec-table .spec-val {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums slashed-zero;
}

/* BUY BOX (sticky rail) */
.buy-box {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 24px;
}

.buy-box-name {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}

.buy-box-dose {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--body);
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}

.buy-box-price {
  font-family: var(--f-mono);
  font-size: 28px;
  font-weight: 500;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
  background: var(--grad-brand-h);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.buy-box-stock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--teal);
  margin-bottom: 20px;
}

.buy-box-divider {
  height: 1px;
  background: var(--hairline);
  margin: 20px 0;
}

.size-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.size-pill {
  font-family: var(--f-mono);
  font-size: 12px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  cursor: pointer;
  background: none;
  color: var(--ink-soft);
  transition: border-color 120ms var(--ease), color 120ms var(--ease), background 120ms var(--ease);
}
.size-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.size-pill.active {
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(43,185,201,.07);
}

.buy-box-btn { width: 100%; justify-content: center; }

.buy-box-note {
  font-family: var(--f-text);
  font-size: 12px;
  color: var(--body);
  margin-top: 12px;
  line-height: 1.5;
}

/* ── CART ────────────────────────────────────────────────── */
.cart-section {
  padding: var(--space-section) 0;
  border-top: 1px solid var(--hairline);
}

.cart-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  align-items: start;
}

.cart-items {
  grid-column: 1 / 8;
}

.cart-summary {
  grid-column: 8 / 13;
  position: sticky;
  top: 88px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 24px;
}

.cart-section-title {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 28px;
}

.cart-line {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline);
}

.cart-line-image {
  width: 80px;
  height: 80px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-line-image svg { width: 90%; height: 90%; }

.cart-line-name {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 3px;
}

.cart-line-dose {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--body);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

.qty-control {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qty-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 16px;
  transition: border-color 120ms var(--ease);
}
.qty-btn:hover { border-color: var(--ink-soft); }
.qty-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.qty-num {
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 20px;
  text-align: center;
}

.cart-line-price {
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}

.summary-row:last-of-type { border-bottom: none; }

.summary-label {
  font-family: var(--f-text);
  font-size: 14px;
  color: var(--body);
}

.summary-val {
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.summary-total .summary-label {
  font-weight: 600;
  color: var(--ink);
  font-size: 15px;
}

.summary-total .summary-val {
  font-size: 18px;
  font-weight: 500;
  color: var(--teal);
}

.shipping-note {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--teal);
  letter-spacing: 0.03em;
  margin-top: 6px;
}

.empty-cart-msg {
  font-family: var(--f-text);
  font-size: 15px;
  color: var(--body);
  padding: 24px 0;
}

/* ── CHECKOUT ────────────────────────────────────────────── */
.checkout-section {
  padding: var(--space-section) 0;
  background: var(--paper);
  border-top: 1px solid var(--hairline);
}

.checkout-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  align-items: start;
}

.checkout-form-col {
  grid-column: 1 / 8;
}

.checkout-order-col {
  grid-column: 8 / 13;
  position: sticky;
  top: 88px;
}

.checkout-title {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 28px;
}

.form-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 28px;
}

.form-legend {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--body);
  margin-bottom: 16px;
  display: block;
}

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

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.form-field.full { grid-column: span 2; }

label {
  font-family: var(--f-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  font-family: var(--f-text);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 10px 14px;
  width: 100%;
  transition: border-color 120ms var(--ease);
  outline: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--ink-soft);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* PAYMENT TOGGLE */
.payment-toggle {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.payment-option {
  flex: 1;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  transition: border-color 140ms var(--ease);
  text-align: left;
}
.payment-option.active { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(43,185,201,0.12); }
.payment-option:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }

.payment-mark {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.payment-mark-btc {
  background: #F7931A;
}

.btc-save-badge {
  display: inline-block;
  font-family: var(--f-text);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: #F7931A;
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: middle;
}

.btc-address {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink);
  word-break: break-all;
  flex: 1;
  line-height: 1.45;
}

.discount-line {
  color: #16803C;
}
.discount-line .summary-val {
  color: #16803C;
}

.payment-name {
  font-family: var(--f-text);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.payment-sub {
  font-family: var(--f-text);
  font-size: 12px;
  color: var(--body);
}

/* PAYMENT INSTRUCTIONS BLOCK */
.payment-instructions {
  background: var(--cool-panel);
  border-radius: 6px;
  padding: 22px 24px;
  margin-bottom: 20px;
}

.pay-steps-title {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--body);
  margin-bottom: 14px;
}

.pay-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pay-step {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.pay-step-num {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  flex-shrink: 0;
  width: 16px;
}

.pay-step-text {
  font-family: var(--f-text);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.pay-amount {
  font-family: var(--f-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.copy-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 8px 10px 8px 14px;
  margin: 4px 0;
}

.copy-field-val {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.copy-btn {
  font-family: var(--f-text);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  transition: border-color 120ms var(--ease), color 120ms var(--ease);
  white-space: nowrap;
}
.copy-btn:hover { border-color: var(--teal); color: var(--teal); }
.copy-btn.copied { color: var(--teal); border-color: var(--teal); }
.copy-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Reveal-gate button styling (retained for the copy-field reveal pattern) */
.reveal-pay-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-text);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 9px 14px;
  margin: 6px 0 2px;
  cursor: pointer;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.reveal-pay-btn:hover { background: var(--accent); color: #fff; }
.reveal-pay-btn svg { flex-shrink: 0; }
.reveal-pay-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.reveal-helper {
  font-family: var(--f-text);
  font-size: 11.5px;
  color: var(--body);
  margin-top: 6px;
  opacity: 0.85;
}

/* ── Bitcoin "how to buy" guide (collapsible, for first-timers) ── */
.btc-buy-guide {
  margin-top: 16px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.btc-buy-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.btc-buy-summary::-webkit-details-marker { display: none; }
.btc-buy-summary:hover .btc-buy-q { color: var(--btc-gold); }
.btc-buy-summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.btc-buy-summary-main { display: flex; flex-direction: column; gap: 3px; }
.btc-buy-q {
  font-family: var(--f-text);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: color 120ms var(--ease);
}
.btc-buy-time {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--body);
}
.btc-buy-chev {
  font-family: var(--f-text);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  color: var(--btc-gold);
  flex-shrink: 0;
  transition: transform 160ms var(--ease);
}
.btc-buy-guide[open] .btc-buy-chev { transform: rotate(45deg); }
.btc-buy-body {
  padding: 0 16px 18px;
  border-top: 1px solid var(--hairline);
}
.btc-buy-intro {
  font-family: var(--f-text);
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 14px 0;
}
.btc-buy-featured {
  font-family: var(--f-text);
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 4px 0 2px;
  padding: 11px 13px;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--btc-gold);
  border-radius: 6px;
  background: var(--paper);
}
.btc-buy-featured strong { color: var(--ink); }
.btc-buy-easiest {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--btc-gold);
  margin-left: 7px;
}
.btc-buy-link {
  color: var(--btc-gold);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.btc-buy-link:hover { text-decoration: underline; }
.btc-buy-note {
  font-family: var(--f-text);
  font-size: 12.5px;
  color: var(--body);
  line-height: 1.55;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.btc-buy-note strong { color: var(--ink-soft); }

/* Process strip */
.process-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--body);
  text-align: center;
}

.process-arrow {
  color: var(--hairline);
  font-size: 14px;
  flex-shrink: 0;
}

.process-icon {
  width: 32px;
  height: 32px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
}

/* COMPLIANCE NOTICE */
.compliance-notice {
  border: 1px solid var(--clay);
  border-radius: 6px;
  padding: 16px 18px;
  margin-bottom: 20px;
}

.compliance-text {
  font-family: var(--f-text);
  font-size: 13px;
  color: var(--body);
  line-height: 1.55;
  margin-bottom: 12px;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--ink);
}

.checkbox-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.checkbox-label {
  font-family: var(--f-text);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Checkout order box */
.checkout-order-box {
  background: var(--cool-panel);
  border: 1px solid #D4DCE6;
  border-radius: 6px;
  padding: 22px 24px;
}

.order-box-title {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--body);
  margin-bottom: 16px;
}

.order-code-block {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 12px;
}

.order-code-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--body);
  margin-bottom: 4px;
}

.order-code-val {
  font-family: var(--f-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.order-code-helper {
  font-family: var(--f-text);
  font-size: 12px;
  color: var(--body);
  margin-top: 6px;
  line-height: 1.4;
}

.order-confirmation-msg {
  font-family: var(--f-text);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  margin-top: 12px;
}

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer {
  background: var(--canvas-deep);
  border-top: 1px solid var(--hair-1);
  padding: 64px 0 40px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.footer-top {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--hair-2);
  margin-bottom: 32px;
}

.footer-brand { flex-shrink: 0; }

.footer-about {
  font-family: var(--f-text);
  font-size: 14px;
  color: var(--text-mono-di);
  line-height: 1.7;
  max-width: 320px;
  margin-top: 16px;
}

.footer-nav-col {
  flex: 1;
}

.footer-nav-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mono-di);
  margin-bottom: 14px;
}

.footer-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav-list a {
  font-family: var(--f-text);
  font-size: 14px;
  color: var(--text-mono-di);
  text-decoration: none;
  transition: color 120ms var(--ease);
}
.footer-nav-list a:hover { color: var(--di-teal); }
.footer-nav-list a:focus-visible { outline: 2px solid var(--hair-hover); outline-offset: 2px; border-radius: 2px; }

.footer-bottom {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-compliance {
  font-family: var(--f-text);
  font-size: 12px;
  color: var(--text-body-di);
  line-height: 1.5;
}

/* ── CUSTOM ICONS (24px grid, 1.5px stroke) ────────────── */
.icon {
  display: inline-block;
  flex-shrink: 0;
}

/* ── INTERSECTION OBSERVER FADE-UP ─────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.fade-up.visible {
  opacity: 1;
  transform: none;
}

/* ── CARD GHOST NUMERAL ─────────────────────────────────── */
.card-ghost-num {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--f-display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  opacity: 0.10;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  letter-spacing: -0.03em;
}

.card-meta { position: relative; }

/* ── PAYMENT CONFIRM CHECKBOXES ─────────────────────────── */
.pay-confirm-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

/* ── CATEGORY NAV ─────────────────────────────────────── */
.cat-nav {
  position: sticky;
  top: 72px;
  z-index: 90;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}
.cat-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  gap: 0;
}
.cat-nav-link {
  font-family: var(--f-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 14px 20px 13px;
  border-bottom: 2px solid transparent;
  transition: color 120ms var(--ease), border-color 120ms var(--ease);
  white-space: nowrap;
}
.cat-nav-link:hover { color: var(--navy); border-bottom-color: var(--teal); }
.cat-nav-link.active { color: var(--navy); border-bottom-color: var(--teal); }

/* ── LIVE CATALOG ─────────────────────────────────────── */
.catalog-section {
  padding: 56px 0 32px;
}
.cat-section-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 32px;
}
.cat-section-title {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.cat-section-count {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--body);
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.cat-cap-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* Live product grid — 3 cols default */
.live-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 900px) {
  .live-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .live-grid { grid-template-columns: 1fr; }
}

.live-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 140ms var(--ease);
  display: flex;
  flex-direction: column;
}
.live-card:hover { border-color: rgba(43,185,201,0.35); box-shadow: 0 4px 20px rgba(16,42,74,0.07); }

.live-card-image {
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.live-card-image svg {
  width: 100%;
  height: 100%;
  display: block;
}
.live-card-meta {
  padding: 16px 18px 20px;
  border-top: 1px solid var(--hairline);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.live-card-name {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 2px;
}
.live-card-dose {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  margin-bottom: 12px;
}
.live-card-blurb {
  font-family: var(--f-text);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--body);
  margin: 4px 0 12px;
}
.live-card-blurb a { color: var(--accent); font-weight: 600; white-space: nowrap; }
.live-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--teal);
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.live-stock-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--teal);
  flex-shrink: 0;
}
.price-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
.price-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.price-row-label {
  font-family: var(--f-text);
  font-size: 12px;
  color: var(--body);
  min-width: 52px;
}
.price-row-amount {
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  background: var(--grad-brand-h);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.price-row-amount.kit-price {
  font-size: 14px;
  color: var(--ink-soft);
  background: none;
  -webkit-text-fill-color: var(--ink-soft);
}
.price-row-tag {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 2px 7px;
}
/* Per-row stock-origin tags: green US-FL (domestic, fast) vs cool Overseas (kits). */
.price-row-tag--us { background: #E4F5F1; color: #0A5A63; border-color: #bfe4d8; }
.price-row-tag--ov { background: var(--cool-panel); color: var(--navy); border-color: var(--hairline-cool); }

/* Checkout reconstitution-supplies cross-sell (kit hero + individual add-ons) */
.supplies-upsell { position: relative; background: #E8F6F2; border: 1px solid #bfe4d8; border-radius: 11px; padding: 12px 13px; margin-bottom: 16px; }
.supplies-head { display: flex; align-items: center; gap: 7px; font-family: var(--f-text); font-weight: 600; font-size: 13px; color: var(--navy); padding-right: 16px; margin-bottom: 10px; }
.supplies-icon { flex: none; width: 26px; height: 26px; border-radius: 7px; background: #fff; border: 1px solid #cbe6ea; display: flex; align-items: center; justify-content: center; }
.supply-kit { background: #fff; border: 1px solid #cbe6ea; border-radius: 9px; padding: 11px 12px; }
.supply-kit-title { font-family: var(--f-text); font-weight: 700; font-size: 13.5px; color: var(--navy); display: flex; align-items: center; gap: 7px; }
.supply-save { font-family: var(--f-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--teal); border-radius: 999px; padding: 2px 7px; }
.supply-kit-sub { font-family: var(--f-text); font-size: 11.5px; color: var(--body); line-height: 1.45; margin: 4px 0 9px; }
.supply-add-kit { display: block; width: 100%; font-family: var(--f-text); font-weight: 600; font-size: 13px; color: #fff; background: var(--teal); border: none; border-radius: 7px; padding: 8px 12px; cursor: pointer; transition: background .14s; }
.supply-add-kit:hover { background: #12707c; }
/* Secondary kit card (no water) — lighter, teal-outline CTA */
.supply-kit--alt { margin-top: 8px; }
.supply-save--alt { background: #0A5A63; }
.supply-add-kit--alt { background: #fff; color: var(--teal); border: 1px solid var(--teal); }
.supply-add-kit--alt:hover { background: var(--teal); color: #fff; }
.supplies-or { font-family: var(--f-text); font-size: 11px; color: var(--body); text-align: center; margin: 9px 0 7px; }
.supply-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.supply-name { flex: 1; min-width: 0; font-family: var(--f-text); font-size: 12.5px; font-weight: 600; color: var(--navy); }
.supply-meta { display: block; font-weight: 400; font-size: 11px; color: var(--body); margin-top: 1px; }
.supply-add { flex: none; font-family: var(--f-text); font-weight: 600; font-size: 12px; color: var(--teal); background: #fff; border: 1px solid #bfe4d8; border-radius: 7px; padding: 6px 11px; cursor: pointer; transition: all .14s; white-space: nowrap; }
.supply-add:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.bac-btn-row { display: flex; gap: 8px; }
.bac-btn-row .supply-add-kit { width: auto; flex: 1; padding: 8px 6px; font-size: 12.5px; }
.pairs-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; text-decoration: none; border-top: 1px solid #d7ebe6; }
.pairs-row:first-child { border-top: none; }
.pairs-arrow { flex: none; font-family: var(--f-text); font-weight: 600; font-size: 12px; color: var(--teal); white-space: nowrap; }
.bac-reminder-x { position: absolute; top: 6px; right: 9px; background: none; border: none; color: var(--body); font-size: 17px; line-height: 1; cursor: pointer; padding: 0; opacity: .5; }
.bac-reminder-x:hover { opacity: 1; }
.price-row-btn {
  margin-left: auto;
  font-family: var(--f-text);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 13px;
  border-radius: 5px;
  border: none;
  background: var(--grad-brand-h);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 120ms var(--ease);
  flex-shrink: 0;
}
.price-row-btn:hover { filter: brightness(1.1); }
.price-row-btn.kit-btn {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--hairline-cool);
}
.price-row-btn.kit-btn:hover { border-color: var(--teal); color: var(--teal); }
.price-row-na {
  font-family: var(--f-text);
  font-size: 12px;
  color: var(--body);
  opacity: 0.5;
  font-style: italic;
  margin-top: 4px;
}
.moq-banner {
  background: rgba(16,42,74,0.04);
  border: 1px solid var(--hairline-cool);
  border-radius: 5px;
  padding: 10px 16px;
  /* Center like every other block (was margin:0 32px, which left-pinned it on wide
     screens). width caps to the card column (1200 − 2×32px grid padding) so the bar
     lines up with the grid, and the calc keeps a 32px side gap on narrow screens. */
  width: calc(100% - 64px);
  max-width: 1136px;
  margin: 0 auto;
}
.moq-banner-text {
  font-family: var(--f-text);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.moq-banner-text strong {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--navy);
}
.cart-min-msg {
  font-family: var(--f-text);
  font-size: 13px;
  color: var(--clay);
  line-height: 1.5;
  margin-top: 8px;
}

/* ── FULL CATALOG (overseas kit list) ───────────────────── */
.full-catalog-section {
  padding: 56px 0 64px;
  background: var(--navy);
  border-top: none;
}
.full-catalog-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.full-catalog-heading {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: #fff;
  margin-bottom: 6px;
}
.full-catalog-sub {
  font-family: var(--f-text);
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.55;
  margin-bottom: 13px;
  max-width: 620px;
}
.fc-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 8px;
  margin: 0 0 30px;
  padding: 11px 15px;
  background: rgba(43,185,201,0.08);
  border: 1px solid rgba(43,185,201,0.22);
  border-radius: 9px;
  max-width: 620px;
}
.fc-callout-key {
  font-family: var(--f-text);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.fc-callout-rest {
  font-family: var(--f-text);
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}
.fc-callout-rest strong { color: var(--teal); font-weight: 600; }
.fc-category {
  margin-bottom: 28px;
}
.fc-cat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(43,185,201,0.18);
  margin-bottom: 4px;
}
.fc-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.fc-cat-title {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(43,185,201,0.7);
}
.fc-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 680px) {
  .fc-rows { grid-template-columns: 1fr; }
}
.fc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.fc-row:nth-child(odd) { padding-right: 20px; }
.fc-row:nth-child(even) { padding-left: 8px; border-left: 1px solid rgba(255,255,255,0.06); }
@media (max-width: 680px) {
  .fc-row:nth-child(odd),
  .fc-row:nth-child(even) { padding: 7px 0; border-left: none; }
  /* dropdown rows: give the name its own line so compound names never truncate */
  .fc-row--multi { flex-wrap: wrap; row-gap: 7px; }
  .fc-row--multi .fc-name { flex-basis: 100%; }
}
.fc-name {
  flex: 1;
  min-width: 0;
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  line-height: 1.25;
}
.fc-kit-label {
  display: none;
}
.fc-price {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 52px;
  text-align: right;
}
.fc-add-btn {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(43,185,201,0.35);
  background: transparent;
  color: var(--teal);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.fc-add-btn:hover { background: rgba(43,185,201,0.12); }
.fc-add-btn:focus-visible { outline: 2px solid rgba(43,185,201,0.6); outline-offset: 2px; }

/* ── MOBILE HAMBURGER ────────────────────────────────────── */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: rgba(255,255,255,0.8);
  margin-left: auto;
  flex-shrink: 0;
}
.hamburger-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 2px; border-radius: 4px; }

.mobile-nav-drawer {
  display: none;
  position: absolute;
  top: 72px;
  left: 0;
  right: 0;
  background: var(--navy);
  border-top: 1px solid rgba(43,185,201,0.15);
  padding: 12px 0 20px;
  z-index: 99;
}
.mobile-nav-drawer.open { display: block; }
.mobile-nav-drawer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.mobile-nav-drawer a {
  display: block;
  font-family: var(--f-text);
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.80);
  text-decoration: none;
  padding: 12px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mobile-nav-drawer a:hover { color: #fff; background: rgba(255,255,255,0.04); }

/* ── CHECKOUT STICKY TOP FIX ─────────────────────────────── */
.checkout-order-col { top: 132px; }

/* ── FC NAME WRAP ────────────────────────────────────────── */
.fc-name {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── HERO COMPACT ────────────────────────────────────────── */
.hero-inner { min-height: 440px; }
.hero-copy  { align-self: center; }

/* ── CAT-NAV SCROLL-X ON NARROW ──────────────────────────── */
@media (max-width: 760px) {
  .cat-nav-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #mobile-cart-btn { display: flex !important; }
}

/* ── RESPONSIVE: HERO ────────────────────────────────────── */
@media (max-width: 760px) {
  .hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-bottom: 40px;
  }
  .hero-copy {
    grid-column: 1 / -1;
    padding-bottom: 40px;
    align-self: auto;
  }
  .hamburger-btn { display: flex; align-items: center; }
  .header-nav { display: none; }
  .site-header { position: sticky; }
}

/* ── RESPONSIVE: CATALOG GRID ────────────────────────────── */
@media (max-width: 700px) {
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-card--featured,
  .catalog-card--standard-wide,
  .catalog-card--narrow,
  .catalog-card--mid,
  .catalog-card--wide,
  .catalog-card--tall {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* ── RESPONSIVE: CHECKOUT ────────────────────────────────── */
@media (max-width: 760px) {
  .checkout-grid {
    grid-template-columns: 1fr;
    gap: 32px 0;
  }
  .checkout-form-col,
  .checkout-order-col {
    grid-column: 1 / -1;
  }
  .checkout-order-col {
    position: static;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* a span-2 .full field would otherwise force grid to create an implicit
     2nd column, breaking the single-column mobile layout — reset it */
  .form-field.full {
    grid-column: 1;
  }
  .payment-toggle {
    flex-direction: column;
  }
}

/* ── RESPONSIVE: CART GRID ───────────────────────────────── */
@media (max-width: 760px) {
  .cart-grid {
    grid-template-columns: 1fr;
    gap: 32px 0;
  }
  .cart-items,
  .cart-summary {
    grid-column: 1 / -1;
  }
  .cart-summary { position: static; }
}

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fade-up { transition: none; }
  .btn, .product-card, .payment-option, .copy-btn, .qty-btn, .size-pill,
  .gallery-thumb, .cart-line, .footer-nav-list a, .live-card, .price-row-btn {
    transition: none;
  }
}

/* ── SCROLL MARGIN ───────────────────────────────────────── */
[id] { scroll-margin-top: 130px; }

/* ── REVIEWS SECTION ─────────────────────────────────────── */
.reviews-section {
  background: var(--paper);
  padding: var(--space-section) 32px;
}
.reviews-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.review-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.review-quote-mark {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--grad-brand-h);
  flex-shrink: 0;
  margin-bottom: 2px;
}
.review-text {
  font-family: var(--f-text);
  font-size: 14px;
  line-height: 1.65;
  color: var(--body);
  flex: 1;
}
.review-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  margin-top: auto;
}
.review-name {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.review-date {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--body);
  letter-spacing: 0.02em;
}
.review-verified {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(43,185,201,0.08);
  border: 1px solid rgba(43,185,201,0.25);
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .reviews-grid { grid-template-columns: 1fr; }
}

/* ── COA / LAB TESTS SECTION ─────────────────────────────── */
.lab-section {
  background: var(--navy);
  padding: var(--space-section) 32px;
  color: rgba(255,255,255,0.85);
}
.lab-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.lab-section .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin-bottom: 12px;
}
.lab-section .section-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--teal-bright);
  flex-shrink: 0;
}
.lab-section h2 {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 34px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: #fff;
}
.lab-section .lab-sub {
  font-family: var(--f-text);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  margin-top: 10px;
  max-width: 560px;
}
.lab-group {
  margin-top: 40px;
}
.lab-group + .lab-group {
  margin-top: 32px;
}
.lab-group-title {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 12px;
}
.lab-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lab-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 8px 14px;
  text-decoration: none;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
}
.lab-chip:hover {
  background: rgba(43,185,201,0.12);
  border-color: rgba(43,185,201,0.4);
  color: #fff;
}
.lab-chip-name { color: var(--text-hi);
  font-family: var(--f-text);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
}
.lab-chip-arrow {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--teal);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .lab-chips { gap: 6px; }
  .lab-chip { padding: 7px 11px; }
  .lab-chip-name { font-size: 12px; }
}


/* ===== elevation content (built-out pages) ===== */
 block below.
  Paste those additions into the master <style> tag in <head>.
-->

<!-- ═══════════════════════════════════════════════════════════
     ADDITIONAL CSS — paste into master <style> in <head>
     ═══════════════════════════════════════════════════════════ -->
<style>
/* ── HOW TO ORDER ────────────────────────────────────────── */
.how-section {
  background: var(--paper-warm);
  padding: var(--space-section) 0;
  border-top: 1px solid var(--hairline);
}
.how-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}
.section-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--teal);
  flex-shrink: 0;
}
.how-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 40px;
  position: relative;
}
.how-steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(10% + 8px);
  right: calc(10% + 8px);
  height: 1px;
  background: var(--hairline);
  z-index: 0;
}
.how-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
  position: relative;
  z-index: 1;
}
.how-step-num {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
  flex-shrink: 0;
  background: var(--grad-brand-h);
  color: #fff;
  border: none;
}
.how-step-title {
  font-family: var(--f-text);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.3;
}
.how-step-body {
  font-family: var(--f-text);
  font-size: 13px;
  color: var(--body);
  line-height: 1.55;
}
.how-pay-methods {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
  flex-wrap: wrap;
}
.how-pay-pill {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  background: var(--surface);
}
.how-pay-pill.btc { border-color: #F7931A; color: #C47514; }
.how-note {
  margin-top: 36px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 18px 22px;
}
.how-note-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.how-note-text {
  font-family: var(--f-text);
  font-size: 13px;
  color: var(--body);
  line-height: 1.6;
}
.how-note-text strong {
  font-weight: 600;
  color: var(--ink-soft);
}
@media (max-width: 820px) {
  .how-steps { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .how-steps::before { display: none; }
}
@media (max-width: 480px) {
  .how-steps { grid-template-columns: 1fr; }
}

/* ── SHIPPING SECTION ────────────────────────────────────── */
.shipping-section {
  background: var(--surface);
  padding: var(--space-section) 0;
  border-top: 1px solid var(--hairline);
}
.shipping-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.shipping-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 48px;
  margin-top: 40px;
}
.ship-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 28px;
}
.ship-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}
.ship-card-icon {
  width: 40px;
  height: 40px;
  background: var(--navy);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ship-card-title {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 3px;
}
.ship-card-origin {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--teal);
}
.ship-specs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.ship-spec-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ship-spec-key {
  font-family: var(--f-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  min-width: 100px;
  flex-shrink: 0;
}
.ship-spec-val {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ship-note {
  font-family: var(--f-text);
  font-size: 13px;
  color: var(--body);
  line-height: 1.6;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.ship-guarantee-block {
  grid-column: 1 / -1;
  background: var(--navy);
  border-radius: 6px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0 32px;
  align-items: center;
}
.ship-guarantee-icon {
  width: 48px;
  height: 48px;
  background: rgba(43,185,201,0.12);
  border-radius: 8px;
  border: 1px solid rgba(43,185,201,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ship-guarantee-title {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.ship-guarantee-body {
  font-family: var(--f-text);
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
}
.ship-guarantee-badge {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
  border: 1px solid rgba(43,185,201,0.4);
  border-radius: 999px;
  padding: 6px 16px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ship-discreet-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--cool-panel);
  border: 1px solid var(--hairline-cool);
  border-radius: 6px;
  padding: 18px 22px;
}
.ship-discreet-row svg { flex-shrink: 0; margin-top: 1px; }
.ship-discreet-text {
  font-family: var(--f-text);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.ship-discreet-text strong { font-weight: 600; color: var(--ink); }
@media (max-width: 760px) {
  .shipping-grid { grid-template-columns: 1fr; gap: 24px; }
  .ship-guarantee-block { grid-template-columns: 1fr; gap: 16px; }
}

/* ── ABOUT SECTION ───────────────────────────────────────── */
.about-section {
  background: var(--paper-warm);
  padding: var(--space-section) 0;
  border-top: 1px solid var(--hairline);
}
.about-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.about-layout {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 0 80px;
  align-items: start;
  margin-top: 40px;
}
.about-body {
  font-family: var(--f-text);
  font-size: 15px;
  color: var(--body);
  line-height: 1.75;
}
.about-body p + p { margin-top: 18px; }
.about-body p strong { font-weight: 600; color: var(--ink-soft); }
.about-pull {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--ink);
  border-left: 3px solid var(--teal);
  padding-left: 20px;
  margin: 32px 0;
}
.about-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 104px;
}
.about-stat-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 20px 22px;
}
.about-stat-num {
  font-family: var(--f-mono);
  font-size: 28px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  background: var(--grad-brand-h);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 4px;
}
.about-stat-label {
  font-family: var(--f-text);
  font-size: 13px;
  color: var(--body);
  line-height: 1.4;
}
.about-promise {
  background: var(--navy);
  border-radius: 6px;
  padding: 22px;
}
.about-promise-title {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}
.about-promise-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.about-promise-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--f-text);
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.45;
}
.about-promise-check {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: rgba(43,185,201,0.15);
  border: 1px solid rgba(43,185,201,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
@media (max-width: 820px) {
  .about-layout { grid-template-columns: 1fr; gap: 40px 0; }
  .about-rail { position: static; }
}

/* ── FAQ SECTION ─────────────────────────────────────────── */
.faq-section {
  background: var(--surface);
  padding: var(--space-section) 0;
  border-top: 1px solid var(--hairline);
}
.faq-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.faq-layout {
  display: grid;
  grid-template-columns: 3fr 5fr;
  gap: 0 80px;
  margin-top: 40px;
  align-items: start;
}
.faq-sidebar {
  position: sticky;
  top: 104px;
}
.faq-sidebar-title {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 16px;
}
.faq-sidebar-sub {
  font-family: var(--f-text);
  font-size: 14px;
  color: var(--body);
  line-height: 1.6;
  margin-bottom: 28px;
}
.faq-sidebar-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 10px 14px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  transition: border-color 120ms var(--ease), color 120ms var(--ease);
}
.faq-sidebar-link:hover { border-color: var(--teal); color: var(--teal); }
.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline);
}
.faq-item {
  border-bottom: 1px solid var(--hairline);
}
.faq-q {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  text-align: left;
}
.faq-q:hover .faq-q-text { color: var(--accent); }
.faq-q:hover .faq-q-icon { border-color: var(--teal); color: var(--teal); }
.faq-q-text {
  font-family: var(--f-text);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.faq-q-icon {
  width: 20px;
  height: 20px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--body);
  font-size: 14px;
  transition: background 120ms var(--ease), border-color 120ms var(--ease), transform 200ms var(--ease);
}
.faq-item.open .faq-q-icon {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  transform: rotate(45deg);
}
.faq-a {
  display: none;
  padding: 0 0 20px;
  font-family: var(--f-text);
  font-size: 14px;
  color: var(--body);
  line-height: 1.7;
  max-width: 640px;
}
.faq-item.open .faq-a { display: block; }
.faq-a strong { font-weight: 600; color: var(--ink-soft); }
.faq-a code {
  font-family: var(--f-mono);
  font-size: 12px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--ink-soft);
}
@media (max-width: 820px) {
  .faq-layout { grid-template-columns: 1fr; gap: 32px 0; }
  .faq-sidebar { position: static; }
}

/* ── CONTACT SECTION ─────────────────────────────────────── */
.contact-section {
  background: var(--navy);
  padding: var(--space-section) 0;
  border-top: none;
}
.contact-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.contact-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 1080px) {
  .contact-layout { grid-template-columns: 1fr 1fr; }
}
.contact-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}
.contact-card:hover {
  background: rgba(43,185,201,0.06);
  border-color: rgba(43,185,201,0.3);
}
.contact-card-icon {
  width: 44px;
  height: 44px;
  background: rgba(43,185,201,0.12);
  border: 1px solid rgba(43,185,201,0.25);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-card-title {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.005em;
}
.contact-card-body {
  font-family: var(--f-text);
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  flex: 1;
}
.contact-card-handle {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--teal);
  letter-spacing: 0.02em;
}
.contact-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--teal);
  text-decoration: none;
  margin-top: 4px;
  transition: color 120ms var(--ease);
}
.contact-card-link:hover { color: #fff; }
.contact-community {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 32px;
  background: rgba(43,185,201,0.06);
  border: 1px solid rgba(43,185,201,0.2);
  border-radius: 8px;
  padding: 28px 32px;
}
.community-num {
  font-family: var(--f-mono);
  font-size: 38px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  background: var(--grad-brand-h);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
}
.community-text {
  font-family: var(--f-text);
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
}
.community-text strong {
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}
.community-link {
  margin-left: auto;
  flex-shrink: 0;
}
@media (max-width: 820px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-community { flex-direction: column; align-items: flex-start; gap: 16px; }
  .community-link { margin-left: 0; }
}

/* ===== micro-polish layer ===== */


/* ───────────────────────────────────────────────────────────────
   0. SHARED TOKEN ADDITIONS
   Extend the existing :root without redefining existing tokens.
   These reference existing palette values for layering harmony.
────────────────────────────────────────────────────────────────*/
:root {
  /* Easing scale — single shared curve family */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);

  /* Duration scale */
  --dur-fast:   80ms;
  --dur-base:  160ms;
  --dur-slow:  320ms;
  --dur-reveal: 480ms;

  /* Shadow scale */
  --shadow-xs:  0 1px 2px rgba(14, 32, 56, 0.06);
  --shadow-sm:  0 2px 8px rgba(14, 32, 56, 0.08), 0 1px 2px rgba(14, 32, 56, 0.04);
  --shadow-md:  0 6px 24px rgba(14, 32, 56, 0.10), 0 2px 6px rgba(14, 32, 56, 0.05);
  --shadow-lg:  0 16px 48px rgba(14, 32, 56, 0.12), 0 4px 12px rgba(14, 32, 56, 0.06);
  --shadow-navy: 0 4px 20px rgba(16, 42, 74, 0.16);

  /* Focus ring */
  --ring-width:  2px;
  --ring-offset: 2px;
  --ring-color:  rgba(43, 185, 201, 0.70);
  --ring-dark:   rgba(14, 32, 56, 0.80);

  /* Radius discipline */
  --radius-xs:  3px;
  --radius-sm:  5px;
  --radius-md:  8px;
  --radius-pill: 999px;

  /* Vertical rhythm */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  16px;
  --space-lg:  32px;
  --space-xl:  56px;
}

/* ───────────────────────────────────────────────────────────────
   1. SELECTION COLOR
────────────────────────────────────────────────────────────────*/
::selection {
  background: rgba(43, 185, 201, 0.22);
  color: var(--ink);
}
::-moz-selection {
  background: rgba(43, 185, 201, 0.22);
  color: var(--ink);
}

/* ───────────────────────────────────────────────────────────────
   2. CUSTOM SCROLLBAR (WebKit/Blink; graceful no-op in Firefox)
────────────────────────────────────────────────────────────────*/
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--paper-warm);
}
::-webkit-scrollbar-thumb {
  background: rgba(16, 42, 74, 0.22);
  border-radius: var(--radius-pill);
  border: 2px solid var(--paper-warm);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(16, 42, 74, 0.38);
}

/* ───────────────────────────────────────────────────────────────
   3. GLOBAL FOCUS-VISIBLE RINGS
   Overrides the bare `outline: 2px solid var(--ink)` with
   branded teal rings + proper offset on all interactive elements.
────────────────────────────────────────────────────────────────*/
:focus-visible {
  outline: var(--ring-width) solid var(--ring-color);
  outline-offset: var(--ring-offset);
  border-radius: var(--radius-xs);
}

/* Elements on dark navy surfaces get a lighter ring */
.site-header :focus-visible,
.trust-strip :focus-visible,
.full-catalog-section :focus-visible,
.lab-section :focus-visible,
.site-footer :focus-visible {
  outline-color: rgba(255, 255, 255, 0.65);
}

/* Pill-shaped focusables */
.size-pill:focus-visible,
.lab-chip:focus-visible,
.review-verified:focus-visible {
  border-radius: var(--radius-pill);
}

/* Payment option card focus */
.payment-option:focus-visible {
  outline-offset: 3px;
  border-radius: 6px;
}

/* Cart quantity buttons */
.qty-btn:focus-visible {
  outline-color: var(--ring-color);
  border-radius: var(--radius-sm);
}

/* Form inputs — replace the flat outline with a branded glow */
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: var(--ring-width) solid var(--ring-color);
  outline-offset: 0;
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px rgba(43, 185, 201, 0.12);
  border-radius: 6px;
}

/* ───────────────────────────────────────────────────────────────
   4. STICKY HEADER — scroll shadow
   The JS adds .elev-scrolled (separate from existing .scrolled)
   for the box-shadow which existing CSS doesn't include.
────────────────────────────────────────────────────────────────*/
.site-header {
  transition:
    border-bottom-color var(--dur-base) var(--ease-out),
    box-shadow         var(--dur-base) var(--ease-out);
}

.site-header.elev-scrolled {
  box-shadow: 0 2px 16px rgba(10, 30, 54, 0.55);
  border-bottom-color: rgba(43, 185, 201, 0.30) !important;
}

/* ───────────────────────────────────────────────────────────────
   5. NAV LINK HOVER — refined with underline slide
   Adds a growing underline from left instead of bare color change.
────────────────────────────────────────────────────────────────*/
.header-nav a {
  position: relative;
  padding-bottom: 3px;
}

.header-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--teal);
  transition: width var(--dur-base) var(--ease-out);
}

.header-nav a:hover::after {
  width: 100%;
}

/* Cat-nav link underline — same treatment, fits the bottom-border pattern */
.cat-nav-link {
  position: relative;
  transition:
    color var(--dur-base) var(--ease-out),
    border-bottom-color var(--dur-base) var(--ease-out);
}

/* Footer nav links */
.footer-nav-list a {
  position: relative;
  display: inline-flex;
  transition: color var(--dur-base) var(--ease-out);
}

.footer-nav-list a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
  transition: width var(--dur-base) var(--ease-out);
}

.footer-nav-list a:hover::after {
  width: 100%;
}

/* ───────────────────────────────────────────────────────────────
   6. BUTTON REFINEMENTS
   Unified easing, deeper :active press, box-shadow lift on hover.
────────────────────────────────────────────────────────────────*/
.btn {
  transition:
    background-color var(--dur-base) var(--ease-out),
    color            var(--dur-base) var(--ease-out),
    box-shadow       var(--dur-base) var(--ease-out),
    transform        var(--dur-fast) var(--ease-out),
    filter           var(--dur-base) var(--ease-out);
  will-change: transform;
}

.btn:active {
  transform: translateY(1px) scale(0.985) !important;
  filter: brightness(0.93) !important;
  transition-duration: var(--dur-fast) !important;
}

.btn-primary:hover {
  background: var(--navy-mid);
  box-shadow: var(--shadow-navy);
}

.btn-grad:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 6px 20px rgba(43, 185, 201, 0.32);
}
.btn-grad:active {
  transform: translateY(0);
  transition-duration: var(--dur-fast);
}

.btn-ghost:hover {
  border-color: var(--teal);
  color: var(--teal);
  box-shadow: 0 0 0 1px rgba(43, 185, 201, 0.15);
}

/* Add-to-cart press animation */
@keyframes elev-press-ripple {
  0%   { transform: scale(1); }
  45%  { transform: scale(0.960); }
  100% { transform: scale(1); }
}

.elev-press {
  animation: elev-press-ripple 200ms var(--ease-spring) forwards;
}

/* price-row-btn — consistent with .btn */
.price-row-btn {
  transition:
    filter   var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  will-change: transform;
}

.price-row-btn:active {
  transform: scale(0.96);
  transition-duration: var(--dur-fast);
}

.price-row-btn:hover {
  box-shadow: 0 2px 8px rgba(43, 185, 201, 0.28);
}

.price-row-btn.kit-btn:hover {
  box-shadow: 0 0 0 1px rgba(43, 185, 201, 0.20);
}

/* fc-add-btn (overseas catalog) */
.fc-add-btn {
  transition:
    background var(--dur-base) var(--ease-out),
    color      var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform  var(--dur-fast) var(--ease-out);
}

.fc-add-btn:active {
  transform: scale(0.95);
}

/* ───────────────────────────────────────────────────────────────
   7. PRODUCT CARDS — elevated hover state
   Lifts with translate + refined shadow, not just border swap.
────────────────────────────────────────────────────────────────*/
.product-card {
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow   var(--dur-slow) var(--ease-out),
    transform    var(--dur-slow) var(--ease-out);
  will-change: transform, box-shadow;
}

.product-card:hover {
  border-color: rgba(43, 185, 201, 0.40);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.product-card:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

/* Live grid cards — staggered via --card-i (set by JS) */
.live-card {
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow   var(--dur-slow) var(--ease-out),
    transform    var(--dur-slow) var(--ease-out);
  will-change: transform, box-shadow;
}

.live-card:hover {
  border-color: rgba(43, 185, 201, 0.45);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.live-card:active {
  transform: translateY(-1px);
}

/* .fade-up stagger delay using --card-i injected by JS */
.live-grid .fade-up {
  transition-delay: calc(var(--card-i, 0) * 55ms);
}

/* ───────────────────────────────────────────────────────────────
   8. SIZE PILL — enhanced hover + active + ripple cue
────────────────────────────────────────────────────────────────*/
.size-pill {
  transition:
    border-color var(--dur-base) var(--ease-out),
    color        var(--dur-base) var(--ease-out),
    background   var(--dur-base) var(--ease-out),
    box-shadow   var(--dur-base) var(--ease-out),
    transform    var(--dur-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.size-pill:hover {
  border-color: rgba(43, 185, 201, 0.50);
  color: var(--teal);
  background: rgba(43, 185, 201, 0.05);
}

.size-pill:active {
  transform: scale(0.95);
}

.size-pill.active {
  box-shadow: 0 0 0 2px rgba(43, 185, 201, 0.20);
}

/* ───────────────────────────────────────────────────────────────
   9. GALLERY THUMBS
────────────────────────────────────────────────────────────────*/
.gallery-thumb {
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow   var(--dur-base) var(--ease-out),
    transform    var(--dur-fast) var(--ease-out);
}

.gallery-thumb:hover {
  border-color: rgba(43, 185, 201, 0.55);
  box-shadow: var(--shadow-xs);
  transform: scale(1.04);
}

.gallery-thumb.active {
  box-shadow: 0 0 0 2px rgba(43, 185, 201, 0.25);
}

/* ───────────────────────────────────────────────────────────────
   10. COA / LAB CHIPS
────────────────────────────────────────────────────────────────*/
.lab-chip {
  transition:
    background    var(--dur-base) var(--ease-out),
    border-color  var(--dur-base) var(--ease-out),
    box-shadow    var(--dur-base) var(--ease-out),
    transform     var(--dur-fast) var(--ease-out);
}

.lab-chip:hover {
  background: rgba(43, 185, 201, 0.14);
  border-color: rgba(43, 185, 201, 0.48);
  box-shadow: 0 2px 10px rgba(43, 185, 201, 0.15);
  transform: translateY(-1px);
}

.lab-chip:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Arrow slides slightly on hover */
.lab-chip:hover .lab-chip-arrow {
  transform: translateX(2px);
  transition: transform var(--dur-base) var(--ease-out);
}

.lab-chip-arrow {
  transition: transform var(--dur-base) var(--ease-out);
}

/* 10b. COA TRUST ROW — per-card, above buy button */
.coa-trust-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 10px; padding: 9px 11px; margin: 10px 0 12px;
  background: rgba(201, 138, 75, 0.08);
  border: 1px solid rgba(201, 138, 75, 0.30);
  border-radius: 6px; font-size: 12px;
}
.coa-trust-lot { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
.coa-trust-lot b { color: var(--clay); font-weight: 700; }
.coa-trust-sep { color: rgba(43,63,84,0.28); }
.coa-trust-links { display: flex; gap: 10px; flex-wrap: wrap; }
.coa-trust-link { font-size: 12px; font-weight: 600; color: var(--teal); text-decoration: none; white-space: nowrap; transition: color var(--dur-base) var(--ease-out); }
.coa-trust-link:hover { color: var(--clay); text-decoration: underline; }

/* ───────────────────────────────────────────────────────────────
   11. REVIEW CARDS
────────────────────────────────────────────────────────────────*/
.review-card {
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow   var(--dur-slow) var(--ease-out),
    transform    var(--dur-slow) var(--ease-out);
  border-radius: var(--radius-md);
}

.review-card:hover {
  border-color: rgba(43, 185, 201, 0.30);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

/* ───────────────────────────────────────────────────────────────
   12. PAYMENT OPTION TILES
────────────────────────────────────────────────────────────────*/
.payment-option {
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow   var(--dur-base) var(--ease-out),
    background   var(--dur-base) var(--ease-out),
    transform    var(--dur-fast) var(--ease-out);
}

.payment-option:hover {
  border-color: rgba(43, 185, 201, 0.45);
  background: rgba(43, 185, 201, 0.03);
}

.payment-option:active {
  transform: scale(0.99);
}

.payment-option.active {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(43, 185, 201, 0.14), var(--shadow-xs);
}

/* ═══════════════════════════════════════════════════════════════
   12b. PREMIUM PAYMENT CARDS  (light — blends with the light checkout)
   White cards in the product-card family; the Gemini coin/bank marks
   sit in a dark #0E2038 well (matches the render bg → seamless).
════════════════════════════════════════════════════════════════*/
.payment-toggle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.payment-option {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 18px 18px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
  transition: transform .24s cubic-bezier(.2,.7,.3,1),
              box-shadow .24s var(--ease-out),
              border-color .24s var(--ease-out);
}
.payment-option:hover {
  transform: translateY(-3px);
  border-color: rgba(43, 185, 201, 0.45);
  box-shadow: var(--shadow-md);
}
.payment-option:active { transform: translateY(-1px) scale(.995); }

.payment-option.active {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(43,185,201,0.14), var(--shadow-xs);
}
/* teal check badge on the selected card */
.payment-option.active::after {
  content: "";
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat;
  box-shadow: 0 0 0 4px rgba(43,185,201,.14);
  animation: payCheckPop .28s var(--ease-out) both;
}
@keyframes payCheckPop { from { transform: scale(0); } to { transform: scale(1); } }

/* icon well holds the Gemini coin/bank render (dark chip on the light card) */
.payment-option .payment-mark {
  width: 54px; height: 54px;
  border-radius: 10px;
  background: #0E2038;
  border: 1px solid rgba(14,32,56,0.10);
  overflow: hidden;
  position: relative; z-index: 1;
}
.payment-option .payment-mark img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .35s var(--ease-out);
}
.payment-option:hover .payment-mark img,
.payment-option.active .payment-mark img { transform: scale(1.07); }

/* PayPal card: a light chip so the true-color PayPal mark reads (crypto chips are dark) */
#pay-card .payment-mark { background: #fff; border: 1px solid var(--hairline); }
#pay-card .payment-mark svg { width: 30px; height: 30px; display: block; }

.payment-option .btc-save-badge.fee-badge { background: linear-gradient(135deg, var(--clay), #a85a2c); }

.payment-option .payment-name {
  color: var(--ink); font-size: 15px; letter-spacing: -.01em;
  position: relative; z-index: 1;
}
.payment-option .payment-sub {
  color: var(--body); font-size: 12.5px; line-height: 1.45;
  position: relative; z-index: 1;
}
.payment-option .btc-save-badge {
  background: linear-gradient(135deg, var(--teal), #1f9aa8);
  color: #fff; font-weight: 700; box-shadow: 0 2px 8px -2px rgba(43,185,201,.4);
}

/* "Soon" placeholder card (Zelle) — present but not selectable until wired */
.payment-option.is-soon {
  opacity: .72;
  cursor: not-allowed;
  border-style: dashed;
  border-color: var(--hairline);
  box-shadow: none;
}
.payment-option.is-soon:hover {
  transform: none;
  border-color: var(--hairline);
  background: var(--surface);
  box-shadow: none;
}
.payment-option.is-soon:hover .payment-mark img { transform: none; }
.payment-option .soon-badge {
  display: inline-block; font-family: var(--f-text); font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--body);
  background: rgba(14,32,56,0.05); border: 1px solid var(--hairline);
  border-radius: 999px; padding: 2px 7px; margin-left: 6px; vertical-align: middle;
}
@media (max-width: 640px) {
  .payment-toggle { grid-template-columns: 1fr; }
  .payment-option { flex-direction: row; align-items: center; padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .payment-option.active::after { animation: none; }
  .payment-option .payment-mark img { transition: none; }
}

/* ───────────────────────────────────────────────────────────────
   13. FORM FIELDS — refined styling
────────────────────────────────────────────────────────────────*/
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow   var(--dur-base) var(--ease-out);
  caret-color: var(--teal);
  border-radius: 6px;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
textarea:hover,
select:hover {
  border-color: rgba(44, 62, 84, 0.45);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(43, 185, 201, 0.12);
}

/* Label — subtle lift to indicate field relationship */
.form-field label {
  letter-spacing: 0.01em;
  transition: color var(--dur-base) var(--ease-out);
}

.form-field:focus-within label {
  color: var(--teal);
}

/* Textarea — min-height for usability */
textarea {
  min-height: 88px;
  resize: vertical;
}

/* Select arrow — refined appearance */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* ───────────────────────────────────────────────────────────────
   14. COPY BUTTON
────────────────────────────────────────────────────────────────*/
.copy-btn {
  transition:
    border-color var(--dur-base) var(--ease-out),
    color        var(--dur-base) var(--ease-out),
    background   var(--dur-base) var(--ease-out),
    transform    var(--dur-fast) var(--ease-out);
}

.copy-btn:active {
  transform: scale(0.95);
}

.copy-btn.copied {
  background: rgba(43, 185, 201, 0.08);
}

/* ───────────────────────────────────────────────────────────────
   15. CART — empty state micro-interaction
────────────────────────────────────────────────────────────────*/
#cart.elev-cart-empty .empty-cart-msg {
  padding: 40px 0;
  opacity: 0.7;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* Cart line entrance */
@keyframes elev-cart-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Entrance is opt-in: cart.js adds .cart-line--enter only to newly added SKUs,
   so qty/remove re-renders don't replay the slide on every line. */
.cart-line--enter {
  animation: elev-cart-in var(--dur-slow) var(--ease-out) both;
}

/* Cart badge pop when item is added */
@keyframes elev-badge-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  70%  { transform: scale(0.90); }
  100% { transform: scale(1); }
}

.cart-badge {
  transition: background var(--dur-base) var(--ease-out);
}
.cart-badge.badge-pop { animation: elev-badge-pop 420ms var(--ease-out); }

/* ───────────────────────────────────────────────────────────────
   16. QTY CONTROL BUTTONS
────────────────────────────────────────────────────────────────*/
.qty-btn {
  transition:
    border-color var(--dur-base) var(--ease-out),
    background   var(--dur-base) var(--ease-out),
    transform    var(--dur-fast) var(--ease-out);
}

.qty-btn:hover {
  border-color: var(--teal);
  background: rgba(43, 185, 201, 0.06);
}

.qty-btn:active {
  transform: scale(0.90);
  background: rgba(43, 185, 201, 0.12);
}

/* ───────────────────────────────────────────────────────────────
   17. SCROLL-REVEAL for section-level elements (JS adds .elev-reveal)
────────────────────────────────────────────────────────────────*/
.elev-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

.elev-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ───────────────────────────────────────────────────────────────
   18. BUY BOX — subtle shadow to separate from detail rail bg
────────────────────────────────────────────────────────────────*/
.buy-box {
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--dur-slow) var(--ease-out);
}

.buy-box:hover {
  box-shadow: var(--shadow-md);
}

/* ───────────────────────────────────────────────────────────────
   19. CART SUMMARY + CHECKOUT ORDER BOX
────────────────────────────────────────────────────────────────*/
.cart-summary {
  box-shadow: var(--shadow-sm);
  border-radius: 8px;
}

.checkout-order-box {
  box-shadow: var(--shadow-xs);
  border-radius: 8px;
}

/* ───────────────────────────────────────────────────────────────
   20. IN-STOCK DOT — pulsing beacon
────────────────────────────────────────────────────────────────*/
@keyframes elev-beacon {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43, 185, 201, 0.55); }
  50%       { box-shadow: 0 0 0 4px rgba(43, 185, 201, 0); }
}

.in-stock-dot,
.live-stock-dot {
  animation: elev-beacon 2.4s ease-in-out infinite;
}

/* ───────────────────────────────────────────────────────────────
   21. TRUST STRIP ITEMS — hover lift
────────────────────────────────────────────────────────────────*/
.trust-item {
  transition:
    border-left-color var(--dur-base) var(--ease-out),
    transform         var(--dur-slow) var(--ease-out);
}

.trust-item:hover {
  border-left-color: rgba(43, 185, 201, 0.70);
  transform: translateY(-1px);
}

/* ───────────────────────────────────────────────────────────────
   22. HERO — vials parallax cue (CSS only, no layout change)
────────────────────────────────────────────────────────────────*/
.hero-vial-wrap {
  transition: transform var(--dur-slow) var(--ease-out);
}

.hero:hover .hero-vial-wrap.v1 { transform: translateY(-4px); }
.hero:hover .hero-vial-wrap.v2 { transform: translateY(-2px); }
.hero:hover .hero-vial-wrap.v3 { transform: translateY(-1px); }

/* ───────────────────────────────────────────────────────────────
   23. SECTION EYEBROW + EYEBROW DOTS — refined micro-detail
────────────────────────────────────────────────────────────────*/
.section-eyebrow {
  letter-spacing: 0.09em;
}

.cat-cap-dot {
  transition: transform var(--dur-base) var(--ease-spring);
}

.cat-section-header:hover .cat-cap-dot {
  transform: scale(1.30);
}

/* ───────────────────────────────────────────────────────────────
   24. SPEC TABLE — subtle row hover
────────────────────────────────────────────────────────────────*/
.spec-table tbody tr {
  transition: background var(--dur-fast) var(--ease-out);
}

.spec-table tbody tr:hover {
  background: rgba(43, 185, 201, 0.04);
}

/* ───────────────────────────────────────────────────────────────
   25. FULL CATALOG ROWS (overseas) — hover highlight
────────────────────────────────────────────────────────────────*/
.fc-row {
  transition:
    background var(--dur-fast) var(--ease-out),
    transform  var(--dur-fast) var(--ease-out);
  border-radius: var(--radius-xs);
}

.fc-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.fc-row:hover .fc-name {
  color: rgba(255, 255, 255, 1.0);
  transition: color var(--dur-base) var(--ease-out);
}

/* ───────────────────────────────────────────────────────────────
   26. MOBILE NAV DRAWER — slide-in instead of display:block snap
────────────────────────────────────────────────────────────────*/
.mobile-nav-drawer {
  transform-origin: top center;
  transform: scaleY(0.94) translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity   var(--dur-base) var(--ease-out);
  display: block !important;
  visibility: hidden;
}

.mobile-nav-drawer.open {
  transform: scaleY(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* ───────────────────────────────────────────────────────────────
   27. COMPLIANCE NOTICE — warm amber glow on :focus-within
────────────────────────────────────────────────────────────────*/
.compliance-notice {
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow   var(--dur-base) var(--ease-out);
}

.compliance-notice:focus-within {
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(201, 138, 75, 0.12);
}

/* ───────────────────────────────────────────────────────────────
   28. PROCESS STRIP ICONS
────────────────────────────────────────────────────────────────*/
.process-icon {
  transition:
    border-color var(--dur-base) var(--ease-out),
    color        var(--dur-base) var(--ease-out),
    transform    var(--dur-base) var(--ease-spring);
}

.process-step:hover .process-icon {
  border-color: var(--teal);
  color: var(--teal);
  transform: scale(1.08);
}

/* ───────────────────────────────────────────────────────────────
   29. CHECKOUT SUBMIT BUTTON — state-aware pulse
────────────────────────────────────────────────────────────────*/
@keyframes elev-ready-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43, 185, 201, 0.28); }
  50%       { box-shadow: 0 0 0 6px rgba(43, 185, 201, 0); }
}

/* Keyed to the data-ready flag cart.js maintains (the old opacity-inline
   heuristic died with the F-26 disabled-state removal). */
#paid-btn[data-ready="1"] {
  animation: elev-ready-glow 2s ease-in-out infinite;
}

/* ───────────────────────────────────────────────────────────────
   30. REDUCED MOTION — disable every polish animation
────────────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  /* Transitions */
  .product-card,
  .live-card,
  .lab-chip,
  .review-card,
  .payment-option,
  .trust-item,
  .gallery-thumb,
  .size-pill,
  .qty-btn,
  .copy-btn,
  .fc-row,
  .btn,
  .price-row-btn,
  .fc-add-btn,
  .buy-box,
  .cart-summary,
  .hero-vial-wrap,
  .cat-cap-dot,
  .process-icon,
  .spec-table tbody tr,
  .footer-nav-list a,
  .header-nav a,
  .compliance-notice,
  .payment-option,
  .mobile-nav-drawer,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    transition: none !important;
    animation: none !important;
  }

  /* Pseudo-elements */
  .header-nav a::after,
  .footer-nav-list a::after,
  .lab-chip-arrow {
    transition: none !important;
  }

  /* Scroll reveal — show immediately */
  .elev-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Pulsing beacon */
  .in-stock-dot,
  .live-stock-dot {
    animation: none !important;
  }

  /* Checkout submit glow */
  #paid-btn {
    animation: none !important;
  }
}


/* ====== motion & ambience layer (BBA) ====== */
.hero{position:relative}
.hero-inner{position:relative;z-index:2}
.hero-copy > *{animation:heroIn .85s cubic-bezier(.2,.75,.3,1) both}
.hero-copy > *:nth-child(1){animation-delay:.08s}
.hero-copy > *:nth-child(2){animation-delay:.18s}
.hero-copy > *:nth-child(3){animation-delay:.28s}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.bba-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#2BB9C9,#2E78C2);box-shadow:0 0 10px rgba(43,185,201,.5);z-index:9999;pointer-events:none;transition:width .12s ease-out}
@media (prefers-reduced-motion: reduce){
  .hero-copy > *{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}
  .hero-video,.hero-gl{display:none!important}
  .bba-progress{display:none!important}
}

/* ════ FULL-CATALOG CONSOLIDATION — dose selector + search (audit 2026-06-27) ════ */
.fc-row--multi { gap: 8px; }
.fc-dose {
  flex-shrink: 0;
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: #fff;
  background-color: rgba(43,185,201,0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%237FE3D6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  border: 1px solid rgba(43,185,201,0.45);
  border-radius: 5px;
  padding: 4px 25px 4px 9px;
  max-width: 152px;
  cursor: pointer;
  color-scheme: dark;
  transition: border-color 120ms var(--ease), background-color 120ms var(--ease);
}
.fc-dose:hover { border-color: rgba(43,185,201,0.85); background-color: rgba(43,185,201,0.2); }
.fc-dose:focus-visible { outline: 2px solid rgba(43,185,201,0.7); outline-offset: 1px; }
.fc-dose option { color: #11243B; background-color: #ffffff; font-weight: 500; }
.fc-dose-tag {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
}
/* Every full-catalog row is a kit of 10 — reinforce it on the price so no row reads as a single vial. */
.fc-price::after {
  content: " /kit";
  font-size: 10px;
  font-weight: 400;
  color: rgba(43,185,201,0.62);
  letter-spacing: 0.01em;
}
/* Carriers & Consumables are single bottles, not 10-vial kits — show /btl, not /kit. */
.fc-category--btl .fc-price::after { content: " /btl"; }
.fc-filter-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 440px;
  margin: 4px 0 30px;
  padding: 10px 15px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 9px;
  transition: border-color 140ms var(--ease);
}
.fc-filter-wrap:focus-within { border-color: rgba(43,185,201,0.55); }
.fc-filter-ico { color: rgba(255,255,255,0.45); flex-shrink: 0; }
.fc-filter {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  color: #fff;
  font-family: var(--f-text);
  font-size: 14.5px;
}
.fc-filter::placeholder { color: rgba(255,255,255,0.42); }
.fc-filter-count {
  font-family: var(--f-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  flex-shrink: 0;
}
.fc-row.fc-hidden, .fc-category.fc-hidden { display: none !important; }

/* ════ FINAL POLISH PASS — mobile QOL, tap targets (audit 2026-06-27) ════ */
@media (max-width: 760px) {
  /* 16px inputs/selects prevent iOS Safari auto-zoom on focus.
     .fc-dose is class-styled at 11.5px (0,1,0), so it must be named here to win on specificity. */
  input[type="text"], input[type="email"], input[type="tel"], textarea, select, .fc-dose { font-size: 16px; }
  /* keep the header wordmark from overflowing very narrow phones */
  .header-logo svg { max-width: 170px; height: auto; }
  /* reclaim above-the-fold space on phones */
  .hero { padding-top: 56px; }
  .cart-section, .checkout-section { padding-top: 48px; padding-bottom: 48px; }
  /* pin the drawer to the viewport so the background scroll-lock holds on iOS */
  .mobile-nav-drawer { position: fixed; max-height: calc(100vh - 72px); overflow-y: auto; }
  /* fade the right edge of the category bar to hint it scrolls */
  .cat-nav-inner { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); }
}
@media (max-width: 600px) {
  /* trust strip: 4 cramped columns -> tidy 2x2 */
  .trust-strip-inner { grid-template-columns: 1fr 1fr; gap: 18px 16px; }
  .trust-item { padding-left: 14px; }
  /* bigger tap targets — these are the only add-actions in their rows */
  .price-row-btn { padding: 11px 14px; font-size: 13px; min-height: 44px; }
  .fc-add-btn { padding: 11px 14px; font-size: 12px; min-height: 44px; }
  /* payment-critical Copy buttons + cart controls — meet the ~44px tap minimum */
  .copy-btn { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; font-size: 13px; }
  .qty-btn { width: 44px; height: 44px; }
  .size-pill { padding: 12px 16px; font-size: 13px; min-height: 44px; }
}
@media (max-width: 700px) {
  /* footer stacks instead of overflowing at narrow widths */
  .footer-top { flex-direction: column; gap: 28px; }
  .footer-brand svg { max-width: 180px; height: auto; }
}
/* Dark (navy) sections: keep teal at the bright tone — the deepened light-bg teal
   (chosen for AA on paper) would fall to ~2.6:1 on navy. Scoped token override. */
/* accent locked to deep teal — bright cyan override removed */


/* --- */


/* FAILSAFE (2026-07-01): the scroll-reveal was leaving the whole storefront invisible
   on the live site (IntersectionObserver never revealed the content). Content must
   ALWAYS render — force every reveal target visible regardless of JS state. Decorative
   .amb-* auroras and inline SVG art are intentionally NOT targeted. */
.fade-up,.live-card,.rev-shot,.display-h2,.body-text,.catalog-section,.full-catalog-section,
.reviews-section,.lab-section,.media-grid,.coa-grid,.lab-group,.coa-note,.how-steps,.how-note,
.shipping-grid,.about-body,.about-rail,.faq-sidebar,.faq-list,.contact-layout,.about-stat-num{
  opacity:1 !important;transform:none !important;animation-name:none !important;visibility:visible !important;
}

/* ── FULL-CATALOG PRICE LIST (Option A, 2026-07-03) — reference-catalog rows, collapsible by category ── */
#cat-full .fc-rows { display:block !important; }
#cat-full .fc-category { margin:0; border-top:1px solid rgba(43,185,201,0.15); }
#cat-full .fc-category:last-of-type { border-bottom:1px solid rgba(43,185,201,0.15); }
#cat-full .fc-cat-header { cursor:pointer; padding:15px 4px; margin:0; border-bottom:none; gap:11px; -webkit-user-select:none; user-select:none; }
#cat-full .fc-cat-header:hover .fc-cat-title { color:var(--teal-bright); }
#cat-full .fc-cat-header:focus-visible { outline:2px solid rgba(43,185,201,0.6); outline-offset:-2px; }
#cat-full .fc-cat-title { font-family:var(--f-text) !important; text-transform:uppercase !important; font-weight:600 !important; font-size:13px !important; letter-spacing:.06em !important; }
#cat-full .fc-cat-count { font-family:var(--f-mono); font-size:11px; color:rgba(255,255,255,0.6); letter-spacing:.08em; margin-left:1px; }
#cat-full .fc-cat-chev { margin-left:auto; color:rgba(255,255,255,0.4); transition:transform .2s var(--ease); flex:0 0 auto; }
#cat-full .fc-category.fc-collapsed .fc-cat-chev { transform:rotate(-90deg); }
#cat-full .fc-category.fc-collapsed .fc-rows { display:none !important; }
#cat-full .fc-row, #cat-full .fc-row:nth-child(odd), #cat-full .fc-row:nth-child(even) {
  display:flex !important; flex-direction:row; align-items:center; gap:16px;
  padding:13px 6px !important; margin:0 !important; border:0 !important; border-radius:0 !important;
  /* was rgba(255,255,255,.055) — a white hairline left over from the dark skin,
     invisible on this white section, so the densest price list on the site had no
     row rules at all. */
  border-top:1px solid var(--hair-1) !important; background:transparent !important;
  transition:background .12s var(--ease);
}
#cat-full .fc-rows .fc-row:first-child { border-top:0 !important; }
#cat-full .fc-row:hover { background:var(--surface-2) !important; transform:none !important; }
#cat-full .fc-row .fc-name { flex:1 1 auto !important; font-family:var(--f-text) !important; font-size:15px !important; font-weight:600 !important; letter-spacing:-.005em; color:#F5F2EC !important; line-height:1.3 !important; min-width:0; }
#cat-full .fc-row .fc-dose-tag { font-size:11.5px; color:rgba(127,227,214,0.82); font-family:var(--f-mono); margin-left:6px; font-weight:400; }
#cat-full .fc-row .fc-dose { flex:0 0 auto; width:auto !important; max-width:186px !important; margin:0; font-size:12.5px; }
#cat-full .fc-row .fc-price { flex:0 0 auto; font-family:var(--f-mono); font-size:15px !important; font-weight:600 !important; color:var(--teal-bright) !important; text-align:right !important; min-width:76px !important; white-space:nowrap; margin:0; font-variant-numeric:tabular-nums; }
#cat-full .fc-row .fc-price::after { font-size:11px !important; font-weight:400 !important; color:rgba(255,255,255,0.62) !important; }
#cat-full .fc-row .fc-add-btn { flex:0 0 auto; margin:0; width:auto; padding:8px 18px !important; font-size:12.5px !important; min-height:0 !important; border-radius:8px !important; border:1px solid rgba(43,185,201,0.5) !important; background:transparent !important; color:#8FE9DE !important; font-weight:600; letter-spacing:.02em; }
#cat-full .fc-row .fc-add-btn:hover { background:rgba(43,185,201,0.16) !important; color:#fff !important; }
/* (full-catalog mobile rows are handled in the consolidated mobile-overhaul block near </body>) */
/* shipping-origin pills — the two-warehouse (US vs overseas) distinction */
.ship-pill{ display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:5px 12px; white-space:nowrap; }
.ship-pill svg{ flex:0 0 auto; }
.ship-pill--us{ color:#0A6E78; background:rgba(43,185,201,0.10); border:1px solid rgba(43,185,201,0.34); }
.ship-pill--intl{ color:#8F5F23; background:rgba(198,154,91,0.12); border:1px solid rgba(198,154,91,0.38); }


/* ── TASTEFUL HOVER + MICRO-INTERACTIONS (2026-07-03) — safe, cannot hide content ── */
.live-card{transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s cubic-bezier(.22,.61,.36,1)}
.live-card:hover{transform:translateY(-6px);box-shadow:0 20px 46px -16px rgba(16,42,74,.30)}
.live-card .live-card-image{overflow:hidden}
.live-card .live-card-image img{display:block;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.live-card:hover .live-card-image img{transform:scale(1.045)}
.btn,.price-row-btn,.fc-add-btn,.size-pill,.payment-option{transition:transform .13s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease}
.btn:hover{box-shadow:0 8px 20px -8px rgba(16,42,74,.35)}
.btn:active,.price-row-btn:active,.fc-add-btn:active,.size-pill:active{transform:translateY(1px) scale(.985)}
@media (prefers-reduced-motion: reduce){.live-card,.live-card .live-card-image img,.btn,.price-row-btn,.fc-add-btn{transition:none!important}.live-card:hover,.live-card:hover .live-card-image img{transform:none}}

/* ── FULL-CATALOG POLISH (2026-07-07): premium search field + accordion refinement ── */
/* Search field: override the global input[type=text] white-fill (0,1,1) that made the box look unstyled */
#cat-full .fc-filter-wrap {
  max-width: 560px; margin: 12px 0 36px; padding: 14px 18px; gap: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.022));
  border: 1px solid rgba(255,255,255,0.12); border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
#cat-full .fc-filter-wrap:focus-within {
  border-color: rgba(43,185,201,0.55);
  background: linear-gradient(180deg, rgba(43,185,201,0.07), rgba(255,255,255,0.02));
  box-shadow: 0 0 0 3px rgba(43,185,201,0.13), inset 0 1px 0 rgba(255,255,255,0.05);
}
#cat-full .fc-filter-ico { color: rgba(43,185,201,0.75); }
#fc-filter, #cat-full input.fc-filter {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; outline: none !important; color: #fff !important;
  font-family: var(--f-text) !important; font-size: 15px !important;
  padding: 0 !important; width: 100% !important; height: auto !important;
}
#fc-filter::placeholder { color: rgba(255,255,255,0.4) !important; }
#cat-full .fc-filter-count { color: rgba(255,255,255,0.55); }

/* Accordion category rows: full-row hover highlight, count as a pill, glowing dot */
#cat-full .fc-cat-header { padding: 16px 14px !important; border-radius: 12px; transition: background .16s var(--ease); }
#cat-full .fc-cat-header:hover { background: rgba(43,185,201,0.055); }
#cat-full .fc-cat-title { color: rgba(232,242,244,0.9) !important; transition: color .16s var(--ease); }
#cat-full .fc-cat-header:hover .fc-cat-title { color: var(--teal-bright) !important; }
#cat-full .fc-cat-dot { width: 9px; height: 9px; box-shadow: 0 0 9px rgba(43,185,201,0.6); }
#cat-full .fc-cat-count {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .05em; color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px; padding: 2px 8px; margin-left: 7px;
}
#cat-full .fc-cat-chev { transition: transform .2s var(--ease), color .16s var(--ease); }
#cat-full .fc-cat-header:hover .fc-cat-chev { color: rgba(43,185,201,0.85); }



/* --- */


/* == Cold Glass revamp: motion + polish layer (2026-07-10) == */
/* touch devices: hover-lifts must not stick after tap */
@media (hover: none){
  .live-card:hover,.cat-tile:hover,.payment-option:hover,.rev-shot:hover,.btn-grad:hover{transform:none !important}
}
/* keyboard ring for the category nav */
.cat-nav-link:focus-visible{outline:2px solid var(--teal-bright);outline-offset:2px;border-radius:var(--radius-xs)}
/* Featured spotlight: Retatrutide leads the GLP-1 row */
/* was 1.45fr 1fr — it rendered the Retatrutide vial ~2x its neighbours, so the brand's
   one repeated object had two sizes and the two GLP-1s could not be compared
   side-by-side. Equal columns + a fixed image height = one vial scale page-wide.
   Replace, never delete: deleting this leaves a dead 360px column in the money category. */
@media(min-width:1025px){ #cat-glp1 .live-grid{grid-template-columns:repeat(2,1fr)} }
.live-grid .live-card-image{aspect-ratio:auto;height:270px}
.live-card--featured{border-color:rgba(43,185,201,.38);box-shadow:var(--shadow-md)}
/* Full-bleed lattice band (catalog -> reviews bridge) */
/* The AI-generated molecular-network image was dropped here: the rule is overridden downstream
   (the band is a token graticule now), but Chrome still speculatively FETCHED the file
   from this matching rule -- an AI asset downloaded on every page load and never painted.
   izzy 2026-07-15: nothing fake. Colour/padding kept; the image reference is gone. */
.mol-band{position:relative;background:#0A1E36;padding:88px 0;color:#fff}
.mol-band-inner{max-width:1200px;margin:0 auto;padding:0 32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.mol-band h2{font-family:var(--f-display);font-size:clamp(26px,3.4vw,40px);font-weight:500;line-height:1.18;margin:0;max-width:600px}
.mol-band h2 em{font-style:italic;color:var(--teal-bright)}
.mol-band-link{font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.38);border-radius:999px;padding:12px 22px;transition:border-color var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out)}
.mol-band-link:hover{border-color:var(--teal-bright);background:rgba(43,185,201,.12)}
/* Reduced motion: blanket for this layer */
@media (prefers-reduced-motion: reduce){
  .hero-video,.hero-gl{display:none !important}
  .cart-line--enter{animation:none !important}
  .btn-grad:hover{transform:none}
  html{scroll-behavior:auto !important}
}


/* --- */

.price-row-label .kit-x{display:block;font-family:var(--f-text);font-size:11px;font-weight:400;color:var(--ink-soft);letter-spacing:0;margin-top:1px;white-space:nowrap}

/* --- */

.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--navy);color:#fff;padding:10px 16px;border-radius:0 0 6px 0;font-family:var(--f-text);font-size:14px;text-decoration:none}.skip-link:focus{left:0}

/* --- */


/* ── Page frame: 16px fixed hairline + corner ticks ── */
.di-frame{position:fixed;inset:0;z-index:998;pointer-events:none;border:1px solid var(--hair-2)}
.di-frame::before,.di-frame::after,.di-frame i::before,.di-frame i::after{content:"";position:absolute;width:14px;height:14px;border-color:var(--hair-3)}
.di-frame::before{top:16px;left:16px;border-top:1px solid var(--hair-3);border-left:1px solid var(--hair-3)}
.di-frame::after{top:16px;right:16px;border-top:1px solid var(--hair-3);border-right:1px solid var(--hair-3)}
.di-frame i::before{bottom:16px;left:16px;border-bottom:1px solid var(--hair-3);border-left:1px solid var(--hair-3)}
.di-frame i::after{bottom:16px;right:16px;border-bottom:1px solid var(--hair-3);border-right:1px solid var(--hair-3)}
.di-frame{transform:scaleX(1);transform-origin:center}
@media(max-width:1100px){.di-frame{display:none}}

/* ── Rails: left section index, right RUO marquee ── */
.di-rail{position:fixed;top:0;bottom:0;z-index:997;width:56px;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.di-rail-l{left:0;justify-content:center;gap:22px}
.di-rail-r{right:0;justify-content:center}
.di-rail-tick{width:16px;height:1px;background:var(--hair-2);transition:background var(--di-dur) var(--di-ease),width var(--di-dur) var(--di-ease);pointer-events:auto;display:block;padding:8px 0;background-clip:content-box}
.di-rail-tick.active{width:26px;background:var(--di-teal)}
.di-rail-marquee{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--f-mono);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--text-hi);opacity:.35;white-space:nowrap}
@media(max-width:1100px){.di-rail{display:none}}

/* ── HUD header: hairline chrome, transparent→blur on scroll ── */
.promo-bar{background:var(--canvas-deep);color:var(--text-mono-di);font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:8px 16px;border-bottom:1px solid var(--hair-1);line-height:1.4;overflow:hidden;position:relative}
.promo-bar a{color:var(--di-teal);text-decoration:none;font-weight:500;white-space:nowrap}
.promo-bar a:hover{text-decoration:underline}
.promo-bar .pb-dot{color:var(--di-teal)}
@media(max-width:520px){.promo-bar{font-size:10px;padding:7px 12px;letter-spacing:.08em}}
.site-header{background:var(--di-glass);border-bottom:1px solid var(--hair-1);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);transition:background var(--di-dur) var(--di-ease),-webkit-backdrop-filter var(--di-dur) var(--di-ease),backdrop-filter var(--di-dur) var(--di-ease),border-color var(--di-dur) var(--di-ease)}
.site-header.di-scrolled{background:var(--di-glass-fallback);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--hair-2)}
.site-header .header-nav a,.site-header .header-nav .nav-contact-pill .cart-btn-text,.site-header .cart-btn .cart-btn-text{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-body-di)}
.site-header .header-nav a:hover{color:var(--text-hi)}
.site-header .cart-btn{color:var(--text-hi)}


/* --- */


.hero{background:var(--canvas);color:var(--text-hi);position:relative;overflow:hidden;padding:0}
.hero::before{display:none}
.hero-grid-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,var(--grid-line) 0 1px,transparent 1px 64px),
                    repeating-linear-gradient(0deg,var(--grid-line) 0 1px,transparent 1px 64px)}
.hero-reg{position:absolute;width:7px;height:7px;background:var(--di-red);z-index:2;pointer-events:none}
.hero-reg-1{top:64px;left:64px}.hero-reg-2{top:64px;right:64px}.hero-reg-3{bottom:128px;left:64px}
.hero-reg-4{bottom:64px;right:128px}.hero-reg-5{top:50%;left:64px}
@media(max-width:900px){.hero-reg-5,.hero-reg-4{display:none}}

.hero-inner{position:relative;z-index:3;max-width:var(--wrap);margin:0 auto;padding:clamp(40px,5vw,68px) 40px clamp(44px,5vw,72px);min-height:clamp(600px,84vh,880px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start !important}
.hero-kicker{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mono-di);margin:0 0 clamp(18px,2.4vw,30px)}
.hero-kicker-sq{width:9px;height:9px;background:var(--di-red);flex-shrink:0}

/* word band: giant centred word, the vial rises through the centre gap */
.hero-word-wrap{position:relative;width:100%;display:flex;justify-content:center;align-items:flex-end;margin-bottom:clamp(30px,4vw,52px)}
.hero-word{position:relative;z-index:2;display:inline-flex;flex-wrap:nowrap;align-items:baseline;font-family:var(--f-doto);font-weight:900;font-size:min(12.4vw,164px);line-height:.9;letter-spacing:-.02em;color:var(--ink-display,#1A1A1A);text-transform:uppercase;white-space:nowrap}
/* The word is split in two spans only so the vial has something to sit against — the
   gap must read as LETTER-tracking, never as a word-space, or the wordmark says
   "RETATR UTIDE" (izzy, 2026-07-15: "dont space retatrutide like this, it looks off").
   1.05em was a full space. Keep this at letter-scale and let the vial overlap. */
/* .hero-word-gap removed with the RETATR|UTIDE split: the wordmark is a single
   span now and the vial sits ABOVE it, so nothing needs a gap to rise through. */
/* --vial-h is the SINGLE source of truth for the vial's size, and .hero-word-wrap's
   padding-top is DERIVED from it (see the white-clinical-fixes block) — that padding IS
   the vial's room, which is what keeps it off the wordmark at every viewport. Never
   restate the number in two places: a hardcoded size here and a hardcoded mirror there
   WILL drift, and the failure is silent (the vial quietly lands on the letters again).
   Height-driven, not width-driven: the art is trimmed to its content (333x802), so
   height is the dimension the composition actually depends on. */
.hero-vial{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:1;height:var(--vial-h);width:auto;pointer-events:none;will-change:transform}  /* NO mix-blend-mode: .hero-inner (z-index:3) forms a stacking context, so a blend never reaches the .hero canvas -- it just leaves a white box. The art carries real alpha instead. */
.hero-vial img{height:100%;width:auto;display:block}
@media(prefers-reduced-motion:no-preference){
  .hero-vial{animation:hero-vial-breathe 13s ease-in-out infinite alternate}
}
/* breathe lifts AWAY from the word (translateY is negative), so it can only ever
   increase the gap — scale(1.04) grows ~2% downward, net still upward. */
@keyframes hero-vial-breathe{0%{transform:translateX(-50%) scale(1)}100%{transform:translateX(-50%) scale(1.04) translateY(-8px)}}
@media(max-width:760px){.hero-word{font-size:15vw;line-height:.94}}

.hero-body-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;align-items:flex-start;width:100%}
.hero-copy-col{max-width:44ch}
.hero-body{font-family:var(--f-text);font-size:15px;line-height:1.65;color:var(--text-body-di);margin-bottom:24px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-cta-primary{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:#fff;background:var(--di-red);border:1px solid var(--di-red);border-radius:2px;padding:13px 22px;text-decoration:none;display:inline-flex;align-items:center;transition:background var(--dur-base) var(--ease-out)}
.hero-cta-primary:hover{background:#D1433E}
.hero-cta-ghost{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-hi);text-decoration:none;border-bottom:1px solid var(--hair-3);padding-bottom:2px}
.hero-cta-ghost:hover{border-bottom-color:var(--di-teal)}

/* specimen-thumb component removed with its markup (izzy 2026-07-15: "get rid of
   the coa, doesnt look right there"). Its stylesheet lived here. */

.hero-trust-rail{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(36px,5vw,56px);font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--di-teal);text-decoration:none;border-bottom:1px solid rgba(12,110,120,.35)}
.hero-trust-rail:hover{border-bottom-color:var(--di-teal)}
.hero-trust-rail::before{content:"";width:6px;height:6px;background:var(--di-teal)}

/* dark shell (retired): header/cat-nav now inherit the base white-clinical rules below */
.site-header{background:var(--di-glass-fallback);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--hair-1)}
.cat-nav{background:var(--surface-1);border-bottom:1px solid var(--hair-1)}
.cat-nav-link{color:var(--text-mono-di) !important}
.cat-nav-link:hover{color:var(--text-hi) !important}
.cat-nav-link.active{color:var(--text-hi) !important;border-bottom-color:var(--di-teal) !important}

@media (prefers-reduced-motion: reduce){
  .hero-vial{opacity:1 !important;transform:translateX(-50%) !important;animation:none !important}
  .di-frame,.di-rail-tick,.di-rail-marquee{opacity:1 !important;transform:none !important;animation:none !important;clip-path:inset(0) !important}
}
html.di-motion-fallback .di-frame,html.di-motion-fallback .di-rail-tick,html.di-motion-fallback .di-rail-marquee{opacity:1 !important;transform:none !important}


/* --- */


.brand-band{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;min-height:clamp(300px,40vw,500px);display:flex;align-items:center;background-size:cover;background-position:center;overflow:hidden}
.brand-band::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,20,36,.9) 0%,rgba(11,20,36,.64) 52%,rgba(11,20,36,.34) 100%)}
.brand-band .bb-inner{position:relative;max-width:var(--wrap);margin:0 auto;padding:clamp(40px,7vw,80px) clamp(20px,5vw,64px);width:100%}
.brand-band h2{font-family:'STIX Two Text',Georgia,serif;font-size:clamp(26px,3.8vw,44px);font-weight:600;line-height:1.06;margin:0 0 12px;max-width:16ch;color:#fff}
.brand-band p{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:clamp(14px,1.5vw,18px);line-height:1.5;max-width:46ch;margin:0;color:rgba(255,255,255,.88)}
@media(max-width:760px){.brand-band::before{background:linear-gradient(180deg,rgba(11,20,36,.74),rgba(11,20,36,.82))}}
.brand-band img.bb-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;will-change:transform}
/* the bands are REAL product photography now — motion is a slow drift on the still
   (transform only, GPU-composited) instead of AI-generated video. */
@media(prefers-reduced-motion:no-preference){
  .brand-band img.bb-still{animation:bb-drift 26s ease-in-out infinite alternate}
}
@keyframes bb-drift{0%{transform:scale(1.04)}100%{transform:scale(1.11) translateX(-1.2%)}}
.brand-band::before{z-index:1}
.brand-band .bb-inner{z-index:2}
/* the still shows at EVERY width — a real photo has no bandwidth excuse to hide */


/* --- */


@media (prefers-reduced-motion: reduce){ .brand-band img.bb-still{animation:none} }


/* --- */


.cat-tiles-section{background:var(--paper);padding:clamp(56px,7vw,92px) 0 clamp(16px,2vw,32px)}
.cat-tiles-inner{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,32px)}
.cat-tiles-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;color:var(--accent);margin-bottom:14px}
.cat-tiles-section h2{margin-bottom:8px}
.cat-tiles-lead{font-family:'IBM Plex Sans',system-ui,sans-serif;color:var(--body);font-size:15px;line-height:1.5;margin-bottom:28px;max-width:56ch}
.cat-tiles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.cat-tiles-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cat-tiles-grid{grid-template-columns:1fr}}
.cat-tile{position:relative;display:block;background:var(--surface);border:1px solid var(--hairline);border-radius:12px;padding:22px 44px 20px 22px;text-decoration:none;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.cat-tile:hover{transform:translateY(-5px);box-shadow:0 20px 42px -22px rgba(11,20,36,.28);border-color:rgba(14,140,130,.45)}
.ct-name{display:block;font-family:'STIX Two Text',Georgia,serif;font-size:20px;font-weight:600;color:var(--ink);margin-bottom:6px}
.ct-sub{display:block;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:13.5px;line-height:1.45;color:var(--body)}
.ct-arrow{position:absolute;top:20px;right:20px;color:var(--accent);font-size:18px;transition:transform .3s ease}
.cat-tile:hover .ct-arrow{transform:translateX(3px)}


/* --- */


  /* MUST share the one reading edge. .cat-section-header and .live-grid are 1200px centred, so
     a full-bleed block here would sit 36px left of everything above it — too small to read as
     intentional, too large to read as identical, which is the near-miss that produces "something
     feels off and I can't point at it". Derive from --wrap; never restate 1200. */
  /* Every value here is the SAME primitive the product cards use — .live-card-name's display
     serif, .live-card-blurb's 12.5px text, .price-row-amount's MONO 16px, .live-card's --hair-2
     border. The layout is deliberately different (a list, not cards, because a $4 box of swabs
     must not carry a $195 kit's visual weight) but the design language must be identical:
     clearly-different layout is fine, *almost*-the-same tokens is what reads as messy.
     The Add button REUSES .price-row-btn rather than restating it, so it stays the one red CTA.
     Corner radius comes from the global sharp-corner rule (~:7495) which .labsup is listed in —
     do not hardcode a radius here. */
  /* Sits INSIDE .live-grid, filling the 2 columns the single bac-water card leaves empty.
     .live-grid is 3 cols, 2 below 900px, 1 below 600px — span 2 is correct for BOTH the 3-col
     and 2-col cases (full-width row under the card at 2-col), and must drop to auto at 1 col or
     the span would manufacture a phantom second column and squash the page.
     align-self:start so the list keeps its natural height instead of stretching to the card. */
  .labsup-note{max-width:var(--wrap,1200px);margin:10px auto 0;font:500 13px/1.5 var(--f-text),sans-serif;color:var(--body)}
  .labsup{grid-column:span 2;align-self:start;
    border:1px solid var(--hair-2);background:var(--surface);overflow:hidden}
  @media(max-width:600px){ .labsup{grid-column:auto} }
  /* Grid items stretch to the tallest sibling by default. With 13 rows the list is far taller
     than the bac-water card, so the card was being stretched to match — .live-card is a flex
     column, so the extra height opened a dead white gap in its middle and pushed its price rows
     to the very bottom. Scoped to this section only: elsewhere equal-height cards are correct. */
  #cat-essentials .live-grid{align-items:start}
  .labsup-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-top:1px solid var(--hair-1)}
  .labsup-row:first-child{border-top:0}
  /* The shots are normalised to a pure-white ground by scripts/normalise_supply_images.py, so
     no border or panel here — the image sits directly on the white row and the product appears
     to float, exactly like the product cards above. object-fit:contain so a flat-lay and an
     upright bottle both sit inside the same square without cropping. */
  /* No tile and no border: the shots are normalised to a pure-white ground, so the product sits
     directly on the white row and appears to float, same as the cards above. A grey tile was
     tried and reverted — the image's own white background fills it, producing a grey frame
     around a white square. object-fit:contain so a flat-lay and an upright bottle both fit the
     same square without cropping.
     ⚠ KNOWN WEAKNESS: these products are clear/white plastic photographed on white, so they
     carry very little visual mass at this size. The real fix is at generation time (a defined
     contact shadow), not in CSS — three CSS attempts (56px, 84px, grey tile) all failed. */
  .labsup-img{flex:none;width:96px;height:96px;object-fit:contain;object-position:center}
  @media(max-width:560px){ .labsup-img{width:72px;height:72px} }
  .labsup-nm{flex:1 1 auto;min-width:0;font-family:var(--f-display);font-size:17px;font-weight:500;
    letter-spacing:-.005em;line-height:1.2;color:var(--ink)}
  /* The row name is the link. Inherits .labsup-nm typography so it reads as the product
     name, not as a blue link glued into a price row. */
  .labsup-link{color:inherit;text-decoration:none}
  .labsup-link:hover{color:var(--di-teal);text-decoration:underline;text-underline-offset:3px}
  .labsup-link:focus-visible{outline:2px solid var(--di-teal);outline-offset:3px}
  .labsup-nm span{display:block;margin-top:3px;font-family:var(--f-text);font-size:12.5px;font-weight:400;
    line-height:1.45;letter-spacing:0;color:var(--body)}
  /* margin-left:auto here absorbs the free space, so the price and the button sit together on
     the right — .price-row-btn already carries its own margin-left:auto and gets 0 extra. */
  /* --text-hi, NOT --navy. .price-row-amount's BASE rule says --navy (retired), but the fix
     layer overrides it to --text-hi with !important — reading the base declaration alone gives
     you the colour that was abandoned. Measure the live DOM, never trust the first rule found. */
  .labsup-pr{flex:none;margin-left:auto;font-family:var(--f-mono);font-size:16px;font-weight:500;
    color:var(--text-hi);font-variant-numeric:tabular-nums}
  @media(max-width:560px){
    /* name on its own line, then price + Add on the next. Tighter padding/gap here because the
       wrap already adds a whole line of height — the desktop 14px would leave a $4 item sitting
       in a 122px-tall row. */
    .labsup-row{flex-wrap:wrap;gap:6px 12px;padding:12px 16px}
    .labsup-nm{flex:1 1 100%}
  }
  

/* --- */


.value-band{background:#0E2038;color:#fff;padding:clamp(48px,6vw,80px) 0}
.value-band-inner{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,32px);display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media(max-width:820px){.value-band-inner{grid-template-columns:repeat(2,1fr);gap:26px}}
@media(max-width:480px){.value-band-inner{grid-template-columns:1fr}}
.value-col h3{font-family:'STIX Two Text',Georgia,serif;font-size:19px;font-weight:600;margin:0 0 6px;color:#fff}
.value-col h3::before{content:"";display:block;width:26px;height:2px;background:#2BB9C9;margin-bottom:12px;border-radius:2px}
.value-col p{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:14px;line-height:1.5;color:rgba(255,255,255,.72);margin:0}


/* --- */


.cart-drawer-root{position:fixed;inset:0;z-index:9990;pointer-events:none;overflow:hidden}
.cart-drawer-root.open{pointer-events:auto}
.cart-drawer-overlay{position:absolute;inset:0;background:rgba(8,15,26,.72);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s}
.cart-drawer-root.open .cart-drawer-overlay{opacity:1;visibility:visible;transition:opacity .28s ease}
.cart-drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--surface);display:flex;flex-direction:column;box-shadow:-30px 0 80px -20px rgba(0,0,0,.4);transform:translateX(100%);visibility:hidden;transition:transform .32s cubic-bezier(.22,1,.36,1),visibility 0s linear .32s}
.cart-drawer-root.open .cart-drawer-panel{transform:translateX(0);visibility:visible;transition:transform .32s cubic-bezier(.22,1,.36,1)}
.cart-drawer-head{display:flex;justify-content:flex-end;align-items:center;padding:14px 14px 0;flex-shrink:0}
.cart-drawer-close{border:none;background:transparent;font-size:24px;line-height:1;cursor:pointer;color:var(--ink);padding:6px 10px;border-radius:8px}
.cart-drawer-close:hover{background:rgba(14,32,56,.08)}
.cart-drawer-close:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.cart-drawer-body{overflow-y:auto;padding:4px 24px 28px;flex:1}
#cart.cart-drawer-panel .cart-items{grid-column:auto}
#cart.cart-drawer-panel .cart-summary{grid-column:auto;position:static;top:auto;margin-top:28px}
#cart.cart-drawer-panel .cart-section-title{font-size:22px;margin-bottom:20px}
@media (max-width:480px){ .cart-drawer-panel{width:100vw} }
@media (prefers-reduced-motion: reduce){ .cart-drawer-overlay,.cart-drawer-panel{transition:none !important} }


/* --- */


      .coa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px;margin:22px 0 30px}
      .coa-card{display:flex;flex-direction:column;gap:11px;padding:18px;border-radius:6px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);text-decoration:none;transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s,box-shadow .2s}
      .coa-card:hover{transform:translateY(-3px);border-color:rgba(43,185,201,.55);box-shadow:0 14px 34px rgba(0,0,0,.28)}
      .coa-card-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
      .coa-purity{font-family:var(--f-mono,monospace);font-size:21px;font-weight:600;color:#7FE3D6;letter-spacing:-.01em}
      .coa-lab{font-family:var(--f-mono,monospace);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.5);text-align:right;line-height:1.3}
      .coa-prod{font-family:var(--f-display,Georgia,serif);font-size:18px;color:#fff;line-height:1.2}
      .coa-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:11px;border-top:1px solid rgba(255,255,255,.09)}
      .coa-client{font-family:var(--f-mono,monospace);font-size:11px;color:#7FE3D6;letter-spacing:.03em}
      .coa-view{font-size:12px;color:rgba(255,255,255,.62);transition:color .18s}
      .coa-card:hover .coa-view{color:#fff}
      .coa-note{font-size:13px;color:rgba(255,255,255,.5);max-width:64ch;margin-top:6px}
      .coa-note strong{color:rgba(255,255,255,.78);font-weight:600}
    

/* --- */


.authority-strip{background:var(--paper);padding:clamp(44px,5vw,72px) 0;border-top:1px solid var(--hairline)}
.authority-inner{max-width:1100px;margin:0 auto;padding:0 clamp(20px,5vw,32px);text-align:center}
.authority-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--accent);margin-bottom:12px}
.authority-strip h2{font-family:'STIX Two Text',Georgia,serif;font-size:clamp(24px,3vw,34px);font-weight:600;color:var(--ink);margin:0 0 8px}
.authority-lead{font-family:'IBM Plex Sans',system-ui,sans-serif;color:var(--body);font-size:15px;margin:0 auto 28px;max-width:52ch}
.authority-labs{display:flex;align-items:center;justify-content:center;gap:clamp(28px,5vw,64px);flex-wrap:wrap;margin-bottom:24px}
.lab-mark{font-family:'STIX Two Text',Georgia,serif;font-size:clamp(18px,2.4vw,24px);font-weight:600;color:var(--ink-soft)}
.lab-mark span{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;color:var(--accent);font-weight:500;margin-top:4px}
.authority-cta{font-family:'IBM Plex Sans',system-ui,sans-serif;font-weight:600;color:var(--accent);text-decoration:none}
.authority-cta:hover{text-decoration:underline}


/* --- */

#reviews-grid .rs-photo,#reviews-grid .rs-cap{opacity:1 !important;transform:none !important}

/* --- */


      .reviews-section .reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px;align-items:start}
      .rev-shot{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(17,36,59,.09);border-radius:6px;box-shadow:0 6px 22px rgba(17,36,59,.08);overflow:hidden}
      .rs-head{display:flex;align-items:center;gap:10px;padding:11px 13px;background:linear-gradient(180deg,#fbfaf7,#f3efe8);border-bottom:1px solid rgba(17,36,59,.06)}
      .rs-who{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
      .rs-name{display:flex;align-items:center;gap:5px;font-family:var(--f-text);font-weight:600;font-size:13.5px;color:var(--ink,#11243B)}
      .rs-status{font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:#16A38C;margin-top:2px}
      .rs-photo{position:relative;aspect-ratio:4/3;background:#e7e2da;overflow:hidden}
      .rs-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
      .rev-shot:hover .rs-photo img{transform:scale(1.04)}
      .rs-cap{padding:12px 13px 14px}
      .rev-shot:not(:has(.rs-photo)) .rs-cap{padding-top:4px}
      .rs-text{font-family:var(--f-text);font-size:13.5px;line-height:1.5;color:#23303d;margin:0}
      .rs-meta{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:8px;font-family:var(--f-mono);font-size:10px;color:#93a0ac}
      .rev-extra{display:none}
      .reviews-section .reviews-grid.show-all .rev-extra{display:flex}
      .rev-more-wrap{display:flex;justify-content:center;margin-top:28px}
      .rev-more-btn{font-family:var(--f-mono,monospace);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink,#11243B);background:#fff;border:1px solid rgba(17,36,59,.22);border-radius:999px;padding:13px 28px;cursor:pointer;transition:all .2s cubic-bezier(.2,.7,.3,1)}
      .rev-more-btn:hover{border-color:var(--teal,#2BB9C9);color:#1E9E94;transform:translateY(-1px);box-shadow:0 8px 20px rgba(17,36,59,.1)}
      @media(max-width:980px){.reviews-section .reviews-grid{grid-template-columns:repeat(2,1fr)}}
      @media(max-width:620px){.reviews-section .reviews-grid{grid-template-columns:1fr}}
      .rev-photos-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin:44px 0 14px}
      .reviews-section .media-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:12px}
      .reviews-section .media-tile{position:relative;margin:0;border-radius:6px;overflow:hidden;aspect-ratio:1/1;background:#e7e2da;box-shadow:0 6px 20px rgba(17,36,59,.08);border:1px solid rgba(17,36,59,.06)}
      .reviews-section .media-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
      .reviews-section .media-tile:hover img{transform:scale(1.045)}
      .reviews-section .media-tile.feature{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
      @media(max-width:760px){.reviews-section .media-grid{grid-template-columns:repeat(2,1fr)}.reviews-section .media-tile.feature{grid-column:span 2;grid-row:auto;aspect-ratio:16/10}}
    

/* --- */


        .cu-form { grid-column: 1 / -1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 28px; }
        .cu-form .contact-card-title { margin-bottom: 4px; }
        .cu-sub { font-family: var(--f-text); font-size: 13px; color: rgba(255,255,255,0.55); margin: 0 0 18px; }
        .cu-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
        .cu-form label { display: block; font-family: var(--f-text); font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.75); margin: 0 0 5px; }
        .cu-form label .cu-opt { font-weight: 400; color: rgba(255,255,255,0.4); }
        .cu-form input, .cu-form textarea { width: 100%; box-sizing: border-box; padding: 11px 13px; font: 14px/1.5 var(--f-text); color: #fff; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; }
        .cu-form input::placeholder, .cu-form textarea::placeholder { color: rgba(255,255,255,0.35); }
        .cu-form input:focus, .cu-form textarea:focus { outline: none; border-color: var(--teal-bright, #2BB9C9); }
        .cu-form textarea { min-height: 96px; resize: vertical; margin-top: 14px; }
        .cu-send-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
        .cu-send { padding: 12px 26px; border: 0; border-radius: 8px; background: var(--teal-bright, #2BB9C9); color: #0B1B2E; font: 600 14px var(--f-text); cursor: pointer; }
        .cu-send:disabled { opacity: .6; cursor: default; }
        .cu-note { font-family: var(--f-text); font-size: 12.5px; color: rgba(255,255,255,0.45); }
        .cu-err { color: #ffb3a7; font-family: var(--f-text); font-size: 13px; font-weight: 500; }
        .cu-hp { position: absolute; left: -6000px; top: -6000px; }
        .cu-link { font-family: var(--f-mono); font-size: 13px; word-break: break-all; background: rgba(255,255,255,0.06); border: 1px dashed rgba(255,255,255,0.25); border-radius: 8px; padding: 12px 14px; margin-top: 12px; color: #8FD4D9; display: block; }
        @media (max-width: 820px) { .cu-grid { grid-template-columns: 1fr; } }
      

/* --- */


/* ═══ BBA BRAND WEAVE + INSTRUMENT PASS (2026-07-13) ═══════════════
   Red = the brand signature (spark glyph, lockup middle-B, hero ember)
   and NEVER a UI semantic: no red on COA/verify links, lot codes,
   prices, stock badges, CTAs, cart/checkout, or errors. Teal keeps
   every functional job. Corners/seams/labels use measurement language:
   the page is documentation, not a brochure. */

/* ── spark + BBA eyebrow indexing ─────────────────────────── */
.bba-idx{font-family:var(--f-mono);color:var(--teal);letter-spacing:.1em;display:inline-flex;align-items:center;margin-right:10px;flex-shrink:0}
.bba-idx::before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 L14.4 9.6 L24 12 L14.4 14.4 L12 24 L9.6 14.4 L0 12 L9.6 9.6 Z' fill='%23E9504B'/%3E%3C/svg%3E") center/contain no-repeat}
.cat-tiles-eyebrow .bba-idx{margin-right:12px}
.cat-tiles-eyebrow{display:inline-flex;align-items:center}

/* promo bar: dark-instrument mono ticker — teal bullet only, no red (accent budget spent on hero slab) */
.promo-bar .pb-dot{display:inline}

/* footer lockup — logo rebuilt in live text */
.footer-lockup{display:flex;flex-direction:column;gap:7px;margin-bottom:4px}
.fl-bba{font-family:var(--f-text);font-weight:700;font-size:36px;line-height:1;letter-spacing:.02em;color:#fff}
.fl-bba .fl-red{color:var(--brand-red);position:relative;font-weight:700}
.fl-spark{position:absolute;right:-7px;top:40%;width:11px;height:11px;fill:var(--brand-red)}
.fl-sub{font-family:var(--f-mono);font-size:9.5px;font-weight:500;letter-spacing:.42em;text-transform:uppercase;color:rgba(244,242,238,.68)}

/* ── documentary corner system ────────────────────────────── */
.product-card,.cat-tile,.review-card,.coa-card,.live-card,.labsup,.faq-item,.contact-card,.value-col,.buy-box,.cart-summary,.hp-links a,.size-pill,.price-row-tag,.btn,.mol-band-link,.ship-pill{border-radius:2px !important}
.hero-proof,.hero-proof::after{border-radius:3px}
input,select,textarea{border-radius:2px}
.product-card,.cat-tile{position:relative}
.product-card::after,.cat-tile::after{content:"";position:absolute;top:-1px;right:-1px;width:9px;height:9px;border-top:1px solid var(--teal);border-right:1px solid var(--teal);pointer-events:none}

/* ── graticule seams — chart-paper rulers at section boundaries ── */
.cat-tiles-section,.reviews-section{position:relative}
.cat-tiles-section::before,.reviews-section::before{content:"";position:absolute;top:0;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,rgba(12,110,120,.26) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,rgba(12,110,120,.48) 0 1px,transparent 1px 96px)}
.mol-band::after{content:"";position:absolute;top:0;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,rgba(43,185,201,.30) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,rgba(43,185,201,.55) 0 1px,transparent 1px 96px)}

/* ── texture: grain on dark fields, lab-grid on light ─────── */
.trust-strip,.site-footer{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
/* The graph paper is dropped from .full-catalog-section: its 32px cells drew
   boundaries that did not align with the price rows, so the section showed TWO
   grids at once -- the rows own dividers now, and the paper only fought them.
   Kept on the browse sections, where nothing competes with it. */
.catalog,.catalog-section,.cat-tiles-section{background-image:linear-gradient(rgba(13,33,55,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(13,33,55,.032) 1px,transparent 1px);background-size:32px 32px}
.full-catalog-section,#cat-full .fc-rows{background-image:none !important}
.catalog-grid{align-items:start}

/* ── retire the constellation band → calibrated graticule ─── */
.mol-band{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(rgba(43,185,201,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(43,185,201,.04) 1px,transparent 1px),linear-gradient(rgba(43,185,201,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(43,185,201,.08) 1px,transparent 1px),radial-gradient(ellipse at 50% 40%,rgba(43,185,201,.10),transparent 65%) var(--navy-deep) !important;background-size:140px 140px,48px 48px,48px 48px,192px 192px,192px 192px,100% 100% !important}

/* ── trust strip: icons → mono indices, asymmetric grid ───── */
.trust-item>svg{display:none}
.trust-strip-inner{counter-reset:trust}
.trust-item{counter-increment:trust}
.trust-item::before{content:"0" counter(trust);font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--teal-bright);margin-bottom:6px}
@media(min-width:761px){.trust-strip-inner{grid-template-columns:1.25fr 1fr 1fr 1.1fr}}

/* ── reviews: evidence ledger, not testimonial cards ──────── */
.review-card{box-shadow:none !important;border:1px solid var(--hairline)}
.review-card:hover{box-shadow:none !important}
.review-card img{filter:saturate(.92) contrast(1.03)}
@media(min-width:761px){.reviews-grid>*:nth-child(3n+2){margin-top:28px}}

/* dose selector: pill → instrument tab */
.size-pill{border-bottom-width:2px}


/* --- */


/* MOBILE OVERHAUL (agent-team audit 2026-07-03). Canonical phone breakpoint = 760px; desktop (>760) untouched. */

/* P0 — horizontal-overflow insurance (all widths).
   Use overflow-x: clip, NOT hidden. `hidden` on html/body makes them a scroll
   container and silently breaks the sticky header (position:sticky stops holding).
   `clip` prevents horizontal scroll WITHOUT creating a scroll container, so the
   header stays pinned. First line is a fallback for pre-2022 browsers. */
html, body { overflow-x: hidden; overflow-x: clip; }
img, video, canvas { max-width: 100%; }
.mono, .btc-address, .copy-field-val, .order-code { overflow-wrap: anywhere; }

@media (max-width: 760px) {
  /* vertical rhythm — the biggest declutter win (was 88/128/56) */
  :root { --space-section-xl: 72px; --space-section: 52px; --space-section-tight: 40px; }
  /* reclaim side padding 32 -> 20 on content containers */
  .grid, .hero-inner, .how-inner, .shipping-inner, .lab-inner,
  .reviews-inner, .about-inner, .faq-inner, .contact-inner,
  .catalog-inner, .full-catalog-inner, .footer-inner, .media-inner,
  .cart-inner, .checkout-inner, .trust-strip-inner { padding-left: 20px; padding-right: 20px; }
  .reviews-section, .lab-section { padding-left: 20px; padding-right: 20px; }

  /* header: tighter gutters, even controls, 44px tap targets */
  .header-inner { padding: 0 16px; gap: 16px; }
  .hamburger-btn, #mobile-cart-btn { padding: 11px; margin-left: 0; }
  #mobile-cart-btn { margin-left: auto; }

  /* category sub-nav -> clean horizontal scroll strip (fixes clipped "Longevity &") */
  .cat-nav-inner { padding: 0 16px; gap: 2px; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; }
  .cat-nav-inner::-webkit-scrollbar { display: none; }
  .cat-nav-link { flex-shrink: 0; scroll-snap-align: start; padding: 13px 14px 12px; font-size: 12.5px; }
  .cat-nav-link:last-child { padding-right: 26px; }

  /* hero: headline fits every phone; calmer spacing */
  .hero-h1 { margin-bottom: 14px; }
  .hero-h1.display-h1 { font-size: clamp(30px, 8.2vw, 40px); line-height: 1.08; }
  .hero-sub { font-size: 15.5px; line-height: 1.6; max-width: none; margin-bottom: 24px; }
  .hero-actions { gap: 12px; }

  /* in-stock product cards: 1 column, lighter rhythm, 44px targets */
  .live-grid { grid-template-columns: 1fr; gap: 16px; }
  .size-pills { margin-bottom: 14px; gap: 8px; flex-wrap: wrap; }
  .size-pill { padding: 11px 16px; font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; }
  .live-card-meta { padding: 14px 16px 16px; }
  .price-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 10px; row-gap: 4px; }
  .price-row-label { min-width: 0; }
  .price-row-amount { justify-self: start; }
  .price-row-tag { grid-column: 1 / 3; justify-self: start; }
  .price-row-btn { grid-column: 3; grid-row: 1 / span 2; margin-left: 0; align-self: center; padding: 11px 16px; font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .price-row-na { grid-column: 1 / -1; }

  /* cart / checkout */
  .copy-field { padding: 10px 12px; gap: 10px; }
  .copy-field-val, .btc-address { flex: 1 1 100%; }
  .copy-btn { flex: 0 0 auto; margin-left: auto; }
  .checkbox-row { gap: 12px; padding: 4px 0; }
  .checkbox-row input[type="checkbox"] { width: 20px; height: 20px; margin-top: 1px; }
  .cart-line { grid-template-columns: 52px 1fr auto; gap: 4px 12px; padding: 16px 0; }
  .cart-line-image { width: 52px; height: 52px; }
  .cart-line .qty-control { flex-wrap: wrap; gap: 8px 10px; }
  .cart-line .qty-control .btn-sm { margin-left: 0 !important; }

  /* FULL-CATALOG price-list rows: single-dose = 1 clean line; multi-dose = 2 lines (dose select on its own row) */
  #cat-full .fc-row, #cat-full .fc-row:nth-child(odd), #cat-full .fc-row:nth-child(even) {
    display: grid !important; align-items: center !important; column-gap: 12px !important; row-gap: 10px !important;
    padding: 14px 4px !important;
    grid-template-columns: 1fr auto auto !important; grid-template-areas: "name price add" !important;
  }
  #cat-full .fc-row .fc-name { grid-area: name !important; flex: none !important; min-width: 0; align-self: center !important; }
  #cat-full .fc-row .fc-price { grid-area: price !important; flex: none !important; justify-self: end !important; min-width: 0 !important; align-self: center !important; }
  #cat-full .fc-row .fc-add-btn { grid-area: add !important; justify-self: end !important; align-self: center !important; min-height: 44px !important; padding: 10px 20px !important; font-size: 13px !important; }
  #cat-full .fc-row.fc-row--multi { grid-template-columns: 1fr auto !important; grid-template-areas: "name price" "dose add" !important; }
  #cat-full .fc-row.fc-row--multi .fc-dose { grid-area: dose !important; flex: none !important; width: 100% !important; max-width: 220px !important; min-height: 44px !important; font-size: 16px !important; padding: 8px 10px !important; }
  #cat-full .fc-row.fc-row--multi .fc-dose-tag { display: none !important; }
}

@media (max-width: 600px) {
  .process-strip { justify-content: space-between; gap: 8px; }
  .process-arrow { display: none; }
  .process-step { flex: 1; }
  .payment-instructions { padding: 18px 16px; }
  .pay-step { gap: 8px; }
  .btc-buy-summary { padding: 14px; }
}

@media (max-width: 430px) {
  :root { --space-section: 44px; }
  .grid, .hero-inner, .how-inner, .shipping-inner, .lab-inner,
  .reviews-inner, .about-inner, .faq-inner, .contact-inner,
  .catalog-inner, .full-catalog-inner, .footer-inner, .media-inner,
  .cart-inner, .checkout-inner, .trust-strip-inner,
  .reviews-section, .lab-section { padding-left: 16px; padding-right: 16px; }
  .hero-h1 br { display: none; }
}


/* --- */


.live-card-image{overflow:hidden}
@media (prefers-reduced-motion: no-preference){
  .live-card{transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s cubic-bezier(.2,.7,.2,1)}
  .live-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px -22px rgba(11,20,36,.5)}
  .live-card-image img{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
  .live-card:hover .live-card-image img{transform:scale(1.045)}
  .site-header{transition:box-shadow .3s ease}
  .site-header.is-scrolled{box-shadow:0 12px 32px -16px rgba(0,0,0,.6)}
}
.live-card-image{position:relative}
.live-card-image::after{content:"US-FL STOCK";position:absolute;top:10px;left:10px;background:rgba(11,20,36,.82);color:#8FD4D9;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.08em;padding:4px 8px;border-radius:5px;z-index:2;pointer-events:none}


/* --- */


.cf-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px}
.cf-modal[hidden]{display:none}
.cf-backdrop{position:absolute;inset:0;background:rgba(8,15,26,.72);backdrop-filter:blur(2px)}
.cf-card{position:relative;width:100%;max-width:560px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;background:#F7F5F1;color:#0E2038;border-radius:18px;box-shadow:0 30px 80px -20px rgba(0,0,0,.55);z-index:1}
.cf-topbar{display:flex;align-items:center;gap:12px;padding:16px 18px 10px}
.cf-progress-track{flex:1;height:5px;border-radius:4px;background:rgba(14,32,56,.12);overflow:hidden}
.cf-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#2BB9C9,#0C6E78);transition:width .35s ease}
.cf-close{border:none;background:transparent;font-size:20px;line-height:1;cursor:pointer;color:#0E2038;padding:4px 8px;border-radius:8px}
.cf-close:hover{background:rgba(14,32,56,.08)}
.cf-back{border:none;background:transparent;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.04em;color:#0C6E78;cursor:pointer;padding:4px 6px}
.cf-back:disabled{visibility:hidden}
.cf-stage{overflow-y:auto;padding:6px 26px 22px;flex:1}
.cf-h{font-family:'STIX Two Text',Georgia,serif;font-weight:600;font-size:26px;line-height:1.18;margin:6px 0 8px}
.cf-sub{font-family:'IBM Plex Sans',sans-serif;font-size:15px;color:rgba(14,32,56,.72);margin:0 0 18px}
.cf-cap{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:rgba(14,32,56,.55);margin:8px 0 0}
.cf-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.cf-tile,.cf-chip,.cf-opt{font-family:'IBM Plex Sans',sans-serif;text-align:left;border:1.5px solid rgba(14,32,56,.16);background:#fff;border-radius:12px;padding:16px 16px;cursor:pointer;font-size:15px;font-weight:600;color:#0E2038;transition:border-color .15s ease,background .15s ease,transform .1s ease}
.cf-tile:hover,.cf-opt:hover{border-color:#2BB9C9;background:rgba(43,185,201,.08)}
.cf-tile:active,.cf-opt:active{transform:scale(.98)}
.cf-tile.active,.cf-opt.active{border-color:#0C6E78;background:rgba(12,110,120,.12)}
.cf-opt{display:block;width:100%;margin-bottom:10px}
.cf-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.cf-chip{border-radius:999px;padding:9px 16px;font-size:13.5px}
.cf-chip.active{border-color:#0C6E78;background:#0C6E78;color:#fff}
.cf-actions{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
.cf-btn{font-family:'IBM Plex Sans',sans-serif;font-weight:700;border-radius:999px;padding:13px 22px;border:none;cursor:pointer;font-size:15px}
.cf-btn-primary{background:linear-gradient(90deg,#2BB9C9,#0C6E78);color:#fff}
.cf-btn-primary:disabled{opacity:.45;cursor:not-allowed}
.cf-btn-ghost{background:transparent;border:1.5px solid rgba(14,32,56,.25);color:#0E2038}
.cf-ruo{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.02em;color:rgba(14,32,56,.5);text-align:center;padding:10px 18px 16px;border-top:1px solid rgba(14,32,56,.08)}
.cf-results{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.cf-result-card{border:1.5px solid rgba(14,32,56,.14);border-radius:12px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:8px;transition:border-color .15s,box-shadow .15s}
.cf-result-card:hover{border-color:rgba(43,185,201,.55);box-shadow:0 6px 18px rgba(16,42,74,.09)}
.cf-result-link{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px}
.cf-result-arrow{color:#0C6E78;font-weight:400}
.cf-result-link:hover .cf-result-name{color:#0C6E78}
.cf-result-name{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:14.5px;line-height:1.3}
.cf-result-price{font-family:'IBM Plex Mono',monospace;font-size:14px;color:#0C6E78}
.cf-result-add{margin-top:auto;font-family:'IBM Plex Sans',sans-serif;font-weight:700;border:none;border-radius:999px;padding:9px 14px;background:#0E2038;color:#fff;cursor:pointer;font-size:13.5px}
.cf-result-add:hover{background:#0C6E78}
.cf-empty{text-align:center;padding:30px 10px}
@media (max-width:760px){
  .cf-modal{padding:0}
  .cf-card{max-width:100%;max-height:100%;height:100%;border-radius:0}
  .cf-tiles,.cf-results{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .cf-progress-fill,.cf-tile,.cf-chip,.cf-opt{transition:none}
}


/* --- */


.rc-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px}
.rc-modal[hidden]{display:none}
.rc-backdrop{position:absolute;inset:0;background:rgba(8,15,26,.72);backdrop-filter:blur(2px)}
.rc-card{position:relative;width:100%;max-width:520px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;background:var(--surface,#FFFFFF);color:var(--ink,#0E2038);border-radius:18px;box-shadow:0 30px 80px -20px rgba(0,0,0,.55);z-index:1}
.rc-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 8px;border-bottom:1px solid var(--hairline,#DDD9D1)}
.rc-topbar-label{font-family:var(--f-mono,'IBM Plex Mono',monospace);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal,#0C6E78)}
.rc-close{border:none;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:var(--ink,#0E2038);padding:4px 8px;border-radius:8px}
.rc-close:hover{background:rgba(14,32,56,.08)}
.rc-stage{overflow-y:auto;padding:18px 26px 22px}
.rc-h{font-family:var(--f-display,'STIX Two Text',Georgia,serif);font-weight:600;font-size:24px;line-height:1.2;margin:4px 0 6px}
.rc-sub{font-family:var(--f-text,'IBM Plex Sans',sans-serif);font-size:14.5px;color:var(--body,#4A5568);margin:0 0 20px}
.rc-field{margin-bottom:16px}
.rc-label{display:block;font-family:var(--f-text,'IBM Plex Sans',sans-serif);font-weight:600;font-size:13.5px;color:var(--ink,#0E2038);margin-bottom:6px}
.rc-hint{margin:6px 2px 0;font-family:var(--f-text,'IBM Plex Sans',sans-serif);font-size:12px;line-height:1.45;color:var(--body,#4A5568)}
.rc-gloss{margin:0 0 12px;font-family:var(--f-text,'IBM Plex Sans',sans-serif);font-size:13px;line-height:1.5;color:var(--ink,#0E2038);background:rgba(43,185,201,.08);border-radius:9px;padding:9px 12px}
.rc-input-wrap{display:flex;align-items:center;border:1.5px solid var(--hairline,#DDD9D1);border-radius:12px;background:var(--cool-panel,#EEF2F6);overflow:hidden;transition:border-color .15s ease}
.rc-input-wrap:focus-within{border-color:var(--teal-bright,#2BB9C9)}
.rc-input{flex:1;min-width:0;border:none;background:transparent;padding:13px 14px;font-family:var(--f-mono,'IBM Plex Mono',monospace);font-size:16px;color:var(--ink,#0E2038)}
.rc-input:focus{outline:none}
.rc-input::-webkit-outer-spin-button,.rc-input::-webkit-inner-spin-button{opacity:.5}
.rc-unit{padding:0 14px;font-family:var(--f-mono,'IBM Plex Mono',monospace);font-size:13px;color:var(--body,#4A5568);white-space:nowrap}
.rc-input-wrap-target{padding-right:4px}
.rc-unit-toggle{display:flex;gap:3px;background:rgba(14,32,56,.06);border-radius:9px;padding:3px;margin:4px}
.rc-unit-btn{font-family:var(--f-text,'IBM Plex Sans',sans-serif);font-weight:700;font-size:12.5px;border:none;background:transparent;color:var(--body,#4A5568);padding:7px 12px;border-radius:7px;cursor:pointer;transition:background .15s ease,color .15s ease}
.rc-unit-btn:hover{color:var(--ink,#0E2038)}
.rc-unit-btn.active{background:var(--surface,#fff);color:var(--teal,#0C6E78);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.rc-results{margin-top:6px;padding:16px;border-radius:14px;background:var(--cool-panel,#EEF2F6);border:1px solid var(--hairline,#D0D8E4)}
.rc-placeholder{margin:0;font-family:var(--f-text,'IBM Plex Sans',sans-serif);font-size:13.5px;color:var(--body,#4A5568);text-align:center;padding:4px 2px}
.rc-placeholder-sm{padding-top:10px}
.rc-result-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:4px 0}
.rc-result-label{font-family:var(--f-text,'IBM Plex Sans',sans-serif);font-size:13px;color:var(--body,#4A5568)}
.rc-result-value{font-family:var(--f-mono,'IBM Plex Mono',monospace);font-size:14.5px;color:var(--ink,#0E2038);font-weight:600;text-align:right}
.rc-result-sub{font-weight:400;color:var(--body,#4A5568);font-size:12px}
.rc-result-divider{height:1px;background:var(--hairline,#D0D8E4);margin:10px 0}
.rc-result-draw{display:flex;flex-direction:column;gap:4px;padding-top:2px}
.rc-draw-label{font-family:var(--f-text,'IBM Plex Sans',sans-serif);font-size:13px;color:var(--body,#4A5568)}
.rc-draw-value{font-family:var(--f-mono,'IBM Plex Mono',monospace);font-size:18px;color:var(--teal,#0C6E78)}
.rc-draw-value strong{color:var(--teal,#0C6E78);font-weight:700}
.rc-note{margin:10px 0 0;font-family:var(--f-text,'IBM Plex Sans',sans-serif);font-size:12px;color:#8A5A12;background:rgba(214,158,46,.14);border-radius:8px;padding:8px 10px}
.rc-ref{margin-top:14px;font-family:var(--f-text,'IBM Plex Sans',sans-serif);font-size:12.5px;color:var(--body,#4A5568);line-height:1.5}
.rc-ref-label{font-family:var(--f-mono,'IBM Plex Mono',monospace);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal,#0C6E78);margin-right:6px}
.rc-disclaimer{margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline,#DDD9D1);font-family:var(--f-text,'IBM Plex Sans',sans-serif);font-size:11.5px;line-height:1.5;color:var(--body,#4A5568)}
.rc-disclaimer strong{color:var(--ink,#0E2038)}
@media (max-width:760px){
  .rc-modal{padding:0}
  .rc-card{max-width:100%;max-height:100%;height:100%;border-radius:0}
  .rc-stage{padding:16px 18px 24px}
}
@media (prefers-reduced-motion:reduce){ .rc-input-wrap,.rc-unit-btn{transition:none} }


/* --- */


/* ============================================================================
   DARK INSTRUMENT — PHASE 2 · DARK COMMERCE (trailing override layer)
   Trust strip → tiles → in-stock catalog/cards → dose pills → prices → COA row
   → value band → full-catalog accordion → cart drawer → checkout.
   CSS-only. Zero DOM/attribute changes — see P2 sentinel diff for proof.
   ============================================================================ */

/* -- 0. Safety-net inheritance: kills the global body{color:var(--ink)} /
   .display-h2 / .body-text dark-navy default inside every dark region so no
   heading or paragraph goes invisible on the new near-black surfaces. -- */
.trust-strip,.cat-tiles-section,.catalog,.catalog-section,.full-catalog-section,
.value-band,#checkout,#cart{color:var(--text-body-di) !important}
.cat-tiles-section .display-h2,.catalog .display-h2,.catalog-section .display-h2,
.full-catalog-section .display-h2{color:var(--text-hi) !important}
.cat-tiles-section .body-text,.catalog .body-text,.catalog-section .body-text{color:var(--text-body-di) !important}
.catalog .bba-idx,.cat-tiles-section .bba-idx{color:var(--di-teal) !important}

/* -- 1. TRUST STRIP — hairline instrument readout -- */
.trust-strip{background:var(--surface-1) !important;border-top:1px solid var(--hair-1) !important;border-bottom:1px solid var(--hair-1) !important}
.trust-item{border-left-color:var(--hair-2) !important}
.trust-item::before{color:var(--di-teal) !important}
.trust-strip svg{stroke:var(--di-teal) !important}
.trust-item-label{font-family:var(--f-mono) !important;font-size:11px !important;letter-spacing:.06em !important;text-transform:uppercase;color:var(--text-hi) !important;font-weight:500 !important}
.trust-item-sub{color:var(--text-body-di) !important;font-size:12px !important}

/* -- 2. CATEGORY TILES — glass plinths w/ mono index numbers -- */
.cat-tiles-section{background:var(--canvas) !important}
.cat-tiles-eyebrow{color:var(--di-teal) !important}
.cat-tiles-grid{counter-reset:ctidx}
.cat-tile{background:var(--di-glass) !important;border:1px solid var(--hair-2) !important;border-top-color:var(--hair-3) !important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)))
{.cat-tile{background:var(--di-glass-fallback) !important}}
.cat-tile:hover{border-color:var(--hair-hover) !important;box-shadow:none !important}
.cat-tile::before{content:counter(ctidx,decimal-leading-zero) " —";counter-increment:ctidx;display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--di-teal);margin-bottom:10px}
.ct-name{font-family:var(--f-mono) !important;text-transform:uppercase;letter-spacing:.07em;font-weight:500 !important;color:var(--text-hi) !important;font-size:14.5px !important}
.ct-sub{color:var(--text-body-di) !important}
.ct-arrow{color:var(--di-teal) !important}

/* -- 3. CATALOG WRAPPER + SECTION HEADERS + VALUE BAND -- */
.catalog,.catalog-section{background:var(--canvas) !important}
.cat-section-header{border-bottom-color:var(--hair-2) !important}
.cat-section-title{color:var(--text-hi) !important}
.cat-section-count{color:var(--text-mono-di) !important}
.moq-banner{background:var(--surface-1) !important;border-color:var(--hair-2) !important}
.moq-banner-text{color:var(--text-body-di) !important}
.moq-banner-text strong{color:var(--di-teal) !important}
.ship-pill--us{color:var(--di-teal) !important;background:rgba(43,185,201,.10) !important;border-color:rgba(43,185,201,.34) !important}
.ship-pill--intl{color:var(--text-body-di) !important;background:var(--surface-1) !important;border-color:var(--hair-2) !important}
.value-band{background:var(--surface-1) !important}
.value-col h3{color:var(--text-hi) !important}
.value-col h3::before{background:var(--di-teal) !important}
.value-col p{color:var(--text-body-di) !important}

/* -- 4. PRODUCT CARDS -- */
.live-card{position:relative;background:var(--surface-2) !important;border:1px solid var(--hair-2) !important;box-shadow:none !important}
.live-card:hover{border-color:var(--hair-2) !important;box-shadow:0 14px 34px -16px rgba(0,0,0,.6) !important}
.live-card::after{content:"";position:absolute;top:-1px;right:-1px;width:9px;height:9px;border-top:1px solid var(--hair-3);border-right:1px solid var(--hair-3);pointer-events:none}
.live-card:hover::after{border-color:var(--di-teal)}
.live-card--featured{border-color:var(--hair-3) !important;box-shadow:none !important}

/* Product photos are pre-composited on a dark cinematic ground (white bg
   WHITE-CLINICAL: product shots are back on their original white grounds and
   sit on white cards, so no seating scrims are needed — the dark-era fades are
   retired (they read as a grey band on white). */
/* Transparent well. This was var(--surface-1) = PURE WHITE on a --surface-2 card:
   a visible white block behind every product, and since each JPEG carried its own
   slightly-different white, the seams read as "white bars". The art is knocked out
   now (media/products/cut/*.png), so the vial floats directly on the card and every
   SKU matches. Do not reintroduce a background here or the bars come back. */
/* The "white bars" were a NEAR-MISS, not a bug: this well was --surface-1 (#FFF)
   inside a --surface-2 (#FAF8F4) card, so each product photo sat in a white block one
   shade off its surroundings. The photos ARE white-background, so the honest fix is to
   make the card, the well and the photography agree on ONE white -- then there is no
   seam to see. (Knocking the photos out was tried: it damages TB-500 and the bac-water,
   whose soft under-vial reflection cannot be separated from the vial by a flood fill.
   Never ship clipped product art to remove a background.) */
.live-card-image{background:var(--surface-1) !important;position:relative;box-sizing:border-box;overflow:hidden}
.live-card{background:var(--surface-1) !important}
/* height-bound, not width-bound: every vial renders the SAME height whatever its
   native crop. width:100%/height:auto sized by WIDTH, so a wide bottle
   (bac water 516x892) and a narrow one (tb-500 281x821) came out different sizes. */
.live-card-image img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.live-card-image::before{content:none}
.live-card-image::after{content:"";position:absolute;inset:0;background:none;pointer-events:none}

.live-card-meta{border-top-color:var(--hair-1) !important}
.live-card-name{color:var(--text-hi) !important}
.live-card-blurb{color:var(--text-body-di) !important}
.live-card-blurb a{color:var(--di-teal) !important}
.live-stock-badge{color:var(--di-teal) !important}
.live-stock-dot{background:var(--di-teal) !important}

/* dose pills — hairline + text-hi; selected = hair-3 fill, never red */
.size-pill{border-color:var(--hair-2) !important;color:var(--text-body-di) !important;background:transparent !important}
.size-pill:hover{border-color:var(--hair-hover) !important;color:var(--text-hi) !important;background:var(--hair-1) !important}
.size-pill.active{border-color:var(--hair-3) !important;color:var(--text-hi) !important;background:var(--hair-2) !important;box-shadow:none !important}

/* COA trust row — teal, untouched hierarchy/links */
.coa-trust-lot{color:var(--text-mono-di) !important}
.coa-trust-lot b{color:var(--text-hi) !important}
.coa-trust-sep{color:var(--hair-3) !important}
.coa-trust-link{color:var(--di-teal) !important}
.coa-trust-link:hover{color:var(--text-hi) !important}

/* price rows — pure white mono prices, hairline row rules */
.price-row{border-top:1px solid var(--hair-1) !important;padding-top:8px !important}
.price-row:first-child{border-top:none !important;padding-top:0 !important}
.price-row-label{color:var(--text-body-di) !important}
.price-row-label .kit-x{color:var(--text-mono-di) !important}
.price-row-amount{background:none !important;-webkit-text-fill-color:var(--text-hi) !important;color:var(--text-hi) !important}
.price-row-amount.kit-price{-webkit-text-fill-color:var(--text-body-di) !important;color:var(--text-body-di) !important}
.price-row-tag{background:var(--surface-1) !important;border-color:var(--hair-2) !important;color:var(--text-mono-di) !important}
.price-row-tag--us{background:rgba(43,185,201,.10) !important;color:var(--di-teal) !important;border-color:rgba(43,185,201,.30) !important}
.price-row-tag--ov{background:var(--surface-1) !important;color:var(--text-body-di) !important;border-color:var(--hair-2) !important}
.price-row-na{color:var(--text-mono-di) !important}

/* Add-to-cart — the loudest element, solid red, ONE per card */
.price-row-btn{background:#CD4642 !important;color:#fff !important;box-shadow:none !important}
.price-row-btn:hover{filter:brightness(1.08) !important;box-shadow:0 4px 16px -4px rgba(233,80,75,.55) !important}
/* kit-btn is a secondary hairline action — never red, teal on hover */
.price-row-btn.kit-btn{background:transparent !important;color:var(--text-hi) !important;border:1px solid var(--hair-3) !important}
.price-row-btn.kit-btn:hover{border-color:var(--di-teal) !important;color:var(--di-teal) !important}

/* -- 5. FULL-CATALOG ACCORDION — inventory manifest -- */
.full-catalog-section{background:var(--surface-1) !important}
.full-catalog-heading{color:var(--text-hi) !important}
.full-catalog-sub{color:var(--text-body-di) !important}
.fc-callout{background:rgba(43,185,201,.07) !important;border-color:rgba(43,185,201,.22) !important}
.fc-callout-key{color:var(--text-hi) !important}
.fc-callout-rest{color:var(--text-body-di) !important}
.fc-callout-rest strong{color:var(--di-teal) !important}
.fc-cat-header{border-bottom-color:var(--hair-2) !important}
#cat-full .fc-cat-header:hover{background:var(--hair-1) !important}
.fc-cat-title,#cat-full .fc-cat-title{color:var(--di-teal) !important}
#cat-full .fc-cat-count{color:var(--text-mono-di) !important}
#cat-full .fc-cat-chev{color:var(--text-mono-di) !important}
.fc-row{border-bottom-color:var(--hair-1) !important}
.fc-row:nth-child(even){border-left-color:var(--hair-1) !important}
#cat-full .fc-row:hover{background:var(--hair-1) !important}
.fc-name,#cat-full .fc-row .fc-name{color:var(--text-hi) !important}
.fc-dose-tag,#cat-full .fc-row .fc-dose-tag{color:var(--di-teal) !important}
.fc-price,#cat-full .fc-row .fc-price{color:var(--text-hi) !important}
.fc-price::after,#cat-full .fc-row .fc-price::after{color:var(--text-mono-di) !important}
.fc-dose{background:var(--surface-2) !important;border-color:var(--hair-2) !important;color:var(--text-hi) !important}
.fc-dose option{background:var(--surface-2) !important;color:var(--text-hi) !important}
.fc-add-btn,#cat-full .fc-row .fc-add-btn{border-color:rgba(43,185,201,.4) !important;color:var(--di-teal) !important;background:transparent !important}
.fc-add-btn:hover,#cat-full .fc-row .fc-add-btn:hover{background:rgba(43,185,201,.14) !important;color:var(--text-hi) !important}
/* faint masked lab-grid on an open category */
#cat-full .fc-category:not(.fc-collapsed) .fc-rows{background-image:linear-gradient(var(--hair-1) 1px,transparent 1px),linear-gradient(90deg,var(--hair-1) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}

/* -- 6. CART DRAWER -- */
.cart-drawer-panel{background:var(--surface-1) !important;box-shadow:-40px 0 90px -20px rgba(0,0,0,.65) !important}
.cart-drawer-close{color:var(--text-hi) !important}
.cart-drawer-close:hover{background:var(--hair-1) !important}
#cart .cart-section-title,#cart .checkout-title{color:var(--text-hi) !important}
.cart-line{border-bottom-color:var(--hair-1) !important}
.cart-line-image{background:var(--canvas-deep) !important;border-color:var(--hair-2) !important}
.cart-line-name{color:var(--text-hi) !important}
.cart-line-dose{color:var(--text-mono-di) !important}
.cart-line-price{color:var(--text-hi) !important}
.qty-btn{border-color:var(--hair-2) !important;color:var(--text-hi) !important}
.qty-btn:hover{border-color:var(--hair-hover) !important}
.qty-num{color:var(--text-hi) !important}
.empty-cart-msg{color:var(--text-body-di) !important}
.empty-cart-msg a{color:var(--di-teal) !important}
#cart.cart-drawer-panel .cart-summary{background:var(--surface-2) !important;border:1px solid var(--hair-2) !important}
.mono-label{color:var(--text-mono-di) !important}
.summary-row{border-bottom-color:var(--hair-1) !important}
.summary-label{color:var(--text-body-di) !important}
.summary-val{color:var(--text-hi) !important}
.summary-total .summary-val{color:var(--di-teal) !important}
#cart .btn-primary,#checkout .btn-primary{background:#CD4642 !important;color:#fff !important;border:none !important}
#cart .btn-primary:hover,#checkout .btn-primary:hover{filter:brightness(1.08) !important}

/* -- 7. CHECKOUT -- */
.checkout-section{background:var(--surface-1) !important;border-top-color:var(--hair-1) !important}
.checkout-title{color:var(--text-hi) !important}
.form-legend{color:var(--text-mono-di) !important}
#checkout label{color:var(--text-body-di) !important}
#checkout input[type="text"],#checkout input[type="email"],#checkout input[type="tel"],#checkout textarea,#checkout select{background:var(--surface-2) !important;border-color:var(--hair-2) !important;color:var(--text-hi) !important}
#checkout input::placeholder,#checkout textarea::placeholder{color:var(--text-mono-di) !important}
#checkout input:focus,#checkout textarea:focus,#checkout select:focus{border-color:var(--di-teal) !important}
.payment-option{background:var(--surface-2) !important;border-color:var(--hair-2) !important}
.payment-option.active{border-color:var(--di-teal) !important;box-shadow:0 0 0 1px var(--di-teal) inset !important}
.payment-name{color:var(--text-hi) !important}
.payment-sub{color:var(--text-body-di) !important}
.payment-instructions{background:var(--surface-2) !important}
.pay-steps-title{color:var(--text-mono-di) !important}
.pay-step-text{color:var(--text-body-di) !important}
.pay-amount{color:var(--text-hi) !important}
.copy-field{background:var(--surface-2) !important;border-color:var(--hair-2) !important}
.copy-field-val{color:var(--text-hi) !important}
.copy-btn{background:var(--surface-1) !important;border-color:var(--hair-2) !important;color:var(--text-body-di) !important}
.btc-address{color:var(--text-hi) !important}
.compliance-notice{background:var(--surface-2) !important;border-color:var(--hair-2) !important}
.compliance-text{color:var(--text-body-di) !important}
.checkbox-label{color:var(--text-body-di) !important}
#min-gate-msg{background:var(--surface-2) !important;border-color:var(--hair-2) !important}
.cart-min-msg{color:var(--text-body-di) !important}
.checkout-order-box{background:var(--di-glass) !important;border:1px solid var(--hair-2) !important;border-top-color:var(--hair-3) !important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)))
{.checkout-order-box{background:var(--di-glass-fallback) !important}}
.order-box-title{color:var(--text-hi) !important}
.order-code-block{border-color:var(--hair-2) !important}
.order-code-label{color:var(--text-mono-di) !important}
.order-code-val{color:var(--text-hi) !important}
.order-code-helper{color:var(--text-body-di) !important}
.order-confirmation-msg{color:var(--text-body-di) !important}
.order-confirmation-msg a{color:var(--di-teal) !important}
#checkout .summary-row{border-bottom-color:var(--hair-1) !important}
#checkout .summary-label{color:var(--text-body-di) !important}
#checkout .summary-val{color:var(--text-hi) !important}
#checkout a{color:var(--di-teal) !important}

/* checkout cross-sell (BAC water / pairs-well) — dark glass, teal actions */
.supplies-upsell{background:var(--surface-2) !important;border-color:var(--hair-2) !important}
.supplies-head{color:var(--text-hi) !important}
.supplies-icon{background:var(--surface-1) !important;border-color:var(--hair-2) !important}
.supply-kit{background:var(--surface-1) !important;border-color:var(--hair-2) !important}
.supply-kit-title{color:var(--text-hi) !important}
.supply-kit-sub{color:var(--text-body-di) !important}
.supply-save{background:var(--di-teal) !important;color:#04141a !important}
.supply-add-kit{background:var(--di-teal) !important;color:#04141a !important}
.supply-add-kit:hover{background:var(--text-hi) !important}
.supply-add-kit--alt{background:transparent !important;color:var(--di-teal) !important;border-color:var(--di-teal) !important}
.supply-add-kit--alt:hover{background:var(--di-teal) !important;color:#04141a !important}
.supplies-or{color:var(--text-mono-di) !important}
.supply-name{color:var(--text-hi) !important}
.supply-meta{color:var(--text-mono-di) !important}
.supply-add{background:var(--surface-1) !important;border-color:var(--hair-2) !important;color:var(--di-teal) !important}
.pairs-row{border-top-color:var(--hair-1) !important}
.pairs-arrow{color:var(--di-teal) !important}
.bac-reminder-x{color:var(--text-body-di) !important}

/* -- 8. reduced-motion / mobile guards (layout/min-heights untouched) -- */
@media (prefers-reduced-motion: reduce){
  .live-card:hover,.cat-tile:hover{transform:none !important}
}
@media (max-width:760px){
  .live-card-image{padding:16px}
}


/* --- */


/* contrast fix: how-to step titles were --ink (dark navy) on the dark canvas */
.how-step-title{color:var(--text-hi) !important}
/* ============================================================================
   DARK INSTRUMENT — PHASE 3 · EXHIBITS + POLISH (trailing override layer, last wins)
   Authority strip → COA library (exhibit) → reviews (evidence wall) → how-to /
   shipping / about / faq / contact / policies (flight-manual) → brand-band
   membranes → tasteful micro-interactions. CSS-only except one split paragraph
   in #policies (no commerce DOM, no price/onclick/href/COA-link changes).
   ============================================================================ */

/* -- 0. Safety-net inheritance: every remaining light region → canvas family,
   headings/body text repainted so nothing goes invisible on near-black.
   html/body base backdrop also pinned to canvas — closes the one gap P1 left
   open (overscroll bounce / any sub-pixel seam between full-bleed sections). -- */
html,body{background:var(--canvas) !important}
.authority-strip,.reviews-section,.lab-section,.how-section,.shipping-section,
.about-section,.faq-section,.contact-section,.policies-section{
  color:var(--text-body-di) !important;
}
.authority-strip .display-h2,.authority-strip h2,.reviews-section .display-h2,
.lab-section h2,.how-section .display-h2,.shipping-section .display-h2,
.about-section .display-h2,.faq-section .faq-sidebar-title,.faq-q-text,
.contact-section .display-h2,.policies-section .display-h2,
.policies-section h3{color:var(--text-hi) !important}
.authority-strip .body-text,.authority-lead,.reviews-section .body-text,
.lab-section .lab-sub,.how-section .body-text,.how-step-body,.how-note-text,
.shipping-section .body-text,.ship-spec-key,.ship-spec-val,.ship-note,
.ship-discreet-text,.about-section .body-text,.about-body,.about-stat-label,
.faq-section .body-text,.faq-sidebar-sub,.faq-a,.contact-section .body-text,
.policies-section .body-text{color:var(--text-body-di) !important}
.about-body p strong,.ship-discreet-text strong,.how-note-text strong,
.faq-a strong,.ship-card-title{color:var(--text-hi) !important}
.authority-eyebrow,.section-eyebrow,.ship-card-origin,.faq-sidebar-link,
.about-promise-title{color:var(--di-teal) !important}
.section-eyebrow-dot{background:var(--di-teal) !important}

/* -- 1. AUTHORITY STRIP (between reviews + COA library) -- */
.authority-strip{background:var(--surface-1) !important;border-top-color:var(--hair-1) !important}
.lab-mark{color:var(--text-hi) !important}
.lab-mark span{color:var(--di-teal) !important}
.authority-cta{color:var(--di-teal) !important}
.authority-cta:hover{color:var(--text-hi) !important}

/* -- 2. COA LIBRARY — museum exhibit (#lab-tests) -- */
.lab-section{background:var(--canvas) !important}
.lab-section .section-eyebrow-dot{background:var(--di-teal) !important}
/* glass specimen plates (Freedom Diagnostics PDFs) */
.coa-card{background:var(--di-glass) !important;border:1px solid var(--hair-2) !important;
  border-top-color:var(--hair-3) !important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  position:relative}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)))
{.coa-card{background:var(--di-glass-fallback) !important}}
.coa-card:hover{border-color:var(--di-teal) !important;box-shadow:0 0 0 1px var(--di-teal),0 18px 40px -18px rgba(0,0,0,.6),0 0 28px -6px rgba(43,185,201,.45) !important}
.coa-purity{color:var(--di-teal) !important}
.coa-lab{color:var(--text-mono-di) !important}
.coa-prod{color:var(--text-hi) !important;font-family:'STIX Two Text',Georgia,serif !important}
.coa-card-top{position:relative;padding-bottom:10px}
.coa-card-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:repeating-linear-gradient(90deg,var(--hair-3) 0 4px,transparent 4px 8px)}
.coa-foot{border-top-color:var(--hair-1) !important}
.coa-view{color:var(--text-mono-di) !important;display:inline-flex;align-items:center}
.coa-view::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--di-teal);margin-right:7px;flex-shrink:0}
.coa-card:hover .coa-view{color:var(--text-hi) !important}
.coa-note{color:var(--text-mono-di) !important}
.coa-note strong{color:var(--text-body-di) !important}
/* Janoshik verify groups — leader-line title, teal-tick chips */
.lab-group-title{color:var(--di-teal) !important;display:flex;align-items:center;gap:12px}
.lab-group-title::after{content:"";flex:1;height:1px;
  background:repeating-linear-gradient(90deg,var(--hair-2) 0 4px,transparent 4px 8px)}
/* COA chips — the ONE paper-white surface on the whole site (real certificate look) */
.lab-chip{background:var(--paper) !important;border:1px solid var(--di-teal) !important;
  box-shadow:none !important}
.lab-chip:hover{background:#fff !important;box-shadow:0 0 0 1px var(--di-teal),0 10px 26px -10px rgba(43,185,201,.55) !important}
/* was #0E2038 !important — a hardcoded navy from the retired build, in the fix layer,
   beating var(--ink). 52 chips rendered blue-black beside the white-clinical graphite:
   the near-miss that reads as "off" without being nameable. Consume the token. */
.lab-chip-name{color:var(--text-hi) !important;font-weight:500 !important}
.lab-chip-arrow{color:var(--di-teal-ink) !important;font-weight:600 !important}

/* -- 3. REVIEWS — evidence wall (photos untouched; chrome + type only) -- */
.reviews-section{background:var(--canvas) !important}
.rev-shot{background:var(--surface-2) !important;border:1px solid var(--hair-2) !important;
  box-shadow:none !important}
.rs-head{background:var(--surface-1) !important;border-bottom-color:var(--hair-1) !important}
.rs-photo{background:var(--canvas-deep) !important}
.rs-name{color:var(--text-hi) !important;font-family:var(--f-mono) !important;font-weight:500 !important;
  letter-spacing:.03em;text-transform:uppercase;font-size:12.5px !important}
.rs-status{color:var(--di-teal) !important}
.rs-text{color:var(--text-body-di) !important;font-family:'STIX Two Text',Georgia,serif !important;font-style:italic}
.rs-meta{color:var(--text-mono-di) !important}
.rev-more-btn{background:transparent !important;color:var(--text-hi) !important;border-color:var(--hair-3) !important}
.rev-more-btn:hover{border-color:var(--di-teal) !important;color:var(--di-teal) !important;box-shadow:none !important;transform:none !important}
.rev-photos-label{color:var(--di-teal) !important}
.reviews-section .media-tile{background:var(--canvas-deep) !important;border-color:var(--hair-2) !important;box-shadow:none !important}
/* subtle evidence-wall stagger — children only (never .rev-shot itself, which the
   reveal-failsafe pins to opacity:1/transform:none); gated by IO + reduced-motion via .rw-in */
.rs-photo,.rs-cap{opacity:1;transform:none;transition:opacity .5s var(--ease-out,ease),transform .5s var(--ease-out,ease)}
#reviews-grid:not(.rw-in) .rs-photo,#reviews-grid:not(.rw-in) .rs-cap{opacity:0;transform:translateY(10px)}
#reviews-grid.rw-in .rev-shot:nth-child(3n+1) .rs-photo,#reviews-grid.rw-in .rev-shot:nth-child(3n+1) .rs-cap{transition-delay:0ms}
#reviews-grid.rw-in .rev-shot:nth-child(3n+2) .rs-photo,#reviews-grid.rw-in .rev-shot:nth-child(3n+2) .rs-cap{transition-delay:70ms}
#reviews-grid.rw-in .rev-shot:nth-child(3n+3) .rs-photo,#reviews-grid.rw-in .rev-shot:nth-child(3n+3) .rs-cap{transition-delay:140ms}
@media (prefers-reduced-motion:reduce){
  #reviews-grid:not(.rw-in) .rs-photo,#reviews-grid:not(.rw-in) .rs-cap{opacity:1 !important;transform:none !important}
}

/* -- 4. HOW-TO-ORDER — flight manual -- */
.how-section{background:var(--surface-1) !important}
.how-steps::before{background:var(--hair-2) !important}
.how-step-num{background:var(--di-teal) !important;color:#04141a !important;box-shadow:none !important}
.how-pay-pill{background:var(--surface-2) !important;border-color:var(--hair-2) !important;color:var(--text-body-di) !important}
.how-note{background:var(--di-glass) !important;border:1px solid var(--hair-2) !important;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)))
{.how-note{background:var(--di-glass-fallback) !important}}

/* -- 5. SHIPPING -- */
.shipping-section{background:var(--canvas) !important;border-top-color:var(--hair-1) !important}
.ship-card{background:var(--surface-2) !important;border:1px solid var(--hair-2) !important}
.ship-card-header{border-bottom-color:var(--hair-1) !important}
.ship-card-icon{background:var(--surface-1) !important}
.ship-note{border-top-color:var(--hair-1) !important}
.ship-guarantee-block{background:var(--surface-1) !important}
.ship-guarantee-title{color:var(--text-hi) !important}
.ship-guarantee-body{color:var(--text-body-di) !important}
.ship-guarantee-badge{color:var(--di-teal) !important;border-color:rgba(43,185,201,.4) !important}
.ship-discreet-row{background:var(--surface-2) !important;border-color:var(--hair-2) !important}
.ship-discreet-row svg{stroke:var(--di-teal) !important}
.ship-card:hover,.contact-card:hover,.about-stat-card:hover{transform:translateY(-4px) !important;
  border-color:var(--di-teal) !important;transition:transform .3s ease,border-color .3s ease !important}
.ship-card,.contact-card,.about-stat-card{transition:transform .3s ease,border-color .3s ease}

/* -- 6. ABOUT -- */
.about-section{background:var(--surface-1) !important;border-top-color:var(--hair-1) !important}
.about-pull{color:var(--text-hi) !important;border-left-color:var(--di-teal) !important;
  font-family:'STIX Two Text',Georgia,serif !important;font-style:italic}
.about-stat-card{background:var(--surface-2) !important;border:1px solid var(--hair-2) !important}
.about-stat-num{-webkit-text-fill-color:var(--di-teal) !important;background:none !important;color:var(--di-teal) !important}

/* -- 7. FAQ — numbered/flight-manual affordances -- */
.faq-section{background:var(--canvas) !important;border-top-color:var(--hair-1) !important}
.faq-sidebar-link{border-color:var(--hair-2) !important}
.faq-sidebar-link:hover{border-color:var(--di-teal) !important;color:var(--di-teal) !important}
.faq-list{border-top-color:var(--hair-1) !important}
.faq-item{border-bottom-color:var(--hair-1) !important}
.faq-q:hover .faq-q-text{color:var(--di-teal) !important}
.faq-q-icon{border-color:var(--hair-2) !important;color:var(--text-mono-di) !important}
.faq-q:hover .faq-q-icon{border-color:var(--di-teal) !important;color:var(--di-teal) !important}
.faq-item.open .faq-q-icon{background:var(--di-teal) !important;border-color:var(--di-teal) !important;color:#04141a !important}
.faq-a code{background:var(--surface-2) !important;border-color:var(--hair-2) !important;color:var(--text-hi) !important}

/* -- 8. CONTACT — already dark-navy legacy; align tokens only -- */
.contact-section{background:var(--surface-1) !important}
.contact-card{border-color:var(--hair-2) !important}
.contact-card:hover{background:rgba(43,185,201,.06) !important;border-color:var(--di-teal) !important}
.contact-card-icon{background:rgba(43,185,201,.10) !important;border-color:rgba(43,185,201,.3) !important}
.contact-community{background:rgba(43,185,201,.06) !important;border-color:rgba(43,185,201,.2) !important}
.cu-form{background:var(--surface-2) !important;border-color:var(--hair-2) !important}
.cu-form input,.cu-form textarea{background:var(--canvas-deep) !important;border-color:var(--hair-2) !important}

/* -- 9. POLICIES — sober etched RUO plate, full width, surface-1 -- */
.policies-section{background:var(--surface-1) !important;border-top-color:var(--hair-1) !important}
.ruo-plate{margin:22px 0;padding:20px 24px;background:var(--surface-2) !important;
  border:1px solid var(--hair-2) !important;border-left:3px solid var(--di-teal) !important;
  border-radius:2px;color:var(--text-body-di) !important;max-width:none !important}
.ruo-plate-tag{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--di-teal);margin-bottom:8px}

/* -- 10. BRAND-BAND VIDEO MEMBRANES — WHITE-CLINICAL: high-key grayscale footage
   under a light scrim so the (now dark-ink) headings read. -- */
.brand-band{position:relative;background-color:var(--canvas) !important}
/* Scrim holds heavy over the copy column (left ~45%) for text contrast, then falls
   away so the REAL BBA labels are legible — the whole point of the asset swap is that
   the branding shows. Don't flatten this back to a uniform wash. */
.brand-band::before{background:linear-gradient(90deg,rgba(242,241,238,.96) 0%,rgba(242,241,238,.90) 38%,rgba(242,241,238,.55) 62%,rgba(242,241,238,.22) 100%) !important}
@media(max-width:760px){.brand-band::before{background:linear-gradient(180deg,rgba(242,241,238,.88),rgba(242,241,238,.94)) !important}}
/* NO grayscale on the bands: izzy's rule is that the BBA branding shows —
   desaturating the navy/red label defeats the entire change. */
.brand-band h2{color:var(--text-hi) !important;font-family:'STIX Two Text',Georgia,serif !important}
.brand-band p{color:var(--text-body-di) !important}
.brand-band .bb-inner{padding-top:calc(clamp(40px,7vw,80px) + 30px) !important}
.brand-band .bb-inner::before{content:attr(data-di-caption);position:absolute;top:clamp(20px,4vw,40px);left:clamp(20px,5vw,64px);
  display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--di-teal)}
.brand-band .bb-inner::after{content:"";position:absolute;top:calc(clamp(20px,4vw,40px) + 5px);left:clamp(20px,5vw,64px);
  width:120px;height:1px;background:linear-gradient(90deg,var(--di-teal),transparent);
  transform:translateY(16px)}

/* -- 11. Link underline-draw — tasteful text-link micro-interaction -- */
.authority-cta,.contact-card-link,.faq-sidebar-link,.coa-trust-link{
  background-image:linear-gradient(var(--di-teal),var(--di-teal));background-repeat:no-repeat;
  background-position:0 100%;background-size:0% 1px;transition:background-size .3s ease;
}
.authority-cta:hover,.contact-card-link:hover,.faq-sidebar-link:hover,.coa-trust-link:hover{background-size:100% 1px}

/* -- 12. reduced-motion + mobile guards -- */
@media (prefers-reduced-motion:reduce){
  .coa-card:hover,.lab-chip:hover,.ship-card:hover,.contact-card:hover,.about-stat-card:hover,
  .rev-more-btn:hover{transform:none !important}
  .authority-cta,.contact-card-link,.faq-sidebar-link,.coa-trust-link{transition:none !important;background-size:0 1px !important}
  .rs-photo,.rs-cap{transition:none !important}
}
@media (max-width:760px){
  .brand-band .bb-inner::after{display:none}
  .ruo-plate{padding:16px 18px}
}


/* --- */


/* ── WHITE-CLINICAL final pass — trailing layer, last wins ───────────────
   Fixes found in the goal/anti-slop gate: a surviving dark navy band, the
   hero word clipping on mobile, and an unmasked halftone overlay. */

/* 1. .mol-band was the dark-era navy graticule membrane (white text on navy) —
      convert to a light clinical graticule so no near-black band survives. */
.mol-band{background:
  linear-gradient(rgba(12,110,120,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(12,110,120,.05) 1px,transparent 1px),
  radial-gradient(ellipse at 50% 40%,rgba(12,110,120,.06),transparent 65%),
  var(--canvas) !important;
  background-size:48px 48px,48px 48px,100% 100%,100% 100% !important;
  color:var(--text-hi) !important}
.mol-band::after{background:repeating-linear-gradient(90deg,rgba(12,110,120,.28) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,rgba(12,110,120,.5) 0 1px,transparent 1px 96px) !important}
.mol-band h2,.mol-band h2 em{color:var(--text-hi) !important}
.mol-band p{color:var(--text-body-di) !important}
.mol-band-link{color:var(--di-teal) !important;border-color:rgba(12,110,120,.4) !important}
.mol-band-link:hover{border-color:var(--di-teal) !important;background:rgba(12,110,120,.08) !important}

/* 2. Hero word must stay legible at 390px (anti-slop #5) — size it to FIT the
      viewport rather than nowrap-overflowing it. */
/* 5j. MOBILE = CENTRED (izzy: "make it centered on mobile"). The hero was mixed:
       vial + wordmark centred by .hero-word-wrap, everything else left. Two
       alignments in one narrow column reads as a mistake. Commit to one.
       Desktop is unaffected -- it stays left-aligned. */
@media(max-width:760px){
  .hero-inner{align-items:center !important;text-align:center}
  /* 5k. THE SLIDES MUST NOT RESIZE THE HERO (izzy: "lets make sure theyre the same").
     The vial is already identical on every slide (82x180 measured) -- what moved was the
     LAYOUT around it: the hero measured 627 / 613 / 576px depending on the compound, so
     everything below jumped on each change. Two causes, both content-length driven:
       1. the CTA row reflowed -- "VIEW TIRZEPATIDE" (193px) wrapped "Browse full catalog"
          onto a second line, "VIEW NAD+" (136px) did not: a 36px swing. Stacking the CTAs
          on mobile makes the row two lines ALWAYS, so no name length can change it.
       2. the body copy wraps to 2 or 3 lines depending on the compound name. Reserve the
          tallest so the block never shrinks.
     Reserve space; never let the slide content size the frame. */
  .hero-ctas{flex-direction:column;align-items:center;gap:12px}
  .hero-cta-primary{min-width:210px;text-align:center}
  .hero-body{min-height:calc(3 * 1.65em)}
  /* Retatrutide's kicker ("TRIPLE-RECEPTOR GLP-1 · GIP · GLUCAGON AGONIST") is the only
     one long enough to wrap to 2 lines -- worth exactly 15px, which was the last thing
     making its hero 624px against everyone else's 609. Reserve both lines. */
  .hero-kicker{min-height:30px}
  .hero-kicker{justify-content:center}
  .hero-body{margin-left:auto;margin-right:auto}
  .hero-ctas{justify-content:center}
  .hero-dots{justify-content:center}
  .hero-trust-rail{align-self:center}
  .hero-body-row{width:100%}
  .hero-copy-col{align-items:center}
}
@media(max-width:760px){
  .hero-word{font-size:11.6vw;letter-spacing:-.03em}
  /* vial size lives in --vial-h (5c) — restating it here is the drift trap */
  /* 12px left ZERO clearance at the breathe peak (scale 1.04 grows the vial ~4px
     upward + translateY(-8px) = ~12px of travel, exactly eating the gap). Not an
     overlap, but no margin either — and the vial-on-kicker collision is a bug this
     hero has already had twice. Buy real headroom. */
  .hero-kicker{font-size:9.5px;letter-spacing:.1em;margin-bottom:26px}
  .hero-inner{min-height:auto;padding-left:20px;padding-right:20px;padding-bottom:32px}
  /* word-wrap margin-bottom governed by the clamp in 5e (later, wins anyway) */
  .hero-body{margin-bottom:16px}
  .hero-body-row{gap:18px}
  .hero-trust-rail{margin-top:22px}
}
@media(max-width:420px){ .hero-word{font-size:11vw} }

/* 4. AA contrast fixes (Mars): white-on-#E9504B was 3.68:1 on the PRIMARY hero CTA;
      #04141a on teal chips was 3.14:1. Brand red stays #E9504B for markers/mark. */
.hero-cta-primary{background:#CD4642 !important;border-color:#CD4642 !important} /* white on #CD4642 = 4.61:1 */
.hero-cta-primary:hover{background:#B93B37 !important}
/* :not(--alt) matters — the --alt variant is the INVERSE button (white fill, teal
   ink). It carries BOTH classes, so a bare `.supply-add-kit` here also hit --alt and
   painted white ink on its white fill: measured contrast 1.00, invisible. */
.supply-save,.supply-add-kit:not(.supply-add-kit--alt),.supply-add-kit--alt:hover,.how-step-num,
.faq-item.open .faq-q-icon{color:#FFFFFF !important}                              /* white on #0C6E78 = 5.97:1 */

/* 4b. The #cat-full filter box was a whole DARK-ERA glass component left sitting on
      the now-white .full-catalog-section (:8210 -> --surface-1 = #FFFFFF). Measured
      live, not inferred: #fc-filter rendered rgb(255,255,255) on rgb(255,255,255)
      = contrast 1.00 — a shopper filtering the catalog could not see their own
      typing — and .fc-filter-count was equally invisible. The wrap/border/shadow
      were white-alpha over white, so the well had no edges either. Rebuild it in
      the light glass idiom. (The rest of #cat-full already passes: fc-cat-title
      5.97, fc-name/fc-price 17.84, fc-add-btn 5.97.) */
#cat-full .fc-filter-wrap{
  background:var(--surface-2) !important;
  border:1px solid var(--hair-2) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6) !important}
#cat-full .fc-filter-wrap:focus-within{
  border-color:var(--di-teal) !important;
  background:var(--surface-1) !important;
  box-shadow:0 0 0 3px rgba(12,110,120,.13) !important}
#cat-full .fc-filter-ico{color:var(--di-teal) !important}                          /* 1.94 -> 5.97:1 */
#fc-filter,#cat-full input.fc-filter{color:var(--text-hi) !important}              /* 1.00 -> 16.1:1 */
#fc-filter::placeholder{color:var(--text-mono-di) !important}                      /* 1.00 -> 4.84:1 */
#cat-full .fc-filter-count{color:var(--text-mono-di) !important}                   /* 1.00 -> 4.84:1 */

/* 4c. Compound-finder "Add" button kept the dark build's navy. Add-to-cart across
      this site is teal (.supply-add-kit -> var(--teal)); red is reserved for the
      hero's primary CTA, so red here would break that grammar. White on #0C6E78
      = 5.97:1. */
.cf-result-add{background:var(--di-teal) !important;color:#FFFFFF !important}
.cf-result-add:hover{background:#095760 !important}                                /* white = 7.35:1 */

/* 4e. Three cards (BPC-157+TB-500, NAD+, Tesamorelin) have NO US row — their only
      buyable option is an overseas kit — yet they showed the same teal "In stock"
      dot as Retatrutide, inside a section headed "IN US STOCK · SHIPS IN 24H". The
      badge now reads "Kit only · overseas" and the row chip carries "· 2–3 wk", so
      the contradictory "Single: not available" line was removed rather than recoloured.
      Tokens: the live overseas chip is .price-row-tag--ov as overridden at :8241
      (surface-1 / text-body-di / hair-2) — NOT the navy+cool-panel at :1918, which is
      DEAD CSS. Rhyme with what actually renders; navy here would be off-theme.
      animation:none kills the liveness pulse (:3925) — a US-stock urgency cue must
      not fire on a card that ships in 2–3 weeks. Teal stays for links/add-to-cart. */
.live-stock-badge--ov{color:var(--text-body-di) !important}                        /* 8.8:1 */
.live-stock-badge--ov .live-stock-dot{
  background:var(--text-mono-di) !important;
  box-shadow:none !important;
  animation:none !important}

/* 4d. Whole components the re-skin never reached. The pattern in every case: the
      CONTAINER used a token (so it flipped to light on its own) while its TEXT was
      hardcoded #fff for the dark build. Found by sweeping all 2,285 elements live
      and compositing each one's real effective background — NOT by reading the
      cascade, which had reported these clean. Measured ratios were 1.00-1.23, i.e.
      literally invisible. The contact form was the worst of them: a shopper could
      not see their own typing. */

/* footer — .site-footer{background:var(--canvas-deep)} flipped to #EAE7E0 */
.fl-bba{color:var(--text-hi) !important}                                          /* 1.23 -> 12.9:1 */
.fl-bba .fl-red{color:#CD4642 !important}                       /* 2.98 -> 3.67:1; 36px = large text, needs 3.0 */
.fl-sub{color:var(--text-mono-di) !important}                                     /* 1.07 -> 4.67:1 */
.site-footer strong{color:var(--text-hi) !important}                              /* 1.23 -> 12.9:1 */

/* contact cards */
.contact-card-title{color:var(--text-hi) !important}                              /* 1.00 -> 15.4:1 */
.contact-card-body{color:var(--text-body-di) !important}                          /* 1.00 -> 8.8:1  */
.contact-card .mono{color:var(--text-mono-di) !important}                         /* 1.00 -> 4.8:1  */
.contact-card-link{color:var(--di-teal) !important}                               /* 2.36 -> 5.9:1  */

/* contact-us form — inputs rendered #fff on #EAE7E0 */
.cu-sub{color:var(--text-body-di) !important}                                     /* 1.03 -> 8.8:1  */
.cu-form label{color:var(--text-hi) !important}                                   /* 1.05 -> 15.4:1 */
.cu-form label .cu-opt{color:var(--text-mono-di) !important}                      /* 1.02 -> 4.8:1  */
.cu-form input,.cu-form textarea{
  color:var(--text-hi) !important;                                                /* 1.23 -> 16.1:1 */
  background:var(--surface-1) !important;
  border:1px solid var(--hair-2) !important}
.cu-form input::placeholder,.cu-form textarea::placeholder{color:var(--text-mono-di) !important}
.cu-form input:focus,.cu-form textarea:focus{border-color:var(--di-teal) !important}

/* .about-promise is a navy accent card from the ORIGINAL (pre-dark) design, not a
   dark-build survivor — it uses --navy directly. Its teal title fails AA on that
   navy (2.42), and has since before this work. Fix the ink; leave the card's colour
   alone — retheming a deliberate accent is izzy's call, not a contrast fix. */
.about-promise-title{color:var(--teal-bright) !important}                          /* 2.42 -> 6.14:1 on #102A4A */

/* 5b. §6.10 done properly: put the COA-verify affordance ABOVE the body copy on
       mobile so it lands in the fold on a real device rather than depending on the
       page below it staying short. All four are flex children of .hero-inner, so
       `order` moves the rail with no DOM change and no desktop effect. */
@media(max-width:760px){
  .hero-kicker{order:1}
  .hero-word-wrap{order:2}
  .hero-trust-rail{order:3;margin-top:0;margin-bottom:18px}
  .hero-body-row{order:4}
}

/* 5c. The vial is absolutely positioned inside .hero-word-wrap but is TALLER than it,
       so it overflowed upward into the kicker. A viewport-scoped margin only papered
       over the band it was scoped to (the collision survived at 761-1073px, where the
       centered vial still overlaps the left-aligned kicker). Fix it at the source:
       give the wrap the vial's own height so the vial can never escape its anchor at
       ANY width. align-items:flex-end (:4545) keeps the word pinned to the wrap's
       bottom, so the vial still descends through the letterforms (§6.3).
       izzy 2026-07-15: "move the vile up a little so its not overlapping with the
       text" — so the vial's room is now the wrap's PADDING-TOP rather than an overlap
       tuned with `bottom`. The word is align-items:flex-end, i.e. it sits in the
       CONTENT box below that padding, so it physically cannot enter the vial's band at
       any viewport. Derived from --vial-h, never restated. */
:root{--vial-h:min(24vw, 300px)}
@media(max-width:760px){ :root{--vial-h:46vw} }
.hero-word-wrap{padding-top:calc(var(--vial-h) + 18px)}

/* 5f. The vial was designed to rise through the word's GAP. Tightening that gap to
       letter-scale (izzy: "dont space retatrutide like this") closed the channel and
       dropped the vial's printed label onto the "R" — and since the vial is z-index:1
       + mix-blend-mode:multiply UNDER a z-index:2 wordmark, multiply keeps the darker
       pixel, so the R's black dots punch straight through the white label: a black bar
       through the BBA logo, "Retatrutide" reading "Retatru..de". The damage is
       one-directional (the R itself still reads) but it wrecks the branded vial —
       the other half of what the hero sells.
       Lift the vial so only its CLEAR LOWER GLASS overlaps the dots; the label clears
       the cap band entirely. The lever must be `bottom`, NOT transform: the breathe
       keyframes rewrite transform wholesale and the reduced-motion block forces
       translateX(-50%) !important, so a transform lift would be inert.
       Mobile already rests above cap-height, so scope this to desktop and leave
       .hero-vial{bottom:-2%} alone. Re-derive containment or the vial paints up
       through the kicker again. Never re-widen the gap to "fix" this. */
/* (the old 92px `bottom` lift lived here — it existed only to rescue the vial's
   label from the wordmark's dots while the two overlapped. The vial no longer overlaps
   the word at all, so it is obsolete; keeping it would double-count the vial's room.) */

/* 5e. Reclaim the vial's headroom cost from padding that was already mostly dead —
       no breakpoint, no magic number. The vial hangs ~26px into the word-wrap's old
       52px bottom margin, so most of it was never doing work. Buys back ~46px and
       tightens the kicker back toward the word band it labels — the vial's room
       belongs BETWEEN them, but kicker and word read as one unit.
       (Its original rationale also cited pulling the specimen COA link into the fold;
       that element is gone, but the reclaim stands on the kicker argument alone.) */
.hero-inner{padding-top:clamp(28px,3vw,44px)}
.hero-word-wrap{margin-bottom:clamp(24px,2.6vw,30px)}

/* 5d. At 390px the kicker wraps to two lines and align-items:center floated its red
       square between them instead of against the first line's cap-height. */
@media(max-width:760px){
  .hero-kicker{align-items:flex-start}
  .hero-kicker-sq{margin-top:3px}
}


/* 5g. COMPOUND CAROUSEL (izzy: "make this slides ... other compounds ... name the same way").
       The wordmark size is CONSTANT across slides on purpose: it is the brand's nameplate,
       so RETATRUTIDE fills the line and NAD+ is short. Do NOT fit-to-width per slide —
       that would render every compound at a different type size, which reads as four
       different logos rather than one system.
       The vial cross-fades (opacity only, GPU-composited) while the word scrambles; the
       two together are what identify the slide. */
/* 5h. Browsers default form controls to the SYSTEM font, not the page font — so ~50
       elements (the cart button, the drawer close "x", payment options, the FAQ "+"
       and every input) were rendering in ARIAL beside IBM Plex. font:inherit is the
       whole fix; without it no amount of family declarations upstream reaches them. */
/* 5i. ONE h2 rank. The same tag shipped at 44/600, 40/500, 36/500, 34/600, 34/500,
       28/500, 26/500 and 22/500 — twelve heading voices, so "section title" carried
       no consistent meaning and region breaks stopped registering. Two ranks only:
       page sections at --t-h2, and the full-bleed bands louder at 40/600 (earned).
       Do NOT flatten the bands into --t-h2 as well — one voice is over-cut. */
.display-h2,.full-catalog-heading,.faq-sidebar-title,.lab-section h2,.authority-strip h2,.checkout-title{
  font-size:var(--t-h2) !important;font-weight:500 !important}
/* the mol-band is a full-bleed band like the three brand bands — it was adrift at 40/500,
   i.e. neither a section nor a band. Give it the bands' earned rank so the page has
   exactly TWO h2 voices: sections at --t-h2/500, full-bleed bands louder at 44/600.
   (.cart-section-title stays 22/500 on purpose: the cart drawer is an overlay component,
   never co-visible with a section title, so it is not part of the page-wide rank.) */
.mol-band-inner h2{font-size:clamp(28px,3.6vw,44px) !important;font-weight:600 !important}

button,input,select,textarea{font-family:inherit}

/* The vial swap is driven by the Web Animations API in #hero-slider-arm, not a CSS
   transition: a transition cannot express DIRECTION (out one side, in the other) without
   class/reflow juggling, and .hero-vial already owns `animation` for the breathe --
   animating the IMG inside keeps the two from fighting over transform. */

/* Glass arrows -- the site's existing glass recipe (--di-glass + backdrop blur + hairline),
   same as the header/tiles, so they read as part of the kit, not a new component. */
.hero-arrow{
  position:absolute; top:calc(var(--vial-h) / 2); transform:translateY(-50%);
  z-index:4; width:44px; height:44px; display:grid; place-items:center;
  padding:0; cursor:pointer; border-radius:50%;
  background:var(--di-glass); border:1px solid var(--hair-2);
  backdrop-filter:blur(20px) saturate(1.15); -webkit-backdrop-filter:blur(20px) saturate(1.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 6px 20px -8px rgba(20,26,32,.18);
  color:var(--text-hi); opacity:.55;
  transition:opacity .18s ease, background .18s ease, transform .18s ease}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero-arrow{background:var(--di-glass-fallback)} }
.hero-arrow svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.hero-arrow:hover{opacity:1;background:var(--surface-1);transform:translateY(-50%) scale(1.06)}
.hero-arrow:focus-visible{opacity:1;outline:2px solid var(--di-teal);outline-offset:3px}
.hero-arrow:active{transform:translateY(-50%) scale(.96)}
.hero-arrow--prev{left:calc(50% - 190px)}
.hero-arrow--next{right:calc(50% - 190px)}
@media(max-width:900px){
  .hero-arrow{width:38px;height:38px}
  .hero-arrow svg{width:16px;height:16px}
  /* narrow screens: the vial is proportionally wider, so pin the arrows to the edges --
     a fixed offset from centre would sit ON the vial. */
  .hero-arrow--prev{left:2px} .hero-arrow--next{right:2px}
}
@media(prefers-reduced-motion:reduce){ .hero-arrow{transition:none} }
.hero-word{min-height:1em}                      /* no reflow jump between long/short names */

.hero-dots{display:flex;gap:10px;align-items:center;margin-left:12px}
.hero-dot{
  /* F-39: the dash stays 26x3 visually, but the BUTTON is 26x24 — content-box padding
     grows the hit target to the 24px minimum; background-clip paints only the dash.
     Inactive uses the 4.81:1 hover token (was --hair-3 at 1.74:1, near-invisible). */
  width:26px;height:3px;padding:10px 0 11px;box-sizing:content-box;
  border:0;border-radius:0;cursor:pointer;
  background:var(--text-mono-di);
  transition:background .2s ease,transform .2s ease;
  -webkit-appearance:none;appearance:none}
.hero-dot:hover{background:var(--ink)}
.hero-dot.is-on{background:var(--di-teal)}      /* teal = the site's interactive colour */
/* AFTER every `background` shorthand above — the shorthand resets background-clip to
   border-box, which would paint the full 26x24 box instead of the 3px dash. */
.hero-dot,.hero-dot:hover,.hero-dot.is-on{background-clip:content-box}
.hero-dot:focus-visible{outline:2px solid var(--di-teal);outline-offset:3px}
@media(prefers-reduced-motion:reduce){ .hero-dot{transition:none} }
@media(max-width:760px){ .hero-dots{margin-left:0;margin-top:4px;flex-basis:100%} }

/* 3. Mask the halftone scan to the vial's own silhouette so it can never paint a
      floating rectangle over the grid. */
/* (the halftone scan overlay + its silhouette mask lived here. Both removed with the
   greyscale art: the product cards show the vial in full BBA colour with no scanline,
   and izzy asked for the hero vial to match "the rest".) */

/* ═══ Checkout v2 — progressive stages + inline errors (2026-07-22) ═══
   Collapsed = max-height:0 + opacity:0 + inert (markup) + pointer-events:none (fallback
   for pre-inert browsers). Reveal animates ~240ms ease-out; instant under
   prefers-reduced-motion. .co-open releases max-height/overflow after the animation. */
.co-stage{overflow:hidden;opacity:1;transform:none;
  transition:max-height .24s ease-out,opacity .24s ease-out,transform .24s ease-out}
.co-stage.co-collapsed{max-height:0;opacity:0;transform:translateY(8px);pointer-events:none;margin:0}
.co-stage.co-substage.co-collapsed{transform:translateX(-10px)} /* last name slides in beside first */
.co-stage.co-open{max-height:none;opacity:1;transform:none;overflow:visible}
@media (prefers-reduced-motion: reduce){ .co-stage{transition:none} }
.field-why{font-family:var(--f-text);font-size:12px;line-height:1.5;color:var(--body);margin:2px 0 0}
.address-autocomplete-wrap{position:relative;z-index:4}
.address-suggestions{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--hairline);border-radius:6px;box-shadow:0 12px 28px rgba(20,35,52,.14);overflow:hidden;z-index:20}
.address-suggestion{display:block;width:100%;padding:11px 14px;border:0;border-bottom:1px solid rgba(44,62,84,.10);background:transparent;text-align:left;color:var(--ink);cursor:pointer;font-family:var(--f-text);font-size:13.5px;line-height:1.3}
.address-suggestion:last-of-type{border-bottom:0}
.address-suggestion:hover,.address-suggestion[aria-selected="true"]{background:rgba(43,185,201,.09)}
.address-suggestion-main{display:block;font-weight:600}
.address-suggestion-secondary{display:block;color:var(--body);font-size:12px;margin-top:2px}
.address-powered{padding:7px 12px;border-top:1px solid rgba(44,62,84,.10);color:#6b7280;font-family:var(--f-text);font-size:10.5px;text-align:right;letter-spacing:.01em}
.address-autocomplete-hint{font-family:var(--f-text);font-size:11.5px;line-height:1.45;color:var(--body);margin:3px 0 0}
/* Inline field errors: full-contrast text, the ONE red (#CD4642) carried by the border
   marks only — no second red token, no low-contrast red body text. */
.field-err{font-family:var(--f-text);font-size:12.5px;line-height:1.5;color:var(--ink);
  border-left:2px solid #CD4642;padding-left:8px;margin:4px 0 0}
#checkout input[aria-invalid="true"],#checkout select[aria-invalid="true"]{border-color:#CD4642 !important}
#checkout .checkbox-row input[aria-invalid="true"]{outline:2px solid #CD4642;outline-offset:2px}

/* F-13: checkout water reminder — red primary single, outlined alt single, demoted bulk row */
.supply-add-single{display:block;width:auto;flex:1;font-family:var(--f-text);font-weight:600;font-size:12.5px;
  color:#fff;background:#CD4642;border:none;border-radius:7px;padding:8px 6px;cursor:pointer;transition:filter .14s}
.supply-add-single:hover{filter:brightness(1.08)}
.supply-add-single--alt{background:#fff;color:var(--teal);border:1px solid var(--teal)}
.supply-add-single--alt:hover{background:var(--teal);color:#fff;filter:none}
.bac-bulk-row{margin-top:9px;padding-top:8px;border-top:1px dashed var(--hairline)}
.bac-bulk-label{display:block;font-family:var(--f-text);font-size:11.5px;color:var(--body);margin-bottom:6px}
.bac-bulk-tag{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;color:var(--body);
  border:1px solid var(--hairline);border-radius:4px;padding:1px 5px;margin-left:4px;vertical-align:1px}


/* --- */


/* Global catalog search (F-18/F-22): in-system hairline field, mono placeholder, no new colour */
.cat-search-wrap{display:flex;align-items:center;gap:10px;max-width:440px;margin:0 0 22px;padding:11px 14px;background:var(--surface-1,#fff);border:1px solid var(--hair-2,rgba(20,26,32,.14));border-radius:2px}
.cat-search-wrap:focus-within{border-color:var(--di-teal,#0C6E78);box-shadow:0 0 0 3px rgba(12,110,120,.12)}
.cat-search-ico{color:var(--text-mono-di,rgba(20,24,28,.62));flex-shrink:0}
.cat-search{flex:1 1 auto;min-width:0;border:0;background:none;outline:none;font-family:var(--f-text);font-size:14px;color:var(--text-hi,#14181C)}
.cat-search::placeholder{font-family:var(--f-mono);font-size:12px;letter-spacing:.02em;color:var(--text-mono-di,rgba(20,24,28,.62))}
.cat-search-count{flex-shrink:0;font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-mono-di,rgba(20,24,28,.62));white-space:nowrap}
.cat-ship-note{margin:8px 0 0;font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mono-di,rgba(20,24,28,.62))}
.cs-hidden{display:none !important}

/* Cat-nav release once #cat-full has scrolled past the header (F-37): return the ~40px to content below */
.cat-nav--released{position:static !important}

/* Review wall origin chips + JS filter (F-34) */
.rev-filter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:22px 0 4px}
.rev-filter-label{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mono-di,rgba(20,24,28,.62));margin-right:2px}
.rev-filter-btn{font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-mono-di,rgba(20,24,28,.62));background:transparent;border:1px solid var(--hair-2,rgba(20,26,32,.16));border-radius:999px;padding:6px 13px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.rev-filter-btn:hover{border-color:var(--di-teal,#0C6E78);color:var(--text-hi,#14181C)}
.rev-filter-btn.active{background:rgba(43,185,201,.10);border-color:rgba(43,185,201,.30);color:var(--di-teal,#0C6E78)}
.rev-filter-btn:focus-visible{outline:2px solid var(--di-teal,#0C6E78);outline-offset:2px}
.rev-filter-count{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;color:var(--text-mono-di,rgba(20,24,28,.62));margin-left:2px}
.rs-origin{flex-shrink:0;font-family:var(--f-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;border:1px solid;border-radius:999px;padding:2px 7px;white-space:nowrap;align-self:center}
.rs-origin--us{background:rgba(43,185,201,.10);color:var(--di-teal,#0C6E78);border-color:rgba(43,185,201,.30)}
.rs-origin--ov{background:var(--surface-1,#fff);color:var(--text-body-di,#3a4048);border-color:var(--hair-2,rgba(20,26,32,.16))}
#reviews-grid.rev-filter-us .rev-shot{display:none}
#reviews-grid.rev-filter-us .rev-shot[data-origin="us"]{display:flex}
#reviews-grid.rev-filter-ov .rev-shot{display:none}
#reviews-grid.rev-filter-ov .rev-shot[data-origin="ov"]{display:flex}
#reviews-grid.rev-filter-us ~ .rev-more-wrap,#reviews-grid.rev-filter-ov ~ .rev-more-wrap{display:flex}


/* --- */


/* Catalog system v2: an inventory browser with clear grouping, price math, and one obvious action. */
#cat-full.full-catalog-section{background:#f5f7f6!important;border-top:1px solid var(--hair-1)!important;padding:clamp(52px,6vw,84px) 0!important}
#cat-full .full-catalog-inner{max-width:1240px!important;padding-left:clamp(20px,4vw,32px)!important;padding-right:clamp(20px,4vw,32px)!important}
#cat-full .full-catalog-heading{color:var(--ink)!important;font-family:var(--f-display)!important;font-size:clamp(30px,3vw,42px)!important;letter-spacing:-.03em!important}
#cat-full .full-catalog-sub{color:var(--body)!important;max-width:760px!important;line-height:1.65!important}
#cat-full .fc-callout.fc-trust-chips{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px!important;max-width:none!important;background:transparent!important;border:0!important;padding:0!important;margin:0 0 22px!important}
#cat-full .fc-callout-chip{display:block!important;background:#fff!important;border:1px solid #d9e4e2!important;border-radius:12px!important;padding:13px 15px!important}
#cat-full .fc-callout-chip strong{display:block;color:var(--ink)!important;font:600 12px/1.3 var(--f-text),sans-serif!important}
#cat-full .fc-callout-chip small{display:block;color:var(--body)!important;font:400 12px/1.35 var(--f-text),sans-serif!important;margin-top:4px!important}
#cat-full .fc-filter-wrap{max-width:none!important;background:#fff!important;border:1px solid #d9e4e2!important;border-radius:10px!important;padding:11px 14px!important;margin:0 0 20px!important}
#cat-full .fc-filter{color:var(--ink)!important;font-size:14px!important}
#cat-full .fc-category{background:#fff!important;border:1px solid #d9e4e2!important;border-radius:14px!important;margin:0 0 12px!important;overflow:hidden!important;box-shadow:0 2px 8px rgba(21,35,51,.03)!important}
#cat-full .fc-cat-header{min-height:62px!important;padding:16px 18px!important;background:#fff!important;border:0!important;display:flex!important;align-items:center!important;gap:10px!important}
#cat-full .fc-cat-header:hover{background:#f7fbfa!important}
#cat-full .fc-cat-title{color:var(--ink)!important;font-family:var(--f-display)!important;text-transform:none!important;font-size:18px!important;letter-spacing:-.01em!important;font-weight:600!important}
#cat-full .fc-cat-count{background:#edf5f5!important;color:var(--teal)!important;border-radius:999px!important;padding:4px 9px!important;font:600 10px/1 var(--f-mono),monospace!important;letter-spacing:.04em!important;white-space:nowrap!important}
#cat-full .fc-cat-chev{margin-left:auto!important;color:var(--body)!important}
#cat-full .fc-rows{padding:0 16px 8px!important;background:#fff!important;background-image:none!important}
#cat-full .fc-row{display:grid!important;grid-template-columns:minmax(220px,1fr) minmax(140px,180px) 110px 92px!important;gap:20px!important;align-items:center!important;min-height:70px!important;padding:15px 12px!important;border-top:1px solid var(--hair-1)!important;background:transparent!important}
#cat-full .fc-row:hover{background:#f2f9f8!important}
#cat-full .fc-row:not(.fc-row--multi) .fc-name{grid-column:1 / 3}
#cat-full .fc-row:not(.fc-row--multi) .fc-price{grid-column:3}
#cat-full .fc-row:not(.fc-row--multi) .fc-add-btn{grid-column:4}
#cat-full .fc-name{color:var(--ink)!important;font-family:var(--f-text),sans-serif!important;font-size:15px!important;font-weight:600!important;line-height:1.35!important;min-width:0!important}
#cat-full .fc-name::after{content:"Overseas shipment · ~2–3 weeks";display:block;margin-top:4px;color:var(--body)!important;font-size:11px!important;font-weight:400!important;letter-spacing:.01em!important}
#cat-full .fc-dose-tag{display:block!important;margin:4px 0 0!important;color:var(--body)!important;font:400 12px/1.3 var(--f-text),sans-serif!important}
#cat-full .fc-dose{width:100%!important;max-width:none!important;min-height:42px!important;background:#fff!important;border:1px solid #cbdad8!important;border-radius:8px!important;color:var(--ink)!important;padding:8px 10px!important;font:500 13px var(--f-text),sans-serif!important}
#cat-full .fc-price{color:var(--ink)!important;font:700 18px/1 var(--f-text),sans-serif!important;white-space:nowrap!important;min-width:0!important}
#cat-full .fc-price::after{content:" / kit";color:var(--body)!important;font:400 11px var(--f-mono),monospace!important}
#cat-full .fc-category--btl .fc-price::after{content:" / pack"!important}
#cat-full .fc-add-btn{background:var(--teal)!important;color:#fff!important;border:1px solid var(--teal)!important;border-radius:8px!important;min-height:44px!important;padding:10px 13px!important;font:700 12px/1 var(--f-text),sans-serif!important;text-transform:none!important;letter-spacing:0!important;cursor:pointer!important;transition:background .15s ease,transform .15s ease!important}
#cat-full .fc-add-btn:hover{background:var(--navy,#152333)!important;border-color:var(--navy,#152333)!important;transform:translateY(-1px)!important}
#cat-full .fc-add-btn:focus-visible{outline:2px solid var(--teal)!important;outline-offset:3px!important}
#cat-full .fc-add-btn.is-added{background:#2d7b69!important;border-color:#2d7b69!important}
#cat-full .fc-column-labels{display:grid;grid-template-columns:minmax(220px,1fr) minmax(140px,180px) 110px 92px;gap:20px;padding:0 28px 8px;color:var(--body);font:600 10px/1 var(--f-mono),monospace;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:760px){
  #cat-full .fc-callout.fc-trust-chips{grid-template-columns:1fr!important}
  #cat-full .fc-column-labels{display:none!important}
  #cat-full .fc-rows{padding:0 10px 8px!important}
  #cat-full .fc-row{grid-template-columns:minmax(0,1fr) auto!important;gap:10px 12px!important;min-height:0!important;padding:15px 8px!important}
  #cat-full .fc-row .fc-name,#cat-full .fc-row:not(.fc-row--multi) .fc-name{grid-column:1 / -1!important}
  #cat-full .fc-row .fc-dose{grid-column:1!important;grid-row:2!important}
  #cat-full .fc-row .fc-price,#cat-full .fc-row:not(.fc-row--multi) .fc-price{grid-column:1!important;grid-row:2!important;align-self:center!important}
  #cat-full .fc-row.fc-row--multi .fc-price{grid-column:2!important}
  #cat-full .fc-row .fc-add-btn,#cat-full .fc-row:not(.fc-row--multi) .fc-add-btn{grid-column:2!important;grid-row:2!important;min-width:88px!important}
  #cat-full .fc-row.fc-row--multi .fc-add-btn{grid-column:1 / -1!important;grid-row:3!important;width:100%!important}
  #cat-full .fc-row:not(.fc-row--multi) .fc-add-btn{grid-column:2!important;grid-row:2!important}
}