/* CELLMIND local reference rebuild — generated from website/cellmind-rebuild/src/styles. Do not edit output. */
/* ---- designs/signature/tokens.css ---- */
/* ==========================================================================
   PepFame "Precision light" design system — tokens (docs/design/DESIGN-SYSTEM.md).
   Loaded only by brand builds with a design layer (src/_data/brand.js BRANDS.pepfame.design = "signature");
   the faithful reference build keeps its own tokens.css/theme.css untouched.
   Naming: --pf-<group>-<name>. Colours are ink/porcelain neutrals, one primary accent (the original PepFame/CellMind
   gold, restored 2026-10-13 — every gold hex comes from src/styles/tokens.css / theme.css, none is invented), one
   restrained secondary (verdigris), status colours, and a "night" surface scope for the hero, footer and admin nav.
   Gold rule (as in the original theme): ink/black text on gold fills; gold TEXT on light surfaces uses --pf-gold-ink.
   ========================================================================== */
:root {
  color-scheme: light;

  /* ---- colour: surfaces ---- */
  --pf-bg: #f5f6f8;            /* page: porcelain, cool */
  --pf-surface: #ffffff;       /* cards, panels */
  --pf-surface-2: #eef0f4;     /* mist: secondary panels, plates */
  --pf-surface-3: #e5e8ee;     /* pressed / hover of mist */
  --pf-plate: #f7f8fa;         /* specimen plate behind product renders (white-background photos) */
  --pf-night: #0b1020;         /* night ink: hero, footer */
  --pf-night-2: #121a33;
  --pf-night-3: #1b2547;
  --pf-night-line: rgba(245, 246, 248, 0.14);
  --pf-on-night: #f5f6f8;
  --pf-on-night-2: rgba(245, 246, 248, 0.72);
  --pf-on-night-3: rgba(245, 246, 248, 0.5);

  /* ---- colour: ink ---- */
  --pf-ink: #0e1116;           /* body text, primary fills — 17.5:1 on porcelain */
  --pf-ink-2: #2b3140;         /* secondary text — 11.4:1 */
  --pf-ink-3: #5b6373;         /* muted text — 5.5:1 (AA) */
  --pf-ink-4: #8a91a0;         /* disabled / decorative only (not for essential text) */
  --pf-line: #e2e5eb;
  --pf-line-strong: #c8cdd7;

  /* ---- colour: accents ---- */
  --pf-gold: #C8A84B;          /* fills (CTA, badge, selected), dots, rules — tokens.css --c-gold; ink text on it 8.3:1 */
  --pf-gold-dark: #8B6914;     /* focus ring, selected outlines, hover fill under white text — --c-gold-dark; 5.1:1 on white, 4.7:1 on porcelain */
  --pf-gold-ink: #756228;      /* gold text on light surfaces — theme.css --t-bg-gold-deep; 5.9:1 white, 5.5:1 porcelain, 4.9:1 on gold-50 */
  --pf-gold-50: #F5E9C4;       /* pale tint behind gold-ink text — --c-gold-light */
  --pf-gold-100: #e6d9aa;      /* selection / stronger tint — theme.css --t-bg-gold-pale */
  --pf-on-gold: var(--pf-ink); /* text on gold fills (original --t-text-on-gold: black) */
  --pf-focus: var(--pf-gold-dark);
  /* Deprecated aliases (blue "cobalt" retired 2026-10-13): kept only so stylesheets owned elsewhere (pages/checkout.css)
     resolve to the gold family; new rules use --pf-gold*. */
  --pf-cobalt: var(--pf-gold-dark);
  --pf-cobalt-ink: var(--pf-gold-ink);
  --pf-cobalt-deep: var(--pf-gold-dark);
  --pf-cobalt-50: var(--pf-gold-50);
  --pf-cobalt-100: var(--pf-gold-100);
  --pf-verdigris: #15a48e;     /* in stock dot, progress fill, gift */
  --pf-verdigris-ink: #0c7a69; /* text — 5.3:1 */
  --pf-verdigris-50: #e3f5f1;
  --pf-ok: #1b8a4c;  --pf-ok-bg: #e6f4eb;
  --pf-warn: #a66a12; --pf-warn-bg: #fbf1dd;
  --pf-bad: #c0392b;  --pf-bad-bg: #fbe9e7;
  --pf-whatsapp: #25d366;      /* brand colour of the support channel (icon/badge only) */
  --pf-whatsapp-ink: #0f7a5b;

  /* ---- rgb channel triplets (for alpha) ---- */
  --pf-ink-rgb: 14, 17, 22;
  --pf-night-rgb: 11, 16, 32;
  --pf-gold-rgb: 200, 168, 75;   /* theme.css --t-bg-gold-rgb */
  --pf-cobalt-rgb: var(--pf-gold-rgb);
  --pf-verdigris-rgb: 21, 164, 142;
  --pf-white-rgb: 255, 255, 255;

  /* ---- typography ---- */
  --pf-font: "Inter Variable", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pf-font-display: "Newsreader Variable", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  --pf-font-mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pf-fs-xs: 0.75rem;         /* 12 */
  --pf-fs-sm: 0.8438rem;       /* 13.5 */
  --pf-fs-md: 0.9688rem;       /* 15.5 body */
  --pf-fs-lg: 1.0938rem;       /* 17.5 */
  --pf-fs-xl: 1.25rem;         /* 20 */
  --pf-fs-2xl: 1.5rem;         /* 24 */
  --pf-fs-h1: clamp(2.5rem, 1.7rem + 3.4vw, 4.9rem);
  --pf-fs-h2: clamp(1.85rem, 1.3rem + 1.9vw, 3rem);
  --pf-fs-h3: clamp(1.2rem, 1.08rem + 0.55vw, 1.55rem);
  --pf-lh-body: 1.55;
  --pf-lh-tight: 1.08;
  --pf-ls-display: -0.018em;
  --pf-ls-caps: 0.12em;

  /* ---- spacing (4px grid) ---- */
  --pf-s-1: 4px; --pf-s-2: 8px; --pf-s-3: 12px; --pf-s-4: 16px; --pf-s-5: 20px; --pf-s-6: 24px; --pf-s-7: 32px; --pf-s-8: 40px; --pf-s-9: 56px; --pf-s-10: 72px;
  --pf-section: clamp(56px, 8vw, 112px);
  --pf-section-sm: clamp(40px, 5.5vw, 72px);

  /* ---- radius ---- */
  --pf-r-xs: 6px; --pf-r-sm: 10px; --pf-r-md: 14px; --pf-r-lg: 22px; --pf-r-xl: 32px; --pf-pill: 999px;

  /* ---- elevation (cool, low alpha) ---- */
  --pf-shadow-1: 0 1px 2px rgba(var(--pf-ink-rgb), 0.05), 0 1px 1px rgba(var(--pf-ink-rgb), 0.03);
  --pf-shadow-2: 0 10px 30px -12px rgba(var(--pf-ink-rgb), 0.16), 0 2px 6px rgba(var(--pf-ink-rgb), 0.05);
  --pf-shadow-3: 0 30px 70px -24px rgba(var(--pf-ink-rgb), 0.3), 0 8px 20px -8px rgba(var(--pf-ink-rgb), 0.1);
  --pf-ring: 0 0 0 4px rgba(var(--pf-gold-rgb), 0.3);

  /* ---- motion: one easing, three durations ---- */
  --pf-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pf-dur-1: 160ms;
  --pf-dur-2: 320ms;
  --pf-dur-3: 520ms;
  --pf-rise: 14px;

  /* ---- layout ---- */
  --pf-container: 1280px;
  --pf-container-narrow: 760px;
  --pf-container-wide: 1440px;
  --pf-gutter: clamp(16px, 4vw, 48px);
  --pf-header-h: 68px;
  --pf-marquee-h: 44px;          /* = the Pause/Resume control's 44 px touch target */
  --pf-safe-b: env(safe-area-inset-bottom, 0px);

  /* ---- z-index ---- */
  --pf-z-sticky: 90; --pf-z-header: 100; --pf-z-float: 110; --pf-z-drawer: 1000; --pf-z-dialog: 1100; --pf-z-toast: 1300;

  /* ---- compatibility aliases for the shared reference tokens used by brand JS/markup (no reference theme is loaded) ---- */
  --r: var(--pf-r-md); --r-sm: var(--pf-r-sm); --r-xs: var(--pf-r-xs); --pill: var(--pf-pill);
  --container-max: var(--pf-container); --container-narrow: var(--pf-container-narrow); --container-pad: var(--pf-gutter);
  --header-h: var(--pf-header-h); --safe-b: var(--pf-safe-b);
  --font: var(--pf-font); --font-mono: var(--pf-font-mono);
}

/* Night scope: hero, footer, admin sidebar. Components inside inherit inverted ink/line/surface tokens. */
.pf-night {
  --pf-ink: var(--pf-on-night);
  --pf-ink-2: var(--pf-on-night-2);
  --pf-ink-3: var(--pf-on-night-3);
  --pf-ink-4: rgba(245, 246, 248, 0.36);
  --pf-line: var(--pf-night-line);
  --pf-line-strong: rgba(245, 246, 248, 0.26);
  --pf-surface: var(--pf-night-2);
  --pf-surface-2: var(--pf-night-3);
  --pf-gold-ink: var(--pf-gold);   /* #C8A84B on night 8.3:1, night-2 7.5:1, night-3 6.5:1 */
  --pf-cobalt-ink: var(--pf-gold-ink);
  --pf-focus: var(--pf-gold);
  --pf-verdigris-ink: #5fd6c1;
  --pf-ring: 0 0 0 4px rgba(var(--pf-gold-rgb), 0.4);
  background: var(--pf-night);
  color: var(--pf-on-night);
}

/* Small viewports: the container gutter never collapses below 16 px (brief: 16 px side gutter at phone width). */
@media (max-width: 480px) {
  :root { --pf-gutter: 16px; --pf-header-h: 60px; }
}

/* ---- designs/signature/fonts.css ---- */
/* Self-hosted OFL 1.1 fonts (project-local @fontsource packages, copied to /assets/fonts/ by eleventy.config.js only for
   builds with the design layer). Weight-axis variable files (not the larger optical-size builds) keep the budget low:
   an English page loads Inter latin (48 KB) + Newsreader latin (58 KB, + 65 KB italic when an accent renders) +
   Plex Mono (15 KB per weight). Latin-ext files load only on pages with ć č đ š ž ü etc. (unicode-range); the Inter
   cyrillic subset is declared as a fallback (fixtures are Latin-script). font-display: swap on every face. */

/* Inter — UI and body */
@font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2-variations"); 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: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations"); 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: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter-cyrillic-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* Newsreader — display (headlines, editorial accents) */
@font-face { font-family: "Newsreader Variable"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/assets/fonts/newsreader-latin-wght-normal.woff2) format("woff2-variations"); 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: "Newsreader Variable"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/assets/fonts/newsreader-latin-ext-wght-normal.woff2) format("woff2-variations"); 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: "Newsreader Variable"; font-style: italic; font-weight: 200 800; font-display: swap; src: url(/assets/fonts/newsreader-latin-wght-italic.woff2) format("woff2-variations"); 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: "Newsreader Variable"; font-style: italic; font-weight: 200 800; font-display: swap; src: url(/assets/fonts/newsreader-latin-ext-wght-italic.woff2) format("woff2-variations"); 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; }

/* IBM Plex Mono — data labels (strengths, SKUs, batch ids, index numerals) */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-latin-400-normal.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: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-latin-ext-400-normal.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: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-latin-500-normal.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: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-latin-ext-500-normal.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; }

/* Metric-matched local fallbacks (capsize method: size-adjust from average glyph width, ascent/descent overrides) so the
   swap from the system font to the web font does not shift layout (lab CLS). Inter→Arial, Newsreader→Georgia,
   IBM Plex Mono→Courier New. Metrics: @capsizecss/metrics 3.5.0 (computed once, 2026-10-12). */
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107.12%; ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"); size-adjust: 96.12%; ascent-override: 76.47%; descent-override: 27.57%; line-gap-override: 0%; }
@font-face { font-family: "Plex Mono Fallback"; src: local("Courier New"); size-adjust: 99.98%; ascent-override: 102.52%; descent-override: 27.50%; line-gap-override: 0%; }

/* ---- designs/signature/base.css ---- */
/* ==========================================================================
   PepFame signature — base: reset, typography, buttons, forms, utilities, motion primitives.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--pf-bg);
  color: var(--pf-ink);
  font-family: var(--pf-font);
  font-size: var(--pf-fs-md);
  line-height: var(--pf-lh-body);
  font-feature-settings: "cv11", "ss01", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body.is-menu-open, body.is-drawer-locked, body.is-lightbox-open { overflow: hidden; }
body.is-drawer-locked { position: fixed; left: 0; right: 0; width: 100%; }
img, video, picture { display: block; max-width: 100%; }
img { height: auto; }
/* inline SVG icons: never let an unsized icon grow to the container width */
svg { display: inline-block; vertical-align: middle; flex: none; }
svg:not([width]) { width: 1em; height: 1em; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, h5, h6, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
button { font: inherit; color: inherit; }
button, [role="button"] { cursor: pointer; touch-action: manipulation; }
:disabled { cursor: not-allowed; }
strong, b { font-weight: 600; }
em { font-style: italic; }
small { font-size: var(--pf-fs-sm); }
hr { border: 0; border-top: 1px solid var(--pf-line); margin: 0; }
::selection { background: var(--pf-gold-100); color: var(--pf-ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 3px; border-radius: 2px; }
[id] { scroll-margin-top: calc(var(--pf-header-h) + 16px); }
[hidden] { display: none !important; }

/* ---- typography ---- */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; text-wrap: balance; }
.h1, .h2, .page-intro__title, .home-hero__title, .shop-head__title, .contact__title, .blog-intro__title, .article__title, .legal__title, .error-page__title, .account__title, .research-cta__title, .about-cta__title, .home-standard__title {
  font-family: var(--pf-font-display);
  font-weight: 500;
  letter-spacing: var(--pf-ls-display);
  line-height: var(--pf-lh-tight);
  text-wrap: balance;
}
.h1 { font-size: var(--pf-fs-h1); }
.h2 { font-size: var(--pf-fs-h2); }
.h2--lg { font-size: var(--pf-fs-h2); }
.h2 em, .page-intro__title em, .home-hero__accent, .shop-head__title em, .contact__title em, .blog-intro__title em, .article__title em, .legal__title em, .error-page__title em, .research-cta__title em, .about-cta__title em, .home-standard__title em, .pdp-guide .h2 em, .rf__title em, .contact__form-title em, .shop-request__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--pf-gold-ink);
}
.eyebrow, .page-intro__tag, .shop-head__eyebrow, .contact__tag, .contact__form-tag, .blog-intro__eyebrow, .pdp-guide__tag, .rf__tag, .shop-request__eyebrow, .about__eyebrow, .error-page__eyebrow, .more-posts__eyebrow, .research-cta__tag, .about-cta__tag, .home-standard__label {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  font-family: var(--pf-font-mono);
  font-size: var(--pf-fs-xs);
  font-weight: 500;
  letter-spacing: var(--pf-ls-caps);
  text-transform: uppercase;
  color: var(--pf-ink-3);
}
.eyebrow::before, .page-intro__tag::before, .shop-head__eyebrow::before, .contact__tag::before, .contact__form-tag::before, .blog-intro__eyebrow::before, .pdp-guide__tag::before, .rf__tag::before, .shop-request__eyebrow::before, .about__eyebrow::before, .error-page__eyebrow::before, .more-posts__eyebrow::before, .research-cta__tag::before, .about-cta__tag::before, .home-standard__label::before {
  content: ""; display: inline-block; width: 18px; height: 1px; background: var(--pf-gold); flex: none;
}
.pf-lead { font-size: var(--pf-fs-lg); line-height: 1.55; color: var(--pf-ink-2); max-width: 60ch; text-wrap: pretty; }
.pf-mono { font-family: var(--pf-font-mono); font-size: var(--pf-fs-sm); letter-spacing: 0.02em; }
.pf-num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute !important; 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: 12px; top: -60px; z-index: calc(var(--pf-z-header) + 10); padding: 10px 14px; border-radius: var(--pf-r-sm); background: var(--pf-ink); color: var(--pf-on-night); font-weight: 600; transition: top var(--pf-dur-1) var(--pf-ease); }
.skip-link:focus { top: 12px; }

