/* =========================================================================
   ExoticVape - Design System  (see DESIGN.md)
   Dark canvas · ember accent · functional strain colors · WCAG AA verified
   ========================================================================= */

/* ---- Tokens ---- */
:root {
  /* surfaces & ink */
  --bg: oklch(0.16 0.006 55);
  --bg-2: oklch(0.19 0.007 55);
  --surface: oklch(0.22 0.008 55);
  --surface-2: oklch(0.26 0.009 55);
  --line: oklch(0.30 0.010 55);
  --line-strong: oklch(0.38 0.012 55);
  --ink: oklch(0.97 0.004 60);
  --ink-2: oklch(0.78 0.008 60);
  --muted: oklch(0.64 0.010 60);

  /* brand - gold (matches the original ExoticVape identity #b49c76) */
  --brand: oklch(0.80 0.075 82);        /* accent text / links / price / icons on dark */
  --brand-btn: oklch(0.755 0.085 82);   /* solid button fill (dark text) */
  --brand-strong: oklch(0.70 0.078 82); /* hover / pressed */
  --brand-soft: oklch(0.80 0.075 82 / 0.14);
  --brand-glow: oklch(0.80 0.09 82 / 0.32);
  --on-brand: oklch(0.21 0.012 70);     /* dark ink for text/icons on gold fills */

  /* strain system */
  --sativa: oklch(0.83 0.15 112);
  --indica: oklch(0.70 0.13 300);
  --hybrid: oklch(0.78 0.12 195);

  /* action / notify accent - red (cart badge, bestseller, urgency) */
  --notify: oklch(0.585 0.21 28);
  --on-notify: oklch(0.99 0 0);

  /* semantic */
  --success: oklch(0.78 0.15 150);
  --warning: oklch(0.82 0.15 80);
  --danger: oklch(0.63 0.20 28);        /* errors stay red */
  --on-chip: oklch(0.18 0.01 55);

  /* spectrum gradients - client-requested accent motif. Declared once here so the
     same ramp is not re-typed (and quietly drifted) at each call site. */
  --grad-action: linear-gradient(90deg, #1b3a8c, #7b2d8e, #d41b6b);
  --grad-spectrum: linear-gradient(100deg, #4f8cff 0%, #33d1d1 20%, #a86bff 42%, #ff4fa3 62%, #ff5a3c 80%, #ffb43d 100%);
  --grad-gold-shimmer: linear-gradient(100deg, #e8c46a 0%, #e8c46a 38%, #ffffff 50%, #e8c46a 62%, #e8c46a 100%);

  /* higher-chroma gold used by the "legacy cannabinoid" PDP callout */
  --legacy-gold: #e8c46a;
  --legacy-gold-dim: #d9a441;

  /* type */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-hero: clamp(2.25rem, 5vw, 4rem);
  --fs-h1: 2.25rem;
  --fs-h2: 1.75rem;
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

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

  /* radii & shadow */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;
  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-2: 0 8px 24px -8px oklch(0 0 0 / 0.55);
  --shadow-3: 0 20px 50px -12px oklch(0 0 0 / 0.7);

  /* z-scale */
  --z-header: 100; --z-drawer-backdrop: 200; --z-drawer: 210;
  --z-modal-backdrop: 300; --z-modal: 310; --z-toast: 400;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 200ms;

  --container: 1200px;
  --pad: clamp(1rem, 4vw, 2rem);

  /* sticky header geometry - every sticky column offsets from these, so the
     header height is stated once instead of re-guessed as 84px/88px per rule */
  --header-h: 88px;                                    /* 64px pill + 2x --space-3 */
  --sticky-top: calc(var(--header-h) + var(--space-3));
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; } /* must win over class-level display (e.g. .cart-layout{display:grid}) */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul { list-style: none; }
/* The outline follows each element's own border-radius, so do NOT set a radius
   here - it squared off pill buttons the moment they took keyboard focus. */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---- Typography ---- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { text-wrap: pretty; }
.eyebrow { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--brand); letter-spacing: 0; }

/* ---- Layout primitives ---- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(var(--space-7), 8vw, var(--space-9)); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.section-head p { color: var(--ink-2); max-width: 52ch; }
.stack > * + * { margin-top: var(--space-4); }
.muted { color: var(--muted); }
.center { text-align: center; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--brand-btn); color: var(--on-brand); padding: var(--space-2) var(--space-4); z-index: var(--z-toast); border-radius: 0 0 var(--r-sm) 0; }
.skip-link:focus { left: 0; }
/* Visible to screen readers only - for labels that the visual design carries by
   position or placeholder alone (e.g. the coupon field). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-5); border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.01em;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  border: 1.5px solid transparent; white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary { background: var(--brand-btn); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-strong); }
.btn-secondary { border-color: var(--line-strong); color: var(--ink); background: var(--surface); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--brand); }
.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover { color: var(--ink); background: var(--surface); }
.btn-notify { background: var(--notify); color: var(--on-notify); } /* red - add-to-cart action */
.btn-notify:hover { background: oklch(0.53 0.21 28); }
.btn-notify svg { width: 17px; height: 17px; }
/* vivid gradient action button - modelled on vividhome.eu .vh-btn--primary */
.btn-vivid { background: var(--grad-action); color: #fff; border: 0; font-weight: 700; letter-spacing: 0.03em; box-shadow: 0 12px 30px rgba(123, 45, 142, 0.35); }
.btn-vivid:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(212, 27, 107, 0.45); }
.btn-vivid:active { transform: translateY(0); }
.btn-lg { min-height: 52px; padding: 0 var(--space-6); font-size: var(--fs-body); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; }
.btn-lg svg { width: 22px; height: 22px; }
/* PDP add-to-cart bag icon - larger than the default button icon */
#addBtn svg { width: 24px; height: 24px; margin-right: 2px; }
/* animated CTA arrow - subtle continuous nudge, settles + advances on hover */
.cta-arrow { flex: 0 0 auto; animation: ctaArrowBob 1.5s var(--ease) infinite; transition: transform var(--dur) var(--ease); }
.btn:hover .cta-arrow { animation: none; transform: translateX(5px); }
@keyframes ctaArrowBob { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .cta-arrow { animation: none; } }

/* ---- Chips / badges ---- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em; }
.chip-strain { color: var(--on-chip); }
.chip-strain::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.65; }
.strain-sativa { background: var(--sativa); }
.strain-indica { background: var(--indica); }
.strain-hybrid { background: var(--hybrid); }
.strain-flavor { background: oklch(0.80 0.11 25); } /* warm coral - flavored variety */
.chip-outline { border: 1px solid var(--line-strong); color: var(--ink-2); background: transparent; }
.tag { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2; display: inline-flex; align-items: center; gap: 5px; background: var(--grad-action); color: #fff; font-size: 0.8125rem; font-weight: 800; padding: 6px 14px; border-radius: var(--r-pill); letter-spacing: 0.05em; text-transform: uppercase; box-shadow: 0 6px 18px oklch(0 0 0 / 0.45); }
.tag-ic { width: 15px; height: 15px; flex-shrink: 0; }
.tag-new { background: var(--notify); color: var(--on-notify); box-shadow: 0 6px 18px oklch(0.585 0.21 28 / 0.5); }
.tag-promo { background: var(--warning); color: var(--on-chip); box-shadow: 0 6px 18px oklch(0.82 0.15 80 / 0.5); }
.tag-featured { background: var(--success); color: var(--on-chip); box-shadow: 0 6px 18px oklch(0.78 0.15 150 / 0.45); }
.tag-quiet { background: var(--hybrid); color: var(--on-chip); }

/* =========================================================================
   Header
   ========================================================================= */
/* pacha.com-style floating glass pill header */
.header { position: sticky; top: 0; z-index: var(--z-header); background: transparent; padding-block: var(--space-3); }
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 64px; border-radius: 4rem; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); padding: 0.5rem 1rem 0.5rem 3rem; }
.brand-logo { display: flex; align-items: center; gap: var(--space-2); }
.brand-logo svg, .brand-logo img { height: 30px; width: auto; }
.site-logo { height: 56px !important; width: auto; }
/* Optical centring in the header pill. The box is mathematically centred, but the
   faint smoke wisp at the top of the emblem is opaque in the PNG and invisible
   against the dark bar, so the logo reads ~5px low. Percentage translate is
   relative to the element's own height, so one rule covers both breakpoints. */
.header-bar .site-logo { transform: translateY(-4.2%); }
.footer-brand .site-logo { height: 69px; }
/* inline-flex, not inline: an inline <a> around the logo adds a baseline gap under it. */
.footer-logo { display: inline-flex; align-items: center; }
.agegate .logo .site-logo { height: 66px; margin: 0 auto; }
.brand-wordmark { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.03em; }
.brand-wordmark b { color: var(--brand); }
.nav { display: flex; align-items: center; gap: var(--space-1); margin-left: var(--space-3); }
.nav a { position: relative; padding: var(--space-2) var(--space-3); font-size: 1.0625rem; font-weight: 700; color: #fff; transition: color var(--dur) var(--ease); }
.nav a::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 3px; height: 2px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left center; transition: transform 0.28s var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill); color: var(--ink-2); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); position: relative; }
.icon-btn:hover { color: var(--ink); background: var(--surface); }
.icon-btn svg { width: 22px; height: 22px; }
.cart-count { position: absolute; top: 2px; right: 2px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--r-pill); background: var(--notify); color: var(--on-notify); font-size: 11px; font-weight: 700; display: grid; place-items: center; line-height: 1; box-shadow: 0 0 0 2px var(--bg-2); }
.cart-count[hidden] { display: none; }
.search { display: flex; align-items: center; gap: var(--space-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0 var(--space-3); height: 40px; min-width: 220px; transition: border-color var(--dur) var(--ease); }
.search:focus-within { border-color: var(--brand); }
.search svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.search input { background: none; border: none; outline: none; width: 100%; font-size: var(--fs-sm); }
.search input::placeholder { color: var(--muted); }
.nav-toggle { display: none; }

/* announce bar - scrolling rainbow marquee */
.announce { position: relative; overflow: hidden; background: linear-gradient(90deg, #2b5cf0, #17a2b0, #8b46e6, #e0399b, #ef4a37, #f39121, #2b5cf0); color: #fff; }
/* line-height is set explicitly: without it the bar inherits body's 1.6 (prose leading),
   which adds ~8px of dead height to a single-line marquee. 1.2 keeps headroom for
   uppercase diacritics (Greek Ά/Έ, Cyrillic Й) across the 27 locales. */
/* gap is --space-8 (not -6) because there is no separator element between items any
   more: the old dot contributed its own two gaps, so a smaller value would visibly
   crowd the promises together. The icon is what marks the start of each one. */
.announce-track { display: flex; gap: var(--space-8); width: max-content; padding-block: 0.5rem; line-height: 1.2; white-space: nowrap; animation: ticker 18s linear infinite; }
.announce-track .a-item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,0.28); }
/* 16px keeps the icon at/below the 15.6px text line box, so adding icons does not
   undo the line-height height fix. currentColor = white here, brand colour in .ticker. */
.announce-track .a-item svg { flex: none; width: 16px; height: 16px; }
.announce:hover .announce-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .announce-track { animation: none; justify-content: center; width: 100%; } }

