/* 00-tokens.css */
/* Vision Rebel — design tokens (DESIGN owns this file).
   Colours sampled from the approved master design/homepage-master.png.
   Every page stylesheet must use these tokens instead of raw values. */

@font-face {
  font-family: "Archivo";
  src: url("/static/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("/static/fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;

  /* Brand palette ---------------------------------------------------- */
  --vr-red: #ec0523;          /* = colors.json vr-red; hero "REBEL", logo, CTAs, selected states */
  --vr-red-ink: #b8011a;      /* pressed / hover on red fills */
  --vr-red-banner: #ec0216;   /* end stop of the campaign black→red banner */
  --vr-red-label: #ad010d;    /* woven label shade (macro photo) */
  --black: #000000;           /* header + canvas */
  --ink-900: #070707;         /* section canvas (tiles row background) */
  --ink-800: #101010;         /* raised surfaces: drawer, overlay, cards */
  /* product photo backdrop: the warm light wall of the Essential Tee photos (all product images share it) */
  --wall: #d8d8d6;            /* one plain grey behind every product photo (photos are cut out on this grey) */
  --ink-700: #1a1a1a;         /* inputs, hovered surfaces */
  --ink-600: #262626;         /* dark solid button (OUR STORY) */
  --charcoal: #3a3b3e;        /* Charcoal Grey (core colour) */
  --white: #ffffff;
  --bone: #ececea;            /* off-white long text */
  --light-blue: #8ab5e2;      /* Light Blue (core colour, sampled from the product photos) */
  --light-khaki: #cfc4a2;     /* Light Khaki (core colour) */
  --muted: #9a9a9a;           /* secondary text on black (AA on #000) */
  --muted-2: #6d6d6d;         /* disabled / sold out */
  --line: rgba(255, 255, 255, 0.14);   /* hairlines */
  --line-strong: rgba(255, 255, 255, 0.82); /* outline buttons (master) */
  --scrim: rgba(0, 0, 0, 0.55);
  --focus: var(--vr-red);

  /* Type ------------------------------------------------------------- */
  --font-text: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: var(--font-text);   /* use with font-stretch: var(--stretch-display) */
  --font-condensed: var(--font-text); /* use with font-stretch: var(--stretch-condensed) */
  --stretch-display: 125%;   /* hero VISION / REBEL */
  --stretch-title: 95%;      /* tile titles MEN / WOMEN */
  --stretch-heading: 90%;    /* A GLOBAL PHENOMENON */
  --stretch-condensed: 72%;  /* ALL WEATHER 01 */
  --stretch-nav: 85%;        /* header nav */
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-heavy: 800;
  --w-black: 900;

  --track-tight: -0.01em;
  --track-0: 0;
  --track-btn: 0.06em;
  --track-caps: 0.11em;      /* tile lines PERFORMANCE. STYLE. */
  --track-wide: 0.2em;       /* banner tagline */
  --track-wider: 0.28em;     /* hero tagline SEEK THE IMPOSSIBLE. */
  --track-widest: 0.42em;    /* logo baseline SEEK THE IMPOSSIBLE. */

  /* Fluid type scale (mobile → desktop) */
  --fs-xs: 0.6875rem;   /* 11 */
  --fs-sm: 0.8125rem;   /* 13 */
  --fs-base: 0.9375rem; /* 15 */
  --fs-md: 1.0625rem;   /* 17 */
  --fs-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --fs-xl: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  --fs-2xl: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --fs-3xl: clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
  --fs-display: clamp(3rem, 1.8rem + 5.5vw, 6.5rem);
  --lh-tight: 0.92;
  --lh-snug: 1.15;
  --lh-text: 1.5;

  /* Master design units (1px of the 1024-wide master).
     --uw: width-based, used by full-bleed sections below the first screen
           (campaign banner, story row) so they keep the master proportions.
     --u : first-screen unit. Below 901px it equals --uw; on desktop/laptop
           (≥901px, SPEC §12.1) it is ALSO limited by the viewport height so the
           header + hero (475u) + the 4 campaign tiles (370u) always fit the
           first screen on any PC: 845u + header + 6px ≤ 100svh. */
  --uw: clamp(0.75px, calc(100vw / 1024), 1.5px);
  --u: var(--uw);

  /* Spacing ---------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --gutter: 16px;            /* page side padding (mobile) */
  --gap-campaign: 6px;       /* black gaps between campaign images (master) */
  --container: 1360px;

  --radius-0: 0;
  --radius-1: 2px;           /* inputs only */

  /* Layout ----------------------------------------------------------- */
  --header-h: 56px;
  --z-base: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;

  /* Buttons ---------------------------------------------------------- */
  --btn-h: 44px;
  --btn-border: 1.5px;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}
@media (min-width: 901px) {
  :root {
    --hdr: calc(var(--header-h) + var(--annc-h, 0px));
    --u: min(calc(100vw / 1024), calc((100svh - var(--hdr) - 6px) / 845));
  }
}
@media (min-width: 1024px) {
  /* master header = 53px at 1024px, scales with the viewport up to 74px */
  :root { --header-h: clamp(53px, 5.1vw, 74px); --gutter: 51px; --btn-h: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}

/* 10-base.css */
/* Vision Rebel — base / reset / typography primitives (DESIGN owns this file). */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 8px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: var(--lh-text);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
html.vr-scroll-locked { overflow: hidden; }
html.vr-scroll-locked body { padding-right: var(--scrollbar-w, 0px); }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"], .vr-list-reset { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: var(--w-heavy); line-height: var(--lh-snug); text-wrap: balance; }
p { text-wrap: pretty; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
picture { width: 100%; }
/* PRO framing with zoom: the photo is scaled around its focal point, the frame clips it */
picture[data-zoomed] { overflow: hidden; }

/* Chrome only starts a text selection inside a link when user-select is
   explicitly "text" AND the link is not draggable (SPEC §12.7). */
a { color: inherit; text-decoration: none; -webkit-user-drag: none; -webkit-user-select: text; user-select: text; }
img, picture, svg { -webkit-user-drag: none; }
/* SPEC §12.7: all text is real, selectable HTML. Containers that navigate as a
   whole carry data-href (app.js navigates on click unless text is selected or a
   real link/button was hit); the name/CTA inside stays a real link. */
[data-href]:not(template) { cursor: pointer; }
[data-href] :is(h1, h2, h3, h4, p, .vr-tile__lines) { cursor: text; }
a:not([class]) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:not([class]):hover { color: var(--white); text-decoration-color: var(--vr-red); }

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }

::selection { background: var(--vr-red); color: var(--white); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* no ring after a pointer click (static/js/core/app.js toggles html.is-kbd) */
html:not(.is-kbd) :focus-visible,
html:not(.is-kbd) :focus-visible + .vr-swatch,
html:not(.is-kbd) :focus-visible + .pdp-size__label { outline: none; }

/* Accessibility helpers */
.vr-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.vr-skip-link {
  position: fixed; left: 12px; top: -60px; z-index: calc(var(--z-modal) + 10);
  background: var(--vr-red); color: var(--white); padding: 10px 16px;
  font-weight: var(--w-bold); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--track-btn);
  transition: top var(--dur) var(--ease);
}
.vr-skip-link:focus, .vr-skip-link:focus-visible { top: 12px; outline-color: var(--white); }

/* Layout primitives */
.vr-container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.vr-section { padding-block: var(--s-8); }
.vr-section--tight { padding-block: var(--s-6); }
.vr-section--flush { padding-block: 0; }
@media (min-width: 1024px) {
  .vr-section { padding-block: var(--s-9); }
}
.vr-grid {
  display: grid;
  gap: var(--s-6) var(--s-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) { .vr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-4); } }
@media (min-width: 1200px) { .vr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vr-grid--3 { }
@media (min-width: 1200px) { .vr-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Typography primitives (match the master hierarchy) */
.vr-display {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: var(--w-black);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  letter-spacing: 0.04em;
  font-size: var(--fs-display);
}
.vr-title-condensed {
  font-family: var(--font-condensed);
  font-stretch: var(--stretch-condensed);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0;
  font-size: var(--fs-3xl);
}
.vr-title {
  font-stretch: var(--stretch-title);
  font-weight: var(--w-heavy);
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: 0;
  font-size: var(--fs-2xl);
}
.vr-tagline {
  font-weight: var(--w-light);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  line-height: 1.35;
  font-size: var(--fs-md);
}
.vr-eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--muted);
}
.vr-eyebrow--red { color: var(--vr-red); }
.vr-lead { font-size: var(--fs-md); color: var(--bone); max-width: 60ch; }
.vr-muted { color: var(--muted); }
.vr-red { color: var(--vr-red); }
.vr-wordmark {
  font-stretch: 105%; font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap;
}
.vr-wordmark b, .vr-wordmark strong { color: var(--vr-red); font-weight: inherit; }

/* Generic prose for content pages */
.vr-prose { max-width: 70ch; color: var(--bone); }
.vr-prose > * + * { margin-top: 1em; }
.vr-prose h2 { font-size: var(--fs-xl); font-stretch: var(--stretch-heading); text-transform: uppercase; margin-top: 2em; color: var(--white); }
.vr-prose h3 { font-size: var(--fs-lg); margin-top: 1.6em; color: var(--white); }
.vr-prose ul, .vr-prose ol { padding-left: 1.2em; }
.vr-prose li + li { margin-top: 0.4em; }

/* Media frames: hard edges, reserved ratios */
.vr-ratio { position: relative; overflow: hidden; background: var(--ink-800); }
.vr-ratio > picture, .vr-ratio > img, .vr-ratio > svg, .vr-ratio > .vr-illus {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.vr-ratio img { width: 100%; height: 100%; object-fit: cover; }
.vr-ratio--4x5 { aspect-ratio: 4 / 5; }
.vr-ratio--1x1 { aspect-ratio: 1 / 1; }
.vr-ratio--3x4 { aspect-ratio: 3 / 4; }
.vr-ratio--16x9 { aspect-ratio: 16 / 9; }

hr.vr-rule { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* 20-components.css */
/* Vision Rebel — shared components (DESIGN owns this file).
   Classes are the team contract (SPEC §6). Hard edges, no shadows,
   red used deliberately. Campaign components scale with --u on desktop. */

/* ===================================================================
   Buttons
   =================================================================== */
.vr-btn {
  --btn-pad: 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad);
  border: var(--btn-border) solid transparent;
  border-radius: var(--radius-0);
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: var(--w-semibold);
  line-height: 1;
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  word-spacing: 0.16em;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.vr-btn__label { display: inline-block; }
.vr-btn__arrow {
  display: inline-block; flex: none;
  width: 0.95em; height: 0.75em;
  font-size: inherit; color: transparent; overflow: hidden; line-height: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12.6M8.6 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12.6M8.6 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
/* the mask paints with background-color: keep the glyph invisible, tint the shape */
.vr-btn__arrow, .vr-link-arrow .vr-btn__arrow { background-color: var(--arrow, #fff); }
.vr-btn:hover .vr-btn__arrow, a:hover > .vr-btn__arrow, .vr-tile:hover .vr-btn__arrow { transform: translateX(3px); }

.vr-btn--primary { --arrow: #fff; background: var(--vr-red); border-color: var(--vr-red); color: var(--white); }
.vr-btn--primary:hover { background: var(--vr-red-ink); border-color: var(--vr-red-ink); }
.vr-btn--outline { --arrow: #fff; background: rgba(0, 0, 0, 0.62); border-color: var(--line-strong); color: var(--white); }
.vr-btn--outline:hover { background: var(--white); border-color: var(--white); color: var(--black); --arrow: #000; }
.vr-btn--solid { --arrow: #fff; background: var(--ink-600); border-color: rgba(255, 255, 255, 0.9); color: var(--white); }
.vr-btn--solid:hover { background: var(--black); }
.vr-btn--light { --arrow: #000; background: var(--white); border-color: var(--white); color: var(--black); }
.vr-btn--light:hover { background: var(--bone); }
.vr-btn--ghost { --arrow: #fff; background: transparent; border-color: transparent; color: var(--white); padding-inline: 0; }
.vr-btn--ghost:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--vr-red); text-underline-offset: 5px; }
.vr-btn--sm { --btn-pad: 16px; min-height: 36px; font-size: 0.6875rem; }
.vr-btn--lg { --btn-pad: 32px; min-height: 52px; font-size: 0.8125rem; }
.vr-btn--block { display: flex; width: 100%; }
.vr-btn[disabled], .vr-btn.is-disabled, .vr-btn[aria-disabled="true"] {
  cursor: not-allowed; opacity: 0.45; pointer-events: none;
}
.vr-btn.is-loading { opacity: 0.7; pointer-events: none; }

.vr-link-arrow {
  --arrow: #fff;
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: 0.75rem; font-weight: var(--w-semibold); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--white); padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.vr-link-arrow:hover, a:hover .vr-link-arrow { border-bottom-color: var(--vr-red); }

.vr-icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  color: var(--white);
  position: relative;
  transition: opacity var(--dur) var(--ease);
}
.vr-icon-btn:hover { opacity: 0.75; }

/* ===================================================================
   Chips, status, price, dots
   =================================================================== */
.vr-status, .vr-chip {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 8px;
  font-size: 0.625rem; font-weight: var(--w-bold); letter-spacing: 0.12em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
}
.vr-status--available { display: none; }
.vr-status--available.is-shown { display: inline-flex; border: 1px solid var(--line); color: var(--bone); }
.vr-status--coming-soon { background: rgba(0, 0, 0, 0.55); border: 1px solid var(--white); color: var(--white); }
.vr-status--limited { background: var(--vr-red); color: var(--white); }
.vr-status--sold-out { background: rgba(0, 0, 0, 0.6); border: 1px solid var(--muted-2); color: var(--muted); text-decoration: line-through; }
.vr-chip { background: var(--white); color: var(--black); }

.vr-price { font-weight: var(--w-semibold); color: var(--white); font-variant-numeric: tabular-nums; }
.vr-price__was { color: var(--muted); font-weight: var(--w-regular); margin-right: 4px; }

.vr-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--sw, #888); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

/* ===================================================================
   Swatches (real selectors)
   =================================================================== */
.vr-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.vr-swatch {
  position: relative; display: inline-grid; place-items: center;
  width: 36px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer;
}
.vr-swatch__dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sw, #888);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: box-shadow var(--dur) var(--ease);
}
.vr-swatch.is-light .vr-swatch__dot { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
.vr-swatch:hover .vr-swatch__dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 0 2px var(--black), 0 0 0 3px rgba(255, 255, 255, 0.5); }
.vr-swatch[aria-pressed="true"] .vr-swatch__dot,
.vr-swatch[aria-current="true"] .vr-swatch__dot,
.vr-swatch.is-selected .vr-swatch__dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 0 2px var(--black), 0 0 0 3.5px var(--white); }
.vr-swatch.is-sold-out .vr-swatch__dot { opacity: 0.45; }
.vr-swatch.is-sold-out::after {
  content: ""; position: absolute; width: 26px; height: 1.5px; background: var(--white); transform: rotate(-45deg);
}
.vr-swatch--sm { width: 26px; height: 26px; }
.vr-swatch--sm .vr-swatch__dot { width: 14px; height: 14px; }
.vr-swatch--lg { width: 44px; height: 44px; }
.vr-swatch--lg .vr-swatch__dot { width: 30px; height: 30px; }
.vr-swatches__more { font-size: 0.6875rem; color: var(--muted); padding-left: 4px; }

/* ===================================================================
   Product card
   =================================================================== */
.vr-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.vr-card__media { position: relative; }
.vr-card__image-link { display: block; background: var(--wall); }
.vr-card__image-link > picture, .vr-card__image-link > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vr-card__image-link img { width: 100%; height: 100%; object-fit: cover; }
.vr-card__image-link > svg { object-fit: contain; }
.vr-card__img--2 { opacity: 0; transition: opacity var(--dur) var(--ease); }
@media (hover: hover) and (min-width: 1024px) {
  .vr-card.has-alt:hover .vr-card__img--2 { opacity: 1; }
}
.vr-card__chips { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; pointer-events: none; }
.vr-wish {
  position: absolute; top: 4px; right: 4px;
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  color: var(--white);
}
.vr-wish svg { filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5)); }
.vr-wish:hover { color: var(--white); }
.vr-wish[aria-pressed="true"] { color: var(--vr-red); }
.vr-wish[aria-pressed="true"] svg { fill: currentColor; }
.vr-card__body { padding-top: 12px; display: grid; gap: 4px; }
.vr-card__title {
  font-size: 0.8125rem; font-weight: var(--w-bold); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.3;
}
.vr-card__title-link { color: var(--white); }
/* no stretched-link overlay: the card text must stay selectable (SPEC §12.7);
   the <article data-href> navigates through app.js instead. */
.vr-card__media .vr-wish, .vr-card .vr-swatches { position: relative; z-index: 1; }
.vr-card__media .vr-wish { position: absolute; }
.vr-card:hover .vr-card__title-link { text-decoration: underline; text-decoration-color: var(--vr-red); text-underline-offset: 4px; }
.vr-card__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 0.8125rem; color: var(--muted); }
.vr-card__status-text { font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); }
.vr-card__status-text--limited { color: var(--vr-red); }
.vr-card__status-text--sold-out { color: var(--muted); text-decoration: line-through; }
.vr-card__colors { font-size: 0.75rem; color: var(--muted); }
.vr-card .vr-swatches { margin-top: 4px; margin-left: -6px; }
.vr-card--sold-out .vr-card__image-link img { opacity: 0.55; filter: grayscale(0.4); }

/* ===================================================================
   Section heading
   =================================================================== */
.vr-section-heading {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-6);
  margin-bottom: var(--s-6);
}
.vr-section-heading__text { display: grid; gap: 10px; max-width: 760px; }
.vr-section-heading__title {
  font-size: clamp(1.625rem, 1.15rem + 1.9vw, 2.625rem); font-stretch: 115%; font-weight: var(--w-heavy);
  text-transform: uppercase; line-height: 1; letter-spacing: 0.01em;
}
.vr-section-heading__lead { color: var(--bone); font-size: var(--fs-base); max-width: 56ch; }
.vr-section-heading--center { justify-content: center; text-align: center; }
.vr-section-heading--center .vr-section-heading__text { justify-items: center; }
@media (min-width: 1024px) { .vr-section-heading { margin-bottom: var(--s-7); } }

/* ===================================================================
   Header (master: black bar ~53px, logo · centred nav · icons)
   =================================================================== */
.vr-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--black);
}
.vr-header__bar {
  height: var(--header-h);
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  padding: 0 4px;
}
.vr-header__burger { justify-self: start; }
.vr-logo {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-self: center;
  color: var(--white); line-height: 1; text-decoration: none;
}
.vr-logo { align-items: center; }
.vr-logo__pic { display: block; line-height: 0; }
.vr-logo__img { display: block; height: 26px; width: auto; max-width: none; }
/* legacy typographic lockup classes (no longer rendered) */
.vr-logo__mark { font-size: 18px; font-weight: var(--w-bold); text-transform: uppercase; white-space: nowrap; line-height: 1; }
.vr-logo__accent { color: var(--vr-red); }
.vr-logo__tag {
  margin-top: 0.8em; padding-left: 0.34em;
  font-size: 7.5px; font-weight: var(--w-semibold); letter-spacing: 0.34em; text-transform: uppercase; white-space: nowrap;
  line-height: 1; color: #d9d9dc;
}
.vr-nav { display: none; }
.vr-header__tools { display: flex; align-items: center; justify-self: end; }
.vr-header__tool--search, .vr-header__tool--account, .vr-locale { display: none; }
.vr-header__tool svg { width: 22px; height: 22px; }
.vr-bag-count {
  position: absolute; top: 5px; right: 3px;
  min-width: 15px; height: 15px; padding: 0 3px;
  display: inline-grid; place-items: center;
  background: var(--vr-red); color: var(--white);
  font-size: 9px; font-weight: var(--w-bold); line-height: 1; border-radius: 8px;
}

@media (min-width: 1024px) {
  .vr-header__bar {
    grid-template-columns: 1fr auto 1fr;
    padding: 0 clamp(21px, 3.4vw, 60px) 0 clamp(32px, 4.9vw, 72px);
  }
  .vr-header__burger { display: none; }
  .vr-logo { justify-self: start; align-items: flex-start; }
  .vr-logo__img { height: clamp(30px, 2.4vw, 40px); }
  .vr-logo__tag { font-size: clamp(8.5px, 0.75vw, 11px); padding-left: 0; }
  .vr-nav { display: block; }
  .vr-nav__list { display: flex; align-items: center; gap: 0 clamp(20px, 2.75vw, 44px); }
  .vr-nav { margin-inline: 16px; }
  .vr-nav__link {
    position: relative; display: block; padding: 8px 0;
    font-size: clamp(11.5px, 1.02vw, 15px); font-weight: var(--w-semibold); font-stretch: var(--stretch-nav);
    letter-spacing: 0.01em; word-spacing: 0.1em; text-transform: uppercase; color: var(--white); white-space: nowrap;
  }
  .vr-nav__link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
    background: var(--vr-red); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
  }
  .vr-nav__link:hover::after, .vr-nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .vr-header__tools { gap: 0 clamp(0px, 0.6vw, 10px); }
  .vr-header__tool--search, .vr-header__tool--account { display: inline-grid; }
  .vr-header__tool { width: 42px; }
  .vr-header__tool svg { width: clamp(20px, 1.6vw, 24px); height: clamp(20px, 1.6vw, 24px); }
  .vr-locale { display: block; position: relative; margin-left: 2px; }
}
.vr-locale__btn {
  display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 0 0 9px;
  font-size: clamp(10.5px, 0.9vw, 13px); font-weight: var(--w-semibold); color: var(--white);
}
.vr-locale__btn .vr-icon--globe { width: 19px; height: 19px; }
.vr-locale__btn .vr-icon--chevron { width: 10px; height: 10px; transition: transform var(--dur) var(--ease); }
.vr-locale__btn[aria-expanded="true"] .vr-icon--chevron { transform: rotate(180deg); }
.vr-popover {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-overlay);
  min-width: 220px; padding: 14px 16px;
  background: var(--ink-800); border: 1px solid var(--line);
}
.vr-popover__row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 0.8125rem; }
.vr-popover__k { color: var(--muted); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: var(--w-semibold); }
.vr-popover__note { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 0.75rem; color: var(--muted); }

/* Mobile full-screen menu */
.vr-menu {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: flex; flex-direction: column;
  background: var(--black);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.vr-menu.is-open { opacity: 1; }
.vr-menu__head {
  display: grid; grid-template-columns: 48px 1fr 48px; align-items: center;
  height: var(--header-h); padding: 0 4px; border-bottom: 1px solid var(--line);
}
.vr-menu__head .vr-logo { justify-self: center; }
.vr-menu__body { padding: 20px var(--gutter) 40px; display: grid; gap: 28px; }
.vr-menu__primary li { border-bottom: 1px solid var(--line); }
.vr-menu__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0;
  font-size: clamp(1.5rem, 7vw, 2.25rem); font-weight: var(--w-heavy); font-stretch: 112%;
  text-transform: uppercase; line-height: 1; letter-spacing: 0.01em;
}
.vr-menu__link[aria-current="page"] { color: var(--vr-red); }
.vr-menu__secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.vr-menu__sublink { display: block; padding: 10px 0; font-size: 0.8125rem; font-weight: var(--w-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); }
.vr-menu__sublink[aria-current="page"] { color: var(--vr-red); }
.vr-menu__locale { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; }
@media (min-width: 1024px) { .vr-menu { display: none !important; } }

/* ===================================================================
   Campaign tile (master 4-up row)
   Mobile: 2×2 grid. Desktop (≥901px, SPEC §12.6): flex row where the hovered
   or focused tile grows (flex-grow 1.6) while the others shrink (0.8).
   Tile height is fixed from the row width (container units) so the row never
   jumps while tiles change width; pages may override the height (home: 370u).
   =================================================================== */
.vr-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-campaign);
  padding: 0 var(--gap-campaign);
}
.vr-tile {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 248 / 364;
  background: var(--ink-900);
  color: var(--white);
  isolation: isolate;
  min-width: 0;
}
.vr-tile__media, .vr-tile__media > picture { position: absolute; inset: 0; }
.vr-tile__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%;
  transition: transform 0.6s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.vr-tile:hover .vr-tile__media img { transform: scale(1.03); }
.vr-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.25) 34%, rgba(0, 0, 0, 0) 52%);
}
.vr-tile__text {
  position: absolute; z-index: 1;
  left: 14px; right: 10px; bottom: 12px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.vr-tile__title {
  font-size: 18px; font-weight: var(--w-heavy); font-stretch: var(--stretch-title);
  line-height: 1; letter-spacing: 0; text-transform: uppercase; white-space: nowrap;
}
.vr-tile__title-link { color: inherit; }
.vr-tile__title-link:hover { text-decoration: underline; text-decoration-color: var(--vr-red); text-underline-offset: 4px; }
.vr-tile__lines {
  display: block; margin-top: 8px;
  font-size: 9.5px; font-weight: var(--w-medium); letter-spacing: var(--track-caps); word-spacing: 0.12em;
  line-height: 1.4; min-height: 4.2em; text-transform: uppercase; white-space: nowrap;
}
.vr-tile__btn { margin-top: 12px; }
.vr-tile .vr-btn--sm { min-height: 38px; --btn-pad: 15px; font-size: 11.5px; gap: 0.75em; }
@media (min-width: 600px) {
  .vr-tile__text { left: 20px; bottom: 16px; }
  .vr-tile__title { font-size: 28px; }
  .vr-tile__lines { font-size: 12.5px; }
  .vr-tile .vr-btn--sm { min-height: 40px; font-size: 12px; --btn-pad: 17px; }
}
@media (min-width: 901px) {
  .vr-tiles {
    --tile-gap: calc(6 * var(--u));
    display: flex; align-items: stretch;
    gap: var(--tile-gap); padding: 0 calc(7 * var(--u));
    container-type: inline-size;
  }
  .vr-tile {
    flex: 1 1 0; aspect-ratio: auto;
    height: calc((100cqw - (var(--n, 4) - 1) * var(--tile-gap)) / var(--n, 4) * 364 / 248);
    transition: flex-grow 0.5s cubic-bezier(0.22, 0.7, 0.2, 1);
  }
  .vr-tiles:hover > .vr-tile, .vr-tiles:focus-within > .vr-tile { flex-grow: 0.8; }
  .vr-tiles > .vr-tile:hover, .vr-tiles > .vr-tile:focus-within { flex-grow: 1.6; }
  .vr-tile__text { left: calc(19.5 * var(--u)); bottom: calc(14 * var(--u)); right: auto; }
  .vr-tile__title { font-size: max(18px, calc(26 * var(--u))); }
  .vr-tile__lines { margin-top: calc(8 * var(--u)); font-size: max(10.5px, calc(12 * var(--u))); line-height: 1.36; min-height: 4.08em; }
  .vr-tile__btn { margin-top: calc(11.5 * var(--u)); }
  .vr-tile .vr-btn--sm { min-height: max(32px, calc(37 * var(--u))); --btn-pad: calc(17 * var(--u)); font-size: max(10.5px, calc(12.5 * var(--u))); gap: calc(9 * var(--u)); letter-spacing: 0.035em; }
}
@media (prefers-reduced-motion: reduce) {
  .vr-tile, .vr-tile__media img { transition: none; }
  .vr-tile:hover .vr-tile__media img { transform: none; }
}

/* ===================================================================
   Campaign banner (master ALL WEATHER 01: black → red)
   =================================================================== */
.vr-banner {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: linear-gradient(90deg, #080706 0%, #0b0606 38%, #3a0306 52%, #a2010e 62%, var(--vr-red-banner) 72%, var(--vr-red-banner) 100%);
  color: var(--white);
}
.vr-banner__art { position: relative; aspect-ratio: 4 / 5; }
.vr-banner__art > picture { position: absolute; inset: 0; }
.vr-banner__art img { width: 100%; height: 100%; object-fit: cover; }
.vr-banner__art--full { display: none; }
.vr-banner__content {
  grid-column: 1 / -1;
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 32px var(--gutter) 40px;
}
.vr-banner__eyebrow { font-size: 13px; font-weight: var(--w-semibold); font-stretch: 112%; letter-spacing: 0.06em; }
.vr-banner__title {
  margin-top: 12px;
  font-size: clamp(2.25rem, 10vw, 3rem); font-weight: var(--w-bold); font-stretch: var(--stretch-condensed);
  line-height: 1; letter-spacing: 0; text-transform: uppercase;
}
.vr-banner__lines {
  margin-top: 14px;
  font-size: 13px; font-weight: var(--w-light); letter-spacing: var(--track-wide); word-spacing: 0.1em; line-height: 1.5; text-transform: uppercase;
}
.vr-banner__btn { margin-top: 20px; }
@media (min-width: 768px) {
  .vr-banner {
    display: block;
    height: calc(320 * var(--uw));
    min-height: 300px;
  }
  .vr-banner__art { position: absolute; top: 0; bottom: 0; aspect-ratio: auto; }
  .vr-banner__art--left { left: 0; width: 45%; }
  .vr-banner__art--right { right: 0; width: 40%; }
  .vr-banner--full .vr-banner__art--left, .vr-banner--full .vr-banner__art--right { display: none; }
  .vr-banner--full .vr-banner__art--full { display: block; inset: 0; width: 100%; }
  .vr-banner__content {
    position: absolute; inset: 0; justify-content: flex-start;
    padding: calc(53 * var(--uw)) 0 0 calc(16 * var(--uw));
  }
  .vr-banner--copy-right .vr-banner__content { left: auto; width: 28%; padding-left: 0; }
  .vr-banner__eyebrow { font-size: max(12px, calc(14.5 * var(--uw))); font-stretch: 112%; letter-spacing: 0.08em; }
  .vr-banner__title { margin-top: calc(14 * var(--uw)); font-size: calc(38.5 * var(--uw)); }
  .vr-banner__lines { margin-top: calc(9 * var(--uw)); font-size: calc(13.6 * var(--uw)); line-height: calc(20 * var(--uw)); letter-spacing: 0.17em; }
  .vr-banner__btn { margin-top: calc(15 * var(--uw)); }
  .vr-banner .vr-btn--sm { min-height: max(36px, calc(37 * var(--uw))); --btn-pad: calc(20 * var(--uw)); font-size: max(11.5px, calc(13 * var(--uw))); letter-spacing: 0.08em; gap: calc(10 * var(--uw)); }
}

/* ===================================================================
   Look card (base)
   =================================================================== */
.vr-look-card { position: relative; display: flex; flex-direction: column; color: var(--white); }
.vr-look-card__media { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--ink-800); overflow: hidden; }
.vr-look-card__media > picture { position: absolute; inset: 0; }
.vr-look-card__media img { width: 100%; height: 100%; object-fit: cover; }
.vr-look-card__collage { position: absolute; inset: 0; display: grid; gap: 3px; background: var(--black); }
.vr-look-card__collage--2 { grid-template-columns: 1fr 1fr; }
.vr-look-card__collage--3 { grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; }
.vr-look-card__collage--3 .vr-look-card__piece--1 { grid-row: 1 / span 2; }
.vr-look-card__piece { position: relative; overflow: hidden; background: var(--ink-800); }
.vr-look-card__piece > picture, .vr-look-card__piece > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vr-look-card__piece img { width: 100%; height: 100%; object-fit: cover; transition: transform 200ms var(--ease); }
.vr-look-card:hover .vr-look-card__piece img { transform: scale(1.03); }
.vr-look-card__body { display: grid; gap: 6px; padding-top: 14px; justify-items: start; }
.vr-look-card__meta { display: flex; align-items: center; gap: 12px; }
.vr-look-card__dots { display: inline-flex; gap: 4px; }
.vr-look-card__title-link { color: inherit; }
.vr-look-card:hover .vr-look-card__title-link { text-decoration: underline; text-decoration-color: var(--vr-red); text-underline-offset: 4px; }
.vr-look-card__title { font-size: 1.125rem; font-weight: var(--w-heavy); font-stretch: 112%; text-transform: uppercase; line-height: 1.1; }

/* ===================================================================
   Forms
   =================================================================== */
.vr-field { display: grid; gap: 6px; }
.vr-field > label, .vr-label {
  font-size: 0.6875rem; font-weight: var(--w-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone);
}
.vr-input, .vr-select, .vr-textarea {
  width: 100%; min-height: 48px; padding: 0 14px;
  background: var(--ink-900); color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.32); border-radius: var(--radius-1);
  font-size: 1rem; /* ≥16px: no iOS zoom */
  transition: border-color var(--dur) var(--ease);
}
.vr-textarea { min-height: 140px; padding: 12px 14px; resize: vertical; }
.vr-input::placeholder, .vr-textarea::placeholder { color: #8a8a8a; }
.vr-input:hover, .vr-select:hover, .vr-textarea:hover { border-color: rgba(255, 255, 255, 0.6); }
.vr-input:focus-visible, .vr-select:focus-visible, .vr-textarea:focus-visible { border-color: var(--white); outline: 2px solid var(--focus); outline-offset: 1px; }
.vr-input[aria-invalid="true"] { border-color: var(--vr-red); }
.vr-field__error { font-size: 0.75rem; color: #ff5a6e; }
.vr-field--inline { display: flex; gap: 0; }
.vr-field--inline .vr-input { flex: 1; min-width: 0; border-right: 0; border-radius: var(--radius-1) 0 0 var(--radius-1); }
.vr-field--inline .vr-btn { min-height: 48px; flex: none; }
.vr-form-status { min-height: 1.2em; margin-top: 8px; font-size: 0.8125rem; color: var(--bone); }
.vr-form-status.is-error { color: #ff5a6e; }
.vr-form-status.is-success { color: var(--white); }
.vr-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.8125rem; color: var(--bone); }
.vr-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--vr-red); }

/* Newsletter */
.vr-newsletter { display: grid; gap: 20px; }
.vr-newsletter__intro { display: grid; gap: 8px; }
.vr-newsletter__title { font-size: var(--fs-2xl); font-weight: var(--w-black); font-stretch: var(--stretch-display); text-transform: uppercase; line-height: 1; }
.vr-newsletter__text { color: var(--bone); max-width: 46ch; }
.vr-newsletter__consent { margin-top: 10px; font-size: 0.75rem; color: var(--muted); }
.vr-newsletter__consent a { color: var(--bone); }
@media (min-width: 900px) {
  .vr-newsletter { grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; }
}

/* Notify me */
.vr-notify { display: grid; gap: 8px; }
.vr-notify__title { font-size: 0.8125rem; font-weight: var(--w-bold); letter-spacing: 0.1em; text-transform: uppercase; }
.vr-notify__text { font-size: 0.875rem; color: var(--bone); }

/* ===================================================================
   Breadcrumbs
   =================================================================== */
.vr-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.vr-breadcrumbs li { font-size: 0.6875rem; font-weight: var(--w-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.vr-breadcrumbs li + li::before { content: "/"; margin-right: 4px; color: var(--muted-2); }
.vr-breadcrumbs a:hover { color: var(--white); }
.vr-breadcrumbs [aria-current] { color: var(--bone); }

/* ===================================================================
   Drawer (bag), modal, search overlay, consent, toast
   =================================================================== */
.vr-drawer, .vr-modal { position: fixed; inset: 0; z-index: var(--z-drawer); }
.vr-modal { z-index: var(--z-modal); display: grid; place-items: center; padding: 16px; }
.vr-drawer__backdrop, .vr-modal__backdrop, .vr-search__backdrop {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.66);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.vr-drawer__panel {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: min(440px, 100%);
  display: flex; flex-direction: column;
  background: var(--ink-900); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform 200ms var(--ease);
}
.vr-drawer--left .vr-drawer__panel { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--line); transform: translateX(-100%); }
.vr-drawer.is-open .vr-drawer__panel { transform: none; }
.vr-drawer.is-open .vr-drawer__backdrop, .vr-modal.is-open .vr-modal__backdrop, .vr-search.is-open .vr-search__backdrop { opacity: 1; }
.vr-drawer__head, .vr-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: 0 8px 0 20px; border-bottom: 1px solid var(--line);
}
.vr-drawer__title, .vr-modal__title { font-size: 0.9375rem; font-weight: var(--w-heavy); font-stretch: 112%; letter-spacing: 0.04em; text-transform: uppercase; }
.vr-drawer__count { color: var(--muted); font-weight: var(--w-semibold); }
.vr-drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 20px; }
.vr-drawer__foot { padding: 16px 20px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: 10px; }
.vr-modal__panel {
  position: relative; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--ink-900); border: 1px solid var(--line);
  opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.vr-modal--lg .vr-modal__panel { width: min(960px, 100%); }
