/* «Жел» — свой вид поверх _engine/base.css: кислотный лайм, чернила, бумага; Science Gothic + Geist Mono.
   Цвета меняются в :root. Мобильная версия — в конце файла (860 и 520 px). */
:root {
  --lime: #d4ff00; --ink: #0d0d0d; --paper: #efefe9; --paper-2: #e4e4dc; --coral: #ff5a36; --blue: #3433f0;
  --bg: var(--paper); --fg: var(--ink); --muted: #66665f; --line: rgba(13, 13, 13, .16); --soft: #e6e6df;
  --accent: var(--ink); --accent-ink: var(--lime); --sale: #e3361b; --ok: #1d7a33;
  --card-bg: #e4e4dc; --radius: 0px; --radius-btn: 0px; --wrap: 1680px; --pad: 28px; --gap: 0px;
  --font-head: 'Science Gothic', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace;
  --step--1: 12px; --step-0: 14px; --step-1: 16px; --step-2: 20px; --step-3: clamp(24px, 2.4vw, 34px); --step-4: clamp(40px, 6vw, 96px);
  --ease: cubic-bezier(.2, .8, .2, 1); --ease-in: cubic-bezier(.7, 0, .3, 1);
  --hd-h: 64px; --tk-h: 30px;
}
html { background: var(--ink); scrollbar-color: var(--ink) var(--paper); }
body { background: var(--bg); font-size: var(--step-0); line-height: 1.6; }
::selection { background: var(--lime); color: var(--ink); }
h1, h2, h3 { font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; overflow-wrap: break-word; hyphens: auto; }
.card__name, .cat__t, .ptitle, .zh__name, .line__name { overflow-wrap: anywhere; hyphens: auto; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ——— переходы между страницами (View Transitions) ——— */
@view-transition { navigation: auto; }
.hd { view-transition-name: zhel-hd; }
.tabbar { view-transition-name: zhel-tab; }
.ticker { view-transition-name: zhel-tk; }
::view-transition-group(root) { animation-duration: .6s; }
::view-transition-old(root) { animation: vt-out .5s var(--ease-in) both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease) both; }
@keyframes vt-out { to { transform: translateX(-12%); opacity: .3; filter: blur(3px); } }
@keyframes vt-in { from { clip-path: inset(0 0 0 100%); transform: translateX(6%); } to { clip-path: inset(0 0 0 0); transform: none; } }