/* site notice / alert badge (e.g. BG info-only banner) */
.notice-wrap { padding-block: var(--space-4) 0; }
.notice {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  border: 1px solid oklch(0.63 0.20 28 / 0.55);
  background: oklch(0.63 0.20 28 / 0.22);
  color: oklch(0.93 0.05 28);
  font-size: var(--fs-body); font-weight: 600; line-height: 1.45;
  box-shadow: inset 0 0 0 1px oklch(0.63 0.20 28 / 0.10);
}
.notice .notice-ico {
  flex: none; width: 22px; height: 22px;
  color: var(--on-notify);
  background: var(--notify);
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  box-shadow: 0 0 0 4px oklch(0.63 0.20 28 / 0.18);
}
.notice .notice-ico svg { width: 14px; height: 14px; }

/* language switcher */
.lang-switch { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 var(--space-3); border-radius: var(--r-pill); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.lang-btn:hover { color: var(--ink); background: var(--surface); }
.lang-btn svg { width: 18px; height: 18px; }
.lang-btn .chev { width: 14px; height: 14px; opacity: 0.7; }
/* language switcher popover — light card floating over the dark header.
   --lm-accent drives the heading + active state; swap it to var(--brand)
   for the gold identity instead of the violet reference. */
.lang-menu {
  --lm-accent: oklch(0.48 0.19 295);      /* violet, matches the reference mock */
  --lm-paper: #ffffff;
  --lm-ink: oklch(0.24 0.02 300);
  --lm-hover: oklch(0.96 0.004 300);
  --lm-badge-bg: oklch(0.94 0.006 300);
  --lm-badge-ink: oklch(0.46 0.02 300);
  --lm-active-bg: oklch(0.96 0.02 295);
  --lm-check: oklch(0.62 0.17 150);
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 300px; max-width: 82vw;
  background: var(--lm-paper);
  border: 1px solid oklch(0 0 0 / 0.06);
  border-radius: 18px;
  box-shadow: var(--shadow-3);
  padding: var(--space-2);
  display: none; z-index: var(--z-header);
  transform-origin: top right;
  animation: lang-pop var(--dur) var(--ease);
}
.lang-switch.open .lang-menu { display: block; }
@keyframes lang-pop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.lang-menu-title {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--lm-accent);
  padding: var(--space-2) var(--space-3) var(--space-1);
}
.lang-menu-list { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.lang-menu-list::-webkit-scrollbar { width: 8px; }
.lang-menu-list::-webkit-scrollbar-thumb { background: oklch(0 0 0 / 0.14); border-radius: 999px; border: 2px solid var(--lm-paper); }
.lang-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 12px;
  color: var(--lm-ink); text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.lang-item:hover { background: var(--lm-hover); }
.lang-badge {
  flex: none; width: 36px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--lm-badge-bg); color: var(--lm-badge-ink);
  font-size: 11px; font-weight: 800; letter-spacing: 0.02em;
}
.lang-name { flex: 1 1 auto; font-size: var(--fs-sm); font-weight: 500; }
.lang-check { flex: none; width: 18px; height: 18px; color: var(--lm-check); opacity: 0; }
.lang-item.is-active { background: var(--lm-active-bg); }
.lang-item.is-active .lang-badge { background: var(--lm-accent); color: #fff; }
.lang-item.is-active .lang-name { font-weight: 700; }
.lang-item.is-active .lang-check { opacity: 1; }

/* content / prose pages */
.page-head { padding-block: var(--space-7) var(--space-5); border-bottom: 1px solid var(--line); margin-bottom: var(--space-6); }
.page-head .eyebrow { display: block; margin-bottom: var(--space-2); }
.page-head h1 { font-size: clamp(2rem, 5vw, 3rem); }
.page-head p { color: var(--ink-2); margin-top: var(--space-3); max-width: 60ch; font-size: 1.0625rem; }
/* .prose lives in one place only - see "Prose" near the end of this file. */
.content-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-7); align-items: start; }
.content-nav { position: sticky; top: var(--sticky-top); display: flex; flex-direction: column; gap: 2px; }
.content-nav a { padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.content-nav a:hover, .content-nav a[aria-current="page"] { background: var(--surface); color: var(--ink); }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-block: var(--space-5); }
.info-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-5); }
.info-card .ic { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; margin-bottom: var(--space-3); }
.info-card .ic svg { width: 22px; height: 22px; }
.info-card h3 { font-size: 1.0625rem; }
.info-card p { color: var(--ink-2); font-size: var(--fs-sm); margin-top: var(--space-1); }
.faq-item { border-bottom: 1px solid var(--line); padding: var(--space-4) 0; }
.faq-item h3 { font-size: 1.0625rem; margin-bottom: var(--space-2); }
.faq-item p { color: var(--ink-2); }
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.field input, .field textarea { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: var(--space-3); color: var(--ink); font: inherit; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); }
/* payment-method (legacy Bootstrap markup injected into the redesign checkout) */
#resultDiv .form-label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-3); color: var(--ink); }
#resultDiv .form-check { margin-left: 35px !important; display: flex; align-items: center; gap: 10px; line-height: 1.5; margin-bottom: var(--space-2); }
#resultDiv .form-check-input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
#resultDiv .form-check-label { font-size: var(--fs-body); line-height: 1.5; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--ink); }
/* checkout inline validation */
.field-error { display: none; margin-top: 6px; font-size: var(--fs-sm); line-height: 1.4; color: var(--danger); }
.field-error.suggest { color: var(--warning); }
.field-error .email-fix { color: var(--brand); text-decoration: underline; cursor: pointer; }
.checkout-form input.invalid, .checkout-form .iti input.invalid { border-color: var(--danger); }
/* intl-tel-input: match field width + dark-theme field styling */
.checkout-form .iti { display: block; width: 100%; }
.checkout-form .iti input { width: 100%; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: var(--space-3); color: var(--ink); font: inherit; }
.checkout-form .iti input:focus { outline: none; border-color: var(--brand); }
.checkout-form .iti__selected-flag { border-radius: var(--r-sm) 0 0 var(--r-sm); }
/* intl-tel-input country dropdown: dark-theme readable */
.checkout-form .iti__country-list { background: var(--surface-2); border: 1px solid var(--line-strong); box-shadow: var(--shadow-3); color: var(--ink); }
.checkout-form .iti__country { color: var(--ink); padding: 8px 10px; }
.checkout-form .iti__country-name { color: var(--ink); }
.checkout-form .iti__dial-code { color: var(--ink-2); }
.checkout-form .iti__country.iti__highlight, .checkout-form .iti__country:hover { background-color: var(--brand-soft); }
.checkout-form .iti__divider { border-color: var(--line); }
@media (max-width: 860px) { .content-layout { grid-template-columns: 1fr; } .content-nav { position: static; flex-direction: row; flex-wrap: wrap; margin-bottom: var(--space-4); } }

