/* ==========================================================================
   SynHealth — clean.

   Brief: like syngeve.com but better, and simple to use. So: white ground, one
   accent, big friendly type, rounded shapes, generous space, and few things on
   screen at once. Every element earns its place or it is not here.

   Where we beat them: the product photography is the hero rather than stock
   lifestyle imagery (which would imply human use), the accent is our own gold
   rather than a stock SaaS blue, there are real per-product pages, and nothing
   on the page claims evidence that does not exist.

   One typeface, four weights, a big type scale, and a single accent. That is the
   whole system.
   ========================================================================== */

@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/dm-sans-300-1000-latin.woff2') format('woff2');
  font-weight: 300 1000;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/dm-sans-300-1000-latin-ext.woff2') format('woff2');
  font-weight: 300 1000;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
}

:root {
  --white: #ffffff;
  /* Warm greys, not blue-greys. The vials are ivory and gold; a cool grey ground
     made them look grubby and the whole page read cheap. */
  --surface: #faf8f4;
  --surface-2: #f3efe7;
  --ink: #0b0e12;
  --ink-2: #333b45;
  --mute: #6b7280;
  --faint: #a3a29e;
  --line: #ebe5db;
  --line-strong: #ddd4c6;

  --gold: #9c7c3c;
  --gold-lift: #c9a961;
  --gold-soft: #f7f1e4;

  --font: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 1280px;
  --r: 14px;
  --r-lg: 22px;
  --r-round: 999px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  /* Layered and soft rather than one hard drop — closer to how light actually
     falls, and the thing that most separates an expensive page from a cheap one. */
  --shadow: 0 1px 1px rgba(11,14,18,.03), 0 4px 10px -4px rgba(11,14,18,.05), 0 16px 36px -18px rgba(11,14,18,.10);
  --shadow-lg: 0 2px 4px rgba(11,14,18,.04), 0 12px 26px -10px rgba(11,14,18,.09), 0 34px 70px -28px rgba(11,14,18,.20);
  --shadow-gold: 0 18px 44px -20px rgba(156,124,60,.34);
}

*, *::before, *::after { box-sizing: border-box; }

/* Icons ship with their own width/height/fill/stroke. This is only a backstop
   so a stray rule cannot repaint them into solid black blocks again. */
.icon { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* height:auto is the required companion to max-width:100% once images carry real
   width/height attributes. Without it the HTML height attribute applies as a
   presentational hint whenever CSS sets only the width, and the image stretches
   — the hero vial rendered 300x1672, a 213% vertical distortion. Rules that
   deliberately set a height (.tile__media img, .pdp__frame img) are class
   selectors and still win. */
img, svg { max-width: 100%; display: block; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- shell --- */

.shell { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(4rem, 8vw, 7.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--sunk { background: var(--surface); }
.section--ink { background: var(--ink); color: var(--white); }
.section--ink a { color: var(--white); }

/* Section seams. A full-bleed hairline reads as a deliberate join between
   bands of content; stacked padding alone reads as drift. */
.section + .section:not(.section--sunk):not(.section--ink) { border-top: 1px solid var(--line); }
.label::after {
  content: ''; display: block;
  width: 24px; height: 2px; margin-top: .6rem;
  background: var(--gold); opacity: .55;
}

/* ---------------------------------------------------------------- type --- */

.display { font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; margin: 0; text-wrap: balance; }
.display--hero { font-size: clamp(2.3rem, 5.2vw, 4rem); letter-spacing: -0.04em; }
.display--lg { font-size: clamp(2rem, 4vw, 3.1rem); }
.display--md { font-size: clamp(1.4rem, 2.3vw, 1.9rem); letter-spacing: -0.03em; }
.display--sm { font-size: clamp(1.02rem, 1.4vw, 1.15rem); letter-spacing: -0.022em; }

.label {
  display: inline-block;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.15rem;
}
.section--ink .label { color: #d8b978; }

.lede {
  font-size: clamp(.98rem, 1.1vw, 1.08rem);
  color: var(--mute); max-width: 58ch;
  margin: 1.25rem 0 0; text-wrap: pretty;
}
.section--ink .lede { color: #a9b2bd; }

.prose { max-width: 68ch; }
.prose p { color: var(--ink-2); margin: 0 0 1.15rem; }
.prose h2 { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.025em; margin: 2.5rem 0 .8rem; }
.prose h3 { font-size: 1.15rem; font-weight: 600; margin: 1.85rem 0 .5rem; }
.prose ul { margin: 0 0 1.15rem; padding-left: 1.2rem; color: var(--ink-2); }
.prose li { margin-bottom: .45rem; }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

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

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .82);
  border-bottom: 1px solid var(--line);
}
/* The blur lives on a layer, not on .masthead itself. backdrop-filter makes an
   element the containing block for its position:fixed descendants, which would
   trap .mobile-nav inside the 66px header box instead of the viewport. */
.masthead::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
}
.masthead__row { position: relative; z-index: 1; display: flex; align-items: center; gap: 1rem; min-height: 76px; }

.brand { display: inline-flex; align-items: center; gap: .6rem; flex: none; }
.brand img { width: 34px; height: 34px; }
.brand__word { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }

.nav { display: flex; align-items: center; gap: 2rem; margin-left: 2.5rem; }

/* Hover rolls a second copy of the label up from below, so the link reads as a
   small mechanism rather than a colour change. The duplicate comes from
   data-text, so there is no extra node per link. */
.nav a {
  position: relative; display: block; overflow: hidden;
  font-size: .92rem; font-weight: 500; color: var(--ink-2);
  line-height: 1.5;
}
.nav a > span { display: block; transition: transform .5s var(--ease), opacity .35s var(--ease); }
.nav a::before {
  content: attr(data-text);
  position: absolute; inset: 0;
  color: var(--ink); font-weight: 600;
  transform: translateY(105%);
  transition: transform .5s var(--ease);
}

/* Active page keeps a small gold marker instead of an underline — it survives
   the roll and does not fight the hover state. */
.nav a[aria-current='page'] { color: var(--ink); font-weight: 600; }
.nav a[aria-current='page']::after {
  content: ''; position: absolute; left: 50%; bottom: -6px;
  width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--gold);
}

.masthead__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: var(--r-round);
  color: var(--ink); background: var(--white);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.icon-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; }

.cart-btn { position: relative; }
.cart-count {
  position: absolute; top: -3px; right: -3px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: none; background: var(--gold); color: #fff;
  border-radius: var(--r-round);
  font-size: .7rem; font-weight: 700; line-height: 20px; text-align: center;
}
.cart-count[data-count]:not([data-count='0']) { display: block; }
.burger { display: none; }

/* -------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.6rem;
  border: 1px solid var(--ink); border-radius: var(--r-round);
  background: var(--ink); color: var(--white);
  font-size: .93rem; font-weight: 600; letter-spacing: -0.01em;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.btn:active { transform: none; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--ghost { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn--light { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--block { width: 100%; }
.btn--lg { padding: 1rem 1.9rem; font-size: .98rem; }
.btn--sm { padding: .6rem 1.2rem; font-size: .9rem; }

.arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .98rem; color: var(--ink);
  transition: gap .2s var(--ease);
}

/* ---------------------------------------------------------------- tags --- */

.tag {
  display: inline-flex; align-items: center;
  font-size: .85rem; font-weight: 500;
  padding: .45rem .9rem;
  border-radius: var(--r-round);
  background: var(--surface); color: var(--ink-2);
  white-space: nowrap;
}
.tag--solid { background: var(--ink); color: var(--white); }
.tag--gold { background: var(--gold-soft); color: var(--gold); font-weight: 600; }

/* ---------------------------------------------------------------- hero --- */
/* Centred composition: the product stands in front of its own name at display
   scale, headline above, supporting text below. Deliberately NOT the
   text-left / product-right split every competitor uses — that layout was the
   single thing making this read as a copy of theirs. */

.hero {
  position: relative;
  padding-block: clamp(1.75rem, 4vw, 3rem) clamp(2rem, 4vw, 3.25rem);
  overflow: hidden;
  text-align: center;
}

.hero__type {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none; user-select: none;
  overflow: hidden;
}
.hero__type span {
  font-size: clamp(6rem, 21vw, 19rem);
  font-weight: 700; letter-spacing: -0.055em;
  line-height: 1; white-space: nowrap;
  color: var(--ink); opacity: .06;
  transform: translateY(6%);
}

.hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.hero h1 { margin: 0; max-width: 16ch; }

/* Sized by VIEWPORT HEIGHT, not width. These renders are 1.78:1 portrait, so a
   width-based size blows the composition past the fold on a laptop — at 300px
   wide the vial stood 533px tall and pushed the buttons 300px below the fold.
   Height-based keeps the headline, product and calls to action on one screen. */
.hero__object {
  position: relative;
  height: clamp(170px, 36vh, 340px);
  margin: clamp(-1rem, -1.5vw, -0.5rem) auto clamp(.75rem, 1.5vw, 1.25rem);
}
.hero__object img {
  height: 100%; width: auto; margin-inline: auto;
  filter: drop-shadow(0 26px 44px rgba(13, 17, 23, .24));
}

.hero__lede { margin-inline: auto; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.35rem; }

.hero__scrollcue {
  margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
  font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint);
}
.hero__scrollcue::after {
  content: ''; display: block;
  width: 1px; height: 34px; margin: .75rem auto 0;
  background: linear-gradient(var(--faint), transparent);
}