/* ---- layout primitives ---- */
.container { width: 100%; max-width: var(--pf-container); margin-inline: auto; padding-inline: var(--pf-gutter); }
.container--narrow { max-width: var(--pf-container-narrow); }
.page { min-height: 50vh; }

/* ---- buttons ---- */
.btn, .pf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border: 1px solid var(--pf-line-strong); border-radius: var(--pf-pill);
  background: var(--pf-surface); color: var(--pf-ink);
  font-weight: 600; font-size: var(--pf-fs-md); line-height: 1.2; letter-spacing: -0.005em; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: transform var(--pf-dur-1) var(--pf-ease), background-color var(--pf-dur-1) var(--pf-ease), border-color var(--pf-dur-1) var(--pf-ease), color var(--pf-dur-1) var(--pf-ease), box-shadow var(--pf-dur-1) var(--pf-ease);
}
.btn:hover, .pf-btn:hover { border-color: var(--pf-ink); }
.btn:active, .pf-btn:active { transform: translateY(1px); }
/* primary CTAs: original PepFame gold fill with ink text (8.3:1); hover inverts to ink with gold text (8.3:1) */
.btn--primary, .pf-btn--primary, .btn--gold, .btn--accent { background: var(--pf-gold); border-color: var(--pf-gold); color: var(--pf-on-gold); }
.btn--primary:hover, .pf-btn--primary:hover, .btn--gold:hover, .btn--accent:hover { background: var(--pf-ink); border-color: var(--pf-ink); color: var(--pf-gold); box-shadow: var(--pf-shadow-2); }
.btn--outline { background: transparent; }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover { background: var(--pf-surface-2); border-color: transparent; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: var(--pf-fs-sm); }
.btn[disabled], .pf-btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
.pf-night .btn, .pf-night .pf-btn { background: transparent; border-color: var(--pf-line-strong); color: var(--pf-on-night); }
.pf-night .btn--primary, .pf-night .pf-btn--primary, .pf-night .btn--gold { background: var(--pf-gold); border-color: var(--pf-gold); color: var(--pf-on-gold); }
.pf-night .btn--primary:hover, .pf-night .btn--gold:hover { background: #fff; border-color: #fff; color: var(--pf-night); }

/* ---- forms ---- */
input, select, textarea { font: inherit; color: inherit; }
.pf-input, .contact-form__control, .account-field__input, .aff-field__input, .lost-pw__input, .shop-request__input, .shop-search__input, .report-filter__input, .report-filter__select, .co-input, .co-select, .pdp-restock__input, .co-coupon__input {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--pf-line-strong); border-radius: var(--pf-r-sm);
  background: var(--pf-surface); color: var(--pf-ink);
  transition: border-color var(--pf-dur-1) var(--pf-ease), box-shadow var(--pf-dur-1) var(--pf-ease);
}
.pf-input:focus, .contact-form__control:focus, .account-field__input:focus, .aff-field__input:focus, .lost-pw__input:focus, .shop-request__input:focus, .shop-search__input:focus, .report-filter__input:focus, .report-filter__select:focus, .co-input:focus, .co-select:focus, .pdp-restock__input:focus, .co-coupon__input:focus { outline: none; border-color: var(--pf-gold-dark); box-shadow: var(--pf-ring); }
.pf-input::placeholder, input::placeholder, textarea::placeholder { color: var(--pf-ink-4); }
textarea { resize: vertical; min-height: 120px; }
select { appearance: none; -webkit-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 d='M1 1l5 5 5-5' fill='none' stroke='%235b6373' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
label { display: block; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--pf-ink); }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ---- generic small components ---- */
.tag-pill, .pf-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--pf-pill); background: var(--pf-surface-2); color: var(--pf-ink-2); font-size: var(--pf-fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--pf-font-mono); }
.pf-tag--accent { background: var(--pf-gold-50); color: var(--pf-gold-ink); }
.pf-tag--ok { background: var(--pf-verdigris-50); color: var(--pf-verdigris-ink); }
.pf-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pf-verdigris); }
/* data-source credit on pages without the site footer (the checkout), above the research-use line (design.json dataCredit) */
.pf-data-credit { max-width: var(--pf-container); margin: 0 auto; padding: 10px var(--pf-gutter) 4px; text-align: center; font-size: var(--pf-fs-xs); }
.pf-data-credit a { color: var(--pf-ink-3); text-decoration: underline; text-underline-offset: 3px; }
.pf-data-credit a:hover { color: var(--pf-ink); }
/* the research-use statement on a page without the site footer (the checkout): one small line at the very end, muted but AA
   (--pf-ink-3, 5.5:1); with a footer it is the footer's last line (.site-footer__disclaimer) — owner 2026-10-26: no grey strip */
