/* ==========================================================================
   VOLTAGE — base stylesheet
   --------------------------------------------------------------------------
   How the three looks work
   · Colours, fonts and sizes are CSS variables written by
     snippets/css-variables.liquid from Theme settings (--c-*, --font-*, …).
   · Anything that changes SHAPE is a data attribute on <html>
     (data-corner, data-btn, data-card, data-badge, data-shadow, data-banner,
     data-texture, data-hfx, data-dfx, data-label, data-quote, data-imgfx).
   · Components never read the --c-* palette directly. They read the local
     "scheme" variables (--bg, --fg, --panel, --line, --acc, --on-acc), so any
     section can be repainted by giving it another .scheme-* class.

   Contents
   01 Tokens + colour schemes      07 Forms
   02 Reset + base                 08 Badges, chips, misc
   03 Textures + image treatments  09 Drawers + modals
   04 Typography + headings        10 Announcement bar
   05 Layout + utilities           11 Header + navigation
   06 Frames, corners, buttons     12 Footer
   ========================================================================== */

/* ---------------------------------------------------------------------------
   01  Tokens + colour schemes
   ------------------------------------------------------------------------ */
:root {
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 0px;
  --radius-sm: 0px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --header-h: 64px;
  --z-header: 40;
  --z-sticky: 35;
  --z-drawer: 100;
  --z-modal: 110;
  --tap: 44px;
}

:root,
.scheme-base {
  --bg: var(--c-bg);
  --fg: var(--c-text);
  --panel: var(--c-surface);
  --line: var(--c-line);
  --acc: var(--c-accent);
  --on-acc: var(--c-on-accent);
  --hl: var(--c-accent-2);
  --sale-text: var(--c-sale);
}
.scheme-surface {
  --bg: var(--c-surface);
  --fg: var(--c-text);
  --panel: var(--c-bg);
  --line: var(--c-line);
  --acc: var(--c-accent);
  --on-acc: var(--c-on-accent);
  --hl: var(--c-accent-2);
  --sale-text: var(--c-sale);
}
.scheme-invert {
  --bg: var(--c-text);
  --fg: var(--c-bg);
  --panel: var(--c-text);
  --line: var(--c-bg);
  --acc: var(--c-accent);
  --on-acc: var(--c-on-accent);
  --hl: var(--c-accent-2);
  --sale-text: var(--c-bg);
}
.scheme-accent {
  --bg: var(--c-accent);
  --fg: var(--c-on-accent);
  --panel: var(--c-accent);
  --line: var(--c-on-accent);
  --acc: var(--c-on-accent);
  --on-acc: var(--c-accent);
  --hl: var(--c-bg);
  --sale-text: var(--c-on-accent);
}
.scheme-accent-2 {
  --bg: var(--c-accent-2);
  --fg: var(--c-on-accent-2);
  --panel: var(--c-accent-2);
  --line: var(--c-on-accent-2);
  --acc: var(--c-on-accent-2);
  --on-acc: var(--c-accent-2);
  --hl: var(--c-text);
  --sale-text: var(--c-on-accent-2);
}
.scheme-accent-3 {
  --bg: var(--c-accent-3);
  --fg: var(--c-on-accent-3);
  --panel: var(--c-accent-3);
  --line: var(--c-on-accent-3);
  --acc: var(--c-on-accent-3);
  --on-acc: var(--c-accent-3);
  --hl: var(--c-text);
  --sale-text: var(--c-on-accent-3);
}
.scheme-header {
  --bg: var(--c-header-bg);
  --fg: var(--c-header-text);
  --panel: var(--c-header-bg);
  --line: var(--c-line);
  --acc: var(--c-accent);
  --on-acc: var(--c-on-accent);
}
.scheme-footer {
  --bg: var(--c-footer-bg);
  --fg: var(--c-footer-text);
  --panel: var(--c-footer-bg);
  --line: var(--c-footer-text);
  --acc: var(--c-accent);
  --on-acc: var(--c-on-accent);
  --hl: var(--c-accent-2);
}

/* Derived colours must be declared where --fg / --bg are declared, otherwise
   they would keep the root's values inside a repainted section. */
:root,
[class*="scheme-"] {
  --fg-muted: var(--fg);
  --hairline: var(--line);
  --wash: transparent;
}
@supports (color: color-mix(in srgb, red, blue)) {
  :root,
  .scheme-base,
  .scheme-surface,
  .scheme-invert,
  .scheme-header,
  .scheme-footer {
    --fg-muted: color-mix(in srgb, var(--fg) 72%, var(--bg));
  }
  :root,
  [class*="scheme-"] {
    --hairline: color-mix(in srgb, var(--fg) 16%, var(--bg));
    --wash: color-mix(in srgb, var(--fg) 6%, var(--bg));
  }
  .scheme-footer { --line: color-mix(in srgb, var(--fg) 28%, var(--bg)); }
  .scheme-invert { --panel: color-mix(in srgb, var(--fg) 8%, var(--bg)); }
  .scheme-accent,
  .scheme-accent-2,
  .scheme-accent-3 { --panel: color-mix(in srgb, var(--fg) 10%, var(--bg)); }
}

/* Corner construction */
html[data-corner="round"] { --radius: var(--corner); --radius-sm: calc(var(--corner) * .5); }
html[data-corner="square"],
html[data-corner="chamfer"] { --radius: 0px; --radius-sm: 0px; }

/* Shadow construction — --shadow for panels, --shadow-sm for controls */
:root { --shadow: none; --shadow-sm: none; --shadow-hover: none; }
/* Shadows are re-declared on every scheme so a repainted section shadows in its own line colour. */
:root, [class*="scheme-"] { --shadow-c: var(--line); }
html[data-shadow="color"], html[data-shadow="color"] [class*="scheme-"] { --shadow-c: var(--c-accent-2); }
html[data-shadow="hard"], html[data-shadow="hard"] [class*="scheme-"],
html[data-shadow="color"], html[data-shadow="color"] [class*="scheme-"] {
  --shadow: var(--sh) var(--sh) 0 var(--shadow-c);
  --shadow-sm: calc(var(--sh) * .66) calc(var(--sh) * .66) 0 var(--shadow-c);
  --shadow-hover: calc(var(--sh) * 1.5) calc(var(--sh) * 1.5) 0 var(--shadow-c);
}
html[data-shadow="glow"] {
  --shadow: 0 0 calc(var(--sh) * 5) color-mix(in srgb, var(--c-accent) 22%, transparent);
  --shadow-sm: 0 0 calc(var(--sh) * 2.5) color-mix(in srgb, var(--c-accent) 30%, transparent);
  --shadow-hover: 0 0 calc(var(--sh) * 7) color-mix(in srgb, var(--c-accent) 40%, transparent);
}
html[data-shadow="soft"] {
  --shadow: 0 calc(var(--sh) * 1.5) calc(var(--sh) * 5) rgba(0, 0, 0, .14);
  --shadow-sm: 0 calc(var(--sh) * .75) calc(var(--sh) * 2) rgba(0, 0, 0, .12);
  --shadow-hover: 0 calc(var(--sh) * 2.5) calc(var(--sh) * 7) rgba(0, 0, 0, .2);
}

/* ---------------------------------------------------------------------------
   02  Reset + base
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
html.is-locked { overflow: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  background-image: var(--texture-image, none);
  background-size: var(--texture-size, auto);
  background-position: var(--texture-position, 0 0);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: var(--font-body-weight);
  font-style: var(--font-body-style);
  font-size: var(--body-size);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
  counter-reset: voltage-section;
}
.main-content { flex: 1 0 auto; outline: none; overflow-x: clip; }
img, svg, video, iframe, model-viewer { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: max(1px, .08em); text-underline-offset: .18em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
.list-reset { list-style: none; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
hr { border: 0; border-top: var(--bw) solid var(--line); margin: 2rem 0; }
b, strong { font-weight: var(--font-body-bold); }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }
::selection { background: var(--acc); color: var(--on-acc); }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--fg);
  outline-offset: 3px;
}
/* A clip-path cuts an outline off, so clipped controls show focus inside. */
html[data-corner="chamfer"] :is(.btn, .field__control, .qty, .chip, .pill-input + label, .icon-btn--framed):focus-visible,
html[data-corner="chamfer"] :is(.field__control, .qty):focus-within {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--fg), inset 0 0 0 5px var(--bg);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: 12px; top: -80px;
  z-index: 1000;
  padding: 14px 20px;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-ui);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }
.no-js .js-only { display: none !important; }
.js .no-js-only { display: none !important; }

/* ---------------------------------------------------------------------------
   03  Textures + image treatments
   ------------------------------------------------------------------------ */
html[data-texture="scanlines"],
html[data-texture="scanlines"] [class*="scheme-"] {
  --texture-image: repeating-linear-gradient(to bottom,
    color-mix(in srgb, var(--fg) calc(var(--texture-strength) * 100%), transparent) 0 1px,
    transparent 1px 4px);
  --texture-size: auto;
}
html[data-texture="halftone"],
html[data-texture="halftone"] [class*="scheme-"] {
  --texture-image:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--fg) calc(var(--texture-strength) * 100%), transparent) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--fg) calc(var(--texture-strength) * 100%), transparent) 0 1.2px, transparent 1.7px);
  --texture-size: 10px 10px;
  --texture-position: 0 0, 5px 5px;
}
html[data-texture="grid"],
html[data-texture="grid"] [class*="scheme-"] {
  --texture-image:
    linear-gradient(to right, color-mix(in srgb, var(--fg) calc(var(--texture-strength) * 100%), transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--fg) calc(var(--texture-strength) * 100%), transparent) 1px, transparent 1px);
  --texture-size: 40px 40px;
}
html[data-texture="noise"],
html[data-texture="noise"] [class*="scheme-"] {
  --texture-image:
    linear-gradient(color-mix(in srgb, var(--bg) calc(100% - var(--texture-strength) * 250%), transparent) 0 0),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  --texture-size: auto, 160px 160px;
}
.section,
.textured {
  background-color: var(--bg);
  background-image: var(--texture-image, none);
  background-size: var(--texture-size, auto);
  background-position: var(--texture-position, 0 0);
  color: var(--fg);
}

/* Banner image treatments: never applied to product photos. */
.media--fx { position: relative; isolation: isolate; }
html[data-imgfx="mono"] .media--fx :is(img, video, svg.placeholder) { filter: grayscale(1) contrast(1.15); }
html[data-imgfx="duotone"] .media--fx { background: var(--c-accent); }
html[data-imgfx="duotone"] .media--fx :is(img, video) { filter: grayscale(1) contrast(1.25) brightness(1.05); mix-blend-mode: multiply; }
html[data-imgfx="duotone"] .media--fx::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: var(--c-accent-2);
  mix-blend-mode: lighten;
  opacity: .85;
  pointer-events: none;
}
html[data-imgfx="halftone"] .media--fx :is(img, video) { filter: grayscale(1) contrast(1.6) brightness(1.1); }
html[data-imgfx="halftone"] .media--fx::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background-image:
    radial-gradient(circle at 50% 50%, var(--c-text) 0 1.6px, transparent 2px),
    radial-gradient(circle at 50% 50%, var(--c-text) 0 1.6px, transparent 2px);
  background-size: 7px 7px;
  background-position: 0 0, 3.5px 3.5px;
  mix-blend-mode: soft-light;
  opacity: .9;
  pointer-events: none;
}
html[data-imgfx="halftone"] .media--fx { background: var(--c-accent); }
html[data-imgfx="halftone"] .media--fx :is(img, video) { mix-blend-mode: multiply; }

/* ---------------------------------------------------------------------------
   04  Typography + headings
   ------------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5, .display {
  margin: 0 0 .5em;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-style: var(--font-heading-style);
  line-height: var(--heading-lh);
  letter-spacing: var(--heading-spacing);
  text-transform: var(--heading-case);
  text-wrap: balance;
}
.display { font-size: calc(clamp(2.9rem, .4rem + 9vw, 10.5rem) * var(--heading-scale)); line-height: var(--heading-lh); margin: 0; overflow-wrap: break-word; }
.display--md { font-size: calc(clamp(2.4rem, .6rem + 6.4vw, 7.4rem) * var(--heading-scale)); }
.display--sm { font-size: calc(clamp(2.05rem, .9rem + 4.2vw, 5.2rem) * var(--heading-scale)); }
.display--xs { font-size: calc(clamp(1.85rem, 1.1rem + 2.8vw, 3.9rem) * var(--heading-scale)); }
h1, .h1 { font-size: calc(clamp(1.8rem, 1.2rem + 2.6vw, 4rem) * var(--heading-scale)); }
h2, .h2 { font-size: calc(clamp(1.7rem, 1.2rem + 2vw, 3.1rem) * var(--heading-scale)); }
h3, .h3 { font-size: calc(clamp(1.3rem, 1.1rem + .9vw, 1.9rem) * var(--heading-scale)); }
h4, .h4 { font-size: calc(clamp(1.15rem, 1.05rem + .4vw, 1.4rem) * var(--heading-scale)); }
h5, .h5, h6 { font-size: calc(1.05rem * var(--heading-scale)); }
.h0 { font-size: calc(clamp(2.6rem, 1.4rem + 5vw, 6rem) * var(--heading-scale)); }

.label,
.kicker {
  font-family: var(--font-ui);
  font-weight: var(--font-ui-weight);
  font-size: .78rem;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: var(--label-case);
}
.label--muted { color: var(--fg-muted); }
.text-muted { color: var(--fg-muted); }
.text-ui { font-family: var(--font-ui); font-weight: var(--font-ui-weight); }
.text-lg { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); line-height: 1.55; }
.text-sm { font-size: .875rem; }
.text-center { text-align: center; }
.measure { max-width: 62ch; }

/* Heading slant (Comic). Slanting the box slants the letters. */
.section-title,
.display,
.slant {
  transform: skewX(var(--heading-skew)) rotate(calc(var(--heading-skew) * .22));
  transform-origin: 0 100%;
}
.text-center .section-title,
.text-center .display,
.text-center .slant,
.align-center .display { transform-origin: 50% 100%; }

/* Heading effects */
html[data-hfx="glow"] .section-title,
html[data-hfx="glow"] .fx-title {
  text-shadow: 0 0 .55em color-mix(in srgb, var(--acc) 50%, transparent);
}
html[data-hfx="shadow"] .section-title,
html[data-hfx="shadow"] .fx-title {
  text-shadow: .05em .06em 0 var(--hl);
}
html[data-hfx="outline"] .section-title,
html[data-hfx="outline"] .fx-title {
  color: transparent;
  -webkit-text-stroke: max(1.5px, .028em) var(--fg);
}

/* Display (hero) headline effects. data-fx on the element wins; "auto" follows
   the theme-wide setting on <html data-dfx>. */
.display { position: relative; }
.display[data-fx="outline"],
html[data-dfx="outline"] .display[data-fx="auto"] {
  color: transparent;
  -webkit-text-stroke: max(2px, .022em) var(--fg);
}
.display[data-fx="shadow"],
html[data-dfx="shadow"] .display[data-fx="auto"] {
  text-shadow: .045em .055em 0 var(--hl);
  -webkit-text-stroke: max(1px, .012em) var(--shadow-ink, transparent);
  paint-order: stroke fill;
}
.display[data-fx="glitch"],
html[data-dfx="glitch"] .display[data-fx="auto"] {
  text-shadow:
    -.035em 0 0 color-mix(in srgb, var(--c-accent) 85%, transparent),
    .035em 0 0 color-mix(in srgb, var(--c-accent-2) 85%, transparent);
}
.display .glitch-layer { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html[data-motion-glitch] .display[data-fx="glitch"],
  html[data-motion-glitch][data-dfx="glitch"] .display[data-fx="auto"] { text-shadow: none; }
  html[data-motion-glitch] .display[data-fx="glitch"] .glitch-layer,
  html[data-motion-glitch][data-dfx="glitch"] .display[data-fx="auto"] .glitch-layer {
    display: block;
    position: absolute; inset: 0;
    pointer-events: none;
    user-select: none;
  }
  .display .glitch-layer:nth-of-type(1) { color: var(--c-accent); transform: translate(-.035em, 0); mix-blend-mode: screen; animation: volt-glitch-a 4.2s steps(1, end) infinite; }
  .display .glitch-layer:nth-of-type(2) { color: var(--c-accent-2); transform: translate(.035em, 0); mix-blend-mode: screen; animation: volt-glitch-b 4.2s steps(1, end) infinite; }
  html:not([data-motion-glitch]) .display .glitch-layer { animation: none; }
}
@keyframes volt-glitch-a {
  0%, 86%, 100% { clip-path: inset(0 0 0 0); transform: translate(-.035em, 0); }
  87% { clip-path: inset(12% 0 62% 0); transform: translate(-.09em, -.02em); }
  89% { clip-path: inset(58% 0 8% 0); transform: translate(.07em, .02em); }
  91% { clip-path: inset(30% 0 40% 0); transform: translate(-.12em, 0); }
  93% { clip-path: inset(80% 0 4% 0); transform: translate(.05em, 0); }
  95% { clip-path: inset(0 0 0 0); transform: translate(-.035em, 0); }
}
@keyframes volt-glitch-b {
  0%, 86%, 100% { clip-path: inset(0 0 0 0); transform: translate(.035em, 0); }
  87% { clip-path: inset(66% 0 10% 0); transform: translate(.1em, .02em); }
  89% { clip-path: inset(8% 0 70% 0); transform: translate(-.08em, 0); }
  91% { clip-path: inset(44% 0 30% 0); transform: translate(.13em, -.01em); }
  93% { clip-path: inset(20% 0 55% 0); transform: translate(-.05em, 0); }
  95% { clip-path: inset(0 0 0 0); transform: translate(.035em, 0); }
}