/* Fact chips state only what we can stand behind — never purity, a certificate
   or a laboratory. */
.chip-float {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem;
  background: var(--white); border-radius: var(--r-round);
  box-shadow: var(--shadow);
  font-size: .88rem; font-weight: 600;
  white-space: nowrap;
}
.chip-float svg { width: 16px; height: 16px; stroke: var(--gold); fill: none; stroke-width: 2; }
.chip-float--a { top: 36%; left: 3%; }
.chip-float--b { top: 54%; right: 3%; }

.trustrow {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  padding-block: 1.5rem;
  border-block: 1px solid var(--line);
  font-size: .95rem; font-weight: 500; color: var(--mute);
}
.trustrow span { display: inline-flex; align-items: center; gap: .55rem; }
.trustrow svg { width: 17px; height: 17px; stroke: var(--gold); fill: none; stroke-width: 2; }

@media (max-width: 760px) {
  .chip-float { display: none; }
  /* On a phone the hero is much taller than its product — headline, lede and two
     stacked buttons — so centring the wordmark in the whole section dropped it
     a full vial-height BELOW the vial, where it read as a smudge behind the body
     copy. Bounding the type layer to the top of the hero re-centres it on the
     product, the way it sits on a desktop. */
  .hero__type { inset: 0 0 auto; height: 72%; }
  .hero__type span { opacity: .05; font-size: 26vw; transform: none; }
  /* Tightened so the headline, product and both buttons land on one screen. */
  .hero { padding-block: 1.25rem 1.75rem; }
  .hero__object { height: clamp(130px, 22vh, 190px); margin-block: -.25rem .5rem; }
  .hero .display--hero { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .hero__lede { font-size: .95rem; margin-top: .85rem; }
  .hero__actions { margin-top: 1.1rem; gap: .6rem; width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__scrollcue { margin-top: 1rem; }
  .hero__scrollcue::after { height: 22px; }
}


/* --------------------------------------------------------------- heads --- */

.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ---------------------------------------------------------- product grid --- */

.gallery { display: grid; gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; }
.gallery > .tile { height: 100%; }
.gallery--2 { grid-template-columns: repeat(2, 1fr); }
.gallery--3 { grid-template-columns: repeat(3, 1fr); }
.gallery--4 { grid-template-columns: repeat(4, 1fr); }

.tile {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}


.tile__media { background: var(--gold-soft); }
.tile__frame { position: relative; }

.tile__media { transition: background .5s var(--ease); }

.tile__frame { position: relative; }

.tile__media {
  /* 4:5 rather than square: every vial render is portrait (941x1672), so a square
     box wastes the sides and shrinks the product. min-height:0 is load-bearing —
     flex items default to min-height:auto, which lets the tall intrinsic image
     override aspect-ratio entirely and stretch the box. */
  /* Square, not 4:5. The portrait render still reads clearly with tighter side
     padding, and it takes roughly 70px off every card in the grid — the previous
     ratio made a four-up row taller than a laptop viewport. */
  aspect-ratio: 1 / 1; min-height: 0;
  background: var(--surface);
  display: block; position: relative; overflow: hidden;
}
/* Pinned to the inset content area rather than sized with percentages. Two bugs
   this avoids: height:100% inside a centred grid item resolves against an
   indefinite box and falls back to the intrinsic size, overflowing the frame;
   and width:auto collapses a not-yet-loaded lazy image to 0x0, so the card shows
   nothing until it arrives. Pinning gives a stable box either way, and
   object-fit letterboxes the portrait render inside it. */
/* Hover belongs to the PRODUCT, not to the card's edges. The vial rises off the
   surface and casts a real shadow, the ground deepens behind it, and nothing
   else moves — no borders recolouring, no rules wiping across, no glare. A quiet
   response reads expensive; a busy one reads like a template. */
.tile__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 6% 26% 20%;
  object-fit: contain;
  transition: transform .55s var(--ease), filter .55s var(--ease);
}
.tile__media { transition: background .55s var(--ease); }

/* The action grows into a full label instead of appearing from nowhere. */
/* gap:0 because the revealed label is a flex child — it was picking up the
   button's gap on top of its own leading space, giving "Add  to cart". */
.tile__foot .btn { gap: 0; transition: padding .35s var(--ease), background .25s var(--ease); }

/* Romanian labels are longer than the English they replace: "Adaugă în coș"
   wrapped to two lines and made every card button 67px instead of 44px. The
   button keeps one line; at phone widths the foot already stacks, so nothing
   overflows. */
.tile__foot .btn--sm { white-space: nowrap; padding-left: 1rem; padding-right: 1rem; }
.tile__foot .btn span { display: none; }


.tile__tag {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  font-size: .7rem; padding: .3rem .65rem; font-weight: 600;
}

.tile__body { padding: 1.05rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .22rem; flex: 1; }
.tile__cat { font-size: .78rem; font-weight: 500; color: var(--faint); }
.tile__name { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.025em; margin: 0; }
.tile__meta { font-size: .82rem; color: var(--mute); margin: 0; }
.tile__foot { margin-top: auto; padding-top: .7rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.tile__price { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
.tile__price small { font-size: .8rem; font-weight: 500; color: var(--faint); }

/* Format switch — the one control on a card. */
.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface); border-radius: var(--r-round); }
.segmented button {
  padding: .38rem .9rem; border-radius: var(--r-round);
  font-size: .85rem; font-weight: 600; color: var(--mute);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.segmented button[aria-pressed='true'] { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(13,17,23,.12); }
.segmented--lg button { padding: .7rem 1.4rem; font-size: .98rem; }
.segmented--lg { padding: 4px; }


/* ------------------------------------------------------- glass switch --- */
/* The format control. Frosted glass over the product frame, with a thumb that
   slides between options rather than each option toggling its own fill — the
   movement is what tells you the two states are alternatives of one thing.
   Sits on the image panel so there is something behind it to actually blur. */

.switch {
  position: relative;
  display: inline-flex;
  padding: 5px;
  border-radius: var(--r-round);
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .75);
  backdrop-filter: blur(18px) saturate(1.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(13, 17, 23, .04),
    0 8px 24px -10px rgba(13, 17, 23, .28);
  isolation: isolate;
}

/* The moving pane. Transform-only so it animates on the compositor. */
.switch__thumb {
  position: absolute;
  top: 5px; left: 5px; bottom: 5px;
  border-radius: var(--r-round);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.82));
  box-shadow: 0 2px 10px rgba(13, 17, 23, .18), inset 0 1px 0 #fff;
  transition: transform .5s var(--ease), width .5s var(--ease);
  will-change: transform;
  z-index: -1;
}
.switch button {
  position: relative;
  padding: .7rem 1.35rem;
  border-radius: var(--r-round);
  font-size: .95rem; font-weight: 600;
  color: var(--mute);
  white-space: nowrap;
  transition: color .35s var(--ease);
}
.switch button[aria-pressed='true'] { color: var(--ink); }

