/* 03moto v3 „НОЩЕН ШОУРУМ“ — design system (docs/SITE-SPEC-v3.md §2, §5, §7)
 * Every screen is a lit photographic set; the client's real bikes (alpha cutouts) stand on a concrete plinth.
 *
 * COMPONENTS — reuse these, don't fork them (markup helpers in tools/render/stage.mjs + common.mjs):
 *   .set          photographic section: <picture class="set__img"> + studio light (::before) + painted fallback.
 *                 setPicture(phone, desk) renders the picture. Modifiers only tune the light: --warm --cool --low
 *   .stage        bike on the lit plinth: stage({key, glow, size, orient, vt, ui}) — sizes --hero/--card/--mini;
 *                 data-cut="l r t" pushes a frame-cropped side against the stage edge; placement is pure CSS (cq units)
 *   .prop         a cutout object (helmet, suit, badge) standing on a section floor: prop({key, …})
 *   .topbar       header. Phone: floating glass capsule (WhiteWays nav) — logo · cart · menu (.topbar__ph), thickens
 *                 after scroll (.is-float), narrows while scrolling down (.is-down). ≥900px: text links + „Количка“
 *   .cartbtn      cart button with count badge (header) · .cart = the cart sheet (drawer on desktop) · .ci = its row
 *   .menu         full-screen popover menu, drops down from the capsule; .menu__top repeats the capsule with „Затвори“
 *   .ftr          footer with the giant 03MOTO wordmark
 *   .h2 / em      two-voice headline: Unbounded caps + <em> light serif italic (use on 3–4 places only)
 *   .giant        huge numeral (07, 404) · .mono = 16px caps label · .id = bike ID (03-12)
 *   .btn          pill button: --acid (one per screen), --line (outline). .act = giant text action row (Polestar)
 *   .tag          mono tag (--ok = acid „Наличен“) · .price (acid) · .stamp (red „ПРОДАДЕН“ / −NN%)
 *   .chips/.chip  one-row filter chips; JS contract: .chips[data-filters="#grid"] > .chip[data-filter="key:val|all"]
 *   .stack        sticky deck of bike cards (home „Налични“)
 *   .rail         horizontal snap rail (also styles common.rail() legacy markup: .rail__track/.rail__bar)
 *   .live         vertical clip in a phone-shaped frame (over a pre-blurred still on bike pages)
 *   .pcard        product on a light studio tile (photos come on white) · .pgrid = their grid
 *   .sheet        bottom sheet: <dialog class="sheet"> (legacy <div class="sheet" hidden> also opens) + .form
 *   .grain/.lines fixed film grain + 1px vertical grid lines (in tail partial)
 * Rules: acid only for price, the primary button, „Наличен“. --glow only for light behind a bike + its thin line/number.
 *        No visible text < 16px (16px = mono caps only). Motion = scroll-driven, inside @supports + reduced-motion guards.
 */
@layer reset, tokens, base, layout, components, pages, utilities;

/* Metric-matched local fallbacks (R6 fix 10): while the Google webfonts load (non-blocking), text sets in these with
   the same width/ascent, so the swap does not shift layout. Measured in Chromium: Unbounded 800 = Arial Black × .948,
   Onest = Arial × .972, JetBrains Mono 700 = Courier New × .952 (canvas measureText, 23.10.2026). */
@font-face { font-family: "Unbounded Fallback"; src: local("Arial Black"), local("Arial Bold"), local("Arial"); size-adjust: 94.8%; ascent-override: 105.5%; descent-override: 26.4%; line-gap-override: 0%; }
@font-face { font-family: "Onest Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 97.2%; ascent-override: 99.8%; descent-override: 31.9%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono Fallback"; src: local("Courier New"), local("Courier"); size-adjust: 95.2%; ascent-override: 107%; descent-override: 31.5%; line-gap-override: 0%; }

/* ───────────────────────── reset ───────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100svh; }
  img, picture, video, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ol, ul { list-style: none; padding: 0; }
  [hidden] { display: none !important; }
}

/* ───────────────────────── tokens ───────────────────────── */
@layer tokens {
  :root {
    color-scheme: dark;
    /* colour */
    --c-ground: #141517;          /* graphite under every photo (never #000) */
    --c-ground-2: #1B1C1F;
    --c-text: #F4F4F2;
    --c-dim: #A9AAB0;
    --c-line: rgb(255 255 255 / .14);
    --c-hair: rgb(255 255 255 / .06);
    --acid: #C6FF00;
    --c-on-acid: #0B0C0D;
    --c-stamp: #E8202A;
    --c-tile: #E9E9EA;            /* light studio tile for product photos */
    --c-tile-2: #D4D5D8;
    --glow: #C9D2DC;              /* per bike, set inline from bikes.json */
    /* type */
    --f-display: "Unbounded", "Unbounded Fallback", "Arial Black", sans-serif;
    --f-ui: "Onest", "Onest Fallback", Arial, sans-serif;
    --f-mono: "JetBrains Mono", "JetBrains Mono Fallback", "Courier New", monospace;
    --base: #141517;              /* the one tone every photo set fades into at its top and bottom (R6 fix 16) */
    --f-serif: "Noto Serif Display", Georgia, serif;
    --t-mono: 16px;               /* the only size allowed below 18px, caps only */
    --t-ui: 18px;
    --t-lead: 20px;
    --t-name: clamp(26px, 6.6vw, 40px);
    --t-h2: clamp(36px, min(10.6vw, 13svh), 128px);
    --t-giant: clamp(96px, min(46vw, 52svh), 400px);
    --t-act: clamp(32px, min(9.4vw, 11svh), 96px);
    /* space */
    --gut: 16px;
    --gap: 12px;
    --sec: clamp(72px, 14vh, 140px);
    --bar-space: env(safe-area-inset-bottom, 0px); /* room at the bottom of a screen (the phone bar moved to the top) */
    --r-pill: 999px;
    --r-frame: 18px;
    --r-tile: 4px;
    /* motion */
    --ease: cubic-bezier(.2, .7, 0, 1);
    --ease-io: cubic-bezier(.7, 0, .2, 1);
    /* plinth photo geometry (raw/gen/bg/plinth-*.png, measured): aspect, plinth centre x, tyre contact y, plinth width */
    --plinth-v: .5628; --plinth-h: 1.7768;
    --xf: 12svh;                  /* how far a section's photo crossfades over the previous one (fix C15) */
  }
  @media (min-width: 900px) {
    :root { --gut: 40px; --gap: 16px; --bar-space: 0px; --xf: 16vh; }
  }
}