/* Small labels above section headings */
.kicker { display: block; margin: 0 0 1rem; color: var(--fg); }
.kicker > span { display: inline-block; }
html[data-label="slash"] .kicker > span::before { content: "// "; color: var(--acc); }
.scheme-accent .kicker > span::before,
.scheme-accent-2 .kicker > span::before,
.scheme-accent-3 .kicker > span::before { color: inherit; }
html[data-label="box"] .kicker > span {
  padding: .4em .8em .35em;
  background: var(--acc);
  color: var(--on-acc);
  border: var(--bw) solid var(--line);
  transform: rotate(-2deg);
  box-shadow: var(--shadow-sm);
}
html[data-label="index"] .section-head .kicker > span::before {
  counter-increment: voltage-section;
  content: "(" counter(voltage-section, decimal-leading-zero) ") ";
}
html[data-label="index"] .kicker > span { border-bottom: var(--bw) solid var(--fg); padding-bottom: .3em; }

/* Rich text written by the merchant */
.rte { line-height: 1.7; }
.rte > *:first-child { margin-top: 0; }
.rte > *:last-child { margin-bottom: 0; }
.rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6 { margin: 1.6em 0 .5em; }
.rte p, .rte ul, .rte ol, .rte blockquote, .rte table, .rte pre { margin: 0 0 1.15em; }
.rte li + li { margin-top: .35em; }
.rte a { text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: max(2px, .1em); }
.rte a:hover { background: var(--acc); color: var(--on-acc); text-decoration-color: transparent; }
.rte img { border: var(--bw) solid var(--line); border-radius: var(--radius); }
.rte blockquote {
  margin-inline: 0;
  padding: 1.1em 1.3em;
  border-left: max(4px, calc(var(--bw) * 2)) solid var(--acc);
  background: var(--wash);
  font-family: var(--font-heading);
  font-size: 1.3em;
  line-height: 1.25;
  text-transform: var(--heading-case);
}
.rte table { font-size: .95em; }
.rte th, .rte td { padding: .7em .9em; border: var(--bw) solid var(--line); text-align: left; }
.rte th { font-family: var(--font-ui); font-size: .8em; letter-spacing: .08em; text-transform: uppercase; background: var(--wash); }
.rte pre, .rte code { font-family: var(--font-ui); font-size: .9em; }
.rte pre { padding: 1em; overflow-x: auto; background: var(--wash); border: var(--bw) solid var(--line); }
.rte iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }

/* ---------------------------------------------------------------------------
   05  Layout + utilities
   ------------------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: calc(var(--page-width) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: calc(860px + var(--gutter) * 2); }
.wrap--text { max-width: calc(720px + var(--gutter) * 2); }
.wrap--full { max-width: none; }
.section { position: relative; padding-block: var(--section-gap); }
.section--tight { padding-block: calc(var(--section-gap) * .55); }
.section--flush { padding-block: 0; }
.section--no-top { padding-top: 0; }
@media (max-width: 749px) {
  .section { padding-block: calc(var(--section-gap) * .5); }
  .section--tight { padding-block: calc(var(--section-gap) * .32); }
  .section--flush { padding-block: 0; }
  .section--no-top { padding-top: 0; }
}
/* Two neighbouring sections on the same background share one gap. */
.shopify-section:has(> .section.scheme-base:not(.section--flush)) + .shopify-section > .section.scheme-base:not(.section--flush):not(.section--keep-top) { padding-top: 0; }

.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: .25rem 2rem;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.section-head > .kicker { grid-column: 1 / -1; margin-bottom: .35rem; }
.section-head .section-title { margin: 0; }
.section-head__text { grid-column: 1 / -1; margin-top: .9rem; max-width: 60ch; color: var(--fg-muted); }
.section-head__link { align-self: end; margin-bottom: .35em; white-space: nowrap; }
.section-head--center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.section-head--center .section-head__text { margin-inline: auto; }
@media (max-width: 749px) {
  .section-head { grid-template-columns: 1fr; }
  .section-head__link { justify-self: start; margin-top: .6rem; }
}

.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(var(--cols-mobile, 1), minmax(0, 1fr));
}
@media (min-width: 750px) { .grid { grid-template-columns: repeat(var(--cols-tablet, var(--cols, 3)), minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }

/* Swipe rail — a grid on desktop, a scroll-snap carousel on phones */
.rail { position: relative; }
@media (max-width: 749px) {
  .rail--swipe > .grid {
    display: flex;
    gap: max(12px, var(--grid-gap));
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) calc(var(--sh) * 1.5 + 12px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .rail--swipe > .grid::-webkit-scrollbar { display: none; }
  .rail--swipe > .grid > * { flex: 0 0 var(--rail-item, 72%); scroll-snap-align: start; }
}
.rail__nav { display: none; }
@media (max-width: 749px) {
  .js .rail--swipe .rail__nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .25rem; }
  .rail__progress { flex: 1; height: max(2px, var(--bw)); background: var(--hairline); position: relative; overflow: hidden; }
  .rail__progress > span { position: absolute; inset: 0 auto 0 0; width: 30%; background: var(--fg); transform-origin: 0 50%; transition: transform .2s linear; }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: var(--tap);
  font-family: var(--font-ui);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: var(--label-case);
  text-decoration: none;
  border-bottom: var(--bw) solid currentColor;
  padding-bottom: 0;
}
.link-arrow svg { width: 1.1em; height: 1.1em; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow:hover { color: var(--bg); background: var(--fg); padding-inline: .6em; margin-inline: -.6em; border-color: transparent; }
.link-underline { text-decoration: underline; }
.link-plain { text-decoration: none; }
.link-plain:hover { text-decoration: underline; }

.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 30px; height: 30px; }
.icon--fill { fill: currentColor; stroke: none; }
html[data-corner="square"] .icon, html[data-corner="chamfer"] .icon { stroke-linecap: square; stroke-linejoin: miter; }

/* Scroll reveal. Only ever hides content when JS is running. */
@media (prefers-reduced-motion: no-preference) {
  html.js[data-motion-reveal] .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    transition-delay: calc(var(--reveal-i, 0) * 70ms);
  }
  html.js[data-motion-reveal] .reveal.is-visible { opacity: 1; transform: none; }
}

/* Generic media box */
.media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--wash);
  aspect-ratio: var(--ratio, auto);
}
.media > img,
.media > video,
.media > svg,
.media > iframe,
.media > .media__fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media > svg.placeholder { color: var(--fg); background: var(--wash); }
.placeholder { width: 100%; height: 100%; color: var(--fg); }

/* ---------------------------------------------------------------------------
   06  Frames, corners, buttons
   --------------------------------------------------------------------------
   .frame = anything with a visible outline. Rounded and square corners use a
   real border. Chamfered corners cannot (a clip-path would slice the border
   off the diagonal), so the border becomes an ::after ring drawn with an
   even-odd polygon that follows the cut. --ch is the cut size, per component.
   ------------------------------------------------------------------------ */
.frame {
  position: relative;
  border: var(--bw) solid var(--frame-c, var(--line));
  border-radius: var(--radius);
}
html[data-corner="chamfer"] .frame,
html[data-corner="chamfer"] .cut {
  --ch: var(--corner);
  border-radius: 0;
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
}
html[data-corner="chamfer"] .frame { border-color: transparent; }
html[data-corner="chamfer"] .frame::after {
  content: "";
  position: absolute;
  inset: calc(var(--bw) * -1);
  z-index: 3;
  pointer-events: none;
  background: var(--frame-c, var(--line));
  --k: calc(var(--ch) + var(--bw) * .4142);
  clip-path: polygon(evenodd,
    var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch), var(--ch) 0,
    var(--k) var(--bw), var(--bw) var(--k), var(--bw) calc(100% - var(--bw)), calc(100% - var(--k)) calc(100% - var(--bw)),
    calc(100% - var(--bw)) calc(100% - var(--k)), calc(100% - var(--bw)) var(--bw), var(--k) var(--bw));
  transition: background-color .2s;
}
html[data-corner="chamfer"] .frame--sm, html[data-corner="chamfer"] .cut--sm { --ch: calc(var(--corner) * .55); }
html[data-corner="chamfer"] .frame--xs, html[data-corner="chamfer"] .cut--xs { --ch: calc(var(--corner) * .4); }
html[data-corner="chamfer"] .frame--lg, html[data-corner="chamfer"] .cut--lg { --ch: calc(var(--corner) * 1.5); }
html[data-corner="round"] .cut { border-radius: var(--radius); overflow: hidden; }
html[data-corner="round"] .frame--sm, html[data-corner="round"] .cut--sm { border-radius: var(--radius-sm); }

.panel { background: var(--panel); color: var(--fg); box-shadow: var(--shadow); }
html[data-corner="chamfer"] .panel { box-shadow: none; }

/* Buttons */
.btn {
  --btn-bg: var(--acc);
  --btn-fg: var(--on-acc);
  --btn-bd: var(--acc);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 50px;
  padding: .6em 1.5em;
  border: var(--bw) solid var(--btn-bd);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .2s, color .2s, border-color .2s, transform .15s var(--ease), box-shadow .15s var(--ease), background-position .4s var(--ease);
}
html[data-btn-font="ui"] .btn { font-family: var(--font-ui); font-weight: var(--font-ui-bold); font-size: .85rem; letter-spacing: .1em; }
html[data-btn-font="body"] .btn { font-family: var(--font-body); font-weight: var(--font-body-bold); letter-spacing: .04em; }
.btn--secondary { --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--fg); }
.btn--full { display: flex; width: 100%; }
.btn--lg { min-height: 54px; font-size: 1.05rem; padding-inline: 2em; }
@media (max-width: 749px) {
  .btn { min-height: 46px; padding-inline: 1.2em; }
  .btn--lg { min-height: 48px; font-size: 1rem; padding-inline: 1.4em; }
}
.btn--sm { min-height: 44px; padding: .5em 1.1em; font-size: .85rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn .icon { width: 1.15em; height: 1.15em; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 1.2em; height: 1.2em;
  margin: -.6em 0 0 -.6em;
  border: 2px solid var(--btn-fg);
  border-right-color: transparent;
  border-radius: 50%;
  animation: volt-spin .7s linear infinite;
}
@keyframes volt-spin { to { transform: rotate(360deg); } }

/* solid — ink block that turns accent on hover */
html[data-btn="solid"] .btn { --btn-bg: var(--fg); --btn-fg: var(--bg); --btn-bd: var(--fg); }
html[data-btn="solid"] .btn--secondary { --btn-bg: transparent; --btn-fg: var(--fg); }
html[data-btn="solid"] .btn:not([disabled]):hover { --btn-bg: var(--acc); --btn-fg: var(--on-acc); --btn-bd: var(--acc); }
html[data-btn="solid"] .btn--secondary:not([disabled]):hover { --btn-bg: var(--fg); --btn-fg: var(--bg); --btn-bd: var(--fg); }

/* outline — everything outlined, fills on hover */
html[data-btn="outline"] .btn { --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--fg); }
html[data-btn="outline"] .btn:not(.btn--secondary) { box-shadow: inset 0 0 0 var(--bw) var(--fg); }
html[data-btn="outline"] .btn:not([disabled]):hover { --btn-bg: var(--acc); --btn-fg: var(--on-acc); --btn-bd: var(--acc); box-shadow: none; }

/* pop — outlined, hard shadow, presses in */
html[data-btn="pop"] .btn {
  --btn-bd: var(--line);
  border-width: max(var(--bw), 2px);
  box-shadow: var(--sh) var(--sh) 0 var(--shadow-c, var(--line));
}
html[data-btn="pop"] .btn--secondary { --btn-bg: var(--panel); --btn-fg: var(--fg); }
html[data-btn="pop"] .btn:not([disabled]):active { transform: translate(var(--sh), var(--sh)); box-shadow: 0 0 0 var(--shadow-c, var(--line)); }
html[data-btn="pop"] .btn--sm { box-shadow: calc(var(--sh) * .6) calc(var(--sh) * .6) 0 var(--shadow-c, var(--line)); }
@media (hover: hover) {
  html[data-btn="pop"] .btn:not([disabled]):hover { transform: translate(-2px, -2px); box-shadow: calc(var(--sh) + 2px) calc(var(--sh) + 2px) 0 var(--shadow-c, var(--line)); }
  html[data-btn="pop"] .btn:not([disabled]):active { transform: translate(var(--sh), var(--sh)); box-shadow: 0 0 0 var(--shadow-c, var(--line)); }
}

/* neon — accent block with a diagonal colour sweep */
html[data-btn="neon"] .btn:not(.btn--secondary) {
  background-image: linear-gradient(105deg, var(--btn-bg) 0 50%, var(--c-accent-3) 50.2% 100%);
  background-size: 240% 100%;
  background-position: 0 0;
  border-color: transparent;
  color: var(--btn-fg);
}
html[data-btn="neon"] .btn:not(.btn--secondary):not([disabled]):hover { background-position: 100% 0; color: var(--c-on-accent-3); }
html[data-btn="neon"] .btn--secondary { --btn-bd: var(--fg); }
html[data-btn="neon"] .btn--secondary:not([disabled]):hover { --btn-fg: var(--acc); --btn-bd: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent); }
.scheme-accent .btn, .scheme-accent-2 .btn, .scheme-accent-3 .btn { background-image: none !important; }

/* chamfered buttons: clip + ring for the outlined ones */
html[data-corner="chamfer"] .btn {
  --ch: calc(var(--corner) * .7);
  border-radius: 0;
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
}
html[data-corner="chamfer"] .btn--sm { --ch: calc(var(--corner) * .5); }
html[data-corner="chamfer"] .btn--secondary,
html[data-corner="chamfer"][data-btn="outline"] .btn,
html[data-corner="chamfer"][data-btn="pop"] .btn { border-color: transparent; }
html[data-corner="chamfer"] .btn--secondary::after,
html[data-corner="chamfer"][data-btn="outline"] .btn::after,
html[data-corner="chamfer"][data-btn="pop"] .btn::after {
  content: "";
  position: absolute;
  inset: calc(var(--bw) * -1);
  pointer-events: none;
  background: var(--btn-bd);
  --b: max(var(--bw), 1.5px);
  --k: calc(var(--ch) + var(--b) * .4142);
  clip-path: polygon(evenodd,
    var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch), var(--ch) 0,
    var(--k) var(--b), var(--b) var(--k), var(--b) calc(100% - var(--b)), calc(100% - var(--k)) calc(100% - var(--b)),
    calc(100% - var(--b)) calc(100% - var(--k)), calc(100% - var(--b)) var(--b), var(--k) var(--b));
}
html[data-corner="chamfer"][data-btn="pop"] .btn { box-shadow: none; }

/* Icon buttons */
.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  flex: none;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color .15s, color .15s;
}
@media (hover: hover) { .icon-btn:hover { background: var(--fg); color: var(--bg); } }
.icon-btn--framed { border: var(--bw) solid var(--line); background: var(--panel); }

/* ---------------------------------------------------------------------------
   07  Forms
   ------------------------------------------------------------------------ */
