/* ==========================================================================
   PEP-T — Stylesheet
   --------------------------------------------------------------------------
   You normally do NOT need to edit this file.
   To change brand colours, edit /content/settings.js instead — the colours
   there are injected as CSS variables at runtime and override the defaults
   listed in :root below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Colour */
  --bg:            #FFFFFF;   /* white page */
  --surface:       #FFFFFF;   /* cards, panels */
  --surface-alt:   #F4F4F3;   /* light grey banding */
  --ink:           #16181A;   /* headings, near-black */
  --charcoal:      #33373A;   /* body text */
  --muted:         #6E7276;   /* secondary text */
  --line:          #E6E6E5;   /* hairline dividers */
  --line-strong:   #CFD0D1;
  --accent:        #52585C;   /* graphite — used for small marks and links */
  --accent-hover:  #2E3336;
  --accent-soft:   #F2F3F3;   /* very pale grey background tint */
  /* The silver rule. Flat colour for small marks, and a three-stop version
     that suggests brushed metal on the logo and section rules. Silver is a
     reflective ink in print; on screen the light shift is what reads as
     metal, so the gradient is used sparingly and only on rules. */
  --silver:        #A9AEB2;
  --silver-grad:   linear-gradient(90deg, #C9CDD0 0%, #96A0A6 38%, #D6DADC 62%, #A2A9AE 100%);
  --warn-bg:       #FBF3E4;   /* placeholder / notice background */
  --warn-line:     #E4CF9F;
  --warn-ink:      #6B4E12;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  /* Used only for the logo wordmark. Body copy stays sans. */
  --font-serif: "Playfair Display", "Iowan Old Style", Georgia,
                "Times New Roman", serif;
  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.625rem;
  --fs-2xl:  2.125rem;
  --fs-3xl:  clamp(2.25rem, 5.5vw, 4rem);

  /* Space */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  /* Layout */
  --maxw: 1200px;
  --maxw-narrow: 760px;
  --radius: 2px;
  --radius-lg: 4px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

html { background: var(--bg); }

body {
  margin: 0;
  background: transparent;
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "cv05" 1;
}

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

h1, h2, h3, h4, h5 {
  color: var(--ink);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); letter-spacing: -0.035em; hyphens: manual; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.03em; }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--sp-4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
p a, .lede a, .accordion__content a, .notice a { text-decoration: underline; }
a:hover { color: var(--accent-hover); }

/* Visible focus state everywhere — required for WCAG 2.2 AA */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-7) 0; }

::selection { background: var(--accent); color: #fff; }

/* --------------------------------------------------------------------------
   3. UTILITIES
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-5); }
.wrap--narrow { max-width: var(--maxw-narrow); }
.wrap--wide { max-width: 1440px; }

.section { padding-block: var(--sp-9); }
.section--tight { padding-block: var(--sp-7); }
.section--alt { background: var(--surface-alt); }
.section--surface { background: var(--surface); border-block: 1px solid var(--line); }

.eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 var(--sp-3);
}

.lede { font-size: var(--fs-md); color: var(--charcoal); max-width: 62ch; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; letter-spacing: 0.02em; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: 0; left: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: var(--sp-3) var(--sp-4);
  transform: translateY(-120%);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

.stack > * + * { margin-top: var(--sp-4); }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* Product tiles. Wider minimum than a generic card so the vial has room to
   read on a big monitor — four across at desktop width, not six small ones. */
.grid--products { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--sp-6) var(--sp-5); }

.section-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line);
}
.section-head p { margin: 0; }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: inherit; font-size: var(--fs-sm); font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink); color: #fff;
  text-decoration: none; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.btn--accent { background: var(--accent); border-color: var(--accent); }
.btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn--sm { padding: 0.5rem 0.95rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; justify-content: center; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: var(--fs-sm); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.link-arrow span { transition: transform .25s var(--ease); }
.link-arrow:hover span { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); min-height: 72px;
  /* Wider than the 1200px body so the wordmark, six menu items, the language
     picker and the button all sit on one line instead of wrapping. */
  max-width: 1440px;
}