/* =========================================================================
   Hero
   ========================================================================= */
.hero { position: relative; overflow: clip; border-bottom: 1px solid var(--line); }
.hero-glow { position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 70% at 72% 40%, var(--brand-glow), transparent 70%); pointer-events: none; }
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-5); align-items: center; padding-block: clamp(var(--space-5), 4vw, var(--space-7)); }
.hero-copy { max-width: 34ch; }
.hero h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; }
/* Gradient accent word in the hero (per explicit client request / reference). */
.hero h1 em {
  font-style: normal;
  background: var(--grad-spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 em { color: var(--brand); -webkit-text-fill-color: currentColor; }
}
.hero-lede { margin-top: var(--space-4); font-size: 1.125rem; color: var(--ink-2); max-width: 44ch; }
.hero-cta { margin-top: var(--space-6); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero-media { position: relative; aspect-ratio: 1 / 1; max-width: 450px; justify-self: center; display: grid; place-items: center; }
.hero-media img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 26px 44px oklch(0 0 0 / 0.6)); animation: heroFloat 6s ease-in-out infinite; transition: opacity 450ms var(--ease); }
@keyframes heroFloat { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-16px) rotate(1.2deg); } }
.hero-link { display: contents; cursor: pointer; }
.hero-price { position: absolute; left: var(--space-2); bottom: var(--space-3); z-index: 2; background: color-mix(in oklch, var(--surface) 80%, transparent); border: 1px solid var(--line-strong); backdrop-filter: blur(8px); border-radius: var(--r-md); padding: var(--space-2) var(--space-4); box-shadow: var(--shadow-2); }
.hero-price .k { font-size: var(--fs-xs); color: var(--brand); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.hero-price .v { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.hero-price .v small { color: var(--brand); font-family: var(--font-body); font-size: 1rem; }

/* =========================================================================
   Value ticker
   ========================================================================= */
.ticker { background: var(--bg-2); border-block: 1px solid var(--line); overflow: hidden; }
.ticker-track { display: flex; gap: var(--space-7); width: max-content; padding-block: var(--space-3); animation: ticker 20.8s linear infinite; }
/* Explicit line-height for the same reason as .announce-track: body's 1.6 prose leading
   made the 14px text box 22.4px and drove the row height. At 1.2 the text box is 16.8px,
   so the 18px icon becomes the limit - going tighter than 1.2 buys nothing here. */
.ticker-item { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-2); font-weight: 600; font-size: var(--fs-sm); line-height: 1.2; white-space: nowrap; }
.ticker-item svg { width: 18px; height: 18px; color: var(--brand); }
.ticker-item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker:hover .ticker-track { animation-play-state: paused; }

/* =========================================================================
   Category tiles
   ========================================================================= */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.cat-tile { position: relative; display: flex; flex-direction: column; justify-content: end; min-height: 220px; padding: var(--space-5); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); overflow: hidden; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.cat-tile::before { content: ""; position: absolute; inset: 0; opacity: 0.16; background: radial-gradient(80% 80% at 80% 0%, var(--accent, var(--brand)), transparent 70%); transition: opacity var(--dur) var(--ease); }
.cat-tile:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.cat-tile:hover::before { opacity: 0.28; }
.cat-tile .cat-k { position: relative; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent, var(--brand)); }
.cat-tile h3 { position: relative; margin-top: var(--space-1); font-size: 1.6rem; }
.cat-tile p { position: relative; color: var(--ink-2); margin-top: var(--space-2); font-size: var(--fs-sm); max-width: 30ch; }
.cat-tile .cat-go { position: relative; margin-top: var(--space-4); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.cat-tile .cat-go svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.cat-tile:hover .cat-go svg { transform: translateX(4px); }
.cat-hhc { --accent: var(--brand); }
.cat-h4cbd { --accent: var(--hybrid); }
.cat-cb9 { --accent: var(--sativa); }

/* =========================================================================
   Product grid & card
   ========================================================================= */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }
.card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.card-media { position: relative; aspect-ratio: 1; background: radial-gradient(70% 70% at 50% 30%, var(--surface-2), var(--surface)); display: grid; place-items: center; padding: var(--space-4); }
.card-media img { width: 72%; height: 100%; object-fit: contain; transition: transform var(--dur) var(--ease); }
.card:hover .card-media img { transform: scale(1.05) rotate(-2deg); }
.quick-add { position: absolute; right: var(--space-3); bottom: var(--space-3); width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--brand-btn); color: var(--on-brand); display: grid; place-items: center; box-shadow: var(--shadow-2); opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.quick-add svg { width: 22px; height: 22px; }
.card:hover .quick-add, .quick-add:focus-visible { opacity: 1; transform: translateY(0); }
.quick-add:hover { background: var(--brand-strong); }
.card-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.card-cat { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); }
.card h3 { font-size: var(--fs-h3); }
.card .blurb { font-size: var(--fs-sm); color: var(--brand); font-weight: 600; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-effects { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.card-foot { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-3); border-top: 1px solid var(--line); }
/* was an inline style on the button; moved here so mobile can override it */
.card-foot .btn-add { min-height: 38px; padding: 0 0.85rem; }
.price { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--ink); }
.price small { font-size: var(--fs-sm); color: var(--brand); font-family: var(--font-body); font-weight: 500; }
.price-old { font-size: var(--fs-sm); color: var(--muted); text-decoration: line-through; margin-left: 6px; font-family: var(--font-body); font-weight: 400; }
.spec-inline { font-size: var(--fs-sm); color: var(--muted); }

/* =========================================================================
   Shop layout (filters + grid)
   ========================================================================= */
.shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-6); align-items: start; }
/* SEO copy block: full container width, own row below the shop grid (NOT a grid
   child, so it never overlaps the sticky filters). Desktop centres the copy in the
   middle ~50% (25% / 50% / 25%); collapses to full width on mobile. */
.shop-seo { margin-top: var(--space-8); padding: var(--space-6) 25% 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.75; }
.shop-seo h2 { font-size: var(--fs-h3); color: var(--ink); margin-bottom: var(--space-4); }
.shop-seo p { margin-bottom: var(--space-4); }
.shop-seo a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.shop-seo a:hover { text-decoration: none; }
/* shop sub-lead spans full width (overrides the 52ch cap on .section-head p) */
#shopSub { max-width: 100%; }
.filters { position: sticky; top: var(--sticky-top); display: flex; flex-direction: column; gap: var(--space-5); }
.filter-group h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); font-family: var(--font-body); font-weight: 700; margin-bottom: var(--space-3); }
.filter-opt { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }
.filter-opt input { accent-color: var(--brand); width: 16px; height: 16px; }
.filter-opt:hover { color: var(--ink); }
.filter-opt .count { margin-left: auto; color: var(--muted); font-size: var(--fs-xs); }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.shop-toolbar .result-count { color: var(--muted); font-size: var(--fs-sm); }
.select { height: 40px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); padding: 0 var(--space-4); font-size: var(--fs-sm); }
/* Was a hard-coded light-grey box - the one light input on a dark storefront.
   Keeps the "type here" emphasis via a brand-tinted border instead. */
/* A text input carries an intrinsic ~20-character minimum width, so flex:1 alone
   could not shrink it and the coupon row overflowed on narrow phones. */