.pf-disclaimer-line { max-width: var(--pf-container); margin: 0 auto; padding: 8px var(--pf-gutter) calc(18px + var(--pf-safe-b)); text-align: center; font-size: var(--pf-fs-xs); line-height: 1.6; color: var(--pf-ink-3); }
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--pf-safe-b)); z-index: var(--pf-z-toast); transform: translate(-50%, 16px); padding: 12px 18px; border-radius: var(--pf-pill); background: var(--pf-ink); color: var(--pf-on-night); font-size: var(--pf-fs-sm); font-weight: 500; box-shadow: var(--pf-shadow-3); opacity: 0; pointer-events: none; transition: opacity var(--pf-dur-2) var(--pf-ease), transform var(--pf-dur-2) var(--pf-ease); max-width: calc(100vw - 32px); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---- "settle" motion primitives: final state without JS; html.js + IntersectionObserver add .is-in ---- */
.pf-reveal { opacity: 1; transform: none; }
html.js .pf-reveal:not(.is-in) { opacity: 0; transform: translateY(var(--pf-rise)); }
html.js .pf-reveal { transition: opacity var(--pf-dur-3) var(--pf-ease), transform var(--pf-dur-3) var(--pf-ease); transition-delay: var(--pf-delay, 0ms); }
html.js .pf-reveal.is-in { opacity: 1; transform: none; }
.pf-stagger > * { --pf-delay: 0ms; }
.pf-stagger > :nth-child(2) { --pf-delay: 60ms; } .pf-stagger > :nth-child(3) { --pf-delay: 120ms; } .pf-stagger > :nth-child(4) { --pf-delay: 180ms; }
.pf-stagger > :nth-child(5) { --pf-delay: 240ms; } .pf-stagger > :nth-child(6) { --pf-delay: 300ms; } .pf-stagger > :nth-child(n+7) { --pf-delay: 360ms; }
@media (prefers-reduced-motion: reduce) {
  html.js .pf-reveal:not(.is-in) { opacity: 1; transform: none; }
  html.js .pf-reveal { transition: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
/* Mobile: shorter rises, no delay chains longer than 2 steps */
@media (max-width: 768px) { :root { --pf-rise: 10px; } .pf-stagger > :nth-child(n+3) { --pf-delay: 120ms; } }

/* ---- currency pending (brand-js/commerce/prefs-boot.js): non-USD visitors never see USD amounts flash ---- */
.pf-cur-pending [data-pf-amount] { visibility: hidden; animation: pf-reveal 0s 3s forwards; }
@keyframes pf-reveal { to { visibility: visible; } }

/* ---- delivery estimate by region (lib/brand-delivery.js, prefs-boot.js data-pf-region): international by default ---- */
[data-pf-eta="us"], [data-pf-eta="canada"], [data-pf-eta="europe"],
html[data-pf-region="us"] [data-pf-eta="international"], html[data-pf-region="canada"] [data-pf-eta="international"], html[data-pf-region="europe"] [data-pf-eta="international"] { display: none; }
html[data-pf-region="us"] [data-pf-eta="us"], html[data-pf-region="canada"] [data-pf-eta="canada"], html[data-pf-region="europe"] [data-pf-eta="europe"] { display: inline; }

/* ---- local-only notice (reference tooling; kept styled so dev builds stay usable) ---- */
.local-notice { position: fixed; inset: 0; z-index: var(--pf-z-dialog); display: grid; place-items: center; padding: 16px; }
.local-notice__backdrop { position: absolute; inset: 0; background: rgba(var(--pf-night-rgb), 0.5); }
.local-notice__box { position: relative; width: min(460px, 100%); padding: 24px; border-radius: var(--pf-r-lg); background: var(--pf-surface); box-shadow: var(--pf-shadow-3); }
.local-notice__title { margin: 0 0 8px; font-weight: 600; }
.local-notice__detail { margin-top: 8px; font-size: var(--pf-fs-sm); color: var(--pf-ink-3); }
.local-notice__close { margin-top: 16px; min-height: 44px; padding: 0 18px; border: 1px solid var(--pf-line-strong); border-radius: var(--pf-pill); background: var(--pf-ink); color: var(--pf-on-night); font-weight: 600; }

/* ---- add-to-cart micro-feedback (brand-js/commerce/add-to-cart.js adds .is-added for 1.2 s) ---- */
.is-added { position: relative; }
.is-added::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--pf-verdigris); opacity: 0; animation: pf-added var(--pf-dur-3) var(--pf-ease) both; pointer-events: none; }
@keyframes pf-added { 0% { opacity: 0.9; transform: scale(0.98); } 100% { opacity: 0; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .is-added::after { animation: none; } }

/* ---- designs/signature/layout.css ---- */
/* ==========================================================================
   PepFame signature — layout helpers shared by several templates.
   ========================================================================== */
.pf-section { padding-block: var(--pf-section); }
.pf-section--sm { padding-block: var(--pf-section-sm); }
.pf-section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(24px, 4vw, 40px); }
.pf-section__head .h2 { max-width: 18ch; }
.pf-grid { display: grid; gap: var(--pf-s-5); }
.pf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .pf-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pf-grid--2, .pf-grid--3, .pf-grid--4 { grid-template-columns: minmax(0, 1fr); } }
/* Card: the default elevated surface */
.pf-card { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-r-lg); box-shadow: var(--pf-shadow-1); }
/* Specimen plate: the soft rounded backdrop behind product renders (white-background photos sit cleanly on it) */
.pf-plate { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: var(--pf-r-lg); background: radial-gradient(120% 90% at 50% 10%, #ffffff 0%, var(--pf-plate) 60%, var(--pf-surface-2) 100%); }
.pf-plate img { mix-blend-mode: multiply; }
/* Hairline rule with an index numeral: "01 — Bestsellers" */
.pf-index { display: flex; align-items: center; gap: 12px; font-family: var(--pf-font-mono); font-size: var(--pf-fs-xs); letter-spacing: var(--pf-ls-caps); text-transform: uppercase; color: var(--pf-ink-3); }
.pf-index::after { content: ""; flex: 1; height: 1px; background: var(--pf-line); }
/* Molecular lattice (decorative; no claim). Pure CSS: dot grid + two faint diagonal rules. */
.pf-lattice { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(var(--pf-white-rgb), 0.16) 1px, transparent 1.4px); background-size: 28px 28px; mask-image: radial-gradient(80% 70% at 60% 40%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(80% 70% at 60% 40%, #000 30%, transparent 100%); }

/* ---- designs/signature/components/consent.css ---- */
/* Cookie choice for the Meta Pixel + Google Analytics (brand-js/commerce/consent.js; owner 2026-10-18): one short sentence
   with the Privacy link, then Decline (clean outline) and Accept (PepFame gold, white text) of the same size. The gold is
   the darker brand gold the site already uses under white text (--pf-gold-dark, 5.1:1; white on the light gold #C8A84B
   would be 2.2:1). Below the cart drawer (an open drawer covers it), above the sticky purchase bar and the WhatsApp
   button. "Cookie settings" links in the footer and under the quiz form. */
.pf-consent { position: fixed; z-index: 950; left: 16px; right: 16px; bottom: calc(16px + var(--pf-safe-b)); max-width: 640px; margin: 0 auto; padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-r-md); box-shadow: var(--pf-shadow-3); color: var(--pf-ink-2); font-size: var(--pf-fs-sm); line-height: 1.5; }
.pf-consent p { flex: 1 1 260px; min-width: 0; margin: 0; }
.pf-consent__state { font-weight: 600; color: var(--pf-ink); }
/* the referral choice (D-14, R6): its own row with its own two buttons, under the Meta/Google row (or alone) */
.pf-consent__ref { flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 12px; border-top: 1px solid var(--pf-line); }
.pf-consent__ref:first-child { padding-top: 0; border-top: 0; }
.pf-consent__link { color: var(--pf-gold-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
/* equal columns: both buttons always have the same width, whatever the language */
.pf-consent__actions { flex: 0 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.pf-consent__btn { width: 100%; min-width: 128px; min-height: 44px; padding: 0 20px; border: 1.5px solid var(--pf-ink); border-radius: var(--pf-pill); background: transparent; color: var(--pf-ink); font: inherit; font-weight: 600; cursor: pointer; transition: background-color var(--pf-dur-1) var(--pf-ease), border-color var(--pf-dur-1) var(--pf-ease), color var(--pf-dur-1) var(--pf-ease); }
.pf-consent__btn:hover { background: var(--pf-surface-2); }
.pf-consent__btn--granted { background: var(--pf-gold-dark); border-color: var(--pf-gold-dark); color: rgb(var(--pf-white-rgb)); }
.pf-consent__btn--granted:hover { background: var(--pf-ink); border-color: var(--pf-ink); }
.pf-consent__btn:focus-visible, .pf-cookie-link:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
/* the links exist only where tracking can run (consent.js adds html.pf-meta: the live site, test browsers) */
.pf-cookie-link, .pf-cookie-sep { display: none; }
.pf-meta .pf-cookie-link, .pf-meta .pf-cookie-sep { display: inline; }
.pf-cookie-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.site-footer__legal .pf-cookie-link { color: var(--pf-on-night-2); }
.site-footer__legal .pf-cookie-link:hover { color: var(--pf-on-night); }
.pf-cookie-link--inline { color: var(--pf-gold-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) {
  .pf-consent { left: 12px; right: 12px; bottom: calc(12px + var(--pf-safe-b)); padding: 14px; }
  .pf-consent__actions { flex: 1 1 100%; }
  .pf-consent__btn { min-width: 0; }
}

/* ---- designs/signature/components/conversion.css ---- */
/* Conversion blocks of the copy pass 2026-10-16 (brand build only): hero offers + trust row, product benefits, quantity
   offer line, trust stack under the buy buttons, card marks, closing home CTA, contact WhatsApp panel, cart trust line.
   Everything uses the signature tokens; nothing animates. */

/* card marks (Visa, Mastercard, American Express — owner-confirmed) */
.pf-cards { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pf-cards img { width: 34px; height: 22px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px var(--pf-line); }

/* ---- home hero: offers + trust row */
.pf-offers { list-style: none; margin: -14px 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pf-offers__item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--pf-pill); border: 1px solid rgba(var(--pf-gold-rgb), 0.45); background: rgba(var(--pf-gold-rgb), 0.12); color: var(--pf-on-night); font-size: var(--pf-fs-sm); font-weight: 600; line-height: 1.2; }
.pf-offers__item svg { width: 14px; height: 14px; color: var(--pf-gold); flex: none; }
.pf-hero-trust { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--pf-on-night-2); font-size: var(--pf-fs-sm); }
.pf-hero-trust__item { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; }
a.pf-hero-trust__item:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.pf-hero-trust__item > svg { width: 14px; height: 14px; color: var(--pf-gold); flex: none; }
.pf-hero-trust__stars { display: inline-flex; gap: 1px; color: var(--pf-gold); }
.pf-hero-trust__stars svg { width: 12px; height: 12px; }
.pf-hero-trust .pf-cards img { box-shadow: none; }
@media (max-width: 640px) {
  /* phones: the buttons come right after the subline (above the fold for paid traffic), then offers, then trust */
  .pf-hero__copy { display: flex; flex-direction: column; }
  .pf-hero__copy > .pf-hero__actions { order: 4; }
  .pf-hero__copy > .pf-offers { order: 5; margin: 18px 0 0; }
  .pf-hero__copy > .pf-hero-trust { order: 6; }
  .pf-offers { margin: -8px 0 20px; }
  .pf-offers__item { font-size: var(--pf-fs-xs); padding: 5px 10px; }
  .pf-hero-trust { gap: 8px 16px; font-size: var(--pf-fs-xs); }
}

/* ---- product page: benefits, offer line, trust stack */
.pdp-benefits { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; gap: 8px; }
.pdp-benefits__item { display: flex; align-items: flex-start; gap: 9px; font-size: var(--pf-fs-md); line-height: 1.45; color: var(--pf-ink); }
.pdp-benefits__item svg { width: 16px; height: 16px; margin-top: 2px; flex: none; color: var(--pf-verdigris-ink); }

.pdp-offer { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; padding: 9px 12px; border-radius: var(--pf-r-sm); background: var(--pf-gold-50); color: var(--pf-ink); font-size: var(--pf-fs-sm); font-weight: 600; line-height: 1.35; }
.pdp-offer svg { width: 15px; height: 15px; flex: none; color: var(--pf-gold-dark); }

.pdp-trust-stack { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--pf-line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.pdp-trust-stack__item { display: flex; align-items: flex-start; gap: 8px; min-width: 0; font-size: var(--pf-fs-xs); line-height: 1.4; color: var(--pf-ink-2); }
.pdp-trust-stack__icon { flex: none; display: inline-flex; color: var(--pf-gold-dark); margin-top: 1px; }
.pdp-trust-stack__icon svg { width: 16px; height: 16px; }
.pdp-trust-stack__item--whatsapp .pdp-trust-stack__icon { color: var(--pf-whatsapp-ink); }
.pdp-trust-stack__item--star .pdp-trust-stack__icon { color: var(--pf-gold); }
.pdp-trust-stack__text { color: inherit; text-decoration: none; min-width: 0; }
a.pdp-trust-stack__text:hover { color: var(--pf-ink); text-decoration: underline; text-underline-offset: 3px; }
.pdp-trust-stack__item--lock { grid-column: 1 / -1; flex-wrap: wrap; align-items: center; }
.pdp-trust-stack__item--lock .pf-cards { margin-left: auto; }
@media (max-width: 420px) {
  .pdp-trust-stack { grid-template-columns: minmax(0, 1fr); }
  .pdp-trust-stack__item--lock .pf-cards { margin-left: 0; }
}

/* ---- home: closing call to action */
.pf-final { background: var(--pf-night); color: var(--pf-on-night); padding-block: var(--pf-section-sm); }
.pf-final__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.pf-final__copy { max-width: 60ch; min-width: 0; }
.pf-final__tag { margin: 0 0 10px; font-family: var(--pf-font-mono); font-size: var(--pf-fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pf-gold); }
.pf-final__title { margin: 0 0 12px; font-family: var(--pf-font-display); font-weight: 500; font-size: var(--pf-fs-h2); line-height: 1.1; text-wrap: balance; }
.pf-final__title em { color: var(--pf-gold); font-style: italic; }
.pf-final__text { margin: 0; color: var(--pf-on-night-2); font-size: var(--pf-fs-lg); line-height: 1.55; text-wrap: pretty; }
.pf-final__actions { display: grid; gap: 14px; justify-items: start; }
.pf-final__wa { display: inline-flex; align-items: center; gap: 8px; color: var(--pf-on-night-2); font-size: var(--pf-fs-sm); text-decoration: none; max-width: 36ch; }
.pf-final__wa svg { width: 16px; height: 16px; flex: none; color: var(--pf-whatsapp); }
.pf-final__wa:hover span { text-decoration: underline; text-underline-offset: 3px; color: var(--pf-on-night); }
@media (max-width: 640px) {
  .pf-final__actions, .pf-final__cta { width: 100%; }
  .pf-final__text { font-size: var(--pf-fs-md); }
}

/* ---- contact: WhatsApp panel in place of the unconnected form */
.contact__wa-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.contact__wa-text { margin: 0; max-width: 46ch; color: var(--pf-ink-2); font-size: var(--pf-fs-md); line-height: 1.55; }
.contact__wa-btn { display: inline-flex; align-items: center; gap: 8px; }
.contact__wa-btn svg { width: 16px; height: 16px; }
.contact__wa-mail { margin: 0; color: var(--pf-ink-3); font-size: var(--pf-fs-sm); }
.contact__wa-mail a { color: var(--pf-gold-ink); }

/* ---- cart drawer trust line */
.drawer__trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin-top: 8px; font-size: var(--pf-fs-xs); color: var(--pf-ink-3); text-align: center; }

/* ---- designs/signature/components/drawer.css ---- */
/* ==========================================================================
   Cart drawer (brand/drawer.njk, brand-js/commerce/drawer.js): right-hand panel, free-shipping progress on the
   canonical USD basis, detailed lines, the single gift row, bundle discount, checkout CTA.
   Hooks kept: [data-drawer] .is-open/hidden, .drawer__panel, .drawer__item(--gift)[data-gift], .drawer__item-name,
   data-f fields, .qty-mini buttons, [data-drawer-*] targets.
   ========================================================================== */
.drawer { position: fixed; inset: 0; z-index: var(--pf-z-drawer); }
.drawer__backdrop { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: rgba(var(--pf-night-rgb), 0.5); opacity: 0; transition: opacity var(--pf-dur-2) var(--pf-ease); cursor: default; }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(440px, 100%); background: var(--pf-bg); box-shadow: var(--pf-shadow-3); transform: translateX(100%); transition: transform var(--pf-dur-2) var(--pf-ease); outline: none; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; background: var(--pf-surface); border-bottom: 1px solid var(--pf-line); }
.drawer__head-copy { display: flex; align-items: baseline; gap: 10px; }
.drawer__title { font-family: var(--pf-font-display); font-size: 1.6rem; font-weight: 500; letter-spacing: -0.015em; }
.drawer__count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: var(--pf-pill); background: var(--pf-ink); color: var(--pf-on-night); font-family: var(--pf-font-mono); font-size: var(--pf-fs-xs); }
.drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--pf-line); border-radius: 50%; background: var(--pf-surface); color: var(--pf-ink); cursor: pointer; }
.drawer__close:hover { border-color: var(--pf-ink); }
.drawer__ship { display: grid; gap: 8px; padding: 14px 20px; background: var(--pf-surface); border-bottom: 1px solid var(--pf-line); }
.drawer__ship-line { display: flex; align-items: center; gap: 10px; }
.drawer__ship-text { font-size: var(--pf-fs-sm); font-weight: 600; color: var(--pf-ink); }
.drawer__ship.is-complete .drawer__ship-text { color: var(--pf-verdigris-ink); }

/* "You unlocked free shipping!" (owner 2026-10-17; product page .pdp-freeship and this drawer, brand-js/commerce/unlock.js):
   the truck badge turns green when the threshold is reached; crossing it (.is-celebrating, ~1.2 s) pops the badge, sends
   out a ring and eight gold/green sparks, lifts the message in and runs one shine over the full bar. Reduced motion:
   colour change only. */
.pf-unlock { position: relative; display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--pf-surface-2); color: var(--pf-ink-3); transition: background-color var(--pf-dur-2) var(--pf-ease), color var(--pf-dur-2) var(--pf-ease); }
.pf-unlock svg { position: relative; z-index: 1; }
.pf-unlock::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(var(--pf-verdigris-rgb), 0.45); opacity: 0; }
.is-complete .pf-unlock, .is-free .pf-unlock { background: var(--pf-verdigris); color: #fff; }
.pf-unlock__burst { position: absolute; inset: 0; pointer-events: none; }
.pf-unlock__burst i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--pf-gold); opacity: 0; }
.pf-unlock__burst i:nth-child(even) { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--pf-verdigris); }
.pf-unlock__burst i:nth-child(1) { --pf-a: 0deg; } .pf-unlock__burst i:nth-child(2) { --pf-a: 45deg; }
.pf-unlock__burst i:nth-child(3) { --pf-a: 90deg; } .pf-unlock__burst i:nth-child(4) { --pf-a: 135deg; }
.pf-unlock__burst i:nth-child(5) { --pf-a: 180deg; } .pf-unlock__burst i:nth-child(6) { --pf-a: 225deg; }
.pf-unlock__burst i:nth-child(7) { --pf-a: 270deg; } .pf-unlock__burst i:nth-child(8) { --pf-a: 315deg; }
.is-celebrating .pf-unlock { animation: pf-unlock-pop 560ms var(--pf-ease-out); }
.is-celebrating .pf-unlock::after { animation: pf-unlock-ring 900ms var(--pf-ease-out); }
.is-celebrating .pf-unlock__burst i { animation: pf-unlock-spark 820ms var(--pf-ease-out) 80ms both; }
.is-celebrating .pf-unlock__burst i:nth-child(even) { animation-delay: 140ms; }
.is-celebrating .drawer__ship-text, .is-celebrating .pdp-freeship__text { animation: pf-unlock-text 520ms var(--pf-ease-out) 120ms both; }
.is-celebrating .drawer__ship-fill, .is-celebrating .pdp-freeship__fill { background-image: linear-gradient(100deg, var(--pf-verdigris) 0%, var(--pf-verdigris) 35%, rgba(var(--pf-white-rgb), 0.85) 50%, var(--pf-verdigris) 65%, var(--pf-verdigris) 100%); background-size: 250% 100%; animation: pf-unlock-shine 1100ms var(--pf-ease) 200ms both; }
@keyframes pf-unlock-pop { 0% { transform: scale(0.7); } 45% { transform: scale(1.22) rotate(-8deg); } 70% { transform: scale(0.96) rotate(3deg); } 100% { transform: scale(1); } }
@keyframes pf-unlock-ring { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--pf-verdigris-rgb), 0.5); } 100% { opacity: 0; box-shadow: 0 0 0 16px rgba(var(--pf-verdigris-rgb), 0); } }
@keyframes pf-unlock-spark { 0% { opacity: 0; transform: rotate(var(--pf-a)) translateY(0) scale(0.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--pf-a)) translateY(var(--pf-spark, -30px)) scale(1); } }
@keyframes pf-unlock-text { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pf-unlock-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .pf-unlock { transition: none; }
  .is-celebrating .pf-unlock, .is-celebrating .pf-unlock::after, .is-celebrating .pf-unlock__burst i, .is-celebrating .drawer__ship-text, .is-celebrating .pdp-freeship__text, .is-celebrating .drawer__ship-fill, .is-celebrating .pdp-freeship__fill { animation: none; }
}
.drawer__ship-bar { display: block; height: 6px; border-radius: var(--pf-pill); background: var(--pf-surface-2); overflow: hidden; }
.drawer__ship-fill { display: block; height: 100%; width: 0; border-radius: var(--pf-pill); background: linear-gradient(90deg, var(--pf-gold), var(--pf-verdigris)); transition: width var(--pf-dur-3) var(--pf-ease); }
.drawer__ship.is-complete .drawer__ship-fill { background: var(--pf-verdigris); }
.drawer__ship-note { font-size: var(--pf-fs-xs); line-height: 1.45; color: var(--pf-ink-3); }
.drawer__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 20px; }
.drawer__notice { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--pf-r-sm); background: var(--pf-warn-bg); color: var(--pf-warn); font-size: var(--pf-fs-sm); line-height: 1.5; }
.drawer__empty { display: grid; gap: 12px; justify-items: start; padding: 32px 0; color: var(--pf-ink-2); }
.drawer__empty a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--pf-ink); border-radius: var(--pf-pill); font-weight: 600; color: var(--pf-ink); }
.drawer__items { list-style: none; margin: 0; padding: 0; display: grid; }
.drawer__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--pf-line); animation: pf-item-in var(--pf-dur-2) var(--pf-ease-out); }
@keyframes pf-item-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.drawer__item-media { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--pf-r-md); background: radial-gradient(110% 80% at 50% 15%, #ffffff 0%, var(--pf-plate) 55%, var(--pf-surface-2) 100%); border: 1px solid var(--pf-line); overflow: hidden; }
.drawer__item-media img { width: 100%; height: 100%; object-fit: contain; padding: 6px; mix-blend-mode: multiply; }
.drawer__item-main { display: grid; gap: 6px; align-content: start; min-width: 0; }
.drawer__item-name { font-weight: 600; color: var(--pf-ink); line-height: 1.3; }
.drawer__item-price { font-size: var(--pf-fs-sm); color: var(--pf-ink-3); font-variant-numeric: tabular-nums; }
.drawer__item-was { color: var(--pf-ink-4); }
.drawer__item-save { color: var(--pf-verdigris-ink); font-weight: 600; }
.drawer__item-flag { font-size: var(--pf-fs-xs); color: var(--pf-bad); font-weight: 600; }
.drawer__item.is-flagged .drawer__item-media img { opacity: 0.5; }
.qty-mini { display: inline-flex; align-items: center; width: max-content; border: 1px solid var(--pf-line-strong); border-radius: var(--pf-pill); background: var(--pf-surface); }
.qty-mini button { width: 36px; height: 36px; border: 0; background: transparent; color: var(--pf-ink); font-size: 18px; line-height: 1; cursor: pointer; border-radius: var(--pf-pill); }
.qty-mini button:hover { background: var(--pf-surface-2); }
.qty-mini button:disabled { color: var(--pf-ink-4); cursor: not-allowed; }
.qty-mini__value { min-width: 26px; text-align: center; font-family: var(--pf-font-mono); font-size: var(--pf-fs-sm); font-weight: 500; }
.qty-mini--static { border: 0; background: transparent; }
.qty-mini--static .qty-mini__value { min-width: 0; padding: 0 2px; }
.drawer__item-side { display: grid; justify-items: end; align-content: space-between; gap: 8px; }
.drawer__remove { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--pf-ink-3); cursor: pointer; }
.drawer__remove:hover { border-color: var(--pf-line-strong); color: var(--pf-bad); }
.drawer__item-total { font-weight: 600; font-variant-numeric: tabular-nums; }
.drawer__item--gift { background: linear-gradient(90deg, var(--pf-verdigris-50), transparent 70%); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: var(--pf-r-md); border-bottom: 0; }
.drawer__item--gift .drawer__item-name { font-weight: 600; }
.drawer__gift-tag { color: var(--pf-verdigris-ink); font-weight: 600; }
.drawer__footer { display: grid; gap: 10px; padding: 16px 20px calc(16px + var(--pf-safe-b)); background: var(--pf-surface); border-top: 1px solid var(--pf-line); box-shadow: 0 -12px 24px -20px rgba(var(--pf-ink-rgb), 0.25); }
.drawer__row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--pf-fs-sm); color: var(--pf-ink-2); font-variant-numeric: tabular-nums; }
.drawer__row--save { color: var(--pf-verdigris-ink); font-weight: 600; }
.drawer__checkout { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; margin-top: 4px; border-radius: var(--pf-pill); background: var(--pf-gold); color: var(--pf-on-gold); font-weight: 600; transition: background-color var(--pf-dur-1) var(--pf-ease), color var(--pf-dur-1) var(--pf-ease), transform var(--pf-dur-1) var(--pf-ease); }
.drawer__checkout:hover { background: var(--pf-ink); color: var(--pf-gold); }
.drawer__checkout:active { transform: translateY(1px); }
.drawer__secure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--pf-fs-xs); color: var(--pf-ink-3); }
.drawer__secure svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .drawer__panel, .drawer__backdrop, .drawer__ship-fill { transition: none; } .drawer__item { animation: none; } }
@media (max-width: 480px) { .drawer__panel { width: 100%; } .drawer__item { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; } .drawer__item-media { width: 56px; height: 56px; } }