/* Overlaid on the product frame, so the blur has the render behind it. */
.switch--sm { padding: 3px; }
.switch--sm .switch__thumb { top: 3px; bottom: 3px; left: 3px; }
.switch--sm button { padding: .32rem .7rem; font-size: .76rem; letter-spacing: -0.005em; }

/* Anchored to whatever frame contains it. On a card that is the image, not the
   whole tile — positioning against the tile dropped it onto the price row and
   pushed it past the card edge. max-width keeps it inside a narrow card. */
/* Inside the image box, below the vial. The frame reserves 20% bottom padding so
   the product sits clear of it rather than behind it. */
.switch--inframe {
  position: absolute; z-index: 4;
  left: 50%; bottom: .75rem;
  transform: translateX(-50%);
  max-width: calc(100% - 1.5rem);
  box-shadow: 0 4px 14px -4px rgba(11,14,18,.18);
}

/* The product page uses the same arrangement as the cards: the control sits
   inside the image box, below the vial. Without this rule it had no position at
   all and landed in normal flow, on top of the top-left corner of the render. */
.switch--overlay {
  position: absolute; z-index: 4;
  left: 50%; bottom: 1rem;
  transform: translateX(-50%);
  max-width: calc(100% - 2rem);
}

/* Product image crossfade. Both frames are stacked; only opacity and a small
   scale change, so the swap reads as one object resolving rather than a cut. */
