/* ===========================================================================
   reference.css — the reference's theme stylesheet, lifted.
   Loads after reference-head.css (the token vocabulary + reset) and redefines
   every token: a lilac-cream page, deep aubergine chrome, one violet accent,
   a green kept for savings, a high-contrast display serif over a grotesque.
   Every colour literal lives in this :root block and nowhere else; the theme
   editor's Colors settings override the same tokens (snippets/theme-colors).
   Lifted verbatim apart from the comments and the `-js` scope class (the
   reference's `sm-` runtime namespace is this theme's `belltree-`).
   =========================================================================== */

:root {
  /* ── colour ─────────────────────────────────────────────────────────────
     A deep purple is the structural dark; the green survives as the
     savings / in-stock semantic only. ONE loud accent: the violet. */
  --c-bg:            #faf6f3;
  --c-surface:       #ffffff;
  --c-surface-2:     #f2ebf3;
  --c-ink:           #241033;
  --c-ink-muted:     #5b4468;
  --c-ink-subtle:    #6f5c7c;
  --c-line:          #e7deea;
  --c-accent:        #5b0fa8;
  --c-accent-ink:    #ffffff;
  --c-accent-soft:   #efe4fa;
  /* The savings green clears AA both as ink on the --c-accent-soft lilac
     (.buybox__save, 5.45:1) and as the card badge's ground under white ink
     (6.68:1); one step lighter fell under 4.5:1 on the lilac. */
  --c-sale:          #0c6b25;
  --c-success:       #0c6b25;

  --c-announce-bg:   #2e0a4f;
  --c-announce-ink:  #fdfbff;
  --c-header-bg:     #ffffff;
  --c-header-ink:    #241033;
  --c-footer-bg:     #1e0733;
  --c-footer-ink:    #efe7f4;

  /* extra roles, same discipline */
  --c-hero-ground:   #2e0a4f;
  --c-capsule-bg:    rgba(30, 7, 51, 0.82);
  --c-capsule-ink:   #f6f0fa;
  --c-capsule-line:  rgba(246, 240, 250, 0.22);
  --c-scrim:         rgba(30, 7, 51, 0.55);
  --c-magenta:       #ab35b1;
  --c-shadow:        rgba(36, 16, 51, 0.14);
  --c-shadow-soft:   rgba(36, 16, 51, 0.07);

  /* ── type ─────────────────────────────────────────────────────────────
     Fraunces, a high-contrast display serif, for headings and numerals;
     Karla, a quiet grotesque, for everything the shopper reads and taps. */
  --font-display:    "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:       "Karla", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;

  --fs-hero:         clamp(2.25rem, 4.6vw, 3.9rem);
  --fs-h1:           clamp(1.9rem, 3.4vw, 3rem);
  --fs-h2:           clamp(1.6rem, 2.8vw, 2.5rem);
  --fs-h3:           clamp(1.15rem, 1.5vw, 1.375rem);
  --fs-body:         1rem;
  --fs-small:        0.875rem;
  --fs-micro:        0.6875rem;

  --lh-tight:        1.02;
  --lh-heading:      1.14;
  --lh-body:         1.65;

  --tracking-display: -0.018em;
  --tracking-caps:    0.16em;

  --fw-display:      400;
  --fw-body:         400;
  --fw-bold:         700;

  /* ── space ────────────────────────────────────────────────────────────── */
  --gutter:          1.25rem;
  --gutter-lg:       2.5rem;
  --section-y:       clamp(3.5rem, 6.5vw, 6.5rem);
  --section-y-tight: clamp(2.25rem, 3.6vw, 3.5rem);
  --container:       1280px;
  --container-narrow: 760px;

  /* ── shape ────────────────────────────────────────────────────────────
     Soft 18px tiles, pill buttons and inputs, a 28px panel radius where the
     page rises over the hero photograph. */
  --radius-card:     18px;
  --radius-button:   999px;
  --radius-input:    999px;
  --radius-pill:     999px;
  --radius-panel:    28px;
  --radius-media:    14px;
  --border-width:    1px;

  /* ── elevation & motion ─────────────────────────────────────────────── */
  --shadow-card:     0 1px 2px var(--c-shadow-soft);
  --shadow-pop:      0 18px 48px var(--c-shadow);
  --ease:            cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:             260ms;

  /* ── layout knobs ─────────────────────────────────────────────────────
     The hero BAND takes the banner artwork's own ratio per breakpoint
     (paired desktop / mobile files, 1890x943 and 1890x1818 by default), so a
     banner made at that ratio is full-bleed AND uncropped at both — no wings,
     no blurred mat. The hero section's shape settings override both. */
  --grid-cols-lg:    4;
  --grid-cols-md:    3;
  --grid-cols-sm:    2;
  --hero-ratio-lg:   1890 / 943;
  --hero-ratio-sm:   1890 / 1818;
  --card-ratio:      1 / 1;

  --header-h:        68px;
  /* The page rises OVER the bottom of the hero photograph on a rounded
     panel; keep the lowest ~6% of banner artwork free of anything that must
     be read. */
  --hero-overlap:    clamp(26px, 3vw, 46px);

  --tokens-filled:   1;
}