.field { display: block; margin-bottom: 1.1rem; }
.field__label {
  display: block;
  margin-bottom: .45rem;
  font-family: var(--font-ui);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: var(--label-case);
}
.field__control {
  position: relative;
  display: flex;
  align-items: stretch;
  background: var(--panel);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
.field__control:focus-within { border-color: var(--fg); box-shadow: 0 0 0 2px var(--fg); }
:is(html[data-shadow="hard"], html[data-shadow="color"]) .field__control { box-shadow: calc(var(--sh) * .5) calc(var(--sh) * .5) 0 var(--shadow-c); }
:is(html[data-shadow="hard"], html[data-shadow="color"]) .field__control:focus-within { box-shadow: calc(var(--sh) * .5) calc(var(--sh) * .5) 0 var(--acc), 0 0 0 2px var(--fg); }
.field__input,
.field__select,
.field__textarea {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: .7em 1em;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--fg);
  font-size: 1rem; /* 16px minimum stops iOS zooming on focus */
  -webkit-appearance: none;
  appearance: none;
}
.field__input:focus, .field__select:focus, .field__textarea:focus { outline: none; }
.field__input::placeholder, .field__textarea::placeholder { color: var(--fg-muted); opacity: 1; }
.field__textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field__select { padding-right: 2.6em; cursor: pointer; }
.field__select option { color: #111; background: #fff; }
.field__control--select > .icon {
  position: absolute;
  right: .9em; top: 50%;
  width: 16px; height: 16px;
  margin-top: -8px;
  pointer-events: none;
}
.field__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-width: 50px;
  padding: 0 1.2em;
  background: var(--acc);
  color: var(--on-acc);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  letter-spacing: .08em;
  text-transform: uppercase;
  border-left: var(--bw) solid var(--line);
  transition: background-color .15s, color .15s;
}
.field__btn:hover { background: var(--fg); color: var(--bg); }
html[data-corner="chamfer"] .field__control {
  --ch: calc(var(--corner) * .55);
  border-color: transparent;
  border-radius: 0;
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
}
html[data-corner="chamfer"] .field__control::after {
  content: "";
  position: absolute;
  inset: calc(var(--bw) * -1);
  pointer-events: none;
  background: var(--line);
  --k: calc(var(--ch) + var(--bw) * .4142);
  clip-path: polygon(evenodd,
    var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch), var(--ch) 0,
    var(--k) var(--bw), var(--bw) var(--k), var(--bw) calc(100% - var(--bw)), calc(100% - var(--k)) calc(100% - var(--bw)),
    calc(100% - var(--bw)) calc(100% - var(--k)), calc(100% - var(--bw)) var(--bw), var(--k) var(--bw));
}
html[data-corner="chamfer"] .field__control:focus-within::after { background: var(--acc); }

.checkbox { display: flex; align-items: flex-start; gap: .7em; min-height: var(--tap); padding-block: .55em; cursor: pointer; }
.checkbox input {
  flex: none;
  width: 22px; height: 22px;
  margin: .1em 0 0;
  -webkit-appearance: none;
  appearance: none;
  border: max(var(--bw), 2px) solid var(--fg);
  border-radius: var(--radius-sm);
  background: var(--panel);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.checkbox input::after {
  content: "";
  width: 12px; height: 12px;
  background: var(--acc);
  transform: scale(0);
  transition: transform .12s var(--ease);
}
html[data-corner="round"] .checkbox input::after { border-radius: 2px; }
.checkbox input:checked { background: var(--fg); }
.checkbox input:checked::after { transform: scale(1); }
.checkbox input:disabled { opacity: .4; cursor: not-allowed; }

.form-message {
  display: flex;
  gap: .7em;
  align-items: flex-start;
  margin: 0 0 1.2rem;
  padding: .9em 1.1em;
  border: var(--bw) solid var(--line);
  border-left-width: max(6px, calc(var(--bw) * 2));
  background: var(--panel);
  font-size: .95rem;
}
.form-message--error { border-color: var(--c-sale); }
.form-message--success { border-color: var(--acc); }
.form-message ul { margin: 0; padding-left: 1.1em; }
.form-message .icon { margin-top: .1em; }
.errors { margin: 0 0 1.2rem; padding: .9em 1.1em; border: var(--bw) solid var(--c-sale); border-left-width: 6px; background: var(--panel); }
.errors ul { margin: 0; padding-left: 1.1em; }

/* Quantity stepper */
.qty {
  display: inline-flex;
  align-items: stretch;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}
.qty__btn { width: var(--tap); min-height: var(--tap); display: grid; place-items: center; transition: background-color .15s, color .15s; }
.qty__btn:hover { background: var(--fg); color: var(--bg); }
.qty__btn .icon { width: 14px; height: 14px; pointer-events: none; }
.qty__input {
  width: 3ch;
  min-width: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 1rem;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty__input:focus { outline: none; background: var(--wash); }
.qty--lg .qty__btn { width: 50px; min-height: 50px; }
.no-js .qty__btn { display: none; }
.no-js .qty__input { width: 6ch; min-height: var(--tap); }

/* ---------------------------------------------------------------------------
   08  Badges, chips, misc
   ------------------------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: .3em .7em .25em;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-ui);
  font-weight: var(--font-ui-bold);
  font-size: .68rem;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--radius-sm);
}
.badge--sale { background: var(--c-sale); color: var(--c-on-sale); }
.badge--soldout { background: var(--bg); color: var(--fg); box-shadow: inset 0 0 0 var(--bw) var(--fg); }
.badge--custom { background: var(--c-accent-3); color: var(--c-on-accent-3); }
.badge--accent { background: var(--acc); color: var(--on-acc); }
html[data-badge="tag"] .badge {
  border-radius: 0;
  padding-inline: .9em .75em;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
html[data-badge="burst"] .badge { border: max(2px, calc(var(--bw) - 1px)) solid var(--c-text); border-radius: var(--radius-sm); box-shadow: 2px 2px 0 var(--c-text); transform: rotate(-3deg); }
html[data-badge="burst"] .badge--sale {
  min-width: 64px;
  min-height: 64px;
  padding: 0 .4em;
  border: 0;
  box-shadow: none;
  font-size: .82rem;
  transform: rotate(-12deg);
  filter: drop-shadow(2px 2px 0 var(--c-text));
  clip-path: polygon(50% 0%, 59% 12%, 71% 4%, 75% 18%, 89% 14%, 87% 29%, 100% 33%, 92% 45%, 100% 58%, 87% 63%, 89% 79%, 75% 78%, 70% 93%, 58% 85%, 50% 100%, 41% 86%, 29% 94%, 25% 79%, 10% 81%, 13% 66%, 0% 60%, 8% 47%, 0% 35%, 13% 30%, 11% 15%, 26% 18%, 31% 4%, 42% 13%);
}
html[data-badge="burst"] .badge-burst-wrap { filter: drop-shadow(2px 2px 0 var(--c-text)); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 36px;
  padding: .3em .8em;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  font-family: var(--font-ui);
  font-size: .76rem;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: var(--label-case);
}
.chip .icon { width: 12px; height: 12px; }
a.chip:hover, button.chip:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.dot-live {
  display: inline-block;
  width: .6em; height: .6em;
  margin-right: .5em;
  border-radius: 50%;
  background: var(--c-accent-3);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent-3) 70%, transparent);
  vertical-align: .08em;
}
@media (prefers-reduced-motion: no-preference) {
  .dot-live { animation: volt-ping 1.6s ease-out infinite; }
}
@keyframes volt-ping {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent-3) 70%, transparent); }
  100% { box-shadow: 0 0 0 .9em color-mix(in srgb, var(--c-accent-3) 0%, transparent); }
}

.meter { height: 8px; background: var(--hairline); border-radius: var(--radius-sm); overflow: hidden; position: relative; }
.meter > span { display: block; height: 100%; width: calc(var(--value, 0) * 1%); background: var(--acc); transition: width .5s var(--ease-out); }
html[data-corner="chamfer"] .meter { clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
html[data-shadow="hard"] .meter, html[data-card="line"] .meter { height: 12px; background: var(--panel); border: max(2px, calc(var(--bw) - 1px)) solid var(--line); }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; margin-top: clamp(2rem, 1rem + 3vw, 4rem); padding: 0; list-style: none; font-family: var(--font-ui); }
.pagination__item {
  display: grid;
  place-items: center;
  min-width: var(--tap);
  height: var(--tap);
  padding: 0 .6em;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  text-decoration: none;
  font-size: .9rem;
  transition: background-color .15s, color .15s, transform .15s;
}
a.pagination__item:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pagination__item--current { background: var(--acc); color: var(--on-acc); border-color: var(--acc); }
html[data-shadow="hard"] .pagination__item { border-color: var(--line); box-shadow: 3px 3px 0 var(--line); }
.pagination__item--gap { border-color: transparent; background: none; box-shadow: none !important; min-width: 1.5em; padding: 0; }
html[data-corner="chamfer"] .pagination__item { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); border-color: transparent; box-shadow: inset 0 0 0 var(--bw) var(--line); }
html[data-corner="chamfer"] .pagination__item--gap { box-shadow: none; }

/* Collapsible rows (FAQ, product info, footer on phones) */
.accordion { border-top: var(--bw) solid var(--line); }
.accordion__item { border-bottom: var(--bw) solid var(--line); }
.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
  padding: .9rem 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: calc(1.15rem * var(--heading-scale));
  letter-spacing: var(--heading-spacing);
  text-transform: var(--heading-case);
  line-height: 1.15;
}
.accordion__summary .icon { transition: transform .25s var(--ease); }
.accordion__icon { position: relative; flex: none; width: 18px; height: 18px; }
.accordion__icon::before, .accordion__icon::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 100%; height: max(2px, var(--bw));
  margin-top: calc(max(2px, var(--bw)) / -2);
  background: currentColor;
  transition: transform .25s var(--ease);
}
.accordion__icon::after { transform: rotate(90deg); }
details[open] > .accordion__summary .accordion__icon::after { transform: rotate(0deg); }
.accordion__summary:hover { color: var(--acc); }
.scheme-accent .accordion__summary:hover, .scheme-accent-2 .accordion__summary:hover, .scheme-accent-3 .accordion__summary:hover { color: inherit; text-decoration: underline; }
html[data-card="line"] .accordion__summary:hover, html[data-card="pop"] .accordion__summary:hover { color: inherit; text-decoration: underline; text-decoration-thickness: 3px; }
.accordion__content { padding: 0 0 1.4rem; max-width: 70ch; color: var(--fg-muted); }

.empty-state { text-align: center; padding: clamp(2.5rem, 2rem + 4vw, 6rem) 0; }
.empty-state .display, .empty-state .h1 { margin-bottom: 1rem; }
.empty-state p { color: var(--fg-muted); margin-bottom: 1.6rem; }

/* ---------------------------------------------------------------------------
   09  Drawers + modals
   ------------------------------------------------------------------------ */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  visibility: hidden;
  pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--c-overlay) 70%, transparent);
  opacity: 0;
  transition: opacity .3s;
}
.drawer.is-open .drawer__overlay { opacity: 1; }
.drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(460px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  border-left: var(--bw) solid var(--line);
  transform: translateX(102%);
  transition: transform .4s var(--ease-out), visibility 0s .4s;
  outline: none;
}
.drawer--left .drawer__panel { right: auto; left: 0; border-left: 0; border-right: var(--bw) solid var(--line); transform: translateX(-102%); }
.drawer.is-open .drawer__panel { transform: none; transition: transform .4s var(--ease-out); }
html[data-shadow="hard"] .drawer__panel { border-left-width: max(var(--bw), 3px); }
html[data-shadow="glow"] .drawer__panel { box-shadow: 0 0 60px color-mix(in srgb, var(--c-accent) 25%, transparent); border-color: var(--acc); }
.drawer__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem var(--drawer-pad, 1.25rem);
  border-bottom: var(--bw) solid var(--line);
}
.drawer__title { margin: 0; font-size: calc(1.5rem * var(--heading-scale)); display: flex; align-items: baseline; gap: .5em; }
.drawer__title sup { font-family: var(--font-ui); font-size: .8rem; letter-spacing: .05em; color: var(--fg-muted); top: 0; }
.drawer__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 1.1rem var(--drawer-pad, 1.25rem); -webkit-overflow-scrolling: touch; }
.drawer__foot { flex: none; padding: 1rem var(--drawer-pad, 1.25rem) calc(1rem + env(safe-area-inset-bottom)); border-top: var(--bw) solid var(--line); background: var(--panel); }

/* Phones: drawers become bottom sheets, close button within thumb reach */
@media (max-width: 749px) {
  .drawer--sheet .drawer__panel {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border: 0;
    border-top: max(var(--bw), 2px) solid var(--line);
    border-radius: calc(var(--radius) * 1.6) calc(var(--radius) * 1.6) 0 0;
    transform: translateY(102%);
  }
  .drawer--sheet .drawer__head::before {
    content: "";
    position: absolute;
    left: 50%; top: 7px;
    width: 44px; height: 4px;
    margin-left: -22px;
    background: var(--hairline);
    border-radius: 4px;
  }
  .drawer--sheet .drawer__head { position: relative; padding-top: 1.3rem; }
  html[data-shadow="glow"] .drawer--sheet .drawer__panel { border-top-color: var(--acc); }
}

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  visibility: hidden;
  pointer-events: none;
}
.modal.is-open { visibility: visible; pointer-events: auto; }
.modal__overlay { position: absolute; inset: 0; background: color-mix(in srgb, var(--c-overlay) 78%, transparent); opacity: 0; transition: opacity .25s; }
.modal.is-open .modal__overlay { opacity: 1; }
.modal__panel {
  position: relative;
  width: min(980px, 100%);
  max-height: min(88vh, 860px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  color: var(--fg);
  border: max(var(--bw), 1px) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(20px) scale(.98);
  transition: opacity .25s, transform .35s var(--ease-out);
  outline: none;
}
html[data-shadow="glow"] .modal__panel { border-color: var(--acc); }
.modal.is-open .modal__panel { opacity: 1; transform: none; }
.modal__close { position: absolute; top: 10px; right: 10px; z-index: 5; background: var(--bg); border: var(--bw) solid var(--line); }
.modal__loading { display: grid; place-items: center; min-height: 320px; font-family: var(--font-ui); letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; }
@media (max-width: 749px) {
  .modal { padding: 0; place-items: end stretch; }
  .modal__panel { width: 100%; max-height: 92dvh; border-width: max(var(--bw), 2px) 0 0; border-radius: calc(var(--radius) * 1.6) calc(var(--radius) * 1.6) 0 0; transform: translateY(100%); opacity: 1; }
}

/* ---------------------------------------------------------------------------
   10  Announcement bar
   ------------------------------------------------------------------------ */
.announcement, .marquee-band { background-color: var(--bg); color: var(--fg); }
.announcement { position: relative; z-index: 2; font-family: var(--font-ui); font-size: .76rem; letter-spacing: .1em; text-transform: var(--label-case); border-bottom: var(--bw) solid var(--line); }
.announcement.scheme-accent, .announcement.scheme-accent-2, .announcement.scheme-accent-3, .announcement.scheme-invert { border-bottom-color: transparent; }
html[data-shadow="hard"] .announcement, html[data-card="line"] .announcement { border-bottom-color: var(--c-line); }
.announcement__static { display: flex; justify-content: center; align-items: center; gap: .5rem 2.5rem; flex-wrap: wrap; min-height: 38px; padding: .45rem var(--gutter); text-align: center; }
.announcement a { text-decoration: none; }
.announcement a:hover { text-decoration: underline; }
.announcement__item { display: inline-flex; align-items: center; gap: .6em; }
.announcement__item .icon { width: 14px; height: 14px; }
@media (max-width: 749px) { .announcement__static .announcement__item:not(:first-child) { display: none; } }

/* Shared marquee machinery (announcement bar, marquee band, logo list) */
.marquee { display: flex; overflow: hidden; user-select: none; }
.marquee__track {
  flex: none;
  display: flex;
  align-items: center;
  min-width: 100%;
  justify-content: space-around;
  animation: volt-marquee var(--marquee-duration, 30s) linear infinite;
  animation-direction: var(--marquee-direction, normal);
}
@keyframes volt-marquee { to { transform: translateX(-100%); } }
html[data-marquee-pause] .marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee.is-paused .marquee__track { animation-play-state: paused; }
.announcement .marquee__track { min-height: 38px; }
.announcement .marquee__track > * { padding-inline: 1.75rem; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; scrollbar-width: none; }
  .marquee::-webkit-scrollbar { display: none; }
  .marquee__track { animation: none; }
  .marquee__track[aria-hidden="true"] { display: none; }
}

/* ---------------------------------------------------------------------------
   11  Header + navigation
   ------------------------------------------------------------------------ */
.section-header { position: relative; z-index: var(--z-header); }
.section-header.is-sticky { position: sticky; top: 0; transition: transform .3s var(--ease); }
.section-header.is-sticky.is-hidden { transform: translateY(-101%); }
.header { position: relative; border-bottom: var(--bw) solid var(--line); background: var(--bg); color: var(--fg); }
html[data-shadow="hard"] .header { border-bottom-width: max(var(--bw), 3px); }
.header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem clamp(1rem, 2vw, 2.5rem);
  min-height: var(--header-h);
}
.header__logo { display: inline-flex; align-items: center; text-decoration: none; color: inherit; min-height: var(--tap); }
.header__logo-text {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: calc(1.75rem * var(--heading-scale));
  line-height: 1;
  letter-spacing: .04em;
  text-transform: var(--heading-case);
  transform: skewX(var(--heading-skew));
}
html[data-hfx="glow"] .header__logo-text { text-shadow: 0 0 .6em color-mix(in srgb, var(--acc) 60%, transparent); }
html[data-hfx="shadow"] .header__logo-text { text-shadow: .06em .07em 0 var(--c-accent-2); }
.header__logo img { width: var(--logo-w, 140px); height: auto; }
.header__heading { margin: 0; font-size: inherit; line-height: 1; }
.header__icons { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.header__burger { display: none; }
.cart-count {
  position: absolute;
  top: 3px; right: 1px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  background: var(--acc);
  color: var(--on-acc);
  font-family: var(--font-ui);
  font-weight: var(--font-ui-bold);
  font-size: .66rem;
  line-height: 1;
  border-radius: 10px;
}
html[data-corner="square"] .cart-count, html[data-corner="chamfer"] .cart-count { border-radius: 0; }
html[data-shadow="hard"] .cart-count { border: 2px solid var(--c-text); min-width: 22px; height: 22px; top: 0; right: -2px; }
.cart-count[data-count="0"], .cart-count:empty { display: none; }

.nav { display: flex; align-items: center; }
.nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .25rem; }
.nav__item { position: relative; }
.nav__item--mega { position: static; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  min-height: var(--tap);
  padding: 0 .85rem;
  font-family: var(--font-ui);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: var(--label-case);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}