.swap { position: relative; }
.swap__layer {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(.97);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.swap__layer[data-active='true'] { opacity: 1; transform: none; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .switch__thumb, .swap__layer { transition: none !important; }
}

/* -------------------------------------------------------------- toolbar --- */

/* Two deliberate rows: what it is, then how you want it shown. Letting these
   share one flex row leaves the format group orphaned and right-aligned on its
   own line as soon as the category pills fill the width. */
.toolbar { display: grid; gap: 1rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.toolbar__row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.toolbar__row--split { justify-content: space-between; border-top: 1px solid var(--line); padding-top: 1rem; }
.filterset { display: flex; gap: .5rem; flex-wrap: wrap; }
.filterset button {
  padding: .6rem 1.2rem; border-radius: var(--r-round);
  border: 1px solid var(--line); background: var(--white);
  font-size: .95rem; font-weight: 500; color: var(--ink-2);
  transition: all .2s var(--ease);
}
.filterset button[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--white); font-weight: 600; }
.toolbar__right { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.select {
  padding: .6rem 1rem; border-radius: var(--r-round);
  border: 1px solid var(--line); background: var(--white);
  font-size: .95rem; font-weight: 500; color: var(--ink-2);
}
.count { font-size: .95rem; color: var(--faint); }

.empty { text-align: center; padding: clamp(3rem, 8vw, 6rem) 1rem; }
.empty p { color: var(--mute); margin: .5rem 0 1.5rem; }

/* ------------------------------------------------------------------ pdp --- */

.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.pdp__figure { position: sticky; top: 100px; }
.pdp__frame {
  /* Same fixed frame as the cards. Without it the render sizes to its intrinsic
     941x1672 and the vial fills most of a screen, so a visitor sees the cap and
     has to scroll to find the price. */
  background: var(--surface); border-radius: var(--r-lg);
  aspect-ratio: 4 / 5; min-height: 0;
  position: relative; overflow: hidden;
}
.pdp__frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: clamp(1.5rem, 4vw, 3rem);
  object-fit: contain;
  filter: drop-shadow(0 26px 44px rgba(13, 17, 23, .18));
}
/* Room at the foot of the box for the format switch, so the vial sits clear of it
   rather than behind it — the same reservation the cards make. Only where a
   switch exists: the five single-format products would otherwise float high
   above 88px of dead space. */
.pdp__frame:has(.switch--overlay) img { padding-bottom: 5.5rem; }
.pdp__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; }

.pdp__price { display: flex; align-items: baseline; gap: .75rem; margin: 1.75rem 0 0; }
.pdp__price b { font-size: clamp(1.8rem, 3.4vw, 2.4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.pdp__price span { color: var(--mute); font-size: .98rem; }

.control { margin-top: 1.75rem; }
.format-hint { margin: 1.5rem 0 0; font-size: .92rem; color: var(--mute); }
.format-hint strong { color: var(--ink); font-weight: 600; }
.control__label { display: block; font-size: .9rem; font-weight: 600; color: var(--ink-2); margin-bottom: .65rem; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips button {
  padding: .7rem 1.25rem; border-radius: var(--r-round);
  border: 1px solid var(--line); background: var(--white);
  font-size: .95rem; font-weight: 600; color: var(--ink-2);
  transition: all .2s var(--ease);
}
.chips button[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--white); }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-round); }
.stepper button { width: 46px; height: 48px; color: var(--mute); font-size: 1.15rem; border-radius: var(--r-round); }
.stepper output { min-width: 44px; text-align: center; font-weight: 700; }

.pdp__buy { display: flex; gap: .75rem; margin-top: 2rem; flex-wrap: wrap; }
.pdp__buy .btn { flex: 1 1 200px; }

.datasheet { margin-top: 2.5rem; }
.datasheet dl { display: grid; grid-template-columns: minmax(130px, .45fr) 1fr; margin: 0; }
.datasheet dt { font-size: .95rem; color: var(--faint); padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--line); }
.datasheet dd { font-size: .98rem; font-weight: 500; margin: 0; padding: .85rem 0; border-bottom: 1px solid var(--line); }

.note {
  border-radius: var(--r);
  background: var(--surface);
  padding: 1.15rem 1.35rem;
  margin-top: 1.75rem;
  font-size: .92rem; color: var(--mute);
}
.note strong { color: var(--ink); }

.crumbs { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .92rem; color: var(--faint); padding-block: 1.75rem; }

/* --------------------------------------------------------------- cards --- */

.cards { display: grid; gap: clamp(1.75rem, 3.5vw, 3.5rem); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }

/* ------------------------------------------------------------- tenets --- */
/* Four compact panels again — the stacked rows were right about the shape but
   ate half the page. These are FILLED, not outlined: a warm tint with no border
   at all, which is what separates a current panel from the bordered white box
   this started as. Hover lifts them to pure white so they appear to come
   forward out of the page. */

.cards { display: grid; gap: clamp(.75rem, 1.2vw, 1.1rem); border: 0; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  display: flex; flex-direction: column; gap: .3rem;
  padding: clamp(1.25rem, 2vw, 1.6rem);
  background: var(--surface);
  border: 0; border-radius: 18px;
  transition: background .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}