/* ===========================================================================
   Primitives
   =========================================================================== */

body { text-rendering: optimizeLegibility; }

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--container-narrow); }

@media (min-width: 900px) { .wrap { padding-inline: var(--gutter-lg); } }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  color: var(--c-ink);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-ink-subtle);
  margin: 0 0 0.85rem;
}

.sec-head { max-width: 46rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head h2 { font-size: var(--fs-h2); }
.sec-head p {
  margin-top: 0.9rem;
  color: var(--c-ink-muted);
  font-size: 1.0625rem;
  line-height: var(--lh-body);
}

.lede { color: var(--c-ink-muted); font-size: 1.0625rem; }

/* buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

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

.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  box-shadow: inset 0 0 0 var(--border-width) var(--c-line);
}
.btn--ghost:hover { background: var(--c-surface); }

.btn--light { background: var(--c-surface); color: var(--c-ink); }
.btn--light:hover { background: var(--c-accent); color: var(--c-accent-ink); }

.btn--block { width: 100%; }
.btn--lg { padding: 1.05rem 2rem; font-size: 0.9375rem; }

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  color: inherit;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.iconbtn:hover { background: var(--c-accent-soft); color: var(--c-accent); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--c-accent);
}
.link-arrow:hover { color: var(--c-ink); }
.link-arrow .icon { width: 1rem; height: 1rem; }

/* ===========================================================================
   Announcement bar — items 2+ ship with [hidden]; runtime toggles that
   attribute, so the rule MUST be [hidden]-aware or the bar freezes on slide 1.
   =========================================================================== */

.announce {
  background: var(--c-announce-bg);
  color: var(--c-announce-ink);
  text-align: center;
  font-size: var(--fs-small);
  letter-spacing: 0.01em;
  position: relative;
  z-index: 60;
}
.announce__inner { padding: 0.65rem var(--gutter); }
.announce__item { display: block; }
.announce__item[hidden] { display: none; }
.announce__item a {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: var(--fw-bold);
}
.announce sup { font-size: 0.7em; }

/* ===========================================================================
   Header — a floating dark capsule sitting ON the hero photo, inset from all
   four edges. Not a bar spanning the viewport.
   =========================================================================== */

.header { position: relative; z-index: 50; }

.header__capsule {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  height: var(--header-h);
  padding-inline: 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--c-capsule-bg);
  color: var(--c-capsule-ink);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 34px var(--c-shadow);
}

/* Floating variant: pulled up over the hero artwork. */
.header--float {
  position: absolute;
  inset-inline: 0;
  top: 0;
  padding-top: 0.9rem;
}
.header--float .wrap { padding-inline: clamp(0.75rem, 2vw, 2.5rem); }

