/* CELLMIND local reference rebuild — generated from website/cellmind-rebuild/src/styles. Do not edit output. */
/* ---- tokens.css ---- */
/* ==========================================================================
   Design tokens — values OBSERVED on the CELLMIND reference (final resolved
   custom properties, see evidence/computed/root-vars-product-1440.txt).
   Reference values for the local reproduction only; not PEPFAME decisions.
   Rebranding later = change these tokens, not the components.
   ========================================================================== */
:root {
  /* palette */
  --c-white: #ffffff;
  --c-off: #F9F7F4;
  --c-cream: #F2EFE8;
  --c-sand: #EEEAE2;          /* footer background */
  --c-sand-2: #E9E5DC;        /* disclaimer strip */
  --c-sand-line: #DED9CF;     /* footer / strip borders */
  --c-gold: #C8A84B;
  --c-gold-dark: #8B6914;
  --c-gold-light: #F5E9C4;
  --c-black: #0A0A0A;
  --c-ink: #111111;
  --c-ink-2: #3A3A36;
  --c-ink-3: #3F3F3A;         /* footer links */
  --c-ink-4: #5C5C55;         /* footer secondary */
  --c-ink-5: #6B6B64;         /* small meta text */
  --c-muted: #888880;
  --c-border: #E8E4DC;
  --c-border-dark: #D4CFC4;
  --c-green: #3D7A52;
  --c-green-bg: #EFF7F2;
  --c-blue: #2A5F8F;
  --c-blue-bg: #E8F2FA;
  --c-red: #A64545;
  --c-red-bg: #FBEFEF;
  --c-telegram: #2AABEE;
  --c-link-default: #2A5BD7;  /* platform default link colour (rarely visible) */

  /* shape */
  --r: 14px;
  --r-sm: 10px;
  --r-xs: 8px;
  --pill: 999px;
  --shadow: 0 6px 24px rgba(var(--t-shadow-ink-rgb), 0.06), 0 1px 3px rgba(var(--t-shadow-ink-rgb), 0.04);
  --shadow-hover: 0 14px 36px rgba(var(--t-shadow-ink-rgb), 0.10);

  /* motion */
  --t: 0.18s ease;

  /* layout */
  --container-max: 1280px;
  --container-narrow: 760px;
  --container-pad: clamp(20px, 4vw, 48px);
  --header-h: 66px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* type */
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-body: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.227), 1.125rem);
}

/* The reference resolves --gold-dark differently per template (only some template stylesheets
   override it): #8B6914 on home/shop/product/research/contact/reviews/blog/policy,
   #8B7332 on about/faq/account/affiliate/checkout/404 (evidence: root_vars per template). */