.nav__link .icon { width: 12px; height: 12px; transition: transform .2s; }
details[open] > .nav__link .icon { transform: rotate(180deg); }
.nav__link::after {
  content: "";
  position: absolute;
  left: .85rem; right: .85rem; bottom: 8px;
  height: max(2px, var(--bw));
  background: var(--acc);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .25s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after, details[open] > .nav__link::after { transform: scaleX(1); }
html[data-shadow="hard"] .nav__link::after, html[data-card="line"] .nav__link::after { background: var(--fg); height: 3px; }
.nav__dropdown {
  position: absolute;
  top: calc(100% + 6px); left: 0;
  z-index: 5;
  min-width: 230px;
  padding: .5rem;
  background: var(--panel);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
html[data-shadow="glow"] .nav__dropdown, html[data-shadow="glow"] .mega { border-color: var(--acc); }
.nav__dropdown a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: .35rem .75rem;
  text-decoration: none;
  font-size: .95rem;
  border-radius: calc(var(--radius-sm) * .6);
}
.nav__dropdown a:hover, .nav__dropdown a[aria-current="page"] { background: var(--fg); color: var(--bg); }
.nav__dropdown .nav__sub { padding-left: .9rem; font-size: .88rem; color: var(--fg-muted); }
.mega {
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: 5;
  background: var(--panel);
  border-block: var(--bw) solid var(--line);
  box-shadow: var(--shadow);
}
html[data-shadow="hard"] .mega { box-shadow: 0 var(--sh) 0 var(--line); border-bottom-width: max(var(--bw), 3px); }
.mega__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 4rem); padding-block: 2.2rem 2.6rem; }
.mega__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem 2rem; align-content: start; }
.mega__heading { display: block; margin-bottom: .7rem; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: calc(1.25rem * var(--heading-scale)); letter-spacing: var(--heading-spacing); text-transform: var(--heading-case); text-decoration: none; line-height: 1.1; }
.mega__heading:hover { color: var(--acc); }
html[data-card="line"] .mega__heading:hover, html[data-card="pop"] .mega__heading:hover { color: inherit; text-decoration: underline; }
.mega__links a { display: inline-flex; min-height: 34px; align-items: center; text-decoration: none; color: var(--fg-muted); }
.mega__links a:hover { color: var(--fg); text-decoration: underline; }
.mega__promos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.mega__promo { position: relative; display: block; text-decoration: none; color: inherit; }
.mega__promo .media { --ratio: 4 / 5; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); }
.mega__promo img { transition: transform .6s var(--ease-out); }
.mega__promo:hover img { transform: scale(1.05); }
.mega__promo-label { display: flex; justify-content: space-between; gap: .5rem; align-items: center; margin-top: .6rem; font-family: var(--font-ui); font-size: .78rem; letter-spacing: .08em; text-transform: var(--label-case); }

/* Search panel */
.search-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 6; background: var(--bg); border-bottom: var(--bw) solid var(--line); box-shadow: var(--shadow); }
html[data-shadow="hard"] .search-panel { box-shadow: 0 var(--sh) 0 var(--line); }
.search-panel__inner { padding-block: 1.2rem 1.5rem; }
.search-form { display: flex; gap: .6rem; align-items: stretch; }
.search-form .field__control { flex: 1; }
.search-form .field__input { font-size: clamp(1rem, .9rem + .6vw, 1.35rem); min-height: 56px; }
.predictive { margin-top: 1rem; }
.predictive:empty { display: none; }
.predictive__group + .predictive__group { margin-top: 1.4rem; }
.predictive__heading { margin: 0 0 .6rem; padding-bottom: .5rem; border-bottom: var(--bw) solid var(--hairline); color: var(--fg-muted); }
.predictive__list { display: grid; gap: .35rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.predictive__item a { display: flex; align-items: center; gap: .9rem; padding: .45rem; text-decoration: none; border-radius: var(--radius-sm); min-height: 56px; }
.predictive__item a:hover, .predictive__item[aria-selected="true"] a { background: var(--fg); color: var(--bg); }
.predictive__item a:hover .text-muted, .predictive__item[aria-selected="true"] a .text-muted { color: inherit; }
.predictive__thumb { flex: none; width: 52px; height: 64px; object-fit: cover; background: var(--wash); border: 1px solid var(--hairline); }
.predictive__title { display: block; font-weight: var(--font-body-bold); line-height: 1.25; }
.predictive__meta { display: block; font-family: var(--font-ui); font-size: .78rem; }
.predictive__links { display: flex; flex-wrap: wrap; gap: .5rem; }
.predictive__all { margin-top: 1.2rem; }

/* Mobile menu drawer */
.menu-drawer__nav { padding: 0; }
.menu-drawer__link,
.menu-drawer__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 58px;
  padding: .5rem 0;
  border-bottom: var(--bw) solid var(--hairline);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: calc(1.55rem * var(--heading-scale));
  line-height: 1.1;
  letter-spacing: var(--heading-spacing);
  text-transform: var(--heading-case);
  text-decoration: none;
}
.menu-drawer__sub { padding: .3rem 0 .8rem 1rem; border-bottom: var(--bw) solid var(--hairline); }
.menu-drawer__sub a { display: flex; align-items: center; min-height: var(--tap); text-decoration: none; font-size: 1.02rem; }
.menu-drawer__sub .menu-drawer__grand a { padding-left: 1rem; color: var(--fg-muted); font-size: .95rem; }
.menu-drawer__utils { margin-top: 1.5rem; display: grid; gap: .75rem; }
.menu-drawer__utils a { display: inline-flex; align-items: center; gap: .7em; min-height: var(--tap); text-decoration: none; font-family: var(--font-ui); font-size: .82rem; letter-spacing: .1em; text-transform: var(--label-case); }

@media (max-width: 989px) {
  .header__inner { grid-template-columns: 1fr auto 1fr; gap: .25rem; }
  .header__burger { display: inline-grid; justify-self: start; margin-left: -10px; }
  .header__icons { margin-right: -10px; }
  .header__logo { justify-self: center; }
  .header__logo-text { font-size: calc(1.5rem * var(--heading-scale)); }
  .nav { display: none; }
  .header__icons .header__account { display: none; }
  .no-js .nav { display: flex; grid-column: 1 / -1; grid-row: 2; overflow-x: auto; }
  .no-js .header__burger { display: none; }
}
@media (min-width: 990px) {
  .header--logo-center .header__inner { grid-template-columns: 1fr auto 1fr; }
  .header--logo-center .header__logo { grid-column: 2; grid-row: 1; justify-self: center; }
  .header--logo-center .nav { grid-column: 1; grid-row: 1; }
  .header--logo-center .header__icons { grid-column: 3; }
  .header--nav-center .nav { justify-content: center; }
  .header--nav-right .nav { justify-content: flex-end; }
}

/* ---------------------------------------------------------------------------
   12  Footer
   ------------------------------------------------------------------------ */
.footer { position: relative; background-color: var(--bg); color: var(--fg); border-top: var(--bw) solid var(--c-line); overflow: hidden; }
html[data-shadow="hard"] .footer { border-top-width: max(var(--bw), 3px); }
.footer__top { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.footer__grid { display: grid; gap: 2.5rem clamp(1.5rem, 3vw, 4rem); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.footer__block { grid-column: span 12; min-width: 0; }
@media (min-width: 750px) {
  .footer__block { grid-column: span 3; }
  .footer__block--wide { grid-column: span 5; }
  .footer__block--brand { grid-column: span 4; }
}
@media (min-width: 750px) and (max-width: 1099px) {
  .footer__block { grid-column: span 4; }
  .footer__block--wide, .footer__block--brand { grid-column: span 12; }
}
.footer__heading { margin: 0 0 1.1rem; font-family: var(--font-ui); font-weight: var(--font-ui-weight); font-size: .78rem; letter-spacing: .12em; text-transform: var(--label-case); color: var(--fg-muted); }
.footer__brand-name { font-size: calc(2rem * var(--heading-scale)); margin-bottom: .8rem; }
.footer__links a { display: inline-flex; align-items: center; min-height: 38px; text-decoration: none; }
.footer__links a:hover { text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: 2px; }
.footer__text { color: var(--fg-muted); max-width: 44ch; }
.footer__newsletter .field__control { max-width: 440px; }
.social { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.4rem; }
.social a { width: var(--tap); height: var(--tap); display: grid; place-items: center; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); transition: background-color .15s, color .15s, transform .15s; }
.social a:hover { background: var(--acc); color: var(--on-acc); border-color: var(--acc); }
html[data-motion-hover] .social a:hover { transform: translateY(-3px); }
.social .icon { width: 20px; height: 20px; }
.footer__wordmark {
  display: block;
  margin: 0;
  padding-inline: var(--gutter);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(3rem, 17vw, 20rem);
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: var(--heading-case);
  text-align: center;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: max(1px, var(--bw)) color-mix(in srgb, var(--fg) 38%, transparent);
  user-select: none;
  pointer-events: none;
  overflow: hidden;
}
html[data-hfx="glow"] .footer__wordmark { -webkit-text-stroke-color: color-mix(in srgb, var(--acc) 60%, transparent); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--acc) 35%, transparent)); }
html[data-hfx="shadow"] .footer__wordmark { color: var(--c-accent); -webkit-text-stroke: 0; text-shadow: .04em .04em 0 var(--c-accent-2); transform: skewX(var(--heading-skew)); }
html[data-hfx="none"] .footer__wordmark { color: var(--fg); -webkit-text-stroke: 0; }
.footer__wordmark[style*="--fit"] { font-size: var(--fit); }
.footer__bottom { border-top: var(--bw) solid var(--line); padding-block: 1.4rem calc(1.4rem + env(safe-area-inset-bottom)); }
.footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.footer__legal { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font-size: .85rem; color: var(--fg-muted); }
.footer__legal a { text-decoration: underline; color: var(--fg); }
.footer__legal a:hover { color: var(--acc); }
.footer__policies { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; font-size: .85rem; }
.footer__policies a { display: inline-flex; align-items: center; min-height: 32px; }
.payment-icons { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.payment-icons svg { width: 38px; height: 24px; }
.localization { display: flex; flex-wrap: wrap; gap: .6rem; }
.localization .field { margin: 0; }
.localization .field__select { min-height: 44px; font-family: var(--font-ui); font-size: .82rem; padding-block: .4em; }
.localization .field__control { background: transparent; }
.localization__submit { align-self: end; }
@media (max-width: 749px) {
  .footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------------------
   13  Signature devices: read-out strip, stickers, HUD marks, banner boxes,
       and the extra effects used by the Zine style (misprint, highlight)
   ------------------------------------------------------------------------ */
.readout {
  position: relative;
  border-block: var(--bw) solid var(--line);
  background: var(--bg);
  color: var(--fg);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: var(--label-case);
}
.readout__inner {
  display: flex;
  align-items: center;
  min-height: 42px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
  mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.readout__inner::-webkit-scrollbar { display: none; }
@media (min-width: 750px) { .readout__inner { -webkit-mask-image: none; mask-image: none; } }
.readout__item {
  display: inline-flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
  padding: .55rem 1.25rem;
  border-left: var(--bw) solid var(--hairline);
}
.readout__item:first-child { padding-left: 0; border-left: 0; }
html[data-shadow="hard"] .readout { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-line); }
html[data-shadow="hard"] .readout__item { border-left-color: var(--c-on-accent); }
html[data-shadow="hard"] .readout .dot-live { background: var(--c-accent-2); box-shadow: none; }
html[data-shadow="glow"] .readout { color: var(--fg-muted); }
html[data-shadow="glow"] .readout__item:first-child { color: var(--acc); }
html[data-shadow="color"] .readout { border-style: dashed; }

/* Stickers. The shape is drawn by ::before so it can spin while the words stay still. */
.sticker {
  --st-bg: var(--c-accent-3);
  --st-fg: var(--c-on-accent-3);
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: clamp(76px, 9vw, 140px);
  aspect-ratio: 1;
  color: var(--st-fg);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(.82rem, .55rem + .8vw, 1.35rem);
  line-height: .92;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(-12deg);
  pointer-events: none;
}
.sticker--accent { --st-bg: var(--c-accent); --st-fg: var(--c-on-accent); }
.sticker--accent-2 { --st-bg: var(--c-accent-2); --st-fg: var(--c-on-accent-2); }
.sticker::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--st-bg);
  z-index: -1;
}
.sticker__text { position: relative; padding: .4em; }
:is(.sticker--burst, html[data-badge="burst"] .sticker--auto)::before {
  clip-path: polygon(50% 0%, 59% 12%, 71% 4%, 75% 18%, 89% 14%, 87% 29%, 100% 33%, 92% 45%, 100% 58%, 87% 63%, 89% 79%, 75% 78%, 70% 93%, 58% 85%, 50% 100%, 41% 86%, 29% 94%, 25% 79%, 10% 81%, 13% 66%, 0% 60%, 8% 47%, 0% 35%, 13% 30%, 11% 15%, 26% 18%, 31% 4%, 42% 13%);
}
:is(.sticker--burst, html[data-badge="burst"] .sticker--auto) { filter: drop-shadow(var(--bw) var(--bw) 0 var(--c-line)) drop-shadow(calc(var(--bw) * -1) calc(var(--bw) * -1) 0 var(--c-line)); }
html[data-shadow="hard"] :is(.sticker--burst, .sticker--auto),
html[data-shadow="color"] :is(.sticker--burst, .sticker--auto) { filter: drop-shadow(2px 2px 0 var(--c-line)) drop-shadow(-2px -2px 0 var(--c-line)) drop-shadow(calc(var(--sh) * .8) calc(var(--sh) * .8) 0 var(--shadow-c)); }
html[data-shadow="glow"] :is(.sticker--burst, .sticker--auto) { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--st-bg) 55%, transparent)); }
:is(.sticker--circle, html[data-badge="circle"] .sticker--auto)::before { border-radius: 50%; box-shadow: inset 0 0 0 max(2px, var(--bw)) var(--st-fg), inset 0 0 0 calc(max(2px, var(--bw)) + 4px) var(--st-bg), inset 0 0 0 calc(max(2px, var(--bw)) + 5px) var(--st-fg); }
:is(.sticker--circle, html[data-badge="circle"] .sticker--auto) { transform: rotate(-8deg); }
html[data-shadow="color"] :is(.sticker--circle, html[data-badge="circle"] .sticker--auto)::before,
html[data-shadow="hard"] :is(.sticker--circle, html[data-badge="circle"] .sticker--auto)::before { box-shadow: inset 0 0 0 4px var(--st-bg), inset 0 0 0 5px var(--st-fg), calc(var(--sh) * .8) calc(var(--sh) * .8) 0 var(--shadow-c); }
:is(.sticker--tag, html:is([data-badge="tag"], [data-badge="block"]) .sticker--auto) { width: auto; aspect-ratio: auto; padding: .7em 1em; transform: rotate(-6deg); filter: none; }
:is(.sticker--tag, html[data-badge="tag"] .sticker--auto)::before { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
html[data-badge="block"] .sticker--auto { transform: rotate(-3deg); }
html[data-badge="block"] .sticker--auto::before { box-shadow: var(--shadow-sm); }
@media (prefers-reduced-motion: no-preference) {
  html[data-sticker-spin] :is(.sticker--burst, html[data-badge="burst"] .sticker--auto)::before { animation: volt-spin 26s linear infinite; }
  html[data-sticker-spin] :is(.sticker--circle, html[data-badge="circle"] .sticker--auto)::before { animation: volt-wobble 5s ease-in-out infinite; }
}
@keyframes volt-wobble { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(8deg) scale(1.03); } }

/* HUD corner marks: shown with the "corner marks" banner framing */
.hud-marks { display: none; position: absolute; inset: -7px; z-index: 4; pointer-events: none; }
html[data-banner="hud"] .hud-marks { display: block; }
.hud-marks i { position: absolute; width: 18px; height: 18px; border: 0 solid var(--acc); }
.hud-marks i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.hud-marks i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.hud-marks i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.hud-marks i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