/* ---- Wordmark ---------------------------------------------------------
   Live text, not an image file — stays sharp at any size and is readable
   by search engines and screen readers. Change the words in settings.js.
   ---------------------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; gap: var(--sp-4); text-decoration: none; color: var(--ink); flex-shrink: 0; }
.logo__lockup { display: inline-block; }
.logo__word {
  display: block;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.7rem;
  line-height: .95;
  letter-spacing: -0.015em;
  color: var(--accent);
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.logo__dot { color: var(--ink); }
.logo__rule {
  display: block; height: 3px; width: 46%;
  background: var(--silver-grad); border-radius: 1px;
  margin: 5px auto 0;
  transition: width .3s var(--ease);
}
.logo:hover .logo__word { color: var(--accent-hover); }
.logo:hover .logo__rule { width: 72%; }
.logo__tag {
  font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.06em;
  padding-left: var(--sp-4); border-left: 1px solid var(--line);
  white-space: nowrap;
}
/* The strapline is the first thing to go when the bar gets tight — it is
   repeated in the hero, so nothing is lost. */
@media (max-width: 1240px) { .logo__tag { display: none; } }

/* Larger treatment in the footer */
.site-footer .logo__word { font-size: 2.1rem; }
.site-footer .logo__rule { width: 40%; margin-left: 0; }

.nav { display: flex; align-items: center; gap: var(--sp-5); flex-shrink: 0; }
.nav__list { display: flex; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; }
.nav__link {
  font-size: var(--fs-sm); color: var(--charcoal); text-decoration: none;
  padding: .35rem 0; position: relative; white-space: nowrap;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--accent); transition: right .3s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { right: 0; }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 500; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: .55rem .7rem; cursor: pointer;
}
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); }
.nav-toggle span + span { margin-top: 4px; }

/* Between tablet and desktop the bar is at its tightest — close the gaps
   rather than let anything wrap. */
@media (min-width: 901px) and (max-width: 1180px) {
  .nav { gap: var(--sp-4); }
  .nav__list { gap: var(--sp-4); }
  .nav .btn { padding: .6rem 1rem; }
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 72px 0 auto 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--sp-4) var(--sp-5) var(--sp-6);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
    max-height: calc(100dvh - 72px); overflow-y: auto;
  }
  .nav[data-open="true"] { transform: none; opacity: 1; pointer-events: auto; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__link { display: block; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-md); }
  .nav .btn { margin-top: var(--sp-4); justify-content: center; }
}

.nav .btn { white-space: nowrap; }

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--sp-9) var(--sp-8); position: relative; overflow: hidden; }
.hero__grid {
  display: grid; gap: var(--sp-8);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

.hero h1 { margin-bottom: var(--sp-5); }
.hero__lede { font-size: var(--fs-md); color: var(--charcoal); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

.hero__stats {
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.hero__stat strong { display: block; font-size: var(--fs-lg); color: var(--ink); font-weight: 500; }
.hero__stat span { font-size: var(--fs-xs); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }

.hero__media {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-6);
  display: grid; place-items: center; aspect-ratio: 4 / 5;
}

/* Animated entrance (respects reduced motion via the block above) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 10px 30px -18px rgba(20,23,26,.35); }

.card__media {
  background: var(--surface-alt); border-bottom: 1px solid var(--line);
  aspect-ratio: 4 / 3; display: grid; place-items: center; padding: var(--sp-5);
}
.card__media img { width: 100%; height: 100%; object-fit: contain; }

.card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.card__title { margin: 0; font-size: var(--fs-md); }
.card__meta { display: grid; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); margin: 0; }
.card__meta div { display: flex; justify-content: space-between; gap: var(--sp-3); border-bottom: 1px dashed var(--line); padding-bottom: 3px; }
.card__meta dt { color: var(--muted); }
.card__meta dd { margin: 0; color: var(--charcoal); text-align: right; }
.card__foot { margin-top: auto; padding-top: var(--sp-3); }

/* --- Product card -------------------------------------------------------
   Picture-led, in the manner of a clinical skincare grid: a large square
   tile carries the product, and everything written sits quietly beneath it.
   Scoped to .card--product so accessory cards keep their existing look. */
.card--product {
  background: none; border: 0; border-radius: 0; overflow: visible;
}
.card--product:hover { transform: none; box-shadow: none; border-color: transparent; }

.card--product .card__media {
  aspect-ratio: 1 / 1; border: 0; border-radius: var(--radius-lg);
  padding: var(--sp-6); position: relative; display: block;
  transition: background-color .3s var(--ease);
}
.card--product .card__media img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.card--product:hover .card__media { background: var(--surface-alt); }

.card--product .card__tag {
  position: absolute; inset-inline-start: var(--sp-3); inset-block-start: var(--sp-3);
  display: flex; gap: var(--sp-2); flex-wrap: wrap; z-index: 1;
}

.card--product .card__body {
  padding: var(--sp-4) 0 0; gap: var(--sp-2);
}
.card--product .card__title { font-size: var(--fs-sm); font-weight: 500; }
.card--product .card__title a { color: inherit; text-decoration: none; }
.card--product .card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.card--product .card__title a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.card__stars { display: flex; }
.card__strapline { margin: 0; font-size: var(--fs-xs); color: var(--muted); }

/* Price on the left, sizes on the right — same row, aligned on the baseline */
.card__line {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-top: var(--sp-3); flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: var(--sp-3);
}
.card__price { font-size: var(--fs-md); font-weight: 500; color: var(--ink); }
.card__sizes { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.card__size {
  background: none; border: 0; padding: 2px 0; font: inherit;
  font-size: var(--fs-xs); color: var(--muted); cursor: pointer;
  border-bottom: 1px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease);
}
.card__size:hover { color: var(--ink); }
.card__size.is-selected { color: var(--ink); border-bottom-color: var(--ink); }
.card__size:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card__size--only { cursor: default; }
.card__size--only:hover { color: var(--muted); }

.card--product .card__add { margin-top: var(--sp-3); }
.card--product .card__add.is-added { border-color: var(--accent); color: var(--accent); }

/* Feature / step cards */
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-6); }
.feature__num {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; color: var(--accent);
  display: block; margin-bottom: var(--sp-4);
}
.feature h3 { margin-bottom: var(--sp-2); }
.feature p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