.tpl-about, .tpl-faq, .tpl-account, .tpl-lost-password, .tpl-affiliate, .tpl-checkout, .tpl-404 { --c-gold-dark: #8B7332; }

/* ≤320px the reference collapses the container gutter to 3.6px and defines a 6px page gutter. */
@media (max-width: 320px) {
  :root { --container-pad: 3.6px; --page-pad-x: 6px; }
}
@media (max-width: 250px) {
  :root { --container-pad: 2.4px; }
}

/* ---- theme.css ---- */
/* Theme tokens — every colour the site uses, by ROLE (text, icon, bg, grad, border, shadow, filter,
   accent) and reference swatch. This file holds the REFERENCE values (the faithful CELLMIND palette;
   palette aliases point at tokens.css so per-template variations keep working).
   Themes (styles/themes/<name>.css) override ONLY these tokens. "-rgb" tokens are channel triplets
   used as rgba(var(--t-…-rgb), alpha) so authored transparency is preserved.
   Initially generated by tools/cellmind-rebuild/tokenize_colors.mjs (one-off); maintained by hand since. */
/* Declared on body as well: aliases such as var(--c-gold-dark) must resolve where the per-template
   override (.tpl-about … on <body>) applies, not once at :root. Themes use the same selector. */
:root, body {
  --t-accent-gold-dark: var(--c-gold-dark);
  --t-accent-ink: var(--c-ink);
  --t-bg-black: var(--c-black);
  --t-bg-black-rgb: 10,10,10;
  --t-bg-cream: var(--c-cream);
  --t-bg-cream-2: #f3f0ea;
  --t-bg-cream-3: #f4f1ea;
  --t-bg-dialog-head: #f7f4ee;
  --t-bg-gold: var(--c-gold);
  --t-bg-gold-dark: var(--c-gold-dark);
  --t-bg-gold-dark-3: #8a7530;
  --t-bg-gold-deep: #756228;
  --t-bg-gold-light: var(--c-gold-light);
  --t-bg-gold-pale: #e6d9aa;
  --t-bg-gold-rgb: 200,168,75;
  --t-bg-green: var(--c-green);
  --t-bg-green-bg: var(--c-green-bg);
  --t-bg-green-bg-2: #eef8f1;
  --t-bg-green-live: #4ade80;
  --t-bg-grey-33: #333333;
  --t-bg-grey-dd: #dddddd;
  --t-bg-ink: var(--c-ink);
  --t-bg-ink-2: var(--c-ink-2);
  --t-bg-ink-hover: #222222;
  --t-bg-ink-rgb: 17,17,17;
  --t-bg-key: #efeae0;
  --t-bg-line-co: #d4cfbf;
  --t-bg-line-strong: var(--c-border-dark);
  --t-bg-off: var(--c-off);
  --t-bg-off-rgb: 249,247,244;
  --t-bg-sand: var(--c-sand);
  --t-bg-sand-2: var(--c-sand-2);
  --t-bg-status-green: #22c55e;
  --t-bg-status-red: #dc2626;
  --t-bg-telegram: var(--c-telegram);
  --t-bg-telegram-rgb: 42,171,238;
  --t-bg-white: var(--c-white);
  --t-bg-white-rgb: 255,255,255;
  --t-bg-wp-blue: #007cba;
  --t-border-black: var(--c-black);
  --t-border-gold: var(--c-gold);
  --t-border-gold-dark: var(--c-gold-dark);
  --t-border-gold-dark-3: #8a7530;
  --t-border-gold-light: var(--c-gold-light);
  --t-border-green: var(--c-green);
  --t-border-green-line: #b7dfc4;
  --t-border-grey-aa: #aaaaaa;
  --t-border-ink: var(--c-ink);
  --t-border-ink-rgb: 17,17,17;
  --t-border-line: var(--c-border);
  --t-border-line-e6: #e6e1d6;
  --t-border-line-strong: var(--c-border-dark);
  --t-border-muted: #888880;
  --t-border-red: var(--c-red);
  --t-border-sand-line: var(--c-sand-line);
  --t-border-telegram-rgb: 42,171,238;
  --t-border-white-rgb: 255,255,255;
  --t-grad-white: var(--c-white);
  --t-icon-gold-dark: var(--c-gold-dark);
  --t-icon-green: var(--c-green);
  --t-shadow-black-rgb: 10,10,10;
  --t-shadow-gold-light: var(--c-gold-light);
  --t-shadow-gold-rgb: 200,168,75;
  --t-shadow-ink: var(--c-ink);
  --t-shadow-ink-rgb: 17,17,17;
  --t-shadow-pure-black-rgb: 0,0,0;
  --t-shadow-red-rgb: 166,69,69;
  --t-shadow-telegram-rgb: 42,171,238;
  --t-text-black: var(--c-black);
  --t-text-disabled: #b5b5ad;
  --t-text-gold: var(--c-gold);
  --t-text-gold-dark: var(--c-gold-dark);
  --t-text-gold-dark-2: #8b7332;
  --t-text-green: var(--c-green);
  --t-text-green-2: #1f7a45;
  --t-text-ink: var(--c-ink);
  --t-text-ink-2: var(--c-ink-2);
  --t-text-ink-3: var(--c-ink-3);
  --t-text-ink-4: var(--c-ink-4);
  --t-text-ink-5: var(--c-ink-5);
  --t-text-ink-policy: #4a4a44;
  --t-text-ink-soft: #151515;
  --t-text-line-strong: var(--c-border-dark);
  --t-text-link: var(--c-link-default);
  --t-text-muted: var(--c-muted);
  --t-text-muted-2: #8a8a82;
  --t-text-muted-3: #9a9a92;
  --t-text-pure-black: #000000;
  --t-text-red: var(--c-red);
  --t-text-red-2: #b91c1c;
  --t-text-telegram: var(--c-telegram);
  --t-text-telegram-light: #5fc3f0;
  --t-text-white: var(--c-white);
  --t-text-white-rgb: 255,255,255;

  /* ---- component colour tokens (added for theming; reference values = previous rendering) ---- */
  --t-bg-page: var(--c-white);            /* page background (body); cards/surfaces use --t-bg-white */
  --t-bg-surface-rgb: 255,255,255;        /* frosted header bar */
  --t-plate: var(--c-white);              /* backdrop behind product photos (white-background renders) */
  --t-plate-soft: var(--c-off);           /* same, on the off-white plates (gallery, thumbs, drawer, checkout, research) */
  --t-plate-mark: var(--c-white);         /* tile behind payment-brand logos */
  --t-photo-filter: none;                 /* tone of product photos (a dark theme dims them onto its plates) */
  --t-photo-bg: var(--c-white);           /* background of a product <img> itself (free-item vial) */
  --t-photo-bg-soft: var(--c-off);        /* same, off-white (cart drawer thumbnails) */
  --t-text-on-gold: var(--c-black);       /* text on gold fills: gold button, wordmark, cart badge, review logo */
  --t-bg-chip-rgb: 255,255,255;           /* translucent chip over product photos (gallery "CoA" tag) */
  --t-hero-filter: none;                  /* tone of the homepage hero photograph */
  --t-bg-off-2: #fafaf8;                  /* checkout page background */
  --t-border-line-e4: #e4e0d6;
  --t-text-grey-7a: #7a7a70;
  --t-border-grey-e5: #e5e7eb;
  --t-bg-error-bg: #fef2f0;
  --t-bg-red-3: #c0402e;
}

/* ---- fonts.css ---- */
/* DM Sans (SIL OFL 1.1) — the same variable woff2 files the reference serves, copied as reference
   font assets (see media-manifest.json). The reference declares DISCRETE weights that all point at
   the variable file; browsers clamp the 'wght' axis to the matched face, so e.g. weight 600 renders
   as the 700 face. The declarations are mirrored exactly to keep identical rendering.
   Replacement path for PEPFAME: swap these for an @fontsource package (same family) or new brand fonts. */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url(/media/themes/aurora-commerce/assets/fonts/dm-sans/dm-sans-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url(/media/themes/aurora-commerce/assets/fonts/dm-sans/dm-sans-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/media/themes/aurora-commerce/assets/fonts/dm-sans/dm-sans-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/media/themes/aurora-commerce/assets/fonts/dm-sans/dm-sans-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/media/themes/aurora-commerce/assets/fonts/dm-sans/dm-sans-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/media/themes/aurora-commerce/assets/fonts/dm-sans/dm-sans-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/media/themes/aurora-commerce/assets/fonts/dm-sans/dm-sans-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/media/themes/aurora-commerce/assets/fonts/dm-sans/dm-sans-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 900; font-display: swap; src: url(/media/themes/aurora-commerce/assets/fonts/dm-sans/dm-sans-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 900; font-display: swap; src: url(/media/themes/aurora-commerce/assets/fonts/dm-sans/dm-sans-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url(/media/themes/aurora-commerce/assets/fonts/dm-sans/dm-sans-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url(/media/themes/aurora-commerce/assets/fonts/dm-sans/dm-sans-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 700; font-display: swap; src: url(/media/themes/aurora-commerce/assets/fonts/dm-sans/dm-sans-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 700; font-display: swap; src: url(/media/themes/aurora-commerce/assets/fonts/dm-sans/dm-sans-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 900; font-display: swap; src: url(/media/themes/aurora-commerce/assets/fonts/dm-sans/dm-sans-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 900; font-display: swap; src: url(/media/themes/aurora-commerce/assets/fonts/dm-sans/dm-sans-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- base.css ---- */
/* Base: reset, document defaults, accessibility helpers.
   Mirrors the reference's global behaviour (universal margin/padding reset, border-box,
   stable scrollbar gutter, fixed header offset, body type 16–18px / 1.6). */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  overflow-x: clip;
  max-width: 100%;
}
body {
  min-height: 100vh;
  padding-top: var(--header-h);
  background: var(--t-bg-page);
  color: var(--t-text-ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: clip;
  max-width: 100%;
}
img, video, svg { max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
a { color: var(--t-text-link); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
table { width: 100%; max-width: 100%; border-collapse: collapse; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 20000; }
.skip-link:focus { left: 12px; top: 12px; padding: 10px 14px; background: var(--t-bg-white); color: var(--t-text-ink); border-radius: var(--r-xs); box-shadow: var(--shadow-hover); }

/* Keyboard focus: visible ring for keyboard users only (the reference removes outlines on
   several controls; :focus-visible keeps the mouse appearance identical). */
:focus-visible { outline: 2px solid var(--t-border-gold-dark); outline-offset: 2px; }

/* Scroll locks used by the menu, drawer and dialogs. */
body.is-menu-open { overflow: hidden; }
body.is-drawer-locked { position: fixed; left: 0; right: 0; overflow: hidden; }

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

/* ---- layout.css ---- */
/* Layout primitives shared by every template. */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow { max-width: var(--container-narrow); }

/* Shared section grammar: gold eyebrow → large H2 with an italic gold accent word.
   Final resolved reference values (evidence/computed): eyebrow 16px/500/0.06em, sentence case;
   H2 clamp(1.83rem, 3vw, 2.7rem) / 600 / -0.02em / 1.1; accent 400 italic gold-dark.
   Templates add spacing and the --lg size variant where the reference uses it. */
.eyebrow {
  display: block;
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--t-text-gold-dark);
}
.h2 {
  margin: 0;
  font-size: clamp(1.83rem, 3vw, 2.7rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--t-text-ink);
}
.h2--lg { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.h2 em, .accent { font-style: italic; font-weight: 400; color: var(--t-text-gold-dark); }

/* ---- components/buttons.css ---- */
/* Buttons — the reference's final ("ux2") button grammar: 48px tall, 10px radius, 1px border.
   Variants: primary (black), ghost (transparent, light border), outline (white, ink border),
   gold. Templates may adjust size (e.g. the homepage uses 14px/500). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  color: var(--t-text-ink);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.btn--primary { background: var(--t-bg-black); border-color: var(--t-border-black); color: var(--t-text-white); box-shadow: 0 8px 22px rgba(var(--t-shadow-black-rgb), 0.22); }
.btn--primary:hover { background: var(--t-bg-ink-hover); color: var(--t-text-white); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(var(--t-shadow-black-rgb), 0.28); }
.btn--ghost { background: transparent; border-color: var(--t-border-line-strong); box-shadow: 0 3px 10px rgba(var(--t-shadow-ink-rgb), 0.06); }
.btn--ghost:hover { border-color: var(--t-border-ink); }
.btn--outline { background: var(--t-bg-white); border-color: var(--t-border-ink); }
.btn--outline:hover { background: var(--t-bg-ink); color: var(--t-text-white); }
.btn--gold { background: var(--t-bg-gold); border-color: var(--t-border-gold); color: var(--t-text-on-gold); box-shadow: 0 6px 18px rgba(var(--t-shadow-gold-rgb), 0.35); }
.btn--gold:hover { background: var(--t-bg-gold-light); border-color: var(--t-border-gold-light); }

/* ---- components/footer.css ---- */
/* Disclaimer strip (last element of <main>) + site footer. */
.disclaimer-strip {
  padding: 14px var(--container-pad);
  background: var(--t-bg-sand-2);
  border-top: 1px solid var(--t-border-sand-line);
}
.disclaimer-strip p {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--t-text-ink-2);
}

/* The reference stacks two 1px borders (template part + footer element) of the same colour. */
.site-footer { background: var(--t-bg-sand); border-top: 2px solid var(--t-border-sand-line); }
/* Templates whose footer is not wrapped in a template part show a single 1px rule (routes.json chrome.footerWrapped). */
.site-footer--single-rule { border-top-width: 1px; }
.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 48px var(--container-pad) 24px;
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.3fr 2.2fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 28px;
}
.site-footer .wordmark__a { font-size: 15px; padding: 2px 7px 3px; letter-spacing: 0; }
.site-footer .wordmark__b { font-size: 15px; letter-spacing: 0; }
.site-footer__brand .wordmark { display: block; }
.site-footer__tagline { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--t-text-ink-4); }

.tg-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--t-bg-white);
  border: 1px solid var(--t-border-sand-line);
  border-radius: var(--r-sm);
  box-shadow: 0 6px 18px rgba(var(--t-shadow-ink-rgb), 0.06);
  color: var(--t-text-ink);
  transition: transform var(--t), box-shadow var(--t);
}
.tg-card__icon { display: flex; flex-shrink: 0; color: var(--t-text-telegram); }
.tg-card__icon svg { width: 22px; height: 22px; display: block; }
.tg-card__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tg-card__title { font-size: 14px; font-weight: 600; line-height: 1.2; }
.tg-card__sub { font-size: 12px; line-height: 1.3; color: var(--t-text-ink-5); }

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) max-content;
  gap: 24px;
}
.site-footer__label { margin-bottom: 12px; font-size: 13px; font-weight: 600; line-height: 1.6; color: var(--t-text-ink); }
.site-footer__col ul { display: flex; flex-direction: column; gap: 8px; }
.site-footer__col a { font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--t-text-ink-3); overflow-wrap: anywhere; transition: color 0.2s; }
.site-footer__col a:hover { color: var(--t-text-ink); }
.site-footer__col--contact a[href^="mailto:"] { white-space: nowrap; overflow-wrap: normal; }

.pay-row { display: flex; justify-content: center; margin: 0 auto 20px; max-width: 100%; font-size: 12px; line-height: 1; }
.pay-marks { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 8px; width: max-content; max-width: 100%; margin-inline: auto; }
.pay-marks img {
  flex: 0 0 56px;
  width: 56px;
  height: auto;
  max-width: 56px;
  aspect-ratio: 750 / 471;
  padding: 2px;
  background: var(--t-plate-mark);
  border: 1px solid var(--t-border-sand-line);
  border-radius: 5px;
  object-fit: contain;
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--t-border-sand-line);
  font-size: 13px;
  line-height: 1.6;
  color: var(--t-text-ink-4);
}
.site-footer__legal { display: flex; gap: 16px; }
.site-footer__legal a { font-size: 13px; color: var(--t-text-ink-4); }

@media (max-width: 1023px) {
  .site-footer__inner { padding: 36px var(--container-pad) 20px; }
  .site-footer__top { grid-template-columns: 1fr; gap: 28px; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .site-footer__col--contact { grid-column: 1 / -1; }
  .pay-marks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: stretch; width: min(100%, 340px); }
  .pay-marks img { flex: none; width: 100%; max-width: none; }
}
/* 640–768px: the reference stacks the bottom row as a centred column (the 768px rule sets the
   direction; later base rules keep centre alignment and the 12px gap). */
@media (max-width: 768px) {
  .site-footer__bottom { flex-direction: column; }
  .site-footer__legal { flex-wrap: wrap; }
}
@media (max-width: 767px) {
  .site-footer__legal,
  .site-footer__col .is-mobile-hidden { display: none !important; }
}
@media (max-width: 639px) {
  .tg-card { display: flex; width: 100%; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* ≤320px: the reference's narrow-screen rule leaves the copyright line at line-height 1.5
   (its 10px font size is overridden later, the line-height is not). */
@media (max-width: 320px) {
  .site-footer__copy { line-height: 1.5; }
}

/* ---- components/header.css ---- */
/* Site header: fixed bar (66px), logo · centred menu · language + cart actions.
   ≤1023px: hamburger + full-screen menu sheet sliding in from the left. */
.site-header__bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--header-h);
  background: rgba(var(--t-bg-surface-rgb), 0.96);
  border-bottom: 1px solid var(--t-border-line);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.site-header__inner {
  height: var(--header-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}

/* Wordmark: gold block "cell" + "mind" */
.wordmark {
  display: flex;
  align-items: center;
  justify-self: start;
  flex-shrink: 0;
  color: var(--t-text-link);
  text-decoration: none;
}
.wordmark__a,
.wordmark__b { font-size: 17px; font-weight: 500; letter-spacing: -0.3px; }
.wordmark__a { padding: 3px 8px 4px; background: var(--t-bg-gold); color: var(--t-text-on-gold); line-height: 1.1; }
.wordmark__b { padding-left: 2px; color: var(--t-text-ink); line-height: 1.6; }

/* Primary menu (desktop) */
.site-menu {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  min-width: 0;
}
.site-menu__top { display: none; }
.site-menu__links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.5vw, 36px);
  flex-wrap: nowrap;
}
.site-menu__links a {
  padding: 8px 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--t-text-ink);
  white-space: nowrap;
  border-bottom: 1.5px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.site-menu__links a:hover,
.site-menu__links a[aria-current="page"] { color: var(--t-text-ink); border-bottom-color: var(--t-border-gold); }
.site-menu__lang { display: none; }

.site-header__actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Language dropdown (desktop) */
.lang-dd { position: relative; }
.lang-dd__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 30px 0 14px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--t-text-ink);
  background: var(--t-bg-white);
  border: 1px solid var(--t-border-line-strong);
  border-radius: var(--r-xs);
  transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
}
.lang-dd__toggle:hover,
.lang-dd.is-open .lang-dd__toggle { background: var(--t-bg-off); border-color: var(--t-border-ink); }
.lang-dd.is-open .lang-dd__toggle { box-shadow: 0 0 0 1px var(--t-shadow-gold-light); }
.lang-dd__chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--t-border-ink);
  border-bottom: 1.5px solid var(--t-border-ink);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
  transition: transform 0.2s;
}
.lang-dd.is-open .lang-dd__chevron { transform: translateY(-35%) rotate(-135deg); }
.lang-dd__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1005;
  min-width: 100%;
  padding: 6px;
  background: var(--t-bg-white);
  border: 1px solid var(--t-border-line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-hover);
}
.lang-dd__option {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--t-text-ink-2);
  transition: color 0.2s, background 0.2s;
}
.lang-dd__option:hover,
.lang-dd__option[aria-current="true"] { background: var(--t-bg-gold-light); color: var(--t-text-ink); }