/* Solid variant for collection + product, where there is no photo to float on. */
.header--solid { background: var(--c-bg); padding-block: 0.9rem; }
.header--solid .header__capsule {
  background: var(--c-surface);
  color: var(--c-header-ink);
  box-shadow: 0 1px 0 var(--c-line), 0 10px 26px var(--c-shadow-soft);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.header--solid .header__navlink::after { background: var(--c-accent); }

.header__nav { display: none; }
@media (min-width: 1000px) {
  .header__nav { display: flex; align-items: center; gap: 1.5rem; }
}
.header__navlink {
  position: relative;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding-block: 0.35rem;
}
.header__navlink::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.header__navlink:hover::after { transform: scaleX(1); }

.header__brand { justify-self: center; display: block; }
/* A logo file often carries generous margin around its lettering, so the
   mark is set large enough for the lettering itself to carry (the header's
   logo height setting overrides both sizes). */
.header__logo { height: 56px; width: auto; }
@media (max-width: 999px) { .header__logo { height: 44px; } }

/* A dark logo on an opaque light file can only sit on a light ground. Light
   headers get the logo; dark grounds (the floating capsule, the footer) get a
   reversed wordmark — or an uploaded light logo — instead of the white box an
   invert filter would produce. */
.wordmark {
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  color: currentColor;
}
.wordmark b { font-weight: 500; }
.wordmark small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.5rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 3px;
}

.header__tools { justify-self: end; display: flex; align-items: center; gap: 0.15rem; }
.header--float .iconbtn:hover { background: var(--c-capsule-line); color: var(--c-capsule-ink); }

.header__burger { justify-self: start; }
@media (min-width: 1000px) { .header__burger { display: none; } }

.cart-count {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-size: 0.625rem;
  font-weight: var(--fw-bold);
  line-height: 17px;
  text-align: center;
}
.cart-btn { position: relative; }

/* ===========================================================================
   Hero — full-bleed edge-to-edge photograph, no frame, no mat. The band takes
   the artwork's own ratio per breakpoint, so it is full bleed AND uncropped.
   The purple lip below it is what the panel's rounded corners reveal — the
   overlap never eats into the picture.
   =========================================================================== */

.hero {
  position: relative;
  background: var(--c-hero-ground);
}

/* Mobile banner artwork tends to carry its lockup in the top-left corner —
   exactly where a full-width capsule lands. Above 768 the capsule floats on
   the photograph; below it the photo starts under the capsule instead of
   beneath it, so the artwork's own type is never covered. The picture is
   never cropped either way. */
@media (max-width: 767px) {
  .hero { padding-top: calc(var(--header-h) + 1.8rem); }
}

.hero__rail {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  aspect-ratio: var(--hero-ratio-sm);
}
.hero__rail::-webkit-scrollbar { display: none; }

@media (min-width: 768px) { .hero__rail { aspect-ratio: var(--hero-ratio-lg); } }

.hero__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
}
.hero__slide picture { display: block; width: 100%; height: 100%; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }

.hero__cta {
  position: absolute;
  /* Centred with auto margins, NOT translateX(-50%): .btn:hover applies its own
     transform, which would replace the centring one and throw the button to the
     right on hover. Never centre with a transform an interactive state reuses. */
  inset-inline: 0;
  margin-inline: auto;
  width: fit-content;
  /* Well clear of the overlap: a light pill sitting on the panel's edge reads
     as a torn piece of the panel rather than as a button. */
  bottom: calc(var(--hero-overlap) + clamp(2rem, 4.5vw, 4.25rem));
  z-index: 6;
  white-space: nowrap;
  box-shadow: 0 12px 34px var(--c-shadow);
}

.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  background: var(--c-capsule-bg);
  color: var(--c-capsule-ink);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) { .hero__arrow { display: inline-flex; } }
.hero__arrow:hover { background: var(--c-ink); }
.hero__arrow--prev { left: clamp(0.75rem, 2vw, 2.5rem); }
.hero__arrow--next { right: clamp(0.75rem, 2vw, 2.5rem); }

/* The body panel rises over the hero PHOTOGRAPH, so the rounded corners reveal
   the picture behind them and the page reads as layered rather than stacked. */
.panel {
  position: relative;
  z-index: 5;
  margin-top: calc(var(--hero-overlap) * -1);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  background: var(--c-bg);
}

/* ===========================================================================
   Badge row — a strip of short claims under the hero, an icon each.
   =========================================================================== */

.badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 1rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: var(--border-width) solid var(--c-line);
}
@media (min-width: 760px) {
  .badges { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* Variable-length labels left-aligned in equal tracks read as ragged gaps —
     centre each badge inside its own track instead. */
  .badge { justify-content: center; text-align: center; }
}

.badge {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-small);
  color: var(--c-ink-muted);
  min-width: 0;
}
.badge .icon { color: var(--c-accent); flex: none; }
.badge span { min-width: 0; }

/* ===========================================================================
   Product tabs + rail — one tab per product line, each a scrolling rail.
   =========================================================================== */

.tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.75rem;
}
.tab {
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  color: var(--c-ink-muted);
  box-shadow: inset 0 0 0 var(--border-width) var(--c-line);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.tab:hover { color: var(--c-ink); background: var(--c-surface); }
.tab.is-active {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  box-shadow: none;
}
.tab__sub { font-weight: var(--fw-body); opacity: 0.75; }

.tabpanel[hidden] { display: none; }
.tabpanel__note {
  margin-bottom: 1.25rem;
  color: var(--c-ink-muted);
  font-size: var(--fs-small);
}

.railwrap { position: relative; }
.railhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.railnav { display: none; gap: 0.4rem; }
@media (min-width: 760px) { .railnav { display: flex; } }
.railnav .iconbtn { box-shadow: inset 0 0 0 var(--border-width) var(--c-line); }

.rail {
  display: grid;
  grid-auto-flow: column;
  /* A definite track size, never minmax(0,…): with a 0 minimum the row squeezes
     every card into the container instead of overflowing into a scroller. */
  grid-auto-columns: 74vw;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

@media (min-width: 560px) { .rail { grid-auto-columns: 44vw; } }
@media (min-width: 900px) { .rail { grid-auto-columns: calc((100% - 2rem) / var(--grid-cols-md)); } }
@media (min-width: 1100px) {
  .rail { grid-auto-columns: calc((100% - 3rem) / var(--grid-cols-lg)); }
}

/* ===========================================================================
   Product card — a borderless tinted tile, circular add-to-cart ON THE TEXT
   ROW (never a hover overlay floating on the image), small letterspaced
   eyebrow above the title.
   =========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface-2);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }

.card__media {
  position: relative;
  overflow: hidden;
  background: var(--c-surface);
  aspect-ratio: var(--card-ratio);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.card:hover .card__media img { transform: scale(1.04); }

.card__badge {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 2;
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--c-sale);
  color: var(--c-accent-ink);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.35rem;
  padding: 0.95rem 1rem 1.05rem;
}
.card__eyebrow {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-accent);
}
.card__title {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: var(--fw-bold);
  line-height: 1.35;
  color: var(--c-ink);
}
.card__pack { font-size: var(--fs-small); color: var(--c-ink-subtle); }

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.7rem;
}
.card__prices { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; min-width: 0; }
.card__price {
  font-size: 1rem;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  white-space: nowrap;
}
.card__was {
  font-size: var(--fs-small);
  color: var(--c-ink-subtle);
  text-decoration: line-through;
  white-space: nowrap;
}
.card__add {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card__add:hover { background: var(--c-ink); transform: scale(1.06); }

/* ===========================================================================
   Grid (collection page)
   =========================================================================== */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols-sm), minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 720px)  { .grid { grid-template-columns: repeat(var(--grid-cols-md), minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 1060px) { .grid { grid-template-columns: repeat(var(--grid-cols-lg), minmax(0, 1fr)); } }

/* ===========================================================================
   Timeline — numbered steps on white tiles
   =========================================================================== */

.steps {
  display: grid;
  gap: 1rem;
  counter-reset: step;
}
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.step {
  position: relative;
  background: var(--c-surface);
  border-radius: var(--radius-card);
  padding: 1.6rem 1.5rem 1.7rem;
  box-shadow: var(--shadow-card);
}
.step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-pill);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: 1rem;
}
.step h3 { font-size: var(--fs-h3); margin-bottom: 0.45rem; }
.step p { color: var(--c-ink-muted); font-size: var(--fs-small); }

/* ===========================================================================
   Clinical highlight — a dark rounded band carrying measured numbers.
   =========================================================================== */