/* ——— кнопки ——— */
.btn { min-height: 48px; padding: 0 24px; font: 600 12px/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; border-width: 1.5px; transition: background .25s, color .25s, border-color .25s, transform .35s var(--ease); }
.btn:hover { filter: none; }
.btn--lg { min-height: 58px; padding: 0 30px; font-size: 13px; }
.btn--ink { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.btn--ink:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--lime); }
.btn--lime { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.btn--lime:hover { background: #fff; border-color: #fff; }
.btn svg, .more svg, .ft__go svg, .cat-help svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.btn--ghost { border-color: var(--ink); }
.chip { border-color: var(--ink); font-family: var(--font-body); }
.kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 600 11px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .14em; }
.kicker::before { content: ''; width: 10px; height: 10px; background: var(--lime); box-shadow: 0 0 0 1.5px var(--ink); flex: none; }
.h2 { font: 900 clamp(34px, 5vw, 84px)/.92 var(--font-head); text-transform: uppercase; margin: 0 0 20px; }
.more { display: inline-flex; align-items: center; gap: 8px; font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; border-bottom: 1.5px solid; padding-bottom: 4px; }
.more:hover { color: var(--blue); }
.small { font-size: 12px; }

/* ——— прелоадер: спидометр ——— */
.pre { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--ink); color: var(--lime); clip-path: inset(0 0 0 0); animation: pre-gone .01s 2.5s forwards; cursor: pointer; }
.no-pre .pre { display: none; }
.pre.is-out { clip-path: inset(0 0 0 100%); transition: clip-path .32s var(--ease-in); }
@keyframes pre-gone { to { visibility: hidden; opacity: 0; } }
.pre__in { position: relative; width: min(66vmin, 420px); animation: pre-in .3s var(--ease) both; }
@keyframes pre-in { from { opacity: 0; transform: scale(.94); } }
.pre__g { display: block; width: 100%; height: auto; overflow: visible; }
.pre__track, .pre__fill { fill: none; stroke-width: 10; }
.pre__track { stroke: #242424; }
.pre__fill { stroke: var(--lime); stroke-dasharray: 100; stroke-dashoffset: 100; animation: pre-fill .9s .1s cubic-bezier(.35, 0, .2, 1) forwards; }
@keyframes pre-fill { to { stroke-dashoffset: 16.7; } }
.pre__ticks { stroke: #5c5c5c; stroke-width: 2; fill: none; }
.pre__g text { fill: #8a8a85; font: 600 13px var(--font-body); }
.pre__needle { transform-origin: 150px 158px; animation: pre-needle .9s .1s cubic-bezier(.35, 0, .2, 1) forwards; }
.pre__needle path { stroke: var(--lime); stroke-width: 4; stroke-linecap: round; }
.pre__needle circle { fill: var(--lime); }
@keyframes pre-needle { 0% { transform: rotate(0); } 84% { transform: rotate(230deg); } 100% { transform: rotate(225deg); } }
@property --n { syntax: '<integer>'; inherits: false; initial-value: 0; }
.pre__num { position: absolute; left: 0; right: 0; top: 60%; margin: 0; text-align: center; }
.pre__n { --n: 0; counter-reset: n var(--n); display: block; font: 900 clamp(46px, 10vmin, 92px)/1 var(--font-head); animation: pre-n .9s .1s cubic-bezier(.35, 0, .2, 1) forwards; }
.pre__n::before { content: counter(n, decimal-leading-zero); }
@keyframes pre-n { to { --n: 25; } }
.pre__num span { display: block; margin-top: 4px; font: 600 12px var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: #8a8a85; }
.pre__brand, .pre__skip { position: absolute; bottom: 22px; margin: 0; font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.pre__brand { left: 24px; }
.pre__skip { right: 24px; color: #6c6c66; }
.pre__lines { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pre__lines i { position: absolute; left: 100%; height: 2px; width: 34vw; background: var(--lime); opacity: 0; }
.pre__lines i:nth-child(1) { top: 18%; } .pre__lines i:nth-child(2) { top: 27%; width: 20vw; } .pre__lines i:nth-child(3) { top: 39%; width: 44vw; } .pre__lines i:nth-child(4) { top: 51%; width: 16vw; }
.pre__lines i:nth-child(5) { top: 60%; width: 30vw; } .pre__lines i:nth-child(6) { top: 68%; width: 50vw; } .pre__lines i:nth-child(7) { top: 76%; width: 24vw; } .pre__lines i:nth-child(8) { top: 84%; } .pre__lines i:nth-child(9) { top: 91%; width: 18vw; }
.pre.is-out .pre__lines i { animation: pre-streak .32s var(--ease-in) both; }
.pre.is-out .pre__lines i:nth-child(odd) { animation-delay: .04s; }
@keyframes pre-streak { 0% { opacity: .9; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-180vw); } }

/* ——— бегущая строка сверху и шапка ——— */
.ticker { height: var(--tk-h); background: var(--ink); color: var(--lime); overflow: hidden; display: flex; align-items: center; font: 600 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: .1em; }
.ticker__in, .band__in { display: flex; width: max-content; white-space: nowrap; will-change: transform; animation: mq 40s linear infinite; }
.js .ticker__in, .js .band__in { animation: none; }
.ticker__in span { padding-right: 0; }
@keyframes mq { to { transform: translateX(-50%); } }
.hd { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; height: var(--hd-h); padding: 0 var(--pad); background: var(--bg); border-bottom: 1.5px solid var(--ink); transition: background .35s; }
[data-page="home"] .hd.is-lime { background: var(--lime); }
.hd__menu { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; padding: 8px 0; font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: .1em; }
.hd__burger { display: grid; gap: 5px; width: 22px; }
.hd__burger i { display: block; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
.hd__burger i:last-child { width: 14px; }
.hd__menu:hover .hd__burger i:last-child { transform: scaleX(1.57); transform-origin: left; }
.hd__l { display: flex; align-items: center; gap: 30px; min-width: 0; }
.hd__nav { display: flex; gap: 22px; }
.hd__nav a, .hd__lnk, .hd__cart { position: relative; font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; padding: 6px 0; }
.hd__nav a::after, .hd__lnk::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.hd__nav a:hover::after, .hd__lnk:hover::after, .hd__nav a[aria-current]::after, .hd__lnk[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.hd__hot { padding: 6px 10px !important; background: var(--ink); color: var(--lime); }
.hd__hot::after { display: none; }
.hd__logo { grid-column: 2; text-decoration: none; }
.hd__tools { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 22px; }
.hd__lnk b, .hd__cart b, .tabbar b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; background: var(--ink); color: var(--lime); font: 600 10px/1 var(--font-body); border-radius: 9px; vertical-align: 1px; }
.hd__cart { padding: 8px 14px; border: 1.5px solid var(--ink); }
.hd__cart:hover { background: var(--ink); color: var(--lime); }
.hd__cart.bump { animation: bump .5s; }
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.logo__w { display: grid; gap: 3px; justify-items: end; width: 26px; }
.logo__w i { display: block; height: 4px; background: currentColor; transition: transform .45s var(--ease); transform-origin: right; }
.logo__w i:nth-child(1) { width: 26px; } .logo__w i:nth-child(2) { width: 18px; } .logo__w i:nth-child(3) { width: 10px; }
.hd__logo:hover .logo__w i { transform: scaleX(1.6); }
.hd__logo:hover .logo__w i:nth-child(2) { transition-delay: .05s; } .hd__logo:hover .logo__w i:nth-child(3) { transition-delay: .1s; }
.logo__t { font: 900 30px/1 var(--font-head); text-transform: uppercase; letter-spacing: -.02em; }
.tabbar { display: none; }

/* меню-оверлей (движок: .mmenu) */
.mmenu { width: 100%; background: var(--ink); color: var(--paper); transform: translateY(-102%); transition: transform .55s var(--ease-in); }
.mmenu.is-open { transform: none; }
.mmenu__top { border-color: #2a2a2a; padding: 10px var(--pad); min-height: var(--hd-h); }
.mmenu__brand { font: 900 30px var(--font-head); text-transform: uppercase; color: var(--lime); }
.mmenu .icon-btn { color: var(--paper); }
.mmenu__search { padding: 18px var(--pad) 0; max-width: 760px; }
.mmenu__search input { height: 54px; background: transparent; border: 1.5px solid #3a3a3a; color: var(--paper); font-family: var(--font-body); }
.mmenu nav { padding: 12px var(--pad); counter-reset: mm; overflow: auto; }
.mmenu nav a { counter-increment: mm; display: flex; align-items: baseline; gap: 18px; padding: 10px 0; border-color: #262626; font: 900 clamp(30px, 5.4vw, 74px)/1 var(--font-head); text-transform: uppercase; transition: color .25s, transform .4s var(--ease); }
.mmenu nav a::before { content: counter(mm, decimal-leading-zero); font: 600 12px var(--font-body); color: #77776f; }
.mmenu nav a:hover { color: var(--lime); transform: translateX(14px); }
.mmenu.is-open nav a { animation: mm-in .6s var(--ease) both; }
.mmenu.is-open nav a:nth-child(2) { animation-delay: .04s; } .mmenu.is-open nav a:nth-child(3) { animation-delay: .08s; } .mmenu.is-open nav a:nth-child(4) { animation-delay: .12s; } .mmenu.is-open nav a:nth-child(5) { animation-delay: .16s; } .mmenu.is-open nav a:nth-child(6) { animation-delay: .2s; } .mmenu.is-open nav a:nth-child(n+7) { animation-delay: .24s; }
@keyframes mm-in { from { opacity: 0; transform: translateY(40px); } }
.mmenu__contacts { padding: 18px var(--pad) 28px; color: #8a8a83; }

/* ящик корзины, тост */
.scrim { background: rgba(13, 13, 13, .55); backdrop-filter: blur(2px); }
.drawer { width: min(480px, 100%); border-left: 1.5px solid var(--ink); }
.drawer__top { border-bottom: 1.5px solid var(--ink); }
.drawer__title, .filters__title { font: 900 24px var(--font-head); text-transform: uppercase; }
.drawer__foot { border-top: 1.5px solid var(--ink); }
.drawer .btn--block, .cartpage__side .btn--block, .checkout__side .btn { background: var(--lime); color: var(--ink); border-color: var(--lime); min-height: 56px; }
.drawer .btn--block:hover { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.toast { background: var(--ink); color: var(--lime); font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: .08em; padding: 14px 20px; }
.empty-cart__t { font: 900 26px var(--font-head); text-transform: uppercase; }
.line__img, .olines img { background: var(--card-bg); }
.line__img img, .olines img { object-fit: cover; }
.line, .cartpage__lines .line { grid-template-columns: 110px minmax(0, 1fr); }
.line__img { aspect-ratio: 5/4; }
.line__name { font: 700 15px/1.25 var(--font-head); text-transform: uppercase; }
.stepper { border: 1.5px solid var(--ink); }
.ship-progress__bar { height: 6px; border-radius: 0; background: var(--paper-2); }
.ship-progress__bar i { background: var(--ink); }

/* ——— курсор и магнитные кнопки ——— */
.cur { position: fixed; left: 0; top: 0; z-index: 400; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0; transition: opacity .3s, width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease); }
.cur.is-on { opacity: 1; }
.cur.is-big { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.magnetic { will-change: transform; }

/* ——— появление текста ——— */
.js [data-split] .sw { display: inline-block; text-indent: 0; }
.js [data-split] .sw > span { display: inline-block; opacity: 0; transform: translate3d(-.6em, 0, 0) skewX(-12deg); filter: blur(6px); transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.js [data-split].is-in .sw > span { opacity: 1; transform: none; filter: none; }
.js [data-words] .ww { display: inline-block; text-indent: 0; opacity: .16; transition: opacity .35s linear, color .35s; }
.js [data-words] .ww.on { opacity: 1; }

/* ——— главная: первый экран-поездка ——— */
.ride { position: relative; height: 245vh; background: var(--lime); }
.ride__stick { position: sticky; top: var(--hd-h); height: calc(100vh - var(--hd-h)); height: calc(100svh - var(--hd-h)); overflow: clip; --road: 15%; }
.ride__copy { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 3vh; will-change: transform, opacity; }
.ride__copy > * { max-width: 64vw; }
.ride__k { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 0; font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: .14em; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.ride__t { margin: 0; font: 900 clamp(54px, 8.8vw, 168px)/.88 var(--font-head); letter-spacing: -.025em; }
.ride__l { display: block; }
.js .ride__l { opacity: 0; transform: translate3d(-30vw, 0, 0) skewX(-18deg); filter: blur(10px); }
.ride.is-go .ride__l { opacity: 1; transform: none; filter: none; transition: opacity .6s var(--ease), transform 1s var(--ease), filter .7s var(--ease); }
.ride.is-go .ride__l:nth-child(2) { transition-delay: .08s; } .ride.is-go .ride__l:nth-child(3) { transition-delay: .16s; }
.ride__side { display: flex; align-items: flex-end; gap: 36px; padding-top: 6px; }
.ride__lead { margin: 0; font-size: 14px; line-height: 1.6; max-width: 40ch; }
.ride__cta { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }
.ride__big { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ride__big div { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-58%); text-align: center; white-space: nowrap; font: 900 19vw/1 var(--font-head); text-transform: uppercase; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 2px var(--ink); opacity: 0; }
.ride__lines { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.ride__road { position: absolute; left: 0; right: 0; bottom: var(--road); z-index: 2; height: 2px; background: var(--ink); }
.ride__road i { position: absolute; left: -100px; right: -100px; top: 18px; height: 6px; background: repeating-linear-gradient(90deg, var(--ink) 0 46px, transparent 46px 96px); opacity: .85; will-change: transform; }
.ride__vehicle { position: absolute; left: 0; bottom: calc(var(--road) - 1px); z-index: 3; width: 64vw; max-width: 1240px; will-change: transform; transform-origin: 30% 100%; pointer-events: none; }
.ride__vehicle svg, .ride__vehicle img { display: block; width: 100%; height: auto; }
.ride__vehicle .wh { transform-box: fill-box; transform-origin: center; }
.ride__vehicle .beam { transition: opacity .4s; }
.ride__vehicle .screen { animation: blink 1.2s steps(2) infinite; }
.js .ride__vehicle { opacity: 0; }
.js .ride.is-go .ride__vehicle, .ride.is-static .ride__vehicle { opacity: 1; }
.ride.is-static .ride__vehicle { left: auto; right: 3vw; width: min(42vw, 640px); }
@media (max-width: 860px) { .ride.is-static .ride__vehicle { right: 8vw; width: 84vw; } }
.ride__hud { position: absolute; left: var(--pad); bottom: 16px; z-index: 4; display: flex; gap: 28px; }
.ride__hud b { display: block; font: 900 34px/1 var(--font-head); font-variant-numeric: tabular-nums; min-width: 2.1ch; }
.ride__hud small { display: block; margin-top: 4px; font: 600 10px var(--font-body); text-transform: uppercase; letter-spacing: .12em; }
.ride__hint { position: absolute; right: var(--pad); bottom: 22px; z-index: 4; display: flex; align-items: center; gap: 12px; margin: 0; font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: .12em; transition: opacity .4s; }
.ride__hint i { width: 48px; height: 2px; background: var(--ink); transform-origin: left; animation: hint 1.6s var(--ease) infinite; }
@keyframes hint { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }

/* бегущая лента */
.band { position: relative; z-index: 5; overflow: clip; padding: 30px 0; margin: -58px 0 -14px; pointer-events: none; }
.band__rot { margin: 0 -4%; transform: rotate(-2.2deg); }
.band__in { padding: 14px 0; background: var(--ink); color: var(--lime); font: 900 clamp(28px, 4.2vw, 64px)/1 var(--font-head); text-transform: uppercase; letter-spacing: -.01em; transform-origin: center; }

/* подбор по километрам */
.km { padding: 120px 0 110px; }
.km__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 60px; align-items: end; margin-bottom: 40px; }
.km__head .kicker { grid-column: 1 / -1; }
.km__head .h2 { margin: 0; }
.km__lead { margin: 0; max-width: 46ch; }
.km__ctrl { padding: 30px 0 18px; border-top: 1.5px solid var(--ink); }
.km__label { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 22px; }
.km__label output { font: 900 clamp(40px, 5vw, 80px)/1 var(--font-head); letter-spacing: -.02em; text-transform: none; }
.km__track { position: relative; padding: 18px 0; }
.km__marks { position: absolute; left: 14px; right: 14px; top: 50%; height: 0; pointer-events: none; }
.km__marks i { position: absolute; top: -18px; width: 2px; height: 14px; background: #a5a59c; transform: translateX(-1px); transition: background .3s, height .3s, top .3s; }
.km__marks i.is-fit { background: var(--ink); height: 22px; top: -26px; }
.km__scale { display: flex; justify-content: space-between; font: 600 11px var(--font-body); color: var(--muted); padding: 0 6px; }
.km__res { margin: 30px 0 16px; font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: .1em; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; position: relative; z-index: 1; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--ink) 0 var(--fill, 50%), #c5c5bc var(--fill, 50%)); }
input[type="range"]::-moz-range-track { height: 4px; background: #c5c5bc; }
input[type="range"]::-moz-range-progress { height: 4px; background: var(--ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -13px; background: var(--lime); border: 2px solid var(--ink); border-radius: 0; transform: rotate(45deg); transition: transform .25s var(--ease); }
input[type="range"]:active::-webkit-slider-thumb { transform: rotate(45deg) scale(1.15); }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; background: var(--lime); border: 2px solid var(--ink); border-radius: 0; transform: rotate(45deg); }

/* карточки товаров — «ведомость» */
.grid--zhel { --cols: 4; gap: 0; border-top: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink); counter-reset: card; }
.grid--zhel .card { counter-increment: card; background: var(--bg); border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transition: background .3s; }
.grid--zhel .card__media { position: relative; aspect-ratio: 5/4; background: var(--card-bg); border-bottom: 1.5px solid var(--ink); transition: background .35s var(--ease); }
.grid--zhel .card__media::before { content: counter(card, decimal-leading-zero); position: absolute; left: 10px; bottom: 10px; z-index: 3; padding: 2px 6px; background: var(--paper); font: 600 10px var(--font-body); color: var(--ink); }
.grid--zhel .card__media::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 6px; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.grid--zhel .card:hover .card__media::after { transform: scaleX(1); }
.grid--zhel .card__media img { position: relative; z-index: 1; object-fit: cover; transition: transform .9s var(--ease), filter .5s; }
.grid--zhel .card:hover .card__media img { transform: scale(1.06); }
.grid--zhel .card__media img.is-swap { animation: swap .55s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateX(-12%); } }
.grid--zhel .card__badge { left: 12px; top: 12px; z-index: 2; background: var(--ink); color: var(--lime); font: 600 10px/1.6 var(--font-body); text-transform: uppercase; letter-spacing: .08em; padding: 3px 8px; }
.grid--zhel .card__fav { z-index: 2; right: 6px; top: 6px; background: transparent; }
.grid--zhel .card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 14px 16px 16px; }
.grid--zhel .card__name { order: 1; grid-column: 1 / -1; font: 700 17px/1.15 var(--font-head); text-transform: uppercase; letter-spacing: -.005em; }
.grid--zhel .card__name a:hover { text-decoration: none; color: var(--blue); }
.grid--zhel .card__meta { order: 2; grid-column: 1 / -1; font-size: 11px; color: var(--muted); }
.cspec { order: 3; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 2px; border-top: 1px solid var(--line); }
.cspec div { padding: 8px 0 0; }
.cspec div + div { padding-left: 10px; border-left: 1px solid var(--line); }
.cspec dt { font: 600 9px var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.cspec dd { margin: 2px 0 0; font: 700 15px/1.1 var(--font-head); white-space: nowrap; }
.cswatch { order: 4; grid-column: 1 / -1; display: flex; gap: 8px; margin: 2px 0; }
.swb { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 0; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 0 0 2px var(--bg), 0 0 0 2px transparent; transition: box-shadow .25s, transform .25s var(--ease); }
.swb:hover { transform: scale(1.12); }
.swb.is-on { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); }
.grid--zhel .card__price { order: 5; font: 700 19px/1.1 var(--font-head); flex-wrap: wrap; }
.grid--zhel .card__price s { font: 400 12px var(--font-body); }
.grid--zhel .card__add { order: 6; min-height: 40px; padding: 0 14px; margin: 0; font-size: 11px; background: var(--ink); color: var(--lime); border-color: var(--ink); }
.grid--zhel .card__add:hover { background: var(--lime); color: var(--ink); }
.grid--dark { border-color: #353535; }
.grid--dark .card { background: #121212; color: var(--paper); border-color: #353535; }
.grid--dark .card__media { background: #1c1c1c; border-color: #353535; }
.grid--dark .card__media::before, .grid--dark .card__meta, .grid--dark .cspec dt { color: #8d8d86; }
.grid--dark .card__fav { color: var(--paper); }
.grid--dark .card__add { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.grid--dark .card__add:hover { background: #fff; border-color: #fff; }
.grid--dark .swb { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 0 0 2px #121212; }

/* разделы каталога — строки */
.cats { padding: 40px 0 120px; display: grid; }
.cat { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr) auto 220px; align-items: center; gap: 24px; min-height: 150px; padding: 18px 0; border-top: 1.5px solid var(--ink); text-decoration: none; overflow: clip; isolation: isolate; }
.cat:last-child { border-bottom: 1.5px solid var(--ink); }
.cat::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--lime); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease); }
.cat:hover::before { transform: scaleY(1); }
.cat__n { font: 600 12px var(--font-body); padding-left: 6px; }
.cat__t { font: 900 clamp(34px, 5.6vw, 96px)/.95 var(--font-head); text-transform: uppercase; letter-spacing: -.02em; transition: transform .6s var(--ease); }
.cat:hover .cat__t { transform: translateX(22px); }
.cat__c { font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.cat__img { width: 220px; height: 130px; overflow: hidden; clip-path: inset(0 0 0 100%); transition: clip-path .6s var(--ease); }
.cat:hover .cat__img { clip-path: inset(0 0 0 0); }
.cat__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transition: transform .9s var(--ease); }
.cat:hover .cat__img img { transform: none; }

/* история «куда деваются километры» */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--ink); color: var(--paper); }
.story__stick { position: sticky; top: var(--hd-h); align-self: start; height: calc(100vh - var(--hd-h)); height: calc(100svh - var(--hd-h)); display: grid; place-items: center; border-right: 1.5px solid #2a2a2a; }
.story__gauge { position: relative; width: min(38vw, 66vh, 560px); }
.story__gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.sg__track, .sg__fill { fill: none; stroke-width: 22; }
.sg__track { stroke: #242424; }
.sg__fill { stroke: var(--lime); stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset .8s var(--ease), stroke .5s; }
.story.is-low .sg__fill { stroke: var(--coral); }
.sg__num { position: absolute; left: 0; right: 0; top: 30%; text-align: center; }
.sg__num b { display: block; font: 900 clamp(90px, 13vw, 210px)/.9 var(--font-head); letter-spacing: -.04em; color: var(--lime); font-variant-numeric: tabular-nums; }
.sg__num span { font: 600 13px var(--font-body); letter-spacing: .3em; text-transform: uppercase; color: #9a9a92; }
.sg__cap { position: absolute; left: 0; right: 0; bottom: 6%; margin: 0; text-align: center; font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: .14em; color: var(--paper); }
.story__steps { padding: 16vh var(--pad) 16vh 6vw; }
.story__head { margin-bottom: 10vh; max-width: 640px; }
.story__head p { color: #a9a9a1; }
.story .kicker::before { box-shadow: none; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { min-height: 52vh; padding: 28px 0; border-top: 1.5px solid #2c2c2c; opacity: .3; transition: opacity .5s; max-width: 620px; }
.step.is-on { opacity: 1; }
.step__n { display: block; font: 900 clamp(40px, 4.6vw, 76px)/1 var(--font-head); color: var(--lime); margin-bottom: 14px; }
.step__t { display: block; font: 700 clamp(20px, 1.9vw, 30px)/1.15 var(--font-head); text-transform: uppercase; margin-bottom: 12px; }
.step p { color: #b5b5ad; max-width: 52ch; }
.step--final { min-height: 50vh; }
.step--final .btn { margin-top: 16px; }

/* хиты, манифест, сервис, ночь, адрес */
.hits { padding: 120px 0 100px; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 30px; margin-bottom: 36px; }
.sec-head .kicker { grid-column: 1 / -1; }
.sec-head .h2 { margin: 0; }
.mf { padding: 40px 0 120px; overflow: clip; }
.mf__text { margin: 0 auto; font: 400 clamp(24px, 3.3vw, 54px)/1.14 var(--font-head); text-indent: 14vw; letter-spacing: -.01em; }
.mf__text--2 { margin-top: 0; }
.mf__strip { margin: 70px 0; overflow: clip; }
.mf__row { display: flex; align-items: center; gap: 22px; width: max-content; padding: 0 var(--pad); will-change: transform; }
.mf__i { width: 18vw; max-width: 300px; height: auto; aspect-ratio: 4/5; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .5s; }
.mf__i:hover { filter: none; }
.mf__i--w { width: 26vw; max-width: 430px; aspect-ratio: 3/2; }
.mf__i--lo { margin-top: 90px; } .mf__i--hi { margin-bottom: 90px; }
.srv { padding: 40px 0 130px; }
.srv__list { list-style: none; margin: 0; padding: 0; border-bottom: 1.5px solid var(--ink); }
.srv__list li { border-top: 1.5px solid var(--ink); }
.srv__list a { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1.1fr) minmax(0, 1fr) 40px; align-items: center; gap: 24px; padding: 30px 0; text-decoration: none; isolation: isolate; overflow: clip; }
.srv__list a::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); }
.srv__list a::after { content: '→'; font: 900 26px var(--font-head); justify-self: end; padding-right: 8px; transition: transform .4s var(--ease); }
.srv__list a:hover { color: var(--lime); }
.srv__list a:hover::before { transform: scaleX(1); }
.srv__list a:hover::after { transform: translateX(-10px); }
.srv__n { font: 900 54px/1 var(--font-head); color: transparent; -webkit-text-stroke: 1.5px currentColor; padding-left: 4px; }
.srv__list b { font: 700 clamp(22px, 2.2vw, 34px)/1.1 var(--font-head); text-transform: uppercase; }
.srv__d { color: inherit; opacity: .75; }
.night { position: relative; padding: 140px 0 120px; background: var(--ink); color: var(--paper); overflow: clip; }
.night__bg { position: absolute; inset: -10% 0 auto; width: 100%; height: 120%; object-fit: cover; opacity: .32; will-change: transform; }
.night__in { position: relative; }
.night__head { max-width: 760px; margin-bottom: 50px; }
.night__head p { color: #c9c9c0; max-width: 56ch; }
.night .kicker::before { box-shadow: none; }
.where { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 60px; align-items: center; padding: 130px 0; }
.where__map { aspect-ratio: 10/7; overflow: hidden; border: 1.5px solid var(--ink); }
.where__map svg, .where__map img { display: block; width: 100%; height: 100%; object-fit: cover; }
.where__map g { animation: pin 2.2s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pin { 50% { transform: translateY(-6px); } }
.where__dl { margin: 0 0 26px; display: grid; }
.where__dl div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.where__dl dt { font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.where__dl dd { margin: 0; font: 700 18px var(--font-head); }
.where__btns, .blk__btns, .lost__btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* подвал */
.ft { background: var(--ink); color: var(--paper); padding-top: 0; overflow: clip; }
.ft__cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 46px 0; border-bottom: 1.5px solid #2a2a2a; text-decoration: none; }
.ft__q { font: 400 clamp(20px, 2.4vw, 36px)/1.15 var(--font-head); max-width: 24ch; }
.ft__go { display: inline-flex; align-items: center; gap: 12px; padding: 18px 26px; background: var(--lime); color: var(--ink); font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: .1em; transition: transform .4s var(--ease); white-space: nowrap; }
.ft__cta:hover .ft__go { transform: translateX(-12px); }
.ft__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; padding: 50px 0 20px; }
.ft__h { font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: .14em; color: var(--lime); margin-bottom: 14px; }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: #c8c8c0; }
.ft ul a { text-decoration: none; }
.ft ul a:hover { color: var(--lime); }
.ft__word { line-height: .78; margin: 10px 0 -2vw; text-align: center; font: 900 32vw/.78 var(--font-head); color: var(--lime); letter-spacing: -.04em; user-select: none; white-space: nowrap; }
.ft__word span { display: inline-block; will-change: transform; }
.ft__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 30px; padding: 18px 0 14px; border-top: 1.5px solid #2a2a2a; font-size: 11px; color: #8d8d86; position: relative; background: var(--ink); }
.ft__dev { position: relative; margin: 0 auto; padding: 0 0 24px; background: var(--ink); font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: .12em; }
.ft__dev a { color: var(--lime); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; transition: color .25s; }
.ft__dev a:hover { color: #fff; }

/* ——— каталог ——— */
.catalog { padding-bottom: 40px; }
.crumbs { font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: .1em; padding: 22px 0 10px; color: var(--muted); }
.cat-head { margin: 0 0 18px; gap: 18px; align-items: flex-start; }
.cat-head h1 { font: 900 clamp(52px, 10vw, 180px)/.86 var(--font-head); letter-spacing: -.03em; }
.cat-count { font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: .1em; padding: 8px 10px; background: var(--lime); color: var(--ink); margin-top: 1vw; }
.cat-chips { gap: 0; padding: 10px 0 0; border-top: 1.5px solid var(--ink); }
.cat-chips .chip { min-height: 52px; padding: 0 20px 0 0; border: 0; background: none; font: 700 clamp(15px, 1.4vw, 22px)/1 var(--font-head); text-transform: uppercase; color: #9b9b92; transition: color .25s; }
.cat-chips .chip + .chip::before { content: '/'; margin-right: 20px; color: #c2c2b9; }
.cat-chips .chip:hover { color: var(--ink); }
.cat-chips .chip.is-on { color: var(--ink); background: none; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 8px; text-underline-offset: -2px; text-decoration-skip-ink: none; }
.cat-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 14px 0 24px; }
.cat-search input { width: 100%; height: 50px; padding: 0 16px; border: 1.5px solid var(--ink); background: transparent; font: 14px var(--font-body); }
.filters-btn { display: inline-flex !important; }
.cat-sort { font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: .08em; }
.cat-sort select { height: 50px; border: 1.5px solid var(--ink); background: var(--bg); font: 13px var(--font-body); }
.catalog .filters { position: fixed; top: 0; left: 0; bottom: 0; z-index: 70; width: min(440px, 100%); padding: 0 24px 24px; overflow: auto; display: block; background: var(--bg); border-right: 1.5px solid var(--ink); transform: translateX(-100%); visibility: hidden; transition: transform .45s var(--ease), visibility .45s; }
.catalog .filters.is-open { transform: none; visibility: visible; }
.catalog .filters__top { display: flex; margin: 0 -24px 18px; border-bottom: 1.5px solid var(--ink); }
.catalog .filters__foot { position: sticky; bottom: -24px; background: var(--bg); padding: 14px 0 18px; }
.catalog .filters__foot .filters__apply { display: inline-flex; flex: 1; }
.fgroup { border-color: var(--line); }
.fgroup legend { font: 700 14px var(--font-head); text-transform: uppercase; }
.fopt input { accent-color: var(--ink); }
.cat-main { --cols: 4; }
.cat-main .grid--zhel { --cols: 4; }
.cat-help { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 50px 0 40px; padding: 30px; background: var(--ink); color: var(--paper); text-decoration: none; }
.cat-help__k { font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: #a5a59d; }
.cat-help__t { display: inline-flex; align-items: center; gap: 12px; font: 900 clamp(20px, 2.6vw, 40px)/1 var(--font-head); text-transform: uppercase; color: var(--lime); transition: transform .4s var(--ease); }
.cat-help:hover .cat-help__t { transform: translateX(-10px); }
.empty__t { font: 900 28px var(--font-head); text-transform: uppercase; }

/* ——— карточка товара ——— */
[data-page="product"] .product { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0; padding: 0; margin-top: 8px; border: 1.5px solid var(--ink); align-items: stretch; }
.product__gal { position: relative; background: var(--card-bg); border-right: 1.5px solid var(--ink); overflow: clip; }
.product__gal::before { content: attr(data-name); position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-60%); text-align: center; white-space: nowrap; font: 900 13vw/1 var(--font-head); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(13, 13, 13, .14); pointer-events: none; }
.gallery { position: relative; }
.gallery__main { background: transparent; aspect-ratio: 5/4; }
.gallery__main img { position: relative; width: 100%; height: 100%; object-fit: cover; animation: g-in .6s var(--ease); }
@keyframes g-in { from { opacity: 0; transform: translateX(-6%); } }
.gallery__nav { background: var(--ink); color: var(--lime); border-radius: 0; }
.gallery__thumbs { gap: 0; margin: 0; border-top: 1.5px solid var(--ink); }
.gallery__thumbs button { width: 120px; border: 0; border-right: 1.5px solid var(--ink); background: var(--paper); }
.gallery__thumbs button[aria-current] { background: var(--lime); }
.gallery__thumbs img { aspect-ratio: 5/4; object-fit: cover; }
.product__buy { position: sticky; top: calc(var(--hd-h) + 10px); align-self: start; padding: 32px 32px 28px; gap: 16px; }
.pbadge { background: var(--ink); color: var(--lime); font: 600 10px/1.6 var(--font-body); text-transform: uppercase; letter-spacing: .1em; }
.ptitle { font: 900 clamp(36px, 3.8vw, 64px)/.9 var(--font-head); letter-spacing: -.02em; }
.pmeta { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.pprice { font: 900 clamp(30px, 2.8vw, 44px)/1 var(--font-head); }
.pprice s { font: 400 15px var(--font-body); }
.pvars__l { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.pvars .chip { min-height: 42px; padding: 0 14px 0 8px; border: 1.5px solid var(--line); background: transparent; font-size: 12px; gap: 8px; }
.pvars .chip.is-on { background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.chip .sw { width: 22px; height: 22px; }
.pbuy .btn { background: var(--lime); color: var(--ink); border-color: var(--ink); min-height: 58px; }
.pbuy .btn:hover { background: var(--ink); color: var(--lime); }
.pfav { border: 1.5px solid var(--ink); border-radius: 0; }
.stepper--lg { height: 58px; }
.pfacts { border-color: var(--ink); }
.pfacts li::before { border-color: var(--ink); }
.pstock { color: var(--ok); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.honest { display: grid; gap: 8px; padding: 18px; background: var(--ink); color: var(--paper); }
.honest__k { margin: 0 0 4px; font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: .12em; color: var(--lime); }
.hb { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; font-size: 12px; isolation: isolate; }
.hb::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #2b2b2b; transform: scaleX(var(--v)); transform-origin: left; transition: transform 1s var(--ease); }
.js .honest:not(.is-in) .hb::before { transform: scaleX(0); }
.hb:first-of-type::before { background: #3a3a3a; }
.hb--cold::before { background: #1f3540; }
.hb b { font: 700 15px var(--font-head); white-space: nowrap; }
.hb span { color: #c9c9c0; }
.honest__link { margin-top: 6px; color: var(--lime); font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: .08em; }
.pfits { margin: 0; font-size: 13px; }
.pnote { margin: -4px 0 0; font-size: 11px; color: var(--muted); }
.pinfo { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 70px 0 30px; border-top: 0; }
.pinfo h2 { font: 900 clamp(30px, 3.6vw, 56px)/.95 var(--font-head); margin-bottom: 26px; }
.pinfo__col:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 0 60px; padding-bottom: 60px; }
.pinfo__col:first-child p { font: 400 clamp(17px, 1.5vw, 23px)/1.4 var(--font-head); grid-column: 2; margin: 0 0 .8em; }
.pinfo__col:first-child h2 { grid-row: 1 / span 3; }
.specs { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); column-gap: 40px; }
.specs div { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.specs dt { font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: .08em; }
.specs dd { font: 700 clamp(16px, 1.6vw, 26px)/1.15 var(--font-head); }
.js .specs div { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 40ms); }
.js .specs.is-in div { opacity: 1; transform: none; }
.related { padding: 40px 0 100px; }
.related__t { font: 900 clamp(30px, 3.6vw, 56px)/.95 var(--font-head); margin-bottom: 26px; }
.related .grid--zhel { --cols: 4; }

/* ——— корзина, оформление ——— */
.page-title { font: 900 clamp(46px, 8vw, 140px)/.88 var(--font-head); letter-spacing: -.03em; margin: 6px 0 34px; }
.cartpage__side, .checkout__side { background: var(--ink); color: var(--paper); padding: 28px; --muted: #a5a59d; --line: rgba(255, 255, 255, .16); }
.cartpage__side .sum__total, .checkout__side .sum__total { border-color: rgba(255, 255, 255, .25); font: 900 22px var(--font-head); }
.cartpage__side .ship-progress__bar, .drawer .ship-progress__bar { background: #2e2e2e; }
.cartpage__side .ship-progress__bar i { background: var(--lime); }
.promo input { border: 1.5px solid #3a3a3a; background: transparent; color: var(--paper); }
.promo .btn--ghost { color: var(--lime); border-color: var(--lime); }
.promo .btn--ghost:hover { background: var(--lime); color: var(--ink); }
.checkout__t { font: 900 24px var(--font-head); text-transform: uppercase; }
.olines li { grid-template-columns: 60px 1fr auto; }
.olines img { width: 60px; aspect-ratio: 5/4; }
.cbox { border-color: var(--ink); }
.cbox legend { font: 900 24px var(--font-head); text-transform: uppercase; }
.field { font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: .08em; }
.field input, .field textarea { border: 1.5px solid var(--ink); background: transparent; font: 15px var(--font-body); text-transform: none; letter-spacing: 0; }
.field input:focus, .field textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--lime); }
.opt { border: 1.5px solid var(--ink); transition: background .25s; }
.opt:has(input:checked) { background: var(--lime); box-shadow: none; }
.opt input, .agree input { accent-color: var(--ink); }
.opt b { font: 700 15px var(--font-head); text-transform: uppercase; }
.done { max-width: 980px; padding: 20px 0 100px; }
.done__k { display: inline-block; padding: 8px 12px; background: var(--lime); color: var(--ink); font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: .1em; }
.done__t { font: 900 clamp(40px, 5.6vw, 96px)/.9 var(--font-head); hyphens: manual; }
.done .btn { background: var(--ink); color: var(--lime); }
.upsell { padding: 20px 0 90px; }
.upsell .sec-t, .lost .sec-t { font: 900 clamp(28px, 3.4vw, 52px)/.95 var(--font-head); text-transform: uppercase; margin: 30px 0 22px; }
.credits img { aspect-ratio: 4/5; object-fit: cover; }
.credits ~ h2, [data-credits] h2 { font: 900 28px var(--font-head); text-transform: uppercase; margin: 30px 0 12px; }
.lost { position: relative; padding-top: 20px; }
.lost__art { position: relative; width: min(560px, 100%); margin: 10px 0 34px; }
.lost__art img { width: 100%; aspect-ratio: 5/4; object-fit: cover; transform: rotate(-3deg); filter: grayscale(1) contrast(1.05); border: 1.5px solid var(--ink); }
.lost__bat { position: absolute; right: 8%; top: 12%; width: 74px; height: 34px; border: 3px solid var(--ink); padding: 3px; }
.lost__bat::after { content: ''; position: absolute; right: -9px; top: 9px; width: 6px; height: 10px; background: var(--ink); }
.lost__bat i { display: block; width: 12%; height: 100%; background: var(--coral); animation: blink 1s steps(2) infinite; }
.lost__code { position: absolute; right: 0; top: 30px; font: 900 clamp(100px, 22vw, 380px)/1 var(--font-head); color: transparent; -webkit-text-stroke: 2px var(--ink); margin: 0; z-index: -1; }

/* ——— страницы «Шоурум», «Доставка» ——— */
.page { padding-bottom: 90px; }
.page-xl { font: 900 clamp(48px, 10vw, 190px)/.86 var(--font-head); letter-spacing: -.03em; margin: 10px 0 40px; }
.page-lede { font: 400 clamp(22px, 2.9vw, 46px)/1.16 var(--font-head); text-indent: 14vw; margin: 0 0 70px; }
.collage { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto; gap: 16px; margin-bottom: 80px; }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage img:first-child { grid-row: 1 / span 2; aspect-ratio: 3/2; }
.collage img:nth-child(2) { aspect-ratio: 4/3; }
.collage img:nth-child(3) { aspect-ratio: 16/9; }
.blk { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px 40px; padding: 50px 0; border-top: 1.5px solid var(--ink); }
.blk > .kicker { grid-row: 1 / span 4; font: 900 40px var(--font-head); }
.blk > .kicker::before { display: none; }
.blk > * { grid-column: 2; }
.blk > .kicker { grid-column: 1; }
.blk__p { max-width: 70ch; font-size: 15px; }
.numl { list-style: none; counter-reset: nl; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-left: 1.5px solid var(--ink); }
.numl li { counter-increment: nl; display: grid; gap: 8px; align-content: start; padding: 20px; border-right: 1.5px solid var(--ink); border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.numl li::before { content: counter(nl, decimal-leading-zero); font: 600 11px var(--font-body); color: var(--muted); }
.numl b { font: 700 20px/1.1 var(--font-head); text-transform: uppercase; }
.price { margin: 0 0 24px; display: grid; }
.price div { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.price dt { font-size: 14px; }
.price dd { margin: 0; font: 700 18px var(--font-head); white-space: nowrap; }
.where--page { grid-template-columns: 200px minmax(0, 1fr) minmax(0, .8fr); align-items: start; padding: 50px 0; }
.where--page .where__info { grid-column: 2; }
.where--page .where__map { grid-column: 3; aspect-ratio: 4/5; }
.dtable { display: grid; border-top: 1.5px solid var(--ink); }
.dtable__r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 22px 0; border-bottom: 1.5px solid var(--ink); }
.dtable__r b { font: 700 clamp(18px, 1.8vw, 28px)/1.1 var(--font-head); text-transform: uppercase; }
.dtable__r em { font-style: normal; font: 700 16px var(--font-head); text-align: right; }
.faq { display: grid; border-top: 1.5px solid var(--ink); }
.faq details { border-bottom: 1.5px solid var(--ink); }
.faq summary { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; font: 700 clamp(17px, 1.6vw, 24px)/1.2 var(--font-head); text-transform: uppercase; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 900 28px/1 var(--font-head); transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 70ch; padding-bottom: 20px; margin: 0; }

/* ——— «Запас хода» ——— */
.zh { padding-bottom: 60px; }
.zh__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); gap: 10px 40px; align-items: end; margin-bottom: 34px; }
.zh__head .kicker { grid-column: 1 / -1; margin: 0; }
.zh__t { margin: 0; font: 900 clamp(52px, 10.5vw, 196px)/.84 var(--font-head); letter-spacing: -.035em; }
.zh__lead { margin: 0; padding-bottom: 10px; }
.zh__grid { display: grid; grid-template-columns: minmax(330px, 430px) minmax(0, 1fr); gap: 0; border: 1.5px solid var(--ink); }
.zh__form { padding: 6px 24px 20px; border-right: 1.5px solid var(--ink); min-width: 0; }
.zf { border: 0; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.zf:last-child { border-bottom: 0; }
.zf legend { display: flex; justify-content: space-between; align-items: baseline; width: 100%; padding: 0 0 12px; font: 700 14px var(--font-head); text-transform: uppercase; }
.zf legend output { padding: 3px 8px; background: var(--lime); font: 900 16px var(--font-head); }
.zf__scale { display: flex; justify-content: space-between; margin-top: 2px; font: 600 10px var(--font-body); color: var(--muted); }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg label { position: relative; cursor: pointer; }
.seg label + label span { border-left: 0; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: grid; gap: 2px; min-height: 52px; align-content: center; padding: 8px 10px; border: 1.5px solid var(--ink); font: 700 13px/1.1 var(--font-head); text-transform: uppercase; transition: background .25s, color .25s; }
.seg small { font: 400 10px var(--font-body); text-transform: none; color: var(--muted); }
.seg input:checked + span { background: var(--ink); color: var(--lime); }
.seg input:checked + span small { color: #b8b8b0; }
.seg input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.zh__models { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; border-left: 1.5px solid var(--ink); margin-right: -24px; }
.zm { position: relative; flex: 0 0 132px; scroll-snap-align: start; cursor: pointer; }
.zm input { position: absolute; opacity: 0; inset: 0; }
.zm span { display: grid; gap: 2px; padding: 6px 10px 10px; height: 100%; border: 1.5px solid var(--ink); border-left: 0; transition: background .25s; }
.zm img { width: 100%; height: auto; aspect-ratio: 5/4; object-fit: cover; margin-bottom: 4px; }
.zm b { font: 700 12px/1.1 var(--font-head); text-transform: uppercase; }
.zm small { font-size: 10px; color: var(--muted); }
.zm input:checked + span { background: var(--lime); }
.zm input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: -4px; }
.zh__out { min-width: 0; }
.zh__screen { position: relative; background: #101010; color: var(--paper); }
.zh__map .map { display: block; width: 100%; height: auto; }
.m-bg { fill: #101010; }
.m-st { stroke: #1d1d1d; stroke-width: 1.5; fill: none; }
.m-av { stroke: #2b2b2b; stroke-width: 6; fill: none; }
.m-river-e { stroke: #1b3a46; stroke-width: 40; fill: none; opacity: .5; }
.m-river { stroke: #15303a; stroke-width: 26; fill: none; }
.m-br { stroke: #3a3a3a; stroke-width: 9; fill: none; }
.m-park { fill: #172312; }
.m-l { fill: #6c6c66; font: 600 10px var(--font-body); letter-spacing: .12em; }
.m-l--river { fill: #3f6a79; font-style: italic; }
.m-route-bg { fill: none; stroke: #33410a; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.m-route { fill: none; stroke: var(--lime); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.m-pin circle { fill: var(--paper); }
.m-pin text { font: 700 12px var(--font-body); fill: var(--ink); }
.m-pin--dest path { stroke: var(--paper); stroke-width: 3; fill: var(--paper); }
.m-pin--dest path:first-child { fill: none; }
.m-dot circle { fill: var(--lime); }
.m-dot__halo { opacity: .25; animation: halo 1.4s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes halo { from { transform: scale(.6); opacity: .5; } to { transform: scale(1.5); opacity: 0; } }
.m-dead { opacity: 0; transition: opacity .3s; }
.m-dead.is-on { opacity: 1; animation: pop .5s var(--ease); }
.m-dead circle { fill: var(--coral); }
.m-dead path { stroke: #fff; stroke-width: 3; }
.m-dead text { fill: var(--coral); font: 700 12px var(--font-body); }
@keyframes pop { from { transform: scale(0); } }
.zh__routes { display: flex; flex-wrap: wrap; gap: 0; border-top: 1.5px solid #2a2a2a; }
.rt { position: relative; flex: 1 1 0; min-width: 120px; cursor: pointer; }
.rt input { position: absolute; opacity: 0; inset: 0; }
.rt span { display: grid; gap: 2px; padding: 12px 14px; height: 100%; border-right: 1.5px solid #2a2a2a; font: 700 12px/1.15 var(--font-head); text-transform: uppercase; transition: background .25s, color .25s; }
.rt small { font: 400 10px var(--font-body); text-transform: none; color: #8d8d86; }
.rt input:checked + span { background: var(--lime); color: var(--ink); }
.rt input:checked + span small { color: #333; }
.rt input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: -3px; }
.zh__back { display: inline-flex; align-items: center; gap: 10px; padding: 12px 14px; font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
.zh__back input { width: 18px; height: 18px; accent-color: var(--lime); margin: 0; }
.zh__back.is-off { opacity: .4; pointer-events: none; }
.zh__result { padding: 22px 24px 26px; border-top: 1.5px solid var(--ink); }
.zh__nums { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.zh__num span { display: block; font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.zh__num b { display: inline-block; font: 900 clamp(56px, 6vw, 104px)/.9 var(--font-head); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.zh__num i { font: 600 14px var(--font-body); font-style: normal; margin-left: 6px; }
.zh__bat { position: relative; height: 26px; margin: 16px 0 14px; border: 2px solid var(--ink); padding: 3px; }
.zh__bat::after { content: ''; position: absolute; right: -8px; top: 6px; width: 5px; height: 10px; background: var(--ink); }
.zh__bat i { display: block; height: 100%; background: var(--ink); transform-origin: left; transition: background .3s; }
.zh__bat.is-low i { background: var(--coral); }
.zh__bat span { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 600 11px var(--font-body); mix-blend-mode: difference; color: #fff; }
.zh__verdict { margin: 0 0 16px; font: 700 clamp(17px, 1.5vw, 22px)/1.3 var(--font-head); }
.zh__verdict.is-bad { color: var(--sale); }
.zh__verdict button { border: 0; background: var(--ink); color: var(--lime); padding: 4px 10px; font: inherit; font-size: .85em; text-transform: uppercase; cursor: pointer; }
.zh__verdict button:hover { background: var(--blue); color: #fff; }
.zh__factors { display: grid; gap: 4px; }
.zf-r { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; font-size: 12px; isolation: isolate; }
.zf-r::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--paper-2); transform: scaleX(var(--v, 1)); transform-origin: left; transition: transform .8s var(--ease); }
.zf-r b { font: 700 13px var(--font-head); white-space: nowrap; }
.zf-r--total::before { background: var(--lime); }
.zf-r--total { font-weight: 600; }
.zh__buy { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 30px; margin-top: 30px; padding: 30px 40px; background: var(--paper-2); border: 1.5px solid var(--ink); overflow: clip; isolation: isolate; }
.zh__buy::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: -1; background: var(--lime); border-top: 1.5px solid var(--ink); }
.zh__vehicle { max-width: 720px; }
.zh__vehicle { min-width: 0; }
.zh__vehicle svg { display: block; width: 100%; height: auto; }
.zh__vehicle.is-in svg { animation: v-in .8s var(--ease); }
@keyframes v-in { from { transform: translateX(-30%); opacity: 0; } }
.zh__vehicle .wh { transform-box: fill-box; transform-origin: center; }
.zh__name { font: 900 clamp(34px, 4vw, 70px)/.9 var(--font-head); margin: 0 0 8px; }
.zh__meta { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 18px; }
.zh__cl { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.zh__colors { display: flex; gap: 12px; margin-bottom: 20px; }
.zh__colors .swb { width: 34px; height: 34px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 0 0 3px var(--paper-2); }
.zh__colors .swb.is-on { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 0 0 3px var(--paper-2), 0 0 0 5px var(--ink); }
.zh__price { font: 900 clamp(32px, 3vw, 48px)/1 var(--font-head); margin: 0 0 14px; }
.zh__helmet { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 13px; cursor: pointer; }
.zh__helmet input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }
.zh__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.zh__note { margin-top: 18px; max-width: 90ch; }
.zh__float { display: none; }

/* ——— без движения ——— */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .ride { height: auto; }
  .ride__stick { position: relative; top: 0; height: auto; min-height: 640px; }
  .ride__vehicle { left: auto; right: 3vw; width: min(42vw, 640px); transform: none !important; }
  .js .ride__l, .js [data-split] .sw > span { opacity: 1; transform: none; filter: none; }
  .js [data-words] .ww { opacity: 1; }
  .story__stick { position: relative; top: 0; }
  .ticker__in, .band__in, .dot, .ride__hint i, .m-dot__halo, .where__map g { animation: none !important; }
  .js .specs div { opacity: 1; transform: none; }
}

/* ——— планшет ——— */
@media (max-width: 1200px) {
  .grid--zhel, .cat-main .grid--zhel, .related .grid--zhel { --cols: 3; }
  .hd__nav { gap: 16px; }
  .hd__nav a:nth-child(3) { display: none; }
  .zh__grid { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
  .srv__list a { grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr) 30px; }
}

/* ——— телефон: нижняя панель как в приложении ——— */
@media (max-width: 860px) {
  :root { --pad: 16px; --hd-h: 56px; }
  body { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .hd { grid-template-columns: auto 1fr auto; gap: 10px; }
  .hd__nav, .hd__lnk { display: none; }
  .hd__logo { justify-self: center; }
  .hd__ml { display: none; }
  .hd__cart { padding: 7px 10px; font-size: 11px; }
  .logo__t { font-size: 26px; }
  .tabbar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 55; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; height: 64px; padding: 0 6px 8px; background: var(--ink); color: #b9b9b1; border-radius: 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
  .tabbar a { position: relative; display: grid; justify-items: center; gap: 4px; text-decoration: none; font: 600 9px var(--font-body); text-transform: uppercase; letter-spacing: .04em; }
  .tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar a[aria-current] { color: var(--lime); }
  .tabbar b { position: absolute; top: -6px; left: 54%; margin: 0; background: var(--lime); color: var(--ink); }
  .tabbar__main svg { width: 60px; height: 60px; padding: 15px; margin-top: -26px; background: var(--lime); color: var(--ink); border-radius: 50%; border: 4px solid var(--ink); stroke-width: 2; }
  .tabbar__main { color: var(--lime); }
  .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .mmenu nav a { font-size: clamp(28px, 8.4vw, 44px); padding: 12px 0; }

  .ride { height: 230vh; }
  .ride__stick { --road: 13%; }
  .ride__copy { gap: 14px; padding-top: 18px; }
  .ride__copy > * { max-width: none; }
  .ride__side { display: grid; gap: 14px; }
  .ride__t { font-size: clamp(40px, 13.2vw, 96px); }
  .ride__lead { font-size: 13px; margin-bottom: 14px; }
  .btn--lg { min-height: 52px; padding: 0 18px; font-size: 11px; }
  .ride__vehicle { width: 104vw; }
  .ride__hud { top: 14px; bottom: auto; left: auto; right: var(--pad); gap: 14px; text-align: right; }
  .ride__hud b { font-size: 20px; }
  .ride__hud small { font-size: 9px; }
  .ride__hint { display: none; }
  .ride__big div { font-size: 30vw; top: 60%; }
  .band { margin: -44px 0 0; padding: 20px 0; }

  .km { padding: 80px 0 70px; }
  .km__head { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 26px; }
  .grid--zhel, .cat-main .grid--zhel, .related .grid--zhel { --cols: 2; }
  .grid--zhel .card__body { grid-template-columns: minmax(0, 1fr); padding: 12px 12px 14px; gap: 7px; }
  .grid--zhel .card__name { font-size: 12.5px; }
  .grid--zhel .card__add { width: 100%; }
  .cspec { grid-template-columns: 1fr 1fr; }
  .cspec div:nth-child(3) { display: none; }
  .cspec dd { font-size: 13px; }
  .grid--rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; width: auto; margin-left: var(--pad); margin-right: 0; scrollbar-width: none; }
  .grid--rail::-webkit-scrollbar { display: none; }
  .grid--rail .card { flex: 0 0 76%; scroll-snap-align: start; }

  .cats { padding: 20px 0 80px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-left: 1.5px solid var(--ink); }
  .cat { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; align-items: start; gap: 6px; min-height: 0; padding: 14px; border-right: 1.5px solid var(--ink); }
  .cat:nth-last-child(2) { border-bottom: 1.5px solid var(--ink); }
  .cat__t { font-size: clamp(14px, 3.9vw, 26px); }
  .cat:hover .cat__t { transform: none; }
  .cat__img { width: 100%; height: auto; aspect-ratio: 4/3; margin-top: 6px; clip-path: none; }
  .cat__img img { transform: none; }

  .story { grid-template-columns: minmax(0, 1fr); }
  .story__stick { z-index: 2; height: 40svh; min-height: 280px; background: var(--ink); border-right: 0; border-bottom: 1.5px solid #2a2a2a; }
  .story__gauge { width: min(66vw, 34svh, 300px); }
  .sg__num b { font-size: clamp(64px, 19vw, 110px); }
  .story__steps { padding: 50px var(--pad) 60px; }
  .story__head { margin-bottom: 30px; }
  .step { min-height: 44svh; }

  .hits { padding: 80px 0 60px; }
  .sec-head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mf { padding: 20px 0 80px; }
  .mf__text { text-indent: 18vw; font-size: clamp(21px, 6vw, 30px); }
  .mf__strip { margin: 40px 0; }
  .mf__i { width: 42vw; } .mf__i--w { width: 60vw; } .mf__i--lo { margin-top: 40px; } .mf__i--hi { margin-bottom: 40px; }
  .srv { padding: 20px 0 80px; }
  .srv__list a { grid-template-columns: 54px minmax(0, 1fr); gap: 6px 14px; padding: 20px 0; }
  .srv__list a::after { display: none; }
  .srv__n { font-size: 34px; grid-row: 1 / span 2; }
  .srv__d { grid-column: 2; font-size: 12px; }
  .night { padding: 80px 0 70px; }
  .where { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 80px 0; }
  .where__dl div { grid-template-columns: 110px 1fr; }
  .ft__cta { flex-direction: column; align-items: flex-start; padding: 34px 0; }
  .ft__cols { grid-template-columns: 1fr 1fr; gap: 26px 16px; padding: 34px 0 10px; }
  .ft__word { font-size: 30vw; }
  .ft__legal { flex-direction: column; }

  .cat-head h1 { font-size: clamp(30px, 10.4vw, 90px); }
  .page-title { font-size: clamp(28px, 9.4vw, 64px); }
  .pinfo h2, .related__t, .upsell .sec-t, .lost .sec-t { font-size: clamp(24px, 7.4vw, 40px); }
  .h2 { font-size: clamp(30px, 9.4vw, 56px); }
  .page-xl { font-size: clamp(36px, 12vw, 80px); }
  .done__t { font-size: clamp(32px, 10vw, 60px); }
  .cat-chips { overflow-x: auto; }
  .cat-chips .chip { padding-right: 14px; font-size: 14px; }
  .cat-chips .chip + .chip::before { margin-right: 14px; }
  .cat-tools { grid-template-columns: 1fr auto; }
  .cat-search { grid-column: 1 / -1; }
  .cat-sort { justify-self: end; }
  .cat-sort select { height: 46px; }
  .cat-help { flex-direction: column; align-items: flex-start; padding: 22px; }

  [data-page="product"] .product { grid-template-columns: minmax(0, 1fr); }
  .product__gal { border-right: 0; border-bottom: 1.5px solid var(--ink); }
  .product__buy { position: static; padding: 22px 16px; }
  .gallery__thumbs button { width: 90px; }
  .pinfo { padding: 40px 0 20px; }
  .pinfo__col:first-child { grid-template-columns: minmax(0, 1fr); padding-bottom: 30px; }
  .pinfo__col:first-child p { grid-column: 1; }
  .pinfo__col:first-child h2 { grid-row: auto; }
  .specs { grid-template-columns: minmax(0, 1fr); }
  .specs div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); padding: 12px 0; }
  .specs dd { font-size: 17px; }
  .related .grid--zhel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .related .grid--zhel .card { flex: 0 0 72%; scroll-snap-align: start; }
  .line, .cartpage__lines .line { grid-template-columns: 90px minmax(0, 1fr); }

  .page-lede { text-indent: 18vw; margin-bottom: 40px; }
  .collage { grid-template-columns: 1fr 1fr; margin-bottom: 40px; gap: 8px; }
  .collage img:first-child { grid-column: 1 / -1; grid-row: auto; }
  .blk { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 36px 0; }
  .blk > *, .blk > .kicker { grid-column: 1; grid-row: auto; }
  .blk > .kicker { font-size: 24px; margin-bottom: 4px; }
  .numl { grid-template-columns: minmax(0, 1fr); }
  .numl li + li { border-top: 0; }
  .where--page { grid-template-columns: minmax(0, 1fr); }
  .where--page .where__info, .where--page .where__map { grid-column: 1; }
  .dtable__r { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .dtable__r em { text-align: left; }

  .zh__head { grid-template-columns: minmax(0, 1fr); }
  .zh__t { font-size: clamp(48px, 16vw, 100px); }
  .zh__grid { grid-template-columns: minmax(0, 1fr); border: 0; }
  .zh__out { order: -1; border: 1.5px solid var(--ink); }
  .zh__form { border-right: 0; padding: 6px 0 10px; }
  .zh__models { margin-right: 0; }
  .zh__result { padding: 18px 16px 20px; }
  .zh__num b { font-size: clamp(46px, 15vw, 72px); }
  .rt { min-width: 0; flex: 1 1 30%; }
  .rt span { border-bottom: 1.5px solid #2a2a2a; padding: 10px; }
  .zh__buy { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 26px; gap: 10px; }
  .zh__float { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 54; display: flex; align-items: baseline; gap: 10px; padding: 10px 16px; border: 0; background: var(--lime); color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink), 0 8px 24px rgba(0, 0, 0, .25); font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; transform: translate(-50%, 0); transition: transform .4s var(--ease), opacity .3s; }
  .zh__float b { font: 900 18px var(--font-head); }
  .zh__float.is-bad { background: var(--coral); color: #fff; }
  .zh__float.is-hide { transform: translate(-50%, 160%); opacity: 0; pointer-events: none; }
}
@media (max-width: 520px) {
  .grid--zhel .card__price { font-size: 16px; }
  .grid--zhel .card__badge { font-size: 9px; padding: 2px 6px; }
  .ride__cta .btn { flex: 1 1 auto; }
  .cats { grid-template-columns: 1fr 1fr; }
  .ft__cols { grid-template-columns: 1fr 1fr; }
  .numl b { font-size: 17px; }
  .seg span { font-size: 12px; padding: 8px 8px; }
}