:root {
  color-scheme: light;
  /* Palette: Charcoal & Mint. Accent doubles as --chip-bg so primary buttons
     carry the palette rather than staying neutral black. The wordmark stays
     navy #032047 — it's a PNG and can't be tokenised. */
  --bg: #ffffff;
  --bg-soft: #f2f5f4;
  --surface: #ffffff;
  --hero-1: #eff8f6;
  --hero-2: #dfeeea;
  --ink: #0e1614;
  --ink-deep: #1d2b27;
  --ink-deep-2: #0d1512;
  --muted: #566661;
  --muted-2: #65726c;
  --accent: #2a4640;
  --accent-2: #3d6459;
  --accent-soft: rgba(42, 70, 64, 0.1);
  --accent-fade: rgba(42, 70, 64, 0);
  --accent-line: rgba(42, 70, 64, 0.24);
  --data: #3f7a6a;
  --data-soft: rgba(63, 122, 106, 0.12);
  --data-fade: rgba(63, 122, 106, 0);
  --line: rgba(14, 22, 20, 0.08);
  --line-soft: rgba(14, 22, 20, 0.05);
  --shadow: 0 24px 60px rgba(14, 30, 26, 0.08);
  --shadow-sm: 0 10px 24px rgba(14, 30, 26, 0.06);
  /* Semantic, deliberately left off-palette: warnings and errors must not read
     as brand colour */
  --warn-bg: #fff7ed;
  --warn-border: #fed7aa;
  --warn-text: #9a3412;
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.08);
  --chip-bg: #2a4640;
  --chip-bg-hover: #3d6459;
  --radius-lg: 1.15rem;
  --radius-md: 0.7rem;
  --radius-sm: 0.5rem;
  --radius-pill: 999px;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* single-family site: this role is no longer monospace. Point it at a mono face here to reintroduce one. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Header height = 1.75rem padding top and bottom + the 2.4rem icon buttons,
     which are its tallest child. Anything that has to clear the sticky header
     derives from this rather than hardcoding a matching number. */
  --header-h: 5.9rem;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Anchor targets must clear the sticky header, or #quality lands underneath it */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  background-image: radial-gradient(rgba(12, 13, 18, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

blockquote {
  font-family: var(--font-display);
  font-weight: 500;
}

.card-price .amount, .detail-price-row .amount,
.spec-tile strong, .rating .count, .section-eyebrow, .notfound-code,
.qty-stepper span, .cart-line-total, .summary-row, .review-summary .score,
.breadcrumbs {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}

img, svg {
  max-width: 100%;
  display: block;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.container {
  /* 1560 matches .site-footer .container; the header is full-bleed. At 1220 the
     main column read noticeably narrower than the chrome around it. */
  width: min(1560px, calc(100% - 2.5rem));
  margin: 0 auto;
}

.container-narrow {
  width: min(880px, calc(100% - 2.5rem));
  margin: 0 auto;
}

/* ---------- Promo banner (scrolling marquee) ---------- */

@media (prefers-reduced-motion: reduce) {

}

main {
  position: relative;
}

/* ---------- Site header ---------- */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  position: sticky;
  top: 0;
  z-index: 40;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.05rem 0;
}

/* The header rides on the same frame as the homepage band set — now full-bleed
   with a 0.9rem gutter — rather than the 1220px content container, so the
   wordmark lines up with the panel edge below it at every viewport width. */
.site-header .header-inner {
  width: 100%;
  padding: 1.75rem 0.9rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}

/* Wordmark, not an icon — sized by height with width left to the ~4.9:1
   aspect, so a square box would squash it */
.brand-logo {
  height: 1.75rem;
  width: auto;
}

.site-footer .brand-logo {
  height: 1.6rem;
}

.nav-links {
  display: flex;
  gap: 1.9rem;
  flex-wrap: wrap;
}

.nav-links a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  position: relative;
  padding: 0.3rem 0;
  transition: color 0.2s var(--ease);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--accent);
  transition: right 0.25s var(--ease);
}

.nav-links a.active {
  color: var(--accent);
}

.nav-links a.active::after {
  right: 0;
}

.nav-links a:hover {
  color: var(--accent);
}

.nav-links a:hover::after {
  right: 0;
}

/* Mirrored copy of the header CTA, injected by initNavToggle and shown only
   inside the mobile menu. Must be scoped to .nav-links: a bare `.nav-cta` ties
   on specificity with `.btn { display: inline-flex }`, which is declared later
   and therefore wins — leaking the clone onto the desktop header, where
   `.nav-links a` also paints its label the same colour as its background. */
.nav-links .nav-cta {
  display: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-shrink: 0;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  position: relative;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.icon-btn:hover {
  border-color: var(--accent-line);
  color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}

.icon-btn:active {
  transform: translateY(0) scale(0.93);
}

.region-select {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.9rem 0.55rem 0.85rem;
  background-color: var(--surface);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--ink);
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23566661'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
}

.region-select:hover {
  border-color: var(--accent-line);
}

.icon-btn svg {
  width: 1.1rem;
  height: 1.1rem;
}

.cart-count {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  background: var(--chip-bg);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 800;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-toggle {
  display: none;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 0.8rem;
  width: 2.6rem;
  height: 2.6rem;
  align-items: center;
  justify-content: center;
}

.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  display: block;
  width: 1.15rem;
  height: 2px;
  background: var(--ink);
  margin: 3px 0;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}

.btn svg {
  width: 1.05rem;
  height: 1.05rem;
}

.btn-primary {
  background: var(--chip-bg);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--chip-bg-hover);
}

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

.btn-secondary:hover {
  border-color: var(--ink);
}

.btn-block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background:
    radial-gradient(ellipse 42% 44% at 84% 46%, var(--accent-soft), var(--accent-fade)),
    radial-gradient(ellipse 38% 42% at 10% 55%, var(--accent-soft), var(--accent-fade)),
    linear-gradient(180deg, var(--hero-1) 0%, var(--hero-2) 55%, var(--bg) 100%);
  overflow: hidden;
  padding: 4.5rem 0 3.5rem;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  box-shadow: var(--shadow-sm);
}

.dot-live {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #22c55e;
  display: inline-block;
}

.hero h1 {
  font-size: clamp(2.3rem, 4vw, 3.6rem);
  line-height: 1.15;
  letter-spacing: -0.028em;
  margin: 1.4rem 0 1.1rem;
  text-wrap: balance;
}

.hero p.lead {
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 560px;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* ---------- Homepage hero (asymmetric editorial layout) ---------- */

.hero-copy-split .hero-actions {
  justify-content: flex-start;
}

.hero-copy-split .lead {
  margin: 0;
  max-width: 480px;
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-copy-split .eyebrow-pill,
.hero-copy-split h1,
.hero-copy-split .lead,
.hero-copy-split .hero-actions {
  animation: heroFadeUp 0.7s var(--ease) both;
}

.hero-copy-split .eyebrow-pill { animation-delay: 0.05s; }
.hero-copy-split .lead { animation-delay: 0.3s; }
.hero-copy-split .hero-actions { animation-delay: 0.42s; }

/* True alpha cutout — no blend mode needed, and the containers' drop-shadows
   now follow the vial silhouette rather than a rectangle */

/* ---------- Catalog hero band (shop / research) ---------- */

.catalog-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 42% 44% at 84% 46%, var(--accent-soft), var(--accent-fade)),
    radial-gradient(ellipse 38% 42% at 10% 55%, var(--accent-soft), var(--accent-fade)),
    linear-gradient(180deg, var(--hero-1) 0%, var(--hero-2) 55%, var(--bg) 100%);
  padding: 3.75rem 0 2.75rem;
}

.catalog-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 620px;
}

.catalog-hero h1 {
  margin: 1rem 0 0.9rem;
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.026em;
  text-wrap: balance;
}

.catalog-hero .lead {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 56ch;
  margin: 0;
}

/* Higher opacity than before: this is now a real cutout, and at 0.5 the old
   drawn vial read as a smudge rather than a product. */
.catalog-hero-vial {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 7%;
  width: clamp(110px, 12vw, 168px);
  transform: translateY(-50%) rotate(8deg);
  opacity: 0.92;
  filter: drop-shadow(0 26px 34px rgba(18, 35, 46, 0.18));
  pointer-events: none;
}

.hero-floats {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.float-vial {
  position: absolute;
}

.float-photo {
  display: block;
  width: 100%;
  height: auto;
}

/* Baseline geometry, sized for the short `.hero-compact` band that about,
   membership, partners and 404 share. The contact hero overrides it below with
   a taller, more dramatic composition. */
.fv-1 {
  --tilt: -13deg;
  width: clamp(90px, 10vw, 150px);
  top: 14%;
  left: 4%;
  filter: drop-shadow(0 25px 32px rgba(18, 35, 46, 0.15));
  animation: fvIn 0.9s var(--ease) 0.15s both, fvFloat1 6.4s ease-in-out 1.05s infinite;
}

.fv-2 {
  --tilt: -24deg;
  width: clamp(70px, 7vw, 105px);
  top: 46%;
  left: 12%;
  opacity: 0.78;
  filter: drop-shadow(0 18px 24px rgba(18, 35, 46, 0.12));
  animation: fvIn 0.9s var(--ease) 0.3s both, fvFloat2 5.2s ease-in-out 1.2s infinite;
}

.fv-3 {
  --tilt: 17deg;
  width: clamp(90px, 10vw, 150px);
  top: 10%;
  right: 5%;
  filter: drop-shadow(0 25px 32px rgba(18, 35, 46, 0.15));
  animation: fvIn 0.9s var(--ease) 0.24s both, fvFloat3 5.9s ease-in-out 0.85s infinite;
}

.fv-4 {
  --tilt: -8deg;
  width: clamp(70px, 7vw, 105px);
  top: 48%;
  right: 13%;
  opacity: 0.78;
  filter: drop-shadow(0 18px 24px rgba(18, 35, 46, 0.12));
  animation: fvIn 0.9s var(--ease) 0.38s both, fvFloat4 6.8s ease-in-out 1.4s infinite;
}

/* The tall support hero has room for real depth: one bottle forward and
   bleeding off the left edge, the rest receding. `top: auto` is required
   wherever the baseline set `top` and this anchors to `bottom` instead. */
/* Each pair is separated on both axes: the upper float sits high and further
   inboard, the lower one sits low and closer to the edge, so they never stack
   or read as a cluster. */
.hero-spotlight .fv-1 {
  width: clamp(105px, 11vw, 175px);
  top: auto;
  bottom: 3%;
  left: 6%;
  z-index: 2;
  filter: drop-shadow(0 28px 34px rgba(18, 35, 46, 0.18));
}

.hero-spotlight .fv-2 {
  width: clamp(56px, 5.6vw, 88px);
  top: 6%;
  left: 15%;
  opacity: 0.72;
}

.hero-spotlight .fv-3 {
  width: clamp(78px, 8vw, 124px);
  top: 6%;
  right: 8%;
  filter: drop-shadow(0 22px 28px rgba(18, 35, 46, 0.15));
}

.hero-spotlight .fv-4 {
  width: clamp(62px, 6.2vw, 98px);
  top: auto;
  bottom: 4%;
  right: 16%;
  opacity: 0.78;
}

/* Each float keeps its tilt inside every keyframe — transform is one property,
   so a separate rotate() declaration would be overwritten by the animation */
/* Every keyframe here must restate the tilt. transform is a single property,
   so an entrance that only moved Y would end at the element's own transform —
   upright — and the bottle would visibly snap to its angle the moment the
   float animation took over. The explicit `to` is transform-only on purpose:
   adding `opacity: 1` would override the 0.78 depth on fv-2 and fv-4. */
@keyframes fvIn {
  from { opacity: 0; transform: rotate(var(--tilt, 0deg)) translateY(26px) scale(0.94); }
  to { transform: rotate(var(--tilt, 0deg)) translateY(0) scale(1); }
}

@keyframes fvFloat1 {
  0%, 100% { transform: rotate(var(--tilt, 0deg)) translateY(0); }
  50% { transform: rotate(var(--tilt, 0deg)) translateY(-18px); }
}

@keyframes fvFloat2 {
  0%, 100% { transform: rotate(var(--tilt, 0deg)) translateY(0); }
  50% { transform: rotate(var(--tilt, 0deg)) translateY(-13px); }
}

@keyframes fvFloat3 {
  0%, 100% { transform: rotate(var(--tilt, 0deg)) translateY(0); }
  50% { transform: rotate(var(--tilt, 0deg)) translateY(-15px); }
}

@keyframes fvFloat4 {
  0%, 100% { transform: rotate(var(--tilt, 0deg)) translateY(0); }
  50% { transform: rotate(var(--tilt, 0deg)) translateY(-11px); }
}

/* The two back-layer floats cost the most and read the least on a phone. The
   survivors must stay scoped to .hero-spotlight — an unscoped .fv-1 here would
   lose to .hero-spotlight .fv-1 above on specificity and never apply. */
@media (max-width: 720px) {
  .fv-2,
  .fv-4 {
    display: none;
  }

  .hero-spotlight .fv-1 {
    width: 108px;
    left: -6%;
    bottom: 2%;
    opacity: 0.5;
  }

  .hero-spotlight .fv-3 {
    width: 88px;
    right: -4%;
    top: 6%;
    opacity: 0.5;
  }
}

.scroll-hint {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: 3rem;
  color: var(--muted-2);
  animation: bob 2.2s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* ---------- Homepage inset bands ---------- */

/* Two alternating half-and-half bands. Each half is a rounded panel floating
   on a tinted ground with a gutter between, so the page reads as composed
   cards rather than one hard architectural seam. */
.band-set {
  width: 100%;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: var(--bg-soft);
}

.inset-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

/* Taller than the content strictly needs: the floating bottles sit at 21% and
   80%, so panel height is what buys them clearance from the clipped edges. */
.inset-panel {
  border-radius: 1.2rem;
  overflow: hidden;
  min-height: clamp(22rem, 38vw, 32rem);
}

.inset-copy {
  background: var(--surface);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.8rem, 4vw, 3.4rem);
}

.inset-copy h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.inset-copy h2 {
  margin: 0.5rem 0 0.55rem;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.inset-copy .lead {
  margin: 0 0 1.6rem;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.2vw, 1.06rem);
  line-height: 1.6;
  max-width: 32rem;
  text-wrap: pretty;
}

.inset-copy > p {
  margin: 0 0 1.5rem;
  color: var(--muted);
  max-width: 34rem;
}

.inset-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 2.6rem);
  background: radial-gradient(ellipse 62% 54% at 26% 18%, #f4fbf9, rgba(244, 251, 249, 0) 72%), radial-gradient(ellipse 54% 48% at 82% 78%, #eef7f5, rgba(238, 247, 245, 0) 70%), linear-gradient(155deg, #e9f4f1 0%, #f6fbfa 52%, #ffffff 100%);
}