/* --------------------------------------------------------------------------
   8. BADGES & NOTICES
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: .04em;
  padding: .25rem .6rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface-alt); color: var(--charcoal);
  white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.badge--verified { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent); }
.badge--pending  { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.badge--none     { background: var(--surface-alt); color: var(--muted); }

/* Placeholder marker — makes unfinished content impossible to miss */
.placeholder {
  display: inline-block;
  background: var(--warn-bg); border: 1px dashed var(--warn-line); color: var(--warn-ink);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-xs); letter-spacing: .02em;
  padding: .15rem .45rem; border-radius: var(--radius);
}
.placeholder-block {
  display: block; background: var(--warn-bg); border: 1px dashed var(--warn-line);
  color: var(--warn-ink); border-radius: var(--radius-lg);
  padding: var(--sp-5); font-size: var(--fs-sm);
}
.placeholder-block p { color: inherit; }
.placeholder-block strong { display: block; margin-bottom: var(--sp-2); }

.notice {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--surface); border-radius: var(--radius);
  padding: var(--sp-5); font-size: var(--fs-sm);
}
.notice h3 { font-size: var(--fs-base); margin-bottom: var(--sp-2); }
.notice p { color: var(--muted); margin-bottom: var(--sp-2); }
.notice--legal { border-left-color: var(--warn-line); background: var(--warn-bg); }
.notice--legal p, .notice--legal h3 { color: var(--warn-ink); }

/* Top-of-site compliance strip */
.compliance-bar {
  background: var(--ink); color: #D6DBD6;
  border-bottom: 3px solid var(--silver);
  font-size: var(--fs-xs); letter-spacing: .03em; text-align: center;
  padding: var(--sp-2) var(--sp-4);
}
.compliance-bar strong { color: #fff; font-weight: 500; }

/* --------------------------------------------------------------------------
   9. FORMS & FILTERS
   -------------------------------------------------------------------------- */
.field { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field label { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }
.field .hint { font-size: var(--fs-xs); color: var(--muted); }

input[type="text"], input[type="email"], input[type="search"], select, textarea {
  font: inherit; font-size: var(--fs-base); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: .7rem .85rem; width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
textarea { min-height: 150px; resize: vertical; }
select { appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B7378' stroke-width='1.4' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; padding-right: 2.2rem;
}

.checkbox { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-5); }
.checkbox input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--accent); }
.checkbox label { font-size: var(--fs-sm); color: var(--charcoal); font-weight: 400; }