.vr-modal.is-open .vr-modal__panel { opacity: 1; transform: none; }
.vr-modal__body { padding: 20px; }

/* Bag lines (rendered by app.js) */
.vr-bag__empty { padding: 32px 0 8px; color: var(--bone); }
.vr-bag__notice { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); font-size: 0.8125rem; color: var(--bone); }
.vr-bag-line { display: grid; grid-template-columns: 84px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.vr-bag-line__media { display: block; aspect-ratio: 4 / 5; background: var(--wall); overflow: hidden; }
.vr-bag-line__media img { width: 100%; height: 100%; object-fit: cover; }
.vr-bag-line__info { display: grid; gap: 4px; align-content: start; min-width: 0; }
.vr-bag-line__top { display: flex; justify-content: space-between; gap: 10px; }
.vr-bag-line__name { font-size: 0.8125rem; font-weight: var(--w-bold); letter-spacing: 0.04em; text-transform: uppercase; }
.vr-bag-line__variant { font-size: 0.75rem; color: var(--muted); }
.vr-bag-line__actions { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.vr-bag-line__remove { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.vr-bag-line__remove:hover { color: var(--white); }
.vr-qty { display: inline-flex; align-items: center; border: 1px solid rgba(255, 255, 255, 0.32); }
.vr-qty button { width: 32px; height: 32px; display: grid; place-items: center; color: var(--white); }
.vr-qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.vr-qty output, .vr-qty span { min-width: 28px; text-align: center; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.vr-bag__row { display: flex; justify-content: space-between; font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.875rem; }
.vr-bag__note { font-size: 0.75rem; color: var(--muted); margin-bottom: 4px; }

/* Search overlay */
.vr-search { position: fixed; inset: 0; z-index: var(--z-overlay); }
.vr-search__panel {
  position: relative; background: var(--ink-900); border-bottom: 1px solid var(--line);
  max-height: 100vh; overflow-y: auto;
  opacity: 0; transform: translateY(-8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.vr-search.is-open .vr-search__panel { opacity: 1; transform: none; }
.vr-search__form { display: flex; align-items: center; gap: 12px; height: 72px; border-bottom: 1px solid var(--line); }
.vr-search__input {
  flex: 1; min-width: 0; height: 56px; background: transparent; border: 0;
  font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: var(--w-semibold); font-stretch: 112%; text-transform: none;
}
.vr-search__input:focus-visible { outline: none; }
.vr-search__input::-webkit-search-cancel-button { display: none; }
.vr-search__body { padding-top: 20px; padding-bottom: 32px; display: grid; gap: 16px; }
.vr-search__results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
@media (min-width: 768px) { .vr-search__results { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .vr-search__results { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.vr-mini-card { display: grid; gap: 8px; color: var(--white); }
.vr-mini-card__name { color: var(--white); }
.vr-mini-card__media { display: block; aspect-ratio: 4 / 5; background: var(--wall); overflow: hidden; position: relative; }
.vr-mini-card__media img, .vr-mini-card__media svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vr-mini-card__media img[src$=".svg"], .vr-bag-line__media img[src$=".svg"] { object-fit: contain; }
.vr-mini-card__name { font-size: 0.75rem; font-weight: var(--w-bold); letter-spacing: 0.04em; text-transform: uppercase; }
.vr-mini-card__meta { font-size: 0.75rem; color: var(--muted); }
.vr-mini-card:hover .vr-mini-card__name { text-decoration: underline; text-decoration-color: var(--vr-red); text-underline-offset: 3px; }
.vr-search__quick ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vr-search__quick a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--line); font-size: 0.75rem; font-weight: var(--w-semibold); letter-spacing: 0.08em; text-transform: uppercase;
}
.vr-search__quick a:hover { border-color: var(--white); }

/* Consent banner
   Mobile: slim bottom sheet. Desktop: compact card bottom-left; on pages that
   provide a [data-consent-slot] (home hero, lower-right empty area) app.js moves
   it into that slot so it never covers the first-screen tiles (SPEC §12). */
.vr-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-toast);
  background: rgba(16, 16, 16, 0.97); border-top: 1px solid var(--line);
}
.vr-consent__inner {
  display: flex; align-items: center; gap: 10px 14px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
}
.vr-consent__text { flex: 1; min-width: 0; font-size: 0.6875rem; color: var(--bone); line-height: 1.4; }
.vr-consent__actions { display: flex; gap: 6px; flex: none; }
.vr-consent .vr-btn--sm { min-height: 34px; --btn-pad: 12px; font-size: 0.625rem; }
@media (min-width: 901px) {
  .vr-consent {
    left: 24px; right: auto; bottom: 24px; max-width: 440px;
    border: 1px solid var(--line);
  }
  .vr-consent__inner { padding: 14px 16px; gap: 16px; }
  .vr-consent__text { font-size: 0.75rem; }
  /* inside the home hero (moved there by app.js) */
  .vr-consent.is-slotted {
    position: absolute; left: auto; right: 0; bottom: 0; top: auto; z-index: 3;
    width: 100%; max-width: none;
    background: rgba(8, 8, 8, 0.82); border-color: rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .vr-consent.is-slotted .vr-consent__inner { padding: max(8px, calc(10 * var(--u))) max(10px, calc(12 * var(--u))); gap: max(10px, calc(12 * var(--u))); }
  .vr-consent.is-slotted .vr-consent__text { font-size: max(10.5px, calc(10.5 * var(--u))); line-height: 1.35; }
  .vr-consent.is-slotted .vr-btn--sm { min-height: max(26px, calc(26 * var(--u))); --btn-pad: calc(12 * var(--u)); font-size: max(9.5px, calc(9.5 * var(--u))); }
}

/* Toast */
.vr-toast {
  position: fixed; left: 50%; bottom: 20px; z-index: var(--z-toast);
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  background: var(--white); color: var(--black);
  font-size: 0.8125rem; font-weight: var(--w-semibold);
}
.vr-toast.is-error { background: var(--vr-red); color: var(--white); }

/* ===================================================================
   Footer
   =================================================================== */
.vr-footer { background: var(--black); border-top: 1px solid var(--line); }
.vr-footer__capture { padding-block: 48px; border-bottom: 1px solid var(--line); }
.vr-footer__main { display: grid; gap: 40px; padding-block: 48px 32px; }
.vr-footer__brand { display: grid; gap: 18px; align-content: start; }
.vr-footer__brand .vr-logo { justify-self: start; }
.vr-footer__brand .vr-logo__img { height: 30px; }
.vr-footer__tagline { font-size: 0.6875rem; font-weight: var(--w-light); letter-spacing: var(--track-wider); text-transform: uppercase; color: var(--bone); max-width: 40ch; line-height: 1.8; }
.vr-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
.vr-footer__heading { font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); margin-bottom: 12px; }
.vr-footer__col li + li { margin-top: 2px; }
.vr-footer__link { display: inline-block; padding: 5px 0; font-size: 0.8125rem; color: var(--muted); }
.vr-footer__link:hover { color: var(--white); }
.vr-footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; align-items: center;
  padding-block: 20px 28px; border-top: 1px solid var(--line);
  font-size: 0.75rem; color: var(--muted);
}
.vr-footer__left { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.vr-footer__credit .vr-footer__link { padding: 0; font-size: 0.75rem; letter-spacing: 0.08em; }
.vr-footer__credit strong { font-weight: var(--w-bold); color: var(--white); }
.vr-footer__meta { display: flex; gap: 8px; align-items: center; }
@media (min-width: 720px) {
  .vr-footer__base { display: grid; grid-template-columns: 1fr auto 1fr; }
  .vr-footer__meta { justify-self: end; }
}
@media (max-width: 719px) {
  .vr-footer__base { flex-direction: column; text-align: center; }
}
.vr-footer__meta .vr-footer__link { font-size: 0.75rem; padding: 0; }
@media (min-width: 900px) {
  .vr-footer__main { grid-template-columns: minmax(220px, 1fr) 3fr; gap: 64px; padding-block: 64px 48px; }
  .vr-footer__cols { grid-template-columns: repeat(4, 1fr); }
  .vr-footer__capture { padding-block: 64px; }
}
/* Desktop hover-expanded tiles: the photo keeps its resting size (no zoom on the face);
   the extra width reveals a dark backdrop with softly faded photo edges. */
@media (min-width: 901px) {
  .vr-tiles .vr-tile .vr-tile__media { background: #050505; }
  .vr-tiles .vr-tile .vr-tile__media img {
    position: absolute; top: 0; left: 50%; height: 100%;
    width: calc((100vw - 5 * var(--tile-gap, 5px)) / 4);
    max-width: none; transform: translateX(-50%);
    transition: transform 0.6s cubic-bezier(0.22, 0.7, 0.2, 1), -webkit-mask-image .4s;
  }
  .vr-tiles .vr-tile:hover .vr-tile__media img,
  .vr-tiles .vr-tile:focus-within .vr-tile__media img {
    transform: translateX(-50%) scale(1.02);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
}
@media (min-width: 901px) {
  .vr-tiles .vr-tile__media .vr-tile__blur, .vr-tiles .vr-tile__media .vr-tile__blur img {
    position: absolute; inset: 0; width: 100% !important; height: 100%; left: 0 !important;
    transform: none !important; object-fit: cover; filter: blur(22px) brightness(.7); -webkit-mask-image: none !important; mask-image: none !important;
  }
  .vr-tiles .vr-tile__media .vr-tile__blur { transform: scale(1.15) !important; }
}

/* "Added to your bag" card: drops from the bag icon, stays ~5 s (red countdown), click → bag drawer */
.vr-added {
  position: fixed; z-index: calc(var(--z-header) + 5); top: calc(var(--header-h) + 10px); right: clamp(12px, 3.4vw, 60px);
  width: min(360px, calc(100vw - 24px)); display: grid; gap: 14px; padding: 16px 16px 16px;
  background: #0b0b0b; color: var(--white); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden; cursor: pointer; transform-origin: calc(100% - 26px) -12px;
}
.vr-added[hidden] { display: none; }
.vr-added::before { content: ""; position: absolute; top: -7px; right: 22px; width: 12px; height: 12px; background: #0b0b0b; border-left: 1px solid rgba(255, 255, 255, 0.16); border-top: 1px solid rgba(255, 255, 255, 0.16); transform: rotate(45deg); }
.vr-added.is-in { animation: vr-added-in 0.42s cubic-bezier(0.2, 0.9, 0.25, 1.15) both; }
.vr-added.is-out { animation: vr-added-out 0.28s ease-in both; }
@keyframes vr-added-in { from { opacity: 0; transform: translateY(-14px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes vr-added-out { to { opacity: 0; transform: translateY(-10px) scale(0.96); } }
.vr-added__bar { position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--vr-red); transform-origin: left; }
.vr-added.is-in .vr-added__bar { animation: vr-added-bar var(--added-ms, 5000ms) linear both; }
.vr-added.is-paused .vr-added__bar { animation-play-state: paused; }
@keyframes vr-added-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.vr-added__head { display: flex; align-items: center; gap: 10px; font-size: 0.75rem; font-weight: var(--w-bold); letter-spacing: 0.16em; text-transform: uppercase; }
.vr-added__ok { display: grid; place-items: center; width: 22px; height: 22px; background: var(--vr-red); color: var(--white); }
.vr-added.is-in .vr-added__ok { animation: vr-added-ok 0.5s 0.15s cubic-bezier(0.2, 0.9, 0.3, 1.4) both; }
@keyframes vr-added-ok { from { transform: scale(0) rotate(-45deg); } to { transform: none; } }
.vr-added__close { margin-left: auto; width: 26px; height: 26px; font-size: 1.25rem; line-height: 1; color: var(--muted); }
.vr-added__close:hover { color: var(--white); }
.vr-added__item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; }
.vr-added__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--wall); }
.vr-added__media picture, .vr-added__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vr-added__info { display: grid; gap: 4px; min-width: 0; }
.vr-added__info b { font-size: 0.875rem; font-weight: var(--w-heavy); text-transform: uppercase; letter-spacing: 0.04em; }
.vr-added__info span { font-size: 0.75rem; color: var(--muted); }
.vr-added__info .vr-price { font-size: 0.875rem; color: var(--white); font-weight: var(--w-bold); }
.vr-added__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vr-added__cta .vr-btn { width: 100%; justify-content: center; }
.vr-header__tool--bag.is-bump { animation: vr-bag-bump 0.6s cubic-bezier(0.3, 1.6, 0.4, 1) both; }
.vr-header__tool--bag.is-bump .vr-bag-count { animation: vr-bag-count 0.6s 0.1s cubic-bezier(0.3, 1.8, 0.4, 1) both; }
@keyframes vr-bag-bump { 0% { transform: none; } 30% { transform: scale(1.22) rotate(-8deg); } 60% { transform: scale(0.94) rotate(4deg); } 100% { transform: none; } }
@keyframes vr-bag-count { 0% { transform: scale(0.4); } 60% { transform: scale(1.35); } 100% { transform: none; } }
@media (max-width: 599.98px) { .vr-added { right: 8px; width: calc(100vw - 16px); } .vr-added::before { right: 18px; } }
@media (prefers-reduced-motion: reduce) { .vr-added.is-in, .vr-added.is-out, .vr-header__tool--bag.is-bump, .vr-header__tool--bag.is-bump .vr-bag-count, .vr-added.is-in .vr-added__ok { animation: none; } }

/* Sales closed from the PRO (status CLOSED, label per product, e.g. NOT FOR SALE YET). */
.vr-status--closed { background: rgba(0, 0, 0, 0.6); border: 1px solid var(--vr-red); color: var(--white); }
.vr-card__status-text--closed { color: var(--vr-red); }

/* 25-annc.css */
/* Vision Rebel — top announcement bar (PRO "Onglets", 2026-10-24).
   Red band above the header, black bold caps, the message runs across the bar.
   Sharp rectangle (square DA). Static and centred when reduced motion is asked. */
:root { --annc-h: 0px; }
:root.has-annc { --annc-h: 30px; }
@media (min-width: 1024px) { :root.has-annc { --annc-h: 34px; } }

.vr-annc {
  position: relative; z-index: calc(var(--z-header) + 1);
  height: var(--annc-h); overflow: hidden;
  background: var(--vr-red); color: var(--black);
  display: flex; align-items: center;
}
.vr-annc__static {
  /* read by screen readers; shown instead of the running text with reduced motion */
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.vr-annc__track {
  display: flex; flex: none; width: max-content;
  animation: vr-annc-run 70s linear infinite;
  will-change: transform;
}
.vr-annc:hover .vr-annc__track { animation-play-state: paused; }
.vr-annc__run { display: flex; align-items: center; flex: none; }
.vr-annc__item {
  font-family: var(--font-text); font-stretch: var(--stretch-nav, 85%);
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  line-height: 1; white-space: nowrap; padding: 0 22px;
  animation: vr-annc-pulse 2.4s ease-in-out infinite;
}
@media (min-width: 1024px) { .vr-annc__item { font-size: 0.8125rem; padding: 0 30px; } }
.vr-annc__dot { width: 6px; height: 6px; background: var(--black); flex: none; }

@keyframes vr-annc-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes vr-annc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }

@media (prefers-reduced-motion: reduce) {
  .vr-annc { justify-content: center; }
  .vr-annc__track { display: none; }
  .vr-annc__static {
    position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible;
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; padding: 0 16px;
  }
}

/* 30-home.css */
/* Vision Rebel — home page (DESIGN owns this file).
   Desktop/laptop (≥901px) reproduces the master's proportions with the --u unit
   (1 master pixel, limited by width AND height so header + hero + the 4 tiles
   always fit the first screen — SPEC §12.1). Mobile (≤900px) is stacked. */

/* ===================================================================
   1. Hero
   =================================================================== */
.vr-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--black);
  color: var(--white);
}
.vr-hero__media { position: relative; aspect-ratio: 390 / 600; }
.vr-hero__media > picture, .vr-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vr-hero__media img { object-fit: cover; object-position: 50% 0%; }
/* phones: faces stay clear at the top, the copy sits on a deep black fade so the red
   REBEL never lands on the red jacket */
.vr-hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.94) 34%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 66%);
}
.vr-hero__content {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 0 var(--gutter) 28px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.vr-hero__title {
  display: flex; flex-direction: column; align-items: flex-start;
  font-weight: var(--w-black); font-stretch: var(--stretch-display);
  text-transform: uppercase; line-height: 0.86; letter-spacing: 0.06em;
  margin: 0;
}
.vr-hero__l1 { position: relative; font-size: clamp(2.6rem, 13.2vw, 3.6rem); color: var(--white); }
.vr-hero__l2 { font-size: clamp(3.2rem, 16.3vw, 4.4rem); color: var(--vr-red); margin-top: 0.08em; }
.vr-hero__tm {
  position: absolute; top: 0.02em; right: -1.05em;
  font-size: 0.17em; font-weight: var(--w-bold); letter-spacing: 0; font-stretch: 100%;
}
.vr-hero__tagline {
  margin-top: 14px;
  font-size: 13px; font-weight: var(--w-light); letter-spacing: 0.26em; word-spacing: 0.1em; line-height: 1.55; text-transform: uppercase;
}
.vr-hero__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; width: 100%; }
.vr-hero__ctas .vr-btn { min-height: 50px; padding-inline: 14px; font-size: 13px; }

@media (min-width: 600px) and (max-width: 900px) {
  /* tablets: keep the stacked layout but never a hero taller than the screen */
  .vr-hero__media { aspect-ratio: auto; height: min(125vw, calc(100svh - var(--header-h) - var(--annc-h, 0px) - 40px)); min-height: 520px; }
  .vr-hero__content { max-width: 560px; }
}
.vr-hero__consent { display: none; }

@media (min-width: 901px) {
  .vr-hero { height: calc(475 * var(--u)); }
  .vr-hero__media { position: absolute; inset: 0; aspect-ratio: auto; }
  .vr-hero__media img { object-position: 50% 28%; } /* new mountain image 2026-10-14: less sky, heads kept */
  .vr-hero__media::after { display: none; }
  .vr-hero__content {
    left: 67.7%; right: auto; bottom: auto; top: 53%; transform: translateY(-50%);
    padding: 0;
  }
  .vr-hero__title { line-height: 0.79; letter-spacing: 0.074em; }
  .vr-hero__l1 { font-size: calc(52 * var(--u)); margin-left: calc(2 * var(--u)); letter-spacing: 0.098em; }
  .vr-hero__l2 { font-size: calc(65.3 * var(--u)); margin-top: calc(2 * var(--u)); margin-left: calc(-3.5 * var(--u)); letter-spacing: 0.09em; }
  .vr-hero__tm { top: calc(-2 * var(--u)); left: 100%; right: auto; margin-left: calc(-7 * var(--u)); font-size: calc(17 * var(--u)); line-height: 1; font-weight: var(--w-semibold); letter-spacing: 0; }
  .vr-hero__tagline {
    margin-top: calc(10 * var(--u));
    font-size: max(11px, calc(15.6 * var(--u))); line-height: 1.36; letter-spacing: 0.31em;
  }
  .vr-hero__ctas {
    display: flex; width: auto; gap: calc(22 * var(--u));
    margin-top: calc(23 * var(--u)); margin-left: calc(-7.5 * var(--u));
  }
  .vr-hero__ctas .vr-btn {
    min-width: calc(152 * var(--u)); min-height: max(36px, calc(39 * var(--u)));
    padding-inline: calc(20 * var(--u));
    font-size: max(11.5px, calc(13 * var(--u))); gap: calc(10 * var(--u)); letter-spacing: 0.05em;
  }
  /* consent card slot: lower-right empty area of the hero, above the tiles */
  .vr-hero__consent {
    display: block; position: absolute; z-index: 3;
    right: calc(14 * var(--u)); bottom: calc(10 * var(--u));
    width: min(calc(36% - 14 * var(--u)), 560px);
  }
  .vr-hero__consent:empty { display: none; }
}

/* ===================================================================
   2. Campaign tiles row (component .vr-tiles; home spacing only)
   =================================================================== */
.vr-home-tiles { background: var(--black); padding-top: var(--gap-campaign); }
@media (min-width: 901px) {
  /* hero (475u) + tiles row (370u incl. the 6px gap) = 845u ≤ first screen */
  .vr-home-tiles { padding-top: 6px; }
  .vr-home-tiles .vr-tile { height: calc(370 * var(--u) - 6px); }
}

/* ===================================================================
   3. Featured collection
   =================================================================== */
.vr-home-featured { background: var(--black); }
@media (max-width: 767px) {
  .vr-home-featured__grid .vr-card:nth-child(n + 7) { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .vr-home-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .vr-home-featured__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===================================================================
   4. Campaign banner (master: 6px black gaps above and below)
   =================================================================== */
.vr-home-banner { background: var(--black); }
@media (min-width: 1024px) {
  .vr-home-banner { padding-block: calc(6 * var(--uw)); }
}

/* ===================================================================
   5. Shop by category — same tile language as the campaign row
   =================================================================== */
.vr-home-cats__rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 62vw;
  gap: var(--gap-campaign);
  padding: 0 var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.vr-home-cats__rail::-webkit-scrollbar { display: none; }
.vr-home-cats__rail > .vr-tile { scroll-snap-align: start; position: relative; }
@media (min-width: 600px) { .vr-home-cats__rail { grid-auto-columns: 38vw; } }
.vr-tile--category { aspect-ratio: 4 / 5; }
@media (min-width: 901px) {
  /* same hover-expand language as the campaign row (SPEC §12.6) */
  .vr-home-cats__rail {
    --cat-gap: calc(6 * var(--uw));
    display: flex; gap: var(--cat-gap);
    padding: 0 calc(7 * var(--uw));
    overflow: visible; container-type: inline-size;
  }
  .vr-home-cats__rail > .vr-tile--category {
    flex: 1 1 0; aspect-ratio: auto;
    height: calc((100cqw - (var(--n, 4) - 1) * var(--cat-gap)) / var(--n, 4) * 5 / 4);
    transition: flex-grow 0.5s cubic-bezier(0.22, 0.7, 0.2, 1);
  }
  .vr-home-cats__rail:hover > .vr-tile, .vr-home-cats__rail:focus-within > .vr-tile { flex-grow: 0.8; }
  .vr-home-cats__rail > .vr-tile:hover, .vr-home-cats__rail > .vr-tile:focus-within { flex-grow: 1.6; }
  .vr-tile--category .vr-tile__text { left: 20px; bottom: 18px; }
  .vr-tile--category .vr-tile__title { font-size: clamp(16px, 1.6vw, 26px); white-space: normal; }
  .vr-tile--category .vr-tile__lines { font-size: 11px; min-height: 0; }
  .vr-tile--category .vr-btn--sm { min-height: 38px; font-size: 12px; --btn-pad: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .vr-home-cats__rail > .vr-tile--category { transition: none; }
}
.vr-tile__illus {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 40%, #232323 0%, #0c0c0c 70%);
}
.vr-tile__illus svg { width: 84%; height: auto; transform: translateY(-34%); }

/* ===================================================================
   6. Shop the look
   =================================================================== */
.vr-home-looks { background: var(--ink-900); border-top: 1px solid var(--line); }
.vr-home-looks__rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 72vw; gap: 12px;
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.vr-home-looks__rail::-webkit-scrollbar { display: none; }
.vr-home-looks__rail > * { scroll-snap-align: start; }
@media (min-width: 600px) { .vr-home-looks__rail { grid-auto-columns: 44vw; } }
@media (min-width: 1024px) {
  .vr-home-looks__rail {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px; margin: 0; padding: 0; overflow: visible;
  }
}

/* ===================================================================
   7. Footwear — coming soon (five colours, no date)
   =================================================================== */
.vr-home-footwear {
  background:
    radial-gradient(90% 70% at 50% 100%, rgba(238, 4, 35, 0.16) 0%, rgba(238, 4, 35, 0) 60%),
    var(--black);
  border-top: 1px solid var(--line);
}
.vr-home-footwear__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px;
  margin-bottom: 32px;
}
.vr-home-footwear__status { margin-bottom: 14px; }
.vr-home-footwear__title {
  font-size: var(--fs-3xl); font-weight: var(--w-black); font-stretch: var(--stretch-display);
  line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase;
}
.vr-home-footwear__text {
  margin-top: 12px; font-size: 13px; font-weight: var(--w-light); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--bone);
}
.vr-home-footwear__rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 58vw; gap: 8px;
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.vr-home-footwear__rail::-webkit-scrollbar { display: none; }
.vr-home-footwear__rail > li { scroll-snap-align: start; }
@media (min-width: 600px) { .vr-home-footwear__rail { grid-auto-columns: 32vw; } }
@media (min-width: 1024px) {
  .vr-home-footwear__rail {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0; padding: 0; overflow: visible; gap: 8px;
  }
  .vr-home-footwear__head { margin-bottom: 40px; }
}
.vr-shoe { display: grid; gap: 12px; color: var(--white); }
.vr-shoe__link { color: inherit; }
.vr-shoe__media {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden;
  background: radial-gradient(100% 80% at 50% 45%, #1e1e1e 0%, #0a0a0a 75%);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.vr-shoe__media svg { width: 88%; height: auto; transition: transform 200ms var(--ease); }
.vr-shoe:hover .vr-shoe__media svg { transform: translateY(-3px) scale(1.02); }
.vr-shoe__name {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.75rem; font-weight: var(--w-semibold); letter-spacing: 0.1em; text-transform: uppercase;
}
.vr-shoe:hover .vr-shoe__name { text-decoration: underline; text-decoration-color: var(--vr-red); text-underline-offset: 4px; }

/* ===================================================================
   8. Limited / charity
   =================================================================== */
.vr-home-limited { background: var(--black); border-top: 1px solid var(--line); }
.vr-home-limited__grid { display: grid; }
.vr-home-limited__media { position: relative; aspect-ratio: 1 / 1; background: var(--ink-800); overflow: hidden; }
.vr-home-limited__media > picture { position: absolute; inset: 0; }
.vr-home-limited__media img { width: 100%; height: 100%; object-fit: cover; }
.vr-home-limited__body {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 40px var(--gutter) 56px;
}
.vr-home-limited__title {
  font-size: var(--fs-display); font-weight: var(--w-black); font-stretch: var(--stretch-display);
  line-height: 0.88; letter-spacing: 0.03em; text-transform: uppercase;
}
.vr-home-limited__text { max-width: 40ch; color: var(--bone); font-size: var(--fs-md); }
.vr-home-limited__status { margin: 2px 0 6px; }
@media (min-width: 900px) {
  .vr-home-limited__grid { grid-template-columns: 1fr 1fr; align-items: center; }
  .vr-home-limited__media { aspect-ratio: 5 / 4; }
  .vr-home-limited__body { padding: 64px clamp(32px, 6vw, 96px); gap: 18px; }
}

/* ===================================================================
   9. Brand statement — the master's bottom row
   =================================================================== */
.vr-home-story { display: grid; gap: var(--gap-campaign); padding-top: var(--gap-campaign); background: var(--black); }
.vr-home-story__main, .vr-home-story__detail { position: relative; overflow: hidden; }
.vr-home-story__main { aspect-ratio: 1 / 1; }
.vr-home-story__detail { aspect-ratio: 415 / 302; }
.vr-home-story__main > picture, .vr-home-story__detail > picture { position: absolute; inset: 0; }
.vr-home-story__main img, .vr-home-story__detail img { width: 100%; height: 100%; object-fit: cover; }
.vr-home-story__main img { object-position: 45% 50%; }
.vr-home-story__text {
  position: absolute; left: var(--gutter); top: 28px; right: var(--gutter); z-index: 1;
  color: #000;
}
.vr-home-story__title {
  font-size: 26px; font-weight: var(--w-heavy); font-stretch: var(--stretch-heading);
  line-height: 1; letter-spacing: 0; text-transform: uppercase;
}
.vr-home-story__copy { margin-top: 12px; font-size: 14px; line-height: 1.3; font-weight: var(--w-medium); letter-spacing: 0.02em; max-width: 30ch; }
.vr-home-story__btn { margin-top: 18px; }
.vr-home-story .vr-btn--solid { min-height: 46px; font-size: 13px; }
@media (min-width: 768px) {
  .vr-home-story {
    grid-template-columns: 602fr 415fr;
    gap: calc(7 * var(--uw));
    height: calc(309 * var(--uw));
    min-height: 286px;
    padding-top: calc(6 * var(--uw));
  }
  .vr-home-story__main, .vr-home-story__detail { aspect-ratio: auto; height: 100%; }
  .vr-home-story__main img { object-position: 50% 50%; }
  .vr-home-story__text { left: calc(42 * var(--uw)); top: calc(23.5 * var(--uw)); right: auto; }
  .vr-home-story__title { font-size: calc(27.6 * var(--uw)); line-height: calc(28 * var(--uw)); }
  .vr-home-story__copy { margin-top: calc(4.5 * var(--uw)); font-size: calc(14.4 * var(--uw)); line-height: calc(16 * var(--uw)); letter-spacing: 0.025em; word-spacing: 0.08em; font-weight: var(--w-regular); max-width: none; }
  .vr-home-story__btn { margin-top: calc(18 * var(--uw)); }
  .vr-home-story .vr-btn--solid {
    min-height: max(36px, calc(37 * var(--uw))); min-width: calc(150 * var(--uw)); --btn-pad: calc(20 * var(--uw));
    font-size: max(11.5px, calc(13 * var(--uw))); font-weight: var(--w-medium); letter-spacing: 0.07em; gap: calc(10 * var(--uw));
    border-width: calc(1.4 * var(--uw));
  }
}

/* ===================================================================
   10. Creator / social
   =================================================================== */
.vr-home-creator { background: var(--black); border-top: 1px solid var(--line); overflow: hidden; }
.vr-home-creator__grid { display: grid; gap: 32px; }
.vr-home-creator__main { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.vr-home-creator__tag {
  font-size: clamp(1.75rem, 7.4vw, 7.5rem); font-weight: var(--w-black); font-stretch: var(--stretch-display);
  line-height: 0.9; letter-spacing: 0.01em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.7);
  white-space: nowrap; max-width: 100%;
}
.vr-home-creator__title {
  font-size: var(--fs-2xl); font-weight: var(--w-heavy); font-stretch: var(--stretch-display);
  line-height: 1; text-transform: uppercase;
}
.vr-home-creator__title::after { content: ""; display: block; width: 48px; height: 3px; margin-top: 14px; background: var(--vr-red); }
.vr-home-creator__text { color: var(--bone); max-width: 46ch; margin-bottom: 6px; }
.vr-home-creator__tio {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; align-self: end;
  padding: 24px; border: 1px solid var(--line);
  background: linear-gradient(135deg, #111 0%, #050505 100%);
  transition: border-color var(--dur) var(--ease);
}
.vr-home-creator__tio:hover { border-color: rgba(255, 255, 255, 0.5); }
.vr-home-creator__tio-title { font-size: var(--fs-xl); font-weight: var(--w-black); font-stretch: var(--stretch-display); text-transform: uppercase; line-height: 1; }
.vr-home-creator__tio-text { color: var(--bone); font-size: 0.875rem; }
.vr-home-creator__posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 32px; }
@media (min-width: 1024px) { .vr-home-creator__posts { grid-template-columns: repeat(5, 1fr); } }
.vr-post { position: relative; display: block; }
.vr-post__media { position: relative; }
.vr-post__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-800); }
.vr-post__media img { width: 100%; height: 100%; object-fit: cover; }
.vr-post__handle { position: absolute; left: 10px; bottom: 10px; font-size: 0.75rem; font-weight: var(--w-bold); letter-spacing: 0.06em; }
@media (min-width: 900px) {
  .vr-home-creator__grid { grid-template-columns: 1.6fr 1fr; gap: 64px; align-items: end; }
}

/* Touch devices: keep campaign buttons comfortably tappable */
@media (pointer: coarse) {
  .vr-hero__ctas .vr-btn, .vr-banner .vr-btn--sm, .vr-home-story .vr-btn--solid { min-height: 44px; }
}
/* legibility over the wider hero (snowy peaks behind the copy) */
.vr-hero__title, .vr-hero__tagline { text-shadow: 0 1px 14px rgba(0,0,0,.75), 0 0 3px rgba(0,0,0,.5); }

/* Coming-soon footwear rail: product photos (grey backdrop) fill the square */
.vr-shoe__media > picture { position: absolute; inset: 0; }
.vr-shoe__media > picture img { width: 100%; height: 100%; object-fit: cover; transition: transform 200ms var(--ease); }
.vr-shoe:hover .vr-shoe__media > picture img { transform: scale(1.03); }

/* ===================================================================
   2026-10-12 — client mockup proportions (1024-wide master):
   header · hero 420 · tiles 435 · banner 347 · story 265 — width-based on desktop
   so every photo keeps the mockup framing (tiles show hands / full red figure).
   =================================================================== */
.vr-banner__thumbs { display: flex; justify-content: center; gap: 12px; margin-top: 16px; padding: 0; list-style: none; }
.vr-banner__thumb { display: grid; justify-items: center; gap: 6px; width: 96px; }
.vr-banner__thumb .vr-banner__thumb-pic, .vr-banner__thumb picture { display: block; width: 100%; aspect-ratio: 5 / 4; overflow: hidden; }
.vr-banner__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.vr-banner__thumb-label { font-size: 9px; font-weight: var(--w-semibold); letter-spacing: 0.18em; text-transform: uppercase; }
@media (min-width: 901px) {
  /* EXACT mockup format for header + hero (420) + tiles (435) per 1024 of width.
     --u is limited by the screen height too, so the whole first screen (bottom of the 4 tiles)
     always fits: when the screen is short the block keeps its proportions and is centred on black. */
  .page-home {
    --w: calc(100vw / 1024);
    --u: min(var(--w), calc((100svh - var(--header-h) - var(--annc-h, 0px) - 6px) / 861));
    --bw: calc(1024 * var(--u));
  }
  /* full page width; height = mockup 420 (limited by the screen height so the tiles stay visible).
     Wide master = Jim's photo (whole height) + soft dark extensions left/right, couple on the left,
     title centre-right like the mockup. */
  /* Jim's photo as is (sharp, no stretch/blur), full width; the hero gets 54 % of the first screen
     (tiles 46 %, their photos stay full height) so the couple is framed as loosely as possible. */
  .page-home { --fs: calc(100svh - var(--header-h) - var(--annc-h, 0px) - 6px); }
  /* hero = mockup 420/1024 of the width, but never more than 54 % of the first screen, so the 4 tiles
     (46 %) always stay fully visible under it on any PC (owner, 2026-10-15); hero text scales with the hero */
  .page-home .vr-hero { --hh: min(calc(420 * var(--w)), calc(var(--fs) * 0.58)); --u: calc(var(--hh) / 420); height: var(--hh); background: #000; }
  /* owner's Winter 01 chalet image (2026-10-18): cropped from the baked title (top) to just under the coats, couple centre-left */
  .page-home .vr-hero__media img { object-fit: cover; object-position: 35% 0%; } /* couple at 35 % of the master */
  /* no blurred copy behind a widened tile: its stretched colours made brown/grey bands (owner, 2026-10-15) */
  .page-home .vr-home-tiles .vr-tile__media .vr-tile__blur { display: none !important; }
  .page-home .vr-hero__content { left: 68.5%; top: 52%; text-shadow: 0 1px 10px rgba(0,0,0,.75); }
  /* soft dark veil behind the title so it reads on bright snow (owner, 2026-10-15) */
  .page-home .vr-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(ellipse 30% 42% at 79% 47%, rgba(0,0,0,.5) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,0) 100%),
      radial-gradient(ellipse 13% 30% at 9% 17%, rgba(0,0,0,.32) 0%, rgba(0,0,0,.14) 55%, rgba(0,0,0,0) 100%); }
  .page-home .vr-hero__content { z-index: 2; }
  .page-home .vr-hero__l1 { font-size: calc(56 * var(--u)); }
  .page-home .vr-hero__l2 { font-size: calc(70 * var(--u)); }
  .page-home .vr-hero__tagline { font-size: max(12px, calc(16.5 * var(--u))); letter-spacing: 0.27em; }
  .page-home .vr-hero__ctas { gap: calc(16 * var(--u)); margin-left: 0; }
  .page-home .vr-hero__ctas .vr-btn { min-width: calc(140 * var(--u)); min-height: max(38px, calc(44 * var(--u))); font-size: max(12px, calc(14.5 * var(--u))); }
  .page-home .vr-home-tiles { --th: min(calc(435 * var(--w)), calc(var(--fs) * 0.42)); --t: calc(var(--th) / 435); }
  .page-home .vr-home-tiles .vr-tile { height: var(--th); }
  .page-home .vr-home-tiles .vr-tile__media { background: #030303; }
  .page-home .vr-home-tiles .vr-tile__media img,
  .page-home .vr-home-tiles .vr-tile:hover .vr-tile__media img,
  .page-home .vr-home-tiles .vr-tile:focus-within .vr-tile__media img {
    width: auto; height: 100%; max-width: none; object-fit: cover;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
  .page-home .vr-home-tiles .vr-tile__text { bottom: calc(18 * var(--t)); left: calc(20 * var(--t)); }
  .page-home .vr-home-tiles .vr-tile__title { font-size: max(16px, calc(26 * var(--t))); }
  .page-home .vr-home-tiles .vr-tile__lines { margin-top: calc(8 * var(--t)); font-size: max(10px, calc(13 * var(--t))); letter-spacing: 0.06em; }
  .page-home .vr-home-tiles .vr-tile__btn { margin-top: calc(14 * var(--t)); }
  .page-home .vr-home-tiles .vr-tile .vr-btn--sm { min-height: max(30px, calc(36 * var(--t))); min-width: calc(118 * var(--t)); --btn-pad: calc(16 * var(--t)); font-size: max(10px, calc(12.5 * var(--t))); justify-content: center; }
  .page-home .vr-home-banner { padding-block: calc(6 * var(--w)); }
  .page-home .vr-banner { height: calc(347 * var(--w)); min-height: 0; }
  .page-home .vr-banner--copy-right .vr-banner__content {
    left: 73.5%; right: 1.5%; width: auto; padding: calc(30 * var(--w)) 0 0; align-items: center; text-align: center;
  }
  .page-home .vr-banner--copy-right .vr-banner__eyebrow { font-size: calc(30 * var(--w)); font-weight: var(--w-black); letter-spacing: 0.02em; line-height: 1; }
  .page-home .vr-banner--copy-right .vr-banner__eyebrow b { color: #8e0007; }
  .page-home .vr-banner--copy-right .vr-banner__title {
    margin-top: calc(10 * var(--w)); font-size: calc(17 * var(--w)); font-weight: var(--w-light); font-stretch: 100%;
    letter-spacing: 0.32em; line-height: 1;
  }
  .page-home .vr-banner--copy-right .vr-banner__lines {
    margin-top: calc(12 * var(--w)); font-size: calc(13 * var(--w)); line-height: calc(19 * var(--w)); font-weight: var(--w-semibold); letter-spacing: 0.26em;
  }
  .page-home .vr-banner--copy-right .vr-banner__btn { margin-top: calc(12 * var(--w)); }
  .page-home .vr-banner .vr-btn--sm { min-height: calc(31 * var(--w)); min-width: calc(228 * var(--w)); justify-content: center; font-size: calc(12 * var(--w)); }
  .page-home .vr-banner__thumbs { gap: calc(10 * var(--w)); margin-top: calc(14 * var(--w)); }
  .page-home .vr-banner__thumb { width: calc(108 * var(--w)); gap: calc(6 * var(--w)); }
  .page-home .vr-banner__thumb picture { aspect-ratio: 108 / 112; }
  .page-home .vr-banner__thumb-label { font-size: calc(9 * var(--w)); }
  .page-home .vr-home-story { grid-template-columns: 572fr 446fr; gap: calc(6 * var(--w)); height: calc(265 * var(--w)); min-height: 0; padding-top: 0; }
  .page-home .vr-home-story__text { left: calc(28 * var(--w)); top: calc(22 * var(--w)); }
  .page-home .vr-home-story__title { font-size: calc(26 * var(--w)); line-height: calc(28 * var(--w)); }
  .page-home .vr-home-story__copy { font-size: calc(13 * var(--w)); line-height: calc(17 * var(--w)); }
}

/* Winter 01 campaign line, top-left in the sky (was baked in the photo, 2026-10-18):
   readable, but quieter than the VISION REBEL title on the right */
.vr-hero__campaign { display: none; }
@media (min-width: 901px) {
  .page-home .vr-hero__campaign {
    display: block; position: absolute; z-index: 2; left: 2.6%; top: calc(22 * var(--u)); margin: 0;
    color: var(--white); text-shadow: 0 1px 10px rgba(0,0,0,.7), 0 0 3px rgba(0,0,0,.55); line-height: 1.15;
  }
  .vr-hero__campaign > span { display: block; }
  .vr-hero__campaign-brand { font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: var(--w-bold); font-size: calc(21 * var(--u)); letter-spacing: 0.06em; }
  .vr-hero__campaign-name { margin-top: calc(6 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: var(--w-bold); letter-spacing: 0.32em; }
  .vr-hero__campaign-line { margin-top: calc(10 * var(--u)); font-size: max(10px, calc(10 * var(--u))); font-weight: var(--w-bold); letter-spacing: 0.26em; line-height: 1.45; }
}

/* 40-collection.css */
/* Vision Rebel — collections /shop/ /men/ /women/ /new-drop/ (COLLECTIONS owns this file).
   Soft layout (2026-10-07): short header (one image, title, one tagline line),
   slim filter bar, one calm product grid. Red only for the selected state. */

/* ===================================================================
   Campaign header (soft)
   =================================================================== */
.vr-coll-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--black); }
.vr-coll-hero__media { position: relative; aspect-ratio: 4 / 4.2; max-height: 62svh; width: 100%; overflow: hidden; background: var(--ink-900); }
.vr-coll-hero__media > picture { position: absolute; inset: 0; }
.vr-coll-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; } /* portrait photos: whole head in frame; a collection focal overrides it */
.vr-coll-hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0) 70%);
}
.vr-coll-hero__body {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-top: 14px; padding-bottom: 22px;
}
.vr-coll-hero .vr-breadcrumbs li { color: rgba(255, 255, 255, 0.7); }
.vr-coll-hero .vr-breadcrumbs [aria-current] { color: var(--white); }
.vr-coll-hero .vr-breadcrumbs a { text-decoration: none; }
.vr-coll-hero .vr-breadcrumbs a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.vr-coll-hero__copy { display: grid; justify-items: start; gap: 10px; }
.vr-coll-hero__title {
  font-family: var(--font-display); font-stretch: var(--stretch-title); font-weight: var(--w-heavy);
  font-size: clamp(2.25rem, 10vw, 3.25rem); line-height: 0.95; letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--white);
}
.vr-coll-hero__lines {
  font-size: 0.75rem; font-weight: var(--w-regular); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--bone);
}
.vr-coll-hero__count { font-size: 0.8125rem; color: var(--muted); }