#coupon { background: var(--surface-2); color: var(--ink); border-color: var(--brand); min-width: 0; }
#coupon::placeholder { color: var(--muted); opacity: 1; }
.pill-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pill-filter { height: 34px; padding: 0 var(--space-4); border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); transition: all var(--dur) var(--ease); }
.pill-filter[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--ink); }
.pill-filter:hover { border-color: var(--brand); color: var(--ink); }
.filter-toggle { display: none; }
.empty-state { text-align: center; padding: var(--space-8) var(--space-4); color: var(--ink-2); }
.empty-state svg { width: 56px; height: 56px; color: var(--muted); margin: 0 auto var(--space-4); }

/* =========================================================================
   Product detail
   ========================================================================= */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; }
.pdp-gallery { position: sticky; top: var(--sticky-top); }
.pdp-main { aspect-ratio: 1; border-radius: var(--r-lg); border: 1px solid var(--line); background: radial-gradient(70% 70% at 50% 30%, var(--surface-2), var(--surface)); display: grid; place-items: center; padding: var(--space-3); position: relative; overflow: hidden; }
/* height:auto + aspect-ratio:1 are REQUIRED, not decorative. Without a height the
   img's height="..." attribute became the used height (2000px), so the element was
   456x2000 inside a 544x544 box; object-fit centred the picture in that tall box and
   overflow:hidden clipped it entirely out of view - the product image looked missing.
   Product shots are square, so pin the ratio here instead of trusting the attribute. */
.pdp-main img { width: 88%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 30px 40px oklch(0 0 0 / 0.55)); }
.pdp-glow { position: absolute; inset: 0; background: radial-gradient(50% 50% at 50% 45%, var(--accent, var(--brand-glow)), transparent 70%); opacity: 0.2; }
.pdp-main { cursor: zoom-in; }
.pdp-zoom-hint { position: absolute; bottom: var(--space-3); right: var(--space-3); z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: color-mix(in oklch, var(--surface) 80%, transparent); border: 1px solid var(--line-strong); backdrop-filter: blur(6px); border-radius: var(--r-pill); padding: 6px 12px; font-size: var(--fs-xs); color: var(--ink-2); pointer-events: none; }
.pdp-zoom-hint svg { width: 14px; height: 14px; }
.pdp-thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-3); }

/* Related products - Swiper coverflow */
.related-swiper { padding-block: var(--space-3) var(--space-6); overflow: hidden; }
/* The coverflow effect only reads if the neighbouring slides are actually on screen.
   A flat 340px filled a 390px phone almost edge to edge, so the rotated neighbours were
   ~25px slivers and the carousel looked static. min() keeps 340px from tablet up and
   falls back to 66vw on phones, which leaves ~65px of each neighbour visible. */
.related-swiper .swiper-slide { width: min(300px, 58vw); height: auto; }
.related-swiper .swiper-slide .card { height: 100%; }
/* Slides all stretch to the tallest card, so one long product name made every card in
   the carousel taller. Clamping the heading to 2 lines keeps them uniform and compact;
   the full name is still on the product page the card links to. */
.related-swiper .card h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.related-swiper .swiper-slide .card:hover { transform: none; } /* coverflow owns the transform */
/* Product shots are square, so the media box is square too. The old 4/3 never actually
   applied (the square image stretched the grid row past it) and the 92% width + 8px
   padding left ~18px of dead space on each side, so the picture filled only ~80% of the
   media box. Square box + full-width image + hairline padding removes that. */
.related-swiper .card-media { aspect-ratio: 1; padding: var(--space-1); }
.related-swiper .card-media img { width: 100%; height: 100%; }
.related-swiper .price small { color: var(--brand); }
.related-swiper .swiper-pagination { position: static; margin-top: var(--space-4); }
.related-swiper .swiper-pagination-bullet { background: var(--muted); opacity: 0.5; }
.related-swiper .swiper-pagination-bullet-active { background: var(--brand); opacity: 1; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: var(--z-modal); background: oklch(0.1 0.01 55 / 0.92); backdrop-filter: blur(10px); display: none; place-items: center; padding: 4vmin; opacity: 0; transition: opacity var(--dur) var(--ease); }
.lightbox.open { display: grid; opacity: 1; }
.lightbox img { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: var(--r-md); box-shadow: var(--shadow-3); cursor: zoom-out; transform: scale(0.96); transition: transform var(--dur) var(--ease); }
.lightbox.open img { transform: scale(1); }
.lightbox-close { position: fixed; top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); display: grid; place-items: center; z-index: 1; }
.lightbox-close:hover { background: var(--surface-2); }
.lightbox-close svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { .lightbox, .lightbox img { transition: none; } .lightbox img { transform: none; } }
.pdp-thumb { width: 72px; height: 72px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; padding: 6px; }
.pdp-thumb[aria-current="true"] { border-color: var(--brand); }
.pdp-thumb img { width: 100%; object-fit: contain; }
.pdp-info h1 { font-size: 2.5rem; margin-top: var(--space-2); }
/* product description: light spacing so each paragraph breathes */
/* "Legacy cannabinoid" info callout above the product description (all types except HCT) */
/* Hairline border + gold tint carry this callout. It previously also had a 3px
   left stripe, which is the most templated "admin panel" tell there is - the
   tint and the headed icon already mark it as a notice. */
.pdp-legacy { margin: var(--space-5) 0 0; padding: var(--space-5); border: 1px solid color-mix(in oklch, var(--legacy-gold) 42%, transparent); border-radius: var(--r-md); background: color-mix(in oklch, var(--legacy-gold) 9%, transparent); }
.pdp-legacy-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: var(--space-2); }
.pdp-legacy-head svg { width: 22px; height: 22px; color: var(--legacy-gold); flex-shrink: 0; }
.pdp-legacy-head h3 { margin: 0; font-size: 1.15rem; color: var(--legacy-gold); text-align: center; }
.pdp-legacy-body { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.7; }
.pdp-legacy-body p { margin: 0 0 0.7rem; }
.pdp-legacy-body b, .pdp-legacy-body strong { color: var(--ink); }
.pdp-legacy-body sup { font-size: 0.9em; vertical-align: super; margin-left: 0.18em; }
.pdp-legacy-body ul { margin: 0 0 0.7rem; padding-left: 1.35rem; list-style: disc outside; }
.pdp-legacy-body li { margin: 0.2rem 0; }
.pdp-legacy-body li::marker { color: var(--legacy-gold-dim); }
.pdp-legacy-body p:has(+ .pdp-legacy-quote) { font-weight: 700; color: var(--ink); }
.pdp-legacy-body blockquote.pdp-legacy-quote { position: relative; margin: 0.1rem 0 0.9rem 0.5rem; padding: 0.15rem 0.6rem 0.15rem 2.5rem; font-style: italic; font-size: 1.075rem; line-height: 1.5; color: var(--ink); }
.pdp-legacy-body blockquote.pdp-legacy-quote::before { content: "\201C"; position: absolute; left: 0.3rem; top: 0.35rem; font-family: Georgia, "Times New Roman", serif; font-style: normal; font-size: 2.7rem; line-height: 1; color: var(--legacy-gold-dim); }
/* .pdp-legacy-exp and .pdp-legacy-tag are the same shimmering gold lockup and
   differ only in top margin - declared once so they cannot drift apart. */