/* Sized by height, not width — the two renders have slightly different aspect
   ratios, so matching on width would leave them visibly unequal in the frame */
.inset-vial {
  width: auto;
  filter: drop-shadow(0 26px 34px rgba(18, 35, 46, 0.2));
}

/* Scattered across the panel rather than clustered. Each bottle is placed by
   its centre — top/left mark the centre point and the translate pulls it back
   over that point, so changing a size never drifts the placement. Lighter
   shadow than the cluster used, since these are much smaller objects. */
/* The tilt lives in a custom property so the centring translate is written
   once — each bottle only declares its own angle. Order matters: translate
   first, then rotate, so the bottle spins about its own centre and the mark
   it sits on never moves. */
.inset-vial-1,
.inset-vial-2,
.inset-vial-3,
.inset-vial-4,
.inset-vial-5,
.inset-vial-6,
.inset-vial-7,
.inset-vial-8 {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
  filter: drop-shadow(0 16px 22px rgba(18, 35, 46, 0.18));
}

/* The drift has to restate the centring translate and the tilt — transform is
   a single property, so a keyframe that only moved Y would throw away both.
   `--lift` is signed: negative floats up, positive floats down. */
@keyframes vialFloat {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
  }
  50% {
    transform: translate(-50%, calc(-50% + var(--lift, -10px))) rotate(var(--tilt, 0deg));
  }
}

/* A second waveform: peaks early and eases back through a shallow second rise
   instead of a symmetric return. Two shapes mean the bottles differ in how
   they move, not just in when — a single curve at four speeds still reads as
   one motion repeated. Peak amplitude is unchanged, so clearances hold. */
@keyframes vialFloatAlt {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
  }
  38% {
    transform: translate(-50%, calc(-50% + var(--lift, -10px))) rotate(var(--tilt, 0deg));
  }
  72% {
    transform: translate(-50%, calc(-50% + var(--lift, -10px) * 0.35)) rotate(var(--tilt, 0deg));
  }
}

/* Third shape: the inverse of Alt. Drifts up slowly, peaks late at 62%, then
   drops back over the shorter remainder — a long climb and a quicker settle. */
@keyframes vialFloatLate {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
  }
  28% {
    transform: translate(-50%, calc(-50% + var(--lift, -10px) * 0.28)) rotate(var(--tilt, 0deg));
  }
  62% {
    transform: translate(-50%, calc(-50% + var(--lift, -10px))) rotate(var(--tilt, 0deg));
  }
}

/* Fourth shape: two rises per cycle, the second only two-thirds as high, so it
   bobs rather than swings. Peak is still exactly `--lift`, as in all four. */
@keyframes vialFloatTwice {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
  }
  26% {
    transform: translate(-50%, calc(-50% + var(--lift, -10px))) rotate(var(--tilt, 0deg));
  }
  48% {
    transform: translate(-50%, calc(-50% + var(--lift, -10px) * 0.18)) rotate(var(--tilt, 0deg));
  }
  70% {
    transform: translate(-50%, calc(-50% + var(--lift, -10px) * 0.68)) rotate(var(--tilt, 0deg));
  }
}

/* Sizes are capped by how much room each mark leaves before the panel clips.
   The bottom pair sit at 79–80%, so their own height is what limits them.
   Durations share no common factor, so the four never fall back into step. */








/* Second pass, filling the gaps between the first four. Sized a shade smaller
   so the panel reads as depth rather than a uniform grid. 6 and 7 sit slightly
   inboard of their marks — at 91% and 7.5% their rotated bounding boxes clip
   the panel edge once the vw term governs on mid-width screens. */







/* Absolutely positioned rather than centred by the flex parent, so it can sit
   off-centre toward the copy and carry a tilt. Bigger shadow than the small
   floats — the base one was tuned for bottles a third this size. */
/* Tight diagonal cluster with a dominant hero vial, echoing the reference
   composition: one product forward and large, the rest receding up-right.
   All seven keep the brand colour: hue-rotate shifted the silver caps and the navy wordmark too, not just the glass, so per-product colour needs real artwork rather than a filter. */
.inset-vial-1 {
  --tilt: -9deg; --lift: -10px; left: 33%; top: 64%; z-index: 6;
  height: clamp(11.5rem, 21vw, 17.5rem);
  filter: drop-shadow(0 30px 38px rgba(18, 35, 46, 0.24));
  animation: vialFloat 4.7s ease-in-out -1.3s infinite;
}
.inset-vial-2 {
  --tilt: 10deg; --lift: -12px; left: 57%; top: 36%; z-index: 5;
  height: clamp(8.4rem, 15.4vw, 12.6rem);
  filter: drop-shadow(0 20px 26px rgba(18, 35, 46, 0.2));
  animation: vialFloatAlt 6.9s cubic-bezier(0.42, 0, 0.58, 1) -4.1s infinite;
}
.inset-vial-3 {
  --tilt: -20deg; --lift: -14px; left: 17%; top: 38%; z-index: 4;
  height: clamp(7.8rem, 14.2vw, 11.6rem);
  filter: drop-shadow(0 20px 26px rgba(18, 35, 46, 0.2));
  animation: vialFloatLate 9.1s cubic-bezier(0.37, 0, 0.63, 1) -6.6s infinite;
}
.inset-vial-4 {
  --tilt: 17deg; --lift: -11px; left: 76%; top: 58%; z-index: 4;
  height: clamp(7rem, 12.8vw, 10.4rem);
  filter: drop-shadow(0 18px 24px rgba(18, 35, 46, 0.18));
  animation: vialFloatTwice 11.3s ease-in-out -9.4s infinite;
}
.inset-vial-6 {
  --tilt: -6deg; --lift: -9px; left: 70%; top: 19%; z-index: 3; opacity: 0.94;
  height: clamp(5.4rem, 9.8vw, 8rem);
  filter: drop-shadow(0 14px 20px rgba(18, 35, 46, 0.16));
  animation: vialFloatTwice 7.7s cubic-bezier(0.42, 0, 0.58, 1) -5.9s infinite;
}
.inset-vial-7 {
  --tilt: 14deg; --lift: -13px; left: 11%; top: 66%; z-index: 3; opacity: 0.92;
  height: clamp(5.8rem, 10.6vw, 8.6rem);
  filter: drop-shadow(0 14px 20px rgba(18, 35, 46, 0.16));
  animation: vialFloat 10.1s ease-in-out -3.7s infinite;
}
.inset-vial-8 {
  --tilt: -15deg; --lift: -11px; left: 88%; top: 31%; z-index: 2; opacity: 0.88;
  height: clamp(5rem, 9vw, 7.4rem);
  filter: drop-shadow(0 12px 18px rgba(18, 35, 46, 0.14));
  animation: vialFloatAlt 12.7s cubic-bezier(0.37, 0, 0.63, 1) -8.3s infinite;
}
.inset-vial-solo {
  position: absolute;
  left: 70%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-14deg);
  height: clamp(15rem, 29vw, 26rem);
  filter: drop-shadow(0 34px 44px rgba(18, 35, 46, 0.22));
}

.guarantee-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 34rem;
}

.guarantee-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--row-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow: var(--shadow-sm);
}

.guarantee-icon {
  width: 2.3rem;
  height: 2.3rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--row-tint);
  color: var(--row-accent);
}

.guarantee-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.guarantee-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.guarantee-text strong {
  font-size: 0.95rem;
  font-weight: 600;
}

.guarantee-text > span {
  font-size: 0.85rem;
  color: var(--muted);
}

.guarantee-cta {
  align-self: flex-start;
  margin-top: 1.5rem;
}

/* The art panel is decorative, so it yields first — it drops to a shallow
   banner rather than eating half a phone screen. Copy leads in both bands
   once stacked, so the second band's art moves below its text. */
@media (max-width: 860px) {
  .inset-band {
    grid-template-columns: 1fr;
  }

  .inset-panel {
    min-height: 0;
  }

  .inset-art {
    min-height: 16rem;
    padding: 1.6rem 1rem;
    order: 2;
  }

  /* Shallow banner leaves far less headroom than the desktop panel, so the
     drift scales down with it rather than clipping at the top edge */
  .inset-vial-1,
  .inset-vial-2,
  .inset-vial-3,
  .inset-vial-4,
  .inset-vial-5,
  .inset-vial-6,
  .inset-vial-7,
  .inset-vial-8 {
    --lift: -7px;
  }

  /* All eight survive — the banner is wide even on a phone, so only the
     heights come down. The second four stay smaller to keep the gaps legible
     at this size rather than closing into a solid band of glass. */
  .inset-vial-1 { height: 8.4rem; }
  .inset-vial-2 { height: 5.6rem; }
  .inset-vial-3 { height: 5.2rem; }
  .inset-vial-4 { height: 4.7rem; }
  .inset-vial-6 { height: 3.7rem; }
  .inset-vial-7 { height: 4rem; }
  .inset-vial-8 { height: 3.5rem; }

  .inset-vial-solo {
    height: 11rem;
  }
}