@media (min-width: 901px) {
  /* cinematic header: the campaign photo melts into the black canvas (no hard edge) */
  .vr-coll-hero { height: clamp(380px, 54svh, 600px); }
  .vr-coll-hero__media {
    position: absolute; top: 0; right: clamp(0px, 4vw, 72px); bottom: 0; width: clamp(420px, 44%, 700px); aspect-ratio: auto; max-height: none;
    background: transparent;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 16%, #000 38%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 16%, #000 38%);
  }
  /* the split photo also fades out on its right edge and top (portrait photo inside a landscape band) */
  .vr-coll-hero--split .vr-coll-hero__media {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 82%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 82%, transparent 100%);
  }
  .vr-coll-hero__media img { object-position: 50% 0%; }
  .vr-coll-hero--wide .vr-coll-hero__media { right: 0; width: 100%; -webkit-mask-image: none; mask-image: none; }
  .vr-coll-hero--wide .vr-coll-hero__media img { object-position: 20% 30%; }
  .vr-coll-hero__media::after { background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 22%); }
  .vr-coll-hero--wide .vr-coll-hero__media::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 18%),
      linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 24%),
      linear-gradient(270deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.4) 34%, rgba(0, 0, 0, 0) 58%);
  }
  .vr-coll-hero__body { justify-content: flex-start; gap: 0; padding-top: 22px; padding-bottom: 0; }
  /* wide photo with the copy on the left (subject on the right): darken the left side instead */
  .vr-coll-hero--copy-left .vr-coll-hero__copy { margin-left: 0 !important; max-width: 44% !important; }
  .vr-coll-hero--wide.vr-coll-hero--copy-left .vr-coll-hero__media::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 18%),
      linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 24%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 32%, rgba(0, 0, 0, 0) 58%);
  }
  .vr-coll-hero__copy { margin-block: auto; max-width: 44%; gap: 16px; }
  .vr-coll-hero--wide .vr-coll-hero__copy { margin-left: 58%; max-width: 40%; }
  .vr-coll-hero__title { font-size: clamp(3.5rem, 6vw, 6rem); line-height: 0.9; }
  .vr-coll-hero__lines { font-size: 0.875rem; letter-spacing: 0.3em; }
  .vr-coll-hero__cta { margin-top: 6px; }
}
.vr-coll-hero__title, .vr-coll-hero__lines, .vr-coll-hero__count, .vr-coll-hero .vr-breadcrumbs { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.6); }
.vr-coll-hero__count { color: var(--bone); }

/* ===================================================================
   Filter bar
   =================================================================== */
.vr-coll-bar {
  position: relative; z-index: var(--z-sticky);
  background: var(--black);
  border-bottom: 1px solid var(--line);
}
.vr-coll-bar__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px;
}
.vr-coll-tabs {
  order: -1; flex: 1 0 100%;
  display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  border-bottom: 1px solid var(--line);
}
.vr-coll-tabs::-webkit-scrollbar { display: none; }
.vr-coll-tab {
  position: relative; flex: none; padding: 16px 0 14px;
  font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.vr-coll-tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--vr-red); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
}
.vr-coll-tab:hover { color: var(--white); }
.vr-coll-tab[aria-pressed="true"] { color: var(--white); }
.vr-coll-tab[aria-pressed="true"]::after { transform: scaleX(1); }

.vr-coll-bar__dds { display: none; }
.vr-coll-filter-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--white);
}
.vr-coll-filter-btn__n {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--vr-red); color: var(--white); font-size: 0.625rem; letter-spacing: 0;
}
.vr-coll-bar__count {
  margin-left: auto;
  font-size: 0.6875rem; font-weight: var(--w-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.vr-coll-sort { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.vr-coll-sort__label {
  font-size: 0.6875rem; font-weight: var(--w-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.vr-coll-sort__select {
  appearance: none; -webkit-appearance: none;
  min-height: 44px; padding: 0 18px 0 0; border: 0; border-radius: 0; background: transparent;
  font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--white);
  cursor: pointer; field-sizing: content;
}
.vr-coll-sort__select option { background: var(--ink-800); color: var(--white); text-transform: none; letter-spacing: 0; }
.vr-coll-sort .vr-coll-dd__chev { position: absolute; right: 0; top: 50%; margin-top: -5px; pointer-events: none; }
@media (max-width: 420px) { .vr-coll-sort__label { display: none; } }

/* Active filters */
.vr-coll-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-bottom: 14px; }
.vr-coll-active[hidden] { display: none; }
.vr-coll-active__list { display: flex; flex-wrap: wrap; gap: 8px; }
.vr-coll-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 0.6875rem; font-weight: var(--w-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--white);
  transition: border-color var(--dur) var(--ease);
}
.vr-coll-pill:hover { border-color: var(--vr-red); }
.vr-coll-active__clear {
  min-height: 32px; font-size: 0.6875rem; font-weight: var(--w-semibold); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); text-decoration: underline; text-underline-offset: 4px;
}
.vr-coll-active__clear:hover { color: var(--white); text-decoration-color: var(--vr-red); }

/* Desktop: one slim sticky row, dropdown panels */
@media (min-width: 901px) {
  .vr-coll-bar { position: sticky; top: var(--header-h); background: rgba(0, 0, 0, 0.94); }
  .vr-coll-bar__inner { flex-wrap: nowrap; gap: 0 clamp(18px, 2.2vw, 34px); min-height: 58px; }
  .vr-coll-tabs { order: 0; flex: none; margin: 0; padding: 0; border: 0; overflow: visible; gap: clamp(18px, 2vw, 30px); }
  .vr-coll-tab { padding: 20px 0 18px; font-size: clamp(0.6875rem, 0.78vw, 0.75rem); }
  .vr-coll-tab::after { bottom: 0; }
  .vr-coll-tabs + .vr-coll-bar__dds { padding-left: clamp(18px, 2.2vw, 34px); border-left: 1px solid var(--line); }
  .vr-coll-bar__dds { display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); }
  .vr-coll-filter-btn { display: none; }
  .vr-coll-bar__count, .vr-coll-sort__label, .vr-coll-sort__select { font-size: clamp(0.6875rem, 0.78vw, 0.75rem); }
}
.vr-coll-dd { position: relative; }
.vr-coll-dd__btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: clamp(0.6875rem, 0.78vw, 0.75rem); font-weight: var(--w-bold); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--white); white-space: nowrap;
}
.vr-coll-dd__label { color: var(--muted); transition: color var(--dur) var(--ease); }
.vr-coll-dd__btn:hover .vr-coll-dd__label, .vr-coll-dd__btn[aria-expanded="true"] .vr-coll-dd__label { color: var(--white); }
.vr-coll-dd__btn.is-active .vr-coll-dd__label { color: var(--white); }
.vr-coll-dd__btn.is-active .vr-coll-dd__label::after { content: ":"; }
.vr-coll-dd__value { color: var(--vr-red); }
.vr-coll-dd__value:empty { display: none; }
.vr-coll-dd__chev { flex: none; transition: transform var(--dur) var(--ease); }
.vr-coll-dd__btn[aria-expanded="true"] .vr-coll-dd__chev { transform: rotate(180deg); }
.vr-coll-dd__panel {
  position: absolute; top: calc(100% + 7px); left: -16px; z-index: 2;
  min-width: 248px; padding: 10px;
  display: grid; gap: 2px;
  background: var(--ink-800); border: 1px solid var(--line);
}
.vr-coll-dd__panel--color { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 420px; }
.vr-coll-dd__panel--color .vr-coll-opt { white-space: nowrap; }
.vr-coll-dd__panel--status { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; min-width: 0; width: max-content; max-width: 480px; }

/* Options (shared by dropdown panels and the sheet) */
.vr-coll-opt {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px;
  font-size: 0.75rem; font-weight: var(--w-semibold); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bone); text-align: left;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.vr-coll-opt:hover { background: var(--ink-700); color: var(--white); }
.vr-coll-opt__label { flex: 1; }
.vr-coll-opt.is-empty, .vr-coll-opt:disabled { opacity: 0.32; cursor: not-allowed; }
.vr-coll-opt.is-empty:hover { background: transparent; }
.vr-coll-tab:disabled { opacity: 0.32; cursor: not-allowed; }
.vr-coll-opt__count { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: var(--w-regular); }
.vr-coll-opt[aria-pressed="true"] { color: var(--white); }
.vr-coll-opt[aria-pressed="true"]::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--vr-red);
}
.vr-coll-opt__sw {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.vr-coll-opt.is-light .vr-coll-opt__sw { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
.vr-coll-opt--color[aria-pressed="true"] .vr-coll-opt__sw { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 0 2px var(--ink-800), 0 0 0 3.5px var(--white); }
.vr-coll-opt--status { padding: 4px; min-height: 36px; }
.vr-coll-opt--status::before { display: none; }
.vr-coll-opt--status .vr-status { font-size: 0.625rem; }
.vr-coll-opt--status[aria-pressed="true"] { outline: 2px solid var(--vr-red); outline-offset: 1px; background: transparent; }
.vr-coll-opt--status:hover { background: transparent; }
.vr-coll-opt--status:hover .vr-status { border-color: var(--white); }

/* ===================================================================
   Grid
   =================================================================== */
.vr-coll-shop__body { padding-top: 28px; padding-bottom: var(--s-8); }
.vr-coll-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 12px;
}
.vr-coll-grid__item { min-width: 0; }
.vr-coll-grid__item > .vr-card { height: 100%; }
@media (min-width: 900px) {
  .vr-coll-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 20px; }
}
@media (min-width: 1200px) {
  .vr-coll-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 64px 24px; }
}
@media (min-width: 901px) {
  .vr-coll-shop__body { padding-top: 44px; padding-bottom: var(--s-9); }
}

/* Cards inside collections only (the shared card stays as is elsewhere) */
.vr-coll-grid .vr-card__image-link { overflow: hidden; }
.vr-coll-grid .vr-card__image-link img,
.vr-coll-grid .vr-card__image-link > svg { transition: transform 0.6s cubic-bezier(0.22, 0.7, 0.2, 1), opacity var(--dur) var(--ease); }
@media (hover: hover) and (min-width: 900px) {
  .vr-coll-grid .vr-card:hover .vr-card__image-link img,
  .vr-coll-grid .vr-card:hover .vr-card__image-link > svg { transform: scale(1.035); }
}
.vr-coll-grid .vr-card__body { padding-top: 14px; }
.vr-coll-grid .vr-card__title { font-size: 0.8125rem; letter-spacing: 0.05em; }
@media (prefers-reduced-motion: reduce) {
  .vr-coll-grid .vr-card:hover .vr-card__image-link img, .vr-coll-grid .vr-card:hover .vr-card__image-link > svg { transform: none; }
}

/* Empty state */
.vr-coll-empty { padding: 64px 0 24px; display: grid; justify-items: center; text-align: center; gap: 12px; }
.vr-coll-empty__title {
  font-size: var(--fs-xl); font-weight: var(--w-black); font-stretch: var(--stretch-heading);
  text-transform: uppercase; line-height: 1.05;
}
.vr-coll-empty__text { color: var(--bone); font-size: var(--fs-base); }
.vr-coll-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }

/* ===================================================================
   Mobile filter sheet
   =================================================================== */
/* above the cookie banner (z-toast) so the sheet footer buttons stay reachable before consent */
.vr-coll-sheet { position: fixed; inset: 0; z-index: calc(var(--z-toast) + 1); }
.vr-coll-sheet__backdrop {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.66);
  opacity: 0; transition: opacity 200ms var(--ease);
}
.vr-coll-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; max-height: 88svh;
  background: var(--ink-800); border-top: 1px solid var(--line);
  transform: translateY(100%); transition: transform 200ms var(--ease);
}
.vr-coll-sheet.is-open .vr-coll-sheet__backdrop { opacity: 1; }
.vr-coll-sheet.is-open .vr-coll-sheet__panel { transform: none; }
.vr-coll-sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px 6px 20px; border-bottom: 1px solid var(--line);
}
.vr-coll-sheet__title {
  font-size: 0.9375rem; font-weight: var(--w-heavy); font-stretch: 112%; letter-spacing: 0.04em; text-transform: uppercase;
}
.vr-coll-sheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 20px; }
.vr-coll-sheet__group { padding: 18px 0; border-bottom: 1px solid var(--line); }
.vr-coll-sheet__group:last-child { border-bottom: 0; }
.vr-coll-sheet__gtitle {
  margin-bottom: 12px;
  font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--muted);
}
.vr-coll-sheet__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.vr-coll-sheet__opts .vr-coll-opt:not(.vr-coll-opt--status) {
  min-height: 40px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.24);
}
.vr-coll-sheet__opts .vr-coll-opt:not(.vr-coll-opt--status)::before { display: none; }
.vr-coll-sheet__opts .vr-coll-opt[aria-pressed="true"]:not(.vr-coll-opt--status) {
  border-color: var(--vr-red); background: rgba(236, 5, 35, 0.14); color: var(--white);
}
.vr-coll-sheet__opts .vr-coll-opt--color { padding-left: 10px; }
.vr-coll-sheet__opts .vr-coll-opt__count { margin-left: 2px; }
.vr-coll-sheet__foot {
  display: grid; grid-template-columns: 1fr 2fr; gap: 10px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
  background: var(--ink-800);
}
.vr-coll-sheet__foot .vr-btn { min-height: 48px; }
@media (min-width: 901px) {
  .vr-coll-sheet__panel { left: auto; top: 0; width: 420px; max-height: none; border-top: 0; border-left: 1px solid var(--line); transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .vr-coll-sheet__panel, .vr-coll-sheet__backdrop { transition: none; }
}
@media (min-width: 901px) {
  /* subject on the left of a wide photo, copy on the right: the left edge melts into black */
  .vr-coll-hero--wide.vr-coll-hero--copy-right .vr-coll-hero__media::after {
    background:
      linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 12%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 18%),
      linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 24%),
      linear-gradient(270deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 34%, rgba(0, 0, 0, 0) 58%);
  }
}

/* 50-pdp.css */
/* Vision Rebel — product detail page (PDP owns this file).
   Desktop: editorial 2-column gallery of hard-edged 4:5 frames (6px black gaps, like
   the master's campaign rows) + sticky buy box. Mobile (≤900px): full-width swipe
   gallery with counter/dots/buttons, buy box, sticky bottom ADD TO BAG bar. */

.pdp { --pdp-gap: 6px; --pdp-info-w: clamp(380px, 33vw, 520px); }
.pdp a { -webkit-user-drag: none; }

/* ------------------------------------------------------------------ layout */
.pdp__layout { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 901px) {
  .pdp__layout { grid-template-columns: minmax(0, 1fr) var(--pdp-info-w); align-items: start; }
}

/* ------------------------------------------------------------------ gallery */
.pdp-gallery { position: relative; min-width: 0; background: var(--black); }
.pdp-gallery__track { margin: 0; }
.pdp-slide {
  position: relative; overflow: hidden; margin: 0;
  aspect-ratio: 4 / 5; background: var(--ink-800);
}
.pdp-slide > picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.pdp-slide img { width: 100%; height: 100%; object-fit: cover; }
.pdp-slide--illustration { background: var(--wall); display: grid; place-items: center; }
.pdp-slide__illu, .pdp-slide .vr-illu { display: block; width: 100%; height: auto; max-height: 100%; }
.pdp-slide__note {
  position: absolute; left: 14px; bottom: 12px;
  font-size: 0.625rem; font-weight: var(--w-semibold); letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--muted);
}
.pdp-gallery__nav, .pdp-gallery__dots { display: none; }

/* Mobile: swipe rail */
@media (max-width: 900px) {
  .pdp-gallery__track {
    display: flex; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pdp-gallery__track::-webkit-scrollbar { display: none; }
  .pdp-gallery__track:focus-visible { outline-offset: -3px; }
  .pdp-slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  .pdp-gallery__nav:not([hidden]) {
    position: absolute; right: 10px; bottom: 12px; z-index: 2;
    display: flex; align-items: center; gap: 2px;
    background: rgba(0, 0, 0, 0.62); border: 1px solid var(--line);
  }
  .pdp-gallery__btn { display: inline-grid; place-items: center; width: 40px; height: 40px; color: var(--white); }
  .pdp-gallery__btn:disabled { opacity: 0.3; cursor: default; }
  .pdp-gallery__count {
    min-width: 44px; text-align: center;
    font-size: 0.6875rem; font-weight: var(--w-semibold); letter-spacing: 0.12em; font-variant-numeric: tabular-nums;
  }
  .pdp-gallery__dots:not(:empty) {
    position: absolute; left: 14px; bottom: 30px; z-index: 2;
    display: flex; gap: 6px;
  }
  .pdp-gallery__dot { width: 14px; height: 2px; background: rgba(255, 255, 255, 0.38); transition: background-color var(--dur) var(--ease), width var(--dur) var(--ease); }
  .pdp-gallery__dot.is-active { width: 24px; background: var(--white); }
  .pdp-gallery__dots:has(> :only-child) { display: none; }
  .pdp-slide__note { bottom: 64px; }
}

/* Desktop: editorial 2-column grid */
@media (min-width: 901px) {
  .pdp-gallery { padding: var(--pdp-gap) 0 var(--pdp-gap) var(--pdp-gap); }
  .pdp-gallery__track {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pdp-gap); grid-auto-flow: row dense;
  }
  .pdp-gallery__track:focus-visible { outline-offset: -2px; }
  .pdp-slide.is-landscape { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  /* odd last portrait: same 4:5 frame as the others, centred on its row (no letterbox bars) */
  .pdp-slide.is-solo { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--pdp-gap)) / 2); aspect-ratio: 4 / 5; }
  /* one visual only: a single first-screen frame */
  .pdp-gallery__track[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
  .pdp-gallery__track[data-count="1"] .pdp-slide {
    aspect-ratio: auto; height: min(calc(100svh - var(--header-h) - var(--annc-h, 0px) - 2 * var(--pdp-gap)), 64vw);
    min-height: 420px;
  }
  /* a single photo: the frame takes the photo's own 4:5 shape (no letterbox bars) */
  .pdp-gallery__track[data-count="1"] .pdp-slide--image { aspect-ratio: 4 / 5; width: auto; justify-self: center; }
  .pdp-gallery__track[data-count="1"] .pdp-slide__illu { width: auto; height: 86%; max-width: 92%; }
}

/* ------------------------------------------------------------------ buy box */
.pdp-info { min-width: 0; }
.pdp-head { container-type: inline-size; }
.pdp-info__inner { padding: 20px var(--gutter) 40px; display: grid; gap: 22px; align-content: start; }
@media (min-width: 901px) {
  .pdp-info { align-self: stretch; }
  .pdp-info__inner {
    position: sticky; top: var(--header-h);
    padding: 34px clamp(28px, 3.4vw, 56px) 48px;
    max-height: none;
  }
}
.pdp-info .vr-breadcrumbs li { font-size: 0.625rem; letter-spacing: 0.16em; }
.pdp-info .vr-breadcrumbs a { text-decoration: none; }
.pdp-info .vr-breadcrumbs a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--vr-red); text-underline-offset: 4px; }

.pdp-head { display: grid; gap: 12px; }
.pdp-badge { line-height: 1; }
.pdp-title {
  font-size: clamp(1.5rem, 9cqi, 2.75rem); /* "PERFORMANCE" fits the column on one line */
  font-weight: var(--w-black); font-stretch: var(--stretch-display);
  line-height: 0.96; letter-spacing: 0.01em; text-transform: uppercase;
  overflow-wrap: break-word; hyphens: manual;
}
.pdp-price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 26px; }
.pdp-price__value .vr-price { font-size: 1.25rem; font-weight: var(--w-semibold); letter-spacing: 0.01em; }
.pdp-price__value .vr-price__was { font-size: 0.9375rem; }
.pdp-price__value.is-muted .vr-price__now { color: var(--muted); }
.pdp-status { height: 26px; padding: 0 10px; font-size: 0.6875rem; letter-spacing: 0.14em; }

/* limited */
.pdp-limited { display: grid; gap: 8px; padding: 14px 16px; border-left: 2px solid var(--vr-red); background: var(--ink-900); }
.pdp-limited__eyebrow { font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--vr-red); }
.pdp-limited__edition { color: var(--white); margin-left: 6px; }
.pdp-limited__message { font-size: 0.875rem; color: var(--bone); }
.pdp-limited__rows { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 0.75rem; font-weight: var(--w-semibold); letter-spacing: 0.1em; text-transform: uppercase; }

/* fields */
.pdp-form { display: grid; gap: 22px; }
.pdp-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.pdp-field__legend {
  padding: 0; margin-bottom: 10px;
  font-size: 0.6875rem; font-weight: var(--w-semibold); letter-spacing: 0.16em; text-transform: uppercase;
}
.pdp-field__k { color: var(--muted); }
.pdp-field__dash { color: var(--muted-2); }
.pdp-field__v { color: var(--white); }

/* colour radios (reuse .vr-swatch visuals) */
.pdp-colors__list, .pdp-slot__swatches { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -4px; }
.pdp-color { position: relative; display: inline-flex; }
.pdp-color__label { cursor: pointer; }
.pdp-color__input:checked + .vr-swatch .vr-swatch__dot {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 0 2px var(--black), 0 0 0 3.5px var(--white);
}
.pdp-color__input:checked + .vr-swatch.is-light .vr-swatch__dot {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 0 2px var(--black), 0 0 0 3.5px var(--white);
}
.pdp-color__input:focus-visible + .vr-swatch { outline: 2px solid var(--focus); outline-offset: 0; }

/* sizes */
.pdp-sizes { position: relative; }
.pdp-sizes__legend { float: left; }
.pdp-sizes__guide {
  float: right; margin: -4px 0 6px;
  min-height: 28px; padding: 0;
  font-size: 0.6875rem; font-weight: var(--w-semibold); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white); text-decoration: underline; text-decoration-color: var(--vr-red); text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.pdp-sizes__guide:hover { color: var(--bone); }
.pdp-sizes__grid {
  clear: both;
  display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 6px;
}
.pdp-size { position: relative; display: block; }
.pdp-size__label {
  display: grid; place-items: center; height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  font-size: 0.8125rem; font-weight: var(--w-bold); letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; user-select: none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pdp-size__label:hover { border-color: var(--white); }
.pdp-size__input:checked + .pdp-size__label { border-color: var(--vr-red); box-shadow: inset 0 0 0 1px var(--vr-red); background: rgba(236, 5, 35, 0.12); }
.pdp-size__input:focus-visible + .pdp-size__label { outline: 2px solid var(--focus); outline-offset: 2px; }
.pdp-size__input:disabled + .pdp-size__label {
  cursor: not-allowed; color: var(--muted-2); border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.16) 50%, transparent calc(50% + 0.5px));
}
.pdp-size__input:disabled + .pdp-size__label .pdp-size__text { text-decoration: line-through; }
.pdp-sizes.is-invalid .pdp-size__input:not(:disabled) + .pdp-size__label { border-color: var(--vr-red); }

.pdp-msg { min-height: 0; font-size: 0.8125rem; color: var(--bone); }
.pdp-msg:empty { display: none; }
.pdp-msg.is-error { color: #ff5a6e; }
.pdp-sizes .pdp-msg { margin-top: 10px; }

/* CTA */
.pdp-cta { display: grid; gap: 10px; }
.pdp-add .vr-btn__label { letter-spacing: 0.1em; }
.pdp-add.is-prompt { background: var(--vr-red); }
.pdp-msg--cta.is-success { color: var(--white); }

/* pack builder */
.pdp-pack { display: grid; gap: 14px; }
.pdp-pack__intro { font-size: 0.8125rem; color: var(--bone); }
.pdp-pack__slots { display: grid; gap: 0; border-top: 1px solid var(--line); }
.pdp-slot {
  display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 8px 14px; align-items: end;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.pdp-slot__colors { margin: 0; padding: 0; border: 0; min-width: 0; }
.pdp-slot__legend { padding: 0; margin-bottom: 6px; font-size: 0.6875rem; font-weight: var(--w-semibold); letter-spacing: 0.14em; text-transform: uppercase; }
.pdp-slot__n { color: var(--white); margin-right: 8px; }
.pdp-slot__color { color: var(--muted); }
.pdp-slot.is-complete .pdp-slot__color { color: var(--white); }
.pdp-slot.is-invalid .pdp-slot__n { color: var(--vr-red); }
.pdp-slot__select {
  min-height: 40px; padding: 0 28px 0 12px; font-size: 0.875rem; font-weight: var(--w-semibold);
  appearance: none; -webkit-appearance: none; border-radius: var(--radius-1);
  background: var(--ink-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 8px center / 14px no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.32);
}
.pdp-slot.is-invalid .pdp-slot__select:invalid, .pdp-slot.is-invalid .pdp-slot__select.is-empty { border-color: var(--vr-red); }
@media (max-width: 380px) { .pdp-slot { grid-template-columns: 1fr; } }

/* notify */
.pdp-mode--notify .vr-notify { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--line); background: var(--ink-900); }
.pdp-mode--notify .vr-notify__title { font-size: 0.8125rem; font-weight: var(--w-heavy); font-stretch: 112%; letter-spacing: 0.08em; text-transform: uppercase; }
/* pack-only colours: same layout as a sellable colour, one explanatory line under the button */
.pdp-packnote { margin-top: 12px; font-size: 0.875rem; line-height: 1.5; color: var(--bone); }
.pdp-packnote__link { color: var(--white); font-weight: var(--w-semibold); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.pdp-packnote__link:hover { color: var(--vr-red); }
.pdp-mode--notify .vr-field--inline .vr-btn { --btn-pad: 16px; }

/* wishlist */
.pdp-wish { gap: 10px; }
.pdp-wish .vr-icon { width: 16px; height: 16px; flex: none; }
.pdp-wish__on { display: none; }
.pdp-wish[aria-pressed="true"] .pdp-wish__on { display: inline-block; }
.pdp-wish[aria-pressed="true"] .pdp-wish__off { display: none; }
.pdp-wish[aria-pressed="true"] .vr-icon { color: var(--vr-red); fill: var(--vr-red); }
.pdp-wish[aria-pressed="true"]:hover .vr-icon { color: var(--vr-red); }

.pdp-tryon { display: flex; }
.pdp-tryon .vr-tryon-entry {
  display: inline-flex; align-items: center; gap: 12px; min-height: 40px;
  font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--white);
}
.pdp-tryon .vr-tryon-entry:hover .vr-tryon-entry__label { text-decoration: underline; text-decoration-color: var(--vr-red); text-underline-offset: 5px; }

/* accordions */
.pdp-accs { border-top: 1px solid var(--line); margin-top: 6px; }
.pdp-acc { border-bottom: 1px solid var(--line); }
.pdp-acc__sum {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 54px; cursor: pointer; list-style: none;
  font-size: 0.75rem; font-weight: var(--w-bold); letter-spacing: 0.16em; text-transform: uppercase;
}
.pdp-acc__sum::-webkit-details-marker { display: none; }
.pdp-acc__sum:hover { color: var(--bone); }
.pdp-acc__icon { position: relative; width: 12px; height: 12px; flex: none; }
.pdp-acc__icon::before, .pdp-acc__icon::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: currentColor;
  transition: transform var(--dur) var(--ease);
}
.pdp-acc__icon::after { transform: rotate(90deg); }
.pdp-acc[open] .pdp-acc__icon::after { transform: rotate(0deg); }
.pdp-acc__body { padding: 0 0 20px; display: grid; gap: 10px; font-size: 0.875rem; color: var(--bone); line-height: 1.6; }
.pdp-acc__body a { color: var(--white); }
.pdp-dl { margin: 0; display: grid; gap: 0; }
.pdp-dl__row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.pdp-dl__row:first-child { border-top: 0; padding-top: 0; }
.pdp-dl dt { font-size: 0.6875rem; font-weight: var(--w-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.pdp-dl dd { margin: 0; color: var(--bone); }

/* size guide modal */
.pdp-guide { display: grid; gap: 16px; }
.pdp-guide__product { font-size: 1.125rem; font-weight: var(--w-black); font-stretch: var(--stretch-display); text-transform: uppercase; line-height: 1; }
.pdp-guide__text { font-size: 0.875rem; color: var(--bone); }
.pdp-guide__links { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-guide .pdp-dl__row:first-child { border-top: 1px solid var(--line); padding-top: 10px; }

/* ------------------------------------------------------------------ below the fold */
.pdp-ctl { border-top: 1px solid var(--line); }
.pdp-looks { padding-top: 0; }
@media (min-width: 1200px) {
  .pdp-ctl__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ mobile sticky bar */
.pdp-bar { display: none; }
@media (max-width: 900px) {
  .pdp-bar:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
    display: flex; align-items: center; gap: 12px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, 0.94); border-top: 1px solid var(--line);
    transform: translateY(100%); transition: transform var(--dur) var(--ease);
  }
  .pdp-bar.is-visible { transform: none; }
  .pdp-bar__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .pdp-bar__name { font-size: 0.75rem; font-weight: var(--w-heavy); font-stretch: 112%; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pdp-bar__meta { font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pdp-bar__btn { flex: none; min-height: 46px; }
  body.page-product .vr-footer { padding-bottom: 72px; }
}
.pdp-mode--notify .vr-form-status:empty { display: none; }

/* pack-only colour: no single purchase, one big button per pack */
.pdp-packonly { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line-strong); background: var(--ink-800); }
.pdp-packonly[hidden] { display: none; }
.pdp-packonly__title { font-weight: var(--w-heavy); font-stretch: var(--stretch-title); text-transform: uppercase; font-size: 1.125rem; letter-spacing: 0.02em; }
.pdp-packonly__text { color: var(--bone); font-size: 0.875rem; line-height: 1.5; }
.pdp-packonly__btns { display: grid; gap: 10px; margin-top: 4px; }

/* pack builder: a photo of the chosen tee in every slot (placeholder = slot number) */
.pdp-slot { grid-template-columns: 64px minmax(0, 1fr) 96px; align-items: center; }
.pdp-slot__thumb { position: relative; width: 64px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-800); border: 1px dashed rgba(255, 255, 255, 0.22); display: grid; place-items: center; }
.pdp-slot__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--wall); }
.pdp-slot__thumb img[hidden] { display: none; }
.pdp-slot__thumb-n { font-weight: var(--w-black); font-stretch: var(--stretch-display); font-size: 1.25rem; color: var(--muted-2); }
.pdp-slot.has-thumb .pdp-slot__thumb { border-style: solid; border-color: var(--line); }
@media (max-width: 380px) { .pdp-slot { grid-template-columns: 56px minmax(0, 1fr); } .pdp-slot__thumb { width: 56px; grid-row: span 2; } }
.pdp-packonly__per { margin: -2px 0 6px; font-size: 0.75rem; color: var(--muted); text-align: center; letter-spacing: 0.04em; }
.pdp-packonly__per b { color: var(--white); text-transform: uppercase; letter-spacing: 0.12em; }