/* Banner boxes (countdown, sign-up, gift card) follow the Banner framing setting */
.banner-box { position: relative; background: var(--panel); color: var(--fg); padding: clamp(1.4rem, 1rem + 2.4vw, 3.5rem); }
html[data-banner="hud"] .banner-box { border: var(--bw) solid var(--line); }
html[data-banner="panel"] .banner-box { border: max(var(--bw), 2px) solid var(--c-line); border-radius: calc(var(--radius) * 1.4); box-shadow: var(--shadow); }
html[data-banner="bleed"] .banner-box { border-block: var(--bw) solid var(--line); }
.scheme-accent .banner-box, .scheme-accent-2 .banner-box, .scheme-accent-3 .banner-box { background: transparent; }

/* Misprint: two inks, slightly off register */
html[data-hfx="misprint"] .section-title,
html[data-hfx="misprint"] .fx-title {
  text-shadow: .045em .04em 0 color-mix(in srgb, var(--c-accent) 92%, transparent), -.02em -.015em 0 color-mix(in srgb, var(--c-accent-2) 45%, transparent);
}
.display[data-fx="misprint"],
html[data-dfx="misprint"] .display[data-fx="auto"] {
  text-shadow: .05em .045em 0 color-mix(in srgb, var(--c-accent) 92%, transparent), -.022em -.018em 0 color-mix(in srgb, var(--c-accent-2) 50%, transparent);
}
.scheme-accent :is(.section-title, .fx-title, .display) { text-shadow: none !important; }
html[data-hfx="misprint"] .header__logo-text { text-shadow: .05em .04em 0 var(--c-accent); }
html[data-hfx="misprint"] .footer__wordmark { color: var(--c-accent); -webkit-text-stroke: 0; text-shadow: .03em .03em 0 var(--c-accent-2); }

/* Marker-highlight labels */
html[data-label="highlight"] .kicker > span {
  padding: .15em .35em;
  background: linear-gradient(100deg, transparent 0 2%, var(--c-accent-3) 3% 96%, transparent 97%);
  color: var(--c-on-accent-3);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
html[data-label="highlight"] .scheme-accent-3 .kicker > span { background: var(--c-on-accent-3); color: var(--c-accent-3); }

/* ---------------------------------------------------------------------------
   14  Hero
   Poster: the headline runs over a framed image. Split: side by side.
   Cover: text over a full-width image. On phones every layout is compact
   (owner rule: the main action must be on the first screen).
   ------------------------------------------------------------------------ */
.banner-wrap { position: relative; }
html[data-banner="panel"] .hero-section .banner-wrap {
  margin: clamp(10px, 1.6vw, 22px) var(--gutter) 0;
  border: max(var(--bw), 2px) solid var(--c-line);
  border-radius: calc(var(--radius) * 1.6);
  box-shadow: var(--shadow);
  overflow: hidden;
}
html[data-banner="panel"] .hero-section .readout { border-bottom: 0; }
.hero { position: relative; display: block; overflow: hidden; isolation: isolate; --hero-h: min(76vh, 720px); }
.hero--h-sm { --hero-h: 440px; }
.hero--h-md { --hero-h: 580px; }
.hero--h-full { --hero-h: calc(100svh - var(--header-h) - 44px); }
.hero__track { display: grid; }
.hero__slide { grid-area: 1 / 1; position: relative; visibility: hidden; opacity: 0; transition: opacity .6s var(--ease), visibility 0s .6s; }
.hero__slide.is-active { visibility: visible; opacity: 1; transition: opacity .6s var(--ease); }
.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: 0 clamp(1rem, 3vw, 3rem);
  min-height: var(--hero-h);
  padding-block: clamp(1.75rem, 1rem + 3vw, 4.5rem);
}
.hero__text { position: relative; z-index: 3; min-width: 0; }
.hero__kicker { margin-bottom: clamp(.6rem, .4rem + .6vw, 1.2rem); }
.hero__heading { margin: 0 0 clamp(.8rem, .5rem + 1vw, 1.6rem); }
.hero--poster .hero__heading { margin-right: -36%; }
.hero__heading[style*="--fit"] { font-size: var(--fit); }
.hero__sub { max-width: 44ch; margin: 0 0 clamp(1rem, .8rem + 1vw, 1.8rem); color: var(--fg-muted); }
.hero__buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__figure { position: relative; z-index: 1; justify-self: end; width: min(100%, calc((var(--hero-h) - 5rem) * .8)); }
.hero__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--wash); }
.hero__media { position: absolute; inset: 0; }
.hero__media :is(img, video, svg) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media picture { display: contents; }
.hero__sticker { top: -5%; left: -9%; }
html[data-shadow="glow"] .hero__figure { filter: drop-shadow(0 0 28px color-mix(in srgb, var(--c-accent) 30%, transparent)); }
html[data-banner="panel"] .hero__frame { transform: rotate(1.6deg); border-width: max(var(--bw), 2px); }
html[data-banner="panel"] .hero__figure { filter: drop-shadow(var(--sh) var(--sh) 0 var(--shadow-c)); }
html[data-banner="bleed"] .hero__frame { border-color: transparent; }
.hero__slide--no-media .hero__frame { border-style: dashed; }

/* Backdrops behind the image. Auto follows the background texture. */
.hero__backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero--backdrop-rays .hero__backdrop,
html[data-texture="halftone"] .hero--backdrop-auto .hero__backdrop {
  background: repeating-conic-gradient(from 3deg at 72% 48%, color-mix(in srgb, var(--c-accent) 85%, transparent) 0deg 5deg, transparent 5deg 13deg);
  -webkit-mask-image: radial-gradient(circle at 72% 48%, #000 0 34%, transparent 62%);
  mask-image: radial-gradient(circle at 72% 48%, #000 0 34%, transparent 62%);
}
.hero--backdrop-grid .hero__backdrop,
html[data-texture="scanlines"] .hero--backdrop-auto .hero__backdrop {
  background:
    radial-gradient(circle at 74% 42%, color-mix(in srgb, var(--c-accent) 26%, transparent) 0, transparent 34%),
    radial-gradient(circle at 88% 78%, color-mix(in srgb, var(--c-accent-2) 24%, transparent) 0, transparent 30%);
}
.hero--backdrop-grid .hero__backdrop::after,
html[data-texture="scanlines"] .hero--backdrop-auto .hero__backdrop::after {
  content: "";
  position: absolute;
  left: -20%; right: -20%; bottom: 0;
  height: 48%;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--c-accent) 38%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--c-accent) 38%, transparent) 1px, transparent 1px);
  background-size: 64px 40px;
  transform: perspective(420px) rotateX(58deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 85%);
  mask-image: linear-gradient(to top, #000, transparent 85%);
}
.hero__figure::before { content: none; }
.hero--backdrop-block .hero__figure::before,
html:is([data-texture="none"], [data-texture="grid"]) .hero--backdrop-auto .hero__figure::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-accent);
  transform: translate(7%, 6%);
}
.hero--backdrop-disc .hero__figure::before,
html[data-texture="noise"] .hero--backdrop-auto .hero__figure::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -24%; top: 4%;
  width: 92%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-accent-3);
}

/* Cover layout */
.hero--cover .hero__grid { grid-template-columns: minmax(0, 1fr); align-items: end; }
.hero__cover { position: absolute; inset: 0; z-index: 0; }
.hero__cover :is(img, video, svg) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__cover picture { display: contents; }
.hero__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__overlay--solid { background: color-mix(in srgb, var(--c-overlay) var(--overlay-a), transparent); }
.hero__overlay--gradient { background: linear-gradient(to top, color-mix(in srgb, var(--c-overlay) calc(var(--overlay-a) + 20%), transparent) 0, color-mix(in srgb, var(--c-overlay) var(--overlay-a), transparent) 45%, transparent 100%); }
.hero--cover .hero__text { max-width: 900px; color: var(--c-on-overlay); --fg: var(--c-on-overlay); --fg-muted: var(--c-on-overlay); }
.hero--cover .hero__text .btn--secondary { --btn-fg: var(--c-on-overlay); --btn-bd: var(--c-on-overlay); }
.hero__slide--middle-left .hero__grid { align-items: center; }
.hero__slide--middle-center .hero__grid { align-items: center; justify-items: center; text-align: center; }
.hero__slide--bottom-center .hero__grid { justify-items: center; text-align: center; }
:is(.hero__slide--middle-center, .hero__slide--bottom-center) .hero__buttons { justify-content: center; }
:is(.hero__slide--middle-center, .hero__slide--bottom-center) .hero__sub { margin-inline: auto; }
.hero__sticker--cover { top: auto; bottom: 14%; left: auto; right: 6%; }

/* Slideshow controls */
.hero__controls { position: absolute; left: var(--gutter); bottom: 16px; z-index: 5; display: flex; align-items: center; gap: .25rem; background: var(--bg); border: var(--bw) solid var(--line); border-radius: var(--radius-sm); }
.hero__counter { display: flex; align-items: center; gap: .5rem; margin: 0 .4rem; font-size: .78rem; letter-spacing: .1em; }
.hero__counter-sep { width: 18px; height: var(--bw); min-height: 1px; background: currentColor; }

@media (max-width: 749px) {
  .hero { --hero-h: auto; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 1.1rem 1.25rem; }
  .hero:not(.hero--cover) .hero__text { display: contents; }
  .hero__kicker { order: 1; margin-bottom: .5rem; }
  .hero__heading { order: 2; position: relative; z-index: 3; }
  .hero__figure { order: 3; justify-self: stretch; width: auto; }
  .hero__sub { order: 4; }
  .hero__buttons { order: 5; }
  .hero--poster .hero__heading { margin: 0 0 -.32em; }
  .hero--split .hero__heading { margin-bottom: .75rem; }
  .hero__frame { aspect-ratio: 16 / 11; }
  html[data-banner="panel"] .hero__frame { transform: rotate(.8deg); }
  .hero__sticker { width: 70px; top: auto; bottom: 8px; left: auto; right: 8px; font-size: .74rem; }
  .hero__sub { margin: .9rem 0 1rem; font-size: .98rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hero__buttons { gap: .5rem; flex-wrap: nowrap; }
  .hero__buttons .btn { flex: 1 1 0; min-width: 0; padding-inline: .7em; white-space: nowrap; letter-spacing: .03em; font-size: .92rem; }
  .hero__buttons .btn:first-child { flex-grow: 1.35; }
  .hero__buttons .btn .icon { display: none; }
  .hero--backdrop-rays .hero__backdrop,
  html[data-texture="halftone"] .hero--backdrop-auto .hero__backdrop {
    background: repeating-conic-gradient(from 3deg at 50% 52%, color-mix(in srgb, var(--c-accent) 85%, transparent) 0deg 5deg, transparent 5deg 13deg);
    -webkit-mask-image: radial-gradient(circle at 50% 52%, #000 0 30%, transparent 70%);
    mask-image: radial-gradient(circle at 50% 52%, #000 0 30%, transparent 70%);
  }
  .hero--backdrop-disc .hero__figure::before,
  html[data-texture="noise"] .hero--backdrop-auto .hero__figure::before { width: 62%; left: -10%; top: -18%; }
  .hero--cover .hero__grid { min-height: min(68svh, 520px); padding-block: 2rem 1.5rem; }
  html[data-banner="panel"] .hero-section .banner-wrap { margin-top: 10px; border-radius: var(--radius); }
  .hero__controls { left: auto; right: var(--gutter); bottom: auto; top: 12px; border: 0; background: transparent; }
  .hero__controls .icon-btn { width: 36px; height: 36px; border: var(--bw) solid var(--line); background: var(--bg); }
  .hero__counter { display: none; }
}

/* ---------------------------------------------------------------------------
   15  Marquee band
   ------------------------------------------------------------------------ */
.section-marquee { overflow: hidden; }
.marquee-band-wrap { position: relative; }
.marquee-band-wrap--tilt { transform: rotate(var(--tilt)); margin-block: clamp(14px, 2.4vw, 34px); margin-inline: -3%; }
.marquee-band {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  text-transform: var(--heading-case);
  letter-spacing: var(--heading-spacing);
  line-height: 1;
  border-block: var(--bw) solid var(--line);
  color: var(--fg);
}
html[data-shadow="hard"] .marquee-band { border-block-width: max(var(--bw), 3px); border-color: var(--c-line); }
.marquee-band .marquee__track > * { padding-inline: .45em; white-space: nowrap; }
.marquee-band--sm { font-size: clamp(1.15rem, .9rem + 1vw, 1.8rem); }
.marquee-band--md { font-size: clamp(1.5rem, 1rem + 2vw, 3rem); }
.marquee-band--lg { font-size: clamp(2rem, 1rem + 4.2vw, 5.4rem); }
.marquee-band .marquee__track { padding-block: .22em .16em; }
.marquee-band__item a { text-decoration: none; }
.marquee-band__item--outline { color: transparent; -webkit-text-stroke: max(1px, .028em) var(--fg); }
.marquee-band__sep { display: inline-flex; align-items: center; opacity: .9; }
.marquee-band__sep .icon { width: .62em; height: .62em; }
@media (max-width: 749px) {
  .marquee-band--lg { font-size: 1.9rem; }
  .marquee-band--md { font-size: 1.45rem; }
}

/* ---------------------------------------------------------------------------
   16  Collection tiles
   ------------------------------------------------------------------------ */
.tile { position: relative; display: block; height: 100%; background: var(--panel); color: inherit; text-decoration: none; overflow: hidden; }
.tile__media { display: block; }
.tile__media img { transition: transform .6s var(--ease-out); }
.tile__label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .1rem .7rem; padding: .75rem .85rem; border-top: var(--bw) solid var(--line); }
.tile__index { grid-row: 1 / span 2; align-self: start; padding-top: .25em; font-size: .72rem; color: var(--fg-muted); }
.tile__title { grid-column: 2; margin: 0; font-size: calc(1.1rem * var(--heading-scale)); line-height: 1.05; }
.tile__count { grid-column: 2; font-size: .72rem; letter-spacing: .08em; color: var(--fg-muted); }
.tile__arrow { grid-column: 3; grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); transition: background-color .2s, color .2s, transform .2s var(--ease); }
@media (hover: hover) {
  .tile:hover .tile__media img { transform: scale(1.05); }
  .tile:hover .tile__arrow { background: var(--acc); color: var(--on-acc); border-color: var(--acc); transform: rotate(45deg); }
}
html[data-shadow="hard"] .tile, html[data-shadow="color"] .tile { box-shadow: var(--shadow); }
html[data-card="line"] .tile { border-color: var(--line); }
@media (max-width: 749px) {
  .card__title { font-size: calc(.9rem * var(--heading-scale)); overflow-wrap: normal; hyphens: auto; }
  .card__body { gap: .2rem; }
  .tile__label { padding: .6rem .65rem; gap: .1rem .5rem; }
  .tile__title { font-size: 1rem; }
  .tile__arrow { width: 32px; height: 32px; }
  .tile__arrow .icon { width: 16px; height: 16px; }
}

/* ---------------------------------------------------------------------------
   17  Product cards
   ------------------------------------------------------------------------ */
.product-grid > li, .collection-tiles > li, .quotes > li, .post-grid > li { min-width: 0; }
.card {
  --frame-c: transparent;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--fg);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.card__media-wrap { position: relative; }
.card__media { display: block; }
.card__media img { transition: opacity .35s var(--ease), transform .7s var(--ease-out); }
.card__media--contain img { object-fit: contain; padding: 6%; }
.card__image--hover { opacity: 0; }
.card__scan { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--c-accent) 22%, transparent) 0 2px, transparent 2px 5px); }
.card__badges { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.card__quick { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4; }
.card__quick-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  width: 100%;
  min-height: 44px;
  padding: .4em .8em;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-weight: var(--font-ui-bold);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, opacity .25s, transform .25s var(--ease);
}
.card__quick-btn .icon { width: 15px; height: 15px; }
.card__quick-btn:hover { background: var(--acc); color: var(--on-acc); border-color: var(--acc); }
.card__quick-btn.is-loading { color: transparent; }
.card__quick-error { position: absolute; bottom: 52px; left: 0; right: 0; margin: 0; font-size: .78rem; }
@media (hover: hover) and (pointer: fine) {
  .card__quick { opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s var(--ease); }
  .card:hover .card__quick, .card:focus-within .card__quick { opacity: 1; transform: none; }
  .card--has-second:hover .card__image--hover { opacity: 1; }
}
@media (hover: none), (pointer: coarse) {
  .card__quick { left: auto; right: 8px; bottom: 8px; }
  .card__quick-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
  html:is([data-corner="square"], [data-corner="chamfer"]) .card__quick-btn { border-radius: 0; }
  .card__quick-btn > span:not(.visually-hidden) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.card__body { display: flex; flex-direction: column; gap: .3rem; flex: 1; padding: .85rem 0 0; }
.card__vendor { margin: 0; font-size: .68rem; }
.card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: calc(1.05rem * var(--heading-scale));
  line-height: 1.12;
  letter-spacing: .01em;
  text-transform: var(--heading-case);
  text-wrap: pretty;
}
.card__link { text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.card__link:focus-visible { outline: none; }
.card__link:focus-visible::after { outline: 3px solid var(--fg); outline-offset: 2px; }
.card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .75rem; margin-top: auto; padding-top: .15rem; }
.card__swatches { display: flex; align-items: center; gap: 5px; }
.card__swatch-more { font-size: .7rem; color: var(--fg-muted); }
.card--soldout .card__media img { filter: grayscale(.7); opacity: .7; }
.swatch-dot { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--swatch, var(--wash)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 30%, transparent); }