/* Cart offer "Add to your order" (owner 2026-10-18; brand-js/commerce/upsell.js): one compact card per offer product —
   image, name, the regular price struck through, the offer price and a one-tap gold "Add"; the gold badge states the
   extra discount. The same box sits in the checkout's order summary (pages/checkout.css adjusts its spacing). A cart line
   added from it carries a gold "+20% extra off" tag and its total before the extra discount struck through. */
.drawer__item-offer { justify-self: start; padding: 2px 9px; border-radius: var(--pf-pill); background: var(--pf-gold-50); color: var(--pf-gold-ink); font-size: var(--pf-fs-xs); font-weight: 700; line-height: 1.5; }
.drawer__item-offer[hidden] { display: none; }
/* a bundle line (Release A2): "3 + 2 free × 2 · 10 vials" under the name */
.drawer__item-bundle { justify-self: start; font-size: var(--pf-fs-xs); font-weight: 700; color: var(--pf-gold-ink); }
.drawer__item-bundle[hidden] { display: none; }
.drawer__item-total-was { color: var(--pf-ink-4); font-size: var(--pf-fs-xs); font-variant-numeric: tabular-nums; text-decoration-color: var(--pf-bad); }
.drawer__item-total-was[hidden] { display: none; }
.drawer__item.is-offer .drawer__item-side { align-content: start; }
.drawer__item.is-offer .drawer__remove { margin-bottom: auto; }
.pf-upsell { display: grid; gap: 10px; margin-top: 16px; padding: 14px; border: 1px solid rgba(var(--pf-gold-rgb), 0.55); border-radius: var(--pf-r-lg); background: linear-gradient(180deg, rgba(var(--pf-gold-rgb), 0.12), rgba(var(--pf-gold-rgb), 0.03) 70%), var(--pf-surface); }
.pf-upsell[hidden] { display: none; }
.pf-upsell__head { display: grid; gap: 6px; }
.pf-upsell__title { margin: 0; font-family: var(--pf-font-display); font-size: 1.2rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; color: var(--pf-ink); }
.pf-upsell__badge { justify-self: start; margin: 0; padding: 4px 10px; border-radius: var(--pf-pill); background: var(--pf-gold); color: var(--pf-on-gold); font-size: var(--pf-fs-xs); font-weight: 700; line-height: 1.35; }
.pf-upsell__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pf-upsell__item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 8px 8px 8px; border: 1px solid var(--pf-line); border-radius: var(--pf-r-md); background: var(--pf-surface); animation: pf-item-in var(--pf-dur-2) var(--pf-ease-out); }
.pf-upsell__media { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--pf-r-sm); background: radial-gradient(110% 80% at 50% 15%, #ffffff 0%, var(--pf-plate) 55%, var(--pf-surface-2) 100%); overflow: hidden; }
.pf-upsell__media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.pf-upsell__body { display: grid; gap: 2px; min-width: 0; }
.pf-upsell__name { font-size: var(--pf-fs-sm); font-weight: 600; line-height: 1.3; color: var(--pf-ink); }
.pf-upsell__price { font-size: var(--pf-fs-sm); font-variant-numeric: tabular-nums; }
.pf-upsell__was { color: var(--pf-ink-4); text-decoration-color: var(--pf-bad); }
.pf-upsell__now { color: var(--pf-ink); }
.pf-upsell__add { min-width: 72px; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--pf-pill); background: var(--pf-gold); color: var(--pf-on-gold); font: inherit; font-size: var(--pf-fs-sm); font-weight: 700; cursor: pointer; transition: background-color var(--pf-dur-1) var(--pf-ease), color var(--pf-dur-1) var(--pf-ease), transform var(--pf-dur-1) var(--pf-ease); }
.pf-upsell__add:hover { background: var(--pf-ink); color: var(--pf-gold); }
.pf-upsell__add:active { transform: translateY(1px); }
.pf-upsell__add:focus-visible { outline: none; box-shadow: var(--pf-ring); }
.pf-upsell__add:disabled { opacity: 0.6; cursor: default; }
@media (prefers-reduced-motion: reduce) { .pf-upsell__item { animation: none; } .pf-upsell__add { transition: none; } }
/* phones: the three offers side by side as small cards (the box stays in view under one or two cart lines); one offer left
   → a single row again */
@media (max-width: 480px) {
  .pf-upsell { gap: 8px; margin-top: 12px; padding: 12px; }
  .pf-upsell__title { font-size: 1.05rem; }
  .pf-upsell__badge { padding: 3px 9px; font-size: 11.5px; }
  .pf-upsell__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .pf-upsell__list:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-upsell__item { grid-template-columns: none; grid-template-rows: auto 1fr auto; justify-items: center; align-items: start; gap: 6px; padding: 8px 6px; text-align: center; }
  .pf-upsell__media { width: 48px; height: 48px; }
  .pf-upsell__body { justify-items: center; }
  .pf-upsell__name { font-size: 12px; }
  .pf-upsell__price { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 4px; font-size: 12px; }
  .pf-upsell__add { width: 100%; min-width: 0; min-height: 36px; padding: 0 8px; font-size: 13px; }
  .pf-upsell__list:has(> :only-child) .pf-upsell__item { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-rows: none; justify-items: stretch; align-items: center; text-align: left; }
  .pf-upsell__list:has(> :only-child) .pf-upsell__body { justify-items: start; }
  .pf-upsell__list:has(> :only-child) .pf-upsell__price { justify-content: flex-start; }
  .pf-upsell__list:has(> :only-child) .pf-upsell__add { width: auto; padding: 0 16px; }
}

/* ---- designs/signature/components/footer.css ---- */
/* ==========================================================================
   Footer (chrome/footer.njk): night surface, inverted owner wordmark (CSS filter on the same PNG — no new logo),
   WhatsApp support card, four link columns (the contact column is PepFame's in brand builds), seller imprint line.
   ========================================================================== */
.site-footer { position: relative; margin-top: var(--pf-section); background: var(--pf-night); color: var(--pf-on-night); }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--pf-gold-rgb), 0.7), transparent); }
.site-footer__inner { max-width: var(--pf-container); margin: 0 auto; padding: clamp(48px, 7vw, 80px) var(--pf-gutter) calc(28px + var(--pf-safe-b)); }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 48px; }
.site-footer .wordmark__img { width: 150px; filter: invert(1) brightness(1.4); }
.site-footer .wordmark__img--on-dark { filter: none; } /* the owner's logo version for dark backgrounds (brand.js logoOnDark) */
.site-footer__tagline { margin: 14px 0 26px; max-width: 32ch; font-family: var(--pf-font-display); font-size: var(--pf-fs-xl); font-weight: 400; font-style: italic; color: var(--pf-on-night-2); }
.tg-card { display: inline-flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border: 1px solid var(--pf-night-line); border-radius: var(--pf-r-lg); background: var(--pf-night-2); color: var(--pf-on-night); transition: border-color var(--pf-dur-1) var(--pf-ease), transform var(--pf-dur-1) var(--pf-ease), background-color var(--pf-dur-1) var(--pf-ease); }
.tg-card:hover { border-color: rgba(245, 246, 248, 0.4); transform: translateY(-2px); background: var(--pf-night-3); }
.tg-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(37, 211, 102, 0.14); color: var(--pf-whatsapp); }
.tg-card__copy { display: grid; gap: 2px; }
.tg-card__title { font-size: var(--pf-fs-md); font-weight: 600; }
.tg-card__sub { font-family: var(--pf-font-mono); font-size: var(--pf-fs-xs); letter-spacing: 0.04em; color: var(--pf-on-night-2); }
.site-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.site-footer__label { margin-bottom: 14px; font-family: var(--pf-font-mono); font-size: var(--pf-fs-xs); font-weight: 500; letter-spacing: var(--pf-ls-caps); text-transform: uppercase; color: var(--pf-on-night-3); }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer__col a { display: inline-block; padding: 2px 0; color: var(--pf-on-night-2); font-size: var(--pf-fs-sm); transition: color var(--pf-dur-1) var(--pf-ease); overflow-wrap: anywhere; }
.site-footer__col a:hover { color: var(--pf-on-night); }
.site-footer__col--contact a { font-variant-numeric: tabular-nums; }
.pay-row { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--pf-night-line); }
.pay-marks { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-marks img { height: 30px; width: auto; border-radius: 4px; background: #fff; }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--pf-night-line); font-size: var(--pf-fs-xs); color: var(--pf-on-night-3); }
.site-footer__copy { flex: 1 1 260px; }
.site-footer__seller { flex-basis: 100%; order: 3; font-family: var(--pf-font-mono); letter-spacing: 0.02em; line-height: 1.6; }
/* data-source credit (design.json dataCredit — the country database's CC BY licence): last line, quiet but readable */
.site-footer__credit { flex-basis: 100%; order: 4; margin-top: -4px; }
.site-footer__credit a { color: var(--pf-on-night-3); text-decoration: underline; text-decoration-color: rgba(245, 246, 248, 0.25); text-underline-offset: 3px; transition: color var(--pf-dur-1) var(--pf-ease); }
.site-footer__credit a:hover { color: var(--pf-on-night); }
.site-footer__legal { display: flex; gap: 18px; }
.site-footer__legal a { color: var(--pf-on-night-2); } .site-footer__legal a:hover { color: var(--pf-on-night); }
/* the research-use statement: the footer's very last line, small and quiet but AA (--pf-on-night-3, about 5:1 on the night
   surface) — it replaces the grey strip above the footer (owner 2026-10-26) */
.site-footer__disclaimer { margin: 18px 0 0; font-size: var(--pf-fs-xs); line-height: 1.6; letter-spacing: 0.01em; color: var(--pf-on-night-3); }
@media (max-width: 1023px) {
  .site-footer__top { grid-template-columns: 1fr; gap: 40px; }
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .site-footer__cols { gap: 28px 16px; }
  .site-footer__col li.is-mobile-hidden { display: none; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .site-footer__copy { flex: none; } /* in the column layout the 260px basis became a 260px-tall empty block (owner 2026-10-16) */
  .tg-card { width: 100%; }
}

/* ---- designs/signature/components/header.css ---- */
/* ==========================================================================
   Header (chrome/header.njk + header-checkout.njk): sticky porcelain bar, centred menu, language + currency
   dropdowns, cart button (no customer-account control: PepFame has no customer accounts); ≤1023 px hamburger left /
   logo centred / cart right, and a slide-in sheet (modal: brand-js signature.js) with menu, language and currency pills.
   Structural hooks kept: [data-menu-toggle], [data-menu], .lang-dd/.lang-dd__toggle/.lang-dd__menu/.lang-dd__option,
   .cur-dd, .cur-pill[data-currency] (visible only in the sheet ≤1023 px), [data-cart-open], [data-cart-count].
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: var(--pf-z-header); background: rgba(var(--pf-white-rgb), 0.92); border-bottom: 1px solid var(--pf-line); transition: box-shadow var(--pf-dur-2) var(--pf-ease); }
@supports (backdrop-filter: blur(1px)) { @media (min-width: 1024px) { .site-header { backdrop-filter: saturate(1.4) blur(10px); } } }
html.is-scrolled .site-header { box-shadow: 0 8px 24px -16px rgba(var(--pf-ink-rgb), 0.22); }
.site-header__bar { height: var(--pf-header-h); }
.site-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; height: 100%; }

/* wordmark (owner logo PNG; keeps its own aspect from the img width/height attributes — brand.js) */
.wordmark { display: inline-flex; align-items: center; min-height: 44px; }
.wordmark__img { display: block; width: 190px; height: auto; } /* the "pepfame by cell mind" logo (owner 2026-10-25: "make it 190"); the header bar grows to fit */
.wordmark__a, .wordmark__b { font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }

/* menu (desktop row) */
.site-menu { justify-self: center; }
.site-menu__top { display: none; }
.site-menu__links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.site-menu__links a { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--pf-pill); color: var(--pf-ink-2); font-size: var(--pf-fs-sm); font-weight: 500; letter-spacing: 0.005em; transition: color var(--pf-dur-1) var(--pf-ease), background-color var(--pf-dur-1) var(--pf-ease); }
.site-menu__links a:hover { color: var(--pf-ink); background: var(--pf-surface-2); }
.site-menu__links a[aria-current="page"] { color: var(--pf-ink); font-weight: 600; }
.site-menu__links a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--pf-gold); }
.site-menu__lang, .site-menu__cur { display: none; }
.site-menu__close { display: none; }

/* actions */
.site-header__actions { display: flex; align-items: center; gap: 6px; }
.lang-dd { position: relative; }
.lang-dd__toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--pf-pill); background: transparent; color: var(--pf-ink-2); font-family: var(--pf-font-mono); font-size: var(--pf-fs-xs); font-weight: 500; letter-spacing: 0.08em; cursor: pointer; transition: background-color var(--pf-dur-1) var(--pf-ease), border-color var(--pf-dur-1) var(--pf-ease), color var(--pf-dur-1) var(--pf-ease); }
.lang-dd__toggle:hover, .lang-dd.is-open .lang-dd__toggle { background: var(--pf-surface-2); color: var(--pf-ink); }
.lang-dd__chevron { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--pf-dur-1) var(--pf-ease); }
.lang-dd.is-open .lang-dd__chevron { transform: translateY(1px) rotate(-135deg); }
.lang-dd__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 5; min-width: 180px; margin: 0; padding: 6px; list-style: none; background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-r-md); box-shadow: var(--pf-shadow-3); transform-origin: top right; animation: pf-dd-in var(--pf-dur-2) var(--pf-ease-out); }
@keyframes pf-dd-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.lang-dd__option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--pf-r-sm); background: none; color: var(--pf-ink-2); font-size: var(--pf-fs-sm); text-align: left; cursor: pointer; }
.lang-dd__option:hover { background: var(--pf-surface-2); color: var(--pf-ink); }
.lang-dd__option[aria-current="true"], .cur-dd__option[aria-checked="true"] { background: var(--pf-gold-50); color: var(--pf-gold-ink); font-weight: 600; }
.lang-dd__option[aria-current="true"]::after, .cur-dd__option[aria-checked="true"]::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--pf-gold-dark); }
.cur-dd__menu { min-width: 240px; }
.cur-dd__code { min-width: 38px; font-family: var(--pf-font-mono); font-size: var(--pf-fs-xs); letter-spacing: 0.08em; }
.cur-dd__name { color: var(--pf-ink-3); font-size: var(--pf-fs-sm); }
.cur-dd__option[aria-checked="true"] .cur-dd__name { color: inherit; }