/* packs: carousel of every tee in the pack (front + back) under the pack photos */
.pdp-inpack { display: grid; gap: 12px; padding: 18px var(--gutter) 6px; border-top: 1px solid var(--line); }
.pdp-inpack__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pdp-inpack__title { font-size: 0.8125rem; font-weight: var(--w-heavy); letter-spacing: 0.14em; text-transform: uppercase; }
.pdp-inpack__title span { margin-left: 8px; font-weight: var(--w-medium); letter-spacing: 0.04em; text-transform: none; color: var(--muted); }
.pdp-inpack__nav { display: flex; gap: 6px; }
.pdp-inpack__track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(132px, 38vw, 180px); gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.pdp-inpack__track::-webkit-scrollbar { display: none; }
.pdp-inpack__tile { scroll-snap-align: start; display: grid; gap: 8px; }
.pdp-inpack__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--wall); }
.pdp-inpack__media > picture { position: absolute; inset: 0; }
.pdp-inpack__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.pdp-inpack__tile:hover .pdp-inpack__media img { transform: scale(1.04); }
.pdp-inpack__label { display: flex; align-items: center; gap: 7px; font-size: 0.75rem; font-weight: var(--w-bold); letter-spacing: 0.06em; text-transform: uppercase; }
.pdp-inpack__label small { margin-left: auto; font-weight: var(--w-medium); color: var(--muted); letter-spacing: 0.04em; }
.pdp-inpack__dot { width: 10px; height: 10px; flex: none; background: var(--sw); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; }
@media (min-width: 901px) { .pdp-inpack { padding: 22px 6px 10px; } }
.pdp-gallery__stage { position: relative; }

/* 60-looks.css */
/* Vision Rebel — LOOKS pages: /shop-the-look/ · /footwear/ · /limited/ · /try-it-on/
   + set builder (.vr-set) + TRY IT ON ME entry (.vr-tryon-entry).
   Master language: black canvas, hard edges, condensed campaign titles, extended heavy
   names, tracked light taglines, thin outline buttons with →, red only for key moments. */

/* ===================================================================
   Campaign header (.vr-lk-hero) — shared by the four pages
   =================================================================== */
.vr-lk-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-areas: "media" "content";
  background: var(--black); color: var(--white);
}
.vr-lk-hero__media { grid-area: media; position: relative; min-width: 0; }
.vr-lk-hero__content { grid-area: content; position: relative; z-index: 2; display: flex; align-items: center; min-width: 0; }
.vr-lk-hero__inner { width: 100%; padding: 28px var(--gutter) 44px; display: flex; flex-direction: column; align-items: flex-start; }
.vr-lk-hero__chip { margin-bottom: 14px; }
.vr-lk-hero__eyebrow {
  margin-bottom: 12px;
  font-size: 0.6875rem; font-weight: var(--w-semibold); letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--vr-red);
}
.vr-lk-hero__title {
  display: flex; flex-direction: column;
  font-size: clamp(3rem, 15vw, 4.5rem); font-weight: var(--w-bold); font-stretch: var(--stretch-condensed);
  line-height: 0.9; letter-spacing: 0; text-transform: uppercase;
}
.vr-lk-hero__line.is-accent { color: var(--vr-red); }
.vr-lk-hero__tagline {
  margin-top: 16px;
  font-size: 0.875rem; font-weight: var(--w-light); letter-spacing: var(--track-wider); word-spacing: 0.08em;
  line-height: 1.55; text-transform: uppercase;
}
.vr-lk-hero__text { margin-top: 14px; max-width: 44ch; color: var(--bone); font-size: var(--fs-base); }
.vr-lk-hero__actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 14px; }

/* Photo header (shop the look): image fills, copy sits on it (mobile: bottom, desktop: right) */
/* mobile: image, then the copy overlapping its scrimmed bottom edge */
.vr-lk-hero--looks .vr-lk-hero__media { aspect-ratio: 5 / 4; width: 100%; }
.vr-lk-hero--looks .vr-lk-hero__content { margin-top: -72px; }
.vr-lk-hero--looks .vr-lk-hero__media > picture { position: absolute; inset: 0; }
.vr-lk-hero--looks .vr-lk-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 22%; }
.vr-lk-hero--looks .vr-lk-hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 34%, rgba(0, 0, 0, 0) 62%);
}
.vr-lk-hero--looks .vr-lk-hero__content { align-items: flex-end; }

@media (min-width: 1024px) {
  .vr-lk-hero__inner { padding: calc(40 * var(--uw)) calc(56 * var(--uw)); }
  .vr-lk-hero__title { font-size: calc(78 * var(--uw)); }
  .vr-lk-hero__tagline { margin-top: calc(16 * var(--uw)); font-size: calc(14 * var(--uw)); line-height: calc(21 * var(--uw)); }
  .vr-lk-hero__text { margin-top: calc(14 * var(--uw)); font-size: max(15px, calc(14 * var(--uw))); }
  .vr-lk-hero__actions { margin-top: calc(24 * var(--uw)); }
  .vr-lk-hero__eyebrow { font-size: max(11px, calc(10.5 * var(--uw))); }

  .vr-lk-hero--looks { grid-template-areas: "stack"; }
  .vr-lk-hero--looks .vr-lk-hero__media, .vr-lk-hero--looks .vr-lk-hero__content { grid-area: stack; }
  .vr-lk-hero--looks .vr-lk-hero__content { margin-top: 0; }
  .vr-lk-hero--looks .vr-lk-hero__media { aspect-ratio: auto; height: clamp(440px, calc(470 * var(--uw)), 760px); }
  .vr-lk-hero--looks .vr-lk-hero__media::after {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.5) 34%, rgba(0, 0, 0, 0) 58%);
  }
  .vr-lk-hero--looks .vr-lk-hero__content { justify-content: flex-end; align-items: center; }
  .vr-lk-hero--looks .vr-lk-hero__inner { width: auto; min-width: 38%; padding-right: calc(64 * var(--uw)); }

  /* split headers: copy left, art right */
  .vr-lk-hero--footwear, .vr-lk-hero--limited, .vr-lk-hero--tryon {
    grid-template-areas: "content media"; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    min-height: clamp(420px, calc(440 * var(--uw)), 720px);
  }
}

/* ===================================================================
   Shop the look — filter / index bar
   =================================================================== */
.vr-lk-bar {
  position: sticky; top: var(--header-h); z-index: 40;
  background: var(--black); border-block: 1px solid var(--line);
}
.vr-lk-bar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 32px; }
.vr-lk-filter { display: flex; gap: 22px; }
.vr-lk-filter__btn {
  position: relative; min-height: 52px; padding: 0;
  font-size: 0.75rem; font-weight: var(--w-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  transition: color var(--dur) var(--ease);
}
.vr-lk-filter__btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--vr-red);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
}
.vr-lk-filter__btn:hover { color: var(--white); }
.vr-lk-filter__btn[aria-pressed="true"] { color: var(--white); }
.vr-lk-filter__btn[aria-pressed="true"]::after { transform: scaleX(1); }
.vr-lk-filter__count { margin-left: 4px; color: var(--muted-2); font-weight: var(--w-semibold); }
.vr-lk-index { display: none; }
@media (min-width: 1200px) {
  .vr-lk-index { display: block; }
  .vr-lk-index__list { display: flex; gap: 24px; }
  .vr-lk-index__link {
    display: inline-flex; gap: 6px; padding: 16px 0;
    font-size: 0.6875rem; font-weight: var(--w-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  }
  .vr-lk-index__link:hover { color: var(--white); }
  .vr-lk-index__num { color: var(--vr-red); }
}

/* ===================================================================
   Shop the look — look article
   =================================================================== */
.vr-lk-looks { background: var(--black); }
.vr-lk-empty { padding: 64px var(--gutter); color: var(--bone); }
.vr-lk-look { display: grid; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 54px); }
.vr-lk-look__media { position: relative; }
.vr-lk-look__badge { position: absolute; top: 14px; left: 14px; z-index: 2; pointer-events: none; }
.vr-lk-look__badge span {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  background: var(--vr-red); color: var(--white);
  font-size: 0.625rem; font-weight: var(--w-bold); letter-spacing: 0.14em; text-transform: uppercase;
}

/* Editorial collage: hard edges, 3px black gaps, photo leads, concept renderings follow */
.vr-lk-comp {
  position: relative; display: grid; gap: 3px; background: var(--black);
  aspect-ratio: 6 / 5; grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); grid-template-rows: 1fr 1fr;
}
.vr-lk-comp--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.vr-lk-comp--2 { grid-template-rows: 1fr; }
.vr-lk-comp--3 .vr-lk-comp__cell--1 { grid-row: 1 / span 2; }
.vr-lk-comp--image > picture { position: absolute; inset: 0; }
.vr-lk-comp--image img { width: 100%; height: 100%; object-fit: cover; }
.vr-lk-comp__cell { position: relative; overflow: hidden; background: var(--wall); }
.vr-lk-comp__cell > picture { position: absolute; inset: 0; }
.vr-lk-comp__cell img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform 500ms var(--ease); }
.vr-lk-comp__cell.is-illu {
  display: grid; place-items: center;
  background: var(--wall);
}
.vr-lk-comp__cell.is-illu > svg { width: 84%; height: 84%; transition: transform 500ms var(--ease); }
.vr-lk-comp__tag {
  position: absolute; left: 12px; bottom: 10px;
  font-size: 0.625rem; font-weight: var(--w-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
@media (hover: hover) {
  .vr-lk-look:hover .vr-lk-comp__cell img, .vr-lk-look:hover .vr-lk-comp__cell.is-illu > svg { transform: scale(1.03); }
}

.vr-lk-look__panel { padding: 28px var(--gutter) 48px; display: flex; flex-direction: column; min-width: 0; }
.vr-lk-look__eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-size: 0.6875rem; font-weight: var(--w-semibold); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--muted);
}
.vr-lk-look__num { color: var(--vr-red); font-weight: var(--w-bold); }
.vr-lk-look__title {
  margin-top: 10px;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem); font-weight: var(--w-black); font-stretch: 115%;
  line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase;
}
.vr-lk-look__dots { display: flex; gap: 5px; margin-top: 14px; }
.vr-lk-look__note { margin-top: 12px; color: var(--bone); max-width: 52ch; }
.vr-lk-look__pieces { margin-top: 24px; border-top: 1px solid var(--line); }

.vr-lk-piece {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.vr-lk-piece__thumb { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-800); }
.vr-lk-piece__thumb > picture, .vr-lk-piece__thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vr-lk-piece__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.vr-lk-piece__thumb > img[src$=".svg"] { object-fit: contain; padding: 8%; background: radial-gradient(100% 80% at 50% 45%, #1d1d1d 0%, #0a0a0a 75%); }
.vr-lk-piece__info { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.vr-lk-piece__name { font-size: 0.875rem; font-weight: var(--w-bold); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.25; }
.vr-lk-piece__name a:hover { text-decoration: underline; text-decoration-color: var(--vr-red); text-underline-offset: 4px; }
.vr-lk-piece__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.8125rem; color: var(--muted); }
.vr-lk-piece__chip .vr-price { color: var(--white); }
.vr-lk-piece.is-excluded .vr-lk-piece__thumb { opacity: 0.88; }
.vr-lk-piece__size { margin-top: 4px; }
.vr-lk-piece__select, .vr-lk-piece__select.vr-select {
  width: 140px; min-height: 42px; padding: 0 36px 0 12px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  font-size: 0.875rem; font-weight: var(--w-semibold); letter-spacing: 0.04em;
  background: var(--ink-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 10px center / 14px no-repeat;
}
.vr-lk-piece__select[aria-invalid="true"] { border-color: var(--vr-red); }
.vr-lk-piece__pack { font-size: 0.8125rem; color: var(--bone); }
.vr-lk-piece__pack-link { text-decoration: underline; text-decoration-color: var(--vr-red); text-underline-offset: 3px; }

.vr-lk-notify { display: grid; gap: 10px; width: 100%; margin-top: 4px; }
.vr-lk-notify__toggle { justify-self: start; }
.vr-lk-notify.is-open .vr-lk-notify__toggle { background: var(--white); color: var(--black); --arrow: #000; border-color: var(--white); }
.vr-lk-notify__panel .vr-field--inline .vr-input { min-height: 44px; }
.vr-lk-notify__panel .vr-field--inline .vr-btn { min-height: 44px; }

.vr-lk-look__buy { margin-top: 24px; display: grid; gap: 12px; }
.vr-lk-look__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 0.75rem; font-weight: var(--w-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone);
}
.vr-lk-look__sum .vr-price { font-size: 1.125rem; letter-spacing: 0; }
.vr-lk-look__hint { font-size: 0.8125rem; color: var(--muted); }
.vr-lk-look__result:empty { display: none; }
.vr-lk-look__result { padding: 12px 14px; border: 1px solid var(--line); font-size: 0.8125rem; color: var(--bone); }
.vr-lk-look__result.is-error { border-color: var(--vr-red); }
.vr-lk-look__result li { display: flex; gap: 10px; padding: 3px 0; }
.vr-lk-look__result-mark { flex: none; min-width: 72px; font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.7; }
.vr-lk-look__result .is-ok .vr-lk-look__result-mark { color: var(--white); }
.vr-lk-look__result .is-ko .vr-lk-look__result-mark { color: var(--vr-red); }

@media (min-width: 768px) {
  .vr-lk-comp { aspect-ratio: 13 / 10; }
  .vr-lk-piece { grid-template-columns: 88px minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .vr-lk-look { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
  .vr-lk-look--flip .vr-lk-look__media { order: 2; }
  .vr-lk-look__media .vr-lk-comp { height: 100%; min-height: calc(560 * var(--uw)); aspect-ratio: auto; }
  .vr-lk-look__badge { top: 20px; left: 20px; }
  .vr-lk-look__panel { padding: calc(56 * var(--uw)) calc(56 * var(--uw)) calc(56 * var(--uw)); justify-content: center; }
  .vr-lk-look--flip .vr-lk-look__panel { padding-left: var(--gutter); }
}

/* Keep exploring */
.vr-lk-more__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.vr-lk-more__title { font-size: var(--fs-xl); font-weight: var(--w-heavy); font-stretch: 115%; text-transform: uppercase; line-height: 1; }
.vr-lk-more__links { display: flex; flex-wrap: wrap; gap: 10px; }

/* ===================================================================
   Set builder (.vr-set)
   =================================================================== */
.vr-lk-set-wrap { border-bottom: 1px solid var(--line); }
.vr-set { display: grid; background: var(--black); scroll-margin-top: calc(var(--header-h) + 54px); }
.vr-set__stage {
  position: relative; overflow: hidden; aspect-ratio: 1 / 1;
  background:
    radial-gradient(48% 32% at 50% 30%, var(--glow-top, transparent) 0%, transparent 100%),
    radial-gradient(52% 38% at 50% 72%, var(--glow-bottom, transparent) 0%, transparent 100%),
    radial-gradient(100% 80% at 50% 45%, #1d1d1d 0%, #070707 78%);
  transition: background var(--dur) var(--ease);
}
.vr-set__slot { position: absolute; left: 50%; transform: translateX(-50%); display: grid; place-items: center; }
.vr-set__slot > svg, .vr-set__slot > img, .vr-set__slot > picture { width: 100%; height: 100%; }
.vr-set__slot img { object-fit: contain; }
.vr-set__slot--top { top: 1%; height: 50%; aspect-ratio: 4 / 5; z-index: 2; }
.vr-set__slot--bottom { top: 34%; height: 66%; aspect-ratio: 4 / 5; z-index: 1; }
.vr-set__concept {
  position: absolute; left: 14px; bottom: 12px; z-index: 3;
  font-size: 0.625rem; font-weight: var(--w-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
/* Photo mode: the two full-figure photos (same pose) are stacked; the top piece's photo only
   shows above the midriff seam, the backdrop fades into the stage at the sides. */
.vr-set__stage--photo { aspect-ratio: 4 / 5; background: #4a4946; }   /* concrete tone of the figure photos edges */
@media (min-width: 768px) { .vr-set__stage--photo { aspect-ratio: 5 / 4; } }
.vr-set__figure {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  height: 100%; aspect-ratio: 4 / 5;
}
/* full-figure photos on the concrete wall, head to shoes */
.vr-set__stage--photo .vr-set__figure { top: 0; bottom: auto; height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.vr-set__stage--photo .vr-set__slot { inset: 0; transform: none; height: 100%; width: 100%; aspect-ratio: auto; }
.vr-set__stage--photo .vr-set__slot img { object-fit: cover; }
.vr-set__stage--photo .vr-set__slot--bottom { z-index: 1; }
.vr-set__stage--photo .vr-set__slot--top {
  z-index: 2; --seam: 37.3%;   /* middle of the bare midriff band (34.1-40.5 %) on all five F2 fronts */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--seam) - 1.8%), transparent calc(var(--seam) + 1.8%));
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--seam) - 1.8%), transparent calc(var(--seam) + 1.8%));
}
.vr-set__panel { padding: 28px var(--gutter) 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.vr-set__title {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem); font-weight: var(--w-black); font-stretch: 115%;
  line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase;
}
.vr-set__intro { color: var(--bone); max-width: 46ch; }
.vr-set__label {
  margin-top: 8px;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight: var(--w-bold); font-stretch: var(--stretch-condensed);
  line-height: 1; text-transform: uppercase;
}
.vr-set__pickers { display: grid; gap: 18px; width: 100%; margin-top: 8px; padding-block: 18px; border-block: 1px solid var(--line); }
.vr-set__picker-head { display: flex; gap: 12px; align-items: baseline; margin-bottom: 6px; }
.vr-set__picker-kind { font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); min-width: 72px; }
.vr-set__picker-color { font-size: 0.875rem; font-weight: var(--w-semibold); text-transform: uppercase; letter-spacing: 0.06em; }
.vr-set__swatches { margin-left: -4px; }
.vr-set__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.vr-set__wish .vr-icon { width: 16px; height: 16px; }
.vr-set__wish[aria-pressed="true"] .vr-icon { color: var(--vr-red); fill: var(--vr-red); }
.vr-set__wish[aria-pressed="true"]:hover .vr-icon { color: var(--vr-red); }
.vr-set__notify { width: 100%; max-width: 480px; display: grid; gap: 8px; margin-top: 4px; }
.vr-set__notify-title { font-size: 0.75rem; font-weight: var(--w-bold); letter-spacing: 0.12em; text-transform: uppercase; }
.vr-set__links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 4px; }
@media (min-width: 768px) {
  .vr-set__stage { aspect-ratio: 5 / 4; }
}
@media (min-width: 1024px) {
  .vr-set { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .vr-set__stage { aspect-ratio: auto; min-height: calc(600 * var(--uw)); }
  .vr-set__panel { padding: calc(56 * var(--uw)); justify-content: center; }
}

/* ===================================================================
   Footwear
   =================================================================== */
.vr-lk-hero--footwear {
  background: radial-gradient(70% 70% at 78% 62%, rgba(236, 5, 35, 0.22) 0%, rgba(236, 5, 35, 0) 62%), var(--black);
}
.vr-lk-hero--footwear .vr-lk-hero__media { display: grid; place-items: center; padding: 24px var(--gutter) 0; }
.vr-fw-hero__art { width: min(100%, 560px); }
.vr-fw-hero__art svg { width: 100%; height: auto; }
@media (min-width: 1024px) {
  .vr-lk-hero--footwear .vr-lk-hero__media { padding: calc(32 * var(--uw)) calc(48 * var(--uw)) calc(32 * var(--uw)) 0; }
  .vr-fw-hero__art { width: 100%; max-width: 860px; }
}

.vr-fw { background: var(--black); }
.vr-fw__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: 28px; }
.vr-fw__title {
  margin-top: 10px;
  font-size: var(--fs-3xl); font-weight: var(--w-black); font-stretch: var(--stretch-display);
  line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase;
}
.vr-fw__note { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.06em; }
.vr-fw__grid { display: grid; gap: 28px 8px; grid-template-columns: minmax(0, 1fr); }
.vr-fw-card { min-width: 0; scroll-margin-top: calc(var(--header-h) + 16px); }
.vr-fw-card__inner { display: flex; flex-direction: column; height: 100%; }
.vr-fw-card__media {
  position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 4 / 3;
  background:
    radial-gradient(52% 30% at 50% 74%, color-mix(in srgb, var(--glow, #888) 34%, transparent) 0%, transparent 100%),
    radial-gradient(100% 80% at 50% 45%, #1e1e1e 0%, #090909 76%);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.vr-fw-card__media > svg { width: 82%; height: auto; transition: transform 400ms var(--ease); }
@media (hover: hover) { .vr-fw-card:hover .vr-fw-card__media > svg { transform: translateY(-4px) scale(1.02); } }
.vr-fw-card__chip { position: absolute; top: 14px; left: 14px; }
.vr-fw-card__wish { top: 6px; right: 6px; }
.vr-fw-card__body { display: grid; gap: 6px; justify-items: start; padding-top: 14px; }
.vr-fw-card__index { font-size: 0.6875rem; font-weight: var(--w-semibold); letter-spacing: var(--track-wide); color: var(--muted); }
.vr-fw-card__name {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.25rem; font-weight: var(--w-heavy); font-stretch: 112%; line-height: 1.1; text-transform: uppercase;
}
.vr-fw-card__name .vr-dot { width: 12px; height: 12px; }
.vr-fw-card__product { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.vr-fw-card__product-link:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--vr-red); text-underline-offset: 3px; }
.vr-fw-card__cta { width: 100%; max-width: 440px; margin-top: 6px; }
@media (min-width: 700px) {
  .vr-fw__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vr-fw-card:first-child { grid-column: 1 / -1; }
  .vr-fw-card:first-child .vr-fw-card__media { aspect-ratio: 16 / 8; }
  .vr-fw-card:first-child .vr-fw-card__media > svg { width: 56%; }
}
@media (min-width: 1024px) {
  .vr-fw__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 40px 8px; }
  .vr-fw-card--lg { grid-column: span 3; }
  .vr-fw-card--md { grid-column: span 2; }
  .vr-fw-card:first-child { grid-column: span 3; }
  .vr-fw-card--lg .vr-fw-card__media, .vr-fw-card:first-child .vr-fw-card__media { aspect-ratio: 16 / 10; }
  .vr-fw-card--lg .vr-fw-card__media > svg, .vr-fw-card:first-child .vr-fw-card__media > svg { width: 72%; }
  .vr-fw-card--md .vr-fw-card__media { aspect-ratio: 1 / 1; }
  .vr-fw-card--md .vr-fw-card__media > svg { width: 88%; }
  .vr-fw-card--lg .vr-fw-card__name { font-size: 1.625rem; }
  .vr-fw__head { margin-bottom: 40px; }
}

.vr-fw-facts { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ink-900); }
.vr-fw-facts__inner { display: grid; gap: 20px; padding-block: 48px; }
.vr-fw-facts__title { font-size: var(--fs-xl); font-weight: var(--w-heavy); font-stretch: 115%; text-transform: uppercase; line-height: 1; }
.vr-fw-facts__list li { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.vr-fw-facts__list li:first-child { border-top: 1px solid var(--line); }
.vr-fw-facts__k { font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.vr-fw-facts__v { color: var(--bone); }
@media (min-width: 900px) {
  .vr-fw-facts__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; padding-block: 72px; }
  .vr-fw-facts__list li { grid-template-columns: 160px 1fr; gap: 24px; }
}

.vr-fw-styled__list { border-top: 1px solid var(--line); }
.vr-fw-styled__item { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.vr-fw-styled__link { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 18px 0; --arrow: #fff; }
.vr-fw-styled__name { font-size: 1.125rem; font-weight: var(--w-heavy); font-stretch: 112%; text-transform: uppercase; }
.vr-fw-styled__meta { font-size: 0.8125rem; color: var(--muted); flex: 1; }
.vr-fw-styled__link .vr-btn__arrow { align-self: center; }
.vr-fw-styled__link:hover .vr-fw-styled__name { text-decoration: underline; text-decoration-color: var(--vr-red); text-underline-offset: 5px; }
.vr-fw-styled__cta { margin-top: 28px; }

/* ===================================================================
   Limited / Charity
   =================================================================== */
.vr-lk-hero--limited {
  background: linear-gradient(90deg, #080706 0%, #0b0606 38%, #3a0306 58%, #a2010e 78%, var(--vr-red-banner) 100%);
}
.vr-lk-hero--limited .vr-lk-hero__media:empty { display: none; }
.vr-lk-hero--limited { grid-template-areas: "content"; }
.vr-lk-hero--limited .vr-lk-hero__line.is-accent { color: var(--white); -webkit-text-stroke: 0; }
.vr-lk-hero--limited .vr-lk-hero__eyebrow { color: var(--white); }
.vr-lk-hero--limited .vr-lk-hero__inner { padding-block: 56px 64px; }
@media (min-width: 1024px) {
  .vr-lk-hero--limited { grid-template-areas: "content"; grid-template-columns: 1fr; min-height: clamp(360px, calc(340 * var(--uw)), 560px); }
  .vr-lk-hero--limited .vr-lk-hero__inner { padding: calc(48 * var(--uw)) var(--gutter); }
  .vr-lk-hero--limited .vr-lk-hero__title { font-size: calc(96 * var(--uw)); }
}

.vr-lim-drop { display: grid; border-bottom: 1px solid var(--line); scroll-margin-top: var(--header-h); }
.vr-lim-drop__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--ink-800); }
.vr-lim-drop__media > picture { position: absolute; inset: 0; }
.vr-lim-drop__media img { width: 100%; height: 100%; object-fit: cover; }
.vr-lim-drop__body { padding: 32px var(--gutter) 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.vr-lim-drop__eyebrow {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: 0.6875rem; font-weight: var(--w-semibold); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--muted);
}
.vr-lim-drop__eyebrow span:first-child { color: var(--vr-red); font-weight: var(--w-bold); }
.vr-lim-drop__title {
  font-size: clamp(2.75rem, 1.6rem + 5vw, 5.5rem); font-weight: var(--w-black); font-stretch: var(--stretch-display);
  line-height: 0.92; letter-spacing: 0.02em; text-transform: uppercase;
}
.vr-lim-drop__copy { max-width: 42ch; font-size: var(--fs-md); color: var(--bone); }
.vr-lim-drop__message { max-width: 52ch; color: var(--bone); }
.vr-lim-drop__facts { display: grid; gap: 0; width: 100%; max-width: 480px; border-top: 1px solid var(--line); }
.vr-lim-drop__fact { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.vr-lim-drop__fact dt { font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.vr-lim-drop__fact dd { margin: 0; color: var(--white); font-weight: var(--w-semibold); }
.vr-lim-drop__notify { width: 100%; max-width: 480px; margin-top: 8px; }
.vr-lim-drop__products { grid-column: 1 / -1; padding: 0 var(--gutter) 48px; }
@media (min-width: 900px) {
  .vr-lim-drop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .vr-lim-drop--flip .vr-lim-drop__media { order: 2; }
  .vr-lim-drop__body { padding: 64px clamp(32px, 6vw, 96px); gap: 18px; }
}

.vr-lim-how__list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.vr-lim-how__step { display: grid; gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.vr-lim-how__num {
  font-size: 2.5rem; font-weight: var(--w-bold); font-stretch: var(--stretch-condensed); line-height: 1; color: var(--vr-red);
}
.vr-lim-how__title { font-size: 1rem; font-weight: var(--w-heavy); font-stretch: 112%; letter-spacing: 0.02em; text-transform: uppercase; }
.vr-lim-how__text { color: var(--bone); max-width: 42ch; }
.vr-lim-how__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
@media (min-width: 900px) {
  .vr-lim-how__list { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; gap: 8px; }
  .vr-lim-how__step { padding: 28px 28px 32px 0; border-bottom: 0; border-top: 1px solid var(--line-strong); }
  .vr-lim-how__num { font-size: 3.5rem; }
}

/* ===================================================================
   TRY IT ON ME
   =================================================================== */
.vr-lk-hero--tryon {
  background: radial-gradient(60% 70% at 80% 50%, rgba(236, 5, 35, 0.16) 0%, rgba(236, 5, 35, 0) 60%), var(--black);
}
.vr-tio-hero__art { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 var(--gutter); }
.vr-lk-hero--tryon .vr-lk-hero__media { padding-top: 16px; }
.vr-tio-hero__frame { position: relative; aspect-ratio: 498 / 726; overflow: hidden; background: var(--ink-800); }
.vr-tio-hero__frame > picture { position: absolute; inset: 0; }
.vr-tio-hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.vr-tio-hero__corners {
  position: absolute; inset: 7%; pointer-events: none;
  --c: var(--vr-red); --l: 26px; --t: 2px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) left top / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--t) var(--l) no-repeat;
}
@media (min-width: 1024px) {
  .vr-lk-hero--tryon .vr-lk-hero__media { display: flex; align-items: center; padding: calc(36 * var(--uw)) var(--gutter) calc(36 * var(--uw)) 0; }
  .vr-tio-hero__art { width: 100%; max-width: 760px; margin-left: auto; padding: 0; gap: calc(6 * var(--uw)); }
}

.vr-tio-access { border-block: 1px solid var(--line); background: var(--ink-900); scroll-margin-top: var(--header-h); }
.vr-tio-access__inner { display: grid; gap: 24px; padding-block: 48px; }
.vr-tio-access__intro { display: grid; gap: 10px; }
.vr-tio-access__title {
  font-size: var(--fs-2xl); font-weight: var(--w-black); font-stretch: var(--stretch-display); line-height: 1; text-transform: uppercase;
}
.vr-tio-access__text { color: var(--bone); max-width: 46ch; }
.vr-tio-access__privacy { margin-top: 4px; font-size: 0.75rem; color: var(--muted); }
.vr-tio-access__privacy a { color: var(--bone); }
@media (min-width: 900px) {
  .vr-tio-access__inner { grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; padding-block: 72px; }
}

/* ===================================================================
   TRY IT ON ME entry (PDP and any product context)
   =================================================================== */
.vr-tryon-entry {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 40px; padding: 0 6px 0 14px;
  border: 1px solid var(--line-strong); color: var(--white); --arrow: #fff;
  font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: 0.12em; text-transform: uppercase;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.vr-tryon-entry:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.06); }
.vr-tryon-entry.is-live { padding-right: 14px; }
.vr-tryon-entry__chip.vr-status { height: 20px; padding: 0 7px; font-size: 0.5625rem; }

/* Footwear photos (grey product backdrop, the pair centred in a 4:5 frame): fill the landscape frames */
.vr-fw-card__media > picture { position: absolute; inset: 0; }
.vr-fw-card__media > picture img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform 400ms var(--ease); }
@media (hover: hover) { .vr-fw-card:hover .vr-fw-card__media > picture img { transform: scale(1.03); } }
.vr-fw-hero__art > picture { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.vr-fw-hero__art > picture img { width: 100%; height: 100%; object-fit: cover; }

/* 70-commerce.css */
/* Vision Rebel — commerce pages (COMMERCE owns this file):
   /cart/ /checkout/ /checkout/success/ /account/ /wishlist/
   Same language as the master: black canvas, extended heavy caps headings,
   hairlines, hard edges, red only for the primary CTA / errors / key labels. */

.cm { padding-top: var(--s-6); padding-bottom: var(--s-9); min-height: 60vh; }
@media (min-width: 1024px) { .cm { padding-top: var(--s-8); } }

/* ---------------------------------------------------------------- page head */
.cm-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-6);
  padding-bottom: var(--s-5); margin-bottom: var(--s-6); border-bottom: 1px solid var(--line);
}
.cm-head__text { display: grid; gap: 10px; min-width: 0; }
.cm-head__title {
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem); font-weight: var(--w-black); font-stretch: var(--stretch-display);
  text-transform: uppercase; line-height: 0.92; letter-spacing: 0.01em; overflow-wrap: anywhere;
}
.cm-head__count { color: var(--muted); font-weight: var(--w-semibold); font-stretch: 100%; font-size: 0.4em; letter-spacing: 0.06em; vertical-align: 0.6em; }
.cm-head__link { margin-bottom: 4px; }
.cm-state > .cm-head { margin-bottom: var(--s-5); }

.cm-lead { color: var(--bone); font-size: var(--fs-md); max-width: 60ch; }
.cm-k { color: var(--muted); font-size: 0.6875rem; font-weight: var(--w-semibold); letter-spacing: 0.12em; text-transform: uppercase; margin-right: 4px; }
.cm-optional { color: var(--muted); font-weight: var(--w-regular); letter-spacing: 0.04em; text-transform: none; }
.cm-hint { font-size: 0.75rem; color: var(--muted); }
.cm-hint a { color: var(--bone); }

/* notices + errors */
.cm-notice {
  margin-bottom: var(--s-5); padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--white);
  font-size: 0.875rem; color: var(--bone); background: var(--ink-800);
}
.cm-notice.is-error { border-left-color: var(--vr-red); }
.cm-error { padding: 12px 14px; border: 1px solid var(--vr-red); color: var(--white); font-size: 0.875rem; background: rgba(236, 5, 35, 0.08); }
.cm-error:focus { outline: none; }
.cm-error p + p { margin-top: 4px; }

/* loading line */
.cm-loading { display: grid; gap: 12px; max-width: 320px; padding-block: var(--s-6); font-size: 0.6875rem; font-weight: var(--w-semibold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.cm-loading__bar { display: block; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.cm-loading__bar::after { content: ""; position: absolute; inset: 0; width: 30%; background: var(--vr-red); animation: cm-load 1.1s var(--ease) infinite; }
@keyframes cm-load { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* text button (remove / resend) */
.cm-textbtn {
  min-height: 32px; font-size: 0.6875rem; font-weight: var(--w-semibold); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.cm-textbtn:hover { color: var(--white); text-decoration-color: var(--vr-red); }
.cm-textbtn:disabled { opacity: 0.5; cursor: default; }

.cm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-5); }

/* ---------------------------------------------------------------- two-column layout */
.cm-layout { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1024px) {
  .cm-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: var(--s-8); }
  .cm-summary { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* ---------------------------------------------------------------- bag lines */
.cm-lines-head {
  display: none; padding-bottom: 10px; border-bottom: 1px solid var(--line);
  font-size: 0.6875rem; font-weight: var(--w-semibold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.cm-line {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "media info total" "media qty qty";
  gap: 10px 16px; padding: 20px 0; border-bottom: 1px solid var(--line);
}
.cm-line__media { grid-area: media; display: block; position: relative; aspect-ratio: 4 / 5; background: var(--ink-800); overflow: hidden; align-self: start; }
.cm-line__media picture, .cm-mini__media picture { position: absolute; inset: 0; }
.cm-line__media img, .cm-mini__media img { width: 100%; height: 100%; object-fit: cover; }
.cm-line__media img.is-illustration, .cm-mini__media img.is-illustration { object-fit: contain; }
.cm-line__info { grid-area: info; display: grid; gap: 6px; align-content: start; min-width: 0; }
.cm-line__name { font-size: 0.9375rem; font-weight: var(--w-heavy); font-stretch: 112%; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.15; }
.cm-line__name a:hover { text-decoration: underline; text-decoration-color: var(--vr-red); text-underline-offset: 4px; }
.cm-line__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.8125rem; color: var(--bone); }
.cm-line__unit { font-size: 0.8125rem; color: var(--bone); }
.cm-line__warn { font-size: 0.75rem; font-weight: var(--w-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--vr-red); }
.cm-line__qty { grid-area: qty; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cm-line__total { grid-area: total; text-align: right; font-size: 0.9375rem; }
.cm-line.is-unavailable .cm-line__media { opacity: 0.5; }
.cm-qty { border-color: var(--line-strong); }
.cm-qty button { width: 40px; height: 40px; }
.cm-qty button:hover:not(:disabled) { background: var(--white); color: var(--black); }
.cm-qty output { min-width: 32px; text-align: center; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.cm-pack { display: grid; gap: 2px; margin-top: 2px; font-size: 0.8125rem; color: var(--bone); }
.cm-pack__n { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border: 1px solid var(--line); font-size: 0.625rem; color: var(--muted); }
.cm-pack__size { color: var(--muted); margin-left: 4px; }
.cm-continue { margin-top: var(--s-5); }
@media (min-width: 768px) {
  .cm-lines-head { display: grid; grid-template-columns: minmax(0, 1fr) 180px 110px; }
  .cm-lines-head span:nth-child(2) { text-align: left; }
  .cm-lines-head span:last-child { text-align: right; }
  .cm-line { grid-template-columns: 140px minmax(0, 1fr) 180px 110px; grid-template-areas: "media info qty total"; gap: 24px; padding: 28px 0; }
  .cm-lines-head { padding-left: calc(140px + 24px); grid-template-columns: minmax(0, 1fr) 180px 110px; column-gap: 24px; }
  .cm-line__qty { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; }
  .cm-line__total { font-size: 1rem; }
}

/* ---------------------------------------------------------------- summary */
.cm-summary { display: grid; gap: var(--s-4); padding: var(--s-5); background: var(--ink-800); border: 1px solid var(--line); }
@media (min-width: 1024px) { .cm-summary { padding: var(--s-6); } }
.cm-summary__title { font-size: 1.125rem; font-weight: var(--w-heavy); font-stretch: 115%; letter-spacing: 0.02em; text-transform: uppercase; }
.cm-summary__count { color: var(--muted); font-weight: var(--w-semibold); font-stretch: 100%; font-size: 0.8125rem; }
.cm-summary__cta { margin-top: 4px; }
.cm-summary__note { font-size: 0.75rem; color: var(--muted); line-height: 1.5; }
.cm-totals { display: grid; gap: 10px; margin: 0; }
.cm-totals__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 0.875rem; color: var(--bone); }
.cm-totals__row dt { font-weight: var(--w-medium); }
.cm-totals__row dd { margin: 0; text-align: right; font-weight: var(--w-semibold); color: var(--white); font-variant-numeric: tabular-nums; }
.cm-totals__row label { cursor: pointer; }
.cm-totals__sub { color: var(--muted); font-size: 0.8125rem; }
.cm-totals--grand { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.cm-totals__row--total { font-size: 1rem; color: var(--white); }
.cm-totals__row--total dt { font-weight: var(--w-heavy); font-stretch: 112%; letter-spacing: 0.06em; text-transform: uppercase; }
.cm-totals__row--total dd { font-size: 1.25rem; font-weight: var(--w-bold); }
.cm-totals__row--code dd { color: var(--vr-red); letter-spacing: 0.06em; }
.cm-select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.cm-select option { background: var(--ink-900); color: var(--white); }
.cm-select[aria-invalid="true"] { border-color: var(--vr-red); }
.cm-promo { display: grid; gap: 8px; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.cm-promo .vr-input { text-transform: uppercase; letter-spacing: 0.06em; }
.cm-promo .vr-field--inline .vr-btn { min-height: 48px; }
.cm-promo__status { margin-top: 0; min-height: 0; font-size: 0.75rem; }
.cm-promo .cm-textbtn { justify-self: start; }

/* compact lines (checkout summary, receipt) */
.cm-mini { display: grid; gap: 0; }
.cm-mini__line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cm-mini__line:first-child { padding-top: 4px; }
.cm-mini__media { position: relative; aspect-ratio: 4 / 5; background: var(--ink-700); overflow: hidden; }
.cm-mini__qty {
  position: absolute; top: 0; right: 0; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center;
  background: var(--white); color: var(--black); font-size: 0.6875rem; font-weight: var(--w-bold);
}
.cm-mini__info { display: grid; gap: 4px; align-content: start; min-width: 0; }
.cm-mini__name { font-size: 0.8125rem; font-weight: var(--w-bold); letter-spacing: 0.04em; text-transform: uppercase; }
.cm-mini__name a:hover { text-decoration: underline; text-decoration-color: var(--vr-red); text-underline-offset: 3px; }
.cm-mini .cm-line__meta, .cm-mini .cm-pack { font-size: 0.75rem; }
.cm-mini__q { font-size: 0.75rem; color: var(--muted); }
.cm-mini__total { font-size: 0.875rem; }

/* ---------------------------------------------------------------- forms (checkout, account) */
.cm-form { display: grid; gap: var(--s-6); }
.cm-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-4); min-width: 0; }
.cm-fieldset__legend {
  display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 0 0 12px; margin-bottom: var(--s-4); border-bottom: 1px solid var(--line);
  font-size: 1.125rem; font-weight: var(--w-heavy); font-stretch: 115%; letter-spacing: 0.02em; text-transform: uppercase;
}
.cm-step { color: var(--vr-red); font-size: 0.75rem; font-weight: var(--w-bold); font-stretch: 100%; letter-spacing: 0.16em; }
.cm-grid { display: grid; gap: var(--s-4); }
@media (min-width: 600px) { .cm-grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.cm-field .vr-field__error { margin-top: 2px; }
.cm-account-hint { padding: 12px 16px; border: 1px solid var(--line); font-size: 0.875rem; color: var(--bone); }
.cm-account-hint a { color: var(--white); }
.cm-pay { display: grid; gap: 12px; }
.cm-pay__note { font-size: 0.75rem; color: var(--muted); text-align: center; }
.cm-pay__btn .vr-btn__label { font-variant-numeric: tabular-nums; }

/* password with show/hide */
.cm-pw { position: relative; }
.cm-pw .vr-input { padding-right: 72px; }
.cm-pw__toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 40px; padding: 0 12px;
  font-size: 0.6875rem; font-weight: var(--w-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.cm-pw__toggle:hover { color: var(--white); }

/* ---------------------------------------------------------------- empty states */
.cm-empty { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-7) 0 var(--s-4); }
.cm-empty__title {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); font-weight: var(--w-black); font-stretch: var(--stretch-display);
  text-transform: uppercase; line-height: 0.95;
}
.cm-empty__text { color: var(--bone); font-size: var(--fs-md); max-width: 46ch; }
.cm-empty .cm-actions { margin-top: var(--s-3); }

/* ---------------------------------------------------------------- success */
.cm-success .cm-state { display: grid; gap: var(--s-4); }
.cm-success .cm-state[hidden] { display: none; }
.cm-receipt { display: grid; gap: var(--s-4); max-width: 640px; margin-top: var(--s-4); padding: var(--s-5); background: var(--ink-800); border: 1px solid var(--line); }
.cm-receipt__id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.cm-receipt__id strong { font-size: 1rem; letter-spacing: 0.06em; font-weight: var(--w-bold); overflow-wrap: anywhere; }
.cm-receipt .cm-mini:empty { display: none; }

/* ---------------------------------------------------------------- account */
.cm-auth { display: grid; gap: var(--s-6); }
@media (min-width: 900px) {
  .cm-auth { grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); }
  .cm-auth__panel { padding: var(--s-7); }
  .cm-auth__panel--create { border-left: 1px solid var(--line); background: var(--ink-900); }
  .cm-auth--single { grid-template-columns: minmax(0, 520px); border: 0; }
  .cm-auth--single .cm-auth__panel { padding: 0; }
}
.cm-auth__panel { display: grid; gap: var(--s-4); align-content: start; }
.cm-auth__panel--create { padding-top: var(--s-6); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .cm-auth__panel--create { border-top: 0; padding-top: var(--s-7); } }
.cm-auth__title { font-size: 1.375rem; font-weight: var(--w-heavy); font-stretch: 115%; text-transform: uppercase; line-height: 1; }
.cm-auth__text { color: var(--bone); font-size: 0.9375rem; }
.cm-auth__links { display: flex; gap: 20px; }
.cm-form--auth { gap: var(--s-4); }
.cm-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; }
.cm-or::before, .cm-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cm-code { font-size: 1.5rem; letter-spacing: 0.5em; font-variant-numeric: tabular-nums; text-align: center; padding-left: 0.5em; }

.cm-account__email { margin-top: calc(-1 * var(--s-3)); margin-bottom: var(--s-6); color: var(--muted); font-size: 0.9375rem; }
.cm-account__grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 1024px) { .cm-account__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-8); } }
.cm-account__side { display: grid; gap: var(--s-4); }
.cm-panel { display: grid; gap: 10px; align-content: start; padding: var(--s-5); border: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 16px); }
.cm-panel:focus { outline: none; }
.cm-panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cm-panel--orders { padding: 0; border: 0; }
.cm-panel__title { font-size: 1rem; font-weight: var(--w-heavy); font-stretch: 115%; letter-spacing: 0.02em; text-transform: uppercase; }
.cm-panel--orders .cm-panel__title { font-size: 1.375rem; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cm-panel__text { font-size: 0.875rem; color: var(--bone); }
.cm-panel__links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.cm-orders { display: grid; gap: 0; }
.cm-order { display: grid; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cm-order__head, .cm-order__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.cm-order__id { display: flex; gap: 10px; align-items: baseline; font-weight: var(--w-bold); letter-spacing: 0.04em; overflow-wrap: anywhere; }
.cm-order__status {
  font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 8px; border: 1px solid var(--line-strong);
}
.cm-order--paid .cm-order__status, .cm-order--shipped .cm-order__status { background: var(--white); color: var(--black); border-color: var(--white); }
.cm-order--cancelled .cm-order__status, .cm-order--refunded .cm-order__status { color: var(--muted); border-color: var(--line); }
.cm-order__lines { display: grid; gap: 2px; font-size: 0.875rem; color: var(--bone); }
.cm-order__size, .cm-order__qty { color: var(--muted); }
.cm-order__date { font-size: 0.8125rem; color: var(--muted); }
.cm-order__total { font-size: 1rem; }

.cm-invite { display: grid; gap: 10px; padding: var(--s-5); margin-bottom: var(--s-6); border: 1px solid var(--line); border-left: 3px solid var(--vr-red); background: var(--ink-800); }
.cm-invite__title { font-size: 1.375rem; font-weight: var(--w-heavy); font-stretch: 115%; text-transform: uppercase; line-height: 1.05; }
.cm-invite__text { color: var(--bone); max-width: 60ch; }
.cm-invite .cm-actions { margin-top: 6px; }

/* ---------------------------------------------------------------- wishlist */
.cm-wishlist__lead { margin-top: calc(-1 * var(--s-3)); margin-bottom: var(--s-6); color: var(--muted); font-size: 0.9375rem; }
.cm-wish { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cm-wish__actions { display: grid; gap: 8px; justify-items: start; }
.cm-wish__actions .vr-btn { justify-self: stretch; }
.cm-wish .vr-notify .vr-field--inline .vr-btn { --btn-pad: 12px; font-size: 0.625rem; }
.cm-wish .vr-notify .vr-input { min-height: 44px; font-size: 1rem; }
.cm-wish .vr-notify .vr-btn { min-height: 44px; }
.cm-wish .vr-form-status:empty { display: none; }
.cm-receipt .cm-mini__line:last-child { border-bottom: 0; padding-bottom: 0; }
.cm-line__link:hover, .cm-mini__link:hover { text-decoration: underline; text-decoration-color: var(--vr-red); text-underline-offset: 4px; }
/* compact notify inside a wishlist card: stack email over button */
.cm-wish .vr-notify .vr-field--inline { flex-direction: column; gap: 6px; }
.cm-wish .vr-notify .vr-field--inline .vr-input { border-right: 1px solid rgba(255, 255, 255, 0.32); border-radius: var(--radius-1); }
.cm-wish .vr-notify .vr-field--inline .vr-btn { width: 100%; }

/* ===================================================================
   Account — sign in / create account / code (split campaign screen)
   =================================================================== */
.cm-account:has(> .cm-authx:not([hidden])) { padding-top: 0; padding-bottom: 0; max-width: none; padding-inline: 0; }
.cm-authx { display: grid; background: var(--black); }
.cm-authx[hidden] { display: none; }
.cm-authx__visual { position: relative; overflow: hidden; min-height: 300px; aspect-ratio: 4 / 3; background: var(--ink-900); }
.cm-authx__visual > picture { position: absolute; inset: 0; }
.cm-authx__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.cm-authx__visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0) 62%);
}
.cm-authx__brand { position: absolute; left: var(--gutter); bottom: 22px; z-index: 1; }
.cm-authx__l1, .cm-authx__l2 {
  font-weight: var(--w-black); font-stretch: var(--stretch-display); text-transform: uppercase;
  line-height: 0.86; letter-spacing: 0.06em; font-size: clamp(2.4rem, 11vw, 3.4rem);
}
.cm-authx__l2 { color: var(--vr-red); }
.cm-authx__tag { margin-top: 12px; font-size: 0.75rem; font-weight: var(--w-light); letter-spacing: 0.3em; line-height: 1.6; color: var(--white); }
.cm-authx__panel { display: flex; justify-content: center; padding: 32px var(--gutter) 56px; }
.cm-authx__inner { width: 100%; max-width: 440px; display: grid; gap: 18px; align-content: start; }
.cm-authx__eyebrow { color: var(--muted); }
.cm-authx__title {
  font-weight: var(--w-black); font-stretch: var(--stretch-display); text-transform: uppercase;
  font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 0.95; letter-spacing: 0.01em;
  min-height: 1.9em; /* always two lines tall: headings differ per space/tab */
}
.cm-authx__lead { color: var(--bone); }
.cm-authx__switch { font-size: 0.875rem; color: var(--muted); }
.cm-authx__switch .cm-textbtn { color: var(--white); }

.cm-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.cm-tabs__btn {
  position: relative; padding: 14px 4px 13px;
  font-size: 0.75rem; font-weight: var(--w-bold); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); transition: color var(--dur) var(--ease);
}
.cm-tabs__btn:hover { color: var(--white); }
.cm-tabs__btn[aria-selected="true"] { color: var(--white); }
.cm-tabs__btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--vr-red);
  transform: scaleX(0); transition: transform var(--dur) var(--ease);
}
.cm-tabs__btn[aria-selected="true"]::after { transform: scaleX(1); }
.cm-pane { display: grid; gap: 16px; }
.cm-pane[hidden] { display: none; }