/* Cart button + count badge */
.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-xs);
  color: var(--t-text-ink);
  transition: background var(--t), color var(--t);
}
.cart-btn:hover,
.cart-btn[aria-expanded="true"] { background: var(--t-bg-off); }
.cart-btn__icon { display: flex; align-items: center; justify-content: center; }
.cart-btn__icon svg { width: 18px; height: 18px; }
.cart-btn__count {
  position: absolute;
  top: 2px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--pill);
  background: var(--t-bg-gold);
  color: var(--t-text-on-gold);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}
.cart-btn__count[data-count="0"] { display: none; }

/* Hamburger */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  margin: 0 -8px 0 0;
  z-index: 1002;
  flex-shrink: 0;
}
.menu-toggle span { display: block; width: 20px; height: 1.5px; background: var(--t-bg-ink); transition: transform 0.25s, opacity 0.25s; }
body.is-menu-open .menu-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.is-menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.is-menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.menu-backdrop { display: none; }

/* Promo strip (black bar under the header) */
.promo-strip { background: var(--t-bg-black); color: var(--t-text-white); font-size: 12px; line-height: 1.6; letter-spacing: 0.02em; }
.promo-strip__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px 16px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 10px var(--container-pad);
  text-align: center;
}
.promo-strip__title { color: var(--t-text-gold); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.promo-strip__sep { width: 1px; height: 12px; background: rgba(var(--t-bg-white-rgb), 0.3); }
.promo-strip__text { font-weight: 400; white-space: nowrap; }

@media (max-width: 1023px) {
  .site-header__bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--t-bg-white); }
  .site-header__inner { grid-template-columns: auto 1fr auto auto; gap: 10px; }
  .wordmark { grid-column: 1; grid-row: 1; z-index: 1002; }
  .site-header__actions { grid-column: 3; grid-row: 1; }
  .menu-toggle { display: flex; grid-column: 4; grid-row: 1; }
  .site-header__actions .lang-dd { display: none; }

  .site-menu {
    position: fixed;
    inset: 0;
    z-index: 1003;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0 20px calc(40px + var(--safe-b));
    background: var(--t-bg-white);
    overflow-y: auto;
    visibility: hidden;
    transform: translateX(-102%);
    transition: transform 0.28s ease, visibility 0.28s;
    pointer-events: none;
  }
  body.is-menu-open .site-menu { visibility: visible; transform: none; pointer-events: auto; }
  .site-menu__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: var(--header-h);
    margin: 0 -20px 16px;
    padding: 0 20px;
    border-bottom: 1px solid var(--t-border-line);
  }
  /* The reference keeps the in-menu wordmark invisible (the header wordmark stays on top). */
  .site-menu__top .wordmark { visibility: hidden; }
  .site-menu__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -12px;
    color: var(--t-text-ink);
  }
  .site-menu__close svg { width: 18px; height: 18px; }
  .site-menu__links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .site-menu__links li { width: 100%; border-bottom: 1px solid var(--t-border-line); }
  .site-menu__links a {
    display: block;
    margin-bottom: -1px;
    padding: 20px 0;
    font-size: 24px;
    line-height: 1.2;
    color: var(--t-text-ink);
  }
  .site-menu__lang { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 28px; }
  .lang-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--t-border-line-strong);
    border-radius: var(--r-sm);
    background: var(--t-bg-white);
    color: var(--t-text-ink);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: color 0.2s, background 0.2s;
  }
  .lang-pill:hover,
  .lang-pill[aria-current="true"] { background: var(--t-bg-black); border-color: var(--t-border-black); color: var(--t-text-white); }
  body.is-menu-open .menu-backdrop { display: block; position: fixed; inset: 0; z-index: 999; background: rgba(var(--t-bg-black-rgb), 0.4); }
}
/* 901–1023px: the reference hides the language pills inside the menu sheet (min-width:901px rule)
   while the desktop dropdown is already hidden (≤1023px) — so no language switcher shows there. */