.clinical {
  background: var(--c-hero-ground);
  color: var(--c-capsule-ink);
  border-radius: var(--radius-panel);
  overflow: hidden;
}
.clinical__inner {
  display: grid;
  /* minmax(0,…) everywhere below: a bare 1fr track cannot shrink under its
     min-content width, and the uppercase letterspaced stat labels were forcing
     the row wider than the panel — which clipped the third stat at 375. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(1.5rem, 5vw, 4rem);
}
@media (min-width: 900px) {
  .clinical__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
}

.clinical h2 { color: var(--c-capsule-ink); font-size: var(--fs-h2); }
.clinical .eyebrow { color: var(--c-capsule-ink); opacity: 0.72; }
.clinical p { color: var(--c-capsule-ink); opacity: 0.86; margin-top: 0.9rem; }
.clinical__cta { margin-top: 1.75rem; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 480px) { .stats { gap: 1rem; } }
.stat {
  padding: 1.1rem 0.5rem;
  min-width: 0;
  border-radius: var(--radius-media);
  background: var(--c-capsule-line);
  text-align: center;
}
.stat__n {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1;
  color: var(--c-capsule-ink);
}
.stat__l {
  display: block;
  margin-top: 0.5rem;
  overflow-wrap: anywhere;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-capsule-ink);
  opacity: 0.82;
}
.clinical__foot {
  margin-top: 1.1rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.02em;
  color: var(--c-capsule-ink);
  opacity: 0.66;
}

/* ===========================================================================
   Testimonials — a rail of photo + quote cards.
   =========================================================================== */

.quote {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.quote__media { aspect-ratio: 2362 / 1263; overflow: hidden; background: var(--c-surface-2); }
.quote__media img { width: 100%; height: 100%; object-fit: cover; }
.quote__body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.8rem; flex: 1; }
.quote__text {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--c-ink);
}
.quote__who { margin-top: auto; font-size: var(--fs-small); color: var(--c-ink-subtle); }
.quote__who b { color: var(--c-ink); font-weight: var(--fw-bold); }

/* ===========================================================================
   Promotions — square promo banners, four across.
   =========================================================================== */

.promos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 900px) { .promos { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }

/* Promo artwork usually carries its own headline burned in, so the caption
   sits UNDER the image on paper rather than as an unreadable second layer of
   type over a busy banner. */
.promo { display: block; }
.promo__img {
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--c-surface-2);
}
.promo img { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.promo:hover img { transform: scale(1.05); }
.promo__cap {
  display: block;
  padding-top: 0.85rem;
  color: var(--c-ink-muted);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
}
.promo:hover .promo__cap { color: var(--c-accent); }

/* ===========================================================================
   Social proof band
   =========================================================================== */

.social-band {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 800px) { .social-band { grid-template-columns: repeat(4, 1fr); } }

.social-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.15rem 1.25rem;
  border-radius: var(--radius-card);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur) var(--ease);
}
.social-card:hover { box-shadow: var(--shadow-pop); }
.social-card .icon { color: var(--c-accent); flex: none; }
.social-card > span { min-width: 0; }
.social-card__t { display: block; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); }
.social-card__s {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-micro);
  color: var(--c-ink-subtle);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ===========================================================================
   Collection page
   =========================================================================== */

.pagehead { padding-block: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.25rem); }
.pagehead h1 { font-size: var(--fs-h1); }
.pagehead p { margin-top: 0.8rem; max-width: 40rem; color: var(--c-ink-muted); }

.crumbs { font-size: var(--fs-small); color: var(--c-ink-subtle); margin-bottom: 1rem; }
.crumbs a:hover { color: var(--c-accent); }
.crumbs span { margin-inline: 0.4rem; }

.filterbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding-block: 0.85rem;
  margin-bottom: 1.75rem;
  background: var(--c-bg);
  border-bottom: var(--border-width) solid var(--c-line);
}
.filterbar__count { margin-left: auto; font-size: var(--fs-small); color: var(--c-ink-subtle); }

.linehead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: clamp(2.25rem, 4vw, 3.25rem) 0 1.4rem;
  padding-top: 1.4rem;
  border-top: var(--border-width) solid var(--c-line);
}
.linehead:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.linehead h2 { font-size: var(--fs-h3); }
.linehead p { font-size: var(--fs-small); color: var(--c-ink-muted); margin-top: 0.25rem; }