.cm-google {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 18px;
  background: var(--white); color: #111; border: 1px solid var(--white);
  font-size: 0.8125rem; font-weight: var(--w-bold); letter-spacing: 0.06em;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cm-google:hover { background: #f1f1f1; }
.cm-google:active { transform: translateY(1px); }
.cm-google[hidden] { display: none; }
.cm-google__g { flex: none; }

.cm-perks { display: grid; gap: 8px; padding: 14px 16px; border-left: 2px solid var(--vr-red); background: var(--ink-900); }
.cm-perks li { position: relative; padding-left: 18px; font-size: 0.875rem; color: var(--bone); }
.cm-perks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 2px; background: var(--vr-red); }

.cm-authx__more { display: grid; gap: 1px; margin-top: 10px; background: var(--line); border: 1px solid var(--line); }
.cm-more { display: grid; gap: 4px; padding: 16px 18px; background: var(--black); cursor: pointer; transition: background-color var(--dur) var(--ease); }
.cm-more:hover { background: var(--ink-900); }
.cm-more__k { font-size: 0.625rem; font-weight: var(--w-bold); letter-spacing: 0.18em; text-transform: uppercase; color: var(--vr-red); }
.cm-more__t { font-weight: var(--w-heavy); font-stretch: 112%; text-transform: uppercase; font-size: 0.9375rem; letter-spacing: 0.02em; }
.cm-more .vr-link-arrow { justify-self: start; margin-top: 4px; font-size: 0.75rem; }

@media (min-width: 900px) {
  .cm-authx { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100svh - var(--header-h) - var(--annc-h, 0px)); }
  /* the visual stays pinned to the viewport so the brand block is always fully visible */
  .cm-authx__visual { aspect-ratio: auto; min-height: 0; align-self: start; position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h) - var(--annc-h, 0px)); background: var(--black); }
  .cm-authx__visual > picture {
    bottom: auto; aspect-ratio: var(--auth-ratio, 4 / 3); max-height: 100%;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  }
  .cm-authx__visual img { object-position: 50% 20%; }
  .cm-authx__visual::after { background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 45%), linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0.7) 12%, rgba(0, 0, 0, 0) 40%); }
  .cm-authx__brand { left: clamp(28px, 4vw, 64px); bottom: clamp(28px, 6vh, 64px); }
  .cm-authx__l1, .cm-authx__l2 { font-size: clamp(3.2rem, 6.4vw, 6.4rem); }
  .cm-authx__tag { font-size: 0.875rem; }
  /* top-aligned (not centred) so switching space/tab never moves the form */
  .cm-authx__panel { align-items: flex-start; padding: clamp(40px, 8vh, 88px) clamp(28px, 5vw, 80px) 72px; }
  .cm-authx__more { grid-template-columns: 1fr 1fr; }
}
/* the account page notice sits above the split screen */
.cm-account > .cm-notice { margin: 16px var(--gutter) 0; }

/* ===================================================================
   Account: Customer / Partner spaces (sign-in) + signed-in dashboard
   =================================================================== */
/* compact segmented switch with a sliding thumb */
.cm-space { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 12px; padding: 3px; border: 1px solid var(--line); background: var(--ink-900); }
.cm-space::before {
  content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  background: var(--white); transition: transform 0.28s var(--ease);
}
.cm-authx[data-space="partner"] .cm-space::before { transform: translateX(100%); }
.cm-space__btn {
  position: relative; z-index: 1; height: 38px;
  font-size: 0.75rem; font-weight: var(--w-bold); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); transition: color 0.28s var(--ease);
}
.cm-space__btn:hover { color: var(--white); }
.cm-space__btn[aria-pressed="true"] { color: var(--black); }
.cm-form__k { margin-top: 6px; font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--vr-red); }
.cm-textarea { min-height: 110px; resize: vertical; padding-top: 12px; line-height: 1.5; }

.cm-dash { display: grid; gap: var(--s-5); padding-block: var(--s-6) var(--s-8); }
.cm-dash__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.cm-dash__who { display: grid; gap: 6px; }
.cm-dash__email { color: var(--muted); }
.cm-dash__tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.cm-dash__tabs::-webkit-scrollbar { display: none; }
.cm-dash__tab {
  position: relative; flex: none; padding: 14px 16px; white-space: nowrap;
  font-size: 0.8125rem; font-weight: var(--w-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.cm-dash__tab:hover { color: var(--white); }
.cm-dash__tab[aria-selected="true"] { color: var(--white); }
.cm-dash__tab::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--vr-red); transform: scaleX(0); transition: transform var(--dur) var(--ease); }
.cm-dash__tab[aria-selected="true"]::after { transform: scaleX(1); }
.cm-dash__view:focus { outline: none; }
.cm-dash__grid { display: grid; gap: var(--s-5); align-items: start; }
.cm-dash__main, .cm-dash__side { display: grid; gap: var(--s-5); align-content: start; }
@media (min-width: 1024px) { .cm-dash__grid { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-6); } }

.cm-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border: 1px solid var(--line); font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone); white-space: nowrap; }
.cm-chip--ok { border-color: rgba(255, 255, 255, 0.5); color: var(--white); background: rgba(255, 255, 255, 0.06); }
.cm-chip--warn { border-color: var(--vr-red); color: var(--white); background: rgba(236, 5, 35, 0.15); }

.cm-rows { display: grid; }
.cm-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 0.875rem; }
.cm-rows li:first-child { border-top: 0; }
.cm-rows__v { font-weight: var(--w-bold); text-align: right; min-width: 72px; }

.cm-balance { display: grid; gap: 12px; }
.cm-balance__nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cm-balance__k { font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cm-balance__v { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: var(--w-heavy); font-stretch: var(--stretch-title); line-height: 1.1; }
.cm-balance__v--muted { color: var(--bone); }
.cm-balance__cta { display: grid; gap: 8px; justify-items: start; }

.cm-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.cm-copy .vr-input { font-size: 0.8125rem; }
.cm-reward { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; border: 0; }
.cm-radio, .cm-check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 0.875rem; color: var(--bone); cursor: pointer; }
.cm-radio input, .cm-check input { margin-top: 3px; accent-color: var(--vr-red); width: 16px; height: 16px; }
.cm-check a { color: var(--white); text-decoration: underline; }
.cm-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 0.875rem; }
.cm-dl dt { color: var(--muted); }
.cm-dl dd { margin: 0; white-space: pre-line; }
.cm-bank__status { display: grid; gap: 10px; justify-items: start; }
.cm-apply { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.cm-order__track { font-size: 0.8125rem; color: var(--bone); }

.cm-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .cm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cm-kpi { padding: 16px; border: 1px solid var(--line); background: var(--ink-900); }
.cm-kpi__k { font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cm-kpi__v { margin-top: 6px; font-size: 1.75rem; font-weight: var(--w-heavy); font-stretch: var(--stretch-title); line-height: 1; }
.cm-kpi__v small { font-size: 0.9rem; color: var(--muted); font-weight: var(--w-bold); }

.cm-shop { display: grid; gap: var(--s-5); }
.cm-shop__hero { position: relative; border: 1px solid var(--line); background: var(--ink-900); overflow: hidden; }
.cm-shop__cover { display: block; width: 100%; aspect-ratio: 16 / 5; object-fit: cover; background: linear-gradient(135deg, #111 0%, #3a0008 100%); }
.cm-shop__id { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 16px 20px; }
.cm-shop__logo { width: 72px; height: 72px; margin-top: -52px; border-radius: 50%; object-fit: contain; background: #fff; padding: 6px; border: 1px solid var(--line); }
.cm-shop__name { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: var(--w-heavy); font-stretch: var(--stretch-title); text-transform: uppercase; line-height: 1; margin-bottom: 8px; }
.cm-shop__id p { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cm-shop__act { margin-left: auto; }
.cm-prods { display: grid; }
.cm-prod { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.cm-prod:first-child { border-top: 0; }
.cm-prod img, .cm-prod__ph { width: 52px; height: 64px; object-fit: cover; background: var(--wall); }
.cm-prod__main { display: grid; gap: 2px; font-size: 0.875rem; }
@media (max-width: 600px) {
  .cm-rows li { grid-template-columns: minmax(0, 1fr) auto; }
  .cm-prod { grid-template-columns: 52px minmax(0, 1fr); }
  .cm-shop__act { margin-left: 0; }
}

/* Account (customer): bag / wishlist compact lists + "Launch your shop" invitation card */
.cm-items { display: grid; }
.cm-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cm-item:last-child { border-bottom: 0; }
.cm-item__media { display: block; width: 64px; height: 80px; background: var(--ink-700); overflow: hidden; }
.cm-item__media img { width: 100%; height: 100%; object-fit: cover; }
.cm-item__main { display: grid; gap: 4px; min-width: 0; }
.cm-item__name { font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.875rem; }
.cm-item__name:hover { text-decoration: underline; text-underline-offset: 4px; }
.cm-item__price { font-weight: var(--w-bold); white-space: nowrap; }
.cm-items__total { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--line-strong); font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.06em; }
.cm-launch { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 340px; background: var(--ink-800); border: 1px solid var(--line); }
.cm-launch__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; transition: transform 1s cubic-bezier(0.22, 0.7, 0.2, 1); }
.cm-launch::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 48%, rgba(0, 0, 0, 0.1) 100%); }
.cm-launch:hover .cm-launch__img { transform: scale(1.03); }
.cm-launch__body { display: grid; gap: 10px; padding: 22px; }
.cm-launch__body::before { content: ""; width: 36px; height: 6px; background: var(--vr-red); }
.cm-launch__k { font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone); }
.cm-launch__title { display: grid; font-weight: var(--w-black); font-stretch: var(--stretch-display); text-transform: uppercase; font-size: 1.625rem; line-height: 0.95; }
.cm-launch__title span { color: var(--vr-red); font-size: 0.72em; }
.cm-launch__text { color: var(--bone); font-size: 0.875rem; line-height: 1.5; }
.cm-launch__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 4px; }
@media (max-width: 599.98px) { .cm-item { grid-template-columns: 56px minmax(0, 1fr) auto; } .cm-item > .cm-textbtn { grid-column: 2 / -1; justify-self: start; } }

/* ===================================================================
   Checkout (2026-10-07) — calm, premium, reassuring
   =================================================================== */
.page-checkout .vr-nav, .page-checkout .vr-header__tool--search, .page-checkout .vr-locale { visibility: hidden; }   /* focus: no store navigation while paying */
.cm-co { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(56px, 7vw, 112px); }
.cm-co-ico { flex: none; }
.cm-co__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; padding-bottom: clamp(24px, 3vw, 36px); margin-bottom: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--line); }
.cm-co__secure { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: var(--w-bold); letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone); }
.cm-co__secure .cm-co-ico { color: var(--vr-red); }
.cm-co__title { margin-top: 10px; font-weight: var(--w-black); font-stretch: var(--stretch-display); text-transform: uppercase; font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); line-height: 0.9; }
.cm-co__steps { display: flex; align-items: center; gap: 0; }
.cm-co__step { display: flex; align-items: center; gap: 10px; font-size: 0.75rem; font-weight: var(--w-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }
.cm-co__step + .cm-co__step::before { content: ""; width: clamp(16px, 3vw, 44px); height: 1px; margin: 0 12px 0 2px; background: var(--line-strong); opacity: 0.35; }
.cm-co__step-n { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid currentColor; font-size: 0.75rem; letter-spacing: 0; }
.cm-co__step.is-done { color: var(--bone); }
.cm-co__step.is-done .cm-co__step-n { background: var(--white); border-color: var(--white); color: var(--black); }
.cm-co__step.is-current { color: var(--white); }
.cm-co__step.is-current .cm-co__step-n { background: var(--vr-red); border-color: var(--vr-red); color: var(--white); }

.cm-co__form { display: grid; gap: 18px; }
.cm-co__card { padding: clamp(20px, 2.6vw, 34px); background: var(--ink-800); border: 1px solid var(--line); }
.cm-co__card .cm-fieldset__legend { display: flex; align-items: center; gap: 14px; float: left; width: 100%; margin-bottom: 22px; font-size: 1.125rem; }
.cm-co__card .cm-fieldset__legend + * { clear: both; }
.cm-co__n { display: grid; place-items: center; width: 30px; height: 30px; background: var(--white); color: var(--black); font-size: 0.875rem; font-weight: var(--w-black); font-stretch: 100%; letter-spacing: 0; }
.cm-co__account { display: flex; align-items: center; padding: 16px 20px; background: transparent; }
.cm-co__account p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cm-co__account .cm-co-ico { color: #49e083; }
.cm-co__account a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; font-weight: var(--w-bold); }
.cm-co .vr-input, .cm-co .vr-select { height: 52px; background: var(--black); }
.cm-co .cm-field label { letter-spacing: 0.14em; }
.cm-co__eta { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; background: rgba(255, 255, 255, 0.04); border-left: 2px solid var(--vr-red); font-size: 0.875rem; color: var(--bone); line-height: 1.5; }
.cm-co__eta[hidden] { display: none; }
.cm-co__eta .cm-co-ico { margin-top: 1px; color: var(--white); }
.cm-co__paycard { display: grid; gap: 16px; }
.cm-co__paycard .cm-fieldset__legend { margin-bottom: 0; }
.cm-co__paytext { color: var(--bone); font-size: 0.9375rem; line-height: 1.55; max-width: 56ch; }
.cm-co__paybtn { min-height: 62px; gap: 12px; font-size: 0.9375rem; letter-spacing: 0.12em; }
.cm-co__paybtn .cm-co-ico { color: var(--white); }
.cm-co__stripe { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.8125rem; color: var(--bone); }
.cm-co__stripe b { color: var(--white); letter-spacing: 0.02em; }
.cm-co .cm-pay__note a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }

.cm-co__summary { gap: 18px; background: #0b0b0b; }
.cm-co__summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cm-co__edit { font-size: 0.75rem; font-weight: var(--w-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone); text-decoration: underline; text-underline-offset: 4px; }
.cm-co__edit:hover { color: var(--white); }
.cm-co .cm-mini__media { background: var(--wall); }
.cm-co .cm-totals__row--total dd { font-size: 1.5rem; font-weight: var(--w-black); font-stretch: var(--stretch-display); }
.cm-co__vat { margin-top: -8px; font-size: 0.75rem; color: var(--muted); text-align: right; }
.cm-co__trust { display: grid; gap: 0; margin-top: 6px; border-top: 1px solid var(--line); }
.cm-co__trust li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cm-co__trust li:last-child { border-bottom: 0; padding-bottom: 0; }
.cm-co__trust .cm-co-ico { color: var(--white); margin-top: 1px; }
.cm-co__trust span { display: grid; gap: 3px; font-size: 0.8125rem; color: var(--muted); line-height: 1.5; }
.cm-co__trust b { color: var(--white); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.cm-co__trust a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) {
  .cm-co__layout { grid-template-columns: minmax(0, 1fr) minmax(360px, 430px); gap: clamp(32px, 4vw, 64px); }
  .cm-co__summary { padding: 30px; }
}
@media (max-width: 599.98px) {
  .cm-co__steps { width: 100%; justify-content: space-between; }
  .cm-co__step-l { display: none; }
  .cm-co__step.is-current .cm-co__step-l { display: inline; }
  .cm-co__step + .cm-co__step::before { width: 14px; margin: 0 8px 0 0; }
}
.cm-co .cm-grid--2 { align-items: start; }
.cm-co__mtotal { display: none; }
@media (max-width: 1023.98px) {
  .cm-co__mtotal { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; background: #0b0b0b; border: 1px solid var(--line-strong); font-size: 0.8125rem; font-weight: var(--w-bold); letter-spacing: 0.1em; text-transform: uppercase; }
  .cm-co__mtotal b { font-size: 1.125rem; font-weight: var(--w-black); letter-spacing: 0; }
  .cm-co__mtotal span span { color: var(--muted); font-weight: var(--w-medium); }
}

/* ---------------------------------------------------------------- Partner tab (influencer program, 2026-10-24) */
.cm-form__row--2 { display: grid; grid-template-columns: 1fr; gap: 12px 16px; }
@media (min-width: 640px) { .cm-form__row--2 { grid-template-columns: 1fr 1fr; } }
.cm-partner__code { font-stretch: var(--stretch-display, 125%); font-weight: 900; font-size: clamp(1.75rem, 5vw, 2.5rem); letter-spacing: 0.04em; color: var(--white); margin: 4px 0 14px; line-height: 1; }
.cm-quote { margin-top: 14px; padding: 12px 16px; border-left: 2px solid var(--vr-red); background: var(--ink-900); color: var(--bone); font-size: 0.9375rem; white-space: pre-wrap; }
.cm-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 18px; }
@media (min-width: 720px) { .cm-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cm-stats p { display: grid; gap: 6px; padding: 14px 16px; background: var(--black); }
.cm-stats__v { font-size: 1.5rem; font-weight: 800; color: var(--white); font-variant-numeric: tabular-nums; }
.cm-stats__k { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cm-bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); align-items: end; gap: 3px; height: 96px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.cm-bars span { height: 100%; display: flex; align-items: flex-end; gap: 1px; }
.cm-bars i, .cm-bars b { display: block; flex: 1; min-height: 1px; }
.cm-bars i { background: var(--muted-2); }
.cm-bars b { background: var(--vr-red); }
.cm-key { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; margin-left: 6px; }
.cm-key--c { background: var(--muted-2); }
.cm-key--o { background: var(--vr-red); }

/* Checkout promo / partner code (2026-10-24) */
.cm-co-code { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
.cm-co-code__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.cm-co-code .vr-input { text-transform: uppercase; letter-spacing: 0.06em; }
.cm-co-code__status { font-size: 0.8125rem; color: var(--bone); min-height: 1em; }
.cm-co-code__status:empty { display: none; }
.cm-co-code__status.is-error { color: var(--vr-red); }
.cm-co-code .cm-textbtn { justify-self: start; }
.cm-totals__row--code dd { color: var(--vr-red); }

/* Account space = its own page once signed in (no site header / footer / top bar) */
html.vr-account-app .vr-annc, html.vr-account-app .vr-header, html.vr-account-app .vr-menu,
html.vr-account-app .vr-footer, html.vr-account-app .vr-skip-link { display: none !important; }
html.vr-account-app { --annc-h: 0px; --header-h: 0px; }
.cm-dash__bar { display: none; }
html.vr-account-app .cm-dash { padding-top: 0; }
html.vr-account-app .cm-dash__bar {
  display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line);
}
.cm-dash__logo img { display: block; height: 30px; width: auto; }
.cm-dash__space { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding-left: 16px; border-left: 1px solid var(--line); }
.cm-dash__back { margin-left: auto; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); text-decoration: none; }
.cm-dash__back:hover { color: var(--vr-red); }
@media (max-width: 520px) { .cm-dash__space { display: none; } .cm-dash__logo img { height: 24px; } }

/* "Request sent" animation (account space) */
.cm-sent { display: grid; justify-items: center; text-align: center; gap: 14px; padding: clamp(48px, 10vw, 110px) 16px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 35%, rgba(236, 5, 35, 0.16), transparent 60%); }
.cm-sent__mark { width: 120px; height: 120px; overflow: visible; }
.cm-sent__ring { fill: none; stroke: var(--vr-red); stroke-width: 6; stroke-dasharray: 327; stroke-dashoffset: 327; transform-origin: 60px 60px; transform: rotate(-90deg); animation: cm-sent-ring 0.7s var(--ease) forwards, cm-sent-pulse 1.6s 0.9s ease-out infinite; }
.cm-sent__check { fill: none; stroke: var(--white); stroke-width: 8; stroke-linecap: square; stroke-dasharray: 80; stroke-dashoffset: 80; animation: cm-sent-check 0.45s 0.6s var(--ease) forwards; }
.cm-sent__title { font-stretch: var(--stretch-display, 125%); font-weight: 900; font-size: clamp(1.75rem, 5vw, 2.75rem); text-transform: uppercase; letter-spacing: 0.02em; opacity: 0; transform: translateY(12px); animation: cm-sent-up 0.5s 0.8s var(--ease) forwards; }
.cm-sent__text { color: var(--bone); opacity: 0; transform: translateY(12px); animation: cm-sent-up 0.5s 1s var(--ease) forwards; }
@keyframes cm-sent-ring { to { stroke-dashoffset: 0; } }
@keyframes cm-sent-check { to { stroke-dashoffset: 0; } }
@keyframes cm-sent-up { to { opacity: 1; transform: none; } }
@keyframes cm-sent-pulse { 0% { filter: drop-shadow(0 0 0 rgba(236, 5, 35, 0.7)); } 100% { filter: drop-shadow(0 0 18px rgba(236, 5, 35, 0)); } }
@media (prefers-reduced-motion: reduce) {
  .cm-sent__ring, .cm-sent__check { animation: none; stroke-dashoffset: 0; }
  .cm-sent__title, .cm-sent__text { animation: none; opacity: 1; transform: none; }
}
html.vr-account-app .cm { padding-top: 0; }
html.vr-account-app .cm-dash__bar { padding-top: 14px; }