@media (min-width: 901px) and (max-width: 1023px) {
  .site-menu__lang { display: none; }
}
@media (max-width: 767px) {
  .promo-strip__inner { gap: 3px 10px; padding-block: 10px; }
  .promo-strip__title { font-size: 10px; letter-spacing: 0.08em; line-height: 1.6; }
  .promo-strip__text { font-size: 11px; }
}
@media (max-width: 320px) {
  .site-header__inner { gap: 10px; }
}

/* ---- components/overlays.css ---- */
/* Floating support button, toast, cart drawer, certificate (COA) dialog, local-only notice. */

/* ---- Floating support pill (desktop only in the reference) ---- */
.support-float {
  position: fixed;
  right: 18px;
  bottom: calc(18px + var(--safe-b));
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 16px 0 12px;
  border-radius: var(--pill);
  background: var(--t-bg-telegram);
  color: var(--t-text-white);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 10px 26px rgba(var(--t-shadow-telegram-rgb), 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.support-float svg { width: 18px; height: 18px; display: block; }
.support-float__tip { display: none; }
@media (max-width: 1023px) { .support-float { display: none !important; } }

/* ---- Toast ---- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1400;
  max-width: calc(100% - 40px);
  padding: 13px 18px;
  border-radius: var(--r-sm);
  background: var(--t-bg-black);
  color: var(--t-text-white);
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: transform 0.2s, opacity 0.2s;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 767px) {
  .toast { top: calc(var(--header-h) + 12px); bottom: auto; transform: translate(-50%, -10px); }
  .toast.is-on { transform: translate(-50%, 0); }
}

/* ---- Cart drawer ---- */
.drawer { position: fixed; inset: 0; z-index: 10040; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(var(--t-bg-black-rgb), 0.45); opacity: 0; transition: opacity 0.28s; }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--t-bg-white);
  border-radius: var(--r) 0 0 var(--r);
  box-shadow: -18px 0 48px rgba(var(--t-shadow-black-rgb), 0.14);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  outline: none;
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  height: 56px;
  padding: 0 12px 0 20px;
  border-bottom: 1px solid var(--t-border-line);
}
.drawer__head-copy { display: flex; align-items: baseline; gap: 8px; }
.drawer__title { font-size: 16px; font-weight: 600; line-height: 1.6; }
.drawer__count { font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--t-text-muted); white-space: nowrap; }
.drawer__close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-xs); color: var(--t-text-ink); transition: color 0.15s, background 0.15s; }
.drawer__close:hover { background: var(--t-bg-off); }
.drawer__close svg { width: 16px; height: 16px; }

.drawer__ship {
  display: grid;
  gap: 6px;
  flex: 0 0 auto;
  padding: 10px 20px;
  background: var(--t-bg-off);
  color: var(--t-text-ink-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}
.drawer__ship.is-complete { background: var(--t-bg-green-bg); color: var(--t-text-green); }
.drawer__ship-text { line-height: 1.3; }
.drawer__ship-bar { height: 4px; border-radius: var(--pill); background: rgba(var(--t-bg-gold-rgb), 0.25); overflow: hidden; }
.drawer__ship-fill { display: block; height: 100%; background: var(--t-bg-gold); transition: width 0.3s; }
.drawer__ship.is-complete .drawer__ship-fill { background: var(--t-bg-green); }

.drawer__scroll { flex: 1 1 0%; padding: 0 20px; overflow: auto; }
.drawer__empty { padding: 40px 0; text-align: center; }
.drawer__empty p { font-size: 15px; font-weight: 300; color: var(--t-text-muted); }
.drawer__empty a {
  display: inline-block;
  margin-top: 20px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-text-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.drawer__item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--t-border-line);
  transition: opacity 0.2s;
}
.drawer__item-media { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.drawer__item-media img { filter: var(--t-photo-filter); width: 52px; height: 52px; padding: 4px; background: var(--t-photo-bg-soft); border: 1px solid var(--t-border-line); border-radius: var(--r-sm); object-fit: contain; }
.drawer__item-main { display: flex; flex-direction: column; min-width: 0; }
.drawer__item-name { font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--t-text-ink); }
.drawer__item-price { margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--t-text-muted); }
.drawer__item-was { color: var(--t-text-muted); }
.drawer__item-save { font-weight: 500; color: var(--t-text-green); }
.qty-mini {
  display: flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 6px;
  background: var(--t-bg-white);
  border: 1px solid var(--t-border-line-strong);
  border-radius: 6px;
  overflow: hidden;
}
.qty-mini button { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: var(--t-text-ink-2); font-size: 15px; line-height: 1; transition: background 0.15s, color 0.15s; }
.qty-mini button:hover { background: var(--t-bg-off); }
.qty-mini__value { display: flex; align-items: center; justify-content: center; min-width: 24px; padding: 0 2px; border-inline: 1px solid var(--t-border-line); font-size: 12px; font-weight: 600; line-height: 1.6; text-align: center; }
.drawer__item-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; align-self: stretch; gap: 4px; min-height: 44px; }
.drawer__remove { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -4px -4px 0 0; border-radius: 50%; color: var(--t-text-muted); transition: color 0.15s; }
.drawer__remove:hover { color: var(--t-text-ink); }
.drawer__remove svg { width: 12px; height: 12px; }
.drawer__item-total { font-size: 14px; font-weight: 700; line-height: 1.6; white-space: nowrap; }