/* ---------- Order tracker strip ---------- */

.tracker-strip {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  max-width: 900px;
  padding: 0 0 2.5rem;
}

.tracker-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.5rem;
  text-decoration: none;
  color: var(--ink);
}

/* Used where the card heads a form rather than acting as a single link row */
.tracker-card.stacked {
  align-items: flex-start;
}

.tracker-form {
  margin-top: 1rem;
}

.tracker-icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tracker-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--accent);
}

.tracker-text {
  flex: 1;
}

.tracker-text strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.tracker-text span {
  color: var(--muted);
  font-size: 0.9rem;
}

.tracker-arrow {
  color: var(--muted-2);
  flex-shrink: 0;
}

/* ---------- Sections ---------- */

.section {
  padding: 4rem 0;
}

.section-tight {
  padding: 2.5rem 0;
}

/* Tinted bands fade into the surrounding page instead of butting against it
   with a hard 1px rule at both edges */
.section-tint {
  position: relative;
  background: var(--bg-soft);
}

.section-tint::before,
.section-tint::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3.5rem;
  pointer-events: none;
}

.section-tint::before {
  top: 0;
  background: linear-gradient(180deg, var(--bg) 0%, transparent 100%);
}

.section-tint::after {
  bottom: 0;
  background: linear-gradient(0deg, var(--bg) 0%, transparent 100%);
}

.section-tint > * {
  position: relative;
  z-index: 1;
}

/* ---------- Layout utilities ---------- */

/* Pairs a title section with the content section directly beneath it */
.section-flush-top {
  padding-top: 0;
}

/* Hero variant for pages whose content starts immediately below the band */
.hero-compact {
  padding-bottom: 2.5rem;
}

/* Standalone page heading (cart, legal pages) */
.page-title {
  margin: 0.5rem 0 1.8rem;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  letter-spacing: -0.022em;
  text-wrap: balance;
}

/* Tighter variant when a subtitle line follows immediately */
.page-title.tight {
  margin-bottom: 0.3rem;
}

.table-scroll {
  overflow-x: auto;
}

.table-note {
  margin: 1rem 0 0;
  color: var(--muted-2);
  font-size: 0.85rem;
  line-height: 1.6;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 2.2rem;
  flex-wrap: wrap;
}

.section-head h2 {
  margin: 0.5rem 0 0;
  /* Wider display range and tighter tracking, so headings sit further from body copy given both share the Inter family. Inter is narrower than the geometric face it replaced, so display sizes carry more negative tracking to hold together. */
  font-size: clamp(2rem, 3vw, 2.95rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.section-head p {
  margin: 0.6rem 0 0;
  color: var(--muted);
  max-width: 46ch;
}

.section-eyebrow {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.center {
  text-align: center;
}

.center .section-head {
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------- Category pills ---------- */

/* Filters and the result count share a baseline, so the count no longer floats
   between the pills and the grid with a negative margin holding it up. */
.category-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-top: 1.1rem;
  margin-bottom: 1.75rem;
  border-top: 1px solid var(--line-soft);
}

.category-row {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  flex: 1;
  margin-bottom: 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease);
}

.pill:hover {
  border-color: var(--accent-line);
}

.pill:active {
  transform: scale(0.96);
}

.pill.active {
  background: var(--chip-bg);
  color: #ffffff;
  border-color: var(--chip-bg);
}

/* ---------- Catalog controls ---------- */

.catalog-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.search-field {
  position: relative;
  flex: 1;
  min-width: 240px;
  max-width: 420px;
}

.search-field svg {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.05rem;
  height: 1.05rem;
  color: var(--muted-2);
}

/* Every control in the toolbar is pinned to one height so the row reads as a
   single instrument rather than three differently-sized widgets. */
.catalog-controls {
  --control-h: 2.9rem;
}

.search-field input {
  width: 100%;
  height: var(--control-h);
  padding: 0 1rem 0 2.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
}

.search-field input:focus {
  outline: 2px solid var(--accent-line);
  outline-offset: 1px;
  background: var(--surface);
}

.sort-field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 600;
  flex-shrink: 0;
}

/* Shared shell for the sort and price controls: label and input sit inside one
   bordered pill, so they read as a unit instead of loose text beside a widget */
.control-field {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  height: var(--control-h, 2.9rem);
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  flex-shrink: 0;
}

.control-field label {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}

.control-field label span {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.sort-field select {
  height: 100%;
  padding: 0 1.5rem 0 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
  font-weight: 600;
  color: var(--ink);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23566661'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}

.result-count {
  flex-shrink: 0;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  margin: 0.5rem 0 0;
}

.price-range-field input[type="range"] {
  width: 7rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.price-range-field {
  flex-shrink: 0;
}

.price-range-field label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.price-range-field #priceRangeValue {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 3.6rem;
}

.price-range-field input[type="range"] {
  width: 7.5rem;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ---------- Product grid & cards ---------- */

/* Column count is derived from available width rather than fixed per
   breakpoint: cards never compress below a readable width, the grid simply
   drops a column instead. Keeps product imagery from being squeezed. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1.4rem;
}

.product-grid.cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* Products are the only elevated surface — they read as the buyable thing */
.product-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 1.4rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease);
}

.product-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-5px);
  border-color: var(--line);
}

/* Full-bleed tinted plate, keyed to each product's own colour, with a hard
   "horizon" stop so the vial reads as standing on a studio floor. Stays light
   in both themes because the photo blends into it via multiply. */
.card-media {
  position: relative;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #ffffff;
}

.card-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.product-card:hover .card-media::before {
  opacity: 1;
}

.card-media .vial-svg {
  position: relative;
  width: 100%;
  max-width: 8.5rem;
  height: auto;
  transition: transform 0.35s var(--ease);
}

/* Photographed products sit where the generated vial would. The studio
   backdrop is a light grey, not white, so multiply would tint the card —
   instead the shot is presented as a rounded product tile in both themes. */
/* Locked to a 1:1 box with object-fit: contain — the photo always renders at
   its true proportions inside that square, so a narrow card letterboxes it
   rather than stretching or cropping it. Multiply lets the shot's light studio
   backdrop drop out into whatever tint sits behind it. */
.product-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.35s var(--ease);
}

/* Fills the plate edge to edge, matching the reference card treatment */
.card-media .product-photo {
  max-width: 100%;
  width: 100%;
}

/* Straight scale, no tilt — the photo is full-bleed now, so rotating it
   would swing its corners visibly through the crop */
.product-card:hover .card-media .product-photo {
  transform: scale(1.04);
}

.detail-media .product-photo {
  max-width: 100%;
  width: 100%;
  margin: 0;
}

.cart-thumb .product-photo {
  max-width: 3.4rem;
}

.checkout-item-thumb .product-photo {
  max-width: 2.4rem;
}

.product-card:hover .card-media .vial-svg {
  transform: scale(1.05) rotate(-1.5deg);
}

.card-badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.card-badge.spray {
  top: auto;
  bottom: 0.9rem;
  right: 0.9rem;
  left: auto;
  background: var(--accent-soft);
  color: var(--accent);
}

.card-body {
  padding: 0.6rem 0.9rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  flex: 1;
}

.card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.card-title-row h3 {
  margin: 0;
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.card-price {
  text-align: right;
  flex-shrink: 0;
}

.card-price .from {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0;
}

.card-price .amount {
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
}

/* Clamped to one line so every card in a row has identical content height.
   Without this the tallest subtitle sets the row height and `margin-top: auto`
   opens a gap above the button on every shorter card. */
.card-sub {
  margin: 0;
  color: var(--muted);
  font-size: 0.81rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-cta {
  /* auto keeps buttons aligned along the bottom if any card in a row ever
     ends up taller than its neighbours */
  margin-top: auto;
  background: var(--chip-bg);
  color: #ffffff;
  border-radius: var(--radius-pill);
  padding: 0.46rem 1rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s var(--ease);
}

.product-card:hover .card-cta {
  background: var(--chip-bg-hover);
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 1rem;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
}

.empty-state p {
  margin: 0 0 1.2rem;
}

/* ---------- Stock status ---------- */

.stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Overlaid on the image rather than sitting in the body — only 3 of 16
   products show it, and in the body it made those cards taller, forcing every
   other card in the row to stretch and open a gap above the button. */
.card-media .stock-pill {
  position: absolute;
  bottom: 0.8rem;
  left: 0.9rem;
  z-index: 2;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-sm);
}

.stock-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}

.stock-in {
  color: #15803d;
}

.stock-low {
  color: #b45309;
}

.stock-out {
  color: var(--muted-2);
}

/* Out-of-stock cards are not dimmed: the badge already says so, and fading
   the photo made the product itself look poor quality. */

.product-card.is-out-of-stock .card-price .amount {
  color: var(--muted-2);
}

.detail-stock-note {
  margin: 0.9rem 0 1.4rem;
}

.qty-stepper button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.clear-filters {
  margin-left: 0.7rem;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.clear-filters:hover {
  color: var(--accent-2);
}

/* ---------- Feature / trust grid ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.3rem;
}

.feature-card {
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 1.8rem;
}

.feature-icon {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  color: var(--accent);
}

.feature-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.feature-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.feature-card.link-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.feature-card.link-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent-line);
}

.feature-card.link-card .card-cta {
  margin-top: 0.7rem;
}

/* ---------- Lab band (dark, textured) ---------- */

.lab-band {
  position: relative;
  background: linear-gradient(180deg, var(--ink-deep) 0%, var(--ink-deep-2) 100%);
  color: #edf4f1;
  overflow: hidden;
}

.lab-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.55;
  pointer-events: none;
}

.lab-band > .container {
  position: relative;
  z-index: 1;
}

.lab-band .section-eyebrow {
  color: #8fc4b3;
}

.lab-band h2 {
  color: #ffffff;
}

.lab-band .section-head p {
  color: rgba(247, 240, 232, 0.66);
}

.lab-band .feature-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.lab-band .feature-card h3 {
  color: #ffffff;
}

.lab-band .feature-card p {
  color: rgba(247, 240, 232, 0.6);
}

.lab-band .feature-icon {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #8fc4b3;
}

/* Split-feature layout inside the dark band */
.lab-band .split-feature-lead p {
  color: rgba(247, 240, 232, 0.66);
}

.lab-band .spec-list li {
  border-color: rgba(255, 255, 255, 0.12);
}

.lab-band .spec-list-index {
  color: #8fc4b3;
}

.lab-band .spec-list h3 {
  color: #ffffff;
}

.lab-band .spec-list p {
  color: rgba(247, 240, 232, 0.62);
}