/* Card styles */
html[data-card="plain"] .card__media { border-radius: var(--radius); }
html[data-card="bracket"] .card { --frame-c: var(--line); background: var(--panel); }
html[data-card="bracket"] .card__body { padding: .85rem .9rem 1rem; }
html[data-card="bracket"] .card__media-wrap::after {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 2;
  pointer-events: none;
  --m: var(--acc);
  background:
    linear-gradient(var(--m), var(--m)) 0 0 / 14px 2px no-repeat,
    linear-gradient(var(--m), var(--m)) 0 0 / 2px 14px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 0 / 14px 2px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 0 / 2px 14px no-repeat,
    linear-gradient(var(--m), var(--m)) 0 100% / 14px 2px no-repeat,
    linear-gradient(var(--m), var(--m)) 0 100% / 2px 14px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 100% / 14px 2px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 100% / 2px 14px no-repeat;
  transition: inset .25s var(--ease);
}
html[data-card="bracket"] .card:hover .card__media-wrap::after { inset: 5px; }
html[data-card="bracket"] .card:hover { --frame-c: var(--acc); }
html[data-card="line"] .product-grid { gap: 0; }
html[data-card="line"] .card { --frame-c: var(--line); margin: 0 calc(var(--bw) * -1) calc(var(--bw) * -1) 0; }
html[data-card="line"] .card__body { padding: .9rem 1rem 1.1rem; }
html[data-card="line"] .card__media-wrap { border-bottom: var(--bw) solid var(--line); }
html[data-card="line"] .rail--swipe > .grid { gap: 0; }
html[data-card="pop"] .card { --frame-c: var(--c-line); background: var(--panel); border-width: max(var(--bw), 2px); box-shadow: var(--shadow); overflow: hidden; }
html[data-card="pop"] .card__body { padding: .8rem .9rem 1rem; }
html[data-card="pop"] .card__media-wrap { border-bottom: max(var(--bw), 2px) solid var(--c-line); }
html[data-card="pop"][data-corner="chamfer"] .card { box-shadow: none; }

/* Hover effects (Texture and motion > Product card hover) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html:not([data-hover="none"]) .card:hover .card__media img:first-child { transform: scale(1.04); }
  html[data-hover="lift"] .card:hover { transform: translateY(-5px); }
  html[data-hover="lift"][data-card="pop"] .card:hover { box-shadow: var(--shadow-hover); }
  html[data-hover="tilt"] .card:hover { transform: rotate(-1.3deg) translateY(-4px); }
  html[data-hover="tilt"] li:nth-child(even) > .card:hover { transform: rotate(1.1deg) translateY(-4px); }
  html[data-hover="tilt"][data-card="pop"] .card:hover { box-shadow: var(--shadow-hover); }
  html[data-hover="glitch"] .card:hover .card__scan { opacity: 1; animation: volt-scan .7s steps(6) 1; }
  html[data-hover="glitch"] .card:hover .card__media { animation: volt-jitter .32s steps(2) 1; }
  html[data-hover="glitch"] .card:hover .card__title { text-shadow: -.07em 0 color-mix(in srgb, var(--c-accent) 80%, transparent), .07em 0 color-mix(in srgb, var(--c-accent-2) 80%, transparent); }
}
html[data-hover="none"] .card:hover .card__link { text-decoration: underline; text-decoration-thickness: 2px; }
@keyframes volt-scan { from { background-position: 0 -40px; } to { background-position: 0 0; } }
@keyframes volt-jitter {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 1px); clip-path: inset(10% 0 55% 0); }
  50% { transform: translate(3px, -1px); clip-path: inset(48% 0 12% 0); }
  100% { transform: none; clip-path: none; }
}

/* Price */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15em .55em; margin: 0; font-family: var(--font-ui); font-weight: var(--font-ui-weight); font-size: .92rem; letter-spacing: .02em; }
.price__current { font-weight: var(--font-ui-bold); }
.price--sale .price__current { color: var(--sale-text); }
.scheme-accent .price--sale .price__current, .scheme-accent-2 .price--sale .price__current, .scheme-accent-3 .price--sale .price__current { color: inherit; }
.price__compare { color: var(--fg-muted); font-size: .86em; }
.price__unit { flex-basis: 100%; font-size: .78em; color: var(--fg-muted); }
.price--lg { font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); }

/* Round sticker badges (Zine) */
html[data-badge="circle"] .badge { border-radius: 999px; padding-inline: .8em; }
html[data-badge="circle"] .badge--sale {
  min-width: 58px;
  min-height: 58px;
  padding: 0 .3em;
  border-radius: 50%;
  font-size: .8rem;
  transform: rotate(-10deg);
  box-shadow: calc(var(--sh) * .6) calc(var(--sh) * .6) 0 var(--shadow-c), inset 0 0 0 3px var(--c-sale), inset 0 0 0 4px var(--c-on-sale);
}

/* ---------------------------------------------------------------------------
   18  Product page: layout, gallery, variant picker
   ------------------------------------------------------------------------ */