.filters {
  display: grid; gap: var(--sp-4);
  grid-template-columns: minmax(220px, 2fr) repeat(auto-fit, minmax(160px, 1fr));
  align-items: end;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-5); margin-bottom: var(--sp-6);
}
.filters .field { margin: 0; }

.results-count { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-5); }

/* --------------------------------------------------------------------------
   10. TABLES & DATA LISTS
   -------------------------------------------------------------------------- */
.data-list { margin: 0; border-top: 1px solid var(--line); }
.data-list__row {
  display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr);
  gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--line);
}
.data-list dt { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.data-list dd { margin: 0; color: var(--ink); }
@media (max-width: 560px) { .data-list__row { grid-template-columns: 1fr; gap: var(--sp-1); } }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th, td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
th { font-weight: 500; color: var(--muted); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-alt); }

/* --------------------------------------------------------------------------
   11. COA COMPONENT
   -------------------------------------------------------------------------- */
.coa {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.coa__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line); background: var(--surface-alt);
}
.coa__head h3 { margin: 0; font-size: var(--fs-base); }
.coa__body { padding: var(--sp-5); }
.coa__foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   12. ACCORDION (FAQ)
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  cursor: pointer; list-style: none; padding: var(--sp-5) 0;
  font-size: var(--fs-md); color: var(--ink);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+"; font-size: 1.25rem; color: var(--accent); line-height: 1;
  transition: transform .25s var(--ease); flex: none;
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion summary:hover { color: var(--accent); }
.accordion__content { padding: 0 0 var(--sp-5); max-width: 70ch; color: var(--muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   13. PROCESS TIMELINE
   -------------------------------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px;
  width: 1px; background: var(--line);
}
.timeline li { position: relative; padding: 0 0 var(--sp-6) var(--sp-7); }
.timeline li::before {
  content: ""; position: absolute; left: 6px; top: 7px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--accent);
}
.timeline h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.timeline p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

/* --------------------------------------------------------------------------
   14. PRODUCT DETAIL
   -------------------------------------------------------------------------- */
.product-layout {
  display: grid; gap: var(--sp-8);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
}
@media (max-width: 900px) { .product-layout { grid-template-columns: 1fr; gap: var(--sp-6); } }

.product-figure {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-7);
  display: grid; place-items: center; position: sticky; top: 96px;
}
@media (max-width: 900px) { .product-figure { position: static; } }

.breadcrumb { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--sp-5); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: var(--line-strong); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }

/* --------------------------------------------------------------------------
   15. BATCH VERIFY
   -------------------------------------------------------------------------- */
.verify {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-6);
}
.verify__form { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.verify__form input { flex: 1 1 240px; width: auto; }
.verify__result { margin-top: var(--sp-5); }
.verify__result:empty { display: none; }

/* --------------------------------------------------------------------------
   16. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band { background: var(--ink); color: #E4E9E4; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #A7B0A8; }
.cta-band .btn { background: #fff; color: var(--ink); border-color: #fff; }
.cta-band .btn:hover { background: var(--silver); border-color: var(--silver); color: var(--ink); }
.cta-band .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.cta-band .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.cta-band input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.25); color: #fff; }
.cta-band input::placeholder { color: #8A938B; }
.cta-band label { color: #E4E9E4; }

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding-block: var(--sp-8) var(--sp-6); margin-top: var(--sp-9); }
.footer__grid { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr)); }
.footer__col h4 { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: var(--sp-4); }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.footer__col a { font-size: var(--fs-sm); color: var(--charcoal); text-decoration: none; }
.footer__col a:hover { color: var(--accent); text-decoration: underline; }
.footer__about p { font-size: var(--fs-sm); color: var(--muted); max-width: 40ch; }
.footer__legal {
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
  font-size: var(--fs-xs); color: var(--muted);
}
.footer__disclaimer { font-size: var(--fs-xs); color: var(--muted); max-width: 90ch; margin-top: var(--sp-5); line-height: 1.7; }

/* --------------------------------------------------------------------------
   18. PAGE HEADER (interior pages)
   -------------------------------------------------------------------------- */
.page-head { padding-block: var(--sp-8) var(--sp-6); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: var(--sp-4); }
.page-head .lede { color: var(--muted); }

/* --------------------------------------------------------------------------
   19-A. CRAFT PASS — the "lab record" identity layer
   --------------------------------------------------------------------------
   Added in the design refinement pass. One idea runs through all of it:
   PEP-T's documents ARE the brand, so the site borrows the visual language
   of a printed laboratory record — double rules, serial numbers, stamps.
   Safe to leave alone; colours still come from content/settings.js.
   -------------------------------------------------------------------------- */

/* The record rule: a thick+thin double line, as on printed report headers.
   Replaces the plain hairline under section headings. */
.section-head {
  border-bottom: none;
  position: relative;
  padding-bottom: var(--sp-4);
}
.section-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line-strong);
}
/* short silver tick at the start of every section rule — the logo device,
   repeated quietly across the site */