/* ================================================================ Partner dashboard v2 (2026-10-24) */
.pd { display: grid; gap: 22px; }
.pd-hero { display: grid; gap: 22px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); background: linear-gradient(120deg, #120204 0%, #000 55%), var(--black); position: relative; overflow: hidden; }
.pd-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(236, 5, 35, 0.35), transparent 70%); pointer-events: none; }
@media (min-width: 900px) { .pd-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.pd-hero__k { display: flex; align-items: center; gap: 10px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.pd-hero__code { font-stretch: var(--stretch-display, 125%); font-weight: 900; font-size: clamp(2.4rem, 7vw, 4.2rem); line-height: 1; color: var(--white); margin: 10px 0 14px; letter-spacing: 0.02em; word-break: break-all; }
.pd-hero__deal { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--bone); font-size: 0.9375rem; }
.pd-hero__deal b { color: var(--white); }
.pd-hero__deal span + span::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--vr-red); margin-right: 12px; vertical-align: 2px; }
.pd-hero__share { display: grid; gap: 10px; position: relative; z-index: 1; }
.pd-hero__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--line-strong, #ccc); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); white-space: nowrap; }
.pd-chip--on, .pd-chip--ok { border-color: #2f9e63; color: #6fd39b; }
.pd-chip--off { border-color: var(--muted-2); color: var(--muted); }
.pd-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.pd-h2 { font-stretch: var(--stretch-title, 95%); font-weight: 900; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.02em; }
.pd-h2 span { color: var(--muted); font-weight: 700; }
.pd-seg { display: inline-flex; border: 1px solid var(--line); }
.pd-seg button { height: 34px; padding: 0 14px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-left: 1px solid var(--line); }
.pd-seg button:first-child { border-left: 0; }
.pd-seg button[aria-pressed="true"] { background: var(--white); color: var(--black); }
.pd-seg button:hover:not([aria-pressed="true"]) { color: var(--white); }
.pd-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 720px) { .pd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pd-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pd-kpi { background: var(--black); padding: 18px 18px 16px; display: grid; gap: 6px; align-content: start; }
.pd-kpi--hot { background: linear-gradient(160deg, #2a0309, #000 70%); box-shadow: inset 0 3px 0 var(--vr-red); }
.pd-kpi__v { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--white); font-variant-numeric: tabular-nums; line-height: 1.1; }
.pd-kpi__k { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pd-kpi__s { font-size: 0.75rem; color: var(--bone); }
.pd-grid { display: grid; gap: 22px; }
@media (min-width: 900px) { .pd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pd-card--wide { grid-column: 1 / -1; } }
.pd-card { border: 1px solid var(--line); padding: 20px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.pd-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: baseline; }
.pd-h3 { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); }
.pd-legend { display: flex; align-items: center; gap: 6px 14px; font-size: 0.75rem; color: var(--muted); }
.pd-legend__c, .pd-legend__o { display: inline-block; width: 12px; height: 3px; background: var(--white); margin-right: -8px; }
.pd-legend__o { height: 10px; width: 8px; background: var(--vr-red); }
.pd-chart { width: 100%; height: 240px; display: block; }
.pd-chart__grid { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.pd-chart__ax { fill: var(--muted); font-size: 11px; font-family: var(--font-text); }
.pd-chart__area { fill: rgba(255, 255, 255, 0.06); }
.pd-chart__line { fill: none; stroke: var(--white); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pd-chart__bar { fill: var(--vr-red); }
.pd-chart__hit { fill: transparent; }
.pd-chart__hit:hover { fill: rgba(255, 255, 255, 0.05); }
.pd-empty { padding: 36px 0; text-align: center; color: var(--bone); display: grid; gap: 6px; }
.pd-empty__t { color: var(--muted); font-size: 0.875rem; }
.pd-funnel { display: grid; gap: 10px; }
.pd-funnel li { position: relative; padding: 10px 12px; font-size: 0.8125rem; color: var(--bone); text-transform: uppercase; letter-spacing: 0.08em; z-index: 0; }
.pd-funnel li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: rgba(236, 5, 35, 0.22); border-left: 3px solid var(--vr-red); z-index: -1; transition: width 0.6s var(--ease); }
.pd-funnel li span { font-size: 1.125rem; font-weight: 800; color: var(--white); margin-right: 6px; letter-spacing: 0; }
.pd-rank { display: grid; }
.pd-rank li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); font-size: 0.875rem; }
.pd-rank li:first-child { border-top: 0; }
.pd-rank__n, .pd-rank__iso { font-size: 0.75rem; font-weight: 800; color: var(--muted); letter-spacing: 0.06em; }
.pd-rank__iso { border: 1px solid var(--line); text-align: center; padding: 2px 0; }
.pd-rank__name { display: grid; gap: 6px; color: var(--white); font-weight: 600; min-width: 0; }
.pd-rank__name i { display: block; height: 3px; width: var(--w); background: var(--vr-red); }
.pd-rank__v { text-align: right; font-weight: 700; color: var(--white); font-size: 0.8125rem; }
.pd-table-wrap { overflow-x: auto; }
.pd-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; min-width: 620px; }
.pd-table th { text-align: left; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 0 10px 10px 0; border-bottom: 1px solid var(--line); }
.pd-table td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--line); color: var(--bone); vertical-align: top; }
.pd-table .is-num { text-align: right; padding-right: 0; }
.pd-table td strong { color: var(--white); }
.pd-tips ul { display: grid; gap: 10px; }
@media (min-width: 900px) { .pd-tips ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pd-tips li { padding: 14px 16px; background: var(--ink-900); border-left: 2px solid var(--vr-red); color: var(--bone); font-size: 0.875rem; }
.pd-tips li b { color: var(--white); display: block; margin-bottom: 4px; }
.pd-chart { height: auto; aspect-ratio: 720 / 220; }
.pd-kpi--hot { grid-column: 1 / -1; }
@media (min-width: 720px) { .pd-kpi--hot { grid-column: auto; } }
.pd-paid { font-size: 0.875rem; color: var(--bone); display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.pd-paid b { color: var(--white); }

/* ---- Partner dashboard v3: more contrast (VR black / white / red), star products, totals, earnings */
.pd { --muted: #b9b9b9; --line: rgba(255, 255, 255, 0.24); --bone: #e6e6e4; }
.pd-card { background: #121212; }
.pd-h3 { font-size: 0.875rem; }
.pd-kpis { background: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.3); }
.pd-kpi { background: var(--white); color: var(--black); }
.pd-kpi__v { color: var(--black); }
.pd-kpi__k { color: #444; }
.pd-kpi__s { color: #555; }
.pd-kpi--hot { background: var(--vr-red); box-shadow: none; }
.pd-kpi--hot .pd-kpi__v, .pd-kpi--hot .pd-kpi__k, .pd-kpi--hot .pd-kpi__s { color: var(--white); }
.pd-seg { border-color: rgba(255, 255, 255, 0.4); }
.pd-seg button { color: #d0d0d0; }
.pd-chart__grid { stroke: rgba(255, 255, 255, 0.16); }
.pd-chart__ax { fill: #c4c4c4; }
.pd-chart__area { fill: rgba(255, 255, 255, 0.1); }
.pd-chart__line { stroke-width: 2.5; }
.pd-funnel li { color: #e6e6e4; }
.pd-funnel li::before { background: rgba(236, 5, 35, 0.4); }
.pd-table td { color: #e6e6e4; }
.pd-hero { border-color: rgba(236, 5, 35, 0.5); background: linear-gradient(120deg, #2a040b 0%, #0b0b0b 60%); }
.pd-hero .cm-hint { color: #c9c9c9; }
/* all-time totals */
.pd-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.3); }
@media (min-width: 900px) { .pd-totals { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pd-totals p { display: grid; gap: 4px; padding: 16px 18px; background: #161616; }
.pd-totals p.is-red { background: var(--vr-red); }
.pd-totals__k { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #cfcfcf; }
.pd-totals p.is-red .pd-totals__k, .pd-totals p.is-red .pd-totals__s { color: rgba(255, 255, 255, 0.92); }
.pd-totals__v { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 900; color: var(--white); font-variant-numeric: tabular-nums; }
.pd-totals__s { font-size: 0.75rem; color: #cfcfcf; }
.pd-totals__s a { color: var(--white); font-weight: 700; }
/* star products */
.pd-more { height: 30px; padding: 0 12px; border: 1px solid var(--white); color: var(--white); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.pd-more:hover { background: var(--white); color: var(--black); }
.pd-stars { display: grid; gap: 10px; }
.pd-stars li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px; background: #1b1b1b; border: 1px solid var(--line); }
.pd-stars li:first-child { border-color: var(--vr-red); background: linear-gradient(90deg, rgba(236, 5, 35, 0.25), #1b1b1b 70%); }
.pd-stars__n { font-stretch: var(--stretch-display, 125%); font-weight: 900; font-size: 1.6rem; color: var(--white); text-align: center; }
.pd-stars__main { display: grid; gap: 4px; min-width: 0; }
.pd-stars__main b { color: var(--white); font-size: 0.9375rem; }
.pd-stars__main span { color: #cfcfcf; font-size: 0.75rem; }
.pd-stars__main i { display: block; height: 3px; width: var(--w); background: var(--vr-red); margin-top: 4px; }
.pd-stars__v { font-weight: 800; color: var(--white); }
/* products modal */
.pd-modal { position: fixed; inset: 0; z-index: var(--z-modal, 400); display: grid; place-items: center; padding: 16px; }
.pd-modal__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.75); }
.pd-modal__box { position: relative; width: min(760px, 100%); max-height: 86vh; overflow: auto; background: var(--white); color: var(--black); padding: 22px; display: grid; gap: 14px; }
.pd-modal__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pd-modal__box .pd-h2 { color: var(--black); }
.pd-modal__box .vr-icon-btn { color: var(--black); }
.pd-table--light th { color: #555; border-color: #ddd; }
.pd-table--light td { color: #111; border-color: #e5e5e5; }
.pd-table--light td strong { color: #000; }
.pd-table--light tfoot td { font-weight: 900; color: #000; border-top: 2px solid #000; border-bottom: 0; }
/* earnings */
.pd-ear { display: grid; gap: 1px; background: rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.3); }
@media (min-width: 900px) { .pd-ear { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.pd-ear__main { background: var(--white); color: var(--black); padding: clamp(20px, 3vw, 32px); display: grid; gap: 10px; align-content: start; }
.pd-ear__main .pd-hero__k { color: #444; }
.pd-ear__v { font-stretch: var(--stretch-display, 125%); font-weight: 900; font-size: clamp(2.6rem, 7vw, 4rem); line-height: 1; color: var(--black); }
.pd-ear__hint { color: #333; font-size: 0.9375rem; }
.pd-ear__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, 0.3); }
.pd-ear__nums p { background: #161616; padding: 16px 18px; display: grid; gap: 4px; }
.pd-ear__nums p.is-red { background: var(--vr-red); }
.pd-ear__nums span { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #cfcfcf; }
.pd-ear__nums b { font-size: 1.5rem; font-weight: 900; color: var(--white); }
.pd-ear__nums em { font-style: normal; font-size: 0.75rem; color: #cfcfcf; }
.pd-ear__nums p.is-red span, .pd-ear__nums p.is-red em { color: rgba(255, 255, 255, 0.92); }
.pd-wd { display: grid; gap: 8px; }
.pd-wd .vr-label { color: #333; }
.pd-wd__row { display: grid; grid-template-columns: minmax(0, 160px) auto; gap: 8px; }
.pd-wd .vr-input { background: #fff; color: #000; border-color: #000; }
.pd-bank { color: var(--white); font-size: 0.9375rem; line-height: 1.6; }
.pd-steps { display: grid; gap: 8px; counter-reset: st; }
.pd-steps li { counter-increment: st; display: grid; grid-template-columns: 26px 1fr; gap: 10px; color: #e6e6e4; font-size: 0.875rem; }
.pd-steps li::before { content: counter(st); display: grid; place-items: center; width: 22px; height: 22px; background: var(--vr-red); color: var(--white); font-weight: 800; font-size: 0.75rem; }

/* ================================================================ Partner space v4 (2026-10-25): clarity first.
   Sentence-case labels, bigger text, one set of numbers, plain explanations. VR black / white / red. */
.px { display: grid; gap: 24px; color: #f2f2f2; font-size: 1rem; line-height: 1.5; }
.px b { color: #fff; }
.px-label { font-size: 0.9375rem; font-weight: 600; color: #d6d6d6; display: flex; align-items: center; gap: 10px; }
.px-text { font-size: 1rem; color: #e8e8e8; }
.px-small { font-size: 0.875rem; color: #cfcfcf; }
.px-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8125rem; color: #fff; word-break: break-all; }
.px-big { font-size: 1.75rem; font-weight: 800; color: #fff; }
.px-tag { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid rgba(255, 255, 255, 0.4); font-size: 0.875rem; font-weight: 600; color: #fff; }
.px-code { display: grid; gap: 24px; padding: clamp(22px, 3vw, 34px); background: #171717; border: 1px solid rgba(255, 255, 255, 0.22); border-left: 6px solid var(--vr-red); }
@media (min-width: 900px) { .px-code { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; } }
.px-code__v { font-stretch: var(--stretch-display, 125%); font-weight: 900; font-size: clamp(2.6rem, 7vw, 4.2rem); line-height: 1.05; color: #fff; margin: 6px 0 10px; word-break: break-all; }
.px-code__side { display: grid; gap: 10px; }
.px-code__side .vr-btn { width: 100%; justify-content: center; }
.px-code__side--text { gap: 4px; padding-left: 0; }
@media (min-width: 900px) { .px-code__side--text { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, 0.2); } }
.px-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.px-h2 { font-size: 1.375rem; font-weight: 800; color: #fff; }
.px-h2 span { font-weight: 500; color: #cfcfcf; font-size: 1rem; margin-left: 6px; }
.px-seg { display: inline-flex; border: 1px solid rgba(255, 255, 255, 0.45); }
.px-seg button { height: 38px; padding: 0 16px; font-size: 0.875rem; font-weight: 600; color: #e0e0e0; border-left: 1px solid rgba(255, 255, 255, 0.45); }
.px-seg button:first-child { border-left: 0; }
.px-seg button[aria-pressed="true"] { background: #fff; color: #000; }
.px-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .px-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.px-stat { background: #fff; color: #000; padding: 18px 20px; display: grid; gap: 2px; align-content: start; }
.px-stat__v { font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums; color: #000; }
.px-stat__l { font-size: 0.9375rem; font-weight: 700; color: #111; }
.px-stat__n { font-size: 0.875rem; color: #444; }
.px-stat--red { background: var(--vr-red); }
.px-stat--red .px-stat__v, .px-stat--red .px-stat__l, .px-stat--red .px-stat__n { color: #fff; }
.px-balance-line { font-size: 1rem; color: #e8e8e8; padding: 14px 18px; background: #171717; border: 1px solid rgba(255, 255, 255, 0.22); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.px-balance-line b { font-size: 1.25rem; }
.px-balance-line a { color: #fff; font-weight: 700; margin-left: auto; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--vr-red); }
.px-card { background: #171717; border: 1px solid rgba(255, 255, 255, 0.22); padding: 22px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.px-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.px-h3 { font-size: 1.125rem; font-weight: 800; color: #fff; }
.px-link { font-size: 0.9375rem; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--vr-red); }
.px-key { display: inline-block; width: 14px; height: 4px; background: #fff; margin: 0 4px 2px 10px; }
.px-key--o { width: 8px; height: 12px; background: var(--vr-red); margin-bottom: -1px; }
.px-grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .px-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.px-list { display: grid; }
.px-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.px-list li:first-child { border-top: 0; padding-top: 4px; }
.px-list li > .px-list__main:first-child { grid-column: 1 / 3; }
.px-list__n { width: 34px; height: 34px; display: grid; place-items: center; background: #fff; color: #000; font-weight: 900; font-size: 1rem; }
.px-list li:first-child .px-list__n { background: var(--vr-red); color: #fff; }
.px-list__main { display: grid; gap: 2px; min-width: 0; }
.px-list__main b { font-size: 1rem; }
.px-list__main span { font-size: 0.875rem; color: #cfcfcf; }
.px-list__v { text-align: right; font-weight: 800; font-size: 1rem; color: #fff; display: grid; }
.px-list__v small { font-weight: 600; font-size: 0.8125rem; color: #ff6b7d; }
.px-empty { font-size: 0.9375rem; color: #cfcfcf; }
.px-countries { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.px .pd-chart__ax { fill: #d6d6d6; font-size: 12px; }
.px .pd-chart__grid { stroke: rgba(255, 255, 255, 0.18); }
.px-steps { display: grid; gap: 10px; }
.px-steps li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 16px; background: #202020; border-left: 4px solid rgba(255, 255, 255, 0.35); }
.px-steps li.is-red { border-left-color: var(--vr-red); background: #2a1316; }
.px-steps__v { font-size: 1.375rem; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.px-steps__t { font-size: 0.9375rem; color: #d6d6d6; }
@media (max-width: 520px) { .px-steps li { grid-template-columns: 1fr; gap: 2px; } }
.px-wd { display: grid; gap: 6px; margin-top: 4px; }
.px-wd__row { display: grid; grid-template-columns: minmax(0, 170px) auto; gap: 10px; }
.px-code--money .px-code__v { color: #fff; }

/* ================================================================ Partner space v5 (2026-10-25): storefront look.
   Campaign photo behind the code, editorial numbers without boxes, star products with real photos. */
.vx { display: grid; gap: clamp(28px, 4vw, 44px); color: #fff; }
.vx-eyebrow { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; }
.vx-eyebrow--dark { color: #000; }
.vx-btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border: 1.5px solid #fff; color: #fff; background: transparent; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.vx-btn:hover { background: rgba(255, 255, 255, 0.12); }
.vx-btn--white { background: #fff; color: #000; }
.vx-btn--white:hover { background: #e9e9e9; }
.vx-btn--black { background: #000; border-color: #000; color: #fff; }
.vx-btn--black:hover { background: #222; }
/* hero: campaign photo + code */
.vx-hero { position: relative; overflow: hidden; min-height: clamp(300px, 34vw, 420px); display: grid; align-items: end; background: #000; }
.vx-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.vx-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.1) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.6), transparent 50%); }
.vx-hero__copy { position: relative; z-index: 1; padding: clamp(22px, 4vw, 44px); display: grid; gap: 12px; max-width: 760px; }
.vx-hero__code { font-stretch: var(--stretch-display, 125%); font-weight: 900; font-size: clamp(3rem, 9vw, 6rem); line-height: 0.95; letter-spacing: 0.01em; color: #fff; word-break: break-all; }
.vx-hero__deal { font-size: clamp(0.9375rem, 1.6vw, 1.125rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
.vx-hero__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
/* period */
.vx-period { display: flex; gap: 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.vx-period button { padding: 0 0 12px; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #9a9a9a; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.vx-period button[aria-pressed="true"] { color: #fff; border-bottom-color: var(--vr-red); }
.vx-period button:hover { color: #fff; }
/* numbers: no boxes, big extended figures */
.vx-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; margin-top: -8px; }
@media (min-width: 900px) { .vx-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); } .vx-nums--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vx-num { display: grid; gap: 6px; padding-left: 16px; border-left: 2px solid rgba(255, 255, 255, 0.3); }
.vx-num.is-red { border-left-color: var(--vr-red); }
.vx-num__v { font-stretch: var(--stretch-display, 125%); font-weight: 900; font-size: clamp(1.8rem, 4vw, 2.75rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.vx-num.is-red .vx-num__v { color: var(--vr-red); }
.vx-num__l { font-size: 0.875rem; color: #d2d2d2; }
/* withdraw CTA strip */
.vx-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 18px 22px; background: var(--vr-red); color: #fff; text-decoration: none; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.vx-cta b { font-stretch: var(--stretch-display, 125%); font-size: 1.5rem; letter-spacing: 0; }
.vx-cta__go { margin-left: auto; }
.vx-cta:hover { background: var(--vr-red-ink); }
/* sections */
.vx-sec { display: grid; gap: 18px; }
.vx-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.25); padding-bottom: 12px; }
.vx-title { font-stretch: var(--stretch-title, 95%); font-weight: 900; font-size: clamp(1.25rem, 2.6vw, 1.75rem); text-transform: uppercase; letter-spacing: 0.01em; color: #fff; }
.vx-more { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; border-bottom: 2px solid var(--vr-red); padding-bottom: 2px; }
.vx-empty, .vx-small { font-size: 0.9375rem; color: #c9c9c9; }
/* star products with photos */
.vx-prods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .vx-prods { grid-template-columns: 1fr 1fr; } .vx-prod:nth-child(3) { display: none; } }
.vx-prod { display: grid; gap: 6px; }
.vx-prod__img { position: relative; aspect-ratio: 4 / 5; background: #1a1a1a; overflow: hidden; }
.vx-prod__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vx-noimg { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #222, #111); }
.vx-prod__rank { position: absolute; left: 0; top: 0; min-width: 40px; height: 40px; display: grid; place-items: center; background: #fff; color: #000; font-weight: 900; font-size: 1.125rem; }
.vx-prod:first-child .vx-prod__rank { background: var(--vr-red); color: #fff; }
.vx-prod__name { font-weight: 800; font-size: 1rem; color: #fff; margin-top: 4px; }
.vx-prod__meta { font-size: 0.875rem; color: #d2d2d2; }
/* rows */
.vx-rows { display: grid; }
.vx-rows li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.9375rem; }
.vx-rows__d { color: #bdbdbd; font-size: 0.875rem; }
.vx-rows__m { color: #d2d2d2; min-width: 0; }
.vx-rows__m b { color: #fff; }
.vx-rows__v { text-align: right; font-weight: 800; color: #fff; display: grid; }
.vx-rows__v em { font-style: normal; font-weight: 700; font-size: 0.8125rem; color: #ff5a6e; }
@media (max-width: 560px) { .vx-rows li { grid-template-columns: 1fr auto; } .vx-rows__d { grid-column: 1 / -1; } }
/* earnings */
.vx-money { background: var(--vr-red); color: #000; padding: clamp(24px, 4vw, 44px); display: grid; gap: 10px; }
.vx-money__v { font-stretch: var(--stretch-display, 125%); font-weight: 900; font-size: clamp(3.2rem, 10vw, 6.5rem); line-height: 0.95; color: #fff; }
.vx-note { font-size: 1rem; font-weight: 700; color: #000; }
.vx-wd { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.vx-wd input { height: 46px; width: 150px; padding: 0 14px; border: 1.5px solid #000; background: #fff; color: #000; font-size: 1rem; font-weight: 700; }
.vx-wd .cm-error { flex-basis: 100%; color: #000; }
.vx-bank { display: grid; gap: 4px; font-size: 1rem; color: #fff; }
.vx-bank span { color: #d2d2d2; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.875rem; }
.vx-form { max-width: 520px; }
.vx-noimg { display: grid; place-content: center; justify-items: center; gap: 14px; padding: 16px; text-align: center; }
.vx-noimg img { width: 60%; max-width: 200px; height: auto; }
.vx-noimg b { font-stretch: var(--stretch-title, 95%); font-weight: 900; text-transform: uppercase; font-size: 1.125rem; color: #fff; }
.vx-hero__code { font-size: clamp(2.2rem, 12vw, 6rem); word-break: normal; overflow-wrap: anywhere; }
@media (max-width: 520px) { .vx-hero__copy { padding: 22px 18px; } }

/* ---- Partner dashboard v6 (2026-10-25): data first, no campaign photo */
.vx-demo { justify-self: start; padding: 6px 12px; border: 1px dashed rgba(255, 255, 255, 0.5); font-size: 0.8125rem; color: #fff; }
.vx-demo--dark { border-color: rgba(0, 0, 0, 0.6); color: #000; }
.vx-codebar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 16px 20px; background: #161616; border: 1px solid rgba(255, 255, 255, 0.24); border-left: 4px solid var(--vr-red); }
.vx-codebar__code { display: grid; gap: 2px; }
.vx-codebar__code span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #bdbdbd; }
.vx-codebar__code b { font-stretch: var(--stretch-display, 125%); font-weight: 900; font-size: 1.75rem; line-height: 1; color: #fff; }
.vx-codebar__deal { font-size: 0.9375rem; color: #d6d6d6; flex: 1 1 260px; }
.vx-codebar__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.vx-codebar .vx-btn { height: 40px; padding: 0 16px; }
.vx-nums--5 { gap: 22px 18px; }
@media (min-width: 1100px) { .vx-nums--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.vx-num__s { font-size: 0.8125rem; color: #a9a9a9; }
.vx-box { background: #121212; border: 1px solid rgba(255, 255, 255, 0.2); padding: 20px; display: grid; gap: 16px; align-content: start; min-width: 0; }
.vx-box__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.vx-h3 { font-size: 1rem; font-weight: 800; color: #fff; letter-spacing: 0.01em; }
.vx-legend { font-size: 0.8125rem; color: #cfcfcf; display: flex; align-items: center; gap: 6px; }
.vx-key { display: inline-block; width: 14px; height: 3px; background: #fff; margin-left: 10px; }
.vx-key--o { width: 8px; height: 12px; background: var(--vr-red); }
.vx .pd-chart { height: auto; aspect-ratio: 720 / 220; }
.vx .pd-chart__ax { fill: #cfcfcf; font-size: 11px; }
.vx .pd-chart__grid { stroke: rgba(255, 255, 255, 0.14); }
.vx .pd-chart__area { fill: rgba(255, 255, 255, 0.08); }
.vx-cols { display: grid; gap: 20px; }
@media (min-width: 900px) { .vx-cols { grid-template-columns: 1.3fr 1fr; } }
.vx-plist { display: grid; }
.vx-plist li { display: grid; grid-template-columns: 26px 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.vx-plist li:first-child { border-top: 0; padding-top: 0; }
.vx-plist__rank { font-weight: 900; font-size: 1rem; color: #fff; text-align: center; }
.vx-plist li:first-child .vx-plist__rank { color: var(--vr-red); }
.vx-plist__img { width: 48px; height: 60px; background: #222; overflow: hidden; }
.vx-plist__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vx-plist__main { display: grid; gap: 3px; min-width: 0; }
.vx-plist__main b { font-size: 0.9375rem; color: #fff; }
.vx-plist__main span { font-size: 0.8125rem; color: #c4c4c4; }
.vx-plist__main i { display: block; height: 3px; width: var(--w); background: var(--vr-red); }
.vx-plist__v { font-weight: 800; color: #fff; }
.vx-bars { display: grid; gap: 10px; }
.vx-bars li { display: grid; grid-template-columns: 110px minmax(0, 1fr) 34px; gap: 10px; align-items: center; font-size: 0.875rem; color: #e2e2e2; }
.vx-bars__b { height: 10px; background: rgba(255, 255, 255, 0.08); }
.vx-bars__b i { display: block; height: 100%; width: var(--w); background: #fff; }
.vx-bars li:first-child .vx-bars__b i { background: var(--vr-red); }
.vx-bars__v { text-align: right; font-weight: 800; color: #fff; }
.vx-tablewrap { overflow-x: auto; }
.vx-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 640px; }
.vx-table th { text-align: left; font-size: 0.75rem; font-weight: 700; color: #bdbdbd; padding: 0 12px 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.24); }
.vx-table td { padding: 11px 12px 11px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: #dcdcdc; vertical-align: top; }
.vx-table td b { color: #fff; font-weight: 700; }
.vx-table .is-num { text-align: right; padding-right: 0; white-space: nowrap; }
.vx-table td.is-red { color: #ff5a6e; font-weight: 800; }

/* ================================================================ Partner space v7 (2026-10-25): épuré.
   No boxes, lots of air, hairlines, fine large figures, red only as a small touch. */
.ze { display: grid; gap: 56px; max-width: 1080px; padding-top: 12px; color: #fff; }
.ze-label { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #9d9d9d; }
.ze-sub { font-size: 0.9375rem; color: #bdbdbd; margin-top: 10px; }
.ze-note, .ze-empty { font-size: 0.8125rem; color: #8d8d8d; }
.ze-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--vr-red); }
.ze-demo { justify-self: start; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8d8d8d; }
.ze-btn { height: 42px; padding: 0 20px; border: 1px solid rgba(255, 255, 255, 0.5); background: transparent; color: #fff; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background 0.15s, color 0.15s; }
.ze-btn:hover { border-color: #fff; }
.ze-btn--solid { background: #fff; color: #000; border-color: #fff; }
.ze-btn--solid:hover { background: #dcdcdc; }
.ze-link { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; text-decoration: none; opacity: 0.8; }
.ze-link:hover { opacity: 1; }
.ze-code { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.ze-code__v { font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 300; letter-spacing: 0.04em; line-height: 1; margin-top: 12px; color: #fff; }
.ze-code__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.ze-big { font-size: clamp(3.2rem, 9vw, 5.5rem); font-weight: 300; letter-spacing: -0.01em; line-height: 1; margin-top: 12px; font-variant-numeric: tabular-nums; }
.ze-sec { display: grid; gap: 22px; min-width: 0; }
.ze-sec__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.ze-period { display: flex; gap: 22px; }
.ze-period button { font-size: 0.8125rem; color: #8d8d8d; padding: 2px 0; border-bottom: 1px solid transparent; }
.ze-period button[aria-pressed="true"] { color: #fff; border-bottom-color: #fff; }
.ze-period button:hover { color: #fff; }
.ze-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
@media (min-width: 900px) { .ze-kpis { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); align-items: end; } .ze-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ze-kpi--main { grid-column: 1 / -1; }
@media (min-width: 900px) { .ze-kpi--main { grid-column: auto; } }
.ze-kpi__v { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; color: #fff; }
.ze-kpi--main .ze-kpi__v { font-size: clamp(2.8rem, 6vw, 4rem); }
.ze-kpi__l { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.8125rem; color: #9d9d9d; }
.ze-chart-wrap { display: grid; gap: 10px; margin-top: 8px; }
.ze-chart { width: 100%; height: 180px; display: block; overflow: visible; }
.ze-chart__line { fill: none; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ze-chart__base { stroke: rgba(255, 255, 255, 0.15); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ze-chart__dot { fill: var(--vr-red); }
.ze-chart__ax { fill: #8d8d8d; font-size: 11px; font-family: var(--font-text); }
.ze-chart__hit { fill: transparent; }
.ze-cols { display: grid; gap: 56px; }
@media (min-width: 900px) { .ze-cols { grid-template-columns: 1.4fr 1fr; gap: 64px; } }
.ze-rows { display: grid; }
.ze-rows li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.ze-rows li > .ze-rows__m:first-child { grid-column: 1 / 3; }
.ze-rows__d { width: 56px; font-size: 0.8125rem; color: #8d8d8d; }
.ze-rows__m { display: grid; gap: 2px; font-size: 0.9375rem; color: #fff; min-width: 0; }
.ze-rows__m small { font-size: 0.8125rem; color: #8d8d8d; }
.ze-rows__v { display: grid; justify-items: end; font-size: 0.9375rem; font-variant-numeric: tabular-nums; color: #fff; }
.ze-rows__v--light { color: #bdbdbd; }
.ze-red { color: #ff5a6e; font-size: 0.8125rem; }
.ze-thumb { width: 40px; height: 50px; background: #1a1a1a; overflow: hidden; }
.ze-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ze-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12); text-decoration: none; color: #fff; }
.ze-foot__v { font-size: 1.75rem; font-weight: 300; font-variant-numeric: tabular-nums; }
.ze-foot .ze-link { margin-left: auto; }
.ze-wd { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; }
.ze-wd input { height: 42px; width: 140px; padding: 0 12px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; font-size: 0.9375rem; }
.ze-wd .cm-error { flex-basis: 100%; }
.ze-form { max-width: 480px; }
.ze-cols { align-items: start; }
.ze-sec__head { min-height: 34px; }

/* v8: red back in + new chart */
.ze-code__v { color: var(--vr-red); font-weight: 400; }
.ze-kpi--main .ze-kpi__v { color: var(--vr-red); font-weight: 400; }
.ze-label { color: #b0b0b0; }
.ze-sec__head { border-bottom: 1px solid rgba(236, 5, 35, 0.55); }
.ze-period button[aria-pressed="true"] { color: #fff; border-bottom: 2px solid var(--vr-red); }
.ze-btn--solid { background: var(--vr-red); border-color: var(--vr-red); color: #fff; }
.ze-btn--solid:hover { background: var(--vr-red-ink); border-color: var(--vr-red-ink); }
.ze-foot { background: var(--vr-red); border-top: 0; padding: 22px 26px; }
.ze-foot .ze-label, .ze-foot .ze-link { color: #fff; opacity: 1; }
.ze-foot__v { font-weight: 500; }
.ze-big { color: var(--vr-red); font-weight: 400; }
.ze-rows li { border-bottom-color: rgba(255, 255, 255, 0.09); }
.ze-thumb { border-left: 2px solid transparent; }
.ze-rows li:first-child .ze-thumb { border-left-color: var(--vr-red); }
.ze-chart { width: 100%; height: auto; aspect-ratio: 900 / 240; overflow: visible; }
.ze-chart__grid { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.ze-chart__line { fill: none; stroke: var(--vr-red); stroke-width: 2.5; stroke-linecap: round; }
.ze-chart__end { fill: #fff; stroke: var(--vr-red); stroke-width: 3; }
.ze-chart__ax { fill: #9a9a9a; font-size: 12px; font-family: var(--font-text); }
.ze-chart__pt circle { fill: #fff; stroke: var(--vr-red); stroke-width: 2.5; opacity: 0; transition: opacity .12s; }
.ze-chart__pt:hover circle { opacity: 1; }

/* v9: hero panel (code + visible link), tooltip, flags, earnings split bar */
.ze-hero { display: grid; gap: 0; background: linear-gradient(135deg, #1a0408 0%, #0d0d0d 55%); border: 1px solid rgba(236, 5, 35, 0.35); }
@media (min-width: 900px) { .ze-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ze-hero__l, .ze-hero__r { padding: clamp(22px, 3.4vw, 36px); display: grid; gap: 10px; align-content: center; }
.ze-hero__r { border-top: 1px solid rgba(255, 255, 255, 0.1); }
@media (min-width: 900px) { .ze-hero__r { border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.1); } }
.ze-hero__code { font-stretch: var(--stretch-display, 125%); font-weight: 900; font-size: clamp(2.4rem, 6vw, 3.8rem); line-height: 1; color: var(--vr-red); letter-spacing: 0.01em; overflow-wrap: anywhere; }
.ze-hero__total { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 400; color: #fff; line-height: 1; }
.ze-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ze-chips li { padding: 6px 12px; background: rgba(255, 255, 255, 0.07); font-size: 0.875rem; color: #d6d6d6; }
.ze-chips b { color: #fff; }
.ze-hero__link { font-size: clamp(1rem, 1.8vw, 1.25rem); font-weight: 600; color: #fff; text-decoration: none; overflow-wrap: anywhere; padding: 12px 14px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.16); }
.ze-hero__link:hover { border-color: var(--vr-red); }
.ze-hero__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ze-chart-box { position: relative; }
.ze-chart__vline { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; stroke-dasharray: 3 3; }
.ze-chart__cur { fill: #fff; stroke: var(--vr-red); stroke-width: 3; }
.ze-tip { position: absolute; transform: translate(-50%, calc(-100% - 16px)); pointer-events: none; display: grid; gap: 2px; min-width: 150px; padding: 10px 12px; background: #fff; color: #000; font-size: 0.8125rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); z-index: 2; white-space: nowrap; }
.ze-tip::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: #fff; transform: translateX(-50%) rotate(45deg); }
.ze-tip b { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #555; }
.ze-tip__v { font-size: 1.25rem; font-weight: 800; color: var(--vr-red); }
.ze-flag { width: 24px; height: 18px; object-fit: cover; display: inline-block; vertical-align: -3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); }
.ze-rows__m .ze-flag { width: 16px; height: 12px; vertical-align: -1px; margin-right: 2px; }
.ze-flag--none { background: #333; }
.ze-split { display: flex; height: 10px; background: rgba(255, 255, 255, 0.06); margin: 8px 0 4px; }
.ze-split i { display: block; width: var(--w); height: 100%; }
.ze-split .is-av, .ze-legend .is-av { background: var(--vr-red); }
.ze-split .is-wait, .ze-legend .is-wait { background: #6b6b6b; }
.ze-split .is-way, .ze-legend .is-way { background: #ff8a99; }
.ze-split .is-paid, .ze-legend .is-paid { background: #fff; }
.ze-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 0.875rem; color: #bdbdbd; }
.ze-legend li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ze-legend i { width: 10px; height: 10px; display: inline-block; }
.ze-legend b { color: #fff; font-weight: 600; margin-left: auto; }
.ze-legend small { flex-basis: 100%; padding-left: 16px; font-size: 0.75rem; color: #8d8d8d; }
.ze-wd { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.ze-wd__in { display: inline-flex; align-items: center; height: 42px; border: 1px solid rgba(255, 255, 255, 0.4); padding-left: 12px; color: #bdbdbd; }
.ze-wd__in input { width: 120px; height: 100%; border: 0; background: transparent; color: #fff; font-size: 1rem; padding: 0 10px 0 6px; }
.ze-bank { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; font-size: 0.9375rem; }
.ze-bank__k { color: #8d8d8d; font-size: 0.8125rem; }
.ze-bank b { color: #fff; font-weight: 500; }
.ze-how { display: grid; gap: 10px; margin-top: 10px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.ze-how li { display: grid; grid-template-columns: 32px 1fr; font-size: 0.875rem; color: #bdbdbd; }
.ze-how b { color: var(--vr-red); font-weight: 800; }
.ze-code__btns, .ze-code { display: none; }

/* Partner request (2026-11-02): a request only, no account, so no Google button on that tab */
.cm-authx[data-space="partner"][data-tab="signup"] .cm-google,
.cm-authx[data-space="partner"][data-tab="signup"] .cm-or { display: none; }
.cm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cm-sent { padding: 8px 0; outline: none; }
.cm-sent__t { font-size: 1.5rem; font-weight: 600; margin: 0 0 8px; }

/* 80-content.css */
/* Vision Rebel — CONTENT pages (our story, partner stores, create with us, contact,
   FAQ, shipping & returns, size guide, legal, terms, privacy, cookies, 404).
   Master language: black canvas, extended heavy caps, condensed numbers, tracked
   light taglines, thin outline buttons, hard edges, red only for labels / CTAs /
   key moments. Long-form copy: max ~70ch, generous leading. */

/* ===================================================================
   Campaign header (.vr-ct-hero) — plain / image / split
   =================================================================== */
.vr-ct-hero { position: relative; background: var(--black); color: var(--white); overflow: hidden; isolation: isolate; }
.vr-ct-hero__inner { display: flex; flex-direction: column; align-items: flex-start; }
.vr-ct-hero .vr-breadcrumbs { margin-bottom: 22px; }
.vr-ct-hero .vr-breadcrumbs a { text-decoration: none; }
.vr-ct-hero .vr-breadcrumbs a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--vr-red); text-underline-offset: 3px; }
.vr-ct-hero__eyebrow {
  font-size: var(--fs-xs); font-weight: var(--w-semibold); letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--vr-red);
}
.vr-ct-hero__title {
  /* --fs = design size; --fit = column width; --cw/--cl (set inline per title) = chars of the
     longest word / line: extended black caps run ≈1em per character, so the title never breaks
     inside a word on any screen. */
  --fs: clamp(2.375rem, 1.1rem + 5.4vw, 6rem);
  --fit: calc(100vw - 2 * var(--gutter));
  margin-top: 14px;
  font-size: min(var(--fs), calc(var(--fit) / var(--cw, 8)));
  font-weight: var(--w-black); font-stretch: var(--stretch-display);
  line-height: 0.94; letter-spacing: 0.01em; text-transform: uppercase;
  text-wrap: balance; overflow-wrap: break-word;
}
@media (min-width: 900px) {
  .vr-ct-hero__title { --fit: min(calc(100vw - 2 * var(--gutter)), var(--container)); font-size: min(var(--fs), calc(var(--fit) / var(--cl, 8))); }
  .vr-ct-hero--image .vr-ct-hero__title { --fit: min(64vw, 940px); }
  .vr-ct-hero--split .vr-ct-hero__title { --fit: calc(47vw - var(--gutter)); }
}
.vr-ct-hero__line { display: block; }
.vr-ct-hero__line.is-accent { color: var(--vr-red); }
.vr-ct-hero__tagline {
  margin-top: 18px;
  font-size: clamp(0.8125rem, 0.7rem + 0.45vw, 1.0625rem); font-weight: var(--w-light);
  letter-spacing: var(--track-wider); word-spacing: 0.12em; line-height: 1.6; text-transform: uppercase;
}
.vr-ct-hero__text { margin-top: 18px; max-width: 54ch; color: var(--bone); font-size: var(--fs-md); line-height: 1.55; }
.vr-ct-hero__meta { margin-top: 14px; font-size: 0.8125rem; color: var(--muted); }
.vr-ct-hero__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 14px; }

/* plain: black canvas header (help / legal) */
.vr-ct-hero--plain { border-bottom: 1px solid var(--line); }
.vr-ct-hero--plain .vr-ct-hero__inner {
  width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto;
  padding: 36px var(--gutter) 48px;
}
.vr-ct-hero--plain::after { /* thin red key line, bottom-left (master: red used deliberately) */
  content: ""; position: absolute; left: var(--gutter); bottom: -1px; width: 56px; height: 3px; background: var(--vr-red);
}
.vr-ct-hero--doc .vr-ct-hero__title { --fs: clamp(2.125rem, 1rem + 4.2vw, 4.5rem); }

/* image: full-bleed campaign image, copy bottom-left */
.vr-ct-hero--image { min-height: min(86svh, 720px); display: flex; align-items: flex-end; }
.vr-ct-hero--image .vr-ct-hero__media { position: absolute; inset: 0; z-index: -1; }
.vr-ct-hero--image .vr-ct-hero__media > picture { position: absolute; inset: 0; }
.vr-ct-hero--image .vr-ct-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.vr-ct-hero--image .vr-ct-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 42%, rgba(0, 0, 0, 0.15) 75%, rgba(0, 0, 0, 0.1) 100%);
}
.vr-ct-hero--image .vr-ct-hero__content { width: 100%; }
.vr-ct-hero--image .vr-ct-hero__inner {
  width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto;
  padding: 120px var(--gutter) 44px;
}
.vr-ct-hero--image .vr-ct-hero__eyebrow { color: var(--white); }

/* split: copy left, portrait campaign image right */
.vr-ct-hero--split { display: flex; flex-direction: column; }
.vr-ct-hero--split .vr-ct-hero__media { position: relative; aspect-ratio: 4 / 5; max-height: 72svh; width: 100%; overflow: hidden; background: var(--ink-900); }
.vr-ct-hero--split .vr-ct-hero__media > picture { position: absolute; inset: 0; }
.vr-ct-hero--split .vr-ct-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.vr-ct-hero--split .vr-ct-hero__media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
}
.vr-ct-hero--split .vr-ct-hero__content { position: relative; margin-top: -72px; }
.vr-ct-hero--split .vr-ct-hero__inner { padding: 0 var(--gutter) 48px; }
.vr-ct-hero--split .vr-ct-hero__title { --fs: clamp(2.25rem, 1rem + 4.6vw, 5.25rem); }

@media (min-width: 900px) {
  .vr-ct-hero--plain .vr-ct-hero__inner { padding-top: clamp(40px, 4.4vw, 72px); padding-bottom: clamp(48px, 5vw, 84px); }
  .vr-ct-hero--image { min-height: clamp(480px, calc(560 * var(--uw)), 820px); }
  .vr-ct-hero--image .vr-ct-hero__media::after {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.6) 34%, rgba(0, 0, 0, 0.12) 64%, rgba(0, 0, 0, 0) 100%),
      linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%);
  }
  .vr-ct-hero--image .vr-ct-hero__inner { padding-bottom: clamp(48px, 6vw, 96px); }
  .vr-ct-hero--split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); min-height: clamp(520px, calc(100svh - var(--header-h) - var(--annc-h, 0px)), 860px); }
  .vr-ct-hero--split .vr-ct-hero__media { order: 2; aspect-ratio: auto; max-height: none; height: 100%; }
  .vr-ct-hero--split .vr-ct-hero__media::after { inset: 0 auto 0 0; width: 30%; height: auto; background: linear-gradient(90deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0)); }
  .vr-ct-hero--split .vr-ct-hero__content { order: 1; margin-top: 0; display: flex; align-items: center; }
  .vr-ct-hero--split .vr-ct-hero__inner { padding: 56px clamp(24px, 4vw, 72px) 56px var(--gutter); }
}
@media (min-width: 1024px) {
  .vr-ct-hero--plain::after { left: var(--gutter); }
}

/* ===================================================================
   Our story
   =================================================================== */
.vr-ct-manifesto { padding-block: clamp(72px, 9vw, 150px); text-align: center; border-bottom: 1px solid var(--line); }
.vr-ct-manifesto__line {
  font-size: clamp(1.875rem, 0.6rem + 5.6vw, 6.25rem); font-weight: var(--w-black); font-stretch: var(--stretch-display);
  line-height: 0.98; letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance;
}
.vr-ct-manifesto__line.is-accent { color: var(--vr-red); }

.vr-ct-split { display: grid; background: var(--black); }
.vr-ct-split__media { position: relative; aspect-ratio: 830 / 604; overflow: hidden; background: var(--ink-900); }
.vr-ct-split__media > picture { position: absolute; inset: 0; }
.vr-ct-split__media img { width: 100%; height: 100%; object-fit: cover; }
.vr-ct-split__body { padding: 40px var(--gutter) 56px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.vr-ct-split__title {
  margin-top: 12px;
  font-size: clamp(1.875rem, 1.1rem + 2.8vw, 3.5rem); font-weight: var(--w-black); font-stretch: var(--stretch-display);
  line-height: 0.98; text-transform: uppercase;
}
.vr-ct-split__text { margin-top: 16px; max-width: 40ch; color: var(--bone); font-size: var(--fs-md); }
.vr-ct-split__actions { margin-top: 24px; }
@media (min-width: 900px) {
  .vr-ct-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .vr-ct-split__body { padding: 48px clamp(32px, 5vw, 96px); }
}

.vr-ct-tiles { padding-block: var(--gap-campaign); background: var(--black); }
.vr-ct-tiles .vr-tiles--3 > .vr-tile:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16 / 11; }
@media (min-width: 600px) {
  .vr-ct-tiles .vr-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vr-ct-tiles .vr-tiles--3 > .vr-tile:nth-child(3) { grid-column: auto; aspect-ratio: 248 / 364; }
}
@media (min-width: 901px) {
  .vr-ct-tiles .vr-tile { height: clamp(440px, 40vw, 720px); }
  .vr-ct-tiles .vr-tile__text { left: clamp(20px, 2.2vw, 36px); bottom: clamp(20px, 2.2vw, 36px); }
  .vr-ct-tiles .vr-tile__title { font-size: clamp(22px, 2.1vw, 34px); }
  .vr-ct-tiles .vr-tile__lines { margin-top: 10px; font-size: clamp(10px, 0.85vw, 13px); }
  .vr-ct-tiles .vr-tile__btn { margin-top: 16px; }
  .vr-ct-tiles .vr-tile .vr-btn--sm { min-height: 38px; --btn-pad: 18px; font-size: 11px; gap: 10px; }
}

/* ===================================================================
   Create with us
   =================================================================== */
.vr-ct-apply { padding-block: clamp(64px, 8vw, 128px); border-top: 1px solid var(--line); }
.vr-ct-apply__grid { display: grid; gap: 36px; }
.vr-ct-apply__title {
  margin-top: 12px;
  font-size: clamp(2rem, 1rem + 3.6vw, 4.25rem); font-weight: var(--w-black); font-stretch: var(--stretch-display);
  line-height: 0.96; text-transform: uppercase; text-wrap: balance;
}
.vr-ct-apply__text { margin-top: 18px; color: var(--bone); max-width: 44ch; font-size: var(--fs-md); }
.vr-ct-apply__account { margin-top: 18px; color: var(--muted); font-size: 0.875rem; max-width: 44ch; }
.vr-ct-apply__account a { color: var(--white); }
.vr-ct-apply__panel { background: var(--ink-900); border: 1px solid var(--line); padding: 24px 18px 28px; }
@media (min-width: 1000px) {
  .vr-ct-apply__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
  .vr-ct-apply__intro { position: sticky; top: calc(var(--header-h) + 40px); }
  .vr-ct-apply__panel { padding: 40px 40px 36px; }
}

/* ===================================================================
   Forms (contact + application)
   =================================================================== */
.vr-ct-form__grid { display: grid; gap: 20px 16px; }
.vr-ct-form__hint { font-size: 0.75rem; color: var(--muted); }
.vr-ct-form .vr-select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; }
.vr-ct-form .vr-select option { background: var(--ink-800); color: var(--white); }
.vr-ct-form .vr-textarea[aria-invalid="true"], .vr-ct-form .vr-select[aria-invalid="true"] { border-color: var(--vr-red); }
.vr-ct-form__foot { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.vr-ct-form__legal { font-size: 0.75rem; color: var(--muted); }
.vr-ct-form__legal a { color: var(--bone); }
@media (min-width: 640px) {
  .vr-ct-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vr-ct-form__field--wide { grid-column: 1 / -1; }
}
.vr-ct-success { padding: 8px 0; outline: none; }
.vr-ct-success__title {
  margin-top: 12px; font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); font-weight: var(--w-black); font-stretch: var(--stretch-display);
  line-height: 1; text-transform: uppercase;
}
.vr-ct-success__text { margin-top: 14px; color: var(--bone); font-size: var(--fs-md); }
.vr-ct-success__actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }

/* ===================================================================
   Contact
   =================================================================== */
.vr-ct-contact__grid { display: grid; gap: 48px; }
.vr-ct-contact__panel { min-width: 0; }
.vr-ct-contact__aside { display: grid; gap: 0; align-content: start; }
.vr-ct-info { border-top: 1px solid var(--line); padding: 20px 0 24px; color: var(--bone); }
.vr-ct-info p + p { margin-top: 8px; }
.vr-ct-info__title {
  margin-bottom: 10px; font-size: var(--fs-xs); font-weight: var(--w-semibold);
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--muted);
}
.vr-ct-info__big { font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem); font-weight: var(--w-heavy); font-stretch: 105%; overflow-wrap: anywhere; }
.vr-ct-info__big a { color: var(--white); text-decoration: underline; text-decoration-color: var(--vr-red); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.vr-ct-info__small { font-size: 0.8125rem; }
.vr-ct-info__links { display: grid; gap: 2px; }
@media (min-width: 1000px) {
  .vr-ct-contact__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 80px; }
  .vr-ct-contact__aside { position: sticky; top: calc(var(--header-h) + 32px); }
}

/* ===================================================================
   FAQ (native <details>)
   =================================================================== */
.vr-ct-faq { border-top: 1px solid var(--line); }
.vr-ct-faq__item { border-bottom: 1px solid var(--line); }
.vr-ct-faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0; font-size: 1rem; font-weight: var(--w-bold); line-height: 1.35; color: var(--white);
}
.vr-ct-faq__q::-webkit-details-marker { display: none; }
.vr-ct-faq__q:hover span:first-child { text-decoration: underline; text-decoration-color: var(--vr-red); text-underline-offset: 4px; }
.vr-ct-faq__icon { position: relative; width: 14px; height: 14px; flex: none; }
.vr-ct-faq__icon::before, .vr-ct-faq__icon::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: var(--white);
  transition: transform var(--dur) var(--ease);
}
.vr-ct-faq__icon::after { transform: rotate(90deg); }
.vr-ct-faq__item[open] .vr-ct-faq__icon::after { transform: rotate(0deg); }
.vr-ct-faq__item[open] .vr-ct-faq__icon::before { background: var(--vr-red); }
.vr-ct-faq__item[open] .vr-ct-faq__icon::after { background: var(--vr-red); }
.vr-ct-faq__a { padding: 0 0 22px; max-width: 70ch; color: var(--bone); line-height: 1.65; }
.vr-ct-faq__a p + p { margin-top: 0.8em; }
.vr-ct-faq__a a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--vr-red); }
@media (min-width: 900px) { .vr-ct-faq__q { font-size: 1.0625rem; padding: 24px 0; } }

.vr-ct-faqpage__grid { display: grid; gap: 32px; }
.vr-ct-faqgroup { scroll-margin-top: calc(var(--header-h) + 16px); }
.vr-ct-faqgroup + .vr-ct-faqgroup { margin-top: 56px; }
.vr-ct-faqgroup__title {
  margin-bottom: 16px; font-size: clamp(1.375rem, 1rem + 1.4vw, 2.125rem); font-weight: var(--w-black); font-stretch: var(--stretch-display);
  line-height: 1; text-transform: uppercase;
}
@media (min-width: 1000px) {
  .vr-ct-faqpage__grid { grid-template-columns: 240px minmax(0, 1fr); gap: 72px; }
  .vr-ct-faqpage__groups { max-width: 880px; }
}

.vr-ct-more { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); color: var(--bone); }
.vr-ct-more__title {
  font-size: clamp(1.625rem, 1rem + 2.2vw, 2.75rem); font-weight: var(--w-black); font-stretch: var(--stretch-display);
  line-height: 1; text-transform: uppercase; color: var(--white);
}
.vr-ct-more p { margin-top: 12px; max-width: 56ch; }
.vr-ct-more__actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 14px; }

/* ===================================================================
   Table of contents + long-form prose (legal / shipping / cookies)
   =================================================================== */
.vr-ct-toc { min-width: 0; }
.vr-ct-toc__title {
  margin-bottom: 10px; font-size: var(--fs-xs); font-weight: var(--w-semibold);
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--muted);
}
.vr-ct-toc__list { border-top: 1px solid var(--line); }
.vr-ct-toc__list li { border-bottom: 1px solid var(--line); }
.vr-ct-toc__link {
  display: flex; gap: 12px; align-items: baseline; padding: 11px 0;
  font-size: 0.8125rem; font-weight: var(--w-semibold); letter-spacing: 0.02em; color: var(--bone);
  transition: color var(--dur) var(--ease);
}
.vr-ct-toc__num { font-stretch: var(--stretch-condensed); font-weight: var(--w-bold); color: var(--muted); min-width: 2ch; }
.vr-ct-toc__link:hover { color: var(--white); }
.vr-ct-toc__link[aria-current="true"] { color: var(--white); }
.vr-ct-toc__link[aria-current="true"] .vr-ct-toc__num, .vr-ct-toc__link:hover .vr-ct-toc__num { color: var(--vr-red); }
@media (max-width: 999px) {
  .vr-ct-toc--chips .vr-ct-toc__list { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
  .vr-ct-toc--chips .vr-ct-toc__list li { border: 0; }
  .vr-ct-toc--chips .vr-ct-toc__link { border: 1px solid var(--line-strong); padding: 9px 14px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
  .vr-ct-toc--chips .vr-ct-toc__num { display: none; }
}
@media (min-width: 1000px) {
  .vr-ct-toc { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
}

.vr-ct-doc { display: grid; gap: 40px; padding-block: 40px var(--s-9); }
.vr-ct-prose { max-width: 70ch; min-width: 0; color: var(--bone); font-size: 1.0625rem; line-height: 1.72; }
.vr-ct-prose__section { padding-top: 32px; scroll-margin-top: calc(var(--header-h) + 16px); }
.vr-ct-prose__section + .vr-ct-prose__section { margin-top: 32px; border-top: 1px solid var(--line); }
.vr-ct-prose__section:first-of-type { padding-top: 0; }
.vr-ct-prose h2 {
  display: flex; gap: 14px; align-items: baseline;
  margin-bottom: 14px; color: var(--white);
  font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem); font-weight: var(--w-heavy); font-stretch: 112%;
  line-height: 1.2; letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance;
}
.vr-ct-prose__num { color: var(--vr-red); font-stretch: var(--stretch-condensed); font-weight: var(--w-bold); flex: none; }
.vr-ct-prose h3 { margin: 1.4em 0 0.4em; color: var(--white); font-size: 1.0625rem; font-weight: var(--w-bold); }
.vr-ct-prose p + p, .vr-ct-prose p + ul, .vr-ct-prose ul + p, .vr-ct-prose p + .vr-ct-table-wrap, .vr-ct-prose .vr-ct-table-wrap + p, .vr-ct-prose p + .vr-ct-consent { margin-top: 1em; }
.vr-ct-prose ul { padding-left: 1.2em; }
.vr-ct-prose li + li { margin-top: 0.35em; }
.vr-ct-prose li::marker { color: var(--vr-red); }
.vr-ct-prose strong { color: var(--white); font-weight: var(--w-bold); }
.vr-ct-prose a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--vr-red); overflow-wrap: anywhere; }
.vr-ct-prose a:hover { text-decoration-thickness: 2px; }
.vr-ct-prose code, .vr-ct-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85em;
  background: var(--ink-700); color: var(--white); padding: 0.1em 0.4em; border-radius: var(--radius-1); overflow-wrap: anywhere;
}
.vr-ct-address { font-style: normal; margin-top: 1em; padding-left: 16px; border-left: 2px solid var(--vr-red); }
.vr-ct-prose__outro { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
@media (min-width: 1000px) {
  .vr-ct-doc { grid-template-columns: 260px minmax(0, 1fr); gap: 80px; padding-top: 64px; }
}

/* Tables (size guide, privacy, cookies) */
.vr-ct-table-wrap { width: 100%; overflow-x: auto; }
.vr-ct-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.vr-ct-table th, .vr-ct-table td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); }
.vr-ct-table thead th {
  font-size: var(--fs-xs); font-weight: var(--w-semibold); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--muted);
  border-bottom-color: var(--line-strong); padding-bottom: 10px;
}
.vr-ct-table tbody th { color: var(--white); font-weight: var(--w-bold); }
.vr-ct-table__link { color: var(--white); text-transform: uppercase; letter-spacing: 0.02em; font-stretch: 110%; font-weight: var(--w-heavy); }
.vr-ct-table__link:hover { text-decoration: underline; text-decoration-color: var(--vr-red); text-underline-offset: 4px; }
.vr-ct-table tbody th .vr-status { margin-left: 8px; vertical-align: 2px; }
.vr-ct-table td { color: var(--bone); }
.vr-ct-table__note { display: block; margin-top: 4px; font-size: 0.8125rem; font-weight: var(--w-regular); color: var(--muted); }
.vr-ct-table__muted { color: var(--muted); }
.vr-ct-table--doc { font-size: 0.9375rem; }
.vr-ct-table--doc td:first-child { color: var(--white); }

.vr-ct-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.vr-ct-sizes li {
  display: inline-grid; place-items: center; min-width: 42px; height: 34px; padding: 0 10px;
  border: 1px solid var(--line-strong); font-size: 0.75rem; font-weight: var(--w-bold); letter-spacing: 0.06em; color: var(--white);
}

.vr-ct-family + .vr-ct-family { margin-top: 56px; }
.vr-ct-family__title {
  margin-bottom: 12px; font-size: clamp(1.375rem, 1rem + 1.4vw, 2.125rem); font-weight: var(--w-black); font-stretch: var(--stretch-display);
  line-height: 1; text-transform: uppercase;
}
.vr-ct-sizeguide .vr-ct-table th:first-child { width: 34%; }
.vr-ct-sizeguide .vr-ct-table td:nth-child(2) { width: 33%; }

/* Small screens: stacked rows (no horizontal scroll) */
@media (max-width: 699px) {
  .vr-ct-sizeguide .vr-ct-table thead, .vr-ct-table--cookies thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .vr-ct-sizeguide .vr-ct-table, .vr-ct-sizeguide .vr-ct-table tbody, .vr-ct-sizeguide .vr-ct-table tr,
  .vr-ct-table--cookies, .vr-ct-table--cookies tbody, .vr-ct-table--cookies tr { display: block; width: 100%; }
  .vr-ct-sizeguide .vr-ct-table tr, .vr-ct-table--cookies tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .vr-ct-sizeguide .vr-ct-table th, .vr-ct-sizeguide .vr-ct-table td,
  .vr-ct-table--cookies td { display: block; width: auto !important; border: 0; padding: 4px 0; }
  .vr-ct-sizeguide .vr-ct-table td.is-empty { display: none; }
  .vr-ct-sizeguide .vr-ct-table td[data-label]::before, .vr-ct-table--cookies td[data-label]::before {
    content: attr(data-label); display: block; margin: 8px 0 4px;
    font-size: var(--fs-xs); font-weight: var(--w-semibold); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--muted);
  }
}

/* Cookie choice panel */
.vr-ct-consent { border: 1px solid var(--line); background: var(--ink-900); padding: 20px; display: grid; gap: 14px; }
.vr-ct-consent__status { color: var(--white); font-weight: var(--w-semibold); }
.vr-ct-consent__actions { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.vr-ct-consent [aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--white); }

/* ===================================================================
   404
   =================================================================== */
.vr-ct-404 { display: grid; background: var(--black); min-height: calc(100svh - var(--header-h) - var(--annc-h, 0px)); }
.vr-ct-404__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--ink-900); }
.vr-ct-404__media > picture { position: absolute; inset: 0; }
.vr-ct-404__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.vr-ct-404__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 55%); }
.vr-ct-404__body { position: relative; padding: 0 var(--gutter) 56px; margin-top: -48px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.vr-ct-404__code {
  color: var(--vr-red); font-size: clamp(4rem, 2rem + 8vw, 9rem); font-weight: var(--w-bold); font-stretch: var(--stretch-condensed); line-height: 0.85;
}
.vr-ct-404__title {
  margin-top: 10px;
  font-size: clamp(2.25rem, 0.9rem + 5vw, 5.75rem); font-weight: var(--w-black); font-stretch: var(--stretch-display);
  line-height: 0.94; text-transform: uppercase;
}
.vr-ct-404__title span { display: block; }
.vr-ct-404__tagline {
  margin-top: 20px; font-size: clamp(0.8125rem, 0.7rem + 0.45vw, 1.0625rem); font-weight: var(--w-light);
  letter-spacing: var(--track-wider); line-height: 1.6; text-transform: uppercase;
}
.vr-ct-404__text { margin-top: 14px; color: var(--bone); max-width: 46ch; }
.vr-ct-404__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 14px; }
.vr-ct-404__help { margin-top: 28px; font-size: 0.875rem; color: var(--muted); }
.vr-ct-404__help a { color: var(--bone); }
@media (min-width: 900px) {
  .vr-ct-404 { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); min-height: clamp(560px, calc(100svh - var(--header-h) - var(--annc-h, 0px)), 900px); }
  .vr-ct-404__media { aspect-ratio: auto; }
  .vr-ct-404__media::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.85) 100%); }
  .vr-ct-404__body { margin-top: 0; padding: 64px clamp(32px, 6vw, 112px); }
}

@media (prefers-reduced-motion: reduce) {
  .vr-ct-partner__media img { transition: none; }
  .vr-ct-partner:hover .vr-ct-partner__media img { transform: none; }
}

/* 85-partners.css */
/* Vision Rebel — /partner-stores/ and /create-with-us/, soft layout (2026-10-07, "less busy").
   One short header, plain sections with lots of air, few lines, red only on the main button.
   Classes: .vr-sh (header + closing CTA) · .vr-soft-* (headings, points, steps) · .vr-pt-* · .vr-cw-*. */

/* ===================================================================
   Soft header (.vr-sh)
   =================================================================== */
.vr-sh { position: relative; isolation: isolate; overflow: hidden; background: var(--black); color: var(--white); }
.vr-sh__media { position: relative; aspect-ratio: 4 / 3; max-height: 48svh; overflow: hidden; background: var(--ink-900); }
.vr-sh__media > picture { position: absolute; inset: 0; }
.vr-sh__media img { width: 100%; height: 100%; object-fit: cover; }
.vr-sh__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 45%);
}
.vr-sh__body { display: flex; flex-direction: column; padding-bottom: 48px; }
.vr-sh .vr-breadcrumbs { margin: 18px 0 14px; }
.vr-sh .vr-breadcrumbs a { text-decoration: none; }
.vr-sh .vr-breadcrumbs a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.vr-sh__copy { display: grid; justify-items: start; gap: 14px; }
.vr-sh__title {
  font-stretch: var(--stretch-title); font-weight: var(--w-heavy);
  font-size: clamp(2.25rem, 9vw, 3.25rem); line-height: 0.98; text-transform: uppercase;
}
.vr-sh__text { max-width: 46ch; color: var(--bone); font-size: var(--fs-md); line-height: 1.55; }
.vr-sh__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

@media (min-width: 901px) {
  .vr-sh { display: flex; min-height: clamp(340px, 46svh, 500px); }
  .vr-sh--plain { min-height: 0; }
  .vr-sh__media { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; aspect-ratio: auto; max-height: none; }
  .vr-sh__media::after { background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0) 50%); }
  .vr-sh__body { width: 100%; padding-top: 22px; padding-bottom: 56px; }
  .vr-sh .vr-breadcrumbs { margin: 0 0 auto; }
  .vr-sh__copy { margin-block: auto; max-width: 44%; gap: 18px; }
  .vr-sh__title { font-size: clamp(3rem, 4.6vw, 4.75rem); }
}

/* Closing call to action: one line, one button */
.vr-sh-cta { border-top: 1px solid var(--line); }
.vr-sh-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-block: 56px; }
.vr-sh-cta__title { font-stretch: var(--stretch-title); font-weight: var(--w-heavy); font-size: var(--fs-xl); text-transform: uppercase; line-height: 1.05; }
.vr-sh-cta__text { margin-top: 6px; color: var(--muted); }

/* ===================================================================
   Shared soft blocks
   =================================================================== */
.vr-soft-h2 {
  margin-bottom: 28px;
  font-stretch: var(--stretch-title); font-weight: var(--w-heavy); font-size: var(--fs-xl);
  line-height: 1.05; text-transform: uppercase;
}
.vr-soft-points { display: grid; gap: 26px; }
.vr-soft-points h3, .vr-soft-steps h3 { font-size: 0.9375rem; font-weight: var(--w-bold); letter-spacing: 0.02em; text-transform: uppercase; }
.vr-soft-points p, .vr-soft-steps p { margin-top: 6px; color: var(--muted); max-width: 42ch; line-height: 1.55; }
.vr-soft-points a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }
.vr-soft-steps { display: grid; gap: 28px; }
.vr-soft-steps__num {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%;
  font-size: 0.8125rem; font-weight: var(--w-bold); color: var(--white);
}
@media (min-width: 800px) {
  .vr-soft-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 40px; }
  .vr-soft-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; }
}
.page-soft .vr-ct-faq__q { font-weight: var(--w-semibold); }

/* ===================================================================
   Partner stores
   =================================================================== */
.vr-pt-stores { padding-block: 24px 80px; }
.vr-pt-list { display: grid; gap: 72px; }

/* one store = photo mosaic (1 large + 2 small) + text column */
.vr-pt-feat { display: grid; gap: 28px; align-items: center; cursor: pointer; }
.vr-pt-feat__media { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
.vr-pt-feat__shot { position: relative; overflow: hidden; background: var(--ink-800); }
.vr-pt-feat__shot:first-child { grid-row: span 2; aspect-ratio: 4 / 5; }
.vr-pt-feat__shot > picture { position: absolute; inset: 0; }
.vr-pt-feat__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22, 0.7, 0.2, 1); }
.vr-pt-feat:hover .vr-pt-feat__shot img { transform: scale(1.03); }
.vr-pt-feat.is-single .vr-pt-feat__media { grid-template-columns: 1fr; grid-template-rows: auto; }
.vr-pt-feat.is-single .vr-pt-feat__shot:first-child { grid-row: auto; aspect-ratio: 16 / 9; }
.vr-pt-feat__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.vr-pt-feat__eyebrow { font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: 0.2em; text-transform: uppercase; color: var(--vr-red); }
.vr-pt-feat__eyebrow span { color: var(--muted); }
.vr-pt-feat__name { font-stretch: var(--stretch-title); font-weight: var(--w-heavy); font-size: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); line-height: 0.95; text-transform: uppercase; }
.vr-pt-feat__link { display: block; color: inherit; }
.vr-pt-feat__logo { display: block; width: clamp(220px, 22vw, 320px); max-width: 100%; aspect-ratio: 1024 / 432; position: relative; }
.vr-pt-feat__logo > picture { position: absolute; inset: 0; }
.vr-pt-feat__logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; mix-blend-mode: screen; }
.vr-pt-feat__tagline { font-weight: var(--w-heavy); font-stretch: var(--stretch-title); font-size: var(--fs-lg, 1.25rem); text-transform: uppercase; letter-spacing: 0.04em; }
.vr-pt-feat__bio { max-width: 42ch; color: var(--bone); line-height: 1.6; padding-left: 14px; border-left: 2px solid var(--vr-red); }
.vr-pt-feat__actions { margin-top: 8px; }
@media (min-width: 900px) {
  .vr-pt-feat { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 88px); }
  .vr-pt-feat.is-flip .vr-pt-feat__media { order: 2; }
}

/* how it works: three numbered steps */
.vr-pt-how { border-top: 1px solid var(--line); padding-block: 72px; }
.vr-pt-steps { display: grid; gap: 1px; margin-top: 32px; background: var(--line); border: 1px solid var(--line); }
.vr-pt-steps li { display: grid; gap: 8px; align-content: start; padding: 28px clamp(20px, 2.4vw, 36px) 32px; background: var(--black); }
.vr-pt-steps__n { font-stretch: var(--stretch-title); font-weight: var(--w-heavy); font-size: 2.25rem; line-height: 1; color: var(--vr-red); }
.vr-pt-steps h3 { margin-top: 10px; font-size: 0.9375rem; font-weight: var(--w-bold); letter-spacing: 0.04em; text-transform: uppercase; }
.vr-pt-steps p { color: var(--muted); max-width: 40ch; line-height: 1.55; }
.vr-pt-steps a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .vr-pt-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* become a partner: full-bleed campaign image band */
.vr-pt-join { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(440px, 62svh, 640px); background: var(--ink-900); cursor: pointer; }
.vr-pt-join.is-plain { min-height: 0; }
.vr-pt-join__media { position: absolute; inset: 0; z-index: -1; }
.vr-pt-join__media > picture { position: absolute; inset: 0; }
.vr-pt-join__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.22, 0.7, 0.2, 1); }
.vr-pt-join:hover .vr-pt-join__media img { transform: scale(1.02); }
.vr-pt-join__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.15) 100%);
}
.vr-pt-join__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-block: 72px; }
.vr-pt-join__inner::before { content: ""; width: 44px; height: 8px; background: var(--vr-red); margin-bottom: 6px; }
.vr-pt-join__eyebrow { font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone); }
.vr-pt-join__title {
  display: flex; flex-direction: column;
  font-stretch: var(--stretch-title); font-weight: var(--w-heavy); text-transform: uppercase;
  font-size: clamp(2.5rem, 1.4rem + 4vw, 5rem); line-height: 0.92; letter-spacing: 0.005em;
}
.vr-pt-join__accent { color: var(--vr-red); }
.vr-pt-join__text { max-width: 40ch; color: var(--bone); line-height: 1.55; }
.vr-pt-join__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (min-width: 900px) {
  .vr-pt-join__media::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0) 75%), linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%); }
  .vr-pt-join { align-items: center; }
}

/* ===================================================================
   Create with us
   =================================================================== */
.vr-cw-how, .vr-cw-handle, .vr-cw-faq { padding-block: 64px; border-top: 1px solid var(--line); }
.vr-cw-how { border-top: 0; }
.vr-cw-faq__inner { max-width: calc(860px + 2 * var(--gutter)); }
.page-soft .vr-ct-apply__title { font-stretch: var(--stretch-title); font-weight: var(--w-heavy); font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem); line-height: 1; }
@media (min-width: 900px) {
  .vr-cw-how, .vr-cw-handle, .vr-cw-faq { padding-block: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .vr-pt-feat:hover .vr-pt-feat__shot img, .vr-pt-join:hover .vr-pt-join__media img { transform: none; }
}
.vr-pt-feat .vr-pt-feat__actions { display: flex; flex-wrap: wrap; gap: 10px 12px; }

/* ===================================================================
   Rebel Studio (/create-with-us/) — the store programme, said in one glance
   =================================================================== */
/* programme name: big and readable (2026-10-07: the small caps line was illegible) */
.vr-rs-brand { display: grid; gap: 8px; }
.vr-rs-brand__name { justify-self: start; padding: 8px 14px 7px; background: var(--vr-red); color: var(--white); font-weight: var(--w-black); font-stretch: var(--stretch-display); text-transform: uppercase; font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem); letter-spacing: 0.06em; line-height: 1; }
.vr-rs-brand__line { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); font-weight: var(--w-heavy); text-transform: uppercase; letter-spacing: 0.04em; color: var(--white); }
.vr-rs-label { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem); font-weight: var(--w-heavy); letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); }
.vr-rs-label::before { content: ""; width: 32px; height: 6px; background: var(--vr-red); }
.vr-rs-accent { color: var(--vr-red); }
.vr-rs-h2 { font-stretch: var(--stretch-title); font-weight: var(--w-heavy); text-transform: uppercase; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); line-height: 1; }

.vr-rs-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--black); }
.vr-rs-hero__media { position: absolute; inset: 0; z-index: -1; }
.vr-rs-hero__media > picture { position: absolute; inset: 0; }
.vr-rs-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.vr-rs-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.15) 100%), linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 35%); }
.vr-rs-hero__body { display: flex; flex-direction: column; min-height: clamp(560px, 82svh, 800px); padding-bottom: 32px; }
.vr-rs-hero .vr-breadcrumbs { margin: 18px 0 0; }
.vr-rs-hero__copy { display: grid; justify-items: start; gap: 20px; margin-block: auto; padding-block: 48px; max-width: 720px; }
.vr-rs-hero__title { display: grid; font-weight: var(--w-black); font-stretch: var(--stretch-display); text-transform: uppercase; font-size: clamp(2.5rem, 1.4rem + 4vw, 5rem); line-height: 0.92; }
.vr-rs-hero__title span { white-space: nowrap; }
.vr-rs-hero__text { max-width: 46ch; color: var(--bone); font-size: var(--fs-md); line-height: 1.55; }
.vr-rs-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.vr-rs-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.vr-rs-facts li { display: grid; gap: 4px; padding: 16px 18px; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(6px); }
.vr-rs-facts li { padding: 18px 20px; }
.vr-rs-facts b { font-size: 1.0625rem; font-weight: var(--w-heavy); text-transform: uppercase; letter-spacing: 0.03em; }
.vr-rs-facts span { font-size: 0.9375rem; color: var(--bone); }

.vr-rs-split, .vr-rs-steps, .vr-rs-example { padding-block: clamp(64px, 8vw, 112px); border-top: 1px solid var(--line); }
.vr-rs-split__grid { display: grid; gap: 16px; margin-top: 36px; }
.vr-rs-side { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); }
.vr-rs-side--we { background: var(--white); color: var(--black); border-color: var(--white); }
.vr-rs-side__k { display: inline-block; margin-bottom: 20px; padding: 8px 14px; font-size: 1rem; font-weight: var(--w-black); letter-spacing: 0.16em; text-transform: uppercase; background: var(--white); color: var(--black); }
.vr-rs-side--we .vr-rs-side__k { background: var(--vr-red); color: var(--white); }
.vr-rs-side ul { display: grid; gap: 16px; }
.vr-rs-side li { display: grid; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.vr-rs-side--we li { border-color: rgba(0, 0, 0, 0.12); }
.vr-rs-side li:last-child { padding-bottom: 0; border-bottom: 0; }
.vr-rs-side b { font-size: 1.125rem; font-weight: var(--w-heavy); text-transform: uppercase; letter-spacing: 0.03em; }
.vr-rs-side span { font-size: 1rem; color: var(--muted); line-height: 1.5; }
.vr-rs-side--we span { color: #4a4a4a; }

.vr-rs-steps__list { display: grid; gap: 1px; margin-top: 36px; background: var(--line); border: 1px solid var(--line); counter-reset: rs; }
.vr-rs-steps__list li { display: grid; align-content: start; gap: 10px; padding: 28px clamp(20px, 2.4vw, 32px) 32px; background: var(--black); }
.vr-rs-steps__n { font-weight: var(--w-black); font-stretch: var(--stretch-display); font-size: 2.5rem; line-height: 1; color: var(--vr-red); }
.vr-rs-steps__list h3 { font-size: 1.125rem; font-weight: var(--w-heavy); text-transform: uppercase; letter-spacing: 0.04em; }
.vr-rs-steps__list p { color: var(--muted); line-height: 1.55; max-width: 34ch; }
.vr-rs-steps__cta { margin-top: 28px; }

.vr-rs-example__grid { display: grid; gap: 28px; align-items: center; }
.vr-rs-example__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-800); }
.vr-rs-example__media > picture { position: absolute; inset: 0; }
.vr-rs-example__media img { width: 100%; height: 100%; object-fit: cover; }
.vr-rs-example__body { display: grid; justify-items: start; gap: 16px; }
.vr-rs-example__meta { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.vr-rs-example__text { max-width: 44ch; color: var(--bone); line-height: 1.6; }
.page-create-with-us .vr-cw-faq { border-top: 1px solid var(--line); }
.page-create-with-us .vr-ct-apply { background: linear-gradient(180deg, var(--black), #0b0002); }

@media (min-width: 900px) {
  .vr-rs-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vr-rs-split__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .vr-rs-side--we ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .vr-rs-side--we li:nth-last-child(2) { padding-bottom: 0; border-bottom: 0; }
  .vr-rs-steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vr-rs-example__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); }
  .vr-rs-example__media { aspect-ratio: 1 / 1; }
}

/* the journey: six big steps, each with what Vision Rebel takes care of */
.vr-rs-flow { display: grid; margin-top: 40px; border-top: 1px solid var(--line); }
.vr-rs-flow__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px clamp(20px, 4vw, 56px); padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--line); }
.vr-rs-flow__n { font-weight: var(--w-black); font-stretch: var(--stretch-display); font-size: clamp(2.75rem, 1.8rem + 3vw, 5rem); line-height: 0.85; color: var(--vr-red); min-width: 1.6em; }
.vr-rs-flow__body { display: grid; gap: 12px; align-content: start; }
.vr-rs-flow__title { font-weight: var(--w-black); font-stretch: var(--stretch-title); text-transform: uppercase; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1; }
.vr-rs-flow__text { max-width: 60ch; color: var(--bone); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.55; }
.vr-rs-flow__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.vr-rs-flow__tags li { padding: 8px 12px; border: 1px solid var(--line-strong); font-size: 0.875rem; font-weight: var(--w-bold); letter-spacing: 0.04em; text-transform: uppercase; }
.vr-rs-flow__step:last-child .vr-rs-flow__tags li { border-color: var(--vr-red); }
.vr-rs-steps__cta { margin-top: 36px; }
@media (min-width: 900px) {
  .vr-rs-flow__step { grid-template-columns: 160px minmax(0, 1fr); align-items: start; }
  .vr-rs-flow__step:hover .vr-rs-flow__n { color: var(--white); }
}

/* the visual path: STEP 1 → STEP 6, who does what at a glance */
.vr-rs-path { padding-block: clamp(64px, 8vw, 112px); border-top: 1px solid var(--line); background: linear-gradient(180deg, #0a0a0a, var(--black)); }
.vr-rs-path__title { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.75rem); }
.vr-rs-path__list { position: relative; display: grid; gap: 14px; margin-top: 44px; counter-reset: rsp; }
.vr-rs-path__step { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 14px 16px; padding: 16px 18px; background: var(--ink-800); border: 1px solid var(--line); }
.vr-rs-path__no { display: grid; justify-items: center; align-content: center; width: 64px; height: 64px; background: var(--white); color: var(--black); line-height: 1; }
.vr-rs-path__no span { font-size: 0.625rem; font-weight: var(--w-black); letter-spacing: 0.16em; text-transform: uppercase; }
.vr-rs-path__no b { font-weight: var(--w-black); font-stretch: var(--stretch-display); font-size: 2rem; }
.vr-rs-path__ico { display: grid; place-items: center; width: 44px; height: 44px; color: var(--white); }
.vr-rs-path__name { font-weight: var(--w-black); font-stretch: var(--stretch-title); text-transform: uppercase; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.05; }
.vr-rs-path__who { grid-column: 3; justify-self: start; padding: 5px 9px; font-size: 0.75rem; font-weight: var(--w-black); letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--white); }
.vr-rs-path__step--we .vr-rs-path__who { background: var(--vr-red); border-color: var(--vr-red); }
.vr-rs-path__step--we .vr-rs-path__no { background: var(--vr-red); color: var(--white); }
.vr-rs-path__step--earn { border-color: var(--vr-red); }
.vr-rs-path__step--earn .vr-rs-path__who { background: var(--white); color: var(--black); }
/* mobile: vertical line between the steps */
.vr-rs-path__step:not(:last-child)::after { content: ""; position: absolute; left: 49px; bottom: -15px; width: 2px; height: 14px; background: var(--vr-red); }
.vr-rs-path__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
@media (min-width: 1100px) {
  .vr-rs-path__list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 34px; }
  .vr-rs-path__list::before { content: ""; position: absolute; left: 8%; right: 8%; top: 74px; height: 2px; background: var(--vr-red); z-index: 0; }
  .vr-rs-path__step { z-index: 1; grid-template-columns: 1fr; justify-items: center; text-align: center; align-content: start; gap: 14px; padding: 26px 14px 22px; }
  .vr-rs-path__no { width: 76px; height: 76px; }
  .vr-rs-path__no b { font-size: 2.5rem; }
  .vr-rs-path__who { grid-column: auto; justify-self: center; margin-top: auto; }
  .vr-rs-path__name { min-height: 2.2em; }
  .vr-rs-path__step:not(:last-child)::after { left: auto; right: -27px; top: 66px; bottom: auto; width: 20px; height: 20px; background: none; border-top: 3px solid var(--vr-red); border-right: 3px solid var(--vr-red); transform: rotate(45deg); }
}
.vr-rs-flow__k { font-size: 0.875rem; font-weight: var(--w-black); letter-spacing: 0.16em; text-transform: uppercase; color: var(--vr-red); }

/* 90-seller.css */
/* ===================================================================
   Seller app (/account/ signed in as a seller) — full screen, no site header/footer.
   Vision Rebel DA, readable for daily work: black menu, light work area, white cards,
   black type, red only as an accent (active item, revenue line, main buttons). Square edges.
   =================================================================== */
html.vr-seller-app body > :not(.sa):not(script):not(template) { display: none !important; }
html.vr-seller-app body { background: #f2f2f0; }

.sa {
  --sa-side: 264px; --sa-bg: #f2f2f0; --sa-card: #ffffff; --sa-ink: #0a0a0a; --sa-text: #2a2a2a; --sa-muted: #6f6f6f; --sa-faint: #a3a3a3;
  --sa-line: #e3e3df; --sa-line-2: #d2d2cd; --sa-soft: #f7f7f5; --sa-green: #11853f; --sa-amber: #a86500;
  min-height: 100svh; color: var(--sa-ink); background: var(--sa-bg); font-family: var(--font-text);
}
.sa ul, .sa ol { list-style: none; margin: 0; padding: 0; }
.sa-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sa-ico { width: 18px; height: 18px; flex: none; }
.sa-ico--sm { width: 14px; height: 14px; }
.sa-muted { color: var(--sa-muted); }
.sa-hint { font-size: 0.8125rem; color: var(--sa-muted); line-height: 1.55; }
.sa-hint a, .sa-hint b { color: var(--sa-ink); }
.sa-hint a { text-decoration: underline; text-underline-offset: 3px; }
.sa-link { font-size: 0.75rem; font-weight: var(--w-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sa-ink); white-space: nowrap; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.sa-link:hover { color: var(--vr-red); }
.sa-textbtn { font-size: 0.75rem; font-weight: var(--w-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sa-ink); text-decoration: underline; text-underline-offset: 4px; }
.sa-textbtn:hover { color: var(--vr-red); }
.sa-lead { color: var(--sa-text); line-height: 1.6; max-width: 60ch; }

/* ---------------------------------------------------------------- sidebar (black, sober) */
.sa-side {
  position: fixed; inset: 0 auto 0 0; z-index: 60; width: var(--sa-side); display: flex; flex-direction: column;
  background: #0b0b0b; color: #fff; overflow-y: auto; scrollbar-width: thin;
}
.sa-brand { display: flex; align-items: center; gap: 10px; padding: 22px 20px 18px; }
.sa-brand__logo img { display: block; width: 150px; height: auto; }
.sa-brand__badge { padding: 3px 7px 2px; border: 1px solid rgba(255, 255, 255, 0.7); font-size: 0.625rem; font-weight: var(--w-black); letter-spacing: 0.18em; text-transform: uppercase; }
.sa-icon-btn.sa-side__close { display: none; margin-left: auto; color: #fff; border-color: rgba(255, 255, 255, 0.2); }

/* shop picker: a card per shop with its logo */
.sa-picker { position: relative; margin: 0 14px 10px; }
.sa-picker__btn, .sa-picker__opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left; color: #fff; }
.sa-picker__btn { background: #171717; border: 1px solid rgba(255, 255, 255, 0.12); }
.sa-picker__btn:hover, .sa-picker.is-open .sa-picker__btn { border-color: rgba(255, 255, 255, 0.4); }
.sa-picker__btn[disabled] { cursor: default; opacity: 1; }
.sa-picker__logo { width: 40px; height: 40px; flex: none; display: grid; place-items: center; overflow: hidden; background: #fff; border: 1px solid rgba(255, 255, 255, 0.15); color: #000; font-weight: var(--w-black); text-transform: uppercase; }
.sa-picker__logo img { width: 100%; height: 100%; object-fit: cover; }
.sa-picker__main { display: grid; gap: 3px; min-width: 0; flex: 1; }
.sa-picker__name { font-size: 0.875rem; font-weight: var(--w-heavy); text-transform: uppercase; letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-picker__meta { display: flex; align-items: center; gap: 6px; font-size: 0.6875rem; color: rgba(255, 255, 255, 0.6); overflow: hidden; white-space: nowrap; }
.sa-picker__dot { width: 7px; height: 7px; flex: none; background: #8a8a8a; }
.sa-picker__dot--ok { background: #2bd46c; }
.sa-picker__dot--warn { background: #f0a020; }
.sa-picker__chev { width: 14px; height: 14px; flex: none; transition: transform 0.15s; }
.sa-picker.is-open .sa-picker__chev { transform: rotate(180deg); }
.sa-picker__menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 80; display: grid; gap: 2px; padding: 6px; background: #fff; border: 1px solid var(--sa-line-2); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
.sa-picker__menu[hidden] { display: none; }
.sa-picker__head { padding: 6px 8px 8px; font-size: 0.625rem; font-weight: var(--w-bold); letter-spacing: 0.18em; text-transform: uppercase; color: var(--sa-muted); }
.sa-picker__opt { color: var(--sa-ink); border: 1px solid transparent; }
.sa-picker__opt:hover { background: var(--sa-soft); border-color: var(--sa-line); }
.sa-picker__opt.is-current { border-color: var(--sa-ink); }
.sa-picker__opt .sa-picker__logo { border-color: var(--sa-line); }
.sa-picker__opt .sa-picker__meta { color: var(--sa-muted); }
.sa-picker__check { width: 16px; height: 16px; flex: none; color: var(--sa-ink); }

.sa-nav { display: grid; align-content: start; gap: 2px; padding: 6px 12px 18px; flex: 1; }
.sa-nav__group { margin: 16px 8px 6px; font-size: 0.625rem; font-weight: var(--w-bold); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.sa-nav__link {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left;
  font-size: 0.875rem; font-weight: var(--w-medium); color: rgba(255, 255, 255, 0.72); transition: background-color 0.15s, color 0.15s;
}
.sa-nav__link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.sa-nav__link.is-active { background: rgba(255, 255, 255, 0.1); color: #fff; font-weight: var(--w-bold); }
.sa-nav__link.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--vr-red); }
.sa-count { margin-left: auto; min-width: 20px; padding: 2px 6px; background: var(--vr-red); color: #fff; font-size: 0.6875rem; font-weight: var(--w-black); text-align: center; }
.sa-count[hidden] { display: none; }
.sa-side__foot { display: grid; gap: 2px; padding: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.sa-user { display: flex; align-items: center; gap: 10px; padding: 8px 6px 12px; min-width: 0; }
.sa-user__av { width: 34px; height: 34px; flex: none; display: grid; place-items: center; background: #fff; color: #000; font-weight: var(--w-black); }
.sa-user > span:last-child { display: grid; min-width: 0; }
.sa-user b { font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-user small { font-size: 0.6875rem; color: rgba(255, 255, 255, 0.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- main + top bar */
.sa-main { margin-left: var(--sa-side); min-height: 100svh; display: flex; flex-direction: column; }
.sa-top {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px clamp(16px, 2.4vw, 36px); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--sa-line);
}
.sa-icon-btn.sa-top__burger { display: none; }
.sa-top__title { flex: 1; min-width: 200px; }
.sa-top__title h1 { font-weight: var(--w-black); font-stretch: var(--stretch-display); text-transform: uppercase; font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); line-height: 1; letter-spacing: 0.01em; }
.sa-top__title p { margin-top: 6px; font-size: 0.8125rem; color: var(--sa-muted); }
.sa-top__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sa-icon-btn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--sa-line-2); color: var(--sa-ink); background: #fff; }
.sa-icon-btn:hover { border-color: var(--sa-ink); }
.sa-count--dot { position: absolute; top: -6px; right: -6px; margin: 0; min-width: 18px; padding: 1px 4px; font-size: 0.625rem; }
.sa-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--sa-soft); border: 1px solid var(--sa-line); }
.sa-seg[hidden] { display: none; }
.sa-seg--wrap { flex-wrap: wrap; }
.sa-seg button { height: 32px; padding: 0 12px; font-size: 0.75rem; font-weight: var(--w-bold); letter-spacing: 0.03em; color: var(--sa-muted); white-space: nowrap; }
.sa-seg button:hover { color: var(--sa-ink); }
.sa-seg button[aria-pressed="true"] { background: var(--sa-ink); color: #fff; }
.sa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border: 1px solid transparent; font-size: 0.75rem; font-weight: var(--w-bold); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.sa-btn--primary { background: var(--vr-red); border-color: var(--vr-red); color: #fff; }
.sa-btn--primary:hover { background: var(--vr-red-ink); border-color: var(--vr-red-ink); }
.sa-btn--outline { border-color: var(--sa-ink); color: var(--sa-ink); background: #fff; }
.sa-btn--outline:hover { background: var(--sa-ink); color: #fff; }
.sa-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.sa-btn.is-loading, .sa-textbtn.is-loading { opacity: 0.6; pointer-events: none; }

.sa-bell { position: relative; }
.sa-bell__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; width: min(400px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid var(--sa-line-2); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); }
.sa-bell__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--sa-line); font-size: 0.75rem; font-weight: var(--w-black); letter-spacing: 0.14em; text-transform: uppercase; }
.sa-bell__menu .sa-feed { padding: 4px 8px; }
.sa-bell__menu .sa-empty { padding: 20px 16px; }
.sa-bell__all { display: block; padding: 12px 16px; border-top: 1px solid var(--sa-line); font-size: 0.75rem; font-weight: var(--w-bold); letter-spacing: 0.06em; text-transform: uppercase; }
.sa-bell__all:hover { background: var(--sa-soft); }

.sa-notice { margin: 16px clamp(16px, 2.4vw, 36px) 0; padding: 12px 16px; border-left: 3px solid var(--sa-green); background: #fff; font-size: 0.875rem; box-shadow: 0 1px 0 var(--sa-line); }
.sa-notice.is-error { border-color: var(--vr-red); }
.sa-notice[hidden] { display: none; }

.sa-view { display: grid; align-content: start; gap: 20px; padding: 24px clamp(16px, 2.4vw, 36px) 64px; max-width: 1480px; width: 100%; }
.sa-view:focus { outline: none; }
.sa-loading { display: grid; place-items: center; gap: 14px; padding: 80px 0; color: var(--sa-muted); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; }
.sa-loading span { width: 120px; height: 2px; background: linear-gradient(90deg, transparent, var(--sa-ink), transparent); background-size: 200% 100%; animation: sa-load 1.1s linear infinite; }
@keyframes sa-load { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sa-section-k { margin-top: 4px; font-size: 0.6875rem; font-weight: var(--w-black); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sa-muted); }

/* ---------------------------------------------------------------- KPIs */
.sa-hero { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sa-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.sa-kpi { position: relative; display: grid; align-content: start; gap: 8px; min-width: 0; padding: 16px 18px; background: var(--sa-card); border: 1px solid var(--sa-line); transition: border-color 0.15s, box-shadow 0.15s; }
a.sa-kpi:hover { border-color: var(--sa-ink); }
.sa-kpi__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sa-kpi__ico { width: 16px; height: 16px; color: var(--sa-muted); flex: none; }
.sa-kpi__label { flex: 1; min-width: 0; font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sa-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-kpi__value { font-weight: var(--w-black); font-stretch: var(--stretch-display); font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-kpi__value small { font-size: 0.5em; color: var(--sa-muted); margin-left: 2px; }
.sa-kpi__sub { font-size: 0.75rem; color: var(--sa-muted); }
.sa-kpi__sub b { color: var(--sa-ink); font-weight: var(--w-bold); }
/* hero numbers: black cards with one thin red line — the site's identity, without the red flood */
.sa-kpi--hero { padding: 22px 24px; border: 0; background: #0b0b0b; color: #fff; }
.sa-kpi--hero::before { content: ""; position: absolute; left: 24px; top: 0; width: 40px; height: 3px; background: var(--vr-red); }
.sa-kpi--hero .sa-kpi__label, .sa-kpi--hero .sa-kpi__sub, .sa-kpi--hero .sa-kpi__ico { color: rgba(255, 255, 255, 0.65); }
.sa-kpi--hero .sa-kpi__sub b { color: #fff; }
.sa-kpi--hero .sa-kpi__value { font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); }
a.sa-kpi--hero:hover { background: #161616; }
.sa-delta { padding: 2px 6px; font-size: 0.6875rem; font-weight: var(--w-bold); background: var(--sa-soft); color: var(--sa-muted); white-space: nowrap; }
.sa-delta--up { background: #e5f5ea; color: var(--sa-green); }
.sa-delta--down { background: #fdeaec; color: #c4041d; }

/* ---------------------------------------------------------------- panels + grids */
.sa-grid { display: grid; gap: 20px; align-items: stretch; }
.sa-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sa-grid--main { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.sa-panel { display: flex; flex-direction: column; min-width: 0; background: var(--sa-card); border: 1px solid var(--sa-line); }
.sa-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--sa-line); }
.sa-panel__head h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 0.8125rem; font-weight: var(--w-black); letter-spacing: 0.1em; text-transform: uppercase; }
.sa-panel__head h2 small { font-size: 0.75rem; font-weight: var(--w-medium); letter-spacing: 0; text-transform: none; color: var(--sa-muted); }
.sa-panel__body { flex: 1 1 auto; padding: 16px 18px; display: grid; align-content: start; gap: 14px; min-width: 0; }
.sa-panel__body:has(> .sa-table-wrap:only-child) { padding: 0; }
.sa-panel__body > .sa-btn, .sa-panel__body > a.sa-btn { justify-self: start; }
.sa-empty { padding: 18px 0; color: var(--sa-muted); font-size: 0.875rem; line-height: 1.5; }
.sa-empty__title { color: var(--sa-ink); font-weight: var(--w-black); font-stretch: var(--stretch-heading); text-transform: uppercase; letter-spacing: 0.02em; font-size: 1rem; margin-bottom: 4px; }
.sa-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }

/* tables */
.sa-table-wrap { overflow-x: auto; }
.sa-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.sa-table th { padding: 11px 16px; text-align: left; font-size: 0.625rem; font-weight: var(--w-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sa-muted); background: var(--sa-soft); border-bottom: 1px solid var(--sa-line); white-space: nowrap; }
.sa-table td { padding: 12px 16px; border-bottom: 1px solid var(--sa-line); vertical-align: top; line-height: 1.5; color: var(--sa-text); }
.sa-table td b { color: var(--sa-ink); }
.sa-table tbody tr:last-child td { border-bottom: 0; }
.sa-table tbody tr:hover td { background: #fafaf8; }
.sa-table .is-num { text-align: right; white-space: nowrap; }
.sa-chip { display: inline-block; padding: 3px 7px; border: 1px solid var(--sa-line-2); font-size: 0.625rem; font-weight: var(--w-black); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sa-text); background: #fff; white-space: nowrap; }
.sa-chip--ok { border-color: #bfe3cb; background: #eef8f1; color: var(--sa-green); }
.sa-chip--warn { border-color: #f1d6a8; background: #fdf5e7; color: var(--sa-amber); }
.sa-chip--off { color: var(--sa-faint); }
.sa-chip--red { background: var(--vr-red); border-color: var(--vr-red); color: #fff; }
.sa-prod { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.sa-prod img, .sa-prod__ph { width: 44px; height: 54px; flex: none; object-fit: cover; background: var(--sa-soft); }

/* bars */
.sa-bars { display: grid; gap: 12px; }
.sa-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; }
.sa-bars__label { font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-bars b { font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.sa-bars b small { font-weight: var(--w-medium); color: var(--sa-muted); }
.sa-bars__track { grid-column: 1 / -1; height: 6px; background: var(--sa-soft); }
.sa-bars__fill { display: block; height: 100%; background: #9b9b97; }
.sa-bars__fill.is-top { background: var(--sa-ink); }

/* chart */
.sa-chart { display: grid; gap: 10px; }
.sa-chart svg { width: 100%; height: auto; overflow: visible; }
.sa-chart__grid { stroke: #ececea; stroke-width: 1; }
.sa-chart__axis { fill: var(--sa-muted); font-size: 11px; font-family: var(--font-text); }
.sa-chart__area { opacity: 0.08; }
.sa-chart__line { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.sa-chart__line.is-dashed { stroke-dasharray: 5 4; stroke-width: 1.6; }
.sa-chart__hit { fill: transparent; }
.sa-chart__hit:hover { fill: rgba(0, 0, 0, 0.04); }
.sa-chart__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.75rem; color: var(--sa-muted); }
.sa-chart__legend span { display: inline-flex; align-items: center; gap: 7px; }
.sa-chart__legend i { width: 14px; height: 3px; }

/* balance, calc */
.sa-balance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.sa-balance > div:first-child { grid-column: 1 / -1; padding-bottom: 14px; border-bottom: 1px solid var(--sa-line); }
.sa-balance > div:first-child .sa-balance__v { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); }
.sa-balance__k { font-size: 0.625rem; font-weight: var(--w-bold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sa-muted); }
.sa-balance__v { margin-top: 6px; font-weight: var(--w-black); font-stretch: var(--stretch-display); font-size: 1.25rem; line-height: 1; white-space: nowrap; }
.sa-balance__v--muted { color: var(--sa-text); font-size: 1.125rem; }
.sa-calc { display: grid; border: 1px solid var(--sa-line); }
.sa-calc p { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--sa-line); font-size: 0.875rem; color: var(--sa-text); }
.sa-calc p b { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--sa-ink); }
.sa-calc .sa-calc__total { border-bottom: 0; background: #0b0b0b; color: #fff; font-weight: var(--w-black); text-transform: uppercase; letter-spacing: 0.06em; }
.sa-calc .sa-calc__total b { font-size: 1.125rem; color: #fff; }

/* feed */
.sa-feed { display: grid; }
.sa-feed__item { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 6px; border-bottom: 1px solid var(--sa-line); }
.sa-feed__item:last-child { border-bottom: 0; }
.sa-feed__item.is-new { background: #fbf6f6; box-shadow: inset 3px 0 0 var(--vr-red); }
.sa-feed__item.is-link { cursor: pointer; }
.sa-feed__item.is-link:hover { background: var(--sa-soft); }
.sa-feed__kind { justify-self: start; padding: 3px 6px; border: 1px solid var(--sa-line-2); font-size: 0.5625rem; font-weight: var(--w-black); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sa-text); background: #fff; }
.sa-feed__kind--red { background: var(--sa-ink); border-color: var(--sa-ink); color: #fff; }
.sa-feed__kind--ok { border-color: #bfe3cb; background: #eef8f1; color: var(--sa-green); }
.sa-feed__kind--off { color: var(--sa-faint); }
.sa-feed__main { display: grid; gap: 3px; font-size: 0.8125rem; min-width: 0; }
.sa-feed__main b { font-weight: var(--w-bold); }
.sa-feed__main span { color: var(--sa-muted); }
.sa-feed__at { font-size: 0.6875rem; color: var(--sa-muted); white-space: nowrap; }

/* toggles */
.sa-toggles { display: grid; }
.sa-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--sa-line); cursor: pointer; }
.sa-toggle:last-child { border-bottom: 0; }
.sa-toggle > span { display: grid; gap: 4px; }
.sa-toggle b { font-size: 0.875rem; }
.sa-toggle small { font-size: 0.75rem; color: var(--sa-muted); line-height: 1.45; }
.sa-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sa-toggle i { position: relative; flex: none; width: 44px; height: 24px; background: #dcdcd8; transition: background-color 0.15s; }
.sa-toggle i::after { content: ""; position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; background: #fff; transition: transform 0.18s; }
.sa-toggle input:checked + i { background: var(--sa-ink); }
.sa-toggle input:checked + i::after { transform: translateX(20px); background: var(--vr-red); }
.sa-toggle input:focus-visible + i { outline: 2px solid var(--sa-ink); outline-offset: 2px; }

/* forms */
.sa-form { display: grid; gap: 14px; }
.sa-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sa-field { display: grid; gap: 6px; min-width: 0; }
.sa-label { font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sa-muted); }
.sa-input { width: 100%; height: 44px; padding: 0 12px; background: #fff; border: 1px solid var(--sa-line-2); border-radius: var(--radius-1); color: var(--sa-ink); font: inherit; font-size: 0.9375rem; }
.sa-input:focus { outline: none; border-color: var(--sa-ink); }
.sa-input:disabled { color: var(--sa-muted); background: var(--sa-soft); }
.sa-check { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--sa-text); }
.sa-check input { accent-color: var(--sa-ink); width: 16px; height: 16px; }
.sa-form__err { color: #c4041d; font-size: 0.8125rem; }
.sa-form__err[hidden] { display: none; }
.sa-form .sa-btn { justify-self: start; }
.sa-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; font-size: 0.875rem; }
.sa-dl dt { font-size: 0.6875rem; font-weight: var(--w-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sa-muted); padding-top: 2px; }
.sa-dl dd { color: var(--sa-text); line-height: 1.5; }
.sa-steps { display: grid; gap: 14px; counter-reset: sa; }
.sa-steps li { display: grid; gap: 4px; padding-left: 40px; position: relative; counter-increment: sa; font-size: 0.875rem; color: var(--sa-muted); }
.sa-steps li::before { content: counter(sa, decimal-leading-zero); position: absolute; left: 0; top: 0; font-weight: var(--w-black); font-stretch: var(--stretch-display); color: var(--vr-red); }
.sa-steps b { color: var(--sa-ink); text-transform: uppercase; letter-spacing: 0.04em; }

/* bank panel re-uses the customer bank form (cm-* / vr-* classes, made for the dark site) on a light card */
.sa-bank .cm-form { display: grid; gap: 12px; }
.sa-bank .cm-grid--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sa-bank label, .sa-bank .cm-form__k { color: var(--sa-muted); }
.sa-bank .vr-input, .sa-bank .vr-select { background: #fff; color: var(--sa-ink); border-color: var(--sa-line-2); }
.sa-bank .cm-hint, .sa-bank .cm-panel__text { color: var(--sa-muted); }
.sa-bank .cm-textbtn { color: var(--sa-ink); }
.sa-bank .cm-chip { color: var(--sa-ink); border-color: var(--sa-line-2); }
.sa-bank .cm-check { color: var(--sa-text); }
.sa-bank a { color: var(--sa-ink); text-decoration: underline; }

/* shop hero */
.sa-shophero { position: relative; overflow: hidden; background: var(--sa-card); border: 1px solid var(--sa-line); }
.sa-shophero__cover { display: block; width: 100%; height: clamp(140px, 22vw, 260px); object-fit: cover; background: #0b0b0b; }
.sa-shophero__id { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 20px; }
.sa-shophero__logo { width: 72px; height: 72px; margin-top: -52px; object-fit: cover; background: #fff; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--sa-line); }
.sa-shophero__id h2 { font-weight: var(--w-black); font-stretch: var(--stretch-display); text-transform: uppercase; font-size: 1.5rem; line-height: 1; margin-bottom: 8px; }
.sa-shophero__id p { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sa-shophero__act { margin-left: auto; }

/* compact order list (overview) */
.sa-olist { display: grid; }
.sa-olist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--sa-line); font-size: 0.8125rem; }
.sa-olist li:last-child { border-bottom: 0; }
.sa-olist__what { color: var(--sa-ink); line-height: 1.45; }
.sa-olist__meta { color: var(--sa-muted); font-size: 0.75rem; }
.sa-olist__right { display: grid; justify-items: end; gap: 6px; align-content: start; }
.sa-olist__right b { font-variant-numeric: tabular-nums; }

.sa-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.45); }
.sa-scrim[hidden] { display: none; }

@media (max-width: 1279.98px) {
  .sa-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-grid--3 > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 1023.98px) {
  .sa-side { transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 20px 0 60px rgba(0, 0, 0, 0.35); }
  .sa.is-menu-open .sa-side { transform: none; }
  .sa-icon-btn.sa-side__close { display: grid; background: transparent; }
  .sa-main { margin-left: 0; }
  .sa-icon-btn.sa-top__burger { display: grid; }
  .sa-grid--2, .sa-grid--3, .sa-grid--main { grid-template-columns: minmax(0, 1fr); }
  .sa-grid--3 > :last-child { grid-column: auto; }
}
@media (max-width: 599.98px) {
  .sa-top { padding: 12px 16px; gap: 10px; }
  .sa-top__title { min-width: 0; }
  .sa-top__title p { display: none; }
  .sa-top__actions { width: 100%; }
  .sa-top__actions .sa-seg { order: 3; width: 100%; overflow-x: auto; }
  .sa-top__actions .sa-btn { margin-left: auto; }
  .sa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-kpi { padding: 14px; }
  .sa-kpi__top { flex-wrap: wrap; }
  .sa-kpi__label { flex-basis: calc(100% - 26px); white-space: normal; letter-spacing: 0.08em; }
  .sa-kpi__top .sa-delta { order: 3; }
  .sa-form__row, .sa-bank .cm-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .sa-feed__item { grid-template-columns: minmax(0, 1fr) auto; }
  .sa-feed__kind { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .sa-side, .sa-toggle i::after, .sa-loading span, .sa-picker__chev { transition: none; animation: none; }
}

/* world map (overview, visits) */
.sa-map { display: grid; gap: 20px; }
.sa-map__canvas { background: var(--sa-soft); border: 1px solid var(--sa-line); padding: 10px; }
.sa-map__svg { display: block; width: 100%; height: auto; }
.sa-map__c { fill: #dcdcd7; stroke: #ffffff; stroke-width: 0.4; transition: fill 0.15s; }
.sa-map__c:hover { fill: #c4c4be; }
.sa-map__c.is-on:hover { fill: var(--sa-ink) !important; }
.sa-map__side { display: grid; align-content: start; gap: 12px; }
.sa-map__total { font-size: 0.8125rem; color: var(--sa-muted); }
.sa-map__total b { color: var(--sa-ink); }
.sa-map__list { display: grid; }
.sa-map__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--sa-line); }
.sa-map__list li:first-child .sa-map__name::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--vr-red); }
.sa-map__name { font-weight: var(--w-bold); font-size: 0.875rem; }
.sa-map__list b { font-variant-numeric: tabular-nums; }
.sa-map__sub { grid-column: 1 / -1; font-size: 0.75rem; color: var(--sa-muted); }
.sa-map-panel .sa-loading { padding: 40px 0; }
@media (min-width: 1100px) { .sa-map { grid-template-columns: minmax(0, 2.2fr) minmax(240px, 1fr); align-items: start; } }
.sa-map__seg { justify-self: start; margin-bottom: 4px; }