/* cart button + count badge */
.cart-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: 4px; border: 1px solid var(--pf-line-strong); border-radius: 50%; background: var(--pf-surface); color: var(--pf-ink); cursor: pointer; transition: border-color var(--pf-dur-1) var(--pf-ease), transform var(--pf-dur-1) var(--pf-ease), background-color var(--pf-dur-1) var(--pf-ease); }
.cart-btn:hover { border-color: var(--pf-ink); }
.cart-btn[aria-expanded="true"] { background: var(--pf-ink); color: var(--pf-on-night); border-color: var(--pf-ink); }
.cart-btn__icon { display: inline-flex; }
.cart-btn__icon svg { width: 20px; height: 20px; }
.cart-btn__count { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--pf-pill); background: var(--pf-gold); color: var(--pf-on-gold); font-family: var(--pf-font-mono); font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px var(--pf-surface); }
.cart-btn__count[data-count="0"] { display: none; }
.cart-btn__count.is-pop { animation: pf-pop var(--pf-dur-3) var(--pf-ease-out); }
@keyframes pf-pop { 0% { transform: scale(0.6); } 55% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* hamburger */
.menu-toggle { display: none; position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.menu-toggle span { position: absolute; left: 12px; width: 20px; height: 2px; border-radius: 2px; background: var(--pf-ink); transition: transform var(--pf-dur-2) var(--pf-ease), opacity var(--pf-dur-1) var(--pf-ease); }
.menu-toggle span:nth-child(1) { top: 15px; } .menu-toggle span:nth-child(2) { top: 21px; } .menu-toggle span:nth-child(3) { top: 27px; }
body.is-menu-open .menu-toggle span:nth-child(1) { transform: translateY(6px) 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(-6px) rotate(-45deg); }
.menu-backdrop { display: none; }

/* checkout header variant */
.site-header--checkout .co-lock { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; padding: 0 12px; min-height: 40px; border-radius: var(--pf-pill); background: var(--pf-verdigris-50); color: var(--pf-verdigris-ink); font-size: var(--pf-fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--pf-font-mono); }
.site-header--checkout .co-icon svg { width: 14px; height: 14px; }
.co-progress { display: none; }

/* ---------- ≤1023 px: menu left / logo centred / cart right + slide-in sheet ----------
   Equal side columns keep the logo geometrically centred whatever the cart badge width; explicit placement because the
   DOM order is wordmark → toggle → (fixed) sheet → actions. Language + currency live in the sheet. */
@media (max-width: 1023px) {
  .site-header__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; padding-left: max(var(--pf-gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--pf-gutter), env(safe-area-inset-right, 0px)); }
  .menu-toggle { display: block; grid-column: 1; grid-row: 1; justify-self: start; margin-left: -10px; }
  .site-header__inner > .wordmark { grid-column: 2; grid-row: 1; justify-self: center; }
  .site-header__actions { grid-column: 3; grid-row: 1; justify-self: end; }
  .site-header__actions .lang-dd { display: none; }
  .site-menu { position: fixed; top: 0; left: 0; bottom: 0; z-index: calc(var(--pf-z-header) + 2); width: min(360px, 88vw); padding: 12px 20px calc(24px + var(--pf-safe-b)); overflow-y: auto; background: var(--pf-surface); box-shadow: var(--pf-shadow-3); transform: translateX(-104%); transition: transform var(--pf-dur-2) var(--pf-ease); display: flex; flex-direction: column; gap: 22px; justify-self: stretch; }
  body.is-menu-open .site-menu { transform: none; }
  .site-menu__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--pf-header-h); }
  .site-menu__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--pf-line); border-radius: 50%; background: var(--pf-surface); color: var(--pf-ink); cursor: pointer; }
  .site-menu__links { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-menu__links a { min-height: 52px; padding: 0 14px; border-radius: var(--pf-r-sm); font-family: var(--pf-font-display); font-size: 1.6rem; font-weight: 500; letter-spacing: -0.01em; color: var(--pf-ink); }
  .site-menu__links a[aria-current="page"]::after { left: 0; right: auto; top: 50%; bottom: auto; width: 4px; height: 22px; transform: translateY(-50%); }
  .site-menu__links a[aria-current="page"] { padding-left: 18px; }
  .site-menu__lang, .site-menu__cur { display: flex; flex-wrap: wrap; gap: 8px; }
  .site-menu__lang::before, .site-menu__cur::before { content: ""; flex-basis: 100%; height: 1px; background: var(--pf-line); margin-bottom: 4px; }
  .lang-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 40px; padding: 0 12px; border: 1px solid var(--pf-line-strong); border-radius: var(--pf-pill); background: var(--pf-surface); color: var(--pf-ink-2); font-family: var(--pf-font-mono); font-size: var(--pf-fs-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
  .lang-pill[aria-current="true"], .cur-pill[aria-pressed="true"] { background: var(--pf-ink); border-color: var(--pf-ink); color: var(--pf-on-night); }
  .menu-backdrop { position: fixed; inset: 0; z-index: calc(var(--pf-z-header) + 1); background: rgba(var(--pf-night-rgb), 0.45); opacity: 0; pointer-events: none; transition: opacity var(--pf-dur-2) var(--pf-ease); }
  body.is-menu-open .menu-backdrop { display: block; opacity: 1; pointer-events: auto; }
  .site-header--checkout .co-lock span:last-child { display: none; }
}
@media (max-width: 480px) {
  .wordmark__img { width: 120px; }
  .cart-btn { width: 42px; height: 42px; }
}

/* Design D3 (owner 2026-10-25): a small flag next to each language name — header dropdown and its toggle, the phone menu,
   the checkout's preferences (brand/lang-flags.njk: inline SVG symbols, decorative). Official proportions at 14 px high;
   in the dropdown every flag takes a 28 px slot so the names stay aligned. The phone menu shows flag + name in two
   columns (the names were screen-reader only there; the codes gave way to them). */
.pf-flag-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pf-flag { flex: none; display: block; width: auto; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(var(--pf-ink-rgb), 0.14); }
.lang-dd__option .pf-flag[width="21"] { margin-right: 7px; }
.lang-dd__option .pf-flag[width="23"] { margin-right: 5px; }
.lang-dd__option .pf-flag[width="27"] { margin-right: 1px; }
.lang-dd__toggle .pf-flag { height: 12px; }
.lang-pill--flag { display: inline-flex; align-items: center; justify-content: flex-start; gap: 9px; min-height: 40px; padding: 0 14px 0 12px; border: 1px solid var(--pf-line-strong); border-radius: var(--pf-pill); background: var(--pf-surface); color: var(--pf-ink-2); font-family: var(--pf-font); font-size: var(--pf-fs-sm); font-weight: 500; letter-spacing: 0; text-transform: none; text-decoration: none; }
.lang-pill--flag:hover { border-color: var(--pf-ink); color: var(--pf-ink); }
.lang-pill--flag[aria-current="true"] { background: var(--pf-ink); border-color: var(--pf-ink); color: var(--pf-on-night); }
.lang-pill--flag[aria-current="true"] .pf-flag { box-shadow: 0 0 0 1px rgba(var(--pf-white-rgb), 0.35); }
.lang-pill__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1023px) {
  .site-menu__lang--flags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .site-menu__lang--flags::before { grid-column: 1 / -1; }
}

/* ---- designs/signature/components/marquee.css ---- */
/* ==========================================================================
   Notice marquee directly below the navbar (brand/marquee.njk). Two identical tracks translate by their own width for a
   seamless loop (transform only). A real Pause/Resume button sits OUTSIDE the moving track (right end, visible on every
   width, ≥44 px hit area); pausing freezes the text where it is (animation-play-state, never a reset) until the visitor
   resumes — no resume on hover, scroll, focus or tab visibility. Motion starts only once brand JS has applied the
   remembered choice (.is-ready), so a stored pause never shows a jump. Off-screen it idles (.is-offscreen) without
   changing the chosen state. prefers-reduced-motion: static row (repeats hidden, scrollable) unless the visitor
   explicitly presses Play (.is-user-play).
   Strip height = 44 px (tokens.css --pf-marquee-h) so the control's touch target fits inside it.
   ========================================================================== */
.pf-marquee { position: relative; display: flex; align-items: center; height: var(--pf-marquee-h); background: var(--pf-surface-2); border-bottom: 1px solid var(--pf-line); }
.pf-marquee__viewport { flex: 1 1 auto; min-width: 0; display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
.pf-marquee__track { display: flex; flex: none; align-items: center; margin: 0; padding: 0; list-style: none; animation: pf-marquee 48s linear infinite; will-change: transform; }
.pf-marquee__item { display: inline-flex; align-items: center; gap: 10px; padding: 0 30px; font-family: var(--pf-font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--pf-ink-2); }
.pf-marquee__item::after { content: ""; display: inline-block; width: 4px; height: 4px; margin-left: 30px; border-radius: 50%; background: var(--pf-gold); }
.pf-marquee__icon { display: inline-flex; color: var(--pf-gold-ink); }
.pf-marquee__icon svg { width: 14px; height: 14px; }
.pf-marquee__text [data-pf-amount] { font-weight: 500; }
@keyframes pf-marquee { to { transform: translateX(-100%); } }
.pf-marquee:not(.is-ready) .pf-marquee__track, .pf-marquee.is-paused .pf-marquee__track, .pf-marquee.is-offscreen .pf-marquee__track { animation-play-state: paused; }

/* Pause / Resume control: outside the track, separated by a rule. The button is the full 44 px strip height (touch
   target); the visible pill inside shows an icon + short label (icon only ≤479 px). */
.pf-marquee__pause { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: var(--pf-marquee-h); margin: 0 max(4px, env(safe-area-inset-right, 0px)) 0 8px; padding: 0 4px; border: 0; border-radius: var(--pf-pill); background: transparent; color: var(--pf-ink); font-family: var(--pf-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.pf-marquee__pause::before { content: ""; position: absolute; left: -5px; top: 50%; width: 1px; height: 18px; transform: translateY(-50%); background: var(--pf-line-strong); pointer-events: none; }
.pf-marquee__pill { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 36px; height: 32px; padding: 0 12px; border: 1px solid var(--pf-line-strong); border-radius: var(--pf-pill); background: var(--pf-surface); transition: border-color var(--pf-dur-1) var(--pf-ease), background-color var(--pf-dur-1) var(--pf-ease); }
.pf-marquee__pause:hover .pf-marquee__pill { border-color: var(--pf-gold-dark); background: var(--pf-gold-50); }
.pf-marquee__pause:focus-visible { outline: none; }
.pf-marquee__pause:focus-visible .pf-marquee__pill { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.pf-marquee__ico { flex: none; width: 12px; height: 12px; color: var(--pf-gold-ink); }
.pf-marquee__ico--play { display: none; }
/* both short labels share one grid cell, so the control keeps the width of the longer one in every language */
.pf-marquee__short { display: inline-grid; }
.pf-marquee__short > * { grid-area: 1 / 1; }
.pf-marquee__short-resume, .pf-marquee.is-paused .pf-marquee__short-pause { visibility: hidden; }
.pf-marquee.is-paused .pf-marquee__short-resume { visibility: visible; }
.pf-marquee.is-paused .pf-marquee__ico--pause { display: none; }
.pf-marquee.is-paused .pf-marquee__ico--play { display: block; }
.pf-marquee.is-paused .pf-marquee__pill { border-color: var(--pf-gold-dark); }
@media (hover: hover) { .pf-marquee__viewport:hover .pf-marquee__track { animation-play-state: paused; } }

@media (prefers-reduced-motion: reduce) {
  .pf-marquee:not(.is-user-play) .pf-marquee__track { animation: none; }
  .pf-marquee:not(.is-user-play) .pf-marquee__track[aria-hidden="true"], .pf-marquee:not(.is-user-play) .pf-marquee__item[aria-hidden="true"] { display: none; }
  .pf-marquee:not(.is-user-play) .pf-marquee__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: none; }
  /* explicit Play only: beats the global reduced-motion animation reset in base.css */
  .pf-marquee.is-user-play .pf-marquee__track { animation-duration: 48s !important; animation-iteration-count: infinite !important; }
}
@media (max-width: 479px) {
  .pf-marquee__item { padding: 0 18px; font-size: 10.5px; letter-spacing: 0.1em; }
  .pf-marquee__item::after { margin-left: 18px; }
  .pf-marquee__track { animation-duration: 40s; }
  .pf-marquee__pause { width: 44px; padding: 0; }
  .pf-marquee__pill { width: 36px; padding: 0; }
  .pf-marquee__short { display: none; }
}

/* ---- designs/signature/components/offer.css ---- */
/* PepFame credit invitation and the "Account" link (brand-js/commerce/offer.js; Release B2a, RELEASE-B2-PLAN.md §5; text
   approved by the owner 2026-10-25). The header icon matches the cart button. The invitation itself (redesigned
   2026-10-25, docs/commerce/POPUP-REDESIGN.md) is the full-screen overlay further down. */
.acct-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: 4px; border: 1px solid var(--pf-line-strong); border-radius: 50%; background: var(--pf-surface); color: var(--pf-ink); transition: border-color var(--pf-dur-1) var(--pf-ease); }
.acct-btn:hover { border-color: var(--pf-ink); }
.acct-btn svg { width: 20px; height: 20px; }
.acct-btn:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.acct-btn[hidden], .site-footer__legal a[hidden] { display: none; }
/* The credit pill (Release B2b, owner 2026-10-25: "the navbar shows their PepFame credit balance next to the account
   (person) icon, on desktop and mobile"): icon + the AVAILABLE credit as one link to the account page. .pf-acct (set
   before first paint by prefs-boot.js from the pf_acct=1 hint) shows it with its space reserved, so the balance arriving
   moves nothing. USD: one line; another currency: "≈ €41.30" with "US$46.20" small beneath (account-pill.js). */
.acct-btn__icon { display: inline-flex; }
.acct-btn__credit { display: none; }
/* the link carries [hidden] until a script shows it; the site's [hidden] rule is !important, so the reservation is too */
.pf-acct .acct-btn, .pf-acct .acct-btn[hidden] { display: inline-flex !important; gap: 6px; width: auto; min-width: 44px; padding: 0 12px 0 11px; border-radius: var(--pf-pill); }
.pf-acct .acct-btn__credit { display: inline-flex; flex-direction: column; justify-content: center; min-width: 68px; font-size: 13px; line-height: 1.1; text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acct-btn__amount { font-size: 13px; font-weight: 600; color: var(--pf-ink); }
.acct-btn__usd { font-size: 10px; color: var(--pf-ink-3); }
.acct-btn__usd:empty { display: none; }
.acct-btn--negative .acct-btn__amount { color: var(--pf-ink-2); }
/* phones: the logo moves to the start while the pill shows, so menu · logo · pill + cart fit from 360 px (no overflow) */
@media (max-width: 480px) {
  .pf-acct .site-header__inner { grid-template-columns: auto auto minmax(0, 1fr); }
  .pf-acct .site-header__inner > .wordmark { justify-self: start; }
  .pf-acct .acct-btn { height: 42px; padding: 0 10px 0 9px; gap: 5px; }
  .pf-acct .acct-btn__credit { min-width: 62px; }
  .acct-btn__amount { font-size: 12.5px; }
}

/* ---- the credit invitation: a full-screen overlay (owner 2026-10-25, docs/commerce/POPUP-REDESIGN.md) ----
   Fixed over the whole viewport on every screen size: a dimmed, blurred night backdrop and a centred night panel in the
   hero's language (gold glow, display serif title, gold button with ink text). It always fits one screen: the panel is
   never taller than the viewport, type and spacing scale with clamp() on the width AND the (small) viewport height, no
   text below 14 px; overflow: auto is only a safety net — the browser suite asserts scrollHeight = clientHeight from
   320 × 568 to 1440 × 900 (and 320 × 460) in every visible language (the ten since deploy 4). The × is 44 × 44. Entrance ≤ 450 ms (panel scale + fade, backdrop fade);
   the title's "10%" (span .pf-offer__ten, offer.js) gets a gold sheen and an underline that draws in; the text is on the
   panel from its first frame. "Reduce motion": no animation at all. Above the drawer, the menu and the cookie bar (it
   never opens while one of them is open). While open the page behind does not scroll (html.pf-offer-open); a classic
   scrollbar's width comes back as padding (--pf-offer-sb, set by offer.js only when there is one), so nothing behind it
   moves: the in-flow page keeps its width, the product page's fixed bar keeps its right edge, the WhatsApp button hides
   as it does under the drawer and the menu. */
html.pf-offer-open { overflow: hidden; padding-right: var(--pf-offer-sb, 0px); }
html.pf-offer-open .support-float { visibility: hidden; }
html.pf-offer-open .pdp-sticky { right: var(--pf-offer-sb, 0px); }
html.pf-offer-open .toast { margin-left: calc(var(--pf-offer-sb, 0px) / -2); }
.pf-offer {
  --o-pad: clamp(8px, 2.6vw, 32px);
  position: fixed; inset: 0; z-index: calc(var(--pf-z-dialog) + 50);
  display: flex; align-items: center; justify-content: center;
  padding: max(var(--o-pad), env(safe-area-inset-top, 0px)) max(var(--o-pad), env(safe-area-inset-right, 0px)) max(var(--o-pad), env(safe-area-inset-bottom, 0px)) max(var(--o-pad), env(safe-area-inset-left, 0px));
  overscroll-behavior: contain;
}
.pf-offer.is-leaving { pointer-events: none; }
.pf-offer__backdrop { position: absolute; inset: 0; background: rgba(var(--pf-night-rgb), 0.66); -webkit-backdrop-filter: blur(8px) saturate(1.15); backdrop-filter: blur(8px) saturate(1.15); }
.pf-offer__panel {
  --o-px: clamp(16px, 4.2vw, 48px);
  --o-pt: clamp(18px, 4.6vh, 48px); --o-pt: clamp(18px, 4.6svh, 48px);
  --o-pb: clamp(12px, 3vh, 36px); --o-pb: clamp(12px, 3svh, 36px);
  --o-gap: clamp(10px, 1.9vh, 18px); --o-gap: clamp(10px, 1.9svh, 18px);
  --o-close: clamp(8px, 1.6vh, 16px); --o-close: clamp(8px, 1.6svh, 16px);
  position: relative; box-sizing: border-box; width: min(580px, 100%); max-height: 100%; overflow: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--o-gap);
  padding: var(--o-pt) var(--o-px) var(--o-pb);
  border: 1px solid rgba(var(--pf-gold-rgb), 0.34); border-radius: clamp(20px, 3vw, 32px);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(var(--pf-gold-rgb), 0.26) 0%, transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(var(--pf-verdigris-rgb), 0.1) 0%, transparent 60%),
    linear-gradient(180deg, var(--pf-night-2) 0%, var(--pf-night) 100%);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--pf-on-night-2); line-height: 1.5; text-align: left; outline: none;
  font-size: clamp(14px, min(10px + 1.4vw, 2.2vh + 2px), 17px); font-size: clamp(14px, min(10px + 1.4vw, 2.2svh + 2px), 17px);
}
.pf-offer__close { position: absolute; z-index: 1; top: var(--o-close); right: clamp(8px, 1.6vw, 16px); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(245, 246, 248, 0.32); border-radius: 50%; background: rgba(255, 255, 255, 0.07); color: var(--pf-on-night); cursor: pointer; transition: background-color var(--pf-dur-1) var(--pf-ease), border-color var(--pf-dur-1) var(--pf-ease); }
.pf-offer__close:hover { background: rgba(255, 255, 255, 0.16); border-color: var(--pf-on-night); }
.pf-offer__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; color: var(--pf-gold); background: radial-gradient(circle at 30% 25%, rgba(var(--pf-gold-rgb), 0.34), rgba(var(--pf-gold-rgb), 0.08) 70%); box-shadow: inset 0 0 0 1px rgba(var(--pf-gold-rgb), 0.55), 0 0 0 6px rgba(var(--pf-gold-rgb), 0.08); }
.pf-offer__mark svg { width: 26px; height: 26px; }
.pf-offer__title { margin: 0; font-family: var(--pf-font-display); font-weight: 500; line-height: 1.1; letter-spacing: -0.018em; color: var(--pf-on-night); text-wrap: balance; overflow-wrap: anywhere;
  font-size: clamp(22px, min(14px + 3.4vw, 5.4vh), 40px); font-size: clamp(22px, min(14px + 3.4vw, 5.4svh), 40px); }