.pdp-legacy-body .pdp-legacy-exp,
.pdp-legacy-body .pdp-legacy-tag { text-align: center; font-weight: 800; font-size: 1.3125rem; letter-spacing: 0.01em; line-height: 1.28; background: var(--grad-gold-shimmer); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: legacyTagShimmer 3s linear infinite; }
.pdp-legacy-body .pdp-legacy-exp { margin: 0.95rem 0 0; }
.pdp-legacy-body .pdp-legacy-tag { margin: 0; }
.pdp-legacy-body .pdp-legacy-brand { font-weight: 800; background: var(--grad-spectrum); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* Fallback for engines without background-clip:text - without this the gradient
   text renders fully transparent, i.e. invisible. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .pdp-legacy-body .pdp-legacy-brand,
  .pdp-legacy-body .pdp-legacy-exp,
  .pdp-legacy-body .pdp-legacy-tag { color: var(--legacy-gold); -webkit-text-fill-color: currentColor; background: none; }
}
.pdp-legacy-body .pdp-legacy-tag::after { content: ""; display: inline-block; vertical-align: -0.35em; width: 1.55em; height: 1.55em; margin-left: 0.42em; background: var(--grad-spectrum); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202l1.9%205.6L19.5%209.5l-5.6%201.9L12%2017l-1.9-5.6L4.5%209.5l5.6-1.9L12%202z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202l1.9%205.6L19.5%209.5l-5.6%201.9L12%2017l-1.9-5.6L4.5%209.5l5.6-1.9L12%202z'/%3E%3C/svg%3E") center/contain no-repeat; animation: legacyTagIcon 1.6s ease-in-out infinite; transform-origin: center; }
@keyframes legacyTagShimmer { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@keyframes legacyTagIcon { 0%, 100% { transform: rotate(-5deg) scale(1); } 50% { transform: rotate(-20deg) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .pdp-legacy-body .pdp-legacy-tag, .pdp-legacy-body .pdp-legacy-tag::after { animation: none; } }
.pdp-desc-block { color: var(--ink-2); line-height: 1.7; margin-top: var(--space-5); }
.pdp-desc-block p { margin-top: var(--space-4); }
.pdp-desc-block p:first-child { margin-top: 0; }
.pdp-desc-block b, .pdp-desc-block strong { color: var(--ink); }
.pdp-cat { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); }
.pdp-price { display: flex; align-items: baseline; gap: var(--space-2); margin-block: var(--space-4); }
.pdp-price .price { font-size: 2rem; }
.pdp-ml { color: var(--brand); font-weight: 600; font-size: 1.15rem; }
/* strain badge under the PDP title - 30% larger than the default chip */
.pdp-info .chip-strain { height: 31px; padding: 0 13px; font-size: 0.975rem; gap: 8px; }
.pdp-info .chip-strain::before { width: 10px; height: 10px; }
.pdp-desc { color: var(--ink-2); font-size: 1.0625rem; max-width: 60ch; }
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-block: var(--space-5); }
.spec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-4); text-align: center; }
.spec .k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand); font-weight: 600; }
.spec .v { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin-top: 2px; }
.effect-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-4); }
/* PDP "Properties" list chips 50% larger than the base .chip, with a slightly lighter fill */
.pdp-info .effect-row { justify-content: center; }
.pdp-info .effect-row .chip { height: 36px; padding: 0 15px; font-size: calc(var(--fs-xs) * 1.5); gap: 9px; background: color-mix(in oklch, var(--ink) 9%, transparent); }
.buy-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); }
.bulk { border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: var(--space-3) var(--space-4); background: var(--bg-2); }
.bulk-head { display: flex; align-items: center; gap: 8px; font-size: 1.0625rem; font-weight: 600; margin-bottom: var(--space-3); }
.bulk-head svg { width: 20px; height: 20px; color: var(--brand); flex-shrink: 0; }
.bulk-head b { color: var(--brand); }
.bulk-tiers { display: flex; flex-wrap: wrap; gap: 6px; }
.bulk-tier { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; min-width: 46px; padding: 6px 4px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); transition: all var(--dur) var(--ease); }
.bulk-tier .q { font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand); font-weight: 700; }
.bulk-tier b { font-family: var(--font-display); font-size: 0.95rem; color: var(--ink); }
.bulk-tier.active { border-color: var(--brand); background: var(--brand-soft); }
.bulk-tier.active .q { color: var(--brand); }
.bulk-tier.active b { color: var(--brand); }
.drawer-disc { color: var(--success); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-2); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-pill); overflow: hidden; }
.qty button { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); transition: background var(--dur) var(--ease); }
.qty button:hover { background: var(--surface-2); }
.qty span { min-width: 40px; text-align: center; font-weight: 600; }
.buy-row { display: flex; gap: var(--space-3); align-items: center; }
/* was an inline style on the element; see product.redesign.php */
.buy-box .freeship { width: 70%; margin-inline: auto; }
.trust-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); }
.hw { margin-top: var(--space-4); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-4) var(--space-5); background: var(--surface); }
.hw-head { display: flex; align-items: center; gap: 9px; font-size: 1rem; font-weight: 600; margin-bottom: var(--space-3); }
.hw-head svg { width: 21px; height: 21px; color: var(--brand); flex-shrink: 0; }
.hw-head b { color: var(--brand); }
.hw-list { display: flex; flex-direction: column; gap: 7px; }
.hw-list li { position: relative; padding-left: 18px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.hw-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 2px; background: var(--brand); }
.hw-link { display: inline-block; margin-top: var(--space-3); font-size: var(--fs-sm); font-weight: 600; color: var(--brand); }
.hw-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.trust-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--ink-2); }
.trust-item svg { width: 18px; height: 18px; color: var(--success); flex-shrink: 0; }

/* =========================================================================
   Trust / features band
   ========================================================================= */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.feature { padding: var(--space-5); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.feature .fi { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; margin-bottom: var(--space-3); }
.feature .fi svg { width: 22px; height: 22px; }
.feature h3 { font-size: 1.0625rem; }
.feature p { color: var(--ink-2); font-size: var(--fs-sm); margin-top: var(--space-1); }
/* trust band ("Why thousands reorder from us"): larger, centered icons */
.trust-band .feature { text-align: center; }
.trust-band .feature .fi { width: 64px; height: 64px; margin-inline: auto; margin-bottom: var(--space-4); }
.trust-band .feature .fi svg { width: 34px; height: 34px; }

/* article teaser */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.article { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.article:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.article .a-thumb { position: relative; display: block; margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-1); border-radius: var(--r-md) var(--r-md) 0 0; overflow: hidden; aspect-ratio: 16 / 10; background: var(--line); }
.article .a-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur) var(--ease); }
.article:hover .a-thumb img { transform: scale(1.04); }
.article .a-new { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; background: var(--notify); color: #fff; font-size: var(--fs-xs); font-weight: 800; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.28); }
.article .a-new .a-new-ic { width: 12px; height: 12px; color: #ffd21a; flex: none; }
.article-hero { margin: var(--space-4) 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.article-hero img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
/* self-hosted hero video: poster fills like the image; overlaid play button */
.article-hero--video { position: relative; }
.article-hero--video video { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.hero-play { position: absolute; inset: 0; margin: auto; width: 120px; height: 120px; border: 4px solid #fff; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: #fff; background: oklch(0.44 0.15 18); box-shadow: 0 10px 40px rgba(0,0,0,.55), 0 0 0 6px rgba(0,0,0,.18); animation: heroPulse 2.6s var(--ease) infinite alternate; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.hero-play:hover { transform: scale(1.08); background: oklch(0.34 0.12 16); animation: none; }
.hero-play:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
/* bigger, optically-centred play triangle */
.hero-play svg { width: 64px; height: 64px; margin-left: 4px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
@keyframes heroPulse { from { background-color: oklch(0.51 0.19 26); } to { background-color: oklch(0.37 0.13 16); } } /* red -> bordeaux */
@media (prefers-reduced-motion: reduce) { .hero-play { animation: none; } }
/* mobile: play button at 70% (was 96px) */
@media (max-width: 640px) { .hero-play { width: 67px; height: 67px; border-width: 2px; box-shadow: 0 7px 28px rgba(0,0,0,.55), 0 0 0 4px rgba(0,0,0,.18); } .hero-play svg { width: 36px; height: 36px; margin-left: 3px; } }
.article-hero--video.is-playing .hero-play { display: none; }
.article-video { max-width: 720px; margin: var(--space-5) auto 0; }
.article-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-md); display: block; }
.article-related { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.article .a-cat { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand); }
.article h3 { font-size: 1.1875rem; }
.article p { color: var(--ink-2); font-size: var(--fs-sm); }
.article .a-read { margin-top: auto; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }

/* ---- thank-you (order success) page ---- */
#tyConfetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: var(--z-toast); }
.thankyou { max-width: 660px; margin: 0 auto; text-align: center; padding: clamp(2rem, 6vw, 4.5rem) var(--space-4); position: relative; z-index: 1; }
.ty-badge { width: 88px; height: 88px; margin: 0 auto var(--space-4); border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--success), oklch(0.72 0.16 155)); box-shadow: 0 14px 34px color-mix(in oklch, var(--success) 42%, transparent); animation: tyPop 0.6s var(--ease) both; }
.ty-badge svg { width: 44px; height: 44px; }
.ty-eyebrow { color: var(--success); }
.ty-h { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -0.02em; margin: var(--space-2) 0 var(--space-3); }
.ty-sub { color: var(--ink-2); font-size: var(--fs-body); max-width: 46ch; margin: 0 auto var(--space-4); line-height: 1.6; }
.ty-order { display: inline-block; margin-bottom: var(--space-3); padding: var(--space-2) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: var(--fs-sm); }
.ty-order b { color: var(--brand); }
.ty-email { color: var(--ink-2); font-size: var(--fs-sm); margin-bottom: var(--space-5); }
.ty-email b { color: var(--ink); }
.ty-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-5); }
.ty-step { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; }
.ty-step svg { width: 20px; height: 20px; color: var(--brand); flex: 0 0 auto; }
.ty-cta { display: flex; justify-content: center; }
@keyframes tyPop { 0% { transform: scale(0); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ty-badge { animation: none; } }

/* =========================================================================
   Cart page & drawer
   ========================================================================= */
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-6); align-items: start; }
/* Grid items default to min-width:auto, and the country <select> reports a
   min-content width as wide as its longest country name - which dragged the
   whole cart column past the viewport on phones. Options are not layout boxes,
   so this width is invisible in the DOM tree; it has to be capped here. */