.card h3 {
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.25;
  margin: 0 0 .15rem; text-wrap: balance;
}
.card p {
  margin: 0; color: var(--mute);
  font-size: .88rem; line-height: 1.55;
}
.card__cat, .card__count {
  display: block; font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .35rem;
}
.card__icon { display: none; }
.card .arrow, .card .btn { margin-top: auto; padding-top: .9rem; align-self: flex-start; font-size: .88rem; }
.card__foot { margin-top: auto; padding-top: .9rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.card__price { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }

@media (max-width: 1024px) { .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .cards--2, .cards--3, .cards--4 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- figures --- */
/* The four tenets were four identical grey text blocks — nothing to look at and
   nothing to hold on to, so they read as filler. Each now opens with the figure
   that evidences the claim beneath it. Every value is one the page already
   states, which is the point: this is the section that promises neutral data,
   so the anchor is data rather than a stock flask-and-shield icon. */
.card__figure {
  /* A fixed box bottom-aligned: the word value is set smaller than the numerals,
     and without this the four headings sat on four different lines across the
     row. */
  display: flex; align-items: flex-end;
  min-height: clamp(1.9rem, 3vw, 2.4rem);
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  font-weight: 700; letter-spacing: -0.045em; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  margin-bottom: .85rem;
  white-space: nowrap;
}
/* The unit rides at two-thirds scale so the numeral stays the thing you read. */
.card__figure i { font-style: normal; font-size: .62em; letter-spacing: -0.02em; }
/* One tenet has no number behind it. Set smaller so it carries the same optical
   weight as the numerals rather than shouting over them. */
.card__figure--word { font-size: clamp(1.2rem, 1.9vw, 1.5rem); letter-spacing: -0.03em; }
.cards--tenets .card { gap: 0; }
.cards--tenets .card h3 { margin-bottom: .3rem; }

/* On a phone the four cards stacked into four tall slabs. Setting the figure
   beside the text instead of above it halves each card's height and gives the
   column a left-hand rhythm to scan down. */
@media (max-width: 720px) {
  .cards--tenets .card {
    display: grid; grid-template-columns: 4.6rem 1fr;
    column-gap: 1rem; align-items: start;
    padding: 1.15rem 1.25rem;
  }
  .cards--tenets .card__figure {
    grid-column: 1; grid-row: 1 / span 2;
    font-size: 1.4rem; min-height: 1.4rem; align-items: baseline;
    margin: .1rem 0 0;
  }
  .cards--tenets .card__figure--word { font-size: 1.02rem; }
  .cards--tenets .card h3, .cards--tenets .card p { grid-column: 2; }
}

/* -------------------------------------------------------------- figures --- */

.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }

/* One band, not a section. Previously this ran a full section's padding for
   content that duplicated the tenets and the trust strip above it. */
.statband { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }
.statband .figure b { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.statband .figure span { font-size: .82rem; margin-top: .35rem; }
@media (max-width: 600px) { .statband .figures { grid-template-columns: repeat(2, 1fr); row-gap: 1.5rem; } }
.figure b { display: block; font-size: clamp(1.8rem, 3.8vw, 2.6rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.figure span { display: block; margin-top: .6rem; font-size: .95rem; color: #a9b2bd; }

/* ----------------------------------------------------------------- faq --- */

.faq { max-width: 860px; margin-inline: auto; }
.faq details { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: .75rem; background: var(--white); transition: border-color .2s var(--ease); }
.faq details[open] { border-color: var(--ink); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.15rem 1.35rem; cursor: pointer; list-style: none;
  font-size: 1rem; font-weight: 600; letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.5rem; font-weight: 400; color: var(--faint); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 1.5rem 1.4rem; color: var(--mute); }

/* --------------------------------------------------------------- forms --- */

.field { display: grid; gap: .45rem; }
.field label { font-size: .92rem; font-weight: 600; color: var(--ink-2); }
.field label .req { color: var(--gold); }
.field input, .field select, .field textarea {
  width: 100%; padding: .95rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--white); color: var(--ink); font: inherit; font-size: 1rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(13, 17, 23, .06);
}
.field[data-invalid='true'] input { border-color: #b4402c; }
.field__error { font-size: .85rem; color: #b4402c; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hint { font-size: .9rem; color: var(--faint); }

.panel { border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2rem); background: var(--white); }
.panel + .panel { margin-top: 1rem; }
.panel__head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.5rem; }
.panel__no { width: 30px; height: 30px; flex: none; border-radius: var(--r-round); background: var(--gold-soft); color: var(--gold); display: grid; place-items: center; font-size: .9rem; font-weight: 700; }
.panel__title { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }

.attest { display: flex; gap: .9rem; align-items: flex-start; padding: 1.2rem; border-radius: var(--r); background: var(--surface); }
.attest__box { width: 22px; height: 22px; flex: none; border: 1.5px solid var(--faint); border-radius: 6px; background: var(--white); display: grid; place-items: center; cursor: pointer; }
.attest__box[aria-checked='true'] { background: var(--ink); border-color: var(--ink); }
.attest__box svg { width: 13px; height: 13px; stroke: var(--white); fill: none; stroke-width: 3; opacity: 0; }
.attest__box[aria-checked='true'] svg { opacity: 1; }
.attest p { margin: 0; font-size: .92rem; color: var(--mute); }
.attest a { color: var(--gold); text-decoration: underline; }

.summary { position: sticky; top: 100px; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 1.85rem); background: var(--white); box-shadow: var(--shadow); }
.totals { display: grid; gap: .6rem; margin: 1.25rem 0; }
.totals div { display: flex; justify-content: space-between; font-size: .98rem; color: var(--mute); }
.totals .totals__grand { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: .3rem; font-size: 1.2rem; font-weight: 700; color: var(--ink); }

/* ---------------------------------------------------------------- cart --- */

.drawer-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(13, 17, 23, .4); opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), visibility .28s var(--ease); }
.drawer-scrim[data-open='true'] { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; inset-block: 0; right: 0; z-index: 95;
  width: min(430px, 100%); background: var(--white);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .38s var(--ease);
  box-shadow: -20px 0 60px -20px rgba(13,17,23,.25);
}
.drawer[data-open='true'] { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line); }
.drawer__title { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
.drawer__body { flex: 1; overflow-y: auto; padding: 0 1.5rem; }
.drawer__foot { border-top: 1px solid var(--line); padding: 1.35rem 1.5rem; background: var(--white); }

.line { display: grid; grid-template-columns: 60px 1fr auto; gap: 1rem; padding-block: 1.15rem; border-bottom: 1px solid var(--line); align-items: center; }
.line__media { background: var(--surface); border-radius: var(--r); padding: 6px; }
.line__name { font-weight: 600; font-size: 1rem; letter-spacing: -0.015em; }
.line__meta { font-size: .88rem; color: var(--faint); }
.line__price { font-weight: 700; text-align: right; }
.line__remove { font-size: .85rem; color: var(--faint); text-decoration: underline; padding: 0; margin-top: .3rem; }

/* ------------------------------------------------------------- whatsapp --- */

.wa-float {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 70;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.35rem;
  /* Sits quietly over the page until you reach for it. */
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  backdrop-filter: blur(10px) saturate(1.4);
  color: var(--white); border-radius: var(--r-round);
  font-size: .98rem; font-weight: 600;
  box-shadow: var(--shadow);
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}

.wa-float__label { display: inline; }

/* A row of tag links — related policies, guide topics. Not a filter control. */
.taglist { display: flex; flex-wrap: wrap; gap: .5rem; }
.taglist .tag { transition: background .2s var(--ease), color .2s var(--ease); }
.wa-float svg { width: 20px; height: 20px; fill: currentColor; }

/* --------------------------------------------------------------- footer --- */

.footer { background: var(--ink); color: var(--white); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(2rem, 4vw, 3rem); }
.footer h4 { font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8d96a2; margin: 0 0 1.15rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.footer a { font-size: .98rem; color: #c9d0d8; transition: color .18s var(--ease); }
.footer__note { font-size: .95rem; color: #8d96a2; max-width: 40ch; margin: 1rem 0 0; }
.footer__bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.12); margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.75rem; font-size: .9rem; color: #8d96a2; }
.newsletter { display: flex; gap: .6rem; margin-top: 1.25rem; flex-wrap: wrap; }
.newsletter input {
  flex: 1 1 190px; padding: .9rem 1.1rem;
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-round);
  background: rgba(255,255,255,.06); color: var(--white); font: inherit; font-size: .98rem;
}
.newsletter input::placeholder { color: #8d96a2; }
.newsletter input:focus { outline: none; border-color: var(--white); }

/* --------------------------------------------------------------- toast --- */

.toast {
  position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 160%);
  z-index: 120; background: var(--ink); color: var(--white);
  padding: .95rem 1.6rem; border-radius: var(--r-round);
  font-size: .98rem; font-weight: 500;
  box-shadow: var(--shadow-lg);
  transition: transform .38s var(--ease);
}
.toast[data-open='true'] { transform: translate(-50%, 0); }

/* --------------------------------------------------------------- modal --- */

.modal-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(13, 17, 23, .5); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 1.25rem; }
.modal-scrim[hidden] { display: none; }
.modal { background: var(--white); border-radius: var(--r-lg); padding: clamp(1.85rem, 4vw, 2.5rem); max-width: 440px; width: 100%; box-shadow: var(--shadow-lg); }
.modal--center { text-align: center; }
.modal--center .modal__actions { justify-content: center; }
.modal__logo { width: 56px; height: 56px; margin: 0 auto .25rem; }
.modal h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; margin: .5rem 0 1rem; }
.modal p { color: var(--mute); font-size: .95rem; margin: 0 0 1.6rem; }
.modal__actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.modal__actions .btn { flex: 1 1 150px; }
.modal__fine { font-size: .85rem; color: var(--faint); margin: 1.5rem 0 0; }