.lab-band .btn-secondary {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.lab-band .btn-secondary:hover {
  border-color: #8fc4b3;
  color: #8fc4b3;
}

/* ---------- Membership / CTA banner ---------- */

.cta-banner {
  background: linear-gradient(135deg, #0e1614 0%, #1d2b27 60%, var(--accent) 130%);
  color: #ffffff;
  border-radius: var(--radius-lg);
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.cta-banner h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.7rem, 2.4vw, 2.3rem); letter-spacing: -0.022em;
}

.cta-banner p {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  max-width: 46ch;
}

.cta-banner .btn-primary {
  background: #ffffff;
  color: #0c0d12;
}

.cta-banner .btn-primary:hover {
  background: #f0f0f5;
}

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

.faq-list {
  display: grid;
  gap: 0.8rem;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.3rem 1.3rem;
  background: var(--surface);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 0;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary .chevron {
  transition: transform 0.2s ease;
  color: var(--muted-2);
  flex-shrink: 0;
}

.faq-item[open] summary .chevron {
  transform: rotate(180deg);
}

.faq-item p {
  margin: 0 0 1.2rem;
  color: var(--muted);
  line-height: 1.7;
}

/* ---------- Contact hero ---------- */

/* The support page gets its own cool atmosphere rather than the warm cream ramp
   the shop and research heroes share — it reads as a different room, and the
   tint picks up the cyan in the product renders. Amber stays on the CTA so the
   page still resolves as Pepvoro. */
.hero-spotlight {
  --ch-pool: #dfeeea;
  --ch-pool-fade: rgba(223, 238, 234, 0);
  --ch-mist: #eff8f6;
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(82vh, 720px);
  /* Pools sit low and outboard, leaving clear paper up the centre column so the
     headline never fights a tint behind it */
  background:
    radial-gradient(ellipse 46% 52% at 6% 82%, var(--ch-pool), var(--ch-pool-fade) 72%),
    radial-gradient(ellipse 44% 50% at 96% 74%, var(--ch-pool), var(--ch-pool-fade) 72%),
    radial-gradient(ellipse 60% 46% at 50% 22%, var(--ch-mist), rgba(239, 248, 246, 0) 78%),
    linear-gradient(180deg, #f5fbf9 0%, #ffffff 62%, var(--bg) 100%);
  padding: 4.5rem 0 3.25rem;
  overflow: hidden;
}

/* Measure and size are set so the homepage's longest line, "Through Trusted
   Quality", clears in one pass — at a narrower measure it wraps and orphans
   the last word onto a third line. A short headline like "How can we help?"
   still lands on one line. */
.hero-spotlight .hero-inner {
  position: relative;
  z-index: 2;
  max-width: 54rem;
  margin: 0 auto;
  text-align: center;
}

.hero-spotlight h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.7rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 1.5rem 0 1.15rem;
  text-wrap: balance;
}

/* The top margin exists to clear the eyebrow pill. Where a page runs no pill,
   the headline leads and that margin would push the block off centre. */
.hero-spotlight h1:first-child {
  margin-top: 0;
}

.hero-spotlight .lead {
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.6;
  max-width: 33rem;
  margin: 0 auto;
  text-wrap: pretty;
}

/* The homepage runs two buttons here, the contact page one — centre and wrap
   so both compose the same way */
.hero-spotlight .hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.hero-spotlight .eyebrow-pill,
.hero-spotlight h1,
.hero-spotlight .lead,
.hero-spotlight .hero-actions,
.hero-spotlight .scroll-hint {
  animation: heroFadeUp 0.7s var(--ease) both;
}

.hero-spotlight .eyebrow-pill { animation-delay: 0.05s; }
.hero-spotlight h1 { animation-delay: 0.16s; }
.hero-spotlight .lead { animation-delay: 0.3s; }
.hero-spotlight .hero-actions { animation-delay: 0.42s; }

/* Bob is already carrying this one, so the entrance only handles the fade */
.hero-spotlight .scroll-hint {
  animation: heroFadeUp 0.7s var(--ease) 0.6s both, bob 2.2s ease-in-out 1.3s infinite;
  margin-top: 2.75rem;
}

.contact-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.3rem;
  margin-top: 1rem;
}

.contact-method {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.8rem;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.contact-method .feature-icon {
  margin-bottom: 1.3rem;
}

.contact-method h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

.contact-method p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.contact-form-wrap {
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-grid .full {
  grid-column: 1 / -1;
}

.form-grid label {
  display: grid;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  outline: 2px solid var(--accent-line);
  outline-offset: 1px;
}

.form-notice {
  min-height: 1.4rem;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 0.9rem;
}

/* ---------- Product detail ---------- */

.product-detail {
  padding: 3rem 0 4rem;
}

.breadcrumbs {
  display: flex;
  gap: 0.5rem;
  color: var(--muted-2);
  font-size: 0.85rem;
  margin-bottom: 1.8rem;
}

.breadcrumbs a {
  text-decoration: none;
  color: var(--muted);
}

.detail-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3rem;
}

/* --product-accent is set inline per product so each detail page carries the
   compound's own colour rather than all 16 looking identical */
.detail-media {
  background: #ffffff;
  border-radius: 1.4rem;
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  position: relative;
  aspect-ratio: 3 / 4;
  min-height: 0;
}

.detail-copy .section-eyebrow {
  color: var(--product-accent, var(--accent));
}

.detail-grid .spec-tile {
  border-top: 2px solid var(--accent-line); /* fallback */
  border-top-color: color-mix(in srgb, var(--product-accent, var(--accent)) 55%, transparent);
}

.detail-media .vial-svg {
  width: 100%;
  max-width: 14rem;
}

.detail-copy h1 {
  margin: 0.6rem 0 0.8rem;
  font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  letter-spacing: -0.024em;
}

.detail-copy .lead {
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 1.5rem;
}

.detail-price-row .amount {
  font-size: 1.8rem; letter-spacing: -0.02em;
  font-weight: 800;
}

.detail-price-row .unit {
  color: var(--muted);
  font-size: 0.9rem;
}

.qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.qty-stepper button {
  width: 2.6rem;
  height: 2.6rem;
  border: none;
  background: var(--surface);
  font-size: 1.1rem;
  cursor: pointer;
}

.qty-stepper button:hover {
  background: var(--bg-soft);
}

.qty-stepper span {
  width: 2.4rem;
  text-align: center;
  font-weight: 700;
}

.detail-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}

.compliance-note {
  display: flex;
  gap: 0.8rem;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
  color: var(--warn-text);
  font-size: 0.85rem;
  line-height: 1.6;
}

.compliance-note.centered {
  max-width: 820px;
  margin-inline: auto;
}

.compliance-note svg {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.detail-tabs {
  margin-top: 3rem;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
}

.tab-row {
  display: flex;
  gap: 1.8rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.6rem;
}

.tab-btn {
  background: none;
  border: none;
  padding: 0 0 1rem;
  font-weight: 700;
  color: var(--muted-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tab-btn.active {
  color: var(--ink);
  border-color: var(--ink);
}

.tab-panel {
  display: none;
  color: var(--muted);
  line-height: 1.75;
}

@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.tab-panel.active {
  display: block;
  animation: tabFadeIn 0.3s var(--ease);
}

/* Guards against a state mismatch between the class and the hidden attribute */
.tab-panel[hidden] {
  display: none;
}

.tab-panel ul {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.tab-panel li {
  padding-left: 1.4rem;
  position: relative;
}

.tab-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--accent);
}

.related-products {
  padding-top: 1rem;
}

/* ---------- Membership / partner page ---------- */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}

.plan-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.plan-card.featured {
  border-color: var(--ink);
  box-shadow: var(--shadow);
  position: relative;
}

.plan-card.featured::before {
  content: "Most popular";
  position: absolute;
  top: -0.85rem;
  left: 2rem;
  background: var(--chip-bg);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
}

.plan-name {
  font-weight: 800;
  font-size: 1.05rem;
}

.plan-price {
  font-size: 2.2rem; letter-spacing: -0.02em;
  font-weight: 800;
}

.plan-price span {
  font-size: 0.95rem;
  color: var(--muted);
  font-weight: 600;
}

.plan-list {
  display: grid;
  gap: 0.65rem;
  flex: 1;
}

.plan-list li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--muted);
  align-items: flex-start;
}

.plan-list svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}

.step-card {
  padding: 1.8rem;
}

.step-num {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  background: var(--chip-bg);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin-bottom: 1.1rem;
}

/* ---------- Product detail: bundles, assurance, trust chips ---------- */

.detail-media-chips {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.media-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.65rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.7rem 0 0.9rem;
}

.detail-tag {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
}

/* Controls left, price right — the price is the thing being changed by the
   controls beside it, so they share a row rather than stacking. */