.pf-offer__body { margin: 0; color: rgba(245, 246, 248, 0.88); text-wrap: pretty; }
.pf-offer__fine { margin: 0; padding-top: var(--o-gap); border-top: 1px solid var(--pf-night-line); line-height: 1.45; color: rgba(245, 246, 248, 0.68); text-wrap: pretty;
  font-size: clamp(14px, min(9.5px + 1.05vw, 1.9vh + 2px), 15px); font-size: clamp(14px, min(9.5px + 1.05vw, 1.9svh + 2px), 15px); }
/* "10%" / "10 %" of the approved text (offer.js wraps it; the characters are unchanged) */
.pf-offer__ten { white-space: nowrap; color: var(--pf-gold); font-weight: 600; }
.pf-offer__title .pf-offer__ten { position: relative; display: inline-block; font-style: italic; font-weight: 500; padding-right: 0.05em; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .pf-offer__title .pf-offer__ten { background: linear-gradient(100deg, var(--pf-gold) 0%, var(--pf-gold) 36%, #fff3cf 46%, #fffdf6 50%, #fff3cf 54%, var(--pf-gold) 64%, var(--pf-gold) 100%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
.pf-offer__title .pf-offer__ten::after { content: ""; position: absolute; left: 0.02em; right: 0.08em; bottom: -0.02em; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--pf-gold), rgba(var(--pf-gold-rgb), 0.2)); transform-origin: left center; }
/* the two buttons side by side when each gets 200 px, else stacked; "Not now" centred on its own row below */
.pf-offer__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.pf-offer__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 6px 20px; border: 1.5px solid var(--pf-gold); border-radius: var(--pf-pill); background: var(--pf-gold); color: var(--pf-on-gold); font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; transition: background-color var(--pf-dur-1) var(--pf-ease), border-color var(--pf-dur-1) var(--pf-ease), color var(--pf-dur-1) var(--pf-ease); }
.pf-offer__btn:hover { background: #fff; border-color: #fff; color: var(--pf-night); }
.pf-offer__btn--ghost { background: transparent; border-color: rgba(245, 246, 248, 0.36); color: var(--pf-on-night); }
.pf-offer__btn--ghost:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--pf-on-night); color: var(--pf-on-night); }
.pf-offer__later { grid-column: 1 / -1; justify-self: center; min-height: 44px; margin-top: -4px; padding: 0 16px; border: 0; background: none; color: var(--pf-on-night-2); font: inherit; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pf-offer__later:hover { color: var(--pf-on-night); }
.pf-offer__close:focus-visible, .pf-offer__btn:focus-visible, .pf-offer__later:focus-visible { outline: 2px solid var(--pf-gold); outline-offset: 3px; }
@media (min-width: 720px) and (min-height: 640px) { .pf-offer__btn { min-height: 50px; font-size: 16px; } }
/* short screens (small phones, landscape): the decorative mark gives its row to the text; the title clears the × (beside
   it, and below it: the body never runs under the ×) */
@media (max-height: 699.98px) { .pf-offer__mark { display: none; } .pf-offer__title { padding-right: 42px; min-height: calc(44px + var(--o-close) - var(--o-pt)); } }
/* very short screens (a small phone's visible area with the browser bars, e.g. 320 × 460; landscape phones): tighter
   spacing and lines, the fine print without its rule — the text sizes stay (body and fine print 14 px) */
@media (max-height: 520px) {
  .pf-offer__panel { --o-pt: 10px; --o-pb: 6px; --o-gap: 7px; line-height: 1.4; }
  .pf-offer__title { font-size: 22px; line-height: 1.05; }
  .pf-offer__fine { padding-top: 0; border-top: 0; line-height: 1.34; }
  .pf-offer__actions { gap: 7px; }
  .pf-offer__btn { min-height: 44px; }
}
/* very short AND narrow (a small phone portrait with the browser bars, 320 × 460): the longest translations (Portuguese,
   Russian: 451 px of text and buttons in a 441 px panel) still fit — a thinner margin around the panel, smaller gaps and
   lines; text sizes and 44 px targets unchanged; landscape phones are not affected */
@media (max-height: 480px) and (max-width: 360px) {
  .pf-offer { --o-pad: 4px; }
  .pf-offer__panel { --o-gap: 6px; line-height: 1.36; }
  .pf-offer__fine { line-height: 1.3; }
}
/* short and wide (landscape phones): both buttons and "Not now" on one row */
@media (max-height: 520px) and (min-width: 540px) {
  .pf-offer__actions { grid-template-columns: 1fr 1fr auto; }
  .pf-offer__later { grid-column: auto; margin-top: 0; }
}
/* entrance (≤ 450 ms) and the highlight; leaving: a 180 ms fade */
.pf-offer.is-in .pf-offer__backdrop { animation: pf-offer-fade 300ms var(--pf-ease) both; }
.pf-offer.is-in .pf-offer__panel { animation: pf-offer-in 420ms var(--pf-ease-out) both; }
.pf-offer.is-in .pf-offer__mark { animation: pf-offer-pop 340ms var(--pf-ease-out) 100ms both; }
.pf-offer.is-in .pf-offer__title .pf-offer__ten::after { animation: pf-offer-line 330ms var(--pf-ease-out) 120ms both; }
.pf-offer.is-in .pf-offer__title .pf-offer__ten { animation: pf-offer-sheen 2600ms ease-in-out 300ms 3 both; }
.pf-offer.is-leaving .pf-offer__backdrop, .pf-offer.is-leaving .pf-offer__panel { animation: pf-offer-out 180ms var(--pf-ease) both; }
@keyframes pf-offer-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pf-offer-in { 0% { opacity: 0; transform: translateY(14px) scale(0.94); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes pf-offer-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes pf-offer-line { from { opacity: 0.2; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes pf-offer-sheen { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0% 0; } }
@keyframes pf-offer-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pf-offer .pf-offer__backdrop, .pf-offer .pf-offer__panel, .pf-offer .pf-offer__mark, .pf-offer .pf-offer__ten, .pf-offer .pf-offer__ten::after { animation: none !important; }
  .pf-offer__close, .pf-offer__btn { transition: none; }
}

/* ---- designs/signature/components/offers.css ---- */
/* ==========================================================================
   Quantity offers (owner layout 2026-10-17) — shared by the product page (brand/bundle.njk) and the one-page checkout
   (brand/checkout.njk, owner 2026-10-18): the same 1/2/3 cards + 5/10 wide boxes, badges, saving and free-shipping tag.
   ========================================================================== */
/* quantity offers (owner layout 2026-10-17): 1 / 2 / 3 vials as small cards side by side, the larger quantities (5, 10;
   design.json offers.wideFromQty) as wide boxes stacked under them. Card: vial icons, quantity, total, price per vial,
   "Save …" + the % tag, free-shipping tag. Wide box: the same parts with an icon for every vial and the total on the
   right. The DOM order is the same for both; the grid areas place the parts. */
.pdp-bundle__tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* bundles (Release A2, owner 2026-10-24): 1 vial and 2 + 1 free as two cards side by side, 3 + 2 free as the wide box
   under them; the deal name, the bundle's full price crossed out (or the single vial's original price) and the saving
   as a pill, so the saving reads at a glance */
.pdp-bundle__tiers--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pdp-tier { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; align-items: center; column-gap: 6px; row-gap: 3px; padding: 14px 12px 12px; border: 1px solid var(--pf-line-strong); border-radius: var(--pf-r-lg); background: var(--pf-bg); color: var(--pf-ink); text-align: left; cursor: pointer; transition: border-color var(--pf-dur-1) var(--pf-ease), box-shadow var(--pf-dur-2) var(--pf-ease), transform var(--pf-dur-1) var(--pf-ease), background-color var(--pf-dur-1) var(--pf-ease); }
.pdp-tier--card { grid-template-areas: "vials vials" "qty qty" "deal deal" "price was" "per per" "save pct" "ship ship"; }
.pdp-tier--wide { grid-column: 1 / -1; grid-template-areas: "vials vials" "qty price" "deal was" "per save" "ship pct"; column-gap: 14px; row-gap: 4px; padding: 16px 16px 14px; margin-top: 6px; }
.pdp-tier__deal { grid-area: deal; justify-self: start; padding: 2px 8px; border-radius: var(--pf-pill); background: var(--pf-gold-50); color: var(--pf-gold-ink); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pdp-tier__was { grid-area: was; justify-self: end; align-self: center; color: var(--pf-ink-3); font-size: var(--pf-fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pdp-tier:hover { border-color: var(--pf-ink); }
.pdp-tier:active { transform: scale(0.985); }
.pdp-tier.is-active { border-color: var(--pf-gold-dark); background: var(--pf-surface); box-shadow: 0 0 0 1px var(--pf-gold-dark), var(--pf-ring); }
.pdp-tier.is-active::after { content: ""; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--pf-gold) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='%230e1116' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 6 5 9 10 3'/%3E%3C/svg%3E") center / 10px no-repeat; animation: pf-pop var(--pf-dur-2) var(--pf-ease-out); }
.pdp-tier__badge { position: absolute; top: -10px; left: 12px; padding: 3px 9px; border-radius: var(--pf-pill); background: var(--pf-ink); color: var(--pf-on-night); font-family: var(--pf-font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.pdp-tier__badge--popular { background: var(--pf-gold); color: var(--pf-on-gold); }
.pdp-tier__badge--best { background: var(--pf-verdigris-ink); color: #fff; }
.pdp-tier__vials { grid-area: vials; display: flex; height: 36px; margin: 2px 0 4px; }
.pdp-tier__vials img { width: 36px; height: 36px; object-fit: contain; mix-blend-mode: multiply; }
.pdp-tier--card .pdp-tier__vials img + img { margin-left: -12px; }
.pdp-tier--wide .pdp-tier__vials img + img { margin-left: -14px; }
.pdp-tier__qtyline { grid-area: qty; display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.pdp-tier__qty { font-family: var(--pf-font-display); font-size: 1.6rem; font-weight: 500; line-height: 1; }
.pdp-tier__unit { font-family: var(--pf-font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pf-ink-3); }
.pdp-tier__price { grid-area: price; font-size: var(--pf-fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.pdp-tier__per { grid-area: per; font-size: var(--pf-fs-xs); color: var(--pf-ink-3); font-variant-numeric: tabular-nums; }
.pdp-tier__save { grid-area: save; justify-self: start; padding: 2px 8px; border-radius: var(--pf-pill); background: var(--pf-verdigris-50); font-size: var(--pf-fs-sm); font-weight: 700; color: var(--pf-verdigris-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pdp-tier__pct { grid-area: pct; justify-self: end; padding: 2px 6px; border-radius: var(--pf-pill); background: var(--pf-surface-2); color: var(--pf-ink-3); font-family: var(--pf-font-mono); font-size: 10.5px; white-space: nowrap; }
.pdp-tier--wide .pdp-tier__price { justify-self: end; font-size: 1.3rem; }
.pdp-tier--wide .pdp-tier__save { justify-self: end; }
.pdp-tier--wide .pdp-tier__pct { padding: 3px 9px; background: var(--pf-verdigris-50); color: var(--pf-verdigris-ink); font-family: var(--pf-font); font-size: 12px; font-weight: 700; }
.pdp-tier__ship { grid-area: ship; display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--pf-verdigris-ink); transform-origin: left center; }
.pdp-tier__ship-icon { position: relative; display: inline-grid; place-items: center; --pf-spark: -20px; }
.pdp-tier.is-celebrating .pdp-tier__ship { animation: pf-tier-ship 700ms var(--pf-ease-out); }
.pdp-tier.is-celebrating .pdp-tier__ship-icon .pf-unlock__burst i { animation: pf-unlock-spark 760ms var(--pf-ease-out) 60ms both; }
@keyframes pf-tier-ship { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
.pdp-tier--popular:not(.is-active) { border-color: var(--pf-gold); }
.pdp-tier--best:not(.is-active) { border-color: rgba(var(--pf-verdigris-rgb), 0.55); }
@media (max-width: 767px) {
  .pdp-bundle__tiers { gap: 11px; }
  .pdp-bundle__tiers { gap: 8px; }
  .pdp-tier { padding: 12px 10px 10px; }
  .pdp-tier--card { grid-template-areas: "vials vials" "qty qty" "deal deal" "price price" "was was" "per per" "save save" "pct pct" "ship ship"; }
  .pdp-tier--card .pdp-tier__was { justify-self: start; }
  .pdp-tier--card .pdp-tier__pct { justify-self: start; margin-top: 2px; }
  .pdp-tier--wide { padding: 14px 14px 12px; }
  .pdp-tier.is-active::after { top: 8px; right: 8px; width: 16px; height: 16px; background-size: 9px; }
  .pdp-tier__qty { font-size: 1.4rem; }
  .pdp-tier__price { font-size: var(--pf-fs-md); }
  .pdp-tier--wide .pdp-tier__price { font-size: 1.2rem; }
  .pdp-tier__per { font-size: 11px; }
  .pdp-tier__save { font-size: 12px; }
  .pdp-tier__vials { height: 30px; }
  .pdp-tier__vials img { width: 30px; height: 30px; }
  .pdp-tier--card .pdp-tier__vials img + img { margin-left: -10px; }
  .pdp-tier--wide .pdp-tier__vials img + img { margin-left: -12px; }
}
/* small phones: the saving ("Économisez 199,95 $US", "Sie sparen 284,95 AU$") may wrap inside its card — on one line it
   was wider than the card at 320 px and made the whole product page scroll sideways (the amount itself never splits) */
@media (max-width: 400px) { .pdp-tier__save { white-space: normal; } }
@media (max-width: 360px) {
  .pdp-bundle__tiers { gap: 6px; }
  .pdp-tier--card { padding: 10px 8px 9px; }
  .pdp-tier__vials img { width: 26px; height: 26px; }
  .pdp-tier--card .pdp-tier__vials img + img { margin-left: -9px; }
  .pdp-tier--wide .pdp-tier__vials img + img { margin-left: -11px; }
}
@media (prefers-reduced-motion: reduce) { .pdp-tier.is-active::after, .pdp-tier.is-celebrating .pdp-tier__ship, .pdp-tier.is-celebrating .pdp-tier__ship-icon .pf-unlock__burst i { animation: none; } }

/* ---- designs/signature/components/overlays.css ---- */
/* ==========================================================================
   Overlays: certificate (COA) dialog, product image lightbox.
   ========================================================================== */
/* ---- COA dialog (chrome/overlays.njk, core/coa.js) ---- */
.coa-dialog { position: fixed; inset: 0; z-index: var(--pf-z-dialog); display: grid; place-items: center; padding: 16px; }
.coa-dialog__backdrop { position: absolute; inset: 0; background: rgba(var(--pf-night-rgb), 0.55); }
.coa-dialog__box { position: relative; display: flex; flex-direction: column; width: min(760px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); background: var(--pf-surface); border-radius: var(--pf-r-xl); box-shadow: var(--pf-shadow-3); overflow: hidden; outline: none; animation: pf-dialog-in var(--pf-dur-2) var(--pf-ease-out); }
@keyframes pf-dialog-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.coa-dialog__header { position: relative; padding: 22px 64px 18px 24px; border-bottom: 1px solid var(--pf-line); }
.coa-dialog__badge { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 4px 10px; border-radius: var(--pf-pill); background: var(--pf-verdigris-50); color: var(--pf-verdigris-ink); font-family: var(--pf-font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.coa-dialog__close { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--pf-line); border-radius: 50%; background: var(--pf-surface); color: var(--pf-ink); font-size: 22px; line-height: 1; cursor: pointer; }
.coa-dialog__heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; }
.coa-dialog__title { font-family: var(--pf-font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; }
.coa-dialog__meta { margin-top: 4px; font-family: var(--pf-font-mono); font-size: var(--pf-fs-xs); color: var(--pf-ink-3); }
.coa-dialog__purity { text-align: right; }
.coa-dialog__purity-val { font-family: var(--pf-font-display); font-size: 1.8rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1; color: var(--pf-ink); }
.coa-dialog__purity-lbl { font-family: var(--pf-font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pf-ink-3); }
.coa-dialog__doc { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--pf-surface-2); display: grid; place-items: start center; padding: 16px; }
.coa-dialog__doc img { width: 100%; height: auto; border-radius: var(--pf-r-sm); box-shadow: var(--pf-shadow-2); }
.coa-dialog__empty { padding: 48px 16px; text-align: center; color: var(--pf-ink-3); }
.coa-dialog__pdf { margin: 24px auto; }
.coa-dialog__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 24px calc(14px + var(--pf-safe-b)); border-top: 1px solid var(--pf-line); font-size: var(--pf-fs-sm); }
.coa-dialog__chips { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.coa-dialog__chips > * { padding: 4px 10px; border-radius: var(--pf-pill); background: var(--pf-surface-2); font-family: var(--pf-font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--pf-ink-2); }
.coa-dialog__task { display: inline-flex; gap: 8px; color: var(--pf-ink-3); }
.coa-dialog__code { font-family: var(--pf-font-mono); font-size: var(--pf-fs-sm); color: var(--pf-ink); letter-spacing: 0.04em; }
.coa-dialog__verify { color: var(--pf-ink-3); }
.coa-dialog__verify-short { display: none; }
.coa-dialog__key { padding: 6px 10px; border: 1px dashed var(--pf-line-strong); border-radius: var(--pf-r-xs); background: var(--pf-bg); }
.coa-dialog__copy { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; margin-left: auto; border: 1px solid var(--pf-line-strong); border-radius: var(--pf-pill); background: var(--pf-surface); color: var(--pf-ink); font-size: var(--pf-fs-xs); font-weight: 600; cursor: pointer; }
.coa-dialog__copy:hover { border-color: var(--pf-ink); }
@media (max-width: 640px) { .coa-dialog { padding: 0; } .coa-dialog__box { max-height: 100vh; max-height: 100dvh; border-radius: 0; } .coa-dialog__verify-long { display: none; } .coa-dialog__verify-short { display: inline; } .coa-dialog__header { padding: 18px 60px 14px 18px; } .coa-dialog__footer { padding-inline: 18px; } }

/* ---- product lightbox (templates/product/overlays.njk, pages/product.js) ---- */
.pdp-lightbox { position: fixed; inset: 0; z-index: var(--pf-z-dialog); display: grid; place-items: center; }
.pdp-lightbox__backdrop { position: absolute; inset: 0; background: rgba(var(--pf-night-rgb), 0.86); }
.pdp-lightbox__stage { position: relative; display: grid; place-items: center; width: min(92vw, 1100px); height: min(88vh, 1100px); }
.pdp-lightbox__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--pf-r-lg); background: #fff; animation: pf-dialog-in var(--pf-dur-2) var(--pf-ease-out); }
.pdp-lightbox__btn { position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid rgba(245, 246, 248, 0.3); border-radius: 50%; background: rgba(var(--pf-night-rgb), 0.6); color: var(--pf-on-night); font-size: 26px; line-height: 1; cursor: pointer; }
.pdp-lightbox__btn:hover { background: var(--pf-night-2); }
.pdp-lightbox__close { top: 16px; right: 16px; }
.pdp-lightbox__nav--prev { left: 16px; top: 50%; transform: translateY(-50%); }
.pdp-lightbox__nav--next { right: 16px; top: 50%; transform: translateY(-50%); }
.pdp-lightbox__counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: var(--pf-on-night-2); font-family: var(--pf-font-mono); font-size: var(--pf-fs-xs); }

@media (prefers-reduced-motion: reduce) { .coa-dialog__box, .pdp-lightbox__stage img { animation: none; } }

/* ---- designs/signature/components/product-card.css ---- */
/* ==========================================================================
   Product card (components/product-card.njk: shop grid, home bestsellers, related products).
   Hooks kept: article.product-card[data-product][data-cat], a.product-card__link (class first), .product-card__media img,
   .product-card__stock--(in|out|pending), .product-card__coa-btn[data-coa] / .is-static, .product-card__price with
   [data-pf-amount] spans or .product-card__pending, .product-card__btn[data-add-to-cart][data-qty].
   ========================================================================== */
.product-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-r-lg); box-shadow: var(--pf-shadow-1); transition: transform var(--pf-dur-2) var(--pf-ease), box-shadow var(--pf-dur-2) var(--pf-ease), border-color var(--pf-dur-2) var(--pf-ease); }
@media (hover: hover) { .product-card:hover { transform: translateY(-3px); box-shadow: var(--pf-shadow-2); border-color: var(--pf-line-strong); } }
.product-card:focus-within { border-color: var(--pf-gold-dark); }
.product-card__link { display: block; color: inherit; border-radius: var(--pf-r-lg) var(--pf-r-lg) 0 0; }
.product-card__link:focus-visible { outline-offset: -3px; }
.product-card__media { position: relative; aspect-ratio: 1 / 1; margin: 10px 10px 0; border-radius: var(--pf-r-md); overflow: hidden; background: radial-gradient(110% 80% at 50% 15%, #ffffff 0%, var(--pf-plate) 55%, var(--pf-surface-2) 100%); }
.product-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; transition: transform var(--pf-dur-3) var(--pf-ease); }
@media (hover: hover) { .product-card:hover .product-card__media img { transform: scale(1.04); } }
.product-card__badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.product-card__stock { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--pf-pill); background: rgba(var(--pf-white-rgb), 0.86); color: var(--pf-ink-2); font-family: var(--pf-font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.product-card__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pf-verdigris); }
.product-card__stock--out .product-card__dot { background: var(--pf-bad); }
.product-card__stock--pending .product-card__dot { background: var(--pf-ink-4); }
.product-card__body { padding: 14px 16px 4px; }
.product-card__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.product-card__title { font-family: var(--pf-font-display); font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; color: var(--pf-ink); }
.product-card__dose { font-family: var(--pf-font-mono); font-size: var(--pf-fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pf-ink-3); }
.product-card__dose:empty::before { content: "\00a0"; }
.product-card__coa { padding: 6px 16px 0; }
.product-card__coa-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--pf-line); border-radius: var(--pf-pill); background: var(--pf-surface); color: var(--pf-ink-2); font-size: var(--pf-fs-xs); font-weight: 500; cursor: pointer; transition: border-color var(--pf-dur-1) var(--pf-ease), color var(--pf-dur-1) var(--pf-ease); }
.product-card__coa-btn:hover { border-color: var(--pf-ink); color: var(--pf-ink); }
.product-card__coa-btn.is-static { color: var(--pf-ink-4); cursor: default; border-style: dashed; }
.product-card__coa-btn svg { width: 13px; height: 13px; }
.product-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding: 12px 16px 16px; }
.product-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: var(--pf-fs-lg); font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.product-card__price del { font-size: var(--pf-fs-sm); font-weight: 400; color: var(--pf-ink-4); }
.product-card__price ins { text-decoration: none; }
.product-card__pending { font-size: var(--pf-fs-sm); font-weight: 500; color: var(--pf-ink-3); }
.product-card__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--pf-ink); border-radius: var(--pf-pill); background: var(--pf-ink); color: var(--pf-on-night); font-size: var(--pf-fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color var(--pf-dur-1) var(--pf-ease), border-color var(--pf-dur-1) var(--pf-ease), transform var(--pf-dur-1) var(--pf-ease); }
.product-card__btn:hover { background: var(--pf-gold); border-color: var(--pf-gold); color: var(--pf-on-gold); }
.product-card__btn:active { transform: translateY(1px); }
a.product-card__btn { background: transparent; color: var(--pf-ink); }
a.product-card__btn:hover { background: var(--pf-ink); color: var(--pf-on-night); }
.product-card.is-out-of-stock .product-card__media img { opacity: 0.7; }
/* shop grid fillers (empty cells) */
.shop-grid__filler { visibility: hidden; border: 0; box-shadow: none; }
@media (max-width: 767px) {
  .product-card__media { margin: 8px 8px 0; }
  .product-card__body { padding: 10px 12px 2px; }
  .product-card__title { font-size: 1.15rem; }
  .product-card__coa { padding: 4px 12px 0; }
  .product-card__footer { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px 12px; }
  .product-card__btn { width: 100%; }
  .product-card__price { font-size: var(--pf-fs-md); }
}

/* ---- designs/signature/components/reviews-faq.css ---- */
/* ==========================================================================
   Reviews & FAQ block (components/reviews-faq.njk, review-card.njk, faq-tabs.njk, page-intro.njk).
   Slider contract (core/reviews-faq.js): --rf-per on .rf-slider (4 / 2 / 1 cards per view), .rf-slider__slide flex
   basis = 100% / --rf-per with inner padding as the gap, .rf-slider__track transition on transform, .is-dragging,
   .is-clone slides, .rf-dots children .is-active. FAQ: .faq__tab.is-active, .faq__panel.is-active, .faq__item.is-open.
   Inherited review content is listed in docs/LAUNCH-CONTENT-REGISTER.md; this file only styles it.
   ========================================================================== */
/* ---- page intro (about, faq, reviews, research) ---- */
.page-intro { padding: clamp(24px, 4vw, 48px) 0 clamp(20px, 3vw, 36px); }
.page-intro__copy { max-width: 56ch; }
.page-intro__title { font-size: var(--pf-fs-h1); margin-bottom: 14px; }
.page-intro__lead { font-size: var(--pf-fs-lg); line-height: 1.55; color: var(--pf-ink-2); text-wrap: pretty; }

/* ---- block frame ---- */
.rf-band { margin-top: var(--pf-section); padding: var(--pf-section) 0; background: var(--pf-surface); border-top: 1px solid var(--pf-line); }
.rf-band__inner { max-width: var(--pf-container); margin: 0 auto; padding: 0 var(--pf-gutter); }
/* The block sits below the fold on every template that includes it. Skipping its layout and paint until it nears the viewport also
   defers the latin-ext font subsets that only the original-language review texts need (85 KB + 13 KB on English pages). */
.rf { content-visibility: auto; contain-intrinsic-size: auto 1100px; }
.rf--product { margin-top: var(--pf-section); }
.rf__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: 28px; }
.rf__aside { display: flex; align-items: center; gap: 12px 20px; }
.rf-trust { display: grid; gap: 2px; }
.rf-trust__row { display: inline-flex; align-items: center; gap: 8px; }
.rf-trust__stars { display: inline-flex; gap: 2px; color: var(--pf-ink); }
.rf-trust__stars svg { width: 13px; height: 13px; }
.rf-trust__rating { font-weight: 600; }
.rf-trust__sub { font-size: var(--pf-fs-xs); color: var(--pf-ink-3); }
.rf__all { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--pf-line-strong); border-radius: var(--pf-pill); font-size: var(--pf-fs-sm); font-weight: 600; }
.rf__all:hover { border-color: var(--pf-ink); }

/* ---- slider ---- */
.rf-slider { --rf-per: 4; --rf-gap: 10px; }
.rf-slider__viewport { max-width: 100%; margin: 0 calc(-1 * var(--rf-gap)); overflow: hidden; touch-action: pan-y; }
.rf-slider__track { display: flex; align-items: stretch; transition: transform var(--pf-dur-3) var(--pf-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 var(--rf-gap); }
.rf__bar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 18px; }
.rf-nav { display: flex; gap: 8px; }
.rf-nav__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--pf-line-strong); border-radius: 50%; background: var(--pf-surface); color: var(--pf-ink); cursor: pointer; transition: border-color var(--pf-dur-1) var(--pf-ease), background-color var(--pf-dur-1) var(--pf-ease); }
.rf-nav__btn:hover:not(:disabled) { border-color: var(--pf-ink); }
.rf-nav__btn:disabled { color: var(--pf-ink-4); cursor: not-allowed; }
.rf-nav__btn svg { width: 14px; height: 14px; }
.rf-dots { display: none; justify-content: center; gap: 6px; margin-top: 14px; }
.rf-dots > * { width: 6px; height: 6px; border-radius: 50%; background: var(--pf-line-strong); border: 0; padding: 0; }
.rf-dots > .is-active { background: var(--pf-ink); width: 18px; border-radius: var(--pf-pill); }
@media (max-width: 1100px) { .rf-slider { --rf-per: 2; } }
@media (max-width: 768px) { .rf-slider { --rf-per: 1; } .rf-dots { display: flex; } .rf__bar { justify-content: center; } }

/* ---- review card ---- */
.review-card { content-visibility: auto; contain-intrinsic-size: auto 420px; /* whole card skipped off-screen: reviewer names and original texts carry latin-ext glyphs */ display: flex; flex-direction: column; width: 100%; background: var(--pf-bg); border: 1px solid var(--pf-line); border-radius: var(--pf-r-lg); overflow: hidden; }
.review-card__media { aspect-ratio: 16 / 10; background: var(--pf-surface-2); }
.review-card__media img, .review-card__img { width: 100%; height: 100%; object-fit: cover; }
.review-card__media--brand { display: grid; place-content: center; gap: 8px; justify-items: center; background: var(--pf-night); color: var(--pf-on-night-2); }
.review-card__logo-img { width: 84px; filter: invert(1) brightness(1.4); }
.review-card__logo-img--on-dark { filter: none; } /* the owner's logo version for dark backgrounds (brand.js logoOnDark) */
.review-card__mark { font-family: var(--pf-font-display); font-size: 3rem; line-height: 1; color: rgba(245, 246, 248, 0.3); }
.review-card__brand-label { font-family: var(--pf-font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.review-card__rating { display: inline-flex; gap: 2px; padding: 16px 18px 0; color: var(--pf-ink); }
.review-card__rating svg { width: 12px; height: 12px; }
.review-card__rating .is-empty { color: var(--pf-line-strong); }
.review-card__quote { padding: 10px 18px 0; font-size: var(--pf-fs-md); line-height: 1.5; color: var(--pf-ink); }
.review-card__orig { padding: 12px 18px 0; content-visibility: auto; contain-intrinsic-size: auto 90px; } /* nested skip: the slider script measures the track at start-up, which would otherwise shape this text and fetch latin-ext fonts before first paint */
.review-card__orig--empty { display: none; }
.review-card__orig-label { display: block; font-family: var(--pf-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pf-ink-4); margin-bottom: 4px; }
.review-card__orig-text { font-size: var(--pf-fs-sm); font-style: italic; color: var(--pf-ink-3); line-height: 1.45; }
.review-card__author { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 16px 18px 18px; }
.review-card__avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pf-gold-50); color: var(--pf-gold-ink); font-family: var(--pf-font-mono); font-size: var(--pf-fs-xs); font-weight: 500; }
.review-card__meta { display: grid; gap: 2px; min-width: 0; }
.review-card__name { font-size: var(--pf-fs-sm); }
.review-card__country { display: inline-flex; align-items: center; gap: 4px; font-size: var(--pf-fs-xs); color: var(--pf-ink-3); }
.review-card__check { display: inline-flex; color: var(--pf-verdigris-ink); }
.review-card__check svg { width: 10px; height: 10px; }

/* ---- FAQ tabs + accordion ---- */
.faq { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr); gap: clamp(20px, 4vw, 56px); margin-top: 40px; }
.faq--page { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); }
.faq__tabs { display: grid; grid-template-columns: 1fr; gap: 6px; align-content: start; }
.faq__tab { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 18px; border: 1px solid var(--pf-line); border-radius: var(--pf-r-md); background: var(--pf-surface); color: var(--pf-ink-2); font-size: var(--pf-fs-md); font-weight: 600; text-align: left; cursor: pointer; transition: border-color var(--pf-dur-1) var(--pf-ease), background-color var(--pf-dur-1) var(--pf-ease), color var(--pf-dur-1) var(--pf-ease); }
.faq__tab:hover { border-color: var(--pf-line-strong); }
.faq__tab.is-active { background: var(--pf-ink); border-color: var(--pf-ink); color: var(--pf-on-night); }
.faq__tab-num { font-family: var(--pf-font-mono); font-size: var(--pf-fs-xs); letter-spacing: 0.08em; color: var(--pf-ink-4); }
.faq__tab.is-active .faq__tab-num { color: var(--pf-gold); }
.faq__panels { min-width: 0; }
.faq__item { border-bottom: 1px solid var(--pf-line); }
.faq__item:first-child { border-top: 1px solid var(--pf-line); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 60px; padding: 14px 4px; border: 0; background: none; color: var(--pf-ink); font-size: var(--pf-fs-md); font-weight: 600; text-align: left; cursor: pointer; }
.faq__q:hover .faq__q-text { color: var(--pf-gold-ink); }
.faq__icon { position: relative; flex: none; width: 28px; height: 28px; border: 1px solid var(--pf-line-strong); border-radius: 50%; transition: transform var(--pf-dur-2) var(--pf-ease), background-color var(--pf-dur-1) var(--pf-ease); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--pf-dur-2) var(--pf-ease); }
.faq__item.is-open .faq__icon { background: var(--pf-ink); border-color: var(--pf-ink); color: var(--pf-on-night); }
.faq__item.is-open .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a { padding: 0 4px 18px; max-width: 70ch; font-size: var(--pf-fs-md); line-height: 1.6; color: var(--pf-ink-2); animation: pf-fade-in var(--pf-dur-2) var(--pf-ease); }
.faq__a p + p { margin-top: 10px; }
.faq__a a { color: var(--pf-gold-ink); text-decoration: underline; text-underline-offset: 3px; }
@keyframes pf-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .faq, .faq--page { grid-template-columns: 1fr; gap: 16px; }
  .faq__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq__tab { min-height: 48px; padding: 0 12px; font-size: var(--pf-fs-sm); }
}
@media (prefers-reduced-motion: reduce) { .faq__a { animation: none; } .rf-slider__track { transition: none; } }