.cart-layout > * { min-width: 0; }
.checkout-form .field { min-width: 0; }
.checkout-form select, .checkout-form .select { min-width: 0; max-width: 100%; }
/* The native select arrow renders hard against the right edge, which collides
   with the pill radius. Drop it and draw our own chevron, with padding-right
   reserved so a long country name never runs underneath it.
   (width/height/padding were inline on the element - see cart/index.redesign.php.) */
.checkout-form select {
  width: 100%; height: auto;
  padding: var(--space-3) var(--space-4);
  padding-right: 2.75rem;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c3bb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 14px 14px;
}
/* /contact-us + /wholesale: two even columns on desktop only. Kept in a min-width
   query so the shared .cart-layout single-column rule still wins on mobile. */
@media (min-width: 1001px) { .form-layout { grid-template-columns: 1fr 1fr; } }
/* Turnstile renders a fixed 300px iframe; keep it from pushing narrow screens. */
.cf-turnstile { max-width: 100%; overflow-x: auto; }
.cart-lines { display: flex; flex-direction: column; }
.cart-line { display: grid; grid-template-columns: 88px 1fr auto; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); align-items: center; }
.cart-line-media { width: 88px; height: 88px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; padding: 8px; }
.cart-line-media img { width: 100%; object-fit: contain; }
.cart-line-info h3 { font-size: 1.0625rem; }
.cart-line-info .meta { font-size: var(--fs-sm); color: var(--brand); font-weight: 500; }
.cart-line-actions { display: flex; flex-direction: column; align-items: end; gap: var(--space-2); }
/* were inline styles on the elements; see cart/index.redesign.php */
.cart-main .freeship { width: 70%; margin: 1.25rem auto 0; }
.cart-main .bulk { width: 70%; margin: 1rem auto 0; }
.link-danger { color: var(--muted); font-size: var(--fs-sm); transition: color var(--dur) var(--ease); }
.link-danger:hover { color: var(--brand); }
.summary { position: sticky; top: var(--sticky-top); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--space-5); }
.summary h2 { font-size: var(--fs-h3); margin-bottom: var(--space-4); }
.summary-row { display: flex; justify-content: space-between; padding: var(--space-2) 0; color: var(--ink-2); font-size: var(--fs-sm); }
.summary-row .delivery-free { color: var(--success); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--space-4); margin-top: var(--space-2); border-top: 1px solid var(--line); }
.summary-total .price { font-size: 1.6rem; }
.summary-submit { margin-top: var(--space-4); }

/* free-ship progress */
.freeship { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-4); margin-bottom: var(--space-4); }
.freeship p { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: var(--space-3); display: flex; align-items: center; gap: 8px; }
.ship-alert-ic { width: 20px; height: 20px; color: var(--warning); flex-shrink: 0; transform-origin: center; transform: rotate(15deg); animation: alertShake 1.1s ease-in-out infinite; }
.ship-done-ic { width: 21px; height: 21px; color: var(--brand); flex-shrink: 0; animation: alertPulse 1.3s ease-in-out infinite; }
@keyframes alertPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.28); } }
@keyframes alertShake { 0%, 100% { transform: rotate(9deg) scale(1); } 50% { transform: rotate(21deg) scale(1.24); } }
@media (prefers-reduced-motion: reduce) { .ship-alert-ic, .ship-done-ic { animation: none; } }
.freeship p b { color: var(--ink); }
/* "away" state - attention alert */
.freeship:not(.done) { border: 1.5px solid color-mix(in oklch, var(--warning) 55%, transparent); background: color-mix(in oklch, var(--warning) 13%, var(--bg-2)); }
.freeship:not(.done) p { color: var(--ink); font-weight: 500; }
.freeship:not(.done) p b { color: var(--warning); font-weight: 800; }
/* "unlocked" state - success */
.freeship.done { border: 1.5px solid color-mix(in oklch, var(--success) 50%, transparent); background: color-mix(in oklch, var(--success) 11%, var(--bg-2)); }
.freeship.done p b { color: var(--success); }
.progress { height: 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
/* Fill uses transform:scaleX (GPU-composited) rather than width, to avoid layout thrash.
   An animated sheen moves along the gradient to make progress feel alive. */
.progress > span { display: block; height: 100%; width: 100%; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, var(--brand-strong), var(--brand) 45%, oklch(0.9 0.06 90) 50%, var(--brand) 55%, var(--brand-strong)); background-size: 220% 100%; transition: transform 400ms var(--ease); animation: shipSheen 1.9s linear infinite; }
.freeship.done .progress > span { background: linear-gradient(90deg, oklch(0.7 0.15 150), var(--success) 45%, oklch(0.92 0.08 150) 50%, var(--success) 55%, oklch(0.7 0.15 150)); background-size: 220% 100%; }
@keyframes shipSheen { from { background-position: 220% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .progress > span { animation: none; } }

/* drawer (cart) */
.drawer-backdrop { position: fixed; inset: 0; z-index: var(--z-drawer-backdrop); background: oklch(0 0 0 / 0.55); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); }
.drawer-backdrop.open { opacity: 1; visibility: visible; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); z-index: var(--z-drawer); background: var(--bg-2); border-left: 1px solid var(--line); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--dur) var(--ease); }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5); border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: var(--fs-h3); }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--space-5); }
.drawer-foot { padding: var(--space-5); border-top: 1px solid var(--line); background: var(--bg-2); }
.drawer-empty { text-align: center; color: var(--ink-2); padding: var(--space-8) var(--space-4); }
.drawer-empty svg { width: 48px; height: 48px; color: var(--muted); margin: 0 auto var(--space-4); }
.mini-line { display: grid; grid-template-columns: 60px 1fr auto; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); align-items: center; }
.mini-line-media { width: 60px; height: 60px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; padding: 6px; }
.mini-line h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); }
.mini-line .meta { font-size: var(--fs-xs); color: var(--muted); }
.mini-line { border-radius: var(--r-sm); padding-inline: var(--space-2); margin-inline: calc(-1 * var(--space-2)); }
.mini-line.just-added { animation: lineFlash 1400ms var(--ease); }
@keyframes lineFlash { 0% { background: var(--brand-soft); } 100% { background: transparent; } }

/* Fly-to-cart clone (Shopify-style add-to-cart motion) */
.fly-clone { position: fixed; z-index: var(--z-toast); pointer-events: none; object-fit: contain; border-radius: var(--r-sm); transition: transform 620ms var(--ease), opacity 620ms var(--ease); will-change: transform, opacity; filter: drop-shadow(0 12px 22px oklch(0 0 0 / 0.5)); }

/* =========================================================================
   Age gate (dialog)
   ========================================================================= */
dialog { border: none; padding: 0; background: transparent; color: inherit; max-width: 100vw; max-height: 100vh; margin: auto; inset: 0; } /* margin:auto restores modal centering that the global *{margin:0} reset removed */
dialog::backdrop { background: oklch(0.1 0.01 55 / 0.82); backdrop-filter: blur(6px); }
.agegate { width: min(440px, 92vw); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: var(--space-7) var(--space-6); text-align: center; box-shadow: var(--shadow-3); }
.agegate .logo { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.03em; margin-bottom: var(--space-5); }
.agegate .logo b { color: var(--brand); }
.agegate h2 { font-size: 1.6rem; }
.agegate p { color: var(--ink-2); margin-top: var(--space-3); font-size: var(--fs-sm); }
.agegate .gate-actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.agegate .fineprint { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--space-5); }

/* =========================================================================
   Toast
   ========================================================================= */