.buy-block {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.2rem 0;
  margin-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.buy-specs {
  display: grid;
  gap: 0.8rem;
}

.buy-line {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.buy-key {
  min-width: 5rem;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* Each product ships in a single dose, so this states the size rather than
   offering a choice — a one-option selector would read as broken. */
.dose-pill {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--chip-bg);
  color: #fff;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  font-weight: 700;
}

.buy-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  margin-left: auto;
}

.buy-price .amount {
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
}

.buy-price .unit {
  font-size: 0.8rem;
  color: var(--muted);
}

.detail-was {
  color: var(--muted-2);
  font-size: 0.95rem;
  text-decoration: line-through;
}

.bundle-thumbs {
  display: flex;
  justify-content: center;
  gap: 0.1rem;
  height: 2.6rem;
  margin-bottom: 0.35rem;
}

/* True alpha cutouts, so no blend mode is needed to knock out a backdrop */
.bundle-thumb {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  filter: drop-shadow(0 3px 4px rgba(18, 35, 46, 0.18));
}

.bundle-flag-3 { background: #2f7d52; }
/* Darkened from #b07829, which put white on amber at only 3.77:1 */
.bundle-flag-5 { background: #9a6a24; }
.bundle-flag-10 { background: var(--ink); }

/* COA sits beside a wide buy button, matching the reference's split action row */
.detail-actions {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
}

.btn-coa {
  flex: 0 0 auto;
  padding-inline: 1.3rem;
}

.btn-buy {
  flex: 1;
  border-radius: var(--radius-pill);
  font-size: 1rem;
}

/* Purchase mode — a real choice that changes price and cart state, so it is
   built as a radio group rather than a decorative button */
.purchase-modes {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.purchase-mode {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.purchase-mode:hover {
  border-color: var(--accent-line);
}

.purchase-mode.selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.pm-dot {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  border-radius: 999px;
  border: 2px solid var(--line);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.purchase-mode.selected .pm-dot {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 1rem var(--accent);
}

.pm-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.pm-text strong {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}

.pm-flag {
  margin-left: auto;
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Its own card rather than tucked under the button above: the parent is a grid
   with a 0.5rem gap, so a -0.9rem pull would overlap that button by ~6px. */
.pm-interval {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
}

.pm-interval label {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.pm-interval select {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
}

.pm-note {
  flex: 1 1 14rem;
  font-size: 0.75rem;
  color: var(--muted-2);
}

.cart-sub {
  background: var(--accent);
  color: #fff;
}

/* Was rendering unstyled: its rows were styled but the container had no box,
   so it read as loose text beside the boxed item list */
.order-confirm-summary {
  align-self: start;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
}

.cart-sub-cancel {
  margin-top: 0.3rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.assurance-box {
  margin-top: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.assurance-box .assurance-list {
  margin: 0;
  gap: 0;
}

.assurance-box .assurance-list li {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
}

/* The time-sensitive row is the one that changes behaviour, so it carries a
   tint the other three don't */
.assurance-box .assurance-list li.is-primary {
  background: var(--accent-soft);
}

.assurance-box .assurance-list li.is-primary strong {
  color: var(--accent);
}

.bundle-each {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted-2);
}

.bundle-opt.selected .bundle-each {
  color: var(--ink);
}

.assurance-box .checkout-assure {
  margin: 0;
  padding: 0.75rem 1.1rem;
  background: var(--bg-soft);
  flex-wrap: wrap;
}

.checkout-assure b {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  padding: 0.22rem 0.4rem;
}

.checkout-assure span {
  margin-right: auto;
}

.bundle-block {
  margin: 1.4rem 0 1.2rem;
}

.bundle-label {
  display: block;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 0.6rem;
}

.bundle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
  gap: 0.5rem;
}

.bundle-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 0.7rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.bundle-opt:hover {
  border-color: var(--accent-line);
}

.bundle-opt.selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.bundle-flag {
  position: absolute;
  top: -0.55rem;
  left: 0.55rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bundle-qty {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.bundle-save {
  font-size: 0.76rem;
  color: var(--muted);
}

.bundle-opt.selected .bundle-save {
  color: var(--accent);
  font-weight: 600;
}

.assurance-list {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.assurance-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.assurance-list svg {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--accent);
}

.assurance-list span {
  display: flex;
  flex-direction: column;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}

.assurance-list strong {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.checkout-assure {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  font-size: 0.78rem;
  color: var(--muted-2);
}

.checkout-assure svg {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}

.cart-tier {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 600;
}

.summary-row.summary-save span:last-child {
  color: var(--accent);
  font-weight: 600;
}

/* The COA figures are generated to show the format. Saying so on the document
   itself matters more than saying it elsewhere, because this is the page people
   print and file. Warning colour, not brand colour — it must not read as trim. */
.coa-doc-sample {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: 1.4rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(154, 106, 36, 0.35);
  border-left: 3px solid #9a6a24;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: #faf1e3;
  color: #6d4a18;
  font-size: 0.82rem;
  line-height: 1.6;
}

.coa-doc-sample svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: #9a6a24;
}

.coa-doc-sample strong {
  color: #5a3c12;
  font-weight: 700;
}

/* ---------- Stock admin (internal) ---------- */

.stock-admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.stock-admin-stats {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.stock-admin-stats .stat {
  display: flex;
  flex-direction: column;
}

.stock-admin-stats strong {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stock-admin-stats span {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* The adjust column is wide; let it scroll rather than squash the table */
.stock-admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.stock-admin-table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
}

.stock-admin-table th {
  text-align: left;
  padding: 0.8rem 1rem;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}

.stock-admin-table td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

.stock-admin-table tr:last-child td {
  border-bottom: none;
}

.stock-admin-table strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
}

.stock-admin-cat {
  font-size: 0.76rem;
  color: var(--muted-2);
}

.stock-admin-units {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stock-admin-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.stock-step {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}

.stock-step.wide {
  width: auto;
  padding: 0 0.55rem;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.76rem;
}

.stock-step:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.stock-step:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.stock-set input {
  width: 4.5rem;
  height: 2rem;
  padding: 0 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--ink);
  text-align: right;
}

.stock-admin-flag {
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Internal-tool link: present in the footer so the page is reachable, but
   quiet enough not to read as a customer destination */
.footer-internal {
  margin-left: 0.6rem;
  padding-left: 0.6rem;
  border-left: 1px solid rgba(237, 244, 241, 0.2);
  color: rgba(237, 244, 241, 0.4);
  text-decoration: none;
  font-size: 0.78rem;
}

.footer-internal:hover {
  color: #8fc4b3;
}

.stock-admin-note {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--muted-2);
}

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

/* Dark ground, matching the lab band, so the footer closes the page instead of
   dissolving into the band-set tint above it. The navy wordmark is invisible
   here, so this footer uses the light render. */
.site-footer {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, var(--ink-deep) 0%, var(--ink-deep-2) 100%);
  color: #edf4f1;
  padding: 4rem 0 1.75rem;
}

.site-footer .container {
  width: min(1560px, 100%);
  padding: 0 0.9rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 2.5rem;
  padding-bottom: 2.75rem;
}

.footer-brand p {
  color: rgba(237, 244, 241, 0.62);
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 1.1rem 0 1.3rem;
  max-width: 34ch;
}

.footer-newsletter {
  display: flex;
  gap: 0.5rem;
  max-width: 21rem;
}

.footer-newsletter input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(237, 244, 241, 0.18);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  background: rgba(237, 244, 241, 0.06);
  color: #edf4f1;
  font-size: 0.88rem;
}

.footer-newsletter input::placeholder {
  color: rgba(237, 244, 241, 0.4);
}

.footer-newsletter input:focus {
  outline: 2px solid #8fc4b3;
  outline-offset: 1px;
}

.footer-newsletter button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: #8fc4b3;
  color: var(--ink-deep-2);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.footer-newsletter button:hover {
  background: #a8d5c6;
}

.footer-newsletter button:active {
  transform: scale(0.94);
}

.footer-newsletter button svg {
  width: 1.05rem;
  height: 1.05rem;
}

.footer-newsletter-notice {
  margin: 0.7rem 0 0;
  color: #8fc4b3;
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 1.2rem;
}

.footer-col h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 0 0 1.15rem;
  color: rgba(237, 244, 241, 0.5);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.footer-col ul {
  display: grid;
  gap: 0.75rem;
}

.footer-col a {
  text-decoration: none;
  color: rgba(237, 244, 241, 0.82);
  font-size: 0.92rem;
}

.footer-col a:hover,
.footer-col a[aria-current="page"] {
  color: #8fc4b3;
}

.footer-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.4rem;
  padding: 1.8rem 0;
  border-top: 1px solid rgba(237, 244, 241, 0.12);
  border-bottom: 1px solid rgba(237, 244, 241, 0.12);
  margin-bottom: 1.8rem;
}

.footer-trust-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(237, 244, 241, 0.78);
  font-size: 0.85rem;
  font-weight: 600;
}

.footer-trust-item svg {
  width: 1.3rem;
  height: 1.3rem;
  color: #8fc4b3;
  flex-shrink: 0;
}

/* The disclaimer is a regulatory notice, so it keeps a warning colour rather
   than the brand palette — it must not read as decoration. */
.footer-disclaimer {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  background: rgba(224, 180, 100, 0.08);
  border: 1px solid rgba(224, 180, 100, 0.28);
  border-left: 3px solid #e0b464;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.05rem 1.3rem;
  margin-bottom: 1.8rem;
}

.footer-disclaimer svg {
  width: 1.2rem;
  height: 1.2rem;
  color: #e0b464;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.footer-disclaimer h4 {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: #e0b464;
}

.footer-disclaimer p {
  margin: 0;
  color: rgba(237, 244, 241, 0.72);
  font-size: 0.82rem;
  line-height: 1.65;
}

.footer-disclaimer strong {
  color: #edf4f1;
  font-weight: 700;
}

.footer-disclaimer a {
  color: #e0b464;
  font-weight: 700;
  white-space: nowrap;
}

.footer-legal {
  border-top: 1px solid rgba(237, 244, 241, 0.12);
  padding-top: 1.6rem;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.footer-legal p {
  margin: 0;
  color: rgba(237, 244, 241, 0.5);
  font-size: 0.82rem;
}

.footer-pay {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.footer-pay span {
  color: rgba(237, 244, 241, 0.5);
  font-size: 0.82rem;
}

.footer-pay b {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(237, 244, 241, 0.82);
  background: rgba(237, 244, 241, 0.08);
  border: 1px solid rgba(237, 244, 241, 0.14);
  border-radius: 0.3rem;
  padding: 0.32rem 0.5rem;
}

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

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .footer-legal {
    justify-content: flex-start;
  }
}
/* ---------- Decorative background blobs ---------- */

.bg-blob {
  position: fixed;
  z-index: -1;
  border-radius: 999px;
  filter: blur(90px);
  pointer-events: none;
}

.bg-blob-a {
  top: -12%;
  right: -10%;
  width: 32rem;
  height: 32rem;
  background: radial-gradient(circle, var(--accent) 0%, var(--accent-fade) 70%);
  opacity: 0.1;
}

.bg-blob-b {
  bottom: -18%;
  left: -12%;
  width: 28rem;
  height: 28rem;
  background: radial-gradient(circle, var(--data) 0%, var(--data-fade) 70%);
  opacity: 0.09;
}

@media (max-width: 720px) {
  .bg-blob {
    display: none;
  }
}

/* ---------- Side rails (fills wide-viewport gutters) ----------
   A graduated scale down each gutter, like the side of a measuring cylinder or
   a chart axis. Drawn entirely with repeating gradients on body::before /
   ::after, so it needs no markup on any page and adds no elements to the DOM.
   The 28px tick pitch matches the body dot grid, so the two read as one system.
   Purely decorative: fixed, non-interactive, and only above 1400px where the
   gutters are wide enough to hold it. 1720 is the first width at which a
   1560px container still leaves more than the 74px the rails occupy. */
@media (min-width: 1720px) {
  body::before,
  body::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: 20px;
    /* -1 matches .bg-blob: behind every section, so the rails can never paint
       over an unpositioned dark band like .cta-banner or .shop-strip. */
    z-index: -1;
    pointer-events: none;
    opacity: 0.5;
    background-image:
      linear-gradient(to bottom, var(--line) 0 100%),
      repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 140px),
      repeating-linear-gradient(to bottom, var(--line-soft) 0 1px, transparent 1px 28px);
    background-repeat: no-repeat, repeat-y, repeat-y;
    background-size: 1px 100%, 18px 140px, 9px 28px;
  }
  body::before {
    left: 3.4rem;
    background-position: left top, left top, left top;
  }
  body::after {
    right: 3.4rem;
    background-position: right top, right top, right top;
  }
}

/* Wider still: let the background blobs sit in the gutters rather than behind
   the content, so the space reads as composed instead of blank. */
@media (min-width: 1600px) {
  .bg-blob-a { right: -4%; width: 36rem; height: 36rem; opacity: 0.14; }
  .bg-blob-b { left: -6%; width: 32rem; height: 32rem; opacity: 0.13; }
}

/* ---------- Accessibility ---------- */

/* Visually hidden but still announced by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  z-index: 100;
  background: var(--chip-bg);
  color: #ffffff;
  padding: 0.7rem 1.2rem;
  border-radius: 0.6rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 1rem;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.product-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Scroll reveal ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="stagger"] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

[data-reveal="stagger"].revealed > * {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="stagger"] > *:nth-child(8n+1) { transition-delay: 0.02s; }
[data-reveal="stagger"] > *:nth-child(8n+2) { transition-delay: 0.08s; }
[data-reveal="stagger"] > *:nth-child(8n+3) { transition-delay: 0.14s; }
[data-reveal="stagger"] > *:nth-child(8n+4) { transition-delay: 0.2s; }
[data-reveal="stagger"] > *:nth-child(8n+5) { transition-delay: 0.26s; }
[data-reveal="stagger"] > *:nth-child(8n+6) { transition-delay: 0.32s; }
[data-reveal="stagger"] > *:nth-child(8n+7) { transition-delay: 0.38s; }
[data-reveal="stagger"] > *:nth-child(8n+8) { transition-delay: 0.44s; }

@media (prefers-reduced-motion: reduce) {
  .scroll-hint {
    animation: none;
  }

  * {
    scroll-behavior: auto !important;
  }

  .hero-copy-split .eyebrow-pill,
  .hero-copy-split h1,
  .hero-copy-split .lead,
  .hero-copy-split .hero-actions,
  .hero-spotlight .eyebrow-pill,
  .hero-spotlight h1,
  .hero-spotlight .lead,
  .hero-spotlight .hero-actions,
  .hero-spotlight .scroll-hint,
  .float-vial,
  .hero-vial-primary,
  .hero-vial-secondary,
  .hero-vial-tertiary,
  [data-reveal],
  [data-reveal="stagger"] > *,
  .tab-panel.active,
  .cart-row,
  .cart-line-total,
  .side-rail-vial {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Preserve the composed layering when animation is disabled */

.fv-1 { transform: rotate(var(--tilt)) !important; }
  .fv-2 { transform: rotate(var(--tilt)) !important; opacity: 0.78 !important; }
  .fv-3 { transform: rotate(var(--tilt)) !important; }
  .fv-4 { transform: rotate(var(--tilt)) !important; opacity: 0.78 !important; }

  /* Only the drift is removed. These are deliberately kept out of the reset
     above, because `transform: none` would discard the centring translate and
     the tilt and drop all four bottles out of position. */
  .inset-vial-1,
  .inset-vial-2,
  .inset-vial-3,
  .inset-vial-4,
  .inset-vial-5,
  .inset-vial-6,
  .inset-vial-7,
  .inset-vial-8 {
    animation: none !important;
  }
}

/* ---------- Star rating ---------- */

.rating .count {
  color: var(--muted-2);
  font-size: 0.78rem;
  font-weight: 600;
}

.detail-copy .rating .count,
.review-summary .rating .count {
  font-size: 0.85rem;
}

/* ---------- Split feature (asymmetric alternative to a card grid) ---------- */

.split-feature {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 4rem;
  align-items: start;
}

.split-feature-lead {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
}

.split-feature-lead h2 {
  margin: 0.8rem 0 1rem;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem); letter-spacing: -0.022em;
  line-height: 1.2;
  text-wrap: balance;
}

.split-feature-lead p {
  margin: 0 0 1.6rem;
  line-height: 1.7;
}

/* Numbered rows, not boxes — the sequence carries the structure */
.spec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: spec;
}

.spec-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}

.spec-list li:last-child {
  border-bottom: 1px solid var(--line);
}

.spec-list-index {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 0.2rem;
}

.spec-list h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

.spec-list p {
  margin: 0;
  line-height: 1.65;
  font-size: 0.92rem;
}

@media (max-width: 1080px) {
  .split-feature {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .split-feature-lead {
    position: static;
  }
}

/* ---------- Lead pull-quote ---------- */

/* ---------- Timeline (alternative to a step card grid) ---------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.2rem;
  position: relative;
}

/* Connecting rule runs behind the markers */
.timeline::before {
  content: "";
  position: absolute;
  top: 1.35rem;
  left: 8%;
  right: 8%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--accent-line) 0 8px, transparent 8px 16px);
}

.timeline-step {
  position: relative;
  text-align: center;
  padding: 0 0.5rem;
}

.timeline-marker {
  position: relative;
  z-index: 1;
  width: 2.7rem;
  height: 2.7rem;
  margin: 0 auto 1.1rem;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 0 0 6px var(--bg);
}

.timeline-step h3 {
  margin: 0 0 0.45rem;
  font-size: 1.02rem;
}

.timeline-step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

@media (max-width: 720px) {
  .timeline {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .timeline::before {
    display: none;
  }

}

/* ---------- Trust bar ---------- */

.trust-bar {
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.trust-bar-label {
  display: block;
  text-align: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 1.1rem;
}

.trust-bar-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 2.4rem;
  row-gap: 0.9rem;
}

.trust-bar-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--muted);
  opacity: 0.7;
  white-space: nowrap;
  transition: opacity 0.2s var(--ease);
}