/* ===========================================================================
   Product page
   =========================================================================== */

.pdp { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 960px) { .pdp { grid-template-columns: 1.15fr 1fr; } }

.gallery__main {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--c-surface);
  aspect-ratio: 1 / 1;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.gallery__thumb {
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--c-surface);
  aspect-ratio: 1 / 1;
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow var(--dur) var(--ease);
  cursor: pointer;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover, .gallery__thumb.is-active { box-shadow: inset 0 0 0 2px var(--c-accent); }

@media (min-width: 960px) { .buybox { position: sticky; top: 1.5rem; } }

.buybox h1 { font-size: var(--fs-h1); margin-block: 0.35rem 0.75rem; }
.buybox__pack { color: var(--c-ink-subtle); font-size: var(--fs-small); }

.buybox__prices {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-block: 1.1rem;
}
.buybox__price { font-size: 1.75rem; font-weight: var(--fw-bold); }
.buybox__was { font-size: 1.0625rem; color: var(--c-ink-subtle); text-decoration: line-through; }
.buybox__save {
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--c-accent-soft);
  color: var(--c-sale);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
}

.buybox__intro { color: var(--c-ink-muted); margin-bottom: 1.5rem; }

.buyrow { display: flex; gap: 0.7rem; align-items: stretch; margin-bottom: 0.9rem; }

.qty {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-input);
  box-shadow: inset 0 0 0 var(--border-width) var(--c-line);
  background: var(--c-surface);
  flex: none;
}
.qty button {
  width: 42px; height: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-ink-muted);
  border-radius: var(--radius-input);
}
.qty button:hover { color: var(--c-accent); }
.qty input {
  width: 34px;
  height: 100%;
  text-align: center;
  background: transparent;
  border: 0;
  font-weight: var(--fw-bold);
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.picklabel {
  display: block;
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-ink-subtle);
  margin-bottom: 0.6rem;
}
/* Name-only options are short, so they read as a wrapped row of swatch pills —
   full-width rows would be mostly empty space. */
.picklist { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.pick {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.15rem;
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  box-shadow: inset 0 0 0 var(--border-width) var(--c-line);
  font-size: var(--fs-small);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.pick:hover { box-shadow: inset 0 0 0 2px var(--c-accent); }
.pick.is-current { background: var(--c-accent-soft); box-shadow: inset 0 0 0 2px var(--c-accent); }
.pick__n { font-weight: var(--fw-bold); color: var(--c-ink); }

.assure { display: grid; gap: 0.6rem; margin-top: 1.4rem; padding-top: 1.4rem; border-top: var(--border-width) solid var(--c-line); }
.assure li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--fs-small); color: var(--c-ink-muted); }
.assure .icon { color: var(--c-accent); flex: none; margin-top: 2px; }

.pdp-tabs { margin-top: clamp(2.5rem, 5vw, 4rem); }
.prose { color: var(--c-ink-muted); line-height: var(--lh-body); max-width: 60ch; }
.prose h3 { font-size: var(--fs-h3); color: var(--c-ink); margin-bottom: 0.6rem; }
.prose p + p { margin-top: 0.9rem; }
.prose ul { display: grid; gap: 0.55rem; margin-top: 0.9rem; }
.prose li { display: flex; gap: 0.6rem; align-items: flex-start; }
.prose li .icon { color: var(--c-accent); flex: none; margin-top: 4px; }
.prose dl { display: grid; gap: 0.7rem; margin-top: 0.9rem; }
.prose dt { font-weight: var(--fw-bold); color: var(--c-ink); font-size: var(--fs-small); }
.prose dd { margin: 0.15rem 0 0; font-size: var(--fs-small); }

/* ===========================================================================
   Drawers (nav, cart, search)
   =========================================================================== */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: var(--c-scrim);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.drawer.is-open .drawer__scrim { opacity: 1; }

.drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer--left .drawer__panel { right: auto; left: 0; transform: translateX(-100%); }
.drawer--search .drawer__panel {
  right: 0; left: 0;
  bottom: auto;
  width: auto;
  transform: translateY(-100%);
}
.drawer--search.is-open .drawer__panel { transform: translateY(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: var(--border-width) solid var(--c-line);
}
.drawer__title {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-ink-subtle);
}
.drawer__body { flex: 1; overflow-y: auto; padding: 1.25rem; }
.drawer__foot { padding: 1.25rem; border-top: var(--border-width) solid var(--c-line); }

.navlist { display: grid; gap: 0.2rem; }
.navlist a {
  display: block;
  padding: 0.75rem 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--c-ink);
  border-bottom: var(--border-width) solid var(--c-line);
}
.navlist a:hover { color: var(--c-accent); }
.navlist small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-ink-subtle);
  margin-top: 2px;
}

.searchfield {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-input);
  background: var(--c-surface);
  box-shadow: inset 0 0 0 var(--border-width) var(--c-line);
}
.searchfield input { flex: 1; border: 0; background: transparent; outline: none; }
.searchfield .icon { color: var(--c-ink-subtle); }

/* cart lines and search hits share one compact row */
.cart-line, .search-hit {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 0.85rem;
  align-items: start;
  padding-block: 0.9rem;
  border-bottom: var(--border-width) solid var(--c-line);
}
.cart-line__img, .search-hit__img {
  width: 56px; height: 56px;
  border-radius: var(--radius-media);
  object-fit: cover;
  background: var(--c-surface-2);
}
.cart-line__body, .search-hit__body { min-width: 0; }
.cart-line__title, .search-hit__title {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  line-height: 1.35;
}
.cart-line__variant { font-size: var(--fs-micro); color: var(--c-ink-subtle); margin-top: 2px; }
.cart-line__price, .search-hit__price { font-size: var(--fs-small); font-weight: var(--fw-bold); }
.cart-line__remove { font-size: var(--fs-micro); color: var(--c-ink-subtle); text-decoration: underline; }
.cart-line__remove:hover { color: var(--c-accent); }
.search-hit { grid-template-columns: 56px 1fr auto; }

.cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-weight: var(--fw-bold);
}
.cart-empty { color: var(--c-ink-subtle); font-size: var(--fs-small); text-align: center; padding-block: 2.5rem; }

/* ===========================================================================
   Footer
   =========================================================================== */

.footer {
  background: var(--c-footer-bg);
  color: var(--c-footer-ink);
  margin-top: var(--section-y);
}
.footer__top {
  display: grid;
  gap: 2.25rem;
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
}
@media (min-width: 860px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; } }

.footer__wordmark { font-size: 1.75rem; }
.footer__blurb { margin-top: 1rem; font-size: var(--fs-small); color: var(--c-footer-ink); opacity: 0.75; max-width: 30ch; }
.footer h3 {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-footer-ink);
  opacity: 0.6;
  margin-bottom: 1rem;
}
.footer__list { display: grid; gap: 0.6rem; font-size: var(--fs-small); }
.footer__list a, .footer__list li { color: var(--c-footer-ink); opacity: 0.82; }
.footer__list a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

.footer__social { display: flex; gap: 0.5rem; margin-top: 1.1rem; }
.footer__social a {
  width: 38px; height: 38px;
  border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-capsule-line);
  color: var(--c-footer-ink);
}
.footer__social a:hover { background: var(--c-accent); }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-block: 1.25rem;
  border-top: var(--border-width) solid var(--c-capsule-line);
  font-size: var(--fs-micro);
  color: var(--c-footer-ink);
}
.footer__bar > :last-child { margin-left: auto; }
.footer__bar a { opacity: 0.8; }
.footer__bar a:hover { opacity: 1; text-decoration: underline; }
.footer__pay { display: flex; gap: 0.4rem; align-items: center; opacity: 0.8; }
.footer__pay span {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  box-shadow: inset 0 0 0 var(--border-width) var(--c-capsule-line);
  letter-spacing: 0.04em;
}

/* ===========================================================================
   Reveal — scoped to .belltree-js so a JS failure costs the animation, not the
   page (assets/animations.js adds the class and drives .is-visible).
   =========================================================================== */

.belltree-js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.belltree-js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .belltree-js [data-reveal] { opacity: 1; transform: none; }
}