.toast-wrap { position: fixed; left: 50%; bottom: var(--space-6); transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: var(--space-3); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: var(--space-3) var(--space-5); box-shadow: var(--shadow-3); font-size: var(--fs-sm); font-weight: 500; transform: translateY(12px); opacity: 0; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.toast.show { transform: translateY(0); opacity: 1; }
.toast svg { width: 18px; height: 18px; color: var(--success); }

/* =========================================================================
   Customer reviews marquee
   ========================================================================= */
.reviews { padding-block: clamp(var(--space-7), 8vw, var(--space-9)); border-top: 1px solid var(--line); overflow: hidden; }
.reviews-head { margin-bottom: var(--space-6); }
.reviews-head .eyebrow { display: block; margin-bottom: var(--space-2); }
.reviews-head .rev-score { color: oklch(0.88 0.06 82); font-weight: 800; font-size: 1.4em; letter-spacing: 0; }
.reviews-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.reviews-track { display: flex; gap: var(--space-4); width: max-content; animation: reviewScroll 80s linear infinite; }
.reviews-marquee:hover .reviews-track { animation-play-state: paused; }
@keyframes reviewScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Testimonials are deliberately light "paper" cards against the dark canvas.
   That inverts the palette, so the sub-theme is declared once here rather than
   scattered as loose hex - and its neutrals are warm-tinted to match the brand
   (the quote glyph used to be a cool blue, the one off-palette value on the page). */
.review {
  --rv-paper: oklch(0.98 0.005 75);
  --rv-ink: oklch(0.26 0.010 60);
  --rv-ink-2: oklch(0.54 0.012 60);
  --rv-watermark: oklch(0.90 0.022 80);
  --rv-star: oklch(0.78 0.15 70);
  position: relative; flex: 0 0 360px; width: 360px;
  background: var(--rv-paper); border: 1px solid oklch(0 0 0 / 0.05);
  border-radius: var(--r-lg); padding: var(--space-6) var(--space-6) var(--space-5);
  box-shadow: 0 14px 34px -10px oklch(0 0 0 / 0.5);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.review-quote { position: absolute; top: 0.7rem; right: 1.4rem; font-family: var(--font-display); font-weight: 700; font-size: 3.6rem; line-height: 1; color: var(--rv-watermark); pointer-events: none; }
.review-stars { display: flex; gap: 3px; color: var(--rv-star); }
.review-stars svg { width: 18px; height: 18px; }
.review-text { color: var(--rv-ink); font-size: 1.0625rem; line-height: 1.6; flex: 1; }
.review-author { display: flex; align-items: center; gap: var(--space-3); }
.review-photo { position: relative; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, var(--brand-strong), oklch(0.60 0.065 82)); display: grid; place-items: center; }
.review-photo::before { content: attr(data-initials); color: var(--rv-paper); font-weight: 700; font-size: 0.9rem; }
.review-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.review-who { display: flex; flex-direction: column; line-height: 1.3; }
.review-who b { color: var(--rv-ink); font-size: 1rem; font-weight: 700; }
.review-who span { color: var(--rv-ink-2); font-size: 0.85rem; }
@media (prefers-reduced-motion: reduce) { .reviews-track { animation: none; } }

/* =========================================================================
   Footer
   ========================================================================= */
.footer { background: var(--bg-2); border-top: 1px solid var(--line); margin-top: var(--space-8); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-6); padding-block: var(--space-8) var(--space-6); }
.footer-brand .brand-wordmark { font-size: 1.5rem; }
.footer-brand p { color: var(--ink-2); font-size: var(--fs-sm); margin-top: var(--space-3); max-width: 36ch; }
.footer-col h4 { font-family: var(--font-body); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand); margin-bottom: var(--space-3); }
.footer-col a { display: block; color: var(--ink-2); font-size: var(--fs-sm); padding: var(--space-1) 0; transition: color var(--dur) var(--ease); }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-5); border-top: 1px solid var(--line); flex-wrap: wrap; color: var(--muted); font-size: var(--fs-sm); }
.footer-bottom .pays { display: flex; gap: var(--space-2); align-items: center; }
.pay-badge { height: 26px; padding: 0 10px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); letter-spacing: 0.03em; }
.age-badge { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--brand); color: var(--brand); font-weight: 800; font-size: var(--fs-sm); }

/* =========================================================================
   Breadcrumb
   ========================================================================= */
.crumb { display: flex; gap: var(--space-2); align-items: center; font-size: var(--fs-sm); color: var(--muted); padding-block: var(--space-4); }
.crumb a:hover { color: var(--ink); }
.crumb svg { width: 14px; height: 14px; }

/* =========================================================================
   Reveal (progressive enhancement over already-visible content)
   ========================================================================= */
/* Reveal ENHANCES already-visible content. The hidden state applies only once JS
   has confirmed it will manage it (html.reveal-init) AND armed a failsafe, so a
   headless/background render or a JS failure never ships a blank section. */