.drawer__footer { display: grid; gap: 8px; flex: 0 0 auto; padding: 12px 20px 14px; border-top: 1px solid var(--t-border-line); background: var(--t-bg-white); }
.drawer__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; font-size: 15px; font-weight: 500; line-height: 1.6; }
.drawer__row--save { font-size: 13px; color: var(--t-text-green); }
.drawer__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 50px;
  margin-top: 2px;
  padding: 0 18px;
  border-radius: var(--r-sm);
  background: var(--t-bg-black);
  box-shadow: 0 8px 22px rgba(var(--t-shadow-ink-rgb), 0.14);
  color: var(--t-text-white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  transition: background 0.18s;
}
.drawer__secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 2px; font-size: 12px; line-height: 1.6; color: var(--t-text-ink-5); }
.drawer__secure svg { width: 14px; height: 14px; }

@media (max-width: 767px) {
  .drawer__panel { width: calc(100% - 32px); max-width: 420px; }
  .drawer__head { padding: 0 8px 0 16px; }
  .drawer__title { font-size: 15px; }
  .drawer__close { width: 44px; height: 44px; }
  .drawer__close svg { width: 18px; height: 18px; }
  .drawer__ship { padding: 8px 16px; }
  .drawer__scroll { padding: 0 16px; }
  .drawer__footer { padding: 12px 16px 14px; }
}

/* ---- Certificate of Analysis dialog ---- */
.coa-dialog {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.coa-dialog__backdrop { position: absolute; inset: 0; background: rgba(var(--t-bg-ink-rgb), 0.58); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.coa-dialog__box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(1000px, 100%);
  max-height: calc(100vh - 72px);
  overflow: hidden;
  background: var(--t-bg-white);
  border-radius: var(--r);
  box-shadow: 0 30px 80px rgba(var(--t-shadow-pure-black-rgb), 0.3);
}
.coa-dialog__header { position: relative; flex: 0 0 auto; padding: 18px 24px; border-bottom: 1px solid var(--t-border-line); background: var(--t-bg-dialog-head); }
.coa-dialog__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  margin-bottom: 12px;
  padding: 0 10px;
  border-radius: var(--pill);
  background: var(--t-bg-green-bg);
  color: var(--t-text-green);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.coa-dialog__badge svg { width: 12px; height: 12px; }
.coa-dialog__close { position: absolute; top: 20px; right: 22px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--t-text-ink); }
.coa-dialog__heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-right: 40px; }
.coa-dialog__title { margin: 0 0 6px; font-size: 18px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.coa-dialog__meta { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--t-text-ink-5); }
.coa-dialog__purity { text-align: right; }
.coa-dialog__purity-val { font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--t-text-gold-dark); }
.coa-dialog__purity-lbl { margin-top: 6px; font-size: 11px; color: var(--t-text-ink-5); }
.coa-dialog__doc { position: relative; flex: 1 1 auto; margin: 0 28px; padding: 20px; overflow: auto; background: var(--t-bg-cream); border: 1px solid var(--t-border-line); }
.coa-dialog__doc img { display: block; width: 100%; height: auto; max-width: 100%; margin: 0 auto; background: var(--t-bg-white); border-radius: 6px; box-shadow: 0 8px 30px rgba(var(--t-shadow-pure-black-rgb), 0.12); }
.coa-dialog__empty { padding: 48px 20px; font-size: 14px; line-height: 1.6; text-align: center; color: var(--t-text-muted); }
.coa-dialog__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 14px 24px calc(14px + var(--safe-b));
  border-top: 1px solid var(--t-border-line);
  background: var(--t-bg-white);
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-text-ink-5);
}
.coa-dialog__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.coa-dialog__chips:empty { display: none; }
/* chip values: refine against the open-dialog computed dump (product template) */
.coa-dialog__chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--pill); background: var(--t-bg-off); border: 1px solid var(--t-border-line); font-size: 11.5px; font-weight: 500; color: var(--t-text-ink-2); }
.coa-dialog__task { display: flex; align-items: center; gap: 6px; }
.coa-dialog__code { padding: 4px 8px; border-radius: 6px; background: var(--t-bg-off); color: var(--t-text-ink); font-family: var(--font-mono); font-size: 13px; line-height: 1.6; }
.coa-dialog__key { letter-spacing: 0.04em; }
.coa-dialog__verify { font-size: 13px; line-height: 1.6; color: var(--t-text-ink); }
.coa-dialog__verify-short { display: none; }
.coa-dialog__copy { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; font-weight: 500; line-height: normal; color: var(--t-text-gold-dark); text-decoration: underline; }
.coa-dialog__copy svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 767px) {
  .coa-dialog { padding: 0; align-items: flex-end; }
  .coa-dialog__box { max-height: 100vh; border-radius: var(--r) var(--r) 0 0; }
  .coa-dialog__badge, .coa-dialog__meta { display: none; }
  .coa-dialog__close { top: 10px; right: 12px; z-index: 2; }
  .coa-dialog__heading { flex-direction: column; gap: 8px; }
  .coa-dialog__purity { text-align: left; }
  .coa-dialog__title { margin: 0; }
  .coa-dialog__doc { margin: 0; border-inline: 0; }
  .coa-dialog__footer { justify-content: flex-start; padding: 12px 16px calc(12px + var(--safe-b)); background: var(--t-bg-dialog-head); }
  .coa-dialog__task, .coa-dialog__chips { display: none !important; }
  .coa-dialog__verify { flex: none; font-size: 14px; color: var(--t-text-ink-5); }
  .coa-dialog__verify-long { display: none; }
  .coa-dialog__verify-short { display: inline; }
  .coa-dialog__key { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 14px; border-radius: var(--r-sm); background: var(--t-bg-key); font-size: 15px; font-weight: 600; letter-spacing: 0.04em; }
  .coa-dialog__copy { flex: none; height: 44px; padding: 0 18px; border: 1px solid var(--t-border-line); border-radius: var(--pill); background: var(--t-bg-white); color: var(--t-text-ink); font-size: 15px; text-decoration: none; }
}

/* ---- Local-only notice (rebuild-specific; shown only when a transaction/submission/external
   action is attempted, never part of the page layout) ---- */