/* ------------------------------------------------------ horizontal gal --- */

.hgal { position: relative; height: auto; background: var(--surface); }
html.js-armed .hgal { height: 200vh; }

.hgal__pin { position: relative; padding-block: clamp(3rem, 6vw, 5.5rem); }
html.js-armed .hgal__pin {
  position: sticky; top: 0;
  height: 100svh; min-height: 560px;
  display: flex; flex-direction: column;
  padding-block: clamp(1.5rem, 3vh, 3rem);
  overflow: hidden;
}

.hgal__head { flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(1.25rem, 2.5vh, 2rem); }
.hgal__hint { font-size: .85rem; color: var(--faint); margin: 0; }
.hgal__hint--touch { display: none; }
@media (max-width: 900px) {
  .hgal__hint { display: none; }
  .hgal__hint--touch { display: block; font-weight: 600; color: var(--gold); }
}

/* Swipe affordance. A row that runs off the edge of a phone with no scrollbar,
   no rule and no card edge simply does not look scrollable — readers stopped at
   the first family and never saw the other four. The rail fills as the row
   moves, which is the one signal a hidden-scrollbar carousel cannot do without. */
.hgal__rail { display: none; }
@media (max-width: 900px) {
  .hgal__rail {
    display: block; height: 3px; border-radius: 3px;
    margin: 1rem var(--gutter) 0;
    background: var(--line); overflow: hidden;
  }
  .hgal__rail span {
    display: block; height: 100%; width: 30%;
    border-radius: 3px; background: var(--gold);
    transform-origin: left center;
  }
}

/* Without arming this is a plain swipeable row; armed, the track is driven by
   the page's vertical scroll instead. */
.hgal__viewport { flex: 1 1 auto; min-height: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hgal__viewport::-webkit-scrollbar { display: none; }
html.js-armed .hgal__viewport { overflow: hidden; }

/* The track and its panels fill the available height, and the artwork is the
   part that flexes. Previously the panel was its own intrinsic height, so on a
   short viewport the body text was simply cut off by the pin's overflow. */
.hgal__track {
  display: flex; gap: clamp(1rem, 2vw, 1.75rem);
  padding-inline: var(--gutter);
  width: max-content; height: 100%;
  align-items: stretch;
  will-change: transform;
}

.hgal__panel {
  flex: 0 0 auto;
  width: clamp(250px, 27vw, 340px);
  height: 100%;
  background: var(--surface);
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.hgal__art img { transition: transform .55s var(--ease), filter .55s var(--ease); }

.hgal__body .arrow { transition: gap .3s var(--ease); }

.hgal__art { position: relative; flex: 1 1 auto; min-height: 0; background: none; }
.hgal__art img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 6% 24%; object-fit: contain; }

.hgal__body { flex: none; padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .35rem; }
.hgal__count { font-size: .78rem; color: var(--faint); }
.hgal__body h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em; margin: 0; }
.hgal__body p { margin: 0; color: var(--mute); font-size: .92rem; }
.hgal__body .arrow { margin-top: auto; padding-top: 1rem; align-self: flex-start; font-size: .9rem; }