/* ---- designs/signature/components/signin.css ---- */
/* ==========================================================================
   Header sign-in panel (design D3, owner 2026-10-25; brand-js/commerce/signin-drawer.js + signin-flow.js): the account
   page's sign-in (templates/pepfame-account.njk markup, its approved texts) in a right-hand panel like the cart drawer —
   full height and 420 px wide on larger screens, full-screen on phones (portrait up to 600 px wide, landscape up to
   500 px high). Compact: the whole e-mail step and code step fit without scrolling from 320 × 568 up and in phone
   landscape (667 × 375: two columns, field and button side by side); the form sits at the top, so the on-screen
   keyboard leaves it in view. Inputs at 16 px (iOS does not zoom). Reduced motion: no slide.
   Hooks: [data-pf-signin] .is-open/hidden, .pf-signin__panel (role dialog), the account page's .pfa__* classes.
   ========================================================================== */
html.pf-signin-open { overflow: hidden; } /* + the scrollbar's width as body padding (signin-drawer.js): nothing behind moves */
.pf-signin { position: fixed; inset: 0; z-index: var(--pf-z-drawer); }
.pf-signin__backdrop { position: absolute; inset: 0; background: rgba(var(--pf-night-rgb), 0.5); opacity: 0; transition: opacity var(--pf-dur-2) var(--pf-ease); }
.pf-signin.is-open .pf-signin__backdrop { opacity: 1; }
.pf-signin__panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(420px, 100%); background: var(--pf-bg); box-shadow: var(--pf-shadow-3); transform: translateX(100%); transition: transform var(--pf-dur-2) var(--pf-ease); outline: none; }
.pf-signin.is-open .pf-signin__panel { transform: none; }
.pf-signin__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px 14px; background: var(--pf-surface); border-bottom: 1px solid var(--pf-line); }
.pf-signin__title { margin: 0; min-width: 0; font-family: var(--pf-font-display); font-size: 1.5rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; color: var(--pf-ink); text-wrap: balance; overflow-wrap: anywhere; }
.pf-signin__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--pf-line); border-radius: 50%; background: var(--pf-surface); color: var(--pf-ink); cursor: pointer; }
.pf-signin__close:hover { border-color: var(--pf-ink); }
.pf-signin__close svg { width: 16px; height: 16px; }
.pf-signin__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 20px calc(20px + var(--pf-safe-b)); }
/* while the account page's sign-in is being read (usually already there: it is asked when the pointer reaches the icon) */
.pf-signin__panel[aria-busy="true"] .pf-signin__body::before { content: ""; display: block; width: 28px; height: 28px; margin: 32px auto; border: 2px solid var(--pf-line-strong); border-top-color: var(--pf-gold-dark); border-radius: 50%; animation: pf-signin-spin 0.8s linear infinite; }
@keyframes pf-signin-spin { to { transform: rotate(360deg); } }