.section-head::before {
  content: ""; position: absolute; left: 0; bottom: 4px; z-index: 1;
  width: 34px; height: 3px; background: var(--silver-grad);
}
.cta-band .section-head::after { border-top-color: #fff; border-bottom-color: rgba(255,255,255,.3); }

/* Serial treatment for batch numbers — mono, spaced, with a № prefix
   added by the engine. Makes a batch number feel like a serial number
   on something precise. */
.serial {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em; letter-spacing: 0.08em;
  color: var(--ink);
  white-space: nowrap;
}
.serial::before { content: "№ "; color: var(--accent); font-weight: 600; }

/* Page headings get a short accent rule above the eyebrow — a quiet,
   repeatable signature. */
.page-head .eyebrow::before,
.hero .eyebrow::before {
  content: ""; display: block; width: 2.5rem; height: 3px;
  background: var(--silver-grad); margin-bottom: var(--sp-3);
}

/* Refined type rhythm: slightly tighter section padding on small screens,
   more compositional space above section heads on large. */
@media (min-width: 901px) {
  .section { padding-block: var(--sp-9) var(--sp-9); }
  .section-head { margin-bottom: var(--sp-7); }
}
@media (max-width: 600px) {
  .section { padding-block: var(--sp-8); }
  h1 { letter-spacing: -0.03em; }
}

/* ---- The certificate as a document ------------------------------------ */
.coa {
  border: 1px solid var(--line-strong);
  border-top: 3px double var(--ink);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  position: relative;
}
.coa::before {
  /* corner crop marks, as on a print proof */
  content: ""; position: absolute; top: 10px; left: 10px;
  width: 10px; height: 10px;
  border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong);
  pointer-events: none;
}
.coa::after {
  content: ""; position: absolute; top: 10px; right: 10px;
  width: 10px; height: 10px;
  border-right: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong);
  pointer-events: none;
}
.coa__head {
  background: var(--surface);
  border-bottom: 1px solid var(--line-strong);
  padding: var(--sp-5);
  display: grid; gap: var(--sp-2);
  grid-template-columns: 1fr auto;
  align-items: start;
}
.coa__head h3 {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink); margin: 0;
}
.coa__serial {
  grid-column: 1; font-size: var(--fs-lg);
}
.coa__body { padding: var(--sp-5); }
.coa__body .data-list { border-top: none; }
.coa__body .data-list__row { border-bottom-style: dotted; }
.coa__foot { background: var(--surface-alt); }

/* The status stamp — an honest, ink-on-paper mark, not a trust badge. */
.stamp {
  display: inline-block;
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border: 1.5px solid currentColor; border-radius: 2px;
  transform: rotate(-1.5deg);
}
.stamp--verified { color: var(--accent); }
.stamp--pending  { color: var(--warn-ink); }
.stamp--none     { color: var(--muted); border-style: dashed; transform: none; }