/* Touch: never hijack vertical scroll to move content sideways. */
@media (max-width: 900px) {
  html.js-armed .hgal { height: auto; }
  html.js-armed .hgal__pin { position: relative; height: auto; min-height: 0; display: block; overflow: visible; }
  html.js-armed .hgal__viewport { overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
  .hgal__track { transform: none !important; }

  /* Unpinned, the pin is a plain block, so the track's height:100% resolved
     against nothing and the artwork — flex:1 with min-height:0 — collapsed to
     zero. Every panel rendered as bare text on the section's own background: no
     vial, no card edge, nothing to mark where one family ended and the next
     began. Panels get an explicit picture and a surface of their own. */
  .hgal__track { height: auto; align-items: stretch; gap: .75rem; }
  .hgal__panel {
    width: 76vw; max-width: 300px; height: auto;
    background: var(--white);
    box-shadow: 0 1px 0 var(--line), 0 18px 34px -28px rgba(13, 17, 23, .5);
    scroll-snap-align: center;
  }
  .hgal__art { flex: none; height: 168px; }
  .hgal__body { padding: 1rem 1.1rem 1.2rem; }
  .hgal__body .arrow { padding-top: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hgal, html.js-armed .hgal { height: auto; }
  html.js-armed .hgal__pin { position: relative; height: auto; min-height: 0; display: block; overflow: visible; }
  html.js-armed .hgal__viewport { overflow-x: auto; }
  .hgal__track { transform: none !important; }
  .hgal__hint { display: none; }
}

/* ---------------------------------------------------------------- reel --- */
/* Pinned specimen reel. One sticky frame; scroll scrubs the compound. The tall
   scroll span is only applied once the script confirms it is running, so a
   no-JS visitor gets a normal section rather than several blank viewports. */

.reel { position: relative; height: 150vh; background: var(--surface); }
html.js-armed .reel { height: 420vh; }


.reel__pin {
  position: sticky; top: 0;
  height: 100svh; min-height: 560px;
  display: grid; place-items: center;
  overflow: hidden;
}

/* The name track runs behind the product, sized so it always overflows and
   therefore always has somewhere to travel. */
.reel__word {
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: max-content; white-space: nowrap;
  font-size: clamp(7rem, 26vw, 22rem);
  font-weight: 700; letter-spacing: -0.055em;
  color: var(--ink); opacity: .12;
  pointer-events: none; user-select: none;
  will-change: transform;
}

.reel__stage { position: relative; z-index: 2; width: min(52vw, 340px); aspect-ratio: 4 / 5; }
.reel__shot {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transform: scale(.92) translateY(16px);
  transition: opacity .7s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
.reel__shot.is-on { opacity: 1; transform: none; }
.reel__shot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(13, 17, 23, .22));
}

.reel__meta {
  position: absolute; z-index: 3;
  left: 0; right: 0; bottom: clamp(2rem, 6vh, 4rem);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
}
.reel__slot { position: relative; min-height: 118px; flex: 1 1 auto; }
.reel__entry {
  position: absolute; inset: auto auto 0 0; width: 100%;
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .65s var(--ease);
}
.reel__entry.is-on { opacity: 1; transform: none; }
.reel__cat { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.reel__entry h3 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1; margin: .35rem 0 .4rem; }
.reel__entry p { margin: 0; color: var(--mute); font-size: .95rem; }

.reel__progress { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.reel__progress span { display: block; height: 100%; width: 0; background: var(--gold); }

@media (max-width: 700px) {
  .reel__meta { flex-direction: column; align-items: stretch; }
  /* The slot's only children are absolutely positioned, so as a column flex item
     with align-items:flex-start it shrink-wrapped to zero width — every entry
     then wrapped one word per line ("30mg / 40mg / de la / 770 lei"). It has to be
     told to fill the row. */
  .reel__slot { width: 100%; align-self: stretch; }
}

/* Reduced motion, or no script: the reel collapses to a single static frame
   with the first compound shown and everything legible. */
html:not(.js-armed) .reel__word { opacity: .05; }
@media (prefers-reduced-motion: reduce) {
  .reel, html.js-armed .reel { height: auto; }
  .reel__pin { position: static; height: auto; min-height: 0; padding-block: clamp(3rem, 8vw, 6rem); }
  .reel__word, .reel__progress { display: none; }
  .reel__shot, .reel__entry { transition: none; }
  /* Un-pinning the frame leaves these absolutely positioned against the section
     itself, where they overlap the product. They have to return to flow. */
  .reel__meta { position: static; margin-top: 2rem; }
  .reel__slot { min-height: 0; }
  .reel__entry { position: static; opacity: 1; transform: none; }
  .reel__entry:not(.is-on) { display: none; }
}

/* --------------------------------------------------------- header state --- */
/* The masthead tightens once the page has moved — a small signal that you are
   no longer at the top, rather than a bar that never changes. */
.masthead { transition: box-shadow .3s var(--ease), background .3s var(--ease); }
.masthead.is-stuck {
  box-shadow: 0 1px 0 var(--line), 0 8px 28px -18px rgba(13, 17, 23, .3);
  background: rgba(255, 255, 255, .92);
}
.masthead.is-stuck .masthead__row { min-height: 64px; }
.masthead__row { transition: min-height .3s var(--ease); }

.hero__object { will-change: transform; }

/* ------------------------------------------------------------- reveals --- */

.reveal { opacity: 0; transform: translateY(16px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-stagger > * { opacity: 0; transform: translateY(14px); }
.reveal-stagger.is-in > * { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: .06s; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: .12s; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: .18s; }

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 1024px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp__figure { position: static; }
  .summary { position: static; }
  .gallery--4, .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .figures { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: inline-grid; }
  .masthead__row { min-height: 66px; }
  .gallery--3, .cards--3 { grid-template-columns: repeat(2, 1fr); }
  .field-row { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .wa-float__label { display: none; }
  .wa-float { padding: .95rem; }
  /* Catalogue stays two-up on a phone — one column made 16 products a very
     long scroll. The tenet cards still drop to one, they are text blocks. */
  .gallery--2, .gallery--3, .gallery--4 { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .cards--2, .cards--3, .cards--4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .figures { grid-template-columns: 1fr 1fr; }
  .datasheet dl { grid-template-columns: 1fr; }
  .datasheet dt { border-bottom: 0; padding-bottom: 0; }
  .chip-float { display: none; }
}

.mobile-nav { position: fixed; inset: 66px 0 0; z-index: 80; background: var(--white); padding: 1.5rem var(--gutter) 2rem; display: none; flex-direction: column; overflow-y: auto; }
.mobile-nav[data-open='true'] { display: flex; }
.mobile-nav a { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.025em; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
/* The floating WhatsApp button outranks the sheet, so it would sit on top of the
   open menu. Nothing else should be reachable while the menu owns the screen. */
body:has(.mobile-nav[data-open='true']) .wa-float { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------- hover only --- */
/* Pointer devices only. On a touch screen :hover latches after a tap and
   never clears, leaving a card stuck in its hovered state — lifted, with the
   image ground darkened behind it. Every hover treatment lives in here so
   that cannot happen on a phone. */
@media (hover: hover) and (pointer: fine) {
  .nav a:hover > span { transform: translateY(-105%); opacity: 0; }
  .nav a:hover::before { transform: none; }
  .icon-btn:hover { border-color: var(--ink); }
  .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
  .btn--ghost:hover { border-color: var(--ink); }
  .arrow:hover { gap: .85rem; }
  .card:hover .arrow { gap: .85rem; color: var(--gold); }
  /* A coordinated hover rather than a lift-and-shadow: a gold hairline draws
   across the top edge, the frame warms, the render rises, and the price row
   hands over to the action. */
.tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line);
}
  .tile:hover .tile__frame { position: relative; }
  .tile:hover .tile__media img {
  transform: translateY(-8px) scale(1.03);
  filter: drop-shadow(0 16px 18px rgba(11,14,18,.20));
}
  .tile:hover .tile__media { background: var(--surface-2); }
  .tile:hover .tile__foot .btn span { display: inline; }
  .switch button:hover { color: var(--ink-2); }
  .filterset button:hover { border-color: var(--ink); }
  .chips button:hover { border-color: var(--ink); }
  .stepper button:hover { color: var(--ink); }
  .crumbs a:hover { color: var(--ink); }
  .card:hover {
  background: var(--white);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
  .line__remove:hover { color: #b4402c; }
  .wa-float:hover {
  background: var(--ink);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
  .taglist a.tag:hover { background: var(--ink); color: var(--white); }
  .footer a:hover { color: var(--white); }
  .hgal__panel:hover {
  background: var(--white);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
  .hgal__panel:hover .hgal__art img {
  transform: translateY(-6px) scale(1.03);
  filter: drop-shadow(0 14px 16px rgba(11,14,18,.18));
}
  
  .hgal__panel:hover .hgal__body .arrow { gap: .85rem; }
}

/* --------------------------------------------------- mobile reel (last) --- */
/* Deliberately at the end of the file. Placed earlier, the base .reel__stage
   rule further down overrode it on source order and the vial kept rendering at
   the desktop 52vw — 195px on a phone, which is what "make it bigger" was
   asking about. */
@media (max-width: 760px) {
  /* 100vh of pin plus 60vh per compound — the same per-compound pace the phone
     had at two, now carrying all four. */
  html.js-armed .reel { height: 340vh; }
  .reel__pin { gap: 0; }
  /* The travelling name is the whole point of this section — hiding it on a
     phone left a vial floating on an empty field with nothing to show that the
     scroll was driving anything. It costs no layout room (it is absolutely
     positioned), so it comes back, sized to the phone and pulled up onto the
     product rather than sitting behind the caption. */
  .reel__word { font-size: 34vw; opacity: .09; top: 42%; }
  /* Lifted off centre so the caption below it has clear air — the two used to
     collide at the vial's base. */
  .reel__stage { width: min(80vw, 320px); transform: translateY(-7vh); }
  .reel__meta { padding-block: .5rem; }
}

/* ------------------------------------------------- catalogue on a phone --- */
/* At two-up each card is about 155px wide, so the internals have to give: type
   steps down, and the price and action stack instead of sitting side by side. */
@media (max-width: 600px) {
  .tile__body { padding: .7rem .7rem .8rem; gap: .15rem; }
  .tile__cat { font-size: .66rem; }
  .tile__name { font-size: .92rem; letter-spacing: -0.02em; }
  .tile__meta { font-size: .74rem; }
  .tile__foot { flex-direction: column; align-items: stretch; gap: .5rem; padding-top: .6rem; }
  .tile__price { font-size: .95rem; }
  .tile__foot .btn { width: 100%; padding: .55rem .6rem; font-size: .82rem; }
  .tile__tag { font-size: .62rem; padding: .22rem .5rem; top: .5rem; left: .5rem; }
  .switch--sm button { padding: .28rem .55rem; font-size: .7rem; }
  .switch--inframe { bottom: .5rem; }
  .tile__media img { padding: 5% 20% 22%; }
}