.reveal { opacity: 1; }
html.reveal-init .reveal:not(.in) { opacity: 0; transform: translateY(16px); }
html.reveal-init .reveal { transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
html.reveal-init .reveal.in { opacity: 1; transform: none; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-media { max-width: 420px; justify-self: center; margin-inline: auto; order: -1; }
  .pdp { grid-template-columns: 1fr; gap: var(--space-5); }
  .pdp-gallery { position: static; }
  .cart-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* Card add-to-cart collapses to the bag icon from tablet width down. Below this
   the price + label no longer fit comfortably side by side, and the label length
   varies a lot per language (de "Hinzufügen", lu "Dobäisetzen"), so dropping the
   text keeps every locale identical instead of tuning 27 strings to the pixel.
   aria-label carries the accessible name. */
@media (max-width: 900px) {
  .card-foot .btn-add { min-height: 36px; padding: 0; width: 40px; flex: none; justify-content: center; }
  .card-foot .btn-add .btn-add-label { display: none; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .nav-toggle { display: inline-grid; }
  /* "Shop all" next to "You might also like": on a phone the carousel already ends in
     the category, and the ghost button crowded the heading. Scoped to .section-related
     so the identical buttons on the home page sections are untouched. */
  .section-related .section-head .btn { display: none; }
  .header-bar { padding-left: 1.25rem; position: relative; }
  /* mobile: logo at 70% of its size */
  .site-logo { height: 39px !important; }
  /* Mobile nav panel. The JS toggles .nav.mobile-open but nothing styled it,
     so the hamburger did nothing - the nav stayed display:none. */
  .nav.mobile-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: calc(100% + 8px); left: 0.75rem; right: 0.75rem;
    margin-left: 0; gap: 2px; z-index: var(--z-header);
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: var(--space-2);
    box-shadow: var(--shadow-3);
  }
  .nav.mobile-open a { padding: var(--space-3); border-radius: var(--r-sm); }
  .nav.mobile-open a::after { display: none; }
  .nav.mobile-open a:hover, .nav.mobile-open a[aria-current="page"] { background: var(--surface); }
  /* Anchor the language popover to the header bar, not to the lang button:
     the button is not the rightmost item (cart + burger sit after it), so
     right:0 on the button pushed the menu visibly off to the left. */
  .lang-switch { position: static; }
  .lang-menu { top: calc(100% + 8px); right: 0.75rem; width: min(300px, calc(100vw - 1.5rem)); max-width: none; }
  .shop-layout { grid-template-columns: 1fr; }
  .shop-seo { padding-inline: 0; }
  .filters { position: fixed; inset: 0 0 0 auto; width: min(320px, 90vw); z-index: var(--z-drawer); background: var(--bg-2); border-left: 1px solid var(--line); padding: var(--space-6); transform: translateX(100%); transition: transform var(--dur) var(--ease); overflow-y: auto; }
  .filters.open { transform: translateX(0); box-shadow: var(--shadow-3); }
  .filter-toggle { display: inline-flex; }
  .cat-grid, .article-grid { grid-template-columns: 1fr; }
  /* mobile: hero product images at 80% of their size */
  .hero-media { max-width: 336px; }
  /* mobile: hero headline at 70% of its size */
  .hero h1 { font-size: clamp(1.4rem, 3.08vw, 2.38rem); }
}
@media (max-width: 560px) {
  .cat-grid { grid-template-columns: 1fr; }
  /* trust band: 2x2 instead of a 4-row stack, tighter cards + smaller icons */
  .feature-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .feature { padding: var(--space-3); }
  .trust-band .feature .fi { width: 40px; height: 40px; margin-bottom: var(--space-2); }
  .trust-band .feature .fi svg { width: 22px; height: 22px; }
  .feature h3 { font-size: 0.9375rem; line-height: 1.25; }
  .feature p { font-size: 0.8125rem; line-height: 1.4; }
  /* Footer: 2x2 instead of one long stack. Brand leads, link columns fill around it:
        [ brand   ] [ Shop ]
        [ Company ] [ Help ]
     DOM order stays brand -> Shop -> Help -> Company; only the visual placement
     is reordered here. */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-4); padding-block: var(--space-6) var(--space-5); align-items: start; }
  .footer-brand                { grid-column: 1; grid-row: 1; }
  .footer-grid > :nth-child(2) { grid-column: 2; grid-row: 1; margin-top: 27px; }  /* Shop */
  .footer-grid > :nth-child(4) { grid-column: 1; grid-row: 2; }  /* Company */
  .footer-grid > :nth-child(3) { grid-column: 2; grid-row: 2; }  /* Help    */
  .footer-col h4 { margin-bottom: var(--space-2); }
  .footer-col a { font-size: 0.8125rem; padding: 5px 0; }
  .spec-grid { grid-template-columns: 1fr 1fr; }
  .pdp-info h1 { font-size: 2rem; }
  .hero h1 { font-size: clamp(1.575rem, 7.7vw, 2.1rem); }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); }
  /* Cart line: the thumb kept its fixed 88px while the column had already been
     narrowed to 64px, so every line was 39px wider than the screen and pushed
     the whole page sideways. Match the thumb to the column and let the text
     column actually shrink (grid items default to min-width:auto). */
  .cart-line { grid-template-columns: 64px 1fr; gap: var(--space-3); padding: var(--space-3) 0; }
  .cart-line > * { min-width: 0; }
  .cart-line-media { width: 64px; height: 64px; padding: 5px; }
  .cart-line-info h3 { font-size: 0.9375rem; line-height: 1.25; }
  .cart-line-info .meta { font-size: 0.8125rem; }
  .cart-line-actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  /* smaller +/- stepper on the cart lines (PDP keeps the full-size one) */
  .cart-line .qty button { width: 34px; height: 34px; }
  .cart-line .qty span { min-width: 28px; font-size: 0.875rem; }
  /* free-shipping + bulk boxes full width instead of the desktop 70% */
  .cart-main .freeship, .cart-main .bulk { width: 100%; }
  .section-head { flex-direction: column; align-items: start; }

  /* ---- product cards: tighter, bigger image, price + add button on one row ---- */
  /* 1. less dead space around the product shot */
  .card-media { padding: var(--space-1); }
  .card-media img { width: 90%; }
  .card-body { padding: var(--space-3); gap: 6px; }
  /* 2. smaller product title */
  .card h3 { font-size: 0.9375rem; line-height: 1.25; }
  /* 6. "93% HCT - 7% Terpenes" small enough to stay on one line */
  .card .blurb { font-size: 0.6875rem; line-height: 1.3; -webkit-line-clamp: 1; }
  /* 5. compact effect badges */
  .card-effects { gap: 4px; }
  .card-effects .chip { height: 19px; padding: 0 7px; font-size: 0.625rem; gap: 4px; }
  .card-effects .chip-strain::before { width: 6px; height: 6px; }
  .card-meta .chip { height: 19px; padding: 0 7px; font-size: 0.625rem; }
  .card-cat { font-size: 0.625rem; }
  /* 3 + 4. icon-only add button, smaller price, both fit on a single row */
  .card-foot { padding-top: var(--space-2); gap: var(--space-2); }
  .price { font-size: 1rem; }
  .price small { font-size: 0.6875rem; }
  .price-old { font-size: 0.6875rem; margin-left: 4px; }
  .card-foot .btn-add { min-height: 34px; width: 38px; }  /* icon-only comes from the 900px block */

  /* "Rated 4.9/5 by 35 000+ Happy Customers since 2023" on a single line.
     Sized off the viewport so it still fits on a 320px screen; the highlighted
     numbers come down from 1.4em too, since they drive most of the width. */
  .reviews-head .eyebrow { font-size: clamp(0.5625rem, 3vw, 0.75rem); white-space: nowrap; }
  .reviews-head .rev-score { font-size: 1.25em; }

  /* "0% THC. Maximum Flavour & Emotion" on a single line. Sized off the viewport
     so it still fits at 320px; the star shrinks with it (it is sized in em). */
  .pdp-legacy-body .pdp-legacy-tag { font-size: clamp(0.625rem, 3.7vw, 1.05rem); white-space: nowrap; }
  .pdp-legacy-body .pdp-legacy-tag::after { width: 1.35em; height: 1.35em; margin-left: 0.3em; }
  .pdp-legacy-body .pdp-legacy-exp { font-size: clamp(0.75rem, 4.2vw, 1.2rem); }

  /* ---- product page: stop the horizontal overflow ----
     Grid items default to min-width:auto, so the .pdp column was sized to its
     widest min-content (453px inside a 358px grid) and pushed the whole page
     ~79px past the viewport. Two things drove that width: the free-shipping
     box's percentage width (a 70% box makes the container content/0.7) and the
     qty + add-to-bag row refusing to shrink. */
  .pdp > * { min-width: 0; }
  .buy-box .freeship { width: 100%; }
  /* qty on its own centered row, add-to-bag full width underneath */
  .buy-row { flex-direction: column; align-items: stretch; }
  .buy-row .qty { align-self: center; }
  /* .btn is white-space:nowrap, so on a 320px screen "Add to bag - EUR 40.00"
     could not break and spilled past the viewport; let it wrap and tighten the
     side padding instead. */
  .buy-row .btn-lg { min-width: 0; width: 100%; white-space: normal; padding: 0 var(--space-3); }
  /* free-shipping line on one row, down to a 320px screen */
  .buy-box { padding: var(--space-3); }
  .freeship { padding: var(--space-3); }
  .freeship p { font-size: clamp(0.625rem, 3vw, 0.8125rem); gap: 6px; margin-bottom: var(--space-2); }
  .freeship p svg { flex: none; }

  /* breadcrumbs on one line: smaller, and the product name truncates */
  .crumb { font-size: 0.75rem; padding-block: var(--space-2); gap: 4px; }
  .crumb a { white-space: nowrap; }
  .crumb > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .crumb svg { width: 12px; height: 12px; flex: none; }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .ticker-track { animation: none; justify-content: space-around; width: 100%; }
  html.reveal-init .reveal, html.reveal-init .reveal:not(.in) { opacity: 1; transform: none; }
  .card:hover { transform: none; }
  .card:hover .card-media img { transform: none; }
}

/* ---- Prose (content/legal pages ported into the redesign chrome) ---- */
.prose { max-width: 75ch; }
.prose.wide { max-width: 100%; }
.prose h1, .prose h2, .prose h3, .prose h4 { font-family: var(--font-display); letter-spacing: -0.02em; margin: 1.6em 0 0.5em; line-height: 1.15; }
.prose h1 { font-size: var(--fs-h1); margin-top: 0; }
.prose h2 { font-size: var(--fs-h2); }
.prose h3 { font-size: var(--fs-h3); }
.prose h4 { font-size: 1.05rem; }
.prose .block-title span, .prose h2.block-title span { color: var(--ink); }
.prose p, .prose li { color: var(--ink-2); line-height: 1.7; }
.prose p { margin: 0 0 1em; }
/* NOT display:flex here - it turns the <li>s into flex items, which drops their
   list-item display and with it ::marker, so the bullets silently disappeared. */
.prose ul { margin: 0 0 1em 1.25em; list-style: disc outside; }
.prose ol { margin: 0 0 1em 1.25em; list-style: decimal outside; }
.prose li { display: list-item; margin-bottom: 0.35em; }
.prose li::marker { color: var(--brand); }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--brand-strong); }
.prose strong, .prose b { color: var(--ink); }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2rem 0; }
.prose img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.prose th, .prose td { border: 1px solid var(--line); padding: var(--space-3); text-align: left; color: var(--ink-2); }
.prose th { color: var(--ink); background: var(--surface); }
/* neutralise legacy Bootstrap helpers that assumed a light theme */
.prose .header-hero { background: none !important; color: var(--ink) !important; padding: 0 !important; }
.prose .bg-light { background: var(--surface) !important; }
.prose .text-primary { color: var(--brand) !important; }
.prose .text-muted { color: var(--muted) !important; }
.page-hero { text-align: center; padding: var(--space-8) 0 var(--space-6); }
.page-hero h1 { font-size: var(--fs-hero); }
.page-hero p { color: var(--ink-2); max-width: 60ch; margin: 0.5rem auto 0; }