/* ───────────────────────── base ───────────────────────── */
@layer base {
  html { background: var(--c-ground); scroll-padding-top: 80px; }
  /* the ground colour lives on <html> only: a body background would paint over the section photos, which sit
     in the root stacking context's negative layer (see .set) */
  body {
    color: var(--c-text);
    font: 500 var(--t-ui)/1.4 var(--f-ui);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
  ::selection { background: var(--acid); color: var(--c-on-acid); }
  /* the page takes the colour of the bike on screen (site.js pageRelight) — fix D20 */
  @property --page-glow { syntax: "<color>"; inherits: true; initial-value: #C9D2DC; }
  body { transition: --page-glow .6s var(--ease); }
  :focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
  h1, h2, h3 { font-weight: 800; line-height: .95; text-wrap: balance; }
  main { display: block; }
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
  ::view-transition-group(*) { animation-timing-function: var(--ease); animation-duration: .5s; }
  @media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
}

/* ───────────────────────── layout ───────────────────────── */
@layer layout {
  .wrap { padding-inline: var(--gut); }
  .sec { position: relative; padding-block: var(--sec); }
  .rowx { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: center; }
  .skip { position: fixed; left: 8px; top: -80px; z-index: 100; padding: 12px 16px; background: var(--acid); color: var(--c-on-acid); font-weight: 700; }
  .skip:focus { top: 8px; }
  /* no bottom padding for the phone bar: it steps aside over the footer (site.js barVisibility) */
}

/* ───────────────────────── components ───────────────────────── */
@layer components {

  /* ── type primitives ── */
  .mono { font: 700 var(--t-mono)/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
  .id { font: 800 var(--t-mono)/1 var(--f-mono); letter-spacing: .06em; }
  .giant { font: 900 var(--t-giant)/.78 var(--f-display); letter-spacing: -.06em; }
  .h2 { font: 800 var(--t-h2)/.9 var(--f-display); text-transform: uppercase; letter-spacing: -.035em; }
  @media (max-width: 899px) { .h2 { line-height: 1.02; } .h2--voice em { line-height: 1.02; } }
  .h2 em { font-style: normal; color: var(--acc, var(--c-text)); }
  .h2--voice em {
    display: inline-block; vertical-align: baseline;
    font: 300 italic 1.14em/.9 var(--f-serif); text-transform: none; letter-spacing: -.01em;
  }
  /* Unbounded = UPPERCASE only (its lowercase Cyrillic carries BG locl forms); mixed-case names/prices use Onest */
  .name { font: 800 var(--t-name)/1.04 var(--f-ui); letter-spacing: -.025em; text-wrap: balance; }
  .nw { white-space: nowrap; }
  .price { font: 800 var(--t-lead)/1.1 var(--f-ui); color: var(--acid); letter-spacing: -.01em; }
  .price--ask { font-weight: 700; }

  /* ── set: photographic section (R3 #1) ── */
  /* No isolation on purpose (R5 fix 1): .set__img (z -2) and the light (z -1) join the page's negative layer, so the
     next section's crossfading photo slides UNDER this section's text and buttons instead of over them. */
  .set { position: relative; overflow-x: clip; }
  /* the picture box carries the painted fallback (dark lit gradient; grain comes from the global .grain at .07) */
  .set__img {
    position: absolute; inset: 0; z-index: -2; display: block; pointer-events: none;
    background:
      radial-gradient(120% 60% at 50% 0%, #2a2b30, transparent 62%),
      radial-gradient(100% 50% at 50% 100%, #202125, transparent 70%),
      var(--c-ground);
  }
  .set__img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--set-pos, 50% 50%); }
  .set::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 max(12%, 120px), #000 calc(100% - max(12%, 120px)), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 max(12%, 120px), #000 calc(100% - max(12%, 120px)), transparent 100%);
    background:
      radial-gradient(120% 55% at 50% 10%, rgb(255 255 255 / .07), transparent 62%),
      linear-gradient(180deg, rgb(12 13 15 / var(--set-top, .12)) 0%, rgb(12 13 15 / 0) 26%, rgb(12 13 15 / 0) 66%, rgb(12 13 15 / var(--set-bottom, .45)) 100%);
  }
  .set--low::before { --set-top: .25; --set-bottom: .6; }
  /* crossfade (fix C15): a section pulls up by --xf; its photo starts there with a soft top edge, so two
     photos melt into each other instead of meeting in a dark band. The transparent border keeps content in place. */
  main > .set + .set, main:has(> .set:last-child) + .ftr.set {
    margin-top: calc(-1 * var(--xf)); border-top: var(--xf) solid transparent;
    pointer-events: none;   /* its empty overlap band must not take the previous section's taps (R5 fix 1) */
  }
  :is(main > .set + .set, main:has(> .set:last-child) + .ftr.set) > :not(.set__img) { pointer-events: auto; }
  :is(main > .set + .set, main:has(> .set:last-child) + .ftr.set)::before { top: calc(-1 * var(--xf)); }
  main > .set + .set > .set__img, main:has(> .set:last-child) + .ftr.set > .set__img { top: calc(-1 * var(--xf)); }
  /* seams (R6 fix 16): section photos fade top and bottom into the shared --base (= the page ground) */
  :is(main, footer) > .set__img, main > .set > .set__img, .ftr.set > .set__img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 max(12%, 120px), #000 calc(100% - max(12%, 120px)), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 max(12%, 120px), #000 calc(100% - max(12%, 120px)), transparent 100%);
  }
  /* the client's own showroom still as a set (R6 fix 19): heavily blurred (hides 320p), graded to the page glow */
  .set__img--amb img { filter: blur(18px) saturate(.9) brightness(1.05) contrast(1.15); scale: 1.15; }
  .set__img--amb::after { content: ""; position: absolute; inset: 0; background:
      radial-gradient(90% 60% at 50% 30%, color-mix(in oklab, var(--page-glow) 18%, transparent), transparent 70%),
      linear-gradient(180deg, rgb(12 13 15 / .3), rgb(12 13 15 / .62)); }

  /* moving light leak (R3 #2) — hero + contact only */
  .leak {
    position: absolute; inset: -30%; z-index: 0; pointer-events: none; mix-blend-mode: screen; opacity: .5;
    background:
      radial-gradient(38% 26% at 28% 38%, rgb(255 150 70 / .30), transparent 70%),
      radial-gradient(34% 24% at 72% 62%, color-mix(in oklab, var(--glow) 40%, transparent), transparent 70%);
    filter: blur(24px);
    animation: leak 16s ease-in-out infinite alternate;
  }
  @keyframes leak { to { transform: translate3d(8%, -6%, 0) rotate(8deg) scale(1.1); } }

  /* ── stage: bike on the lit plinth ── */
  .stage {
    position: relative; isolation: isolate; overflow: clip; container-type: size;
    background: radial-gradient(90% 60% at 50% 55%, #2a2b2f, var(--c-ground) 70%);
    /* plinth photo (phone: plinth-v) */
    --ar-s: var(--plinth-v); --px: .5; --py: .585; --pw: .91;
    /* bike size + where its tyre touches (fractions of the stage) */
    --bh: .56; --floor: .6; --k: 1.18; --cxs: 50cqw;
    --Hb: calc(var(--bh) * 100cqh);
    --Wb: calc(var(--Hb) * var(--ar-b));
    --Yc: calc((var(--floor) + var(--dy, 0)) * 100cqh);
    --x0: calc(var(--cxs) - var(--mx) * var(--Wb));
  }
  /* Every bike stands whole and centred on its plinth (R6 fixes 14/21); a side the source frame cropped falls softly
     into the dark of the room (masks below) instead of hugging the screen edge. */
  .stage[data-cut~="l"] { --fl: transparent 0, rgb(0 0 0 / .35) 6%, rgb(0 0 0 / .8) 13%, #000 20%; }
  .stage[data-cut~="r"] { --fr: transparent 0, rgb(0 0 0 / .35) 6%, rgb(0 0 0 / .8) 13%, #000 20%; }
  .stage[data-cut~="l"]:not([data-cut~="r"]) .stage__obj { -webkit-mask-image: linear-gradient(to right, var(--fl)); mask-image: linear-gradient(to right, var(--fl)); }
  .stage[data-cut~="r"]:not([data-cut~="l"]) .stage__obj { -webkit-mask-image: linear-gradient(to left, var(--fr)); mask-image: linear-gradient(to left, var(--fr)); }
  .stage[data-cut~="l"][data-cut~="r"] .stage__obj {
    -webkit-mask-image: linear-gradient(to right, var(--fl)), linear-gradient(to left, var(--fr)); mask-image: linear-gradient(to right, var(--fl)), linear-gradient(to left, var(--fr));
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .stage[data-cut~="t"]:not([data-cut~="l"]):not([data-cut~="r"]) .stage__obj {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%); mask-image: linear-gradient(to bottom, transparent, #000 14%);
  }
  /* tiny blurred placeholder of the same bike until the real file is decoded (R6 fix 11) */
  .stage__lqip { position: absolute; inset: 0; background: center / 100% 100% no-repeat; filter: blur(10px) brightness(.85); transition: opacity .4s; }
  .stage.is-lit .stage__lqip { opacity: 0; }
  /* the plinth photo is scaled so the plinth centres under the bike's mass and the tyre lands on its top,
     then grown until it still covers the whole stage (no clamp → the bike never slides off the plinth) */
  .stage__set {
    position: absolute; z-index: 0; display: block;
    --Xp: calc(var(--x0) + var(--mx) * var(--Wb));
    --Ws: max(
      calc(var(--k) * var(--Wb) / var(--pw)),
      calc(var(--Xp) / var(--px)),
      calc((100cqw - var(--Xp)) / (1 - var(--px))),
      calc(var(--ar-s) * var(--Yc) / var(--py)),
      calc(var(--ar-s) * (100cqh - var(--Yc)) / (1 - var(--py))));
    --Hs: calc(var(--Ws) / var(--ar-s));
    width: calc(var(--Ws) + 2px); height: calc(var(--Hs) + 2px);
    left: calc(var(--Xp) - var(--px) * var(--Ws) - 1px);
    top: calc(var(--Yc) - var(--py) * var(--Hs) - 1px);
  }
  .stage__set, .stage__set img, .stage__obj picture, .stage__obj img { max-width: none; }
  .stage__set img { width: 100%; height: 100%; }
  /* the whole set takes the bike's paint colour (SPEC §7.2, Zero) */
  .stage__tint {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(80% 60% at 50% 40%, color-mix(in oklab, var(--glow) 55%, #1a1b1e), color-mix(in oklab, var(--glow) 30%, #0e0f11));
    mix-blend-mode: color; opacity: .3;
  }
  .stage__back { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  .stage__glow {
    position: absolute; z-index: 1; pointer-events: none;
    --g: min(calc(var(--Wb) * 1.5), 110cqw);
    width: var(--g); height: var(--g);
    left: calc(var(--x0) + var(--mx) * var(--Wb) - var(--g) / 2);
    top: calc(var(--Yc) - var(--cy) * var(--Hb) + .34 * var(--Hb) - var(--g) / 2);
    background: radial-gradient(closest-side, color-mix(in oklab, var(--glow) 60%, transparent), color-mix(in oklab, var(--glow) 18%, transparent) 55%, transparent);
    mix-blend-mode: screen; opacity: .42;
  }
  .stage__obj {
    position: absolute; z-index: 2;
    width: var(--Wb); height: var(--Hb);
    left: var(--x0); top: calc(var(--Yc) - var(--cy) * var(--Hb));
  }
  .stage__bike, .stage__bike img, .stage__refl img { width: 100%; height: 100%; }
  .stage__bike { position: relative; }
  .stage__bike img {
    /* 1px dark edge kills matte halos (fix C13), then a faint rim in the bike's colour */
    filter: contrast(1.06) saturate(1.05) brightness(.92)
            drop-shadow(0 0 1px rgb(0 0 0 / .7))
            drop-shadow(0 0 12px color-mix(in oklab, var(--glow) 16%, transparent));
  }
  /* floor reflection: mirrored about the contact line, faded */
  .stage__refl {
    position: absolute; left: 0; width: 100%; height: 100%;
    top: calc((2 * var(--cy) - 1) * 100%);
    transform: scaleY(-1); opacity: .14;
    -webkit-mask-image: linear-gradient(to top, #000, transparent 22%); mask-image: linear-gradient(to top, #000, transparent 22%);
  }
  .stage[data-refl="0"] .stage__refl { display: none; }
  /* contact shadow: broad occlusion under the mass + tight one under the tyre */
  .stage__shadow { position: absolute; inset: 0; pointer-events: none; }
  .stage__shadow::before, .stage__shadow::after { content: ""; position: absolute; translate: -50% -50%; border-radius: 50%; }
  .stage__shadow::before {
    left: calc(var(--mx) * 100%); top: calc((var(--cy) - .035) * 100%); width: 105%; height: 16%;
    background: radial-gradient(closest-side, rgb(0 0 0 / .62), rgb(0 0 0 / .28) 60%, transparent);
  }
  .stage__shadow::after {
    left: calc(var(--cx) * 100%); top: calc(var(--cy) * 100%); width: 30%; height: 4.5%;
    background: radial-gradient(closest-side, rgb(0 0 0 / .95), rgb(0 0 0 / .5) 55%, transparent);
  }
  /* relight, only inside the bike's alpha: key light from above (soft-light) + falloff to the sides (multiply) */
  /* --mask is set by site.js from the bike's own currentSrc once it has loaded (no extra download, no ghost) */
  .stage:not(.is-lit) :is(.stage__light, .stage__shade) { display: none; }
  .stage__light, .stage__shade {
    position: absolute; inset: 0; pointer-events: none;
    -webkit-mask: var(--mask) 0 0 / 100% 100% no-repeat; mask: var(--mask) 0 0 / 100% 100% no-repeat;
  }
  .stage__light {
    background: linear-gradient(180deg, rgb(255 248 236 / .3) 0%, rgb(255 255 255 / .06) 30%, rgb(128 128 128 / 0) 50%, rgb(20 20 24 / .5) 100%);
    mix-blend-mode: soft-light;
  }
  .stage__shade {
    background: radial-gradient(120% 90% at 50% 30%, #fff 45%, rgb(150 152 160) 100%);
    mix-blend-mode: multiply;
  }
  .stage[data-fade~="t"] :is(.stage__bike, .stage__refl) {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%);
  }
  /* spotlight sweep (fix D21): a light band crosses the bike once as it scrolls in — only inside its alpha */
  .stage__sweep {
    position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
    -webkit-mask: var(--mask) 0 0 / 100% 100% no-repeat; mask: var(--mask) 0 0 / 100% 100% no-repeat;
    background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .38) 50%, transparent 62%) 0 0 / 300% 100% no-repeat;
  }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .stage.is-lit .stage__sweep { animation: sweep linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
    }
  }
  @keyframes sweep { 0% { opacity: 0; background-position: 100% 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; background-position: 0 0; } }
  .stage__hit { position: absolute; inset: 0; z-index: 3; }
  .stage__ui { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
  .stage__ui :is(a, button) { pointer-events: auto; }
  /* bottom scrim so UI text sits on darkness, not on chrome */
  .stage::after {
    content: ""; position: absolute; inset: auto 0 0; height: 46%; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, var(--base), rgb(12 13 15 / .72) 16%, rgb(12 13 15 / .36) 50%, transparent);
  }

  /* bike box per size: the text zones stay off the bike (R6 fix 21) — hero: number above, caption below;
     card: number/tag above, name strip under the plinth */
  .stage--hero { height: 100svh; min-height: 560px; --bh: .4; --floor: .64; }
  .bhero { --bh: .42; --floor: .6; }
  .stage--card { height: 100%; --bh: .5; --floor: .7; }
  .stage--mini { height: 100%; --bh: .5; --floor: .62; }

  @media (min-width: 900px) {
    .stage:not(.stage--v) { --ar-s: var(--plinth-h); --px: .5; --py: .62; --pw: .54; }
    /* desktop 7/5: bike on the plinth in the left 7 columns at ~68vh, text in the right 5 (fix C16) */
    .stage--hero, .bhero { --bh: .68; --floor: .8; --cxs: 30cqw; }
    .stage--card { --bh: .62; --floor: .78; --cxs: 34cqw; }
  }

  /* Studio set (R6 item 28, BIKE_SET=studio): ONE shared scale for all 7 bikes — the same height, set by the stage
     height (--bh) but capped so the widest bike (13, w/h 1.46) still fits --fitw of the stage width. Every bike stands
     with its bottom edge (= tyre contact line) on the plinth contact y and is centred on --cxs. No per-bike offsets. */
  .stage[data-set="studio"] {
    --fitw: .92; --ar-max: 1.46;
    --Hb: min(calc(var(--bh) * 100cqh), calc(var(--fitw) * 100cqw / var(--ar-max)));
    --x0: calc(var(--cxs) - .5 * var(--Wb));
    --k: 1.08;
  }
  .stage--mini[data-set="studio"] { --fitw: .96; --floor: .66; }
  .stage[data-set="studio"] .stage__shadow::after { width: 78%; height: 5%; }
  .stage[data-set="studio"] .stage__shadow::before { top: 96%; width: 112%; height: 14%; }
  /* phone (Q4): the contact line rises and the bike shrinks so neither touches the text zones — the caption/actions
     strip at the bottom (--tz) and the giant number / tags at the top (--topz). Matters on 320 px and landscape. */
  @media (max-width: 899px) {
    .stage--hero[data-set="studio"], .bhero[data-set="studio"] {
      --Yc: min(calc(var(--floor) * 100cqh), calc(100cqh - var(--tz)));
      --Hb: min(calc(var(--bh) * 100cqh), calc(var(--fitw) * 100cqw / var(--ar-max)), calc(var(--Yc) - var(--topz)));
    }
    .stage--hero[data-set="studio"] { --tz: 270px; --topz: calc(max(var(--logo-top, 92px) + .83 * var(--logo-w, 0px), 158px) + 22px); }
    .bhero[data-set="studio"] { --tz: 352px; --topz: 156px; }
    .ncard .stage[data-set="studio"] { --Yc: min(calc(var(--floor) * 100cqh), calc(100cqh - 120px)); }
  }
  @media (min-width: 900px) {
    .stage--hero[data-set="studio"], .bhero[data-set="studio"] { --fitw: .54; }
    .stage--card[data-set="studio"] { --fitw: .58; }
  }

  /* ── prop: a cutout object on a section floor (helmet, suit, badge) ── */
  .prop { position: relative; aspect-ratio: var(--ar-b); }
  .prop picture, .prop img { width: 100%; height: 100%; }
  .prop img { filter: contrast(1.05) brightness(.94) drop-shadow(0 18px 24px rgb(0 0 0 / .55)); position: relative; z-index: 1; }
  .prop::before {
    content: ""; position: absolute; left: 50%; bottom: 0; width: 86%; height: 10%; translate: -50% 40%; border-radius: 50%;
    background: radial-gradient(closest-side, rgb(0 0 0 / .75), transparent);
  }
  .prop--sold img { filter: grayscale(1) contrast(1.1) brightness(.7); }

  /* ── buttons + actions ── */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 56px; padding: 0 26px; border-radius: var(--r-pill);
    font: 700 var(--t-ui)/1 var(--f-ui); letter-spacing: -.005em; white-space: nowrap;
    border: 1.5px solid var(--c-line); color: var(--c-text); background: rgb(20 21 24 / .35);
    transition: transform .3s var(--ease), background-color .2s, border-color .2s;
  }
  .btn:active { transform: scale(.97); }
  .btn--line { border-color: rgb(255 255 255 / .85); background: transparent; }
  .btn--acid { background: var(--acid); border-color: var(--acid); color: var(--c-on-acid); }
  .btn--block { width: 100%; }
  .btn .i, .act .i { width: 22px; height: 22px; flex: none; }
  @media (hover: hover) {
    .btn:hover { border-color: #fff; }
    .btn--acid:hover { background: #d6ff3d; }
  }
  .act {
    min-height: 48px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: .18em 0 .12em; border-bottom: 1px solid rgb(255 255 255 / .55);
    font: 800 var(--t-act)/1 var(--f-display); letter-spacing: -.04em; text-transform: uppercase;
    transition: transform .35s var(--ease), color .2s;
  }
  .act::after { content: "›"; font-weight: 400; transition: transform .35s var(--ease); }
  .act:active { transform: translateX(6px); }
  .act--acid { color: var(--acid); border-color: var(--acid); }
  @media (hover: hover) { .act:hover::after { transform: translateX(10px); } }
  .tlink { font: 700 var(--t-ui)/1.2 var(--f-ui); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; padding-block: 12px; }

  /* ── tags, chips, stamps ── */
  .tags { display: flex; flex-wrap: wrap; gap: 8px; }
  .tag {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill);
    font: 700 var(--t-mono)/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
    border: 1px solid var(--c-line); color: var(--c-text); background: rgb(12 13 15 / .45);
  }
  .tag--ok { color: var(--acid); border-color: color-mix(in oklab, var(--acid) 55%, transparent); }
  .chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 4px; scroll-snap-type: x proximity; }
  .chips::-webkit-scrollbar { display: none; }
  .chip {
    flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: var(--r-pill);
    font: 700 var(--t-ui)/1 var(--f-ui); border: 1px solid var(--c-line); background: rgb(12 13 15 / .5); scroll-snap-align: start;
  }
  .chip b { font: 800 var(--t-mono)/1 var(--f-mono); color: var(--c-dim); }
  .chip[aria-pressed="true"] { background: var(--c-text); color: var(--c-on-acid); border-color: var(--c-text); }
  .chip[aria-pressed="true"] b { color: var(--c-on-acid); }
  .stamp {
    display: inline-block; padding: 6px 12px 4px; border: 3px solid var(--c-stamp); color: var(--c-stamp);
    font: 900 22px/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; rotate: -8deg;
    background: rgb(12 13 15 / .35); mix-blend-mode: normal;
  }
  .stamp--sm { font-size: 16px; padding: 4px 8px 3px; border-width: 2px; rotate: 0deg; background: var(--c-stamp); color: #fff; }

  /* ── header ── */
  .topbar {
    position: absolute; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; gap: 24px;
    padding: 12px var(--gut); pointer-events: none;
  }
  .topbar > * { pointer-events: auto; }
  /* scrim under the logo so it never sits on a light patch of a photo (R5 fix 14/19) */
  .topbar::before { content: ""; position: absolute; inset: 0 0 auto; height: 128px; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgb(12 13 15 / .62), rgb(12 13 15 / .28) 55%, transparent); }
  .logo { display: block; width: 56px; padding-block: 2px; filter: drop-shadow(0 2px 10px rgb(0 0 0 / .6)); }
  .logo img { width: 100%; height: auto; }
  .topbar__nav, .topbar__ph { display: none; }
  /* --cap (0…1) = how much of the bar's glass shows. 1 everywhere; on home it starts at 0 (only the round buttons over
     the hero, no empty capsule) and site.js heroLogo raises it while the giant logo lands in the bar. .is-bare = --cap
     is 0: the bar has no backdrop-filter, so the buttons carry their own frost. */
  .topbar, .menu__top { --cap: 1; }
  .p-home .topbar { --cap: 0; }
  /* phone: the WhiteWays glass capsule. The glass lives on the bar itself (a backdrop-filter on a pseudo-element
     does not blur in Chromium); ::before is the specular sheen on top of the frost */
  @media (max-width: 899px) {
    .topbar, .menu__top {
      position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; z-index: 60;
      height: 62px; gap: 12px; padding: 0 7px 0 16px; border-radius: var(--r-pill); pointer-events: auto;
      display: flex; align-items: center;
      background:
        linear-gradient(180deg, rgb(255 255 255 / calc(.13 * var(--cap))), rgb(255 255 255 / calc(.02 * var(--cap))) 60%, rgb(255 255 255 / calc(.05 * var(--cap)))),
        color-mix(in oklab, var(--page-glow) calc(8% * var(--cap)), rgb(12 13 15 / calc(.42 * var(--cap))));
      -webkit-backdrop-filter: blur(calc(22px * var(--cap))) saturate(calc(1 + .8 * var(--cap)));
      backdrop-filter: blur(calc(22px * var(--cap))) saturate(calc(1 + .8 * var(--cap)));
      box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(.26 * var(--cap))), inset 0 -1px 0 rgb(255 255 255 / calc(.05 * var(--cap))),
        inset 0 0 0 1px rgb(255 255 255 / calc(.1 * var(--cap))), 0 20px 44px -22px rgb(0 0 0 / calc(.8 * var(--cap)));
      transition: left .55s var(--ease), right .55s var(--ease), height .5s var(--ease), top .5s var(--ease), background-color .45s, box-shadow .45s;
    }
    .topbar::before, .menu__top::before {
      content: ""; position: absolute; inset: 0; height: auto; z-index: -1; border-radius: inherit; pointer-events: none; opacity: var(--cap);
      background: radial-gradient(70% 120% at 18% -30%, rgb(255 255 255 / .2), transparent 60%),
        radial-gradient(50% 90% at 100% 130%, color-mix(in oklab, var(--page-glow) 22%, transparent), transparent 70%);
    }
    /* scrolled: thicker frost, a lit edge in the bike's colour */
    .topbar.is-float {
      background:
        linear-gradient(180deg, rgb(255 255 255 / calc(.12 * var(--cap))), rgb(255 255 255 / calc(.02 * var(--cap))) 60%, rgb(255 255 255 / calc(.05 * var(--cap)))),
        color-mix(in oklab, var(--page-glow) calc(10% * var(--cap)), rgb(12 13 15 / calc(.7 * var(--cap))));
      -webkit-backdrop-filter: blur(calc(26px * var(--cap))) saturate(calc(1 + .8 * var(--cap)));
      backdrop-filter: blur(calc(26px * var(--cap))) saturate(calc(1 + .8 * var(--cap)));
      box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(.24 * var(--cap))), inset 0 0 0 1px rgb(255 255 255 / calc(.11 * var(--cap))),
        0 24px 50px -24px rgb(0 0 0 / calc(.85 * var(--cap))), 0 0 40px -18px color-mix(in oklab, var(--page-glow) calc(55% * var(--cap)), transparent);
    }
    .topbar.is-bare { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .topbar.is-down { left: 22px; right: 22px; height: 56px; top: calc(8px + env(safe-area-inset-top)); }
    .topbar .logo, .menu__top .logo { display: grid; place-items: center; min-height: 44px; width: 48px; padding: 0; filter: drop-shadow(0 1px 6px rgb(0 0 0 / .45)); transition: width .5s var(--ease); }
    .topbar.is-down .logo { width: 42px; }
    .topbar__ph { display: flex; gap: 6px; margin-left: auto; }
    .topbar__btn {
      display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--c-text);
      background: linear-gradient(180deg, rgb(255 255 255 / .14), rgb(255 255 255 / .04));
      box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 1px rgb(255 255 255 / .14);
      transition: background-color .2s, scale .2s var(--ease), width .5s var(--ease), height .5s var(--ease);
    }
    /* bare (over the hero): each button is its own small glass disc */
    .topbar.is-bare .topbar__btn {
      background-color: rgb(12 13 15 / .38);
      -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
      box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 1px rgb(255 255 255 / .14), 0 10px 24px -12px rgb(0 0 0 / .7);
    }
    .topbar__btn:active { scale: .92; background-color: rgb(255 255 255 / .12); }
    .topbar__btn .ham { width: 20px; }
    .topbar__btn .cartbtn__n { top: -14px; right: -16px; box-shadow: 0 0 0 2px #1a1b1f; }
    .topbar.is-down .topbar__btn { width: 44px; height: 44px; }
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      .topbar, .menu__top, .topbar.is-float { background: rgb(22 23 26 / var(--cap)); }
      .topbar.is-bare .topbar__btn { background-color: rgb(22 23 26 / .8); }
    }
  }
  /* >=900px: the same idea as one wide glass capsule: logo left, links + cart right. Over the home hero only the links
     and the cart show (on the scrim); the capsule grows in around them while the logo lands */
  @media (min-width: 900px) {
    .topbar {
      position: fixed; inset: 12px 16px auto; padding: 6px 6px 6px 20px; border-radius: var(--r-pill);
      background: color-mix(in oklab, var(--page-glow) calc(6% * var(--cap)), rgb(16 17 20 / calc(.62 * var(--cap))));
      -webkit-backdrop-filter: blur(calc(20px * var(--cap))) saturate(calc(1 + .5 * var(--cap)));
      backdrop-filter: blur(calc(20px * var(--cap))) saturate(calc(1 + .5 * var(--cap)));
      box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(.16 * var(--cap))), inset 0 0 0 1px rgb(255 255 255 / calc(.09 * var(--cap))),
        0 24px 50px -26px rgb(0 0 0 / calc(.85 * var(--cap)));
    }
    .topbar::before { inset: -12px -16px auto; opacity: calc(1 - var(--cap)); }
    .topbar.is-bare { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .logo { width: 64px; }
    .topbar__nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
    .topbar__nav a:not(.btn) { padding: 12px 16px; border-radius: var(--r-pill); font-weight: 700; color: var(--c-dim); transition: color .2s; }
    .topbar.is-bare .topbar__nav a:not(.btn), .topbar.is-bare .navsearch { color: var(--c-text); text-shadow: 0 1px 12px rgb(0 0 0 / .7); }
    .topbar__nav a:not(.btn):hover, .topbar__nav a[aria-current] { color: var(--c-text); }
    .topbar__nav .btn { min-height: 48px; margin-left: 8px; }
  }

  .toast {
    position: fixed; left: 50%; bottom: calc(var(--bar-space) + 12px); translate: -50% 0; z-index: 80; width: max-content; max-width: calc(100% - 32px);
    padding: 14px 18px; border-radius: 14px; background: var(--c-text); color: var(--c-on-acid); font-weight: 700; box-shadow: 0 16px 40px rgb(0 0 0 / .5);
  }
  @media (min-width: 900px) { .toast { bottom: 32px; } }
  .ham { display: inline-grid; gap: 5px; width: 18px; }
  .ham::before, .ham::after { content: ""; height: 2px; background: currentColor; border-radius: 2px; }
  .ham--x { position: relative; height: 18px; }
  .ham--x::before, .ham--x::after { position: absolute; left: 0; right: 0; top: 8px; }
  .ham--x::before { rotate: 45deg; } .ham--x::after { rotate: -45deg; }

  /* ── menu: full-screen popover, a curtain that drops down from the capsule ── */
  .menu {
    position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; padding: 0;
    color: var(--c-text); background: var(--c-ground);
    display: none; flex-direction: column; overflow: clip;
    clip-path: inset(0 0 100% 0 round 0 0 40px 40px);
    transition: clip-path .6s var(--ease-io), display .6s allow-discrete, overlay .6s allow-discrete;
  }
  /* photo set as CSS background so it is fetched only when the menu opens */
  .menu:popover-open { display: flex; clip-path: inset(0 0 0 0 round 0); }
  .menu > .set__img { z-index: 0; }
  .menu > .set__img img { filter: brightness(.8) saturate(.95); }
  .menu::before { z-index: 0; background:
      radial-gradient(90% 55% at 50% 30%, color-mix(in oklab, var(--page-glow) 22%, transparent), transparent 70%),
      linear-gradient(180deg, rgb(12 13 15 / .5), rgb(12 13 15 / .25) 40%, rgb(12 13 15 / .8)); }
  .menu__body { z-index: 1; }
  @starting-style { .menu:popover-open { clip-path: inset(0 0 100% 0 round 0 0 40px 40px); } }
  .menu::backdrop { background: rgb(0 0 0 / .5); }
  .menu__body { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; justify-content: safe flex-end; gap: 28px; padding: 96px var(--gut) calc(32px + env(safe-area-inset-bottom)); }
  .menu__links a {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0 8px;
    border-bottom: 1px solid var(--c-line);
    font: 800 clamp(34px, 10.4vw, 64px)/1 var(--f-display); text-transform: uppercase; letter-spacing: -.04em;
  }
  .menu__links a b { font: 800 var(--t-mono)/1 var(--f-mono); color: var(--c-dim); letter-spacing: .04em; }
  .menu__links a[aria-current] { color: var(--acid); }
  .menu__meta { display: grid; gap: 4px; }
  .menu__meta a:first-child { display: inline-flex; align-items: center; min-height: 48px; font: 800 28px/1.1 var(--f-display); letter-spacing: -.02em; }
  .menu__meta span { color: var(--c-dim); }
  .menu__meta .menu__viber { justify-self: start; margin-top: 12px; }
  .menu__viber .i { width: 22px; height: 22px; }
  .menu__top { position: absolute; z-index: 2; }
  @media (min-width: 900px) { .menu__top { display: none; } .menu__body { padding-inline: 10vw; } }

  /* ── footer ── */
  .ftr { padding: 64px var(--gut) 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ftr__giant { font: 800 clamp(56px, min(19vw, 26svh), 300px)/.8 var(--f-mono); letter-spacing: -.06em; text-transform: uppercase; }
  .ftr__giant .z, .wm .z { font-family: var(--f-mono); font-weight: 800; letter-spacing: -.08em; }
  .ftr__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
  .ftr__tel { display: inline-flex; align-items: center; min-height: 48px; font: 800 clamp(26px, 7vw, 44px)/1 var(--f-display); letter-spacing: -.02em; font-feature-settings: "tnum", "locl" 0; }
  .ftr__nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-weight: 700; color: var(--c-dim); }
  .ftr__nav a { padding-block: 10px; }
  .ftr__fb { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border: 1px solid var(--c-line); border-radius: 50%; }
  .ftr__c { color: var(--c-dim); }

  /* ── stack: sticky deck of bike cards (R3 #6) ── */
  /* „Налични сега“ (R6 fix 14): one whole bike per screen, 12 % peek of the next, name strip under the plinth */
  .rail--bikes { display: flex; flex-direction: column; }
  .rail--bikes .rail__bar { order: -1; padding: 0 8px 12px; }
  .rail--bikes .rail__track { gap: 8px; padding-inline: 8px; scroll-padding-inline: 8px; }
  .ncard { position: relative; flex: none; width: 88vw; height: min(78svh, 700px); min-height: 480px; border-radius: var(--r-tile); overflow: clip; }
  .ncard .bk { justify-content: space-between; }
  .ncard--all { display: block; }
  .ncard--all .all { position: absolute; inset: auto 0 0; z-index: 2; display: grid; gap: 10px; padding: 22px 18px; background: linear-gradient(transparent, rgb(12 13 15 / .9) 40%); }
  .all__n { font: 900 clamp(90px, min(34vw, 30svh), 260px)/.8 var(--f-display); letter-spacing: -.06em; color: var(--acid); }
  .all__t { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 800 clamp(28px, 7.4vw, 48px)/1 var(--f-display); text-transform: uppercase; letter-spacing: -.03em; color: #fff; }
  .all__t .i { width: 40px; height: 40px; color: var(--acid); }
  @media (min-width: 900px) {
    .rail--bikes .rail__track { padding-inline: var(--gut); scroll-padding-inline: var(--gut); gap: 16px; }
    .rail--bikes .rail__bar { padding-inline: var(--gut); }
    .ncard { width: min(76vw, 1180px); height: min(80vh, 760px); }
    .ncard .bk { padding: 28px 32px; }
    .ncard .bk__bot { align-self: flex-end; width: min(36%, 480px); margin-bottom: 8%; }
    .ncard .bk__name { font-size: clamp(32px, 3vw, 52px); }
    .ncard--all { width: min(40vw, 560px); }
  }
  /* archived sticky stack (pre-R6), not wired */
  .stack { display: grid; gap: 0; padding-inline: 8px; }
  .stack__item { position: sticky; top: calc(8px + var(--i, 0) * 6px); height: 84svh; min-height: 540px; margin-bottom: 10svh; }
  .stack__item:last-child { margin-bottom: 0; }
  .stack__item--all { height: 64svh; min-height: 420px; }
  .stack .bk { justify-content: flex-start; gap: 14px; }
  .stack .bk__bot { text-shadow: 0 2px 14px rgb(0 0 0 / .85), 0 0 2px rgb(0 0 0 / .6); }
  @media (min-width: 900px) {
    .stack { padding-inline: var(--gut); }
    .stack__item { top: calc(92px + var(--i, 0) * 8px); height: calc(100vh - 120px); min-height: 560px; }
    .stack .bk { padding: 28px 32px; }
    .stack .bk__bot { align-self: flex-end; width: min(40%, 560px); margin-top: 12vh; }
    .stack .bk__name { font-size: clamp(36px, 3.6vw, 60px); }
  }
  .stack__card { display: block; height: 100%; overflow: clip; border-radius: var(--r-tile); transform-origin: 50% 0; box-shadow: 0 -18px 40px rgb(0 0 0 / .5); }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .stack__card { animation: sink linear both; animation-timeline: view(); animation-range: exit-crossing 0% exit-crossing 100%; }
    }
  }
  @keyframes sink { to { transform: scale(.9); filter: brightness(.45); } }

  /* bike card UI (inside a stage) — shared by home stack, /motori/ grid and „Подобни“ rail */
  .bk { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 18px; }
  .bk__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .bk__n { padding-top: 10px; border-top: 2px solid var(--glow); font: 800 var(--t-mono)/1 var(--f-mono); color: var(--glow); letter-spacing: .06em; }
  .bk__n i { font-style: normal; color: var(--c-dim); }
  .bk__bot { display: grid; gap: 10px; }
  .bk__name { font: 800 var(--t-name)/1.04 var(--f-ui); letter-spacing: -.025em; text-wrap: balance; max-width: 16ch; }
  /* the whole card is the link (::after); the name itself still gets a ≥ 44px box */
  .bk__name a, .hero__cap .name { display: inline-block; min-height: 44px; padding-block: 4px; }
  .bk__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }

  /* ── rail: horizontal snap rail ── */
  .rail { position: relative; }
  .rail__track {
    display: flex; gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    padding-inline: var(--gut); scroll-padding-inline: var(--gut); scrollbar-width: none;
  }
  .rail__track::-webkit-scrollbar { display: none; }
  .rail__track > * { flex: none; scroll-snap-align: start; }
  .rail__bar { display: flex; align-items: center; gap: 14px; padding: 16px var(--gut) 0; }
  .rail__n { font: 800 var(--t-mono)/1 var(--f-mono); color: var(--c-dim); }
  .rail__n b { color: var(--c-text); }
  .rail__p { flex: 1; height: 2px; background: var(--c-line); position: relative; overflow: hidden; }
  .rail__p i { position: absolute; inset: 0 auto 0 0; width: var(--p, 20%); background: var(--c-text); transition: width .3s var(--ease); }
  .rail__arr { display: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--c-line); align-items: center; justify-content: center; }
  .rail__arr .i { width: 20px; height: 20px; }
  @media (hover: hover) and (pointer: fine) { .rail__arr { display: inline-flex; } }

  /* ── live: vertical clip framed like a phone screen ── */
  .live { position: relative; width: min(74vw, 300px); aspect-ratio: 9 / 16; border-radius: var(--r-frame); overflow: clip; background: #0d0e10; box-shadow: 0 30px 70px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .1); }
  .live img, .live video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .live video { opacity: 0; transition: opacity .5s; }
  .live video.is-playing { opacity: 1; }
  .live__cap { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 6px 10px; border-radius: var(--r-pill); background: rgb(12 13 15 / .6); }

  /* ── product card on a light studio tile (SPEC §4.5) ── */
  .pcard { position: relative; display: grid; grid-template-rows: auto auto 1fr; gap: 8px; color: var(--c-text); }
  .pcard__img {
    position: relative; aspect-ratio: 1; border-radius: var(--r-tile); overflow: clip;
    background: radial-gradient(90% 80% at 50% 38%, #fff, var(--c-tile) 52%, var(--c-tile-2));
    box-shadow: 0 16px 36px rgb(0 0 0 / .35);
  }
  .pcard__img img { width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; }
  .pcard__img .stamp { position: absolute; top: 10px; left: 10px; }
  .pprice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .pprice s { color: var(--c-dim); font-size: var(--t-ui); }
  .pcard__name { font: 600 var(--t-ui)/1.25 var(--f-ui); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .pcard__name--long { font-size: var(--t-mono) !important; -webkit-line-clamp: 3 !important; }
  .pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--gap); }
  @media (min-width: 900px) { .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  /* ── sheet: bottom sheet dialog ── */
  .sheet {
    position: fixed; inset: auto 0 0; width: 100%; max-width: 640px; max-height: 92svh; margin: 0 auto; padding: 0;
    border: 0; border-radius: 22px 22px 0 0; color: var(--c-text);
    background: radial-gradient(120% 60% at 50% 0%, #2a2b30, #17181b 60%);
    box-shadow: 0 -20px 60px rgb(0 0 0 / .6); overflow: auto; z-index: 70;
    transform: translateY(100%);
    transition: transform .45s var(--ease), display .45s allow-discrete, overlay .45s allow-discrete;
  }
  .sheet[open], .sheet.is-open { transform: none; }
  @starting-style { .sheet[open], .sheet.is-open { transform: translateY(100%); } }
  .sheet::backdrop { background: rgb(0 0 0 / .62); }
  .sheet__panel { padding: 14px var(--gut) calc(24px + env(safe-area-inset-bottom)); display: grid; gap: 18px; }
  .sheet__grip { justify-self: center; width: 44px; height: 4px; border-radius: 4px; background: rgb(255 255 255 / .3); }
  .sheet__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .sheet__t { font: 800 32px/1 var(--f-display); text-transform: uppercase; letter-spacing: -.03em; }
  .sheet__x { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--c-line); }
  .sheet__x .i { width: 20px; height: 20px; }
  .sheet__bg { display: none; }
  div.sheet.is-open { display: block; }
  /* forms */
  .form { display: grid; gap: 16px; }
  .f { display: grid; gap: 8px; }
  .f > span, .f legend { font: 700 var(--t-mono)/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c-dim); }
  .in {
    width: 100%; min-height: 56px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--c-line);
    background: rgb(255 255 255 / .05); font-size: var(--t-ui);
  }
  .in:focus { border-color: var(--acid); outline: none; }
  textarea.in { min-height: 96px; resize: vertical; }
  fieldset.f { border: 0; padding: 0; }
  .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .seg label { position: relative; }
  .seg input { position: absolute; opacity: 0; inset: 0; }
  .seg span { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 12px; border: 1px solid var(--c-line); font-weight: 700; }
  .seg input:checked + span { background: var(--c-text); color: var(--c-on-acid); }
  .seg input:focus-visible + span { outline: 2px solid var(--acid); outline-offset: 2px; }
  .chk { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-ui); }
  .chk input { width: 24px; height: 24px; flex: none; accent-color: var(--acid); margin-top: 2px; }
  .form__ok { font: 700 var(--t-ui)/1.3 var(--f-ui); color: var(--acid); }

  /* ── cart button: moto-rim cart icon + count badge; kicks when a product lands (site.js cart) ── */
  .cartbtn { gap: 18px; }
  .cartbtn__ic { position: relative; display: inline-flex; }
  .cartbtn__ic .i { width: 24px; height: 24px; }
  .cartbtn__n {
    position: absolute; top: -12px; right: -13px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font: 800 var(--t-mono)/1 var(--f-mono); letter-spacing: -.02em; font-feature-settings: "tnum", "locl" 0;
    background: var(--acid); color: var(--c-on-acid); box-shadow: 0 0 0 2px #121316;
  }
  .cartbtn.is-bump .cartbtn__ic { animation: cart-kick .6s var(--ease); }
  .cartbtn.is-bump .cartbtn__n { animation: cart-pop .5s var(--ease); }
  @keyframes cart-kick {
    30% { transform: translateY(3px) rotate(-14deg) scale(1.15); }
    60% { transform: translateY(-3px) rotate(7deg) scale(1.05); }
  }
  @keyframes cart-pop { 0% { scale: .3; } 60% { scale: 1.3; } 100% { scale: 1; } }
  /* the product photo flying into the cart: a small light studio disc */
  .cart-ghost {
    position: fixed; z-index: 95; pointer-events: none; object-fit: contain; padding: 9%; border-radius: 50%;
    background: radial-gradient(90% 80% at 50% 38%, #fff, var(--c-tile) 55%, var(--c-tile-2));
    box-shadow: 0 24px 48px rgb(0 0 0 / .55), 0 0 0 2px var(--acid); will-change: transform;
  }
  .btn.is-added { background: var(--c-text); border-color: var(--c-text); }

  /* ── cart sheet: bottom sheet on phone, right drawer on desktop ── */
  /* the cart is a lit set too: the menu's concrete under a dark wash, a faint acid light from the top */
  .cart {
    background:
      radial-gradient(130% 70% at 50% 0%, color-mix(in oklab, var(--acid) 7%, transparent), transparent 75%),
      linear-gradient(180deg, rgb(23 24 27 / .9), rgb(17 18 20 / .96)),
      url(/assets/img/bg/concrete-v.webp) center / cover, #17181b;
  }
  .cart .sheet__t { display: flex; align-items: flex-start; gap: 10px; }
  .cart__n { font: 800 var(--t-mono)/1 var(--f-mono); color: var(--acid); letter-spacing: .04em; font-feature-settings: "tnum", "locl" 0; }
  .cart__empty { display: grid; justify-items: center; gap: 16px; padding: 20px 0 16px; text-align: center; }
  .cart__art {
    display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; color: var(--c-dim);
    border: 1px solid var(--c-line); background: radial-gradient(60% 60% at 50% 30%, rgb(255 255 255 / .1), transparent 72%);
  }
  .cart__art .i { width: 60px; height: 60px; stroke-width: 1.5; }
  .cart__void { font: 800 var(--t-name)/1 var(--f-display); text-transform: uppercase; letter-spacing: -.03em; }
  .cart__list:empty { display: none; }
  .ci {
    display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; grid-template-areas: "img name name" "img price qty";
    gap: 8px 14px; align-items: center; padding-block: 14px; border-bottom: 1px solid var(--c-line);
  }
  .ci:first-child { border-top: 1px solid var(--c-line); }
  .ci__body { display: contents; }
  .ci__img {
    grid-area: img; align-self: start; aspect-ratio: 1; overflow: clip; border-radius: var(--r-tile);
    background: radial-gradient(90% 80% at 50% 38%, #fff, var(--c-tile) 52%, var(--c-tile-2));
  }
  .ci__img img { width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; filter: brightness(1.12) contrast(1.1); }
  .ci__name { grid-area: name; font: 600 var(--t-ui)/1.25 var(--f-ui); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ci__price { grid-area: price; font: 800 var(--t-lead)/1 var(--f-ui); color: var(--acid); font-feature-settings: "tnum", "locl" 0; }
  .ci__qty { grid-area: qty; display: inline-flex; align-items: center; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: rgb(255 255 255 / .04); }
  .ci__qty button { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
  .ci__qty button:active { background: rgb(255 255 255 / .1); }
  .ci__qty .i { width: 18px; height: 18px; }
  .ci__qty b { min-width: 22px; text-align: center; font: 800 var(--t-ui)/1 var(--f-mono); font-feature-settings: "tnum", "locl" 0; }
  .cart__end { display: grid; gap: 18px; }
  .cart__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .cart__sum .mono { color: var(--c-dim); }
  .cart__sum .price { font-size: clamp(30px, 8.4vw, 40px); }
  @media (min-width: 900px) {
    .cart { inset: 0 0 0 auto; width: 480px; height: 100%; max-height: none; margin: 0; border-radius: 22px 0 0 22px; transform: translateX(100%); }
    .cart[open] { transform: none; }
    @starting-style { .cart[open] { transform: translateX(100%); } }
    .cart .sheet__grip { display: none; }
    .cart .sheet__panel { padding: 28px 32px 32px; }
  }


  /* ── map (click-to-load) ── */
  .map { position: relative; }
  .map iframe { width: 100%; height: 360px; border: 0; border-radius: var(--r-tile); filter: grayscale(.6) invert(.9) hue-rotate(180deg); }

  /* ── film grain + grid lines (R3 #3, Nick Ho) ── */
  .grain {
    position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
    background: url(/assets/img/fx/grain-256.png) 0 0 / 256px 256px;
    animation: grain .9s steps(6) infinite;
  }
  @keyframes grain {
    0% { transform: translate(0, 0); } 20% { transform: translate(-7%, 4%); } 40% { transform: translate(5%, -9%); }
    60% { transform: translate(-3%, 8%); } 80% { transform: translate(9%, 2%); } 100% { transform: translate(0, 0); }
  }
  @media (pointer: coarse), (prefers-reduced-motion: reduce) { .grain { animation: none; opacity: .05; } }
  /* z -1: above section photos, below every bike, stage and product well (R5 fix 12) */
  .lines {
    position: fixed; inset: 0 var(--gut); z-index: -1; pointer-events: none;
    --hair: color-mix(in oklab, var(--page-glow) 12%, rgb(255 255 255 / .04));
    background: linear-gradient(90deg, var(--hair) 1px, transparent 1px) 0 0 / calc(100% / 4) 100%;
    border-right: 1px solid var(--hair);
  }
  @media (min-width: 900px) { .lines { background-size: calc(100% / 6) 100%; } }

  /* ── masked word rise for short headings (R3 #10) ── */
  .rise__m { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
  .rise__m > span { display: inline-block; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .rise__m > span { animation: rise linear both; animation-timeline: view(); animation-range: entry calc(10% + var(--i, 0) * 8%) entry calc(70% + var(--i, 0) * 8%); }
      .dev { animation: develop linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    }
  }
  @keyframes rise { from { transform: translateY(105%) rotate(4deg); } to { transform: none; } }
  @keyframes develop {
    from { clip-path: inset(14% 6% 14% 6%); filter: grayscale(1) contrast(1.3) brightness(.6); transform: scale(1.1); }
    to { clip-path: inset(0); filter: none; transform: none; }
  }
}

/* ───────────────────────── pages ───────────────────────── */
@layer pages {

  /* ── home: hero showroom ── */
  .hero { position: relative; isolation: isolate; overflow: clip; height: 100svh; min-height: 560px; background: var(--c-ground); }
  .hero__slides { position: absolute; inset: 0; }
  .hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
  .hero__slide.is-on { opacity: 1; z-index: 1; }
  .hero__slide.is-off { display: none; }
  /* the giant logo (was the count „07“). Sits at the top of the page without JS; site.js heroLogo pins it
     (.has-flylogo) and scales it into the topbar logo while the hero scrolls away, then hands over (.logo-docked) */
  /* phone: top-left, level with the round buttons (the bar is bare there), small enough to end above every bike */
  .p-home { --logo-w: min(44vw, 22svh, 190px); --logo-top: calc(14px + env(safe-area-inset-top)); }
  .hero__logo {
    position: absolute; z-index: 61; pointer-events: none; left: var(--gut); top: var(--logo-top);
    width: var(--logo-w); height: auto; transform-origin: 0 0; will-change: transform;
    filter: drop-shadow(0 10px 40px rgb(0 0 0 / .45));
  }
  .has-flylogo .hero__logo { position: fixed; }
  .has-flylogo .hero__logo.is-docked { visibility: hidden; }
  .has-flylogo:not(.logo-docked) .topbar .logo img { opacity: 0; }
  .hero__ui { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: space-between; padding: 88px var(--gut) calc(var(--bar-space) + 12px); pointer-events: none; }
  .hero__ui a, .hero__ui button { pointer-events: auto; }
  /* label sits right of the giant logo (phone) / under it (desktop) */
  .hero__h { align-self: flex-end; margin-top: 6px; opacity: clamp(0, 1 - 2.5 * var(--fly, 0), 1); font: 700 var(--t-mono)/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; max-width: 12ch; text-align: right; }
  .hero__now { display: grid; gap: 14px; }
  .hero__caps { position: relative; display: grid; }
  .hero__cap { grid-area: 1 / 1; display: grid; gap: 8px; align-content: end; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
  .hero__cap:not(.is-on) { visibility: hidden; transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s .5s; }
  .hero__cap.is-on { opacity: 1; transform: none; }
  .hero__cap .id { color: var(--c-dim); }
  .hero__cap .id b { color: var(--c-text); }
  .hero__cap .name { max-width: 15ch; }
  .hero__cta { justify-self: start; }
  .hero .leak { z-index: 3; }
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .hero__slides { animation: hero-push linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
      .hero__ui { animation: hero-type linear both; animation-timeline: scroll(root); animation-range: 0 70svh; }
    }
  }
  @keyframes hero-push { to { transform: scale(1.1); filter: brightness(.5); } }
  @keyframes hero-type { to { transform: translateY(-14svh); opacity: 0; } }
  @media (min-width: 900px) {
    .hero__ui { padding: 120px var(--gut) 56px; align-items: flex-end; text-align: left; }
    .p-home { --logo-w: clamp(200px, min(32vw, 46vh), 520px); --logo-top: 96px; }
    .hero__logo { left: auto; right: var(--gut); }
    .hero__h { margin-top: calc(var(--logo-w) * .83 + 24px); width: auto; max-width: none; text-align: right; }
    .hero__now { width: calc(5 / 12 * (100vw - 2 * var(--gut))); }
  }

  /* ── home: sections ── */
  .nal { padding-block: var(--sec) 12svh; }
  .shead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; padding: 0 var(--gut) 36px; }
  .shead .mono { color: var(--c-dim); margin-top: 12px; }
  .all { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; height: 100%; padding: 24px; }
  .all .h2 { font-size: clamp(40px, 11vw, 96px); }
  .all .i { width: clamp(44px, 8vw, 72px); height: auto; aspect-ratio: 1; color: var(--acid); }

  .livesec { padding-block: var(--sec); }
  .livesec .rail__track { padding-block: 8px 24px; }
  @media (min-width: 900px) { .livesec .rail__track { justify-content: center; } }

  /* ── „Витрина“ (v3.1, under the hero): a category takes over the whole section ──
     .gear[data-on] = active key ('idle' = nothing chosen yet); every [data-k] part with that key gets .is-on (site.js gear()).
     Desktop with a mouse: visual left / rows right, hover or focus a row. Phone + touch: the section is taller than the
     screen and .gear__pin sticks, the scroll position walks idle → 01 … 06. --px/--py = lerped pointer (−1…1). */
  .gear { --g: #C9D2DC; --px: 0; --py: 0; --p: 0; }
  .gear__pin { position: relative; isolation: isolate; }
  .gear__bgs, .gear__bg, .gear__look { position: absolute; inset: 0; pointer-events: none; }
  .gear__bgs { z-index: -1; overflow: clip;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%); }
  .gear__bgs::after { content: ""; position: absolute; inset: 0; background:
      radial-gradient(60% 50% at 28% 50%, color-mix(in oklab, var(--g) 14%, transparent), transparent 70%),
      linear-gradient(180deg, rgb(10 11 13 / .2) 0, transparent 30%, rgb(10 11 13 / .55) 64%, rgb(10 11 13 / .82) 100%);
    transition: background .8s; }
  .gear__bg { opacity: 0; transition: opacity .8s var(--ease); }
  .gear__bg.is-on { opacity: 1; }
  .gear__pic, .gear__pic img { display: block; width: 100%; height: 100%; }
  .gear__pic img { object-fit: cover; scale: 1.14; filter: brightness(.5) saturate(.85);
    translate: calc(var(--px) * -16px) calc(var(--py) * -10px); transition: scale 1.8s var(--ease), filter 1.2s var(--ease); }
  .gear__bg.is-on .gear__pic img { scale: 1.03; filter: brightness(.78) saturate(1.05); }

  /* giant outlined word of the active category, drifting left behind everything */
  .gear__ghost { position: absolute; inset-inline: 0; top: 34%; translate: 0 -50%; height: 1.1em; z-index: 0; overflow: clip; pointer-events: none;
    font: 900 clamp(110px, 22vw, 380px)/1.1 var(--f-display); letter-spacing: -.05em; }
  .gear__ghost span { position: absolute; left: 0; top: 0; display: flex; white-space: nowrap; color: transparent;
    -webkit-text-stroke: 1.5px rgb(244 244 242 / .17); opacity: 0; translate: calc(var(--px) * 30px) 12%;
    transition: opacity .5s var(--ease); animation: ghost 42s linear infinite paused; }
  .gear__ghost span.is-on { opacity: 1; animation-play-state: running; }
  .gear__ghost i { font-style: normal; }
  @keyframes ghost { to { transform: translateX(-50%); } }

  /* visual: the idle look (client's suit + helmet) or 3 cut-out products of the category on a lit floor */
  .gear__vis { position: relative; z-index: 1; min-height: 0; }
  .gear__props { opacity: 0; transform: translateX(-5%) scale(.97); transition: opacity .35s var(--ease), transform .6s var(--ease); }
  .gear__props.is-on { opacity: 1; transform: none; transition-duration: .7s, 1.1s; }
  .gear__props .prop { position: absolute; }
  /* 03 is cut by the frame left/top/bottom: left edge flush with the section, top and bottom fall into shadow */
  .gear__props .prop--suit { left: calc(-1 * var(--pad, .036) * 100%); top: 0; height: 100%; width: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 80%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 80%, transparent); }
  .gear__props .prop--suit::before { display: none; }
  .gear__props .prop--helmet { right: var(--gut); bottom: 2%; width: 62%; z-index: 2; }
  .gear__props .prop--helmet::before { width: 90%; height: 16%; translate: -44% 30%; }
  .rows { padding-inline: var(--gut); }
  .rows a {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0 12px;
    border-bottom: 1px solid var(--c-line);
    font: 800 clamp(32px, 9.4vw, 72px)/1 var(--f-display); text-transform: uppercase; letter-spacing: -.04em;
    transition: transform .35s var(--ease);
  }
  .rows a:first-child { border-top: 1px solid var(--c-line); }
  .rows a b { font: 800 var(--t-mono)/1 var(--f-mono); color: var(--c-dim); letter-spacing: .04em; }
  .rows a:active { transform: translateX(6px); }

  .gl, .gl__light, .gl__floor, .gl__n { position: absolute; }
  .gl { object-fit: contain; object-position: 50% 100%; opacity: 0;
    transition: opacity .25s var(--ease), transform .45s var(--ease), clip-path .45s var(--ease); }
  .gl--a { left: 50%; bottom: 17%; width: 64%; height: 64%; z-index: 3;
    transform: translate(-50%, 14%) scale(.8) rotate(-6deg); clip-path: inset(100% -30% -80% -30%);
    translate: calc(var(--px) * 24px) calc(var(--py) * 14px);
    filter: drop-shadow(0 26px 30px rgb(0 0 0 / .6)) contrast(1.04);
    -webkit-box-reflect: below 0 linear-gradient(transparent 74%, rgb(255 255 255 / .2)); }
  .gl--b, .gl--c { width: 40%; height: 42%; z-index: 1; filter: brightness(.42) saturate(.75) blur(1.5px); }
  .gl--b { left: 0; bottom: 27%; transform: translateX(-30%) rotate(-12deg) scale(.86); translate: calc(var(--px) * -14px) calc(var(--py) * -8px); }
  .gl--c { right: 0; bottom: 30%; transform: translateX(30%) rotate(12deg) scale(.86); translate: calc(var(--px) * -18px) calc(var(--py) * -10px); }
  .is-on > .gl { opacity: 1; transition: opacity .6s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s), clip-path 1.1s var(--ease) var(--d, 0s); }
  .is-on > .gl--a { transform: translate(-50%, 0); clip-path: inset(-20% -30% -80% -30%); --d: .06s; }
  .is-on > .gl--b { transform: rotate(-7deg); --d: .16s; }
  .is-on > .gl--c { transform: rotate(7deg); --d: .22s; }
  /* the light behind the product = the category colour (the --glow rule) + its floor shadow */
  .gl__light { left: 50%; top: 44%; width: 92%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; z-index: 0;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--g) 50%, transparent), color-mix(in oklab, var(--g) 12%, transparent) 60%, transparent);
    mix-blend-mode: screen; opacity: 0; scale: .5; transition: opacity .3s, scale .6s var(--ease); }
  .is-on > .gl__light { opacity: .8; scale: 1; transition: opacity .9s, scale 1.4s var(--ease); }
  .gl__floor { left: 50%; bottom: 14%; width: 74%; height: 8%; translate: -50% 0; border-radius: 50%; z-index: 2;
    background: radial-gradient(closest-side, rgb(0 0 0 / .85), rgb(0 0 0 / .3) 60%, transparent); opacity: 0; transition: opacity .4s; }
  .is-on > .gl__floor { opacity: 1; }
  .gl__n { left: 0; top: 0; z-index: 0; font: 900 clamp(72px, 13vw, 200px)/.8 var(--f-display); letter-spacing: -.06em; font-feature-settings: "tnum";
    color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklab, var(--g) 75%, white); opacity: 0; translate: 0 40%;
    transition: opacity .25s, translate .5s var(--ease); }
  .is-on > .gl__n { opacity: 1; translate: 0 0; transition: opacity .6s .1s, translate 1s var(--ease) .1s; }

  /* rows: the active one fills white (left → right) and rolls its word; the rest step back */
  .gear__rows { position: relative; z-index: 2; }
  .gear__rows a { position: relative; isolation: isolate; align-items: center; transition: color .4s var(--ease), padding .6s var(--ease); }
  .gear__rows a::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--gut)) 0 -18px; z-index: -1; background: var(--c-text);
    transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--ease); }
  .gear__rows a.is-on { color: var(--c-on-acid); padding-left: clamp(14px, 2vw, 32px); }
  .gear__rows a.is-on::before { transform: scaleX(1); transform-origin: 0 50%; transition-duration: .7s; }
  .gear:not([data-on="idle"]) .gear__rows a:not(.is-on) { color: rgb(244 244 242 / .38); }
  .row__t { display: block; height: 1.1em; line-height: 1.1; overflow: clip; }
  .row__t > span { display: block; transition: transform .7s var(--ease); }
  .gear__rows a.is-on .row__t > span { transform: translateY(-100%); }
  .row__end { display: flex; flex: none; align-items: center; gap: 10px; }
  .gear__rows a.is-on b { color: var(--c-on-acid); }
  .row__go .i { width: clamp(22px, 2.4vw, 36px); height: auto; aspect-ratio: 1; opacity: 0; translate: -14px 0; transition: opacity .3s, translate .5s var(--ease); }
  .gear__rows a.is-on .row__go .i { opacity: 1; translate: 0 0; }
  .gear__meter { display: none; }

  /* desktop with a mouse: two columns, hover drives it */
  @media (min-width: 900px) and (hover: hover) {
    .gear__pin { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--gut); min-height: min(100vh, 1000px); padding: var(--sec) var(--gut); }
    .gear__bgs::after { background:
        radial-gradient(50% 60% at 26% 52%, color-mix(in oklab, var(--g) 16%, transparent), transparent 70%),
        linear-gradient(90deg, transparent 34%, rgb(10 11 13 / .5) 64%, rgb(10 11 13 / .72)),
        linear-gradient(180deg, rgb(10 11 13 / .25), transparent 30%, transparent 72%, rgb(10 11 13 / .45)); }
    .gear__vis { height: min(76vh, 46vw); }
    .gear__rows { padding-inline: 0; }
    .gear__rows a { cursor: pointer; }
  }
  /* phone / touch: pinned, the scroll walks through the categories; a thin progress line on top of the rows */
  @media (max-width: 899px), (hover: none) {
    .gear { height: calc(100svh + (var(--n, 6) + 1) * 36svh); }
    .gear__pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 84px 0 calc(var(--bar-space) + 8px); }
    .gear__vis { margin-inline: var(--gut); }
    .gear__rows a { font-size: clamp(26px, 8.2vw, 48px); padding: 10px 0 8px; }
    .gear__rows a.is-on { padding-left: 14px; }
    .gear__ghost { top: 30%; }
    /* pinned: the photo fills the screen, only a thin fade under the logo and into the next section */
    .gear__bgs { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 94%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 94%, transparent 100%); }
    .gear__meter { display: block; position: absolute; left: var(--gut); right: var(--gut); bottom: calc(var(--bar-space) + 2px); height: 2px; background: var(--c-hair); }
    .gear__meter::after { content: ""; position: absolute; inset: 0; background: var(--c-text); transform: scaleX(var(--p)); transform-origin: 0 50%; }
  }
  @media (prefers-reduced-motion: reduce) { .gear__ghost span { animation: none; } }

  .sold { display: flex; flex-direction: column; min-height: 100svh; padding-block: var(--sec) 0; }
  .sold .set__img img { object-position: 60% 100%; }
  .sold__track { display: flex; align-items: flex-end; gap: 8px; margin-top: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px var(--gut) calc(var(--bar-space) + 6svh); scrollbar-width: none; }
  .sold__track::-webkit-scrollbar { display: none; }
  .sold__item { position: relative; flex: none; width: 62vw; max-width: 300px; scroll-snap-align: start; display: grid; justify-items: center; }
  .sold__item .prop { width: 100%; }
  .sold__item .stamp { position: absolute; top: 34%; left: 50%; translate: -50% 0; z-index: 2; font-size: 26px; }
  .sold__item .prop::before { width: 110%; height: 14%; background: radial-gradient(closest-side, rgb(0 0 0 / .85), rgb(0 0 0 / .35) 60%, transparent); }
  .will-slam .stamp { opacity: 0; }
  .will-slam.is-in .stamp { animation: slam .55s cubic-bezier(.2, .9, .3, 1.35) both; }
  @keyframes slam {
    from { opacity: 0; scale: 2.4; rotate: -14deg; }
    55% { opacity: 1; scale: .92; }
    to { opacity: 1; scale: 1; rotate: -8deg; }
  }

  .come { padding-block: var(--sec); }
  .come .leak { z-index: -1; }
  .addr { font: 900 clamp(40px, min(13.2vw, 17svh), 150px)/.9 var(--f-display); text-transform: uppercase; letter-spacing: -.05em; padding-inline: var(--gut); }
  .addr small { display: block; margin-top: 10px; font: 700 var(--t-mono)/1 var(--f-mono); letter-spacing: .1em; color: var(--c-dim); }
  .acts { display: grid; padding: 40px var(--gut) 0; }
  .come .map { padding: 24px var(--gut) 0; }
  @media (min-width: 900px) { .acts, .come .map { max-width: 1040px; } }

  /* ── /motori/ ── */
  .cat { min-height: 100svh; padding: 100px 0 var(--sec); }
  .cat__head { display: flex; align-items: flex-end; gap: 14px; padding: 0 var(--gut) 20px; }
  @media (min-width: 768px) { .cat__head { padding-bottom: 32px; } }
  .cat__head .giant { font-size: clamp(90px, min(38vw, 34svh), 300px); }
  .cat__head .mono { padding-bottom: 14px; }
  /* Q5: the giant's text box reaches ~.24em below its glyphs; keep the chips clear of it */
  @media (min-width: 768px) { .cat .chips { margin-top: calc(.24 * clamp(90px, min(38vw, 34svh), 300px)); } }
  .cat .chips { padding-inline: var(--gut); margin-bottom: 20px; scroll-padding-inline: var(--gut);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
  .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-inline: 8px; }
  .grid__feed { display: contents; }
  .bcard { display: block; height: 46svh; min-height: 330px; border-radius: var(--r-tile); overflow: clip; }
  .bcard .bk, .sim .bk { padding: 12px; }
  .bcard .bk__name { font-size: var(--t-ui); max-width: none; }
  .bcard .price { font-size: var(--t-ui); }
  .bcard .bk__top { align-items: flex-start; }
  .bcard .tags { justify-content: flex-end; }
  .empty { display: grid; justify-items: start; gap: 18px; padding: 40px var(--gut); }
  /* the slot after the last bike (R5 fix 15) */
  .bcard--ask { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 14px; }
  .bcard--ask .h2 { font-size: clamp(26px, 7vw, 52px); }
  .bcard--ask .act { min-height: 48px; font-size: clamp(30px, 8vw, 56px); border: 0; }
  .grid > .empty { grid-column: 1 / -1; }
  @media (min-width: 900px) {
    .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: var(--gut); gap: 16px; }
    .bcard { height: 66vh; }
    .bcard .bk { padding: 18px; }
    .bcard .bk__name { font-size: var(--t-name); }
  }

  /* ── /motori/<slug>/ ── */
  .bhero .bk { padding: 88px var(--gut) calc(var(--bar-space) + 12px); }
  .bhero .bk__name { font-size: clamp(32px, 9vw, 64px); max-width: 14ch; }
  .bhero .price { font-size: clamp(24px, 6vw, 36px); }
  .tiles { display: flex; flex-wrap: wrap; gap: 8px; }
  .bk__acts { display: grid; gap: 10px; margin-top: 4px; }
  .bk__acts .btn { width: 100%; }
  .bk__acts { grid-template-columns: 1fr 1fr; }
  @media (min-width: 900px) { .bk__acts { grid-template-columns: 1fr 1fr 1fr; } }
  .tile { display: grid; gap: 6px; min-width: 120px; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: var(--r-tile); background: rgb(12 13 15 / .45); }
  .tile dt { font: 700 var(--t-mono)/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c-dim); }
  .tile dd { font: 700 var(--t-ui)/1.1 var(--f-ui); }
  /* phone: year / km / cc always on ONE row (real bikes have all three) so the text zone stays under the plinth */
  @media (max-width: 899px) {
    .bhero .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
    .bhero .tile { min-width: 0; padding: 10px; }
    .bhero .tile dt { letter-spacing: .02em; }
    .bhero .tile dd { white-space: nowrap; }
  }
  @media (min-width: 900px) {
    .bhero .bk { padding: 120px var(--gut) 56px; align-items: flex-end; }
    .bhero .bk__top { width: min(42vw, 560px); }
    .bhero .bk__bot { width: min(42vw, 560px); }
    .bhero .bk__name { font-size: clamp(32px, 4.2vw, 64px); }
    .bhero .bk__acts { grid-template-columns: 1fr 1fr; }
    .bhero .bk__acts > :last-child { grid-column: 1 / -1; }
  }
  /* phone: Обади се · Запази оглед, then Viber · код on its own row (the bottom bar that carried it is gone) */
  @media (max-width: 899px) { .bk__acts > :nth-child(3) { grid-column: 1 / -1; } }
  .onair { padding-block: var(--sec); }
  .onair__frame { position: relative; display: grid; place-items: center; padding: 40px 0; }
  /* pre-blurred still of the same clip, as ambient light around the frame (R3 #12) — soft-edged, never a box */
  .onair__amb { position: absolute; inset: -10% -20%; width: 140%; height: 120%; object-fit: cover; opacity: .5; mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); }
  .onair__amb img { position: static; width: 100%; height: 100%; object-fit: cover; }
  .onair .live { width: min(78vw, 340px); }
  .specs { padding: 0 var(--gut); }
  .specs dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
  .specs dl > div { display: grid; gap: 8px; padding: 18px 14px; background: var(--c-ground); }
  .specs dt { font: 700 var(--t-mono)/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c-dim); }
  .specs dd { font: 800 var(--t-lead)/1.15 var(--f-ui); letter-spacing: -.01em; }
  .specs dl > div:last-child:nth-child(odd) { grid-column: 1 / -1; } /* odd count: no empty grey cell */
  /* „Снимки“: the shop's own photos of the unit (cars.bg), one per screen, a peek of the next; the photo's own ratio */
  .gal { padding-block: var(--sec) 0; }
  .rail--gal .rail__track { gap: 10px; align-items: center; }
  .gph { display: block; height: min(62svh, 520px); aspect-ratio: var(--ar, 4 / 3); max-width: 88vw; border-radius: var(--r-frame); overflow: clip;
    background: #0d0e10; box-shadow: 0 24px 60px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .08); }
  .gph picture, .gph img { display: block; width: 100%; height: 100%; object-fit: cover; }
  @media (min-width: 900px) { .gph { height: min(70vh, 640px); max-width: 60vw; } .rail--gal .rail__track { gap: 16px; } }
  /* seller's short points under the specs: large, one per line, an acid tick */
  .hl { display: grid; gap: 1px; margin-top: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-top: 0; list-style: none; padding: 0; }
  .specs dl + .hl { border-top: 0; }
  .hl li { display: flex; align-items: center; gap: 12px; padding: 16px 14px; background: var(--c-ground); font: 700 var(--t-lead)/1.2 var(--f-ui); }
  .hl li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 12px var(--acid); }
  .forher { padding-block: var(--sec); }
  .forher .pgrid { padding-inline: var(--gut); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .forher .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .forher .pcard__foot { padding: 10px 8px 12px; }
  .forher .pcard__name { -webkit-line-clamp: 2; font: 600 var(--t-mono)/1.25 var(--f-ui); min-height: 2.5em; }
  .forher .price { font-size: var(--t-ui); }
  .forher .pcard__img img { mix-blend-mode: multiply; }
  .forher .stamp { top: 8px; left: 8px; padding: 4px 8px; border: 0; border-radius: var(--r-pill); font: 800 var(--t-mono)/1 var(--f-mono); letter-spacing: 0; rotate: 0deg; background: var(--c-stamp); color: #fff; }
  @media (max-width: 899px) { .forher .pgrid { gap: 6px; padding-inline: 10px; } .forher .pcard__foot { padding: 8px 6px 10px; } .forher .pprice s { display: none; } }
  .simsec { padding-block: var(--sec); }
  .sim { width: 76vw; max-width: 360px; height: 62svh; min-height: 440px; border-radius: var(--r-tile); overflow: clip; }
  .sim .bk__name { font-size: 24px; }

  /* ── 404 ── */
  .err { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; padding: 88px var(--gut) calc(var(--bar-space) + 32px); margin-bottom: calc(-1 * var(--bar-space)); }
  .err .giant { font-size: min(34vw, 40svh, 380px); }
  .err .rowx .btn { min-width: 150px; }

  /* ── shop pages: /aksesoari/ · /aksesoari/<key>/ · /produkt/<id>/ · /chasti/ · /kontakti/ (SPEC §4.4–4.8) ── */
  /* an Unbounded caps word that fills its column: --w = the word's width in em (products.mjs CAT_W), --col = column */
  .fit {
    --col: calc(100vw - 2 * var(--gut));
    font: 900 min(calc(var(--col) / var(--w, 6)), var(--fit-max, 160px), 24svh)/.86 var(--f-display);
    text-transform: uppercase; letter-spacing: -.04em; white-space: nowrap;
  }
  .up, .chero__up, .pd__up { position: relative; z-index: 3; display: inline-flex; align-items: center; min-height: 48px; padding-right: 12px; color: var(--c-dim); }

  /* /aksesoari/ hero: giant count behind the real helmet on the lit shelves (same grammar as the home 07) */
  .ahero { height: 92svh; min-height: 620px; --set-bottom: .8; }
  .ahero__num {
    position: absolute; left: calc(var(--gut) - .04em); top: 88px;
    font: 900 var(--t-giant)/.78 var(--f-display); letter-spacing: -.07em; opacity: .94;
  }
  .ahero__lbl { position: absolute; left: var(--gut); top: calc(88px + var(--t-giant) * .8 + 6px); }
  .ahero__prop { position: absolute; z-index: 1; left: 50%; bottom: calc(var(--bar-space) + 84px); width: min(92vw, 520px, 46svh); translate: -50% 0; }
  /* the helmet stands on the shelf's wet floor: contact shadow + a faint mirror image (Chromium/Safari) */
  .ahero__prop img { -webkit-box-reflect: below -14px linear-gradient(transparent 76%, rgb(255 255 255 / .2)); }
  .ahero__h { position: absolute; z-index: 2; left: var(--gut); bottom: calc(var(--bar-space) + 18px); }
  @media (min-width: 900px) {
    .ahero { height: 100vh; min-height: 640px; }
    .ahero__num { top: 104px; font-size: clamp(160px, min(24vw, 38vh), 400px); }
    .ahero__lbl { top: calc(104px + clamp(200px, 24vw, 400px) * .8 + 16px); }
    .ahero__prop { left: auto; right: 4vw; bottom: 9vh; width: min(50vw, 820px); translate: none; }
    .ahero__h { --col: 46vw; bottom: 56px; }
  }

  /* /aksesoari/ categories: one lit set per row (its own photo + real cutout), word + mono count */
  .crows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  /* each tile clips its own photo and cutout; isolation keeps them inside the tile (R5 fix 4) */
  .crow {
    overflow: clip; isolation: isolate;
    display: flex; align-items: flex-end; min-height: max(36svh, 280px); padding: 18px var(--gut);
    --set-top: .2; --set-bottom: .82;
  }
  .crow__w { position: relative; z-index: 2; font-size: clamp(30px, 8.6vw, 56px); transition: translate .35s var(--ease); }
  .crow__n { position: absolute; z-index: 2; top: auto; bottom: 64px; right: var(--gut); padding-top: 8px; border-top: 2px solid; }
  .crow::after { content: "›"; position: absolute; z-index: 2; right: var(--gut); bottom: 14px; font: 700 44px/1 var(--f-ui); }
  .crow:active .crow__w { translate: 6px 0; }
  .crow .set__img img { scale: 1.14; transition: scale .8s var(--ease); }
  .crow > .set__img { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
  .crow__prop { position: absolute; z-index: 1; }
  .crow__prop { top: 12px; height: calc(100% - 124px); width: auto; }
  .crow--kaski .crow__prop { right: 4%; }
  .crow--chasti .crow__prop { right: 2%; top: 16%; width: 60%; rotate: -8deg; }
  /* the suit's top + left were cut by the source frame: top flush with the row, left edge fades into the dark */
  .crow--ekipirovka .crow__prop { right: 4%; top: 0; height: calc(100% - 112px); width: auto; }
  .crow--ekipirovka .crow__prop::before { display: none; }
  .crow--ekipirovka .crow__prop img { -webkit-mask-image: linear-gradient(to right, transparent, #000 22%); mask-image: linear-gradient(to right, transparent, #000 22%); }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .crow .set__img img { animation: drift linear both; animation-timeline: view(); }
    }
  }
  @keyframes drift { from { translate: 0 -5%; } to { translate: 0 5%; } }
  @media (hover: hover) {
    .crow:hover .set__img img { scale: 1.2; }
    .crow:hover .crow__w { translate: 8px 0; }
  }
  @media (min-width: 900px) {
    .crows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .crow { min-height: 62vh; padding: 24px 28px; }
    .crow__w { font-size: 40px; }
    .crow__n { top: auto; bottom: 72px; right: 28px; }
    .crow::after { right: 28px; bottom: 20px; }
  }

  /* promo rail */
  .promo, .psim { padding-block: var(--sec) calc(var(--sec) * .7); }
  .slide--prod { width: min(46vw, 280px); }
  .rail--prod .rail__track { padding-block: 4px 8px; }

  /* product card: the white-background photo sits on a light studio sweep; price + name on the dark foot */
  .pcard--tile {
    display: flex; flex-direction: column; height: 100%; gap: 0; overflow: clip; border-radius: var(--r-tile);
    background: linear-gradient(180deg, #1e1f23, #141517 70%); box-shadow: 0 0 0 1px rgb(255 255 255 / .07), 0 18px 36px rgb(0 0 0 / .35);
  }
  .pcard--tile .pcard__img {
    border-radius: 0; box-shadow: none;
    background:
      radial-gradient(42% 7% at 50% 87%, rgb(0 0 0 / .26), transparent 75%),
      image-set(url(/assets/img/bg/studio-light-h.avif) type("image/avif"), url(/assets/img/bg/studio-light-h.webp) type("image/webp")) 50% 64% / cover,
      radial-gradient(90% 80% at 50% 38%, #fff, var(--c-tile) 52%, var(--c-tile-2));
  }
  /* feed photos come on white or light grey: lift near-white to white so multiply leaves no box on the sweep */
  .pcard--tile .pcard__img img, .pd__studio img { filter: brightness(1.12) contrast(1.1); }
  .pcard--tile .pcard__img img { padding: 11% 11% 13%; object-position: 50% 100%; transition: scale .5s var(--ease); }
  .pcard--tile .stamp { position: absolute; top: 0; left: 0; }
  .pcard__foot { display: grid; align-content: start; gap: 6px; padding: 12px 12px 16px; flex: 1; }
  .pcard--tile .pprice { gap: 2px 10px; }
  .pcard--tile .price { font-size: var(--t-lead); }
  .pcard--tile .pcard__name { font-weight: 600; color: var(--c-text); min-height: 2.5em; }
  @media (hover: hover) { .pcard--tile:hover .pcard__img img { scale: 1.05; } }

  /* category hero band: the category's own set + cutout, word + count */
  .chero { display: flex; align-items: flex-end; min-height: 60svh; padding: 88px var(--gut) 22px; --set-bottom: .85; }
  .chero__fg { position: relative; z-index: 2; display: grid; gap: 6px; width: 100%; }
  .chero__row { display: flex; align-items: flex-start; gap: 10px; }
  .chero__w { --col: calc(100vw - 2 * var(--gut) - 36px); --fit-max: 26vw; }
  .chero__n { padding-top: .2em; }
  .chero__prop { position: absolute; z-index: 1; }
  .p-category--kaski .chero__prop { right: -6%; top: 64px; width: 66%; }
  .p-category--chasti .chero__prop { right: 4%; top: 96px; width: 74%; rotate: -8deg; }
  .p-category--ekipirovka .chero__prop { right: 2%; top: 0; height: 100%; width: auto; }
  .p-category--ekipirovka .chero__prop::before { display: none; }
  .p-category--ekipirovka .chero__prop img { -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent); }
  @media (min-width: 900px) {
    .chero { min-height: 72vh; padding: 120px var(--gut) 40px; }
    .chero__w { --col: 58vw; --fit-max: 220px; }
    .p-category--kaski .chero__prop { right: 8vw; top: 12vh; width: min(34vw, 560px); }
    .p-category--chasti .chero__prop { right: 8vw; top: 18vh; width: min(40vw, 640px); }
    .p-category--ekipirovka .chero__prop { right: 10vw; }
  }

  /* a section whose photo holds still while its content scrolls over it (long product grids) */
  .set--fixed { display: grid; grid-template-columns: minmax(0, 1fr); }
  .set--fixed > .set__img, .set--fixed::before { grid-area: 1 / 1; position: sticky; inset: auto; top: 0; height: 100lvh; align-self: start; }
  .set--fixed > .set__img img { position: absolute; }
  .set--fixed > :not(.set__img) { grid-area: 1 / 1; min-width: 0; }
  .shelf { padding-bottom: 40px; }
  .chipbar {
    position: sticky; top: 0; z-index: 5; padding: 10px 0; margin-bottom: 8px;
    background: rgb(16 17 19 / .8); box-shadow: 0 1px 0 var(--c-hair), 0 14px 24px rgb(12 13 15 / .5);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  }
  .chipbar .chips { padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
  .pgrid--shop { padding: 6px var(--gut) 0; gap: 10px; }
  @media (min-width: 900px) {
    .chipbar { position: static; padding-top: 24px; background: none; }
    .pgrid--shop { gap: 20px; }
  }

  /* product page: a light studio cyclorama for the photo, soft floor shadow; name + price + 2 actions */
  .pd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 76px 8px 36px; }
  .pd__studio {
    position: relative; isolation: isolate; aspect-ratio: 1 / 1.02; overflow: clip; border-radius: var(--r-tile);
    background:
      radial-gradient(34% 5% at 50% 86.5%, rgb(0 0 0 / .34), transparent 80%),
      radial-gradient(56% 10% at 50% 86%, rgb(0 0 0 / .14), transparent 80%),
      radial-gradient(70% 45% at 50% 22%, rgb(255 255 255 / .55), transparent 70%),
      image-set(url(/assets/img/bg/studio-light-h.avif) type("image/avif"), url(/assets/img/bg/studio-light-h.webp) type("image/webp")) 50% 62% / cover,
      var(--c-tile);
    box-shadow: 0 30px 70px rgb(0 0 0 / .55);
  }
  .pd__studio img {
    position: absolute; left: 10%; top: 8%; width: 80%; height: 79%;
    object-fit: contain; object-position: 50% 100%; mix-blend-mode: multiply;
  }
  .pd__studio .stamp { position: absolute; top: 0; left: 0; font-size: 22px; padding: 10px 14px 8px; }
  .pd__info { display: grid; gap: 12px; justify-items: start; padding-inline: calc(var(--gut) - 8px); }
  .pd__t { font: 800 clamp(26px, 7vw, 52px)/1.06 var(--f-ui); letter-spacing: -.02em; overflow-wrap: anywhere; text-wrap: balance; }
  .pprice--xl .price { font-size: clamp(30px, 8.4vw, 48px); }
  .pprice--xl s { font-size: var(--t-lead); }
  .pd__btns { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px; width: 100%; margin-top: 6px; }
  .pd__short { max-width: 46ch; color: var(--c-dim); font: 500 var(--t-ui)/1.45 var(--f-ui); }
  .sheet__what { font: 600 var(--t-ui)/1.3 var(--f-ui); color: var(--c-dim); }
  .in--file { padding-block: 8px; color: var(--c-dim); }
  .in--file::file-selector-button { margin-right: 12px; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--c-line); background: rgb(255 255 255 / .08); color: var(--c-text); font: 700 var(--t-ui)/1 var(--f-ui); }
  @media (min-width: 900px) {
    .pd { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 56px; min-height: 100vh; padding: 104px var(--gut) 56px; }
    .pd__studio { aspect-ratio: auto; height: calc(100vh - 160px); min-height: 520px; }
    .pd__info { padding: 0 0 8px; gap: 16px; }
    .pd__btns { max-width: 460px; }
  }

  /* /chasti/: the workshop at night, the real Yoshimura plate as the object */
  .ch { display: flex; flex-direction: column; justify-content: flex-end; height: 100svh; min-height: 640px; padding: 96px var(--gut) calc(var(--bar-space) + 28px); --set-bottom: .88; }
  .ch__prop { position: absolute; z-index: 1; left: 50%; top: 24%; width: min(94vw, 600px); translate: -50% 0; rotate: -7deg; }
  .ch__fg { position: relative; z-index: 2; display: grid; gap: 22px; }
  .ch__h { font-size: clamp(56px, min(19vw, 22svh), 220px); }
  .ch__h em { display: block; font-size: .5em; margin-top: .12em; }
  .ch__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
  .chact { padding-block: var(--sec); }
  .chact .acts { padding-top: 0; }
  @media (min-width: 900px) {
    .ch { height: 100vh; padding-bottom: 64px; }
    .ch__prop { left: auto; right: 5vw; top: 14vh; width: min(40vw, 680px); translate: none; }
    .ch__h { font-size: clamp(120px, 12vw, 200px); }
  }

  /* /kontakti/: the night road; the address huge, every way to reach the shop as a giant text link */
  .kt { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 100svh; padding: 104px 0 calc(var(--bar-space) + 20px); --set-top: .45; --set-bottom: .9; }
  .kt .leak { z-index: -1; }
  .kt__addr { padding-inline: var(--gut); font: 900 clamp(44px, min(15.4vw, 19svh), 190px)/.88 var(--f-display); text-transform: uppercase; letter-spacing: -.05em; }
  .kt__addr small { display: block; margin-top: 14px; letter-spacing: .1em; color: var(--c-dim); }
  .kt__fg { display: grid; gap: 14px; }
  .kt__tel { justify-self: start; display: inline-flex; align-items: center; min-height: 48px; padding: 6px var(--gut); font: 800 clamp(30px, 8.6vw, 64px)/1 var(--f-display); letter-spacing: -.03em; font-feature-settings: "tnum", "locl" 0; }
  .kt .acts { padding-top: 0; }
  .ktmap { padding: var(--sec) var(--gut); }
  .ktmap .map { display: grid; place-items: center; min-height: 40svh; border: 1px solid rgb(255 255 255 / .22); border-radius: var(--r-tile); background: rgb(12 13 15 / .3); }
  .ktmap .map iframe { height: 420px; }
  .ktmap__btn { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 26px; border-radius: var(--r-pill); border: 1.5px solid rgb(255 255 255 / .85); font: 700 var(--t-ui)/1 var(--f-ui); white-space: nowrap; background: rgb(12 13 15 / .45); }
  @media (min-width: 900px) {
    .kt { padding: 116px 0 56px; }
    .kt__addr { font-size: clamp(72px, 9vw, 160px); }
    .kt__fg { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; column-gap: 40px; padding-right: var(--gut); }
    .kt__tel { align-self: end; padding-bottom: 14px; font-size: clamp(30px, 3vw, 52px); white-space: nowrap; }
    .kt .acts { padding-inline: 0; }
    .kt .act { font-size: clamp(40px, 4.2vw, 72px); }
  }

  /* cut-out packshots (R6 fix 18) stand in the same lit dark well as the bikes: spot from above + contact shadow */
  .pcard--tile.pcard--cut .pcard__img, .pd__studio.pd__studio--cut {
    background:
      radial-gradient(40% 7% at 50% 88%, rgb(0 0 0 / .6), transparent 75%),
      radial-gradient(70% 60% at 50% 28%, color-mix(in oklab, var(--page-glow) 10%, #3a3b40), #1c1d20 62%, var(--c-ground));
  }
  .pcard--tile.pcard--cut .pcard__img img, .pd__studio.pd__studio--cut img { mix-blend-mode: normal; filter: drop-shadow(0 14px 18px rgb(0 0 0 / .5)); }

  /* phone landscape (844x390, Q1/Q4): bike left, text right, nothing taller than the screen */
  @media (max-width: 899px) and (orientation: landscape) and (max-height: 520px) {
    .stage--hero, .bhero { min-height: 0; height: 100svh; --cxs: 27cqw; }
    .hero { min-height: 0; }
    .stage--hero[data-set="studio"], .bhero[data-set="studio"] {
      --fitw: .48; --floor: .86; --tz: 0px; --topz: 70px;
    }
    .hero__ui { padding-left: 52vw; padding-top: 52px; }
    .p-home { --logo-w: min(22vw, 26svh); --logo-top: 66px; }
    .hero__logo { left: auto; right: var(--gut); }
    .hero__h { margin-top: calc(var(--logo-w) * .83); max-width: none; }
    .hero__h .nw { white-space: normal; }
    .hero__now { gap: 8px; }
    .hero__cap { gap: 2px; }
    .hero__cap .name { font-size: 24px; }
    .hero__cap .price { font-size: var(--t-ui); }
    .hero__cap .id { display: none; }
    .hero__cta { min-height: 48px; }
    .bhero .bk { padding: 60px var(--gut) calc(var(--bar-space) + 8px) 52vw; }
    .bhero .bk__name { font-size: clamp(24px, 4.6vw, 40px); }
    /* the glass capsule gets lower on a short screen; the hero starts under it */
    .topbar, .menu__top, .topbar.is-down { height: 52px; top: calc(8px + env(safe-area-inset-top)); }
    .topbar .logo, .menu__top .logo, .topbar.is-down .logo { width: 44px; }
    .topbar__btn, .topbar.is-down .topbar__btn { width: 44px; height: 44px; }
    .topbar__btn .cartbtn__n { top: -10px; right: -10px; }
    .menu__body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-content: end; align-items: end; column-gap: 40px; padding-top: 72px; }
    .menu__links a { font-size: clamp(28px, 9svh, 44px); padding: 8px 0 6px; }
    /* the six rows and the props do not fit stacked in 390px: props left, rows right (like desktop) */
    .gear__pin { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: minmax(0, 1fr); align-items: center; column-gap: var(--gut); padding: 68px var(--gut) 8px 0; }
    .gear__vis { height: 100%; }
    .gear__rows a { font-size: clamp(20px, 7svh, 30px); padding: 9px 0 7px; }
    .gear__props .prop--helmet { width: min(62%, 52svh); }
    .hero__ui { padding-top: 72px; }
    .bhero .bk { padding-top: 72px; }
  }

  /* ── R6 F1–F3 (matrix 77a0183b) ── */
  /* F1: desktop bikes stay whole: centred in the 7-column field, never closer than the gutter to the left edge,
     and narrow enough that the front wheel ends before the text column */
  @media (min-width: 900px) {
    .stage--hero[data-set="studio"], .bhero[data-set="studio"] {
      --fitw: .5;
      --x0: max(calc(var(--gut) + 8px), calc(var(--cxs) - .5 * var(--Wb)));
    }
  }
  /* F2: portrait tablets (1024x1366, 768x1024…): the bike is sized by height and centred like phone portrait,
     plinth in the lower third; the caption block stays bottom-right */
  @media (min-width: 768px) and (orientation: portrait) {
    .stage--hero[data-set="studio"], .bhero[data-set="studio"] {
      --cxs: 50cqw; --fitw: .86; --bh: .3; --floor: .66;
      --x0: calc(50cqw - .5 * var(--Wb));
    }
  }
  /* F2 seam: the vertical grid lines stopped at the hero (it isolates) and drew an edge — and the jury called
     them a template cue over the photo sets anyway: retired */
  .lines { display: none; }
  /* F3: category hero cutouts live above the title zone (text never on a cutout) */
  .chero { --tz: calc(min(24svh, 22vw) * .86 + 90px); }
  .chero__fg { gap: 16px; }
  .chero__prop { top: 72px !important; height: calc(100% - 72px - var(--tz)) !important; width: auto !important; bottom: auto; }
  .p-category--kaski .chero__prop, .p-category--ekipirovka .chero__prop { right: var(--gut) !important; }
}

/* ───────────────────────── utilities ───────────────────────── */
@layer utilities {
  /* Bulgarian locl forms (т→m, в→B, д→g in Unbounded) are off on purpose (Д69, SPEC §7.3). Lives in the top layer
     because every `font:` shorthand resets font-feature-settings. */
  *, *::before, *::after { font-feature-settings: "locl" 0; }
  .giant, .bk__n, .id, .chip b, .rows b, .menu__links b { font-feature-settings: "tnum", "locl" 0; }
  .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .stretch::after { content: ""; position: absolute; inset: 0; z-index: 5; }
  .dim { color: var(--c-dim); }
  .acid { color: var(--acid); }
  .cv { content-visibility: auto; contain-intrinsic-size: auto 900px; }
  @media (min-width: 900px) { .ph-only { display: none !important; } }
  @media (max-width: 899px) { .dk-only { display: none !important; } }
}