/* ---- Badges: verified earns more weight -------------------------------- */
.badge--verified {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.badge--verified::before { background: #fff; opacity: 1; }

/* ---- Catalogue cards: documentation drives hierarchy ------------------- */
.card--verified { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.card--verified .card__media { background: var(--accent-soft); }
.card--verified:hover { border-color: var(--accent); }
.card__media { position: relative; }
.card__doc-tab {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
  border-bottom: 3px solid var(--silver); padding-bottom: 2px;
}

/* ---- Designed empty states --------------------------------------------- */
.empty {
  border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
  background: var(--surface); text-align: center;
  padding: var(--sp-8) var(--sp-5);
}
.empty img { width: 72px; margin: 0 auto var(--sp-4); opacity: .6; }
.empty h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.empty p { color: var(--muted); font-size: var(--fs-sm); margin-inline: auto; max-width: 44ch; }
.empty .btn { margin-top: var(--sp-4); }

/* ---- Hero: asymmetric, with a specimen-label caption ------------------- */
.hero { padding-block: var(--sp-9) var(--sp-9); }
.hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.hero__media {
  aspect-ratio: auto; padding: 0; overflow: hidden;
  border-top: 3px double var(--ink);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.hero__media img { padding: var(--sp-6) var(--sp-6) var(--sp-4); }
.hero__media-caption {
  width: 100%;
  border-top: 1px solid var(--line);
  background: var(--surface-alt);
  padding: var(--sp-3) var(--sp-5);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.06em;
}
.hero__stats { border-top: none; position: relative; padding-top: var(--sp-5); }
.hero__stats::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line-strong);
}
.hero__stats::after {
  content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 3px;
  background: var(--silver-grad);
}

/* --------------------------------------------------------------------------
   19-B. MOTION SYSTEM
   --------------------------------------------------------------------------
   Scroll reveals, stagger, parallax, timeline progress, verification
   response, page transitions. Everything animates opacity and transform
   only. Every rule here is neutralised automatically by the
   prefers-reduced-motion block in section 2.
   -------------------------------------------------------------------------- */

/* Reveal timing: applied by the engine to headings, cards, notices,
   timeline stages and certificates. --d is the stagger delay per item. */
.reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Reading progress — thin silver line at the very top of long pages */
.read-progress {
  position: fixed; top: 0; left: 0; z-index: 200;
  width: 100%; height: 3px;
  background: var(--silver-grad);
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* Sticky header: compresses slightly and gains a firmer surface on scroll */
.site-header { transition: box-shadow .3s var(--ease), background .3s var(--ease); }
.site-header__inner { transition: min-height .3s var(--ease); }
.site-header .logo__word { transition: font-size .3s var(--ease), color .25s var(--ease); }
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  box-shadow: 0 1px 0 var(--line), 0 8px 24px -20px rgba(20,32,26,.5);
}
.site-header.is-scrolled .site-header__inner { min-height: 58px; }
.site-header.is-scrolled .logo__word { font-size: 1.35rem; }

/* Hero parallax layers — driven by the engine via --plx, transform only */
.hero__media { will-change: transform; transform: translateY(calc(var(--plx, 0) * -0.35px)); }
.hero__media img { will-change: transform; transform: translateY(calc(var(--plx, 0) * -0.75px)); transition: none; }
@media (max-width: 900px) {
  .hero__media, .hero__media img { transform: none !important; }
}

/* Timeline: the laboratory line draws itself down the page.
   The grey rail exists in ::before; this overlay fills it with accent
   as the stages pass. --tl is set by the engine, 0 to 1. */
.timeline::after {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px;
  width: 1px; background: var(--accent);
  transform: scaleY(var(--tl, 0)); transform-origin: 50% 0;
}
.timeline li::before { transition: border-color .4s var(--ease), background .4s var(--ease); }
.timeline li.is-passed::before { background: var(--silver); border-color: var(--ink); }

/* Batch verification response: result settles in, stamp presses on */
@keyframes verify-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes stamp-press {
  0%   { opacity: 0; transform: rotate(-1.5deg) scale(1.25); }
  55%  { opacity: 1; transform: rotate(-1.5deg) scale(.97); }
  100% { opacity: 1; transform: rotate(-1.5deg) scale(1); }
}
.verify__result.verify-anim > * { animation: verify-rise .5s var(--ease) both; }
.verify__result.verify-anim .stamp { animation: stamp-press .55s var(--ease) .15s both; }
.verify__result.verify-anim .stamp--none { animation-name: verify-rise; }

/* Certificate: lifts like a document picked off the bench */
.coa { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.coa:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -22px rgba(20,32,26,.45);
}

/* Catalogue cards: image eases forward with the existing card lift */
.card__media img { transition: transform .45s var(--ease); }
.card:hover .card__media img { transform: scale(1.03); }

/* FAQ accordion: answers settle in rather than snapping open */
@keyframes acc-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.accordion details[open] .accordion__content { animation: acc-open .3s var(--ease); }
.accordion summary::after { transition: transform .3s var(--ease), color .25s var(--ease); }

/* Report links in tables: underline slides in like other nav */
tbody a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .25s var(--ease), color .25s var(--ease); }
tbody a:hover { border-bottom-color: currentColor; }

/* Page transitions: short fade on entry, brief fade before leaving */
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
body.js-anim { animation: page-in .32s var(--ease); }
body.page-exit { opacity: 0; transition: opacity .16s ease; }

/* Word-by-word rise with a silver rule sweeping beneath */
.motto { display: flex; gap: .6em; flex-wrap: wrap; margin-top: var(--sp-5); }
.motto__word {
  position: relative; display: inline-block;
  font-size: var(--fs-md); font-weight: 500; color: var(--ink);
  letter-spacing: 0.01em;
  opacity: 0; transform: translateY(10px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay: var(--d, 0ms);
  padding-bottom: 5px;
}
.motto__word::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 3px; background: var(--silver-grad);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s var(--ease);
  transition-delay: calc(var(--d, 0ms) + 250ms);
}
.is-visible .motto__word, .motto.is-visible .motto__word { opacity: 1; transform: none; }
.is-visible .motto__word::after, .motto.is-visible .motto__word::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   19. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .compliance-bar, .cta-band, .nav-toggle { display: none !important; }
  body { background: #fff; }
  .card, .feature, .verify { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   20. LANGUAGE
   -------------------------------------------------------------------------- */
.lang { display: inline-flex; align-items: center; }
.lang__select {
  width: auto; font-size: var(--fs-xs); color: var(--charcoal);
  padding: .4rem 1.9rem .4rem .6rem;
  background-color: transparent; border-color: var(--line-strong);
  background-position: right .55rem center;
  cursor: pointer;
}
.lang__select:hover { border-color: var(--muted); }
@media (max-width: 900px) {
  .lang { width: 100%; margin-top: var(--sp-4); }
  .lang__select { width: 100%; font-size: var(--fs-base); padding-block: .7rem; }
}

/* Honest notice shown at the top of translated pages */
.lang-notice {
  margin: 0; padding: var(--sp-3) var(--sp-5);
  background: var(--accent-soft);
  border-bottom: 1px solid var(--line);
  color: var(--accent-hover); text-align: center;
}

/* --------------------------------------------------------------------------
   21. TRUSTPILOT
   Sits on a plain surface so the widget's own styling does not fight the
   page. Nothing renders unless it is configured in content/settings.js.
   -------------------------------------------------------------------------- */
.trustpilot-strip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px double var(--ink);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: var(--sp-5);
  margin-top: var(--sp-5);
  min-height: 60px;
}

/* --------------------------------------------------------------------------
   22. BACKGROUND WASH
   --------------------------------------------------------------------------
   Two very faint grey blooms behind the page. Switched OFF by default now
   that the page is white — see content/settings.js to bring them back. Taken from the brand's
   coming-soon artwork.

   It is deliberately restrained: large, diffuse and low opacity, with no
   blur filters (which are expensive to paint) and no movement. It sits
   behind everything and never intercepts clicks.

   To turn it off or change its strength, edit the "background" section of
   content/settings.js — you should not need to touch this file.
   -------------------------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: -15%;                 /* overspill avoids hard edges at the corners */
  z-index: -1;
  pointer-events: none;
  opacity: var(--wash-opacity, 1);
  background:
    /* two very faint grey blooms. Off by default on a white site — set
       background.show to true in settings.js if you want them back. */
    radial-gradient(46vw 42vw at 20% 14%,
      color-mix(in srgb, var(--accent) 7%, transparent) 0%,
      transparent 68%),
    radial-gradient(52vw 46vw at 86% 84%,
      color-mix(in srgb, var(--silver) 22%, transparent) 0%,
      transparent 66%);
}

/* Older browsers without color-mix simply get the flat cream — no fallback
   needed, and nothing breaks. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  body::before { display: none; }
}

/* Where the wash is switched off in settings.js */
body[data-wash="off"]::before { display: none; }

/* On white panels the wash is covered, which is intended — those sections
   stay clean and clinical. Softening the footer edge keeps the transition
   from washed page to white panel from looking like a hard seam. */
.site-footer { background: var(--surface-alt); }

/* Print: no wash, ever */
@media print { body::before { display: none; } }

/* --------------------------------------------------------------------------
   23. STACKED HEADLINE
   --------------------------------------------------------------------------
   The homepage headline sets as separate lines, each carrying its own silver
   rule — the logo device scaled up to become the structure of the headline
   itself. Lines rise one after another; static under reduced motion.
   Edit the words in content/homepage.js, headingLines.
   -------------------------------------------------------------------------- */
.hero__stack {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .18em; margin-bottom: var(--sp-6);
  font-size: clamp(2.7rem, 7vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.hero__line {
  position: relative; display: inline-block;
  padding-bottom: .12em;
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--d, 0ms);
}
.hero__line::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 5px; background: var(--silver-grad);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .55s var(--ease);
  transition-delay: calc(var(--d, 0ms) + 280ms);
}
/* The hero reveals on load, so show these as soon as the page is ready */
.hero__stack.is-lit .hero__line { opacity: 1; transform: none; }
.hero__stack.is-lit .hero__line::after { transform: scaleX(1); }

@media (max-width: 600px) {
  .hero__stack { font-size: clamp(2.3rem, 12vw, 3.2rem); }
  .hero__line::after { height: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__line { opacity: 1; transform: none; }
  .hero__line::after { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   24. PURITY FIGURES
   Shown only where a real, published certificate reports one. The number is
   read from the certificate data, never typed as marketing copy.
   -------------------------------------------------------------------------- */
.card__purity {
  margin: 0; display: flex; align-items: baseline; gap: .4rem;
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line);
}
.card__purity strong {
  font-size: var(--fs-xl); font-weight: 500; color: var(--ink);
  letter-spacing: -0.02em; line-height: 1;
}
.card__purity span {
  font-size: var(--fs-xs); color: var(--muted);
  letter-spacing: .04em; text-transform: uppercase;
}
.product-purity {
  margin: var(--sp-5) 0 0; padding: var(--sp-4) var(--sp-5);
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  font-size: var(--fs-sm); color: var(--accent-hover);
}
.product-purity strong {
  font-size: var(--fs-xl); font-weight: 500; color: var(--ink);
  letter-spacing: -0.02em; margin-right: .25rem;
}

/* --------------------------------------------------------------------------
   25. SIZE, QUANTITY AND ENQUIRY
   -------------------------------------------------------------------------- */
.buy {
  margin-top: var(--sp-6); padding: var(--sp-5);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
}
.buy__row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-3); margin-bottom: var(--sp-4);
}
.buy__row:last-of-type { margin-bottom: 0; }
.buy__label {
  font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); min-width: 4.5rem;
}
.buy__sizes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.size-pill {
  font: inherit; font-size: var(--fs-sm);
  padding: .5rem 1.1rem; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--ink);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.size-pill:hover { border-color: var(--ink); }