.trust-bar-name:hover {
  opacity: 1;
}

.trust-bar-name small {
  display: block;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 0.1rem;
}

@media (max-width: 720px) {
  .trust-bar-row {
    gap: 1.5rem;
  }
  .trust-bar-name {
    font-size: 0.88rem;
  }
}

/* ---------- Testimonials ---------- */

/* Quotes hang off a rule rather than sitting in a box */

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 90;
  background: var(--chip-bg);
  color: #ffffff;
  padding: 1rem 1.3rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  transform: translateY(1.4rem);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease, bottom 0.25s ease;
}

.toast.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.has-cookie-banner .toast {
  bottom: 6.5rem;
}

.toast svg {
  width: 1.2rem;
  height: 1.2rem;
  color: #4ade80;
  flex-shrink: 0;
}

.toast span {
  font-size: 0.9rem;
}

.toast a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
  }
}

/* ---------- Cookie consent ---------- */

.cookie-consent {
  position: fixed;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 95;
  max-width: 640px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.2rem 1.3rem;
  transform: translateY(1.6rem);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.cookie-consent.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.cookie-consent-inner {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.cookie-consent p {
  flex: 1 1 260px;
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
}

.cookie-consent p a {
  color: var(--accent);
  font-weight: 600;
}

.cookie-consent-actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

.cookie-consent .btn {
  padding: 0.55rem 1rem;
  font-size: 0.82rem;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent {
    transition: none;
  }
}

/* ---------- Research article ---------- */

#articleDetail h1 {
  margin: 0.6rem 0 0.8rem;
  font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  letter-spacing: -0.024em;
}

#articleDetail .lead {
  margin: 0;
}

.article-body {
  margin: 1.8rem 0 2rem;
}

.article-body h2 {
  font-size: 1.15rem;
  margin: 1.8rem 0 0.6rem;
}

.article-body h2:first-child {
  margin-top: 0;
}

.article-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.3rem;
}

/* Data, not a card: a heavy top rule instead of an enclosing box */
.stat-card {
  border-top: 3px solid var(--accent);
  padding: 1.2rem 0 0;
  text-align: left;
}

.stat-card strong {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 2.8vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.stat-card span {
  display: block;
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.term-list {
  margin: 0;
  display: grid;
  gap: 0.9rem;
}

.term-list dt {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}

.term-list dd {
  margin: 0.2rem 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--accent-line);
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.7;
}

/* ---------- Checkout ---------- */

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 2.5rem;
  align-items: start;
}

.checkout-section {
  padding-bottom: 1.8rem;
  margin-bottom: 1.8rem;
  border-bottom: 1px solid var(--line-soft);
}

.checkout-section:last-of-type {
  border-bottom: none;
}

.checkout-section h2 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.1rem;
  font-size: 1.1rem;
}

.checkout-step {
  width: 1.7rem;
  height: 1.7rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--chip-bg);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
}

.field-optional {
  color: var(--muted-2);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.field-error {
  display: block;
  margin-top: 0.35rem;
  color: var(--danger);
  font-size: 0.78rem;
  font-weight: 600;
}

/* Author `display: block` above beats the UA [hidden] rule, so restate it */
.field-error[hidden] {
  display: none;
}

.field-hint {
  margin: 0.9rem 0 0;
  color: var(--muted-2);
  font-size: 0.82rem;
}

.form-grid input[aria-invalid="true"] {
  border-color: var(--danger);
}

.prototype-notice {
  display: flex;
  gap: 0.8rem;
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.prototype-notice svg {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--accent);
}

.payment-method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.payment-method-label {
  font-weight: 700;
  font-size: 0.9rem;
}

.payment-brands {
  display: flex;
  gap: 0.4rem;
}

.payment-brand {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.4rem;
}

.checkbox-field {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
  cursor: pointer;
}

.checkbox-field input {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.checkout-summary {
  top: calc(var(--header-h) + 1rem);
}

.checkout-items {
  display: grid;
  gap: 0.9rem;
  padding-bottom: 1rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
}

.checkout-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.checkout-item-thumb {
  flex-shrink: 0;
  width: 2.6rem;
  display: flex;
  justify-content: center;
}

.checkout-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.checkout-item-info strong {
  font-size: 0.88rem;
}

.checkout-item-info span {
  color: var(--muted-2);
  font-size: 0.78rem;
}

.checkout-item-price {
  font-weight: 700;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.order-confirm-address {
  text-align: left;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.2rem;
}

.order-confirm-address-label {
  display: block;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 0.5rem;
}

.order-confirm-address address {
  font-style: normal;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* ---------- Order confirmation ---------- */

.order-confirm {
  text-align: center;
  padding: 1.5rem 0 3rem;
}

.order-confirm-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.2rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-confirm-icon svg {
  width: 2.1rem;
  height: 2.1rem;
}

.order-confirm .section-eyebrow {
  display: block;
  margin-bottom: 0.5rem;
}

.order-confirm h1 {
  font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.022em;
  margin: 0 0 0.6rem;
}

.order-confirm .lead {
  max-width: 480px;
  margin: 0 auto 2rem;
}

.order-confirm-grid {
  text-align: left;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  margin-bottom: 1.5rem;
}

.order-confirm-items {
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.4rem;
}

.order-confirm-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  padding: 0.5rem 0;
}

.order-confirm-qty {
  color: var(--muted-2);
  font-size: 0.85rem;
}

.order-confirm .compliance-note {
  text-align: left;
  margin-bottom: 1.8rem;
}

.order-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

/* ---------- Cart page ---------- */

.cart-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.cart-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 1.2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.3rem;
}

.cart-thumb {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 0.9rem;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cart-thumb .vial-svg {
  width: 2.6rem;
}

.cart-info h3 {
  margin: 0 0 0.25rem;
  font-size: 0.98rem;
}

.cart-info p {
  margin: 0;
  color: var(--muted-2);
  font-size: 0.82rem;
}

.cart-title-link {
  color: inherit;
  text-decoration: none;
}

.cart-info .qty-stepper {
  margin-top: 0.6rem;
}

@keyframes priceFlash {
  from { color: var(--accent); }
  to { color: var(--ink); }
}

.cart-line-total {
  font-weight: 800;
  text-align: right;
  min-width: 4.5rem;
  animation: priceFlash 0.6s var(--ease);
}

.cart-row {
  animation: tabFadeIn 0.35s var(--ease);
}

.cart-remove {
  background: none;
  border: none;
  color: var(--muted-2);
  cursor: pointer;
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.cart-remove:hover {
  color: var(--danger);
  background: var(--danger-soft);
}

.cart-remove svg {
  width: 1.05rem;
  height: 1.05rem;
}

.cart-row .qty-stepper button {
  width: 2.2rem;
  height: 2.2rem;
}

.cart-summary {
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 1.8rem;
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}

.cart-summary h2 {
  margin: 0 0 1.2rem;
  font-size: 1.15rem;
}

.cart-checkout-btn {
  margin-top: 1.2rem;
}

.cart-continue-btn {
  margin-top: 0.7rem;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  color: var(--muted);
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--line);
}

.summary-row.total {
  color: var(--ink);
  font-weight: 800;
  font-size: 1.05rem;
  border-bottom: none;
  padding-top: 1rem;
}

.cart-empty {
  text-align: center;
  padding: 4rem 1rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  color: var(--muted);
}

.cart-empty svg {
  width: 2.6rem;
  height: 2.6rem;
  color: var(--muted-2);
  margin-bottom: 1rem;
}

/* ---------- Reviews tab ---------- */

.review-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.4rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}

.review-summary .score {
  font-size: 2.2rem; letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--ink);
}

.review-summary-note {
  margin: 0.3rem 0 0;
}

.review-card {
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.review-card:last-child {
  border-bottom: none;
}

.review-card .review-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  gap: 1rem;
}

.review-card strong {
  font-size: 0.92rem;
  color: var(--ink);
}

.review-card time {
  color: var(--muted-2);
  font-size: 0.78rem;
}

.review-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

/* ---------- Legal / prose pages ---------- */

.legal-doc h2 {
  font-size: 1.3rem;
  margin: 2.2rem 0 0.8rem;
}

.legal-doc h2:first-child {
  margin-top: 0;
}

.legal-doc p,
.legal-doc li {
  color: var(--muted);
  line-height: 1.75;
  font-size: 0.96rem;
}

.legal-doc ul {
  display: grid;
  gap: 0.5rem;
  margin: 0.8rem 0;
  padding-left: 1.3rem;
  list-style: disc;
}

.legal-doc a,
.article-body a {
  color: var(--accent);
  font-weight: 600;
}

.legal-updated {
  color: var(--muted-2);
  font-size: 0.85rem;
  margin-top: 0.6rem;
}

/* ---------- 404 ---------- */

.notfound-code {
  font-size: 0.9rem;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ---------- COA lookup ---------- */

.coa-lookup-card {
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
}

.coa-lookup-form {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.coa-lookup-form input {
  flex: 1;
  min-width: 220px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}

.coa-lookup-form input:focus {
  outline: 2px solid var(--accent-line);
  outline-offset: 1px;
}

.coa-lookup-hint {
  color: var(--muted-2);
  font-size: 0.82rem;
  margin: 0.9rem 0 0;
}

.coa-result {
  margin-top: 2.5rem;
}

.coa-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  color: var(--muted);
}

.coa-empty svg {
  width: 2.4rem;
  height: 2.4rem;
  color: var(--muted-2);
  margin-bottom: 1rem;
}

.coa-empty .btn {
  margin-top: 1.2rem;
}

.coa-doc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 2.4rem;
}

.coa-doc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding-bottom: 1.6rem;
  border-bottom: 2px solid var(--ink);
}