/* the account page's sign-in markup inside the panel (its own page stylesheet is not loaded here) */
.pf-signin .pfa__form { display: grid; gap: 8px; }
.pf-signin .pfa__label { font-size: var(--pf-fs-sm); font-weight: 600; color: var(--pf-ink); }
.pf-signin .pfa__intro { margin: 0 0 2px; font-size: var(--pf-fs-sm); line-height: 1.5; color: var(--pf-ink-2); overflow-wrap: anywhere; }
.pf-signin .pfa__input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--pf-line-strong); border-radius: var(--pf-r-sm); background: var(--pf-surface); color: var(--pf-ink); font: inherit; font-size: 16px; }
.pf-signin .pfa__input:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 1px; border-color: var(--pf-ink); }
.pf-signin .pfa__input--code { font-family: var(--pf-font-mono); font-size: 1.3rem; letter-spacing: 0.3em; }
.pf-signin .pfa__btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 4px; padding: 0 24px; border: 1.5px solid var(--pf-gold-dark); border-radius: var(--pf-pill); background: var(--pf-gold-dark); color: rgb(var(--pf-white-rgb)); font: inherit; font-weight: 700; cursor: pointer; transition: background-color var(--pf-dur-1) var(--pf-ease), border-color var(--pf-dur-1) var(--pf-ease); }
.pf-signin .pfa__btn:hover { background: var(--pf-ink); border-color: var(--pf-ink); }
.pf-signin .pfa__row { display: flex; flex-wrap: wrap; gap: 0 18px; align-items: center; }
.pf-signin .pfa__link { min-height: 40px; padding: 0; border: 0; background: none; color: var(--pf-gold-ink); font: inherit; font-size: var(--pf-fs-sm); font-weight: 600; text-align: left; text-wrap: balance; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pf-signin .pfa__link:disabled { color: var(--pf-ink-3); cursor: default; text-decoration: none; }
.pf-signin .pfa__btn:focus-visible, .pf-signin .pfa__link:focus-visible, .pf-signin .pfa__legal a:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 2px; }
/* the message line (role alert) stays in the page when empty; it takes room only with a message */
.pf-signin .pfa__msg { margin: 0; color: var(--pf-bad); font-size: var(--pf-fs-sm); font-weight: 600; line-height: 1.45; }
.pf-signin .pfa__msg:not(:empty) { margin-top: 10px; }
.pf-signin__fine { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--pf-line); }
.pf-signin .pfa__terms, .pf-signin .pfa__legal { margin: 0; font-size: var(--pf-fs-xs); line-height: 1.5; color: var(--pf-ink-3); }
.pf-signin .pfa__legal { margin-top: 6px; }
.pf-signin .pfa__legal a { color: var(--pf-ink-2); text-decoration: underline; text-underline-offset: 2px; }

/* phones: the whole screen, tighter spacing */
@media (max-width: 600px), (max-height: 500px) {
  .pf-signin__panel { width: 100%; box-shadow: none; }
  .pf-signin__head { gap: 10px; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); }
  .pf-signin__title { font-size: 1.3rem; }
  .pf-signin__body { padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(16px + var(--pf-safe-b)) max(16px, env(safe-area-inset-left, 0px)); }
  .pf-signin .pfa__input, .pf-signin .pfa__btn { min-height: 46px; }
  .pf-signin__fine { margin-top: 14px; padding-top: 12px; }
}
@media (max-width: 360px) {
  .pf-signin__title { font-size: 1.2rem; }
}
/* short phones (320 × 568 and the like): a little less air, so the code step keeps room for a message */
@media (max-height: 700px) {
  .pf-signin__body { padding-top: 12px; }
  .pf-signin .pfa__form { gap: 6px; }
  .pf-signin .pfa__input, .pf-signin .pfa__btn { min-height: 44px; }
  .pf-signin .pfa__link { min-height: 36px; }
  .pf-signin__fine { margin-top: 12px; padding-top: 10px; }
}
/* phone landscape: the form on the left (field and button side by side), the terms on the right */
@media (max-height: 500px) and (min-width: 560px) {
  .pf-signin__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 28px; align-content: start; padding-top: 12px; }
  .pf-signin .pfa__form { grid-column: 1; grid-row: 1; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; }
  .pf-signin .pfa__form > :not(.pfa__input):not(.pfa__btn) { grid-column: 1 / -1; }
  .pf-signin .pfa__btn { width: auto; margin-top: 0; }
  .pf-signin .pfa__msg { grid-column: 1; grid-row: 2; }
  .pf-signin__fine { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 2px 0 0 24px; border-top: 0; border-left: 1px solid var(--pf-line); }
}
@media (prefers-reduced-motion: reduce) {
  .pf-signin__panel, .pf-signin__backdrop, .pf-signin .pfa__btn { transition: none; }
  .pf-signin__panel[aria-busy="true"] .pf-signin__body::before { animation: none; }
}

/* ---- designs/signature/components/support.css ---- */
/* ==========================================================================
   Floating WhatsApp support control (chrome/support-float.njk, brand variant). One unobtrusive pill, bottom-right;
   icon-only on phones; lifts above the sticky purchase bar; hidden behind the drawer/menu overlays. The glyph is the
   official WhatsApp mark (Simple Icons "whatsapp", CC0) in WhatsApp green on the ink pill.
   ========================================================================== */
.support-float { position: fixed; right: 18px; bottom: calc(18px + var(--pf-safe-b)); z-index: var(--pf-z-float); display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 14px; border-radius: var(--pf-pill); background: var(--pf-ink); color: var(--pf-on-night); font-size: var(--pf-fs-sm); font-weight: 600; box-shadow: var(--pf-shadow-3); transition: transform var(--pf-dur-1) var(--pf-ease), box-shadow var(--pf-dur-1) var(--pf-ease), bottom var(--pf-dur-2) var(--pf-ease); }
.support-float:hover { transform: translateY(-2px); }
.support-float svg { width: 22px; height: 22px; color: var(--pf-whatsapp); }
.support-float__tip { display: none; }
body.has-pdp-sticky .support-float { bottom: calc(18px + var(--pf-safe-b)); }
body.is-drawer-locked .support-float, body.is-menu-open .support-float, body.is-lightbox-open .support-float { visibility: hidden; }
@media (max-width: 767px) {
  .support-float { right: 14px; bottom: calc(14px + var(--pf-safe-b)); width: 50px; height: 50px; padding: 0; justify-content: center; }
  .support-float__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body.has-pdp-sticky .support-float { bottom: calc(88px + var(--pf-safe-b)); }
  /* never over the on-screen keyboard area while a field has focus */
  body:has(:is(input, textarea, select):focus) .support-float { visibility: hidden; }
}

/* ---- designs/signature/lang/ru.css ---- */
/* Russian pages (deploy 4; bundled into site.css only while ru is a visible language — css-bundles.11ty.js). Inter already
   ships its Cyrillic subset (fonts.css). Newsreader, the display face, has no Cyrillic: on Russian pages the headings use
   Cormorant Garamond (SIL OFL 1.1, self-hosted: website/cellmind-rebuild/vendor/fonts/cormorant-garamond-5.3.0/ with its
   LICENSE and provenance), a Garamond-model serif with Cyrillic that keeps the editorial look of Newsreader. It is
   lighter than Newsreader, so its 600 file is shown where the design asks for 500 and its italic 500 for italic 400.
   The Latin files keep Latin words in a Russian heading (product names, PepFame) in the same face. IBM Plex Mono gets its
   Cyrillic subset (data labels). The faces load only on pages that use them (unicode-range, :lang(ru)). */
@font-face { font-family: "PepFame Display Cyrillic"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/cormorant-garamond-latin-600-normal.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: "PepFame Display Cyrillic"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/cormorant-garamond-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PepFame Display Cyrillic"; font-style: italic; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/cormorant-garamond-latin-500-italic.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: "PepFame Display Cyrillic"; font-style: italic; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/cormorant-garamond-cyrillic-500-italic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root:lang(ru) {
  --pf-font-display: "PepFame Display Cyrillic", "Newsreader Fallback", Georgia, "Times New Roman", serif;
}