.product { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start; }
.product--media-right .product__gallery { order: 2; }
.product__info-inner { display: flex; flex-direction: column; gap: 1.05rem; }
@media (min-width: 990px) {
  .product--sticky .product__info-inner { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
@media (max-width: 989px) {
  .product { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .product--media-right .product__gallery { order: 0; }
}
.product__vendor { margin: 0; color: var(--fg-muted); }
.product__title-row { margin: 0; }
.product__title { margin: 0; font-size: calc(clamp(1.75rem, 1.15rem + 2.1vw, 3.3rem) * var(--heading-scale)); }
.product__price-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.product__badges { display: flex; gap: .4rem; }
.product__tax { flex-basis: 100%; margin: 0; }
.product__tax a { text-decoration: underline; }
.product__text.label { font-size: .78rem; }
.product__sku { margin: 0; }
.product__full-link { align-self: flex-start; }
.product__description { color: var(--fg-muted); }

/* Gallery */
.gallery { position: relative; min-width: 0; }
.gallery__main { position: relative; min-width: 0; }
.gallery__track { display: flex; gap: var(--grid-gap, 12px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; background: var(--panel); overflow: hidden; }
.gallery__media img { cursor: zoom-in; }
.gallery__zoom { position: absolute; top: 10px; right: 10px; z-index: 3; }
.gallery__counter { position: absolute; right: 10px; bottom: 10px; z-index: 3; margin: 0; padding: .3em .7em; background: var(--bg); border: var(--bw) solid var(--line); border-radius: var(--radius-sm); font-size: .74rem; letter-spacing: .08em; }
.gallery__thumbs { display: flex; gap: .55rem; margin: .75rem 0 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.gallery__thumb { position: relative; display: block; width: 72px; flex: none; aspect-ratio: 4 / 5; overflow: hidden; opacity: .55; transition: opacity .2s; --frame-c: var(--hairline); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover, .gallery__thumb.is-active { opacity: 1; }
.gallery__thumb.is-active { --frame-c: var(--acc); border-width: max(var(--bw), 2px); }
.gallery__thumb-badge { position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 22px; height: 22px; background: var(--bg); border-radius: 50%; }
@media (min-width: 990px) {
  .gallery--thumbs-left { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 1rem; align-items: start; }
  .gallery--thumbs-left .gallery__thumbs { order: -1; flex-direction: column; margin: 0; max-height: 640px; overflow-y: auto; }
  .gallery--thumbs-left .gallery__thumb { width: 76px; }
  .gallery--stacked .gallery__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .gallery--stacked .gallery__slide:first-child { grid-column: 1 / -1; }
  .gallery--stacked .gallery__thumbs, .gallery--stacked .gallery__counter { display: none; }
}
@media (max-width: 989px) {
  .gallery__thumbs { display: none; }
  .gallery__track { gap: 10px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .gallery__slide { flex-basis: 82%; }
  .gallery__track > .gallery__slide:only-child { flex-basis: 100%; }
  .gallery__slide .gallery__media { max-height: 58vh; max-height: 58svh; }
}
.deferred-media__poster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; cursor: pointer; }
.deferred-media__poster img { width: 100%; height: 100%; object-fit: cover; }
.deferred-media__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 72px; height: 72px; transform: translate(-50%, -50%); background: var(--acc); color: var(--on-acc); border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease); }
.deferred-media__poster:hover .deferred-media__play { transform: translate(-50%, -50%) scale(1.08); }
html:is([data-corner="square"], [data-corner="chamfer"]) .deferred-media__play { border-radius: 0; }
deferred-media.is-loaded .deferred-media__poster { display: none; }

/* Variant picker */
.variant-picker { display: grid; gap: 1rem; }
.variant-picker__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.variant-picker__selected { color: var(--fg-muted); }
.pills, .swatches { display: flex; flex-wrap: wrap; gap: .45rem; }
.pill {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  min-height: 44px;
  padding: .35em .95em;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  font-family: var(--font-ui);
  font-size: .85rem;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.pill:hover { border-color: var(--fg); }
.pill-input:checked + .pill { background: var(--fg); color: var(--bg); border-color: var(--fg); }
html[data-shadow="hard"] .pill-input:checked + .pill,
html[data-shadow="color"] .pill-input:checked + .pill { box-shadow: 3px 3px 0 var(--shadow-c); transform: translate(-1px, -1px); }
html[data-shadow="glow"] .pill-input:checked + .pill { background: var(--acc); color: var(--on-acc); border-color: var(--acc); box-shadow: 0 0 16px color-mix(in srgb, var(--acc) 45%, transparent); }
.pill-input[data-unavailable] + .pill { color: var(--fg-muted); background-image: linear-gradient(to top right, transparent calc(50% - 1px), var(--fg-muted) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }
.pill-input:focus-visible + .pill, .pill-input:focus-visible + .swatch { outline: 3px solid var(--fg); outline-offset: 3px; }
html[data-corner="chamfer"] .pill { border-color: transparent; box-shadow: inset 0 0 0 var(--bw) var(--line); clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
html[data-corner="chamfer"] .pill-input:checked + .pill { box-shadow: none; }
.swatch { position: relative; display: grid; width: 44px; height: 44px; padding: 4px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; transition: border-color .15s; }
.swatch__fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--swatch, var(--wash)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 28%, transparent); }
.swatch:hover { border-color: var(--hairline); }
.pill-input:checked + .swatch { border-color: var(--fg); }
html:is([data-corner="square"], [data-corner="chamfer"]) .swatch { border-radius: 0; }
.pill-input[data-unavailable] + .swatch .swatch__fill { opacity: .45; background-image: linear-gradient(to top right, transparent calc(50% - 1px), var(--fg) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }

/* ---------------------------------------------------------------------------
   19  Product page: buy form, stock, perks, sticky bar, lightbox, quick view
   ------------------------------------------------------------------------ */
.product-form { display: grid; gap: .6rem; }
.product-form__form { display: grid; gap: .6rem; }
.product-form__row { display: flex; gap: .6rem; align-items: stretch; }
.product-form__submit { flex: 1 1 auto; justify-content: space-between; }
.product-form__price { font-family: var(--font-ui); font-weight: var(--font-ui-weight); font-size: .9em; letter-spacing: .02em; opacity: .9; }
.product-form .form-message { margin: 0; }
.product-form__dynamic { min-height: 50px; }
.shopify-payment-button__button { border-radius: var(--radius) !important; min-height: 50px; }
.product-form .shopify-payment-button__button--unbranded,
.product-form .shopify-payment-button__button--unbranded:hover:not([disabled]) {
  width: 100%;
  min-height: 50px;
  border: max(var(--bw), 1px) solid var(--fg);
  background: var(--panel);
  color: var(--fg);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.product-form .shopify-payment-button__button--unbranded:hover:not([disabled]) { background: var(--acc); color: var(--on-acc); border-color: var(--acc); }
html[data-corner="chamfer"] .shopify-payment-button__button { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
html[data-shadow="hard"] .product-form .shopify-payment-button__button--unbranded,
html[data-shadow="color"] .product-form .shopify-payment-button__button--unbranded { box-shadow: var(--sh) var(--sh) 0 var(--shadow-c); }
.shopify-payment-button__more-options { margin-top: .5rem; font-size: .85rem; text-decoration: underline; color: var(--fg); background: none; border: 0; }
@media (max-width: 749px) {
  .product-form__submit { white-space: nowrap; letter-spacing: .04em; }
  .product-form .shopify-payment-button__button--unbranded { min-height: 46px; }
  .qty--lg .qty__btn { width: 44px; min-height: 46px; }
}

.inventory { display: flex; align-items: center; gap: .5em; margin: 0 0 .5rem; font-family: var(--font-ui); font-size: .8rem; letter-spacing: .06em; text-transform: var(--label-case); }
.inventory--ok { color: var(--fg-muted); }
.product__inventory:empty { display: none; }
.product__pickup:empty { display: none; }
.pickup { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; }
.pickup p { margin: 0 0 .2rem; }
.pickup__list { display: grid; gap: 1.2rem; }
.pickup__location h3 { margin-bottom: .3rem; }
.pickup__status { display: flex; align-items: center; gap: .4em; font-size: .9rem; margin: 0 0 .3rem; }
.product__perks { display: grid; gap: .55rem; padding: .9rem 1rem; border: var(--bw) dashed var(--hairline); border-radius: var(--radius-sm); }
.product__perks li { display: flex; align-items: center; gap: .65rem; font-size: .9rem; }
.product__perks .icon { width: 20px; height: 20px; color: var(--fg); }
.product__collapsible .accordion__summary { font-size: calc(1rem * var(--heading-scale)); min-height: 54px; }
.product__collapsible-title { display: inline-flex; align-items: center; gap: .6rem; }
.product__collapsible + .product__collapsible { border-top: 0; }
.product__info-inner > .product__collapsible:first-of-type { border-top: var(--bw) solid var(--line); }
.product__share { display: block; }
.share-fallback { margin-top: .6rem; max-width: 420px; }

/* Sticky add to cart: slides up from the bottom while the main button is off-screen */
.sticky-atc {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  border-top: max(var(--bw), 1px) solid var(--line);
  background: var(--bg);
  color: var(--fg);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(110%);
  transition: transform .3s var(--ease-out), visibility 0s .3s;
  visibility: hidden;
}
.sticky-atc.is-visible { transform: none; visibility: visible; transition: transform .3s var(--ease-out); }
html[data-shadow="glow"] .sticky-atc { border-top-color: var(--acc); box-shadow: 0 -10px 40px color-mix(in srgb, var(--c-accent) 18%, transparent); }
.sticky-atc__inner { display: flex; align-items: center; gap: .75rem; min-height: 64px; padding-block: .55rem; }
.sticky-atc__thumb { width: 44px; height: 54px; object-fit: cover; flex: none; border: var(--bw) solid var(--hairline); }
.sticky-atc__text { flex: 1; min-width: 0; }
.sticky-atc__title { margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); text-transform: var(--heading-case); font-size: .95rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-atc .price { font-size: .82rem; }
.sticky-atc__btn { min-height: 46px; flex: none; }
@media (min-width: 990px) { .sticky-atc--mobile { display: none; } }
@media (max-width: 440px) { .product-form__submit { justify-content: center; } .product-form__price { display: none; } }

/* Lightbox */
.lightbox .modal__panel { width: 100%; height: 100%; max-height: none; max-width: none; border: 0; border-radius: 0; background: var(--bg); }
.lightbox__list { display: grid; gap: 12px; padding: 12px; justify-items: center; }
.lightbox__list img { width: auto; max-width: 100%; max-height: 92vh; object-fit: contain; }
@media (max-width: 749px) { .lightbox .modal__panel { max-height: 100dvh; } }

/* Quick view */
.quick-view__panel { padding: clamp(1rem, 2.5vw, 2rem); }
.quick-view__panel .product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); }
.quick-view__panel .product__title { font-size: calc(clamp(1.5rem, 1.2rem + 1.2vw, 2.3rem) * var(--heading-scale)); padding-right: 48px; }
.quick-view__panel .gallery__thumbs { display: none; }
.quick-view__panel .product__info-inner { position: static; }
@media (max-width: 749px) {
  .quick-view__panel { padding: 1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom)); }
  .quick-view__panel .product { grid-template-columns: minmax(0, 1fr); }
  .quick-view__panel .gallery__track { margin-inline: 0; padding-inline: 0; }
  .quick-view__panel .gallery__slide { flex-basis: 64%; }
  .quick-view__panel .gallery__slide .gallery__media { max-height: 34vh; }
}
.product--featured .product__title { font-size: calc(clamp(1.7rem, 1.2rem + 2vw, 3rem) * var(--heading-scale)); }

/* ---------------------------------------------------------------------------
   20  Countdown, image with text, shop the look, testimonials
   ------------------------------------------------------------------------ */
.countdown { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem clamp(1.5rem, 4vw, 4rem); }
.countdown__head .kicker { margin-bottom: .6rem; }
.countdown__heading { margin-bottom: .6rem; }
.countdown__text { max-width: 46ch; color: var(--fg-muted); }
.countdown__side { display: grid; justify-items: start; gap: 1rem; }
.countdown__clock { display: flex; gap: clamp(.4rem, 1vw, .8rem); }
.countdown__unit { display: grid; justify-items: center; gap: .2rem; min-width: clamp(62px, 7vw, 96px); padding: .65rem .5rem .55rem; background: var(--bg); --frame-c: var(--line); }
.countdown__num { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(2rem, 1.3rem + 2.6vw, 3.8rem); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.countdown__label { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
.countdown__when { display: inline-flex; align-items: center; gap: .5em; margin: 0; font-size: .78rem; letter-spacing: .1em; text-transform: var(--label-case); }
html[data-shadow="glow"] .countdown__num { color: var(--acc); text-shadow: 0 0 .4em color-mix(in srgb, var(--acc) 55%, transparent); }
html[data-shadow="hard"] .countdown__unit, html[data-shadow="color"] .countdown__unit { background: var(--c-accent); color: var(--c-on-accent); border-width: max(var(--bw), 2px); box-shadow: var(--shadow-sm); }
html[data-shadow="hard"] .countdown__unit .countdown__label, html[data-shadow="color"] .countdown__unit .countdown__label { color: inherit; }
html[data-shadow="color"] .countdown__unit { background: var(--c-accent-3); color: var(--c-on-accent-3); }
html[data-card="line"] .countdown__clock { gap: 0; }
html[data-card="line"] .countdown__unit { margin-right: calc(var(--bw) * -1); }
.countdown.is-live .countdown__when { display: none; }
@media (max-width: 749px) {
  .countdown { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .countdown__clock { width: 100%; }
  .countdown__unit { flex: 1; min-width: 0; padding: .5rem .25rem; }
  .countdown__num { font-size: 1.9rem; }
  .countdown__side { justify-items: stretch; }
  .countdown__btn { width: 100%; }
}

.feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
.feature--w-half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.feature--media-right .feature__figure { order: 2; }
.feature__figure { position: relative; }
.feature__frame { overflow: hidden; }
.feature__sticker { right: -3%; bottom: -6%; }
.feature__text { display: grid; gap: 1rem; justify-items: start; }
.feature__text > * { margin: 0; }
.feature__body { color: var(--fg-muted); max-width: 52ch; }
.feature__list { display: grid; gap: .55rem; }
.feature__list li { display: flex; gap: .6rem; align-items: baseline; }
.feature__list .icon { color: var(--acc); transform: translateY(2px); }
html[data-shadow="hard"] .feature__list .icon { color: var(--c-accent-2); }
html[data-banner="panel"] .feature__frame { border-width: max(var(--bw), 2px); box-shadow: var(--shadow); transform: rotate(-1deg); }
@media (max-width: 749px) {
  .feature, .feature--w-half { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .feature--media-right .feature__figure { order: 0; }
  .feature__sticker { width: 74px; font-size: .75rem; }
}

.look { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
.look--media-right .look__figure { order: 2; }
.look__figure { position: relative; }
.look__frame { position: relative; overflow: visible; }
.look__frame > .look__media { overflow: hidden; }
.look__dot {
  position: absolute;
  left: var(--x); top: var(--y);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  background: var(--c-accent-3);
  color: var(--c-on-accent-3);
  border: 2px solid var(--c-on-accent-3);
  font-family: var(--font-ui);
  font-weight: var(--font-ui-bold);
  font-size: .8rem;
  text-decoration: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent-3) 60%, transparent);
  transition: transform .2s var(--ease);
}
.look__dot:hover, .look__dot.is-active { transform: scale(1.18); }
@media (prefers-reduced-motion: no-preference) { .look__dot { animation: volt-ping 2.2s ease-out infinite; } }
.look__side .section-head { margin-bottom: 1.2rem; }
.look__list { display: grid; gap: .6rem; counter-reset: look; }
.look__item { display: grid; grid-template-columns: auto 64px minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .55rem; border: var(--bw) solid var(--hairline); border-radius: var(--radius-sm); background: var(--panel); transition: border-color .2s, transform .2s var(--ease); }
.look__item.is-active { border-color: var(--acc); transform: translateX(4px); }
.look__num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fg); color: var(--bg); font-size: .75rem; }
.look__thumb { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.look__thumb img { width: 100%; height: 100%; object-fit: cover; }
.look__info { display: grid; gap: .2rem; min-width: 0; }
.look__title { font-weight: var(--font-body-bold); line-height: 1.25; }
.look__count { margin: 1rem 0 0; font-size: .74rem; letter-spacing: .1em; text-transform: var(--label-case); color: var(--fg-muted); }
@media (max-width: 749px) {
  .look { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .look--media-right .look__figure { order: 0; }
  .look__item { grid-template-columns: auto 52px minmax(0, 1fr) auto; gap: .65rem; }
  .look__dot { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
}

/* Testimonials: four quote styles */
.quote { position: relative; display: flex; flex-direction: column; height: 100%; margin: 0; }
.quote__bar { display: none; }
.quote__body { flex: 1; margin: 0; }
.quote__text { font-size: 1.05rem; line-height: 1.55; }
.quote__text p { margin: 0; }
.quote__stars { display: flex; gap: 2px; margin: 0 0 .6rem; color: var(--fg); }
.quote__by { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: 1.1rem; }
.quote__avatar, .quote__initial { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; }
.quote__initial { display: grid; place-items: center; background: var(--fg); color: var(--bg); font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 1.1rem; }
.quote__name { display: block; font-weight: var(--font-body-bold); line-height: 1.2; }
.quote__detail { display: block; font-size: .72rem; letter-spacing: .08em; color: var(--fg-muted); text-transform: var(--label-case); }
.quote__product { margin-left: auto; font-size: .7rem; }
html[data-quote="terminal"] .quote { border: var(--bw) solid var(--line); background: var(--panel); }
html[data-quote="terminal"] .quote__bar { display: flex; align-items: center; gap: .8rem; padding: .55rem .8rem; border-bottom: var(--bw) solid var(--line); font-size: .7rem; letter-spacing: .08em; color: var(--fg-muted); }
html[data-quote="terminal"] .quote__dots { display: flex; gap: 5px; }
html[data-quote="terminal"] .quote__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--c-accent-2); }
html[data-quote="terminal"] .quote__dots i:nth-child(2) { background: var(--c-accent-3); }
html[data-quote="terminal"] .quote__dots i:nth-child(3) { background: var(--c-accent); }
html[data-quote="terminal"] .quote__body { padding: 1.1rem 1.1rem 0; font-family: var(--font-ui); }
html[data-quote="terminal"] .quote__text { font-size: .95rem; }
html[data-quote="terminal"] .quote__text > :first-child::before { content: "> "; color: var(--acc); }
html[data-quote="terminal"] .quote__by { padding: 0 1.1rem 1.1rem; }
html[data-quote="bubble"] .quote__body { position: relative; padding: 1.2rem 1.3rem; background: var(--panel); border: max(var(--bw), 2px) solid var(--c-line); border-radius: calc(var(--radius) * 1.8); box-shadow: var(--shadow); }
html[data-quote="bubble"] .quote__body::after { content: ""; position: absolute; left: 28px; bottom: -18px; width: 26px; height: 18px; background: var(--c-line); clip-path: polygon(0 0, 100% 0, 15% 100%); }
html[data-quote="bubble"] .quote__body::before { content: ""; position: absolute; left: calc(28px + max(var(--bw), 2px) * 1.2); bottom: -11px; z-index: 1; width: 18px; height: 13px; background: var(--panel); clip-path: polygon(0 0, 100% 0, 15% 100%); }
html[data-quote="bubble"] .quote__text { font-family: var(--font-heading); font-weight: var(--font-heading-weight); text-transform: var(--heading-case); font-size: 1.15rem; line-height: 1.25; }
html[data-quote="bubble"] .quote__by { margin-top: 1.5rem; padding-left: .4rem; }
html[data-quote="taped"] .quote { padding: 1.6rem 1.3rem 1.2rem; background: var(--panel); border-radius: 3px; box-shadow: var(--shadow-sm); transform: rotate(-1.2deg); }
html[data-quote="taped"] li:nth-child(even) .quote { transform: rotate(1deg); }
html[data-quote="taped"] .quote::before { content: ""; position: absolute; top: -12px; left: 50%; width: 88px; height: 24px; margin-left: -44px; background: color-mix(in srgb, var(--c-accent-3) 70%, transparent); transform: rotate(-3deg); }
html[data-quote="taped"] .quote__text { font-size: 1.1rem; }
html[data-quote="plain"] .quote { padding-top: 1.2rem; border-top: max(var(--bw), 2px) solid var(--fg); }
html[data-quote="plain"] .quote__text { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: calc(1.35rem * var(--heading-scale)); line-height: 1.15; letter-spacing: var(--heading-spacing); text-transform: var(--heading-case); }
.quotes { padding-bottom: 18px; }

/* ---------------------------------------------------------------------------
   21  FAQ, rich text, sign-up, video, icon row, blog, pages, accounts
   ------------------------------------------------------------------------ */
.faq--split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.faq__head .section-head { margin-bottom: 1.2rem; }
.faq__q { display: inline-flex; align-items: baseline; gap: .8rem; }
.faq__n { font-size: .72rem; color: var(--fg-muted); letter-spacing: .08em; }
@media (min-width: 990px) { .faq--split .faq__head { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
@media (max-width: 749px) { .faq--split { grid-template-columns: minmax(0, 1fr); gap: .5rem; } .faq__btn { display: none; } }

.rich { display: grid; gap: 1.1rem; justify-items: start; }
.rich > * { margin: 0; }
.rich--center { justify-items: center; text-align: center; }
.rich__text { max-width: 60ch; color: var(--fg-muted); }
.rich__display { margin: 0; }
.rich--center .section-title, .rich--center .display { transform-origin: 50% 100%; }

.signup { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 1.5rem clamp(1.5rem, 4vw, 4rem); }
.signup__heading { margin-bottom: .6rem; }
.signup__body { color: var(--fg-muted); }
.signup__note { margin: .6rem 0 0; }
.signup__sticker { top: -28px; right: 4%; }
.signup .field__control { background: var(--bg); }
@media (max-width: 749px) {
  .signup { grid-template-columns: minmax(0, 1fr); }
  .signup__sticker { width: 64px; top: -22px; font-size: .7rem; }
}

.video-box { position: relative; }
.video-box__frame { overflow: hidden; }
.video-box__label { position: absolute; left: 14px; bottom: 14px; z-index: 2; padding: .35em .7em; background: var(--bg); color: var(--fg); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.video-wrap--full { padding-inline: 0; }
.video-wrap--full .section-head { padding-inline: var(--gutter); }

.icon-row { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 1rem clamp(1rem, 3vw, 3rem); }
.icon-row__item { display: flex; align-items: flex-start; gap: .85rem; }
.icon-row__icon { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.icon-row__text { display: grid; gap: .15rem; }
.icon-row__title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); text-transform: var(--heading-case); letter-spacing: var(--heading-spacing); font-size: calc(1.05rem * var(--heading-scale)); line-height: 1.15; }
.icon-row__body { color: var(--fg-muted); }
@media (max-width: 749px) { .icon-row { grid-template-columns: minmax(0, 1fr); gap: .9rem; } .icon-row__icon { width: 40px; height: 40px; } }

.post-card { display: flex; flex-direction: column; height: 100%; }
.post-card__media { position: relative; display: block; overflow: hidden; }
.post-card__media img { transition: transform .6s var(--ease-out); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__index { position: absolute; left: 10px; top: 10px; z-index: 2; padding: .25em .55em; background: var(--bg); font-size: .72rem; }
.post-card__body { display: flex; flex-direction: column; gap: .45rem; flex: 1; padding-top: .9rem; }
.post-card__meta { margin: 0; }
.post-card__title { margin: 0; }
.post-card__excerpt { margin: 0; font-size: .95rem; }
.post-card__more { margin-top: auto; align-self: flex-start; }
@media (min-width: 990px) {
  .post-grid__lead { grid-column: span 2; }
  .post-grid__lead .post-card__title { font-size: calc(1.8rem * var(--heading-scale)); }
}

.page-head { margin-bottom: clamp(1.2rem, 1rem + 1.5vw, 2.5rem); }
.page-head .kicker { margin-bottom: .6rem; }
.page-head__title { margin: 0; }
.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: 1.2rem; }
.chip--on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.article-head { margin-bottom: 1.5rem; }
.article-head__title { margin-bottom: .6rem; }
.article-figure { margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.article-body, .page-body { font-size: 1.06rem; }
.article-tags { margin-top: 2rem; }
.article-share { display: block; margin-top: 1.5rem; }
.article-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; }
.article-nav__link { display: grid; gap: .4rem; padding: 1rem 1.1rem; text-decoration: none; background: var(--panel); --frame-c: var(--line); }
.article-nav__link .h4 { margin: 0; }
.article-nav__link--next { text-align: right; grid-column: 2; }
.article-nav__link:hover { --frame-c: var(--acc); }
@media (max-width: 749px) { .article-nav { grid-template-columns: minmax(0, 1fr); } .article-nav__link--next { grid-column: 1; } }
.comments { margin-top: 3rem; }
.comments__list { display: grid; gap: 1rem; margin: 1rem 0 2rem; }
.comment { padding: 1.1rem 1.2rem; --frame-c: var(--line); }
.comment__meta { margin: .6rem 0 0; }
.comment-form { display: grid; gap: .2rem; margin-top: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
@media (max-width: 749px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.contact__details { display: grid; gap: 1rem; }
.contact__detail { display: flex; gap: .85rem; align-items: flex-start; }
.contact__detail .label { display: block; margin-bottom: .2rem; }
.contact__value p { margin: 0; }
.contact__form { padding: clamp(1.1rem, 1rem + 1.5vw, 2.2rem); --frame-c: var(--line); }
@media (max-width: 749px) { .contact { grid-template-columns: minmax(0, 1fr); } }

/* Accounts */
.account-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; max-width: 1100px; }
.account-auth__intro .display { margin-bottom: .8rem; }
.account-auth__panel { padding: clamp(1.1rem, 1rem + 1.5vw, 2.2rem); --frame-c: var(--line); }
.account-auth__switch { margin: 1.2rem 0 0; font-size: .95rem; }
.account-recover:not([open]) { display: none; }
.account-recover[open] + .account-login { display: none; }
.account-guest { margin-top: 1.5rem; padding-top: 1.2rem; border-top: var(--bw) solid var(--hairline); }
@media (max-width: 749px) { .account-auth { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
.account__head { display: grid; gap: .6rem; justify-items: start; margin-bottom: 2rem; }
.account__head .display { margin: 0; }
.account__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.account__details { padding: 1.3rem; --frame-c: var(--line); }
.account__details .h4 { margin-top: 0; }
.account__empty { padding: 1.4rem; --frame-c: var(--line); }
@media (max-width: 989px) { .account__grid { grid-template-columns: minmax(0, 1fr); } }
.table-wrap { overflow-x: auto; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); }
.data-table { font-size: .92rem; }
.data-table :is(th, td) { padding: .8rem 1rem; text-align: left; border-bottom: var(--bw) solid var(--hairline); white-space: nowrap; }
.data-table thead th { font-family: var(--font-ui); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; background: var(--wash); }
.data-table tbody th { font-weight: var(--font-body-bold); white-space: normal; }
.data-table tfoot th { text-align: right; font-weight: var(--font-body-weight); }
.data-table__total :is(th, td) { font-weight: var(--font-body-bold); font-size: 1.05rem; border-bottom: 0; }
.address-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.address { padding: 1.1rem; display: grid; gap: .6rem; align-content: start; --frame-c: var(--line); }
.address__edit[open] { grid-column: 1 / -1; }
.address__edit summary { justify-self: start; }
.address-new summary { cursor: pointer; margin-bottom: 1rem; }

/* Password page */
.template-password { background-color: var(--c-bg); }
.password { display: grid; gap: 2rem; min-height: calc(100svh - 120px); align-content: center; justify-items: start; }
.password__brand .header__logo-text { font-size: calc(1.6rem * var(--heading-scale)); }
.password__logo { width: 180px; height: auto; }
.password__title { margin-bottom: 1rem; }
.password__message { max-width: 46ch; color: var(--fg-muted); }
.password__signup { max-width: 520px; display: grid; gap: .6rem; margin-top: 1.2rem; }
.password__enter { padding: 1rem 1.2rem; max-width: 520px; width: 100%; --frame-c: var(--line); }
.password__enter-summary { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.password__form { margin: .6rem 0; }
@media (min-width: 990px) {
  .password { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); column-gap: clamp(2rem, 5vw, 6rem); align-items: end; }
  .password__brand { grid-column: 1 / -1; }
  .password__main { grid-column: 1; }
  .password__enter { grid-column: 2; align-self: end; }
}
.password-foot { padding: 1.2rem 0; border-top: var(--bw) solid var(--line); }

/* Gift card */
.giftcard__shop { margin-bottom: 1.5rem; }
.giftcard__card { display: grid; gap: 1rem; padding: clamp(1.4rem, 1rem + 3vw, 3rem); }
.giftcard__card.is-void { opacity: .6; }
.giftcard__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.giftcard__top .kicker { margin: 0; }
.giftcard__value { margin: 0; }
.giftcard__balance { margin: 0; font-size: .85rem; letter-spacing: .08em; }
.giftcard__code .field__input { font-size: 1.15rem; letter-spacing: .14em; }
.giftcard__qr { justify-self: start; padding: 8px; background: #fff; }
.giftcard__qr:empty { display: none; }
.giftcard__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
@media print {
  .giftcard__actions, .skip-link { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ---------------------------------------------------------------------------
   22  Collection page and facets
   ------------------------------------------------------------------------ */
.collection-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem clamp(1.5rem, 4vw, 4rem); align-items: end; }
.collection-hero--image { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.collection-hero__text .kicker { margin-bottom: .55rem; }
.collection-hero__title { margin-bottom: .6rem; }
.collection-hero__desc { max-width: 62ch; color: var(--fg-muted); }
.collection-hero__figure { position: relative; }
.collection-hero__readout { margin-top: clamp(1rem, .8rem + 1vw, 2rem); }
.collection-hero-section { padding-bottom: 0; }
@media (max-width: 749px) {
  .collection-hero--image { grid-template-columns: minmax(0, 1fr); }
  .collection-hero__figure { display: none; }
  .collection-hero__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .95rem; }
}
.collection-section { padding-top: clamp(1rem, .8rem + 1vw, 2rem); }
.collection-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1.2rem; }
.toolbar__count { margin: 0 auto 0 0; font-size: .78rem; letter-spacing: .1em; text-transform: var(--label-case); color: var(--fg-muted); }
.toolbar__filter { order: -1; }
.toolbar__sort { display: flex; align-items: center; gap: .6rem; }
.toolbar__sort-label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.toolbar__sort .field__select { min-height: 44px; font-family: var(--font-ui); font-size: .85rem; padding-block: .3em; }
@media (max-width: 749px) { .toolbar__sort-label { display: none; } .toolbar__count { flex-basis: 100%; order: 3; margin: 0; } }

.collection-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.collection-results { min-width: 0; }
@media (min-width: 990px) {
  .collection-layout--facets { grid-template-columns: 250px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
  .collection-toolbar--facets .toolbar__filter, .collection-layout--facets .toolbar__filter { display: none; }
  .collection-toolbar--facets { padding-left: calc(250px + clamp(1.5rem, 3vw, 3rem)); }
  .drawer--facets { position: sticky; top: calc(var(--header-h) + 1rem); inset: auto; z-index: auto; visibility: visible; pointer-events: auto; max-height: calc(100vh - var(--header-h) - 2rem); overflow-y: auto; scrollbar-width: thin; }
  .drawer--facets .drawer__overlay, .drawer--facets .facets__head, .drawer--facets .facets__foot { display: none; }
  .drawer--facets .drawer__panel { position: static; width: auto; transform: none; border: 0; background: transparent; box-shadow: none !important; transition: none; }
  .drawer--facets .drawer__body { padding: 0; overflow: visible; }
}
.no-js .drawer--facets { position: static; visibility: visible; pointer-events: auto; }
.no-js .drawer--facets .drawer__panel { position: static; transform: none; width: auto; }
.no-js .drawer--facets .drawer__overlay { display: none; }
.facets__groups { border-top: 0; }
.facet .accordion__summary { font-size: calc(1rem * var(--heading-scale)); min-height: 52px; }
.facet__badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: auto; margin-right: .6rem; background: var(--acc); color: var(--on-acc); border-radius: 11px; font-size: .7rem; }
.facet__body { padding: 0 0 1rem; margin: 0; border: 0; }
.facet__list { display: grid; gap: 0; max-height: 300px; overflow-y: auto; }
.facet__option { min-height: 40px; padding-block: .3em; align-items: center; font-size: .95rem; }
.facet__label { flex: 1; }
.facet__n { font-size: .72rem; color: var(--fg-muted); }
.facet__option.is-off { opacity: .45; cursor: not-allowed; }
.facet__list--swatch .swatch-dot { width: 18px; height: 18px; }
.facet__price { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.facet__price .field { margin-bottom: .4rem; }
.facets__foot { display: grid; grid-template-columns: 1fr 1.4fr; gap: .6rem; }
.facets__foot .btn { min-height: 46px; padding-inline: .8em; }
.active-facets { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: 1.2rem; }
.chip--remove { gap: .5em; min-height: 36px; }
.chip--remove .icon { width: 12px; height: 12px; }
.active-facets__clear { font-size: .78rem; margin-left: .4rem; }
.collection-results.is-loading { opacity: .45; pointer-events: none; transition: opacity .2s; }
.empty-state--grid { padding-block: 3rem; }
.empty-state--grid .display { margin-bottom: .8rem; }

/* ---------------------------------------------------------------------------
   23  Cart: lines, drawer, charge meter, summary, empty state
   ------------------------------------------------------------------------ */
.cart-lines { display: grid; }
.cart-line { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: .9rem 1rem; padding-block: 1rem; border-bottom: var(--bw) solid var(--hairline); align-items: start; transition: opacity .2s; }
.cart-line:first-child { padding-top: .4rem; }
.cart-line.is-loading { opacity: .5; pointer-events: none; }
.cart-line__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--wash); --frame-c: var(--hairline); }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__info { display: grid; gap: .3rem; min-width: 0; }
.cart-line__vendor { margin: 0; font-size: .66rem; }
.cart-line__title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); text-transform: var(--heading-case); letter-spacing: var(--heading-spacing); font-size: calc(1.02rem * var(--heading-scale)); line-height: 1.12; text-decoration: none; }
.cart-line__title:hover { text-decoration: underline; }
.cart-line__variant { display: flex; flex-wrap: wrap; gap: .1rem .8rem; margin: 0; font-size: .74rem; color: var(--fg-muted); }
.cart-line__unit { display: flex; gap: .5em; align-items: baseline; font-size: .82rem; color: var(--fg-muted); }
.cart-line__discount { margin: 0; font-size: .74rem; color: var(--sale-text); display: inline-flex; gap: .3em; align-items: center; }
.cart-line__controls { display: flex; align-items: center; gap: .8rem; margin-top: .25rem; }
.cart-line__controls .qty__btn { width: 38px; min-height: 40px; }
.cart-line__controls .qty__input { min-width: 36px; }
.cart-line__remove { display: inline-flex; align-items: center; gap: .35em; min-height: 40px; font-family: var(--font-ui); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); text-decoration: none; }
.cart-line__remove:hover { color: var(--fg); text-decoration: underline; }
.cart-line__error { margin: 0; color: var(--fg); padding: .4em .6em; border-left: 3px solid var(--c-sale); background: var(--wash); }
.cart-line__total { display: grid; justify-items: end; gap: .2rem; font-weight: var(--font-ui-bold); font-size: .95rem; }
@media (max-width: 749px) {
  .cart-line { grid-template-columns: 72px minmax(0, 1fr); }
  .cart-line__media { grid-column: 1; grid-row: 1 / span 2; }
  .cart-line__info { grid-column: 2; grid-row: 1 / span 2; padding-right: 4.6rem; }
  .cart-line__total { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
}

/* Charge meter: free shipping progress as a charging battery */
.charge { display: grid; gap: .5rem; }
.charge__label { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .86rem; }
.charge__label strong { font-family: var(--font-ui); }
.charge__icon { display: grid; place-items: center; width: 26px; height: 26px; flex: none; background: var(--acc); color: var(--on-acc); border-radius: 50%; }
.charge__icon .icon { width: 14px; height: 14px; }
html:is([data-corner="square"], [data-corner="chamfer"]) .charge__icon { border-radius: 0; }
.charge__bar { position: relative; height: 14px; background: var(--wash); border: var(--bw) solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.charge__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--value, 0) * 1%); background: var(--acc); transition: width .6s var(--ease-out); }
.charge__bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--bg) calc(10% - 2px) 10%); pointer-events: none; }
html[data-shadow="glow"] .charge__fill { box-shadow: 0 0 14px var(--acc); }
html[data-shadow="hard"] .charge__bar, html[data-shadow="color"] .charge__bar { border-width: max(var(--bw), 2px); box-shadow: 3px 3px 0 var(--shadow-c); }
.charge.is-full .charge__icon { background: var(--c-accent-3); color: var(--c-on-accent-3); }
@media (prefers-reduced-motion: no-preference) {
  .charge:not(.is-full) .charge__fill { background-image: linear-gradient(110deg, transparent 30%, color-mix(in srgb, #fff 35%, transparent) 50%, transparent 70%); background-size: 220% 100%; animation: volt-charge 2.4s linear infinite; }
}
@keyframes volt-charge { from { background-position: 130% 0; } to { background-position: -90% 0; } }

/* Drawer */
.cart-drawer .drawer__panel { width: min(470px, 100%); }
.drawer__count { font-family: var(--font-ui); font-size: .72rem; letter-spacing: .08em; color: var(--fg-muted); text-transform: none; vertical-align: super; }
.cart-drawer__meter { padding: .9rem var(--drawer-pad, 1.25rem); border-bottom: var(--bw) solid var(--hairline); }
.cart-drawer__meter:empty { display: none; }
.cart-drawer__body { padding-top: 0; }
.cart-drawer__foot { display: grid; gap: .5rem; }
.cart-total__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0; font-size: .85rem; }
.cart-total__row--big { font-family: var(--font-heading); font-weight: var(--font-heading-weight); text-transform: var(--heading-case); letter-spacing: var(--heading-spacing); font-size: calc(1.2rem * var(--heading-scale)); }
.cart-total__amount { font-family: var(--font-ui); font-weight: var(--font-ui-bold); font-size: .95em; letter-spacing: .02em; text-transform: none; }
.cart-total__note { margin: 0; }
.cart-drawer__actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: .6rem; margin-top: .3rem; }
.cart-drawer__actions .btn { padding-inline: .8em; }
.upsell { margin-top: 1.1rem; padding: .9rem; border: var(--bw) dashed var(--hairline); border-radius: var(--radius-sm); }
.upsell__title { margin: 0 0 .6rem; }
.upsell__list { display: grid; gap: .6rem; }
.upsell__item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: .7rem; align-items: center; }
.upsell__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; --frame-c: var(--hairline); }
.upsell__media img { width: 100%; height: 100%; object-fit: cover; }
.upsell__info { display: grid; gap: .1rem; min-width: 0; }
.upsell__name { font-size: .9rem; font-weight: var(--font-body-bold); line-height: 1.2; }
.upsell .price { font-size: .78rem; }
.upsell__form .form-message { position: absolute; right: 0; margin-top: 48px; font-size: .75rem; max-width: 220px; z-index: 2; }
.cart-note { margin-top: 1rem; }
.cart-note__summary { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.cart-note .field { margin: .3rem 0 0; }
.cart-note .field__textarea { min-height: 90px; }
.cart-empty { display: grid; gap: 1rem; justify-items: start; align-content: start; }
.cart-empty .display { margin: .5rem 0 0; }
.cart-empty p { margin: 0; }
.cart-empty--page { padding-block: 1.5rem 1rem; }

/* Cart page */
.cart-head { margin-bottom: clamp(.8rem, .6rem + 1vw, 1.5rem); }
.cart-head .kicker { margin-bottom: .5rem; }
.cart-head__title { margin: 0; }
.cart-head__readout { margin-bottom: clamp(1rem, .8rem + 1.5vw, 2.5rem); }
.cart-section { padding-top: clamp(1.2rem, 1rem + 2vw, 3rem); }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.cart-table-head { display: flex; justify-content: space-between; padding-bottom: .6rem; border-bottom: var(--bw) solid var(--line); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.cart-summary { display: grid; gap: .9rem; padding: clamp(1.1rem, 1rem + 1vw, 1.8rem); --frame-c: var(--line); }
@media (min-width: 990px) { .cart-summary { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.cart-summary__title { margin: 0; }
.cart-summary__note { margin: 0; }
.cart-summary__note .field__textarea { min-height: 90px; }
.cart-summary__back { justify-self: center; }
.cart-summary__wallets { display: grid; gap: .5rem; }
@media (max-width: 989px) { .cart-layout { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------------
   24  Search page, predictive results, 404
   ------------------------------------------------------------------------ */
.search-section { padding-top: clamp(1.2rem, 1rem + 2vw, 3rem); }
.search-hero { display: grid; gap: .6rem; justify-items: start; margin-bottom: clamp(1rem, .8rem + 1.5vw, 2rem); }
.search-hero__title { margin: 0 0 .4rem; max-width: 100%; }
.search-hero__readout { margin-bottom: clamp(1rem, .8rem + 1.5vw, 2.5rem); }
.search-form--page { width: min(760px, 100%); }
.search-field__prompt { display: grid; place-items: center; padding-left: 1rem; font-size: 1.2rem; color: var(--acc); }
html[data-shadow="hard"] .search-field__prompt, html[data-card="line"] .search-field__prompt { color: var(--fg); }
.search-form--page .field__input { min-height: 56px; font-size: 1.15rem; padding-left: .6rem; }
.search-form--page .field__btn { gap: .5em; }
@media (max-width: 749px) {
  .search-form--page .field__input { min-height: 48px; font-size: 1rem; }
  .search-form--page .field__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.search-list { display: grid; margin-top: 2rem; border-top: var(--bw) solid var(--line); }
.search-list__item { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; grid-template-areas: "type title icon" "type text icon"; gap: .2rem 1.2rem; align-items: center; padding: 1.1rem 0; border-bottom: var(--bw) solid var(--hairline); text-decoration: none; }
.search-list__type { grid-area: type; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.search-list__title { grid-area: title; margin: 0; }
.search-list__text { grid-area: text; font-size: .92rem; }
.search-list__item > .icon { grid-area: icon; }
.search-list__item:hover .search-list__title { text-decoration: underline; }
@media (max-width: 749px) { .search-list__item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "type icon" "title icon" "text icon"; } }
.search-empty { text-align: left; padding-block: 1rem 2rem; }
.search-empty .h3 { margin-bottom: .5rem; }
.search-empty__label { margin: 2rem 0 1rem; }
.predictive__none { margin: 0; color: var(--fg-muted); }
.predictive__wrap { display: grid; gap: 1.2rem; max-height: min(66vh, 620px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: .3rem; }
.predictive__list--text { grid-template-columns: 1fr; }
.predictive__all { justify-self: start; }
.predictive mark { background: var(--c-accent-3); color: var(--c-on-accent-3); }

.notfound-section { overflow: hidden; }
.notfound { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1rem clamp(1.5rem, 4vw, 4rem); align-items: center; padding-bottom: clamp(1.2rem, 1rem + 2vw, 3rem); }
.notfound__code { position: relative; }
.notfound__num { font-size: calc(clamp(6rem, 2rem + 16vw, 18rem) * var(--heading-scale)); line-height: .82; letter-spacing: -.02em; margin: 0; white-space: nowrap; }
.notfound__num[style*="--fit"] { font-size: var(--fit); }
.notfound__sticker { right: 2%; top: 0; }
.notfound__text { display: grid; gap: 1rem; justify-items: start; }
.notfound__text > * { margin: 0; }
.notfound__text .search-form--page { width: 100%; }
@media (max-width: 749px) {
  .notfound { grid-template-columns: minmax(0, 1fr); }
  .notfound__num { font-size: calc(6rem * var(--heading-scale)); }
  .notfound__sticker { width: 70px; font-size: .75rem; }
}

/* ---------------------------------------------------------------------------
   25  Header behaviour, phones, reduced motion
   ------------------------------------------------------------------------ */
.section-header { transition: transform .3s var(--ease); }
.section-header.is-hidden { transform: translateY(-101%); }
.section-header.is-stuck .header { box-shadow: 0 1px 0 var(--line); }
html[data-shadow="glow"] .section-header.is-stuck .header { box-shadow: 0 8px 30px color-mix(in srgb, var(--c-accent) 14%, transparent); }
@media (max-width: 749px) {
  :root { --header-h: 56px; }
  .announcement { font-size: .7rem; }
  .announcement .marquee__track, .announcement__static { min-height: 32px; }
  .section-head { margin-bottom: 1.1rem; }
  .section-head .section-title { font-size: calc(1.75rem * var(--heading-scale)); }
  .kicker { margin-bottom: .6rem; font-size: .72rem; }
  .text-lg { font-size: 1rem; }
  .empty-state { padding-block: 2rem; }
  .footer__top { padding-block: 2rem 1.5rem; }
  .footer__grid { gap: 1.6rem; }
}
.drawer__panel :focus-visible { outline-offset: 2px; }
.icon-btn:focus-visible { outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .display .glitch-layer { display: none !important; }
}