/* 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); }
.disclaimer-strip { border-top: 1px solid var(--pf-line); background: var(--pf-surface-2); }
/* data-source credit on pages without the site footer (the checkout): under the disclaimer strip (design.json dataCredit) */
.pf-data-credit { max-width: var(--pf-container); margin: 0 auto; padding: 10px var(--pf-gutter) calc(14px + var(--pf-safe-b)); 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); }
.disclaimer-strip p { max-width: var(--pf-container); margin: 0 auto; padding: 12px var(--pf-gutter); text-align: center; font-family: var(--pf-font-mono); font-size: var(--pf-fs-xs); letter-spacing: 0.08em; text-transform: uppercase; 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="europe"], html[data-pf-region="europe"] [data-pf-eta="international"] { display: none; }
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); }
.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; }
.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: 112px; filter: invert(1) brightness(1.4); }
.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); }
@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 2029:467 aspect) */
.wordmark { display: inline-flex; align-items: center; min-height: 44px; }
.wordmark__img { display: block; width: 104px; height: auto; aspect-ratio: 2029 / 467; }
.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: 92px; }
  .cart-btn { width: 42px; height: 42px; }
}

/* ---- 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/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; }
.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" "price price" "per per" "save pct" "ship ship"; }
.pdp-tier--wide { grid-column: 1 / -1; grid-template-areas: "vials vials" "qty price" "per save" "ship pct"; column-gap: 14px; row-gap: 4px; padding: 16px 16px 14px; margin-top: 6px; }
.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; font-size: var(--pf-fs-xs); font-weight: 600; color: var(--pf-verdigris-ink); font-variant-numeric: tabular-nums; }
.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" "price price" "per per" "save save" "pct pct" "ship ship"; }
  .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, .pdp-tier__save { font-size: 11px; }
  .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; }
}
@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__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/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; }
}