.coa-doc-brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.coa-doc-brand img {
  width: 2.4rem;
  height: 2.4rem;
}

.coa-doc-brand strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
}

.coa-doc-brand span {
  display: block;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 0.15rem;
}

.coa-doc-meta {
  text-align: right;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  display: grid;
  gap: 0.3rem;
  color: var(--muted);
}

.coa-doc-meta strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.coa-doc-product {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--line);
}

.coa-doc-product div span {
  display: block;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 0.3rem;
}

.coa-doc-product div strong {
  font-size: 0.95rem;
}

.coa-doc-product a {
  color: var(--accent);
}

/* ---------- Chromatogram ---------- */

.chromatogram {
  margin: 1.8rem 0;
  padding: 1.2rem 1.2rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.chromatogram svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.chrom-grid,
.chrom-grid-v {
  stroke: var(--line-soft);
  stroke-width: 1;
}

.chrom-grid-v {
  stroke-dasharray: 2 5;
}

.chrom-axis {
  stroke: var(--line);
  stroke-width: 1;
}

.chrom-trace {
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.chrom-marker {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.55;
}

.chrom-label {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 9.5px;
  fill: var(--muted-2);
}

.chrom-axis-title {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--muted-2);
}

.chrom-callout {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
  fill: var(--accent);
}

.chromatogram figcaption {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--line);
  color: var(--muted-2);
  font-size: 0.78rem;
  line-height: 1.6;
}

.chromatogram figcaption strong {
  color: var(--ink);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}

/* Animate the trace being drawn, as an instrument would plot it */
@media (prefers-reduced-motion: no-preference) {
  .chrom-trace {
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    animation: chromDraw 1.8s var(--ease) 0.2s forwards;
  }
}

@keyframes chromDraw {
  to { stroke-dashoffset: 0; }
}

.coa-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8rem 0;
  font-size: 0.88rem;
}

.coa-table th {
  text-align: left;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line);
}

.coa-table td {
  padding: 0.75rem 0.8rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
}

.coa-table td:first-child {
  color: var(--ink);
  font-weight: 600;
}

.coa-table td:nth-child(4) {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.pricing-tier-table td:nth-child(4) {
  font-family: inherit;
  color: var(--muted);
}

.pricing-tier-table td:nth-child(3) {
  color: var(--accent);
  font-weight: 700;
}

.pricing-tier-featured td {
  background: var(--accent-soft);
}

.coa-pass {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  background: #d1fae5;
  color: #047857;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.coa-doc-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.6rem;
  flex-wrap: wrap;
}

.coa-signature span {
  display: block;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 0.3rem;
}

.coa-signature strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
}

.coa-doc-disclaimer {
  margin: 1.8rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px dashed var(--line);
  color: var(--muted-2);
  font-size: 0.78rem;
  line-height: 1.6;
}

/* The specimen notice is deliberately NOT hidden here — a printed and filed
   certificate is exactly where it needs to be visible. */
@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .catalog-hero,
  .coa-lookup-card,
  .cookie-consent,
  .toast,
  .coa-doc-footer .btn {
    display: none !important;
  }

  .coa-doc {
    box-shadow: none;
    border: none;
    padding: 0;
  }
}

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

@media (max-width: 1080px) {
  .feature-grid,
  .contact-methods,
  .step-grid,
  .plan-grid,
  .testimonial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-grid,
  .hero-grid-split {
    grid-template-columns: 1fr;
  }

.hero-copy-split .hero-actions {
    justify-content: center;
  }

  .hero-copy-split .lead {
    margin: 0 auto;
  }

.footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cart-layout,
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .cart-summary {
    position: static;
  }

  /* Summary moves above the form so totals are visible before filling it in */
  .checkout-summary {
    order: -1;
  }
}

@media (max-width: 860px) {
  .nav-links,
  .header-actions .btn-primary {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  body.nav-open .nav-links {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    flex-direction: column;
    padding: 1.2rem 1.25rem 1.6rem;
    border-bottom: 1px solid var(--line);
    gap: 1.1rem;
  }

/* Higher specificity than `.nav-links a` so button styling wins over link styling */
  .nav-links .nav-cta {
    display: inline-flex;
    justify-content: center;
    color: #ffffff;
    margin-top: 0.5rem;
  }

  .nav-links .nav-cta:hover {
    color: #ffffff;
  }

  .nav-links .nav-cta::after {
    display: none;
  }
}

@media (max-width: 720px) {
  .feature-grid,
  .contact-methods,
  .step-grid,
  .plan-grid,
  .footer-grid,
  .testimonial-grid,
  .coa-doc-product {
    grid-template-columns: 1fr;
  }

  .coa-doc-head {
    flex-direction: column;
  }

  .coa-doc-meta {
    text-align: left;
  }

  .coa-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .section-head,
  .catalog-controls {
    flex-direction: column;
    align-items: flex-start;
  }

  .cart-row {
    grid-template-columns: auto 1fr;
    row-gap: 0.8rem;
  }

  .cart-row .qty-stepper {
    grid-column: 2;
  }

  .cart-row .cart-line-total {
    text-align: left;
  }

  .toast {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }

  /* The banner wraps to several lines on narrow screens, so it needs more clearance */
  .has-cookie-banner .toast {
    bottom: 11.5rem;
  }

  .cookie-consent-actions {
    width: 100%;
  }

  .cookie-consent-actions .btn {
    flex: 1;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-grid .full {
    grid-column: 1;
  }

  .cta-banner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .fv-2, .fv-4 {
    display: none;
  }

  .catalog-hero-vial {
    display: none;
  }

  .catalog-hero-inner {
    max-width: none;
  }
}

@media (max-width: 520px) {
  .hero {
    padding: 3.5rem 0 2.5rem;
  }

  .fv-1, .fv-3 {
    width: 70px;
    opacity: 0.7;
  }

  /* Kept available on small screens — currency choice affects every price on the page */
  .region-select {
    padding: 0.5rem 1.5rem 0.5rem 0.6rem;
    font-size: 0.74rem;
    background-position: right 0.6rem center;
  }
}

/* ---------- Eligibility gate (REG-01) ---------- */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(8, 18, 15, 0.62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.24s var(--ease);
}
.age-gate.visible { opacity: 1; }
.age-gate.closing { opacity: 0; }
body.gate-open { overflow: hidden; }

.age-gate-panel {
  width: min(31rem, 100%);
  max-height: calc(100vh - 2.4rem);
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(8, 18, 15, 0.34);
  padding: 1.9rem 1.8rem 1.6rem;
  text-align: center;
  transform: translateY(0.8rem);
  transition: transform 0.24s var(--ease);
}
.age-gate.visible .age-gate-panel { transform: translateY(0); }

.age-gate-logo { display: block; margin: 0 auto 1.1rem; height: auto; }
.age-gate-panel h2 {
  margin: 0 0 0.7rem;
  font-size: 1.3rem;
  letter-spacing: -0.022em;
}
.age-gate-panel h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.age-gate-body p {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
  text-align: left;
}
.age-gate-actions {
  display: grid;
  gap: 0.5rem;
  margin: 1.1rem 0 0.9rem;
}
.age-gate-fine {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted-2, var(--muted));
}

@media (prefers-reduced-motion: reduce) {
  .age-gate, .age-gate-panel { transition: none; }
}

.order-confirm-note {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 46rem;
}

/* ---------- Static product fallback (SEO-01) ----------
   Generated into product-<id>.html so the content exists in the markup for
   crawlers and no-JS visitors. script.js replaces this block with the
   interactive version on load, so it is styled to read as a finished page
   rather than as a flash of unstyled content on the way there. */
.detail-static {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0.5rem 0 1rem;
}
.detail-static-img {
  display: block;
  width: min(15rem, 45%);
  height: auto;
  float: right;
  margin: 0 0 1.2rem 1.6rem;
  mix-blend-mode: multiply;
}
.detail-static-eyebrow {
  margin: 1.2rem 0 0.35rem;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.detail-static h1 {
  margin: 0 0 0.25rem;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  letter-spacing: -0.026em;
  line-height: 1.08;
}
.detail-static-sub {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  color: var(--muted);
}
.detail-static-price {
  margin: 0 0 1.1rem;
  font-size: 1.15rem;
}
.detail-static-price strong {
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}
.detail-static-desc {
  margin: 0 0 1.4rem;
  color: var(--muted);
  line-height: 1.65;
}
.detail-static-specs {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.45rem 1.4rem;
  margin: 0 0 1.4rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.92rem;
}
.detail-static-specs dt {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.16rem;
}
.detail-static-specs dd { margin: 0; }
.detail-static-highlights {
  margin: 0 0 1.4rem;
  padding-left: 1.1rem;
  color: var(--muted);
}
.detail-static-highlights li { margin-bottom: 0.3rem; }
.detail-static-note {
  margin: 0 0 1.4rem;
  padding: 0.9rem 1.1rem;
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  font-size: 0.88rem;
  color: var(--muted);
}
.detail-static-cta { margin: 0; }

@media (max-width: 560px) {
  .detail-static-img { float: none; width: 60%; margin: 0 auto 1.2rem; }
  .detail-static-specs { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .detail-static-specs dd { margin-bottom: 0.6rem; }
}

/* ---------- Dedicated FAQ page (CNT-08) ----------
   .faq-item is already styled as a <details> accordion card for the contact
   page. These rules are scoped under .faq-wrap so this page can render as an
   open, readable list without disturbing that. */
.faq-wrap { max-width: 48rem; }
.faq-intro {
  margin: 0 0 2rem;
  font-size: 1.02rem;
  color: var(--muted);
  line-height: 1.65;
}
.faq-wrap .faq-list {
  display: block;
  gap: 0;
  border-top: 1px solid var(--line-soft);
}
.faq-wrap .faq-item {
  border: none;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: none;
  padding: 1.5rem 0;
}
.faq-q {
  margin: 0 0 0.55rem;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
}
.faq-wrap .faq-item p.faq-a {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  font-size: 0.96rem;
}
.faq-footer {
  margin-top: 2.4rem;
  padding: 1.4rem 1.5rem;
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
}
.faq-footer h2 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
}
.faq-footer p { margin: 0; color: var(--muted); font-size: 0.94rem; }

/* ---------- COA explainer (CNT-07) ---------- */
.coa-explainer {
  margin-top: 3rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--line);
  max-width: 44rem;
}
.coa-explainer h2 {
  margin: 0 0 0.9rem;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  letter-spacing: -0.022em;
}
.coa-explainer h3 {
  margin: 2rem 0 0.6rem;
  font-size: 1.02rem;
  letter-spacing: -0.012em;
}
.coa-explainer p {
  margin: 0 0 1rem;
  color: var(--muted);
  line-height: 1.7;
  font-size: 0.96rem;
}
.coa-method-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.7rem 1.5rem;
  margin: 0 0 1rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.coa-method-list dt {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  padding-top: 0.2rem;
}
.coa-method-list dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.65;
}
.coa-callout {
  margin: 2rem 0 1.4rem;
  padding: 1.2rem 1.4rem;
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
}
.coa-callout h3 { margin: 0 0 0.45rem; }
.coa-callout p { margin: 0; }
.coa-effective {
  margin: 1.6rem 0 0;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2, var(--muted));
}
@media (max-width: 560px) {
  .coa-method-list { grid-template-columns: 1fr; gap: 0.2rem 0; }
  .coa-method-list dd { margin-bottom: 0.8rem; }
}