.local-notice { position: fixed; inset: 0; z-index: 13000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.local-notice__backdrop { position: absolute; inset: 0; background: rgba(var(--t-bg-ink-rgb), 0.5); }
.local-notice__box { position: relative; width: min(460px, 100%); padding: 24px; border-radius: var(--r); background: var(--t-bg-white); box-shadow: 0 30px 80px rgba(var(--t-shadow-pure-black-rgb), 0.3); font-size: 14px; line-height: 1.55; color: var(--t-text-ink); }
.local-notice__title { margin-bottom: 8px; font-size: 16px; font-weight: 600; }
.local-notice__detail { margin-top: 8px; font-size: 12px; color: var(--t-text-ink-5); overflow-wrap: anywhere; }
.local-notice__close { margin-top: 18px; min-height: 40px; padding: 0 18px; border-radius: var(--r-sm); background: var(--t-bg-black); color: var(--t-text-white); font-weight: 600; }

/* ---- components/page-intro.css ---- */
/* Page intro (About, FAQ, Reviews): gold label → H1 with italic gold accent → lead that fades up.
   Resolved reference values (evidence/computed about/faq/reviews main): label 12px/500/0.06em,
   H1 clamp(1.9rem,3.4vw,2.7rem) / 600 / 1.1 / -0.02em (≤767px: clamp(1.7rem,7.5vw,2.2rem)),
   lead 16px/1.6 max 52ch, fadeUp 0.8s after 0.4s. Markup: components/page-intro.njk. */
.page-intro { padding: 44px 0 16px; }
.page-intro__copy { min-width: 0; }
.page-intro__tag {
  margin: 0 0 12px;
  color: var(--t-text-gold-dark);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.06em;
}
.page-intro__title {
  color: var(--t-text-ink);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.page-intro__title em { font-style: italic; font-weight: 400; color: var(--t-text-gold-dark); }
.page-intro__lead {
  max-width: 52ch;
  margin-top: 12px;
  color: var(--t-text-ink-2);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  opacity: 0;
  animation: page-intro-rise 0.8s 0.4s forwards;
}
@keyframes page-intro-rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
/* "end" variant (Reviews): the copy is content-sized and aligned to the end of a flex row/column. */
.page-intro--end { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }

@media (max-width: 768px) {
  .page-intro--end { flex-direction: column; }
}
@media (max-width: 767px) {
  .page-intro { padding: 28px 0 8px; }
  .page-intro--about { padding-top: 44px; }
  .page-intro__title { font-size: clamp(1.7rem, 7.5vw, 2.2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .page-intro__lead { opacity: 1; animation: none; }
}

/* ---- components/product-card.css ---- */
/* Product card — shared by the shop grid, homepage bestsellers and related products.
   Resolved reference values: evidence/computed/card-shop.txt, card-home.txt, card-shop-hover.txt.
   Grid/scroller layout is owned by each template; variant classes carry context differences. */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--t-bg-white);
  border: 1px solid rgba(var(--t-border-ink-rgb), 0.06);
  border-radius: var(--r);
  box-shadow: 0 12px 32px rgba(var(--t-shadow-ink-rgb), 0.09), 0 2px 6px rgba(var(--t-shadow-ink-rgb), 0.05);
  color: var(--t-text-ink-soft);
  transition: transform var(--t), box-shadow var(--t);
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(var(--t-shadow-ink-rgb), 0.13), 0 3px 8px rgba(var(--t-shadow-ink-rgb), 0.06); }
.product-card__link { display: flex; flex-direction: column; flex: 0 0 auto; color: inherit; }

.product-card__media { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--t-plate); }
.product-card__media img { filter: var(--t-photo-filter); }
.product-card__media img {
  display: block;
  width: 100%;
  height: 230px;
  padding: 22px;
  object-fit: contain;
  transform-origin: center;
  transition: transform 0.35s ease;
}
.product-card:hover .product-card__media img { transform: scale(1.03); }

.product-card__badges { position: absolute; top: 12px; right: 12px; left: 12px; z-index: 2; display: flex; justify-content: flex-end; align-items: flex-start; gap: 6px; }
.product-card__stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border: 1px solid var(--t-border-line);
  border-radius: var(--pill);
  background: var(--t-bg-white);
  color: var(--t-text-ink);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.product-card__dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--t-bg-status-green); }
.product-card__stock--out .product-card__dot { background: var(--t-bg-status-red); }

.product-card__body { display: flex; flex-direction: column; flex: 0 0 auto; padding: 16px 18px 8px; }
.product-card--home .product-card__body { padding: 16px 18px; }
.product-card__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.3em;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--t-text-ink);
  transition: color 0.2s;
}
.product-card__dose { color: var(--t-text-gold-dark); }

.product-card__coa { flex: 0 0 auto; padding: 0 18px 12px; }
.product-card__coa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--t-text-gold-dark-2);
  opacity: 0.85;
  transition: color var(--t), opacity var(--t);
}
.product-card__coa-btn:hover { color: var(--t-text-ink); text-decoration: underline; opacity: 1; }
.product-card__coa-btn.is-static,
.product-card__coa-btn:disabled { color: var(--t-text-disabled); opacity: 1; cursor: default; text-decoration: none; }

.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 14px 18px;
  border-top: 1px solid var(--t-border-line);
}
.product-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 19px; font-weight: 700; line-height: 1.2; color: var(--t-text-ink); }
.product-card__price del { order: 2; font-size: 17px; font-weight: 400; color: var(--t-text-muted); text-decoration: line-through; }
.product-card__price ins { order: 1; font-weight: 500; text-decoration: none; }
.product-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--t-border-ink);
  border-radius: var(--r-sm);
  background: var(--t-bg-white);
  box-shadow: 0 3px 10px rgba(var(--t-shadow-ink-rgb), 0.1);
  color: var(--t-text-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.product-card__btn:hover { background: var(--t-bg-ink); border-color: var(--t-border-ink); color: var(--t-text-white); }
.product-card__btn.is-adding { opacity: 0.6; pointer-events: none; }

/* Related products (product page): flat cards, no resting/hover shadow. */
.product-card--related { box-shadow: none; }
.product-card--related:hover { box-shadow: none; }

/* Shop cards at exactly 768px: the reference's generic ≤768px card rules apply while the shop's ≤767px
   rules do not (3-column grid, footer stacked: price centred above a full-width button).
   :where() keeps single-class specificity so the ≤767px block below still wins. */
@media (max-width: 768px) {
  :where(.product-card--shop) .product-card__badges { gap: 4px; align-items: center; }
  :where(.product-card--shop) .product-card__stock { gap: 4px; }
  :where(.product-card--shop) .product-card__title { line-height: 1.2; }
  :where(.product-card--shop) .product-card__dose { white-space: nowrap; }
  :where(.product-card--shop) .product-card__footer { flex-direction: column; align-items: center; }
  :where(.product-card--shop) .product-card__btn { width: 100%; max-width: 100%; text-align: center; }
}

@media (max-width: 767px) {
  .product-card__media img { height: 160px; padding: 12px; }
  .product-card__badges { top: 8px; right: 8px; left: 8px; gap: 4px; align-items: center; }
  .product-card__stock { height: 20px; gap: 4px; font-size: 10px; }
  .product-card__body { padding: 12px 12px 6px; }
  .product-card__name { flex-direction: column; align-items: flex-start; gap: 2px; }
  .product-card__title { line-height: 1.2; }
  .product-card__dose { font-size: 16px; line-height: 1.3; white-space: nowrap; }
  .product-card__coa { padding: 0 12px 10px; }
  .product-card__footer { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 12px; }
}

/* ---- components/reviews-faq.css ---- */
/* ==========================================================================
   Reviews & FAQ block (homepage + product pages), review card, tabbed FAQ.
   Values: resolved reference styles (evidence/computed: product section#reviews,
   bs homepage .faq-bg, faq/index.html .prf-faq) at 1440 / 390.
   Markup: components/reviews-faq.njk, review-card.njk, faq-tabs.njk.
   Behaviour: assets/js/core/reviews-faq.js.
   ========================================================================== */

/* ---------- review card ---------- */
.review-card {
  --rc-pad: 22px;
  --rc-meta: var(--t-text-muted-2);          /* card meta grey (translation label, country) */
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  background: var(--t-bg-white);
  border: 1px solid var(--t-border-line);
  border-radius: var(--r);
  text-align: left;
}
.review-card__media {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--t-bg-cream-3);
}
.review-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.review-card__media--brand {
  flex-direction: column;
  gap: 6px;
  background: linear-gradient(135deg, var(--t-bg-off), var(--t-bg-cream));
}
.review-card__logo-cell {
  padding: 2px 7px 3px;
  background: var(--t-bg-gold);
  color: var(--t-text-on-gold);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.3px;
}
.review-card__logo-mind { padding-left: 2px; color: var(--t-text-ink); font-size: 15px; font-weight: 500; }
.review-card__mark {
  margin-top: 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 56px;
  line-height: 0.6;
  color: var(--t-text-gold);
}
.review-card__brand-label {
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}
.review-card__rating {
  display: flex;
  flex: none;
  gap: 2px;
  padding: 18px var(--rc-pad) 0;
  color: var(--t-text-gold);
}
.review-card__rating svg { width: 14px; height: 14px; }
.review-card__rating .is-empty { opacity: 0.25; }
.review-card__quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  flex: none;
  height: calc(16px * 1.6 * 3 + 14px);
  overflow: hidden;
  padding: 14px var(--rc-pad) 0;
  font-size: 16px;
  font-weight: 450;
  line-height: 1.6;
  color: var(--t-text-ink-2);
}
.review-card__orig {
  margin: 12px var(--rc-pad) 0;
  padding-top: 10px;
  border-top: 1px dashed var(--t-border-line);
}
.review-card__orig-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rc-meta);
}
.review-card__orig-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  height: calc(13.5px * 1.5 * 3);
  overflow: hidden;
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--t-text-ink-4);
}
/* The reference keeps an invisible placeholder dash when the review was written in the page language. */
.review-card__orig--empty .review-card__orig-text { color: transparent; }
.review-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 18px var(--rc-pad) 22px;
}
.review-card__avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--t-bg-gold-light);
  color: var(--t-text-gold-dark);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.review-card__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.review-card__name { font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--t-text-ink); }