.size-pill.is-selected { background: var(--ink); border-color: var(--ink); color: #fff; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.qty__btn {
  font: inherit; font-size: var(--fs-md); line-height: 1;
  width: 2.4rem; height: 2.4rem; cursor: pointer;
  background: transparent; border: 0; color: var(--ink);
}
.qty__btn:hover { background: var(--surface-alt); }
.qty__input {
  width: 3rem; text-align: center; border: 0; border-inline: 1px solid var(--line-strong);
  border-radius: 0; padding: .45rem 0; font-size: var(--fs-sm);
  -moz-appearance: textfield;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy__add { margin-left: auto; }
@media (max-width: 520px) { .buy__add { margin-left: 0; width: 100%; justify-content: center; } }
.buy__note { margin-top: var(--sp-4); }
.buy__note--ok { color: var(--ink); font-weight: 500; }

.enq-badge { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   26. REVIEWS
   Star figures are counted from published reviews, never typed.
   -------------------------------------------------------------------------- */
.stars { display: inline-flex; align-items: center; gap: .5rem; }
.stars svg { display: block; }
.stars__num { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }
.stars__count { font-size: var(--fs-sm); color: var(--muted); }

.review-summary {
  display: flex; align-items: center; gap: var(--sp-4);
  flex-wrap: wrap; margin-bottom: var(--sp-4);
}

.review {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-5);
}
.review__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.review__title { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.review__body { font-size: var(--fs-sm); color: var(--charcoal); }
.review__meta { margin-top: var(--sp-3); }

.review-form { max-width: 34rem; }
.review-form ul { padding-left: 1.1rem; }

/* Price on the product page, above the size selector */
.buy__price {
  margin: 0 0 var(--sp-4); font-size: var(--fs-lg); font-weight: 500; color: var(--ink);
}