/* ---------- Static article fallback (SEO-01) ----------
   Generated into research-<slug>.html. script.js swaps in the interactive
   version on load; this is what crawlers and no-JS visitors read. */
.article-static { max-width: 44rem; margin: 0 auto; }
.article-static-eyebrow {
  margin: 1.2rem 0 0.3rem;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.article-static h1 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  letter-spacing: -0.024em;
  line-height: 1.1;
}
.article-static-summary {
  margin: 0 0 2rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--muted);
}
.article-static h2 {
  margin: 2.2rem 0 0.6rem;
  font-size: 1.15rem;
  letter-spacing: -0.018em;
}
.article-static p {
  margin: 0 0 1rem;
  color: var(--muted);
  line-height: 1.7;
  font-size: 0.96rem;
}
.article-static-terms {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem 1.5rem;
  margin: 0 0 1rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.article-static-terms dt {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 0.2rem;
}
.article-static-terms dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.65;
}
.article-static-note {
  margin: 2rem 0 1.4rem;
  padding: 0.9rem 1.1rem;
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  font-size: 0.88rem;
}
.article-static-cta { margin: 0; }
@media (max-width: 560px) {
  .article-static-terms { grid-template-columns: 1fr; gap: 0.15rem 0; }
  .article-static-terms dd { margin-bottom: 0.7rem; }
}

/* ---------- Featured conveyor belt ----------
   Two identical sets sit side by side; translating the track by -50% moves it
   exactly one set, so the seam never shows. Vertical padding is deliberate:
   overflow:hidden clips in both axes, and without it the card shadows and the
   hover lift would be sheared off. */
.belt {
  position: relative;
  /* Full-bleed: the belt is a direct child of .section, which has no width cap
     or horizontal padding, so it reaches both edges without 100vw - and 100vw
     would overflow by the scrollbar width on Windows. overflow:hidden here also
     means the track can never push the page sideways. */
  overflow: hidden;
  margin-top: 1.6rem;
  padding: 0.6rem 0 1.6rem;
}
.belt-track {
  display: flex;
  width: max-content;
  animation: beltRun var(--belt-duration, 60s) linear infinite;
}
.belt-set {
  display: flex;
  gap: 1.4rem;
  padding-right: 1.4rem;
}
.belt .product-card {
  flex: 0 0 auto;
  width: clamp(14.5rem, 21vw, 17rem);
}
/* Anything that stops the motion: pointer, keyboard focus, or the button. */
.belt:hover .belt-track,
.belt:focus-within .belt-track,
.belt.is-paused .belt-track {
  animation-play-state: paused;
}
@keyframes beltRun {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.belt-pause {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.72rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s var(--ease), color 0.25s var(--ease);
}
.belt:hover .belt-pause,
.belt:focus-within .belt-pause,
.belt.is-paused .belt-pause { opacity: 1; }
.belt-pause:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
.belt-pause:hover { color: var(--ink); }
.belt-pause-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.belt.is-paused .belt-pause-dot { background: var(--muted-2); }

/* Reduced motion: no travel at all. The belt becomes an ordinary horizontal
   scroller, the decorative duplicate is removed so nothing repeats, and the
   pause control has nothing left to control. */
@media (prefers-reduced-motion: reduce) {
  .belt-track { animation: none; }
  .belt {
    overflow-x: auto;
  }
  .belt-set[aria-hidden="true"] { display: none; }
  .belt-pause { display: none; }
}

@media (max-width: 640px) {
  .belt .product-card { width: 72vw; }
}

/* ---------- Shop header ----------
   Compact masthead: title and controls share one row instead of a tall hero,
   so the catalogue starts near the top of the page. */
.shop-head { padding: clamp(1.6rem, 3vw, 2.6rem) 0 0; }
.shop-head-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto;
  align-items: end;
  gap: 1rem 1.4rem;
  margin-bottom: 1.1rem;
}
.shop-eyebrow {
  margin: 0 0 0.35rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
/* The reference sets the second word in italic serif. Only the roman weights of
   one family are loaded, so weight carries the contrast instead — a faux italic
   would be the only other option and it looks synthetic. */
.shop-title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
  font-weight: 400;
}
.shop-title span { font-weight: 800; }

.shop-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin: 1.4rem 0 1.2rem;
}



/* ---------- Offer cards ---------- */
.offer-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.9rem;
  margin: 1.2rem 0 0.9rem;
}
.offer-card, .offer-wide {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.offer-card:hover, .offer-wide:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.offer-badge {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 3.1rem; height: 3.1rem;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent-line);
  font-size: 0.92rem; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1;
}
.offer-badge small {
  display: block;
  font-size: 0.5rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
.offer-icon {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 3.1rem; height: 3.1rem;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}
.offer-icon svg { width: 1.35rem; height: 1.35rem; }
.offer-body { display: block; min-width: 0; }
.offer-title {
  display: block;
  font-size: 0.95rem; font-weight: 700;
  letter-spacing: -0.014em;
  margin-bottom: 0.15rem;
}
.offer-text {
  display: block;
  font-size: 0.8rem; line-height: 1.5;
  color: var(--muted);
}
.offer-cta {
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
  font-size: 0.76rem; font-weight: 650;
  color: var(--accent);
  white-space: nowrap;
}
.offer-cta::after { content: " \203A"; }

.offer-wide {
  margin-bottom: 0.4rem;
  background: var(--bg-soft);
}
.offer-wide-mark {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
}
.offer-wide-body { flex: 1 1 18rem; min-width: 0; }
.offer-wide .btn { flex-shrink: 0; }

@media (max-width: 900px) {
  .shop-head-row { grid-template-columns: 1fr; align-items: stretch; }
  .shop-head-titles { margin-bottom: 0.2rem; }
}
@media (max-width: 640px) {
  .offer-card, .offer-wide { flex-wrap: wrap; }
  .offer-cta, .offer-wide .btn { margin-left: 0; width: 100%; }
  .offer-wide .btn { text-align: center; }
  .shop-strip-cta { margin-left: 0; }
}

/* ---------- Announcement banner ---------- */
.shop-strip {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding: 0.95rem 1.15rem 0.95rem 1.35rem;
  margin-bottom: 1.1rem;
  border-radius: 0.85rem;
  background: #10201a;
  color: #ffffff;
}
.shop-strip-title { font-size: 1.02rem; font-weight: 750; letter-spacing: -0.018em; }
/* the reference sets this word in an italic serif; only one roman family is
   loaded, so the accent is carried by weight and colour instead */
.shop-strip-title em { font-style: normal; font-weight: 400; color: #e0b45c; }
.shop-strip-text { font-size: 0.83rem; color: #9fb3aa; }
.shop-strip-right { margin-left: auto; display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.shop-strip-label {
  font-family: var(--font-mono);
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: #e0b45c;
}
.shop-strip-clock {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem; font-weight: 700;
  color: #ffffff;
}
.shop-strip-cta {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.34rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  color: #ffffff; text-decoration: none;
  font-size: 0.75rem; font-weight: 650;
  transition: background 0.2s var(--ease);
}
.shop-strip-cta:hover { background: rgba(255, 255, 255, 0.13); }

/* ---------- Category pills ---------- */
.category-row .pill {
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-weight: 650;
}
.category-row .pill:first-child { background: var(--ink); border-color: var(--ink); color: #ffffff; }
/* the reference puts white on this blue: that measures 3.02 and fails AA, so
   the label is dark here instead */
.category-row .pill.active {
  background: #0e9fd6;
  border-color: #0e9fd6;
  color: #0e1614;
}
.category-row .pill.active::before {
  content: "";
  display: inline-block;
  width: 0.45rem; height: 0.45rem;
  margin-right: 0.42rem;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #0e1614;
  vertical-align: 0.02em;
}

/* ---------- Offer cards ---------- */
.offer-card {
  align-items: center;
  gap: 0.95rem;
  padding: 1.15rem 1.15rem 1.15rem 1.05rem;
  border: none;
  border-radius: 0.85rem;
}
.offer-card-a { background: linear-gradient(108deg, #eaf6ec 0%, #eef4fb 62%, #e8f0fb 100%); --badge-fill: #fbeeb6; }
.offer-card-b { background: linear-gradient(108deg, #fdf6d8 0%, #fdf2ec 60%, #fdeee9 100%); --badge-fill: #d9f0e2; }
.offer-card-c { background: linear-gradient(108deg, #e2eefb 0%, #e8f4f4 58%, #e9f6f0 100%); --badge-fill: #ffffff; }
.offer-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.offer-badge, .offer-icon {
  flex-shrink: 0;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: var(--badge-fill, #ffffff);
  border: none;
  box-shadow: none;
  color: var(--ink);
  display: grid; place-items: center; gap: 0;
  padding: 0;
}
.offer-badge { font-size: 1.16rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.offer-badge small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.46rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); opacity: 0.62;
  margin-top: 0.1rem;
}
.offer-icon svg { width: 1.3rem; height: 1.3rem; color: var(--ink); }

.offer-title { font-size: 0.93rem; font-weight: 750; letter-spacing: -0.016em; margin-bottom: 0.16rem; }
.offer-text { font-size: 0.79rem; line-height: 1.5; color: var(--muted); }

.offer-tag {
  display: inline-block;
  margin-left: 0.42rem;
  padding: 0.13rem 0.45rem;
  border: none;
  border-radius: 999px;
  background: #111417;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.5rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  vertical-align: 0.15em;
}

.offer-cta {
  margin-left: auto;
  align-self: center;
  flex-shrink: 0;
  padding: 0.62rem 1.15rem;
  border: none;
  border-radius: 999px;
  background: #111417;
  color: #ffffff;
  font-size: 0.79rem; font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s var(--ease);
}
.offer-cta::after { content: ""; }
.offer-card:hover .offer-cta { background: var(--accent); }

/* ---------- Wide banner ---------- */
.offer-wide {
  align-items: center;
  gap: 1.1rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(20, 16, 8, 0.08);
  border-radius: 0.85rem;
  background: #f7f2e8;
}
.offer-wide:hover { transform: none; box-shadow: var(--shadow-sm); }
.offer-wide-mark {
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #b99a56;
  box-shadow: inset 0 0 0 3px #f7f2e8, inset 0 0 0 4px rgba(185, 154, 86, 0.55);
  color: #8a6d2f;
  font-family: var(--font-mono);
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em;
}
.offer-wide .btn {
  flex-shrink: 0;
  border-radius: 999px;
  background: #1a4d3a;
  border-color: #1a4d3a;
  color: #ffffff;
  padding: 0.62rem 1.3rem;
  font-size: 0.79rem; font-weight: 700;
}
.offer-wide .btn:hover { background: var(--accent); border-color: var(--accent); }