.review-card__country {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--rc-meta);
}
.review-card__check {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--t-bg-green-bg);
  color: var(--t-text-green);
}
.review-card__check svg { width: 8px; height: 8px; }

@media (max-width: 767px) {
  .review-card__quote { -webkit-line-clamp: 4; line-clamp: 4; height: calc(16px * 1.6 * 4 + 14px); }
}
@media (max-width: 639px) {
  .review-card { --rc-pad: 18px; }
  .review-card__rating { padding-top: 16px; }
  .review-card__quote { padding-top: 12px; }
  .review-card__author { padding: 16px var(--rc-pad) 18px; }
}

/* ---------- block frame ---------- */
/* Homepage band (rfVariant = "home"): white band with a top rule; the band carries the spacing. */
.rf-band { background: var(--t-bg-white); border-top: 1px solid var(--t-border-line); }
.rf-band__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: clamp(56px, 7vw, 88px) var(--container-pad);
  overflow-x: clip;
}
.rf {
  max-width: 100%;
  padding: 72px 0 80px;
  overflow: hidden;
  background: var(--t-bg-white);
}
.rf--home { padding: 0; }
.rf__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 28px;
}
.rf__head-copy { min-width: 0; max-width: 100%; }
.rf__tag { margin-bottom: 16px; }
/* Product pages keep the heading weight on the italic accent word (homepage: regular italic). */
.rf--product .rf__title em { font-weight: inherit; }
.rf--home .rf__tag { margin-bottom: 12px; }
.rf__aside { display: flex; flex: none; align-items: center; gap: 12px 20px; }
.rf-trust { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 100%; }
.rf-trust__row { display: inline-flex; align-items: center; gap: 8px; }
.rf-trust__stars { display: flex; gap: 2px; color: var(--t-text-gold); }
.rf-trust__stars svg { width: 14px; height: 14px; }
.rf-trust__rating { font-size: 15px; font-weight: 600; line-height: 1.6; color: var(--t-text-ink); }
.rf-trust__sub { font-size: 13px; line-height: 1.6; color: var(--t-text-muted); }
.rf__all {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--t-text-ink);
  text-decoration: underline;
  text-decoration-color: var(--t-text-gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.25em;
}
.rf__all:hover { color: var(--t-text-gold-dark); }

/* ---------- slider ---------- */
/* 4 cards per view (>1100px), 2 (≤1100px), 1 + a peek of the next card (≤768px). */
.rf-slider {
  --rf-per: 4;
  position: relative;
  max-width: 100%;
  padding: 6px 2px;
  overflow: hidden;
  background: var(--t-bg-white);
}
.rf-slider__viewport { max-width: 100%; margin: 0 -12px; overflow: hidden; touch-action: pan-y; }
.rf-slider__track { display: flex; align-items: stretch; transition: transform 0.3s ease; }
.rf-slider.is-dragging .rf-slider__track { transition: none; }
.rf-slider__slide { display: flex; flex: 0 0 calc(100% / var(--rf-per)); min-width: 0; padding: 0 12px; }
.rf__bar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 16px; }
.rf-nav { display: flex; gap: 8px; }
.rf-nav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--t-bg-white);
  color: var(--t-text-ink);
  border: 1px solid var(--t-border-line-strong);
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(var(--t-shadow-ink-rgb), 0.08);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.rf-nav__btn svg { width: 14px; height: 14px; }
.rf-nav__btn:hover:not(:disabled) { background: var(--t-bg-black); color: var(--t-text-white); border-color: var(--t-border-black); }
.rf-nav__btn:disabled { opacity: 0.35; cursor: default; }
.rf-dots { display: none; }
.rf-dots__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border-radius: 50%;
  background: var(--t-bg-gold-pale);
  transition: width 0.2s ease, background 0.2s ease;
}
.rf-dots__dot.is-active { width: 20px; border-radius: 3px; background: var(--t-bg-gold-dark-3); }

/* ---------- tabbed FAQ ---------- */
.faq {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 4vw, 56px);
  max-width: 100%;
  margin-top: 44px;
  overflow: hidden;
}
.faq--page { margin-top: 24px; }
.faq__tabs { display: grid; grid-template-columns: 1fr; gap: 8px; }
.faq__tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 14px 16px;
  background: var(--t-bg-white);
  color: var(--t-text-ink);
  border: 1px solid var(--t-border-line);
  border-radius: var(--r-sm);
  box-shadow: 0 4px 12px rgba(var(--t-shadow-ink-rgb), 0.05);
  line-height: 1.6;
  text-align: left;
  transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
}
.faq__tab:hover { border-color: var(--t-border-ink); }
.faq__tab.is-active {
  background: var(--t-bg-black);
  color: var(--t-text-white);
  border-color: var(--t-border-black);
  box-shadow: 0 8px 20px rgba(var(--t-shadow-black-rgb), 0.22);
}
.faq__tab-num { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--t-text-gold-dark); }
.faq__tab.is-active .faq__tab-num { color: var(--t-text-gold); }
.faq__tab-label { font-size: 15px; font-weight: 600; }
.faq__panels {
  max-width: 760px;
  padding: 8px 24px;
  background: var(--t-bg-white);
  border: 1px solid var(--t-border-line);
  border-radius: var(--r);
}
.faq__item { border-bottom: 1px solid var(--t-border-line); }
.faq__item:last-child { border-bottom: 0; }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 0;
  color: var(--t-text-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  text-align: left;
}
.faq__icon {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--t-text-gold-dark);
  transition: transform var(--t);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.faq__icon::before { width: 12px; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 12px; transition: opacity var(--t); }
.faq__item.is-open .faq__icon::after { opacity: 0; }
.faq__a { padding: 0 0 20px; }
.faq__a p { max-width: 68ch; color: var(--t-text-ink-2); font-size: 15px; font-weight: 400; line-height: 1.65; }

/* ---------- keyboard focus ----------
   The block and the FAQ grid clip overflow like the reference (shadows are cut at the edges), so focus
   rings of controls that touch those edges are drawn inside the control instead of outside. */
.faq__tab:focus-visible,
.rf-nav__btn:focus-visible { outline-offset: -4px; }
.rf__all:focus-visible { outline-offset: -2px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .rf-slider { --rf-per: 2; }
}
@media (max-width: 1023px) {
  .faq { grid-template-columns: 1fr; gap: 12px; }
  .faq__tabs { grid-template-columns: 1fr 1fr; }
  .faq__panels { margin-top: 10px; }
  .faq--page .faq__panels { max-width: none; }
}
@media (max-width: 768px) {
  .rf { padding: 48px 0 56px; }
  .rf--home { padding: 0; }
  .rf-slider { --rf-per: 1; }
  .rf-slider__viewport { width: calc(100% - 28px); max-width: calc(100% - 28px); margin: 0; overflow: visible; }
  .rf-slider__slide { padding: 0 10px 0 0; }
  /* the header stacks at ≤768px (row gap 16px; 10px from 767px down) */
  .rf__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .rf__aside { width: 100%; justify-content: space-between; }
  .rf__bar { justify-content: center; }
  .rf-nav { justify-content: center; width: 100%; }
  .rf-dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; }
  .faq__q { gap: 12px; }
}
@media (max-width: 767px) {
  .rf__head { gap: 10px; }
  .rf__all { font-size: 16px; }
  .faq__q { font-size: 15px; }
  .faq__panels { padding: 4px 16px; }
}
@media (max-width: 479px) {
  .faq--page .faq__tabs { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rf-slider__track { transition: none; }
}

/* ---- brands/pepfame.css ---- */
/* ============================================================================
   Brand: PEPFAME — owner-supplied logo image in place of the reference text wordmark.
   Appended to site.css only by `--brand pepfame` builds. Logo rules: sizing only, no colours, fonts or layout
   (the added-products block at the end uses existing colour tokens only).

   Each logo keeps the footprint of the wordmark it replaces, so nothing around it moves:
     header / menu   89.4px wide = the reference wordmark width (the centred menu keeps its position);
                     flex item, vertically centred in the 66px bar as before.
     footer / review 80.9px wide, inline in the existing line box (its height, and so the tagline and
                     review-card spacing below, stay the same).
   aspect-ratio = the trimmed source art (2029 × 467), so the derived PNGs are never stretched.
   ============================================================================ */
.wordmark__img,
.review-card__logo-img { height: auto; aspect-ratio: 2029 / 467; }
.wordmark__img { display: block; width: 89.4px; }
.site-footer .wordmark__img,
.review-card__logo-img { display: inline; width: 80.9px; vertical-align: middle; }

/* Products added by the brand layer (brand/pepfame/products.json) — existing tokens only.
   Pending owner input: a neutral grey stock dot/label instead of the green "in stock" / red "out of stock",
   and the "price pending" label in place of a price. PDF test reports open from the certificate dialog. */
.product-card__stock--pending .product-card__dot { background: var(--t-text-muted-3); }
/* Pending labels keep the line box of the price they stand in for (card 19px × 1.2, page 32px/28px × 1.1),
   so cards and buy boxes keep the same height as with a price. */
.product-card__pending { font-size: 15px; font-weight: 500; line-height: calc(19px * 1.2); color: var(--t-text-muted); }
.product-card__dose:empty::before { content: "\00a0"; } /* names without a dose (BB10 Blend, KLOW80) keep the dose line on mobile cards */
.pdp-stock.pdp-stock--pending { color: var(--t-text-muted); } /* pages/product.css loads after site.css */
.pdp-stock.pdp-stock--pending::before { background: var(--t-text-muted-3); }
.pdp-price__pending { font-size: 20px; font-weight: 600; letter-spacing: 0; line-height: calc(32px * 1.1); color: var(--t-text-muted); }
@media (max-width: 767px) { .pdp-price__pending { line-height: calc(28px * 1.1); } }
.coa-dialog__pdf { display: flex; width: max-content; max-width: 100%; margin: 40px auto; }

/* Order-intake checkout (brand/pepfame/store.json `checkout`, templates/checkout/order-received.njk) — existing
   tokens only. Replaces the checkout form once the order is saved: "payment gateway unavailable" message, order
   number + total, "card not charged" line, WhatsApp button, free-gift apology, back to shop. Busy Pay button while the order is saved. */
.tpl-checkout .co-pay:disabled { cursor: progress; opacity: 0.7; }
.co-done { max-width: 640px; margin: 40px auto 96px; padding: 32px; background: var(--t-bg-white); border: 1px solid var(--t-border-line); border-radius: var(--r); color: var(--t-text-ink); }
.co-done:focus { outline: none; }
.co-done:focus-visible { outline: 2px solid var(--t-border-gold); outline-offset: 4px; }
.co-done__head { display: flex; align-items: flex-start; gap: 16px; }
.co-done__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--t-bg-gold-rgb), 0.14); color: var(--t-text-gold-dark); }
.co-done__title { margin: 0 0 4px; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--t-text-ink); }
.co-done__lead { margin: 0; font-size: 15px; line-height: 1.55; color: var(--t-text-ink-3); }
.co-done__charged { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; padding: 12px 16px; background: var(--t-bg-green-bg); border-radius: var(--r-sm); font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--t-text-green-2); }
.co-done__charged svg { flex-shrink: 0; }
.co-done__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 24px; }
.co-done__fact { padding: 14px 16px; background: var(--t-bg-off-2); border: 1px solid var(--t-border-line); border-radius: var(--r-sm); }
.co-done__fact dt { margin: 0 0 4px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--t-text-muted); }
.co-done__fact dd { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--t-text-ink); overflow-wrap: anywhere; }
.co-done__order { font-family: var(--font-mono); letter-spacing: 0.02em; }
.co-done__body { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--t-text-ink-2); }
.co-done__wa { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 14px 20px; border-radius: var(--r-sm); background: var(--t-bg-green); color: var(--t-text-white); font-size: 17px; font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none; transition: background 0.2s; }
.co-done__wa:hover { background: var(--t-bg-ink); color: var(--t-text-white); }
.co-done__wa:focus-visible { outline: 2px solid var(--t-border-gold); outline-offset: 3px; }
.co-done__gift { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 0; padding: 14px 16px; background: var(--t-bg-green-bg); border-radius: var(--r-sm); font-size: 14px; line-height: 1.55; color: var(--t-text-green-2); }
.co-done__gift svg { flex-shrink: 0; margin-top: 1px; }
.co-done__back { display: inline-block; margin-top: 22px; font-size: 14px; font-weight: 500; color: var(--t-text-ink-3); text-decoration: underline; text-underline-offset: 3px; }
.co-done__back:hover { color: var(--t-text-ink); }
@media (max-width: 768px) {
  .co-done { margin: 20px 0 64px; padding: 22px 18px; }
  .co-done__title { font-size: 19px; }
  .co-done__facts { grid-template-columns: 1fr; }
}