/* AUTOREAL16 — тёмный премиум, автосалон.
   Собирается _tools/build_v2.py. Один файл, без внешних зависимостей.

   Токены сняты с макета temp/ref-autoreal16.png (1536×1024) — в правой панели
   макет подписывает свою дизайн-систему:
     Основной #000000 · Тёмный #111111 · Серый #1F1F1F · Светлый #F5F5F5
     Красный (акцент) #E30613 · Шрифты Inter / Manrope · Иконки Lucide, линейные
     H1 48–72 · H2 36–48 · H3 22–28 · Body 16–18 · Small 13–14
   Заголовки в обычном регистре; капсом идёт только маленький надзаголовок. */

:root{
  /* Графит вместо чистого чёрного: глубина без «чёрной дыры». Карточки
     (--surface) чуть светлее панелей (--bg-2), те — светлее фона (--bg). */
  --bg:#0A0B10; --bg-deep:#07080C; --bg-2:#14151B; --surface:#17181F;
  --line:#23242D; --line-2:#2F303A; --line-3:#41424E;
  /* muted/dim подобраны по контрасту на #0A0B10 (WCAG AA) */
  --text:#F5F5F5; --text-2:#BBBDC7; --muted:#989AA4; --dim:#868892;
  /* --red только для крупного жирного: на #0A0B10 даёт 4.5:1 */
  --red:#E30613; --red-2:#F01A26; --red-deep:#A8050F; --ember:#3A0206;
  --gold:#D9BE8A; --ok:#2FA36E; --warn:#DDA13C;
  --r-xs:3px; --r-sm:4px; --r:6px; --r-lg:8px;
  /* Макет широкий: контент от 4,3 % от края, карточка ≈182 px при 4 колонках. */
  --wrap:1400px;
  --pad:clamp(16px,3vw,64px);
  --sh:0 18px 50px rgba(0,0,0,.55);
  --sh-lg:0 32px 80px rgba(0,0,0,.66);
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Manrope','Inter',system-ui,sans-serif;
  --hdr:70px;
  /* Высота мобильного таб-бара: 6 + 54 + 6. В переменной, потому что от неё
     зависят два отступа сразу — контента страницы и мобильного меню. Двумя
     числами они разъезжаются: меню получало padding-bottom 40px при баре
     66px, и кнопка «Подобрать автомобиль» с соцсетями уходила под бар. */
  --mtab:66px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 20px)}
body{
  margin:0;color:var(--text);background:var(--bg);
  font-family:var(--font);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
img{background:var(--surface)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;margin:0;text-wrap:balance}
/* Обычный регистр — как в макете. Капсом набирается только надзаголовок.
   h1 набран Montserrat — отдельно от остальных заголовков (они на Manrope,
   см. --display выше). Шрифт СВОЙ, не по ссылке на Google: проект держит
   шрифты у себя (src/fonts + src/css/fonts.css, собирает _tools/_fonts.py),
   поэтому Montserrat добавлен третьим семейством туда же — кириллица,
   латинское подмножество и отдельный файл под знак ₽. Без этого шага стек
   «Montserrat, Inter, …» молча отрисовался бы в Inter: Montserrat в проекте
   не было ни одного глифа, и подмена была бы видна только по метрикам.
   Правило стоит ПОСЛЕ «h1,h2,h3,h4» и с той же специфичностью, поэтому
   перекрывает у h1 и семейство, и насыщенность.
   Трекинг -.04em подобран под Montserrat: он шире Manrope, и прежние
   -.022em на нём читались как разряженные. */
h1{font-family:'Montserrat','Inter',system-ui,sans-serif;font-weight:800;
  line-height:1.05;letter-spacing:-.04em;
  font-size:clamp(2.5rem,5.4vw,4.5rem)}
h2{font-size:clamp(1.75rem,3vw,3rem);line-height:1.08;letter-spacing:-.018em}
h3{font-size:clamp(1.25rem,1.8vw,1.75rem);line-height:1.2;letter-spacing:-.012em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--red-2);outline-offset:3px;border-radius:var(--r-xs)}
::selection{background:var(--red);color:#fff}

.wrap{width:100%;max-width:calc(var(--wrap) + var(--pad) * 2);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
h1 em,h2 em,h3 em{font-style:normal;color:var(--red)}

/* ---------- типографика ---------- */
/* Надзаголовок из макета: красный капс с короткой чертой слева. */
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font);font-size:.78rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#FF4252;margin-bottom:14px;
}
.eyebrow::before{content:'';width:26px;height:2px;background:#FF4252;flex:none}
.lead{font-size:clamp(.98rem,1.15vw,1.08rem);color:var(--text-2);max-width:64ch;line-height:1.62}
.sec-head{margin-bottom:30px;max-width:820px}
.sec-head h2{position:relative}
.sec-head h2::before{content:'';position:absolute;left:-30px;top:50%;width:180px;height:180px;
  transform:translateY(-50%);z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(227,6,19,.12),transparent 66%)}
.sec-head--row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;max-width:none}
.sec-head--row h2{margin-bottom:0}
.mono{font-variant-numeric:tabular-nums}

/* ---------- кнопки ---------- */

/* Угол для вращающегося градиента красной кнопки.
   `@property` РЕГИСТРИРУЕТ тип: без регистрации --btn-angle — просто строка,
   её нельзя анимировать, и градиент застыл бы. Регистрация же делает угол
   интерполируемым, и `animation` вращает весь градиент.
   initial-value обязателен: у незарегистрированного свойства нет значения,
   `var(--btn-angle)` подставился бы в пустоту, весь `background` стал бы
   невалидным и кнопка осталась бы ПРОЗРАЧНОЙ. Со initial-value старый
   браузер (без @property) просто покажет статичный градиент — не сломается. */
@property --btn-angle{syntax:"<angle>";initial-value:0deg;inherits:true}

@keyframes btn-spin{to{--btn-angle:360deg}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  /* 11 px — скругление кнопок по правке заказчика (было 20 px по образцу
     .glow-btn). Единое для всех кнопок сайта, поэтому цифра стоит здесь, а
     не в токенах: --r-sm (4 px) остался для карточек, инпутов и тегов, и
     менять его ради кнопок значило бы скруглить полсайта. */
  padding:15px 26px;border:1px solid transparent;border-radius:11px;
  font-family:var(--display);font-weight:700;font-size:.875rem;letter-spacing:.005em;
  cursor:pointer;background:transparent;min-height:48px;white-space:nowrap;
  transition:background-color .2s var(--ease),border-color .2s,transform .15s,color .2s,box-shadow .2s;
}
.btn:active{transform:translateY(1px)}
/* Иконки: svg без width/height растянулся бы на всю ширину контейнера
   (max-width:100% + height:auto) — кнопки были 400+ px высотой. */
.btn svg{flex:none;width:17px;height:17px}
/* ── красная кнопка с бегущим по краю светом (образец заказчика) ────────────
   Два слоя фона на одной кнопке:
     padding-box — сам красный градиент,
     border-box  — белый градиент, видный сквозь ПРОЗРАЧНУЮ рамку 1px.
   Оба градиента — linear-gradient(var(--btn-angle)), поэтому свет бежит по
   краю, а кнопка «дышит». Три слоя свечения:
     ::before — внешний ореол (inset -6px, blur 24px),
     ::after  — внутренняя линия по кромке (кольцо через mask-composite),
     filter   — две drop-shadow, дающие глубину.
   Псевдоэлементы не наследуют анимацию сами: --btn-angle зарегистрирован с
   inherits:true, поэтому они берут УЖЕ анимированное значение родителя и
   свет на всех трёх слоях идёт синхронно (одна анимация, а не три). */
.btn--primary{
  position:relative;isolation:isolate;color:#fff;
  border:1px solid transparent;
  background:
    linear-gradient(var(--btn-angle),#F0323F 0%,#D81F2A 10%,#B81820 25%,
      #9A1418 45%,#7A1015 70%,#6A0E12 100%) padding-box,
    linear-gradient(var(--btn-angle),#fff 0%,rgba(255,255,255,.55) 3%,
      rgba(255,255,255,.15) 12%,rgba(255,255,255,.06) 30%,
      rgba(255,255,255,.06) 100%) border-box;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)) drop-shadow(0 2px 3px rgba(0,0,0,.3));
  /* Свет «дышит» очень медленно (14 с), чтобы не мельтешить; быстро — только
     при наведении (2.5 с), как просил заказчик. */
  animation:btn-spin 14s linear infinite;
  transition:filter .35s ease,transform .35s cubic-bezier(.2,.8,.3,1);
}
/* Внешний ореол. z-index:-1 кладёт слой ПОД фон кнопки — для этого кнопке и
   нужно isolation:isolate (иначе слой ушёл бы за пределы секции). */
.btn--primary::before{
  content:"";position:absolute;inset:-6px;border-radius:17px;pointer-events:none;
  z-index:-1;opacity:.7;filter:blur(24px);
  background:linear-gradient(var(--btn-angle),rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.15) 8%,rgba(255,255,255,.06) 25%,rgba(255,255,255,.06) 100%);
}
/* Линия по кромке. padding + mask-composite:exclude вырезает середину,
   остаётся только рамка 4px, размытая на 6px — свечение «из-под» кнопки.
   mask-composite знают не все браузеры, а БЕЗ маски ::after был бы просто
   белым размытым прямоугольником поверх кнопки. Поэтому слой только внутри
   @supports: не умеем — не рисуем. */
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){
  .btn--primary::after{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:4px;
    pointer-events:none;z-index:-1;filter:blur(6px);
    background:linear-gradient(var(--btn-angle),rgba(255,255,255,.85) 0%,
      rgba(255,255,255,.15) 12%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
  }
}
/* Наведение — приподнимаем и усиливаем тень. :active чуть ниже, чем hover,
   чтобы кнопка «продавливалась», а не проваливалась. */
.btn--primary:hover{
  transform:translateY(-4px);
  /* при наведении свет разгоняется — медленно-постоянно заменяется на 2.5 с */
  animation:btn-spin 2.5s linear infinite;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.55)) drop-shadow(0 6px 8px rgba(0,0,0,.35))
         brightness(1.12) saturate(1.08);
}
.btn--primary:hover::before{opacity:1}
.btn--primary:active{transform:translateY(-2px)}
/* Бесконечное вращение — ровно то, что просят отключать при
   prefers-reduced-motion. Без этого правила кнопка мигала бы у людей,
   которым вращение физически неприятно. */
@media (prefers-reduced-motion:reduce){
  .btn--primary{animation:none}
}
.btn--ghost{border-color:var(--line-2);color:var(--text-2)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold);background:rgba(217,190,138,.06)}
.btn--outline{border-color:rgba(255,255,255,.55);color:#fff}
.btn--outline:hover{background:rgba(217,190,138,.08);color:var(--gold);border-color:var(--gold);box-shadow:0 0 26px rgba(217,190,138,.2)}
.btn--sm{padding:11px 18px;min-height:42px;font-size:.8rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- секции ---------- */
.sec{padding:clamp(46px,4.6vw,74px) 0}
.sec--tight{padding:clamp(38px,3.8vw,58px) 0}
.sec--line{border-top:1px solid var(--line)}
.sec--calc{background:
  radial-gradient(900px 460px at 78% 22%,rgba(255,255,255,.14),transparent 62%),
  linear-gradient(180deg,var(--red),#98040D 135%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.25)}
.sec--calc .sec-head h2{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.25)}
.sec--calc .lead{color:rgba(255,255,255,.9)}
.sec--calc .calc{border-color:rgba(255,255,255,.25);box-shadow:0 22px 50px rgba(0,0,0,.35)}
.sec--calc .discl{border-color:rgba(255,255,255,.2)}
.sec--alt{background:var(--bg-2)}
.sec--import{background:linear-gradient(180deg,rgba(227,6,19,.05),transparent 46%),var(--bg)}

/* ---------- импорт: как проходит сделка ---------- */
.sdeal{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.sdeal__step{position:relative;display:flex;flex-direction:column;gap:12px;padding:18px 16px 16px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  transition:transform .22s var(--ease),border-color .22s,box-shadow .22s,background-color .22s}
.sdeal__step:hover{transform:translateY(-5px) scale(1.05);border-color:var(--gold);
  background:linear-gradient(180deg,rgba(217,190,138,.08),var(--surface) 60%);
  box-shadow:0 18px 42px rgba(0,0,0,.5),0 0 32px -6px rgba(217,190,138,.35)}
.sdeal__step::after{content:"";position:absolute;top:34px;right:-15px;width:16px;height:1px;
  background:repeating-linear-gradient(90deg,var(--line-3) 0 4px,transparent 4px 6px)}
.sdeal__step:last-child::after{display:none}
.sdeal__n{width:30px;height:30px;flex:none;display:grid;place-content:center;border-radius:50%;
  background:var(--red);color:#fff;font-family:var(--display);font-weight:700;font-size:.82rem}
.sdeal__ico{position:absolute;top:18px;right:16px;width:26px;height:26px;color:var(--dim)}
.sdeal__step h3{font-family:var(--display);font-weight:700;font-size:.86rem;line-height:1.3;padding-right:8px}
.sdeal__step p{font-size:.76rem;color:var(--muted);line-height:1.55;flex:1 1 auto}
.sdeal__meta{font-size:.7rem;letter-spacing:.03em;color:var(--gold)}

/* ---------- импорт: пакет документов ---------- */
.pdocs{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.pdoc{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:22px 14px 18px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-lg);transition:border-color .18s,transform .18s}
.pdoc:hover{border-color:var(--line-3);transform:translateY(-3px)}
.pdoc:hover .pdoc__ic{color:var(--gold)}
.pdoc__ic{width:46px;height:46px;color:var(--red-2);transition:color .18s}
.pdoc__abbr{font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:.02em}
.pdoc__desc{font-size:.72rem;color:var(--muted);line-height:1.5;max-width:22ch}

@media (max-width:1180px){
  .sdeal{grid-template-columns:repeat(3,1fr)}
  .pdocs{grid-template-columns:repeat(3,1fr)}
  .sdeal__step::after{display:none}
}
@media (max-width:760px){
  .sdeal{grid-template-columns:repeat(2,1fr)}
  .pdocs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .sdeal{grid-template-columns:1fr}
  .pdocs{grid-template-columns:1fr}
}

/* ---------- слоты под фото ---------- */
.ph-slot{
  position:relative;display:grid;place-content:center;gap:6px;text-align:center;
  aspect-ratio:4 / 3;padding:18px;border:1px dashed var(--line-2);border-radius:var(--r);
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 1px,transparent 1px 9px),
    var(--surface);
  color:var(--dim);
}
.ph-slot--fill{aspect-ratio:auto;height:100%;border-radius:0;border:0;border-left:1px dashed var(--line-2)}
/* В hero слот уходит под маску — рамку и подпись убираем, остаётся только
   лёгкая штриховка, по которой видно «место под фото». Тон подобран так,
   чтобы первый экран по тёмному не расходился с референсом (там фото ночное):
   замер 65,3 % тёмных против 53,8 % на светлой подложке. */
.hero__ph .ph-slot{border:0;border-radius:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.038) 0 1px,transparent 1px 12px),linear-gradient(125deg,#16171C,#0D0E11)}
.ph-slot--quiet{border:0;border-radius:0;background:transparent}
.ph-slot--inline{border:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 1px,transparent 1px 9px),linear-gradient(140deg,#1C1E24,#121317)}
.ph-slot__t{display:block;font-family:var(--display);font-weight:700;font-size:.82rem;color:var(--muted);max-width:26ch}
.ph-slot__s{display:block;font-size:.7rem;letter-spacing:.04em;color:var(--dim)}

/* ---------- шапка ---------- */
/* Шапка прозрачная поверх первого экрана и «залипает» при прокрутке: так она
   не режет hero и повторяет поведение референса. На внутренних страницах
   прозрачный верх визуально неотличим от фона — сайт тоже тёмный. */
.hdr{
  position:fixed;inset:0 0 auto;z-index:60;height:var(--hdr);
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.hdr::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,7,11,.7),rgba(6,7,11,0));
  transition:opacity .3s var(--ease)}
.hdr.is-stuck{
  background:rgba(10,11,16,.86);border-bottom-color:var(--line);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 12px 34px rgba(0,0,0,.5);
}
.hdr.is-stuck::before{opacity:0}
.hdr__in{position:relative;display:flex;align-items:center;gap:22px;height:100%}
.logo{display:flex;align-items:center;flex:none}
/* У логотипа-«слова» нет своей подложки: это контурный SVG (в файле только
   fill у букв, ни одного <rect>). Тёмная плита под ним — общее правило
   `img{background:var(--surface)}` из начала файла, которое страхует
   фотографии на время загрузки. Логотипу оно не нужно и на прозрачной
   шапке читается как чёрный прямоугольник, поэтому гасим его точечно
   (та же причина, по которой .hero__car img гасит его у себя).
   Тень — вместо плиты: держит контраст над яркой серединой красного
   градиента, не рисуя границ бокса. */
.logo img{height:38px;width:auto;background:transparent;
  filter:drop-shadow(0 2px 9px rgba(0,0,0,.62))}

/* ── меню ── */
.topmenu{display:flex;align-items:center;gap:2px}
.navitem{position:relative}
.navlink{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border:0;border-radius:11px;background:none;cursor:pointer;
  color:var(--text-2);font:inherit;font-size:.86rem;font-weight:500;white-space:nowrap;
  transition:color .22s var(--ease);
}
/* Подложка пункта — псевдоэлемент, а не фон: она «проявляется» масштабом,
   поэтому при наведении пункт не прыгает по ширине. */
.navlink::before{content:'';position:absolute;inset:0;border-radius:11px;
  background:rgba(255,255,255,.065);opacity:0;transform:scale(.92);
  transition:opacity .28s var(--ease),transform .28s var(--ease)}
.navlink:hover::before,.navitem[data-open="true"] .navlink::before{opacity:1;transform:none}
.navlink:hover,.navitem[data-open="true"] .navlink{color:var(--text)}
/* Текущая страница. Своего значка не вводим: у донора активный пункт не
   отмечен вовсе, а inset-тень «0 -2px 0» на скруглении 11px рисовала красную
   дугу вместо подчёркивания — это читалось как дефект вёрстки. Берём ту же
   подложку, что и при наведении, но с красным оттенком: она видна постоянно,
   поэтому текущий пункт отличим от случайно задетого курсором. */
.navlink[aria-current="page"]{color:var(--text)}
.navlink[aria-current="page"]::before{
  opacity:1;transform:none;background:rgba(227,6,19,.16)}
.chev{overflow:visible;opacity:.6;transition:opacity .2s}
.navlink:hover .chev,.navitem[data-open="true"] .chev{opacity:1}
/* Шеврон: две линии, на раскрытии складываются в стрелку вниз. */
.chev-l,.chev-r{transform-box:fill-box;transform-origin:right center;transition:transform .42s var(--ease)}
.chev-r{transform-origin:left center;transition-delay:.04s}
.chev-l{transform:rotate(32deg)}
.chev-r{transform:rotate(-32deg)}
.navitem[data-open="true"] .chev-l{transform:rotate(-32deg)}
.navitem[data-open="true"] .chev-r{transform:rotate(32deg)}

/* ── мегаменю ── */
.megamenu{
  position:absolute;top:100%;left:-14px;padding-top:14px;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .28s var(--ease),transform .32s var(--ease),visibility .28s;
}
.navitem[data-open="true"] .megamenu{opacity:1;visibility:visible;transform:none}
.megamenu-card{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 26px;
  width:min(900px,80vw);padding:20px 22px 18px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:18px;
  box-shadow:0 34px 80px -30px rgba(0,0,0,.85);
}
.mm-cols{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 26px}
.mm-h{font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dim);margin-bottom:9px}
.mm-l{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 0;color:var(--text-2);font-size:.875rem;font-weight:500;
  transition:color .18s var(--ease),padding-left .18s var(--ease)}
.mm-l:hover{color:var(--red-2);padding-left:5px}
.mm-n{font-size:.74rem;color:var(--dim);font-variant-numeric:tabular-nums;transition:color .18s}
.mm-l:hover .mm-n{color:var(--red-2)}
/* Витринная полоса: у нас вместо фотографии — градиент в палитре сайта. */
.mm-feat{grid-column:1/-1;margin-top:16px;padding:13px 18px;border-radius:14px;
  border:1px solid var(--line-2);
  background:linear-gradient(100deg,rgba(227,6,19,.17),rgba(217,190,138,.09) 58%,transparent);
  transition:border-color .22s var(--ease)}
.mm-feat:hover{border-color:var(--gold)}
.mm-feat-body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 20px}
.mm-feat-k{grid-column:1;font-size:.66rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--gold)}
.mm-feat-title{grid-column:1;font-family:var(--display);font-weight:800;font-size:.98rem;
  letter-spacing:-.02em;color:var(--text)}
.mm-feat-text{grid-column:1;font-size:.77rem;line-height:1.4;color:var(--muted)}
.mm-feat-link{grid-column:2;grid-row:1/4;align-self:center;display:inline-flex;align-items:center;
  gap:7px;font-size:.82rem;font-weight:700;color:var(--red-2);white-space:nowrap}
.mm-feat-link svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.mm-feat:hover .mm-feat-link svg{transform:translateX(3px)}
.mm-all{grid-column:1/-1;border-top:1px solid var(--line);margin-top:15px;padding-top:14px}
/* 20 px, а не 999px: скругление всех кнопок приведено к образцу заказчика. */
.mm-allbtn{display:inline-flex;align-items:center;gap:12px;padding:10px 18px;border-radius:11px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);font-size:.85rem;font-weight:600;
  transition:border-color .2s var(--ease),color .2s var(--ease)}
.mm-allbtn:hover{border-color:var(--red);color:var(--red-2)}
.mm-allnum{display:inline-grid;place-items:center;min-width:34px;height:23px;padding:0 9px;
  border-radius:999px;background:var(--red);color:#fff;font-size:.76rem;font-weight:700}
.mm-allbtn svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.mm-allbtn:hover svg{transform:translateX(3px)}

/* ── «Ещё» ── */
.moremenu{
  position:absolute;top:100%;right:-8px;padding-top:14px;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .28s var(--ease),transform .32s var(--ease),visibility .28s;
}
.navitem[data-open="true"] .moremenu{opacity:1;visibility:visible;transform:none}
.moremenu-card{width:306px;padding:9px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:18px;box-shadow:0 34px 80px -30px rgba(0,0,0,.85)}
.mo-l{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;
  transition:background-color .2s var(--ease)}
.mo-l:hover{background:rgba(255,255,255,.055)}
.mo-t{font-weight:700;font-size:.9rem;color:var(--text)}
.mo-h{font-size:.76rem;line-height:1.35;color:var(--dim)}

/* ── телефон и кнопка ── */
.navcontacts{display:flex;align-items:center;gap:16px;margin-left:auto}
.navphone{display:flex;align-items:center;gap:10px;flex-shrink:0}
.np-icon{position:relative;width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:var(--red-2);border:1px solid rgba(227,6,19,.45);
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.np-icon::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:1.5px solid var(--red);
  opacity:0;animation:phonepulse 2.6s var(--ease) infinite}
.navphone:hover .np-icon{background:var(--red);color:#fff;border-color:var(--red)}
.np-text{display:flex;flex-direction:column}
.np-num{font-family:var(--display);font-weight:700;font-size:.92rem;color:var(--text);
  white-space:nowrap;transition:color .2s}
.navphone:hover .np-num{color:var(--red-2)}
.navhours{font-size:.72rem;color:var(--dim);margin-top:2px;white-space:nowrap}
@keyframes phonepulse{
  0%{opacity:.75;transform:scale(.92)}
  70%,100%{opacity:0;transform:scale(1.3)}
}
.navcta{white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .np-icon::after{animation:none}
  .megamenu,.moremenu,.navlink::before,.chev-l,.chev-r{transition:none}
}

/* Бургер. Полоски ставим абсолютом, а не полями: при открытии они обязаны
   сойтись в одну точку и дать ровный крест. С полями шаг между полосками
   получался 8.5px, а сдвиг стоял 5px — полоски не сходились, и вместо
   креста рисовалась «галочка» (видно на снимке мобильного меню). Здесь шаг
   4px и сдвиг 4px: обе средние полоски приходят ровно в top:22px. */
.burger{position:relative;display:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:transparent;cursor:pointer;padding:0}
.burger span{position:absolute;left:13px;width:18px;height:1.5px;border-radius:2px;background:var(--text);transition:transform .25s var(--ease),opacity .2s}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-4px) rotate(-45deg)}
.hdr__soc,.ftr__soc-in,.mnav__soc{gap:10px}
/* Иконки соцсетей: заливка currentColor, цвет — брендовый красный.
   Раньше .soc не имел своего правила и наследовал --text, то есть
   рисовался белым. */
.soc{display:inline-flex;align-items:center;justify-content:center;color:var(--red);transition:color .2s var(--ease)}
.soc:hover,.soc:focus-visible{color:var(--red-2)}
.soc svg{display:block}
.mnav{position:fixed;inset:var(--hdr) 0 0;z-index:55;background:var(--bg);padding:20px 22px calc(40px + var(--mtab) + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.mnav.is-open{opacity:1;transform:none;visibility:visible}
.mnav a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:700;font-size:1rem}
/* .mnav a задаёт padding:15px 0 и display:block — кнопка в меню превращалась в ссылку */
.mnav .btn{display:inline-flex;width:100%;padding:15px 26px;border-bottom:0;margin-top:20px}
.mnav__phone{margin:18px 0 0;font-family:var(--display);font-weight:700;font-size:1.1rem}
.mnav__phone small{display:block;font-family:var(--font);font-size:.76rem;font-weight:400;color:var(--dim);margin-top:4px}
.mnav__soc{display:flex;gap:10px;margin:20px 0 0}

/* ══ шапка: компактный режим ══ начало ══
   Полное меню (не бургер) показывается от 1181 px, и на 1280 оно не влезало.
   Замеры до правки: логотип 202 + меню 695 + телефон 200 + кнопка 189 +
   зазоры 44 = 1346 против 1203 доступных, то есть не хватало 142 px, а на
   1181 — 235 px. Правый блок уезжал за контейнер, и кнопку «Подобрать
   автомобиль» срезало краем экрана. Хуже того, само меню поджималось
   флексом: на 1600 оно 719 px, на 1280 — 695, и текст выходил за свои плашки.

   Три порога. Первые два считаются ОТ 1181, чтобы не задеть мобильную шапку:
   до 1180 меню — бургер, и там логотип обязан остаться крупным.
     1479 px — подтягиваем типографику и отступы; запас на 1440: 98 px.
     1360 px — поджимаем логотип и телефон, убираем подпись «Ежедневно…».
       Она не украшение, но в колонке .np-text дети тянутся по самому широкому,
       и подпись (154 px) держала номер (117 px) — снятие даёт 37 px и
       позволяет оставить кнопку почти в полном размере.
     1260 px — ниже полное меню не влезает даже поджатым (на 1181 запас был
       бы 0 px), поэтому уходим в бургер. Правило узкое, только про меню:
       остальной адаптив страницы живёт на 1180 и его трогать нельзя.

   Проверка — temp/_hdr_slack.py: считает запас как «доступно минус сумма
   блоков», а не по правому краю (при margin-left:auto край всегда упирается
   в границу, и «0» не отличает «влезло впритык» от «влезло с запасом»).
   Контроль: на базовой линии при 1280 запас обязан быть −142 px. */
@media (min-width:1181px) and (max-width:1479px){
  .hdr__in{gap:14px}
  .navlink{padding:9px 11px;font-size:.8rem}
  .logo img{height:34px}
  .navcontacts{gap:12px}
  .np-icon{width:34px;height:34px}
  .np-num{font-size:.88rem}
}
@media (min-width:1181px) and (max-width:1480px){
  .hdr__in{gap:7px}
  .navlink{padding:8px 5px;font-size:.73rem}
  .logo img{height:29px}
  .navcontacts{gap:7px}
  .np-icon{width:28px;height:28px}
  .np-num{font-size:.79rem}
  .navhours{display:none}
  .navcta{padding:9px 11px;font-size:.75rem}
}
/* Широкие ПК (>1480): базовые правила почти полного размера не влезают в
   .wrap (max 1400 контента): need 1523 > 1400, и на 1536/1600 телефон с
   кнопкой вылезали за правый край (замер temp/_hdr_overflow.py). Поджимаем
   меню умеренно, чтобы всё входило в контентную ширину .wrap. */
@media (min-width:1481px){
  .hdr__in{gap:15px}
  .navlink{padding:9px 9px;font-size:.79rem}
  .logo img{height:34px}
  .navcontacts{gap:15px}
  .np-icon{width:34px;height:34px}
  .np-num{font-size:.86rem}
  .navhours{display:none}
  .navcta{padding:10px 15px;font-size:.8rem}
}
@media (min-width:1181px) and (max-width:1260px){
  .nav{display:none}
  .burger{display:grid}
}
/* ══ шапка: компактный режим ══ конец ══ */

/* ---------- мобильный таб-бар ---------- */
/* В макете он прибит к низу на мобильных и закрывает контент — добавляем
   нижний паддинг равный высоте, чтобы последняя секция не уезжала под бар. */
.mtab{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:rgba(11,11,11,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.mtab__i{position:relative;display:grid;justify-items:center;align-items:center;gap:2px;
  height:54px;color:var(--muted);font-size:.66rem;font-weight:500;
  transition:color .18s}
.mtab__i.is-on{color:var(--red)}
.mtab__i svg{width:21px;height:21px}
.mtab__b{position:absolute;top:4px;right:20%;min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;background:var(--red);color:#fff;font-size:.65rem;
  font-weight:700;border-radius:9px;font-variant-numeric:tabular-nums}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  min-height:clamp(480px,58vh,660px);
  display:flex;align-items:center;
}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(860px 480px at 72% 38%,rgba(227,6,19,.14),transparent 70%);}
.hero__art{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.hero__art svg{width:100%;height:100%;object-fit:cover;opacity:.82}
/* Вырезанная машина стоит на «земле» фоновой сцены справа от текста.
   Тень двойная: мягкий эллипс под колёсами (контакт с землёй) и
   drop-shadow по силуэту (глубина). Фон hero не трогаем. */
.hero__car{position:absolute;right:clamp(76px,7.5vw,170px);bottom:clamp(8px,4.2vh,40px);z-index:1;pointer-events:none}
/* Рамка задаёт бокс машины: обычная машина спереди, разрез под ней, аура
   поверх. Ради ревизии точек/тача машина ловит указатель (pointer-events
   включаем на рамке, не на всём hero__car, чтобы не глушить то, что под ней
   там, где машина уходит за край). */
.hero__frame{position:relative;display:inline-block;pointer-events:auto;cursor:crosshair}
.hero__frame img{display:block}
.hero__car img{width:clamp(360px,46vw,760px);height:auto;background:transparent;filter:drop-shadow(0 22px 18px rgba(0,0,0,.4))}
.hero__car-main{position:relative;z-index:2}
/* Разрез лежит ПОД обычной машиной (z-index ниже) и потому невидим, пока его
   не открывает аура. Бокс ровно тот же, что у машины: width 100% рамки. */
.hero__cut{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;object-fit:fill;filter:none!important}
/* Аура — «окно» 160×160, которое ездит за курсором/пальцем и показывает
   разрез под машиной. Центр ЧЁТКИЙ (начинку машины видно), а к краю окно
   растворяется — градиентом ПРОЗРАЧНОСТИ по НЕРОВНОМУ контуру.
   Маска это SVG в data-URI: круг, залитый радиальным градиентом, смещён
   турбулентностью (feDisplacementMap), поэтому альфа гаснет не по идеальной
   окружности, а по живому, рваному контуру. Ни filter, ни blur у элемента
   нет — центр остаётся резким, «блюр» ушёл вместе с широкой круглой маской
   (было 60%→100% ровного круга — читалось как размытие).
   Числа жёстко согласованы, менять их по одному нельзя.
   Бокс 160 px → элемент физически не может показать ничего дальше r=80,
   а border-radius:50% режет ровно там же. Значит полупрозрачные пиксели
   обязаны закончиться ДО r=80, иначе по краю появится жёсткая дуга.
   Бюджет: смещение шума ≤ scale/2*√2 ≈ 0.707*scale = 12.7 px при scale=18.
   Поэтому альфа гаснет уже на r≈66 px (82% от r=80), а предел 66+12.7 = 78.3
   остаётся внутри 80. Хочется крупнее шум — сначала опускайте offset. */
.hero__aura{
  position:absolute;left:0;top:0;width:160px;height:160px;z-index:3;
  border-radius:50%;pointer-events:none;opacity:0;visibility:hidden;
  background:url(/img/hero-cx5-cut.webp) no-repeat;
  transform:translate(-50%,-50%);
  --aura-fade:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><defs><radialGradient id='g' cx='50%25' cy='50%25' r='50%25'><stop offset='60%25' stop-color='white' stop-opacity='1'/><stop offset='82%25' stop-color='white' stop-opacity='0'/></radialGradient><filter id='f' x='-40%25' y='-40%25' width='180%25' height='180%25'><feTurbulence type='fractalNoise' baseFrequency='0.03 0.034' numOctaves='3' seed='5' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='18' xChannelSelector='R' yChannelSelector='G'/></filter></defs><circle cx='80' cy='80' r='80' fill='url(%23g)' filter='url(%23f)'/></svg>");
  -webkit-mask-image:var(--aura-fade);
  mask-image:var(--aura-fade);
  transition:opacity .18s ease;
}
.hero--stage[data-hero-active] .hero__aura,
.hero__frame:hover .hero__aura{opacity:1;visibility:visible}
.hero__car::after{content:'';position:absolute;left:7%;right:10%;bottom:-2%;height:9%;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.6),rgba(0,0,0,.3) 46%,transparent 74%);
  filter:blur(8px)}
.hero__in{position:relative;z-index:2;width:100%;padding:calc(var(--hdr) + clamp(28px,3.8vw,56px)) var(--pad) clamp(32px,4vw,60px)}
.hero__l{max-width:720px}
.hero h1{margin-bottom:20px;font-size:clamp(2.2rem,4.6vw,3.8rem)}
.hero__lead{font-size:clamp(1rem,1.25vw,1.16rem);color:var(--text-2);margin-bottom:32px;line-height:1.6}
.hero__btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px}

/* ---------- полоса преимуществ под hero ---------- */
.sec--feats{padding-top:clamp(26px,3vw,42px)}
.feats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.feats li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  align-items:center;column-gap:12px;row-gap:2px;padding:20px 20px;background:var(--bg-2)}
.feats__i{grid-row:1/3;display:grid;place-items:center;width:46px;height:46px;flex:none;
  border-radius:var(--r-sm);background:rgba(227,6,19,.12);color:var(--red-2)}
.feats__i svg{width:23px;height:23px}
.feats b{font-family:var(--display);font-weight:700;font-size:.9rem;line-height:1.25;
  word-break:break-word;hyphens:auto;min-width:0}
.feats li>span:last-child{font-size:.76rem;color:var(--dim);line-height:1.35;min-width:0}

/* ---------- панель поиска автомобиля ---------- */
/* В макете заголовок живёт внутри панели, а не снаружи. */
.sp-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px 22px}
.sp__h{font-family:var(--display);font-weight:700;font-size:1.06rem;letter-spacing:-.02em;margin-bottom:16px}
.sp{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.sp__f{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;flex:1;min-width:min(100%,560px)}
.sp__c{display:flex;flex-direction:column;gap:7px;margin:0}
.sp__c>span{font-size:.73rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sp__c select{width:100%;padding:12px 38px 12px 14px}
.sp__b{flex:none;min-width:132px;min-height:46px}

/* ---------- ссылка «все» у заголовка ---------- */
.link-more{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;
  color:var(--text-2);min-height:40px;padding:8px 2px;transition:color .18s;white-space:nowrap}
.link-more:hover{color:var(--red-2)}
.link-more svg{width:15px;height:15px;flex:none}

/* ---------- Trade-in и кредит ---------- */
.ti{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(22px,3vw,54px);
  align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3.2vw,46px);position:relative;overflow:hidden}
.ti::after{content:'';position:absolute;right:-90px;top:-60px;width:340px;height:340px;
  border-radius:50%;background:radial-gradient(circle,rgba(227,6,19,.18),transparent 66%);pointer-events:none}
.ti__r{display:grid;gap:16px;position:relative;z-index:1}
.ti__r li{display:flex;gap:13px;align-items:flex-start}
.ti__i{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;
  background:rgba(85,85,85,.32);color:var(--text);margin-top:1px}
.ti__i svg{width:14px;height:14px}
.ti__t b{display:block;font-family:var(--display);font-weight:700;font-size:.94rem;line-height:1.3}
.ti__t small{display:block;font-size:.8rem;color:var(--dim);margin-top:3px;line-height:1.45}

/* ---------- О компании ---------- */
.ab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(22px,3vw,54px);align-items:center}
.ab__ph{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--surface)}
.ab__ph img{width:100%;height:100%;object-fit:cover;display:block}
.ab__ph .ph-slot{aspect-ratio:4 / 3;margin:0}
.ab__t h2{margin-bottom:0}
.ab__n{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 26px;
  padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ab__n b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.15rem);
  line-height:1;letter-spacing:-.02em;color:var(--gold)}
.ab__n span{display:block;font-size:.76rem;color:var(--dim);margin-top:7px;line-height:1.35}

/* ---------- чипы марок ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 17px;min-height:40px;border:1px solid var(--line-2);border-radius:999px;
  font-size:.82rem;font-weight:500;color:var(--text-2);cursor:pointer;background:transparent;
  touch-action:manipulation;transition:border-color .2s,color .2s,background-color .2s;
}
.chip svg{flex:none;width:14px;height:14px;color:var(--ok)}
.chip:hover{border-color:var(--line-3);color:var(--text)}
.chip.is-on{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
/* Информационные чипы (марки, доступные к заказу) — не кнопки. */
.chips--info{margin-bottom:14px}
.chips--info .chip{cursor:default;color:var(--text-2)}
.chips--info .chip:hover{border-color:var(--line-2)}

/* ---------- карточка авто ---------- */
.cars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 12px}
.card{display:grid;grid-template-rows:auto 1fr auto;position:relative}
.card__ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface);border-radius:var(--r)}
/* Светлые студийные фото Авито выбиваются из тёмной сцены — приглушаем скримом. */
.card__ph::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(90% 62% at 16% 0%,rgba(217,190,138,.13),transparent 58%),
    linear-gradient(180deg,rgba(9,9,11,.36),rgba(9,9,11,.04) 44%,rgba(9,9,11,.64))}
.card__ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card__ph img{transform:scale(1.05)}
.card__tags{position:absolute;left:10px;top:10px;display:flex;gap:5px;flex-wrap:wrap;z-index:2}
.tag{padding:5px 10px;border-radius:var(--r-sm);font-size:.68rem;font-weight:700;letter-spacing:.02em}
.tag--stock{background:var(--red);color:#fff}
.tag--order{background:rgba(17,17,17,.9);color:var(--text-2);border:1px solid var(--line-3)}
.tag--new{background:var(--gold);color:#191510}
.tag--dark{background:rgba(10,10,10,.82);color:var(--text-2)}
/* Сердце лежит поверх фото в правом верхнем углу — как в макете. */
.card__fav{
  position:absolute;right:8px;top:8px;z-index:4;
  display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:0;background:rgba(10,10,10,.55);color:var(--text-2);cursor:pointer;
  border-radius:50%;backdrop-filter:blur(6px);touch-action:manipulation;
  transition:color .18s,background-color .18s;
}
.card__fav:hover{color:#fff;background:var(--red)}
.card__fav[aria-pressed="true"]{color:var(--gold)}
.card__fav svg{width:17px;height:17px}
.card__b{padding:14px 2px 0}
.card__t{font-family:var(--display);font-weight:700;font-size:.94rem;letter-spacing:-.018em;line-height:1.28;margin-bottom:7px}
.card__t a::after{content:'';position:absolute;inset:0;z-index:3}
.card__specs{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.755rem;color:var(--muted)}
.card__specs span{display:inline-flex;align-items:center;gap:10px}
.card__specs span::before{content:'·';color:var(--line-3);order:2;font-weight:700}
.card__specs span:last-child::before{display:none}
.card__f{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 2px 14px;border-top:1px solid var(--line);margin-top:12px}
.card__price{font-family:var(--display);font-weight:800;font-size:1.08rem;letter-spacing:-.026em;font-variant-numeric:tabular-nums}
.card__more{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border:1px solid var(--line-3);
  border-radius:var(--r-sm);font-size:.75rem;font-weight:600;color:var(--text-2);flex:none;
  transition:border-color .18s,color .18s,background-color .18s}
.card__more svg{width:12px;height:12px}
.card:hover .card__more{border-color:var(--red);color:#fff;background:var(--red)}
.card__fav[aria-pressed="true"] svg{fill:currentColor}

/* ---------- карточка автомобиля: матовое стекло ---------- */
.ccard{position:relative;min-width:0}
/* Матовая «стеклянная» карточка: полупрозрачный фон + размытие позади,
   светлая кромка; все текстовые переменные наследуются от тёмной темы,
   поэтому заголовок/спецификации остаются читаемыми. */
.ccard__box{position:relative;display:flex;flex-direction:column;height:100%;padding:14px;
  border:1px solid rgba(255,255,255,.30);border-radius:var(--r-lg);
  background:linear-gradient(165deg,rgba(255,255,255,.36),rgba(255,255,255,.20) 58%,rgba(255,255,255,.08));
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  backdrop-filter:blur(16px) saturate(1.25);
  transition:border-color .2s,box-shadow .2s}
/* Верхний блик — тонкая светлая линия по кромке, «свет с потолка». */
.ccard__box::before{content:'';position:absolute;top:0;left:12px;right:12px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);pointer-events:none}
.ccard:hover .ccard__box{border-color:rgba(255,255,255,.55);
  box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.05),0 0 38px -10px rgba(217,190,138,.30)}
.ccard__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px;color:var(--text)}
.ccard__title{font-family:var(--display);font-weight:600;font-size:.9rem;letter-spacing:-.012em;line-height:1.3;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .18s}
.ccard__head:hover .ccard__title{color:var(--gold)}
.ccard__arrow{flex:none;width:13px;height:13px;margin-top:3px;color:var(--muted);transition:color .18s,transform .18s}
.ccard__head:hover .ccard__arrow{color:var(--gold);transform:translateX(2px)}
.ccard__ph{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r);background:var(--bg-2)}
.ccard__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  pointer-events:none;transition:opacity .28s ease,transform .5s var(--ease)}
/* Обложка видна, пока JS не выставил data-i (и если JS выключен).
   Без :not() правило срабатывало бы И на переключённом кадре: img:first-child
   остаётся opacity:1 при любом data-i, кадры накладываются друг на друга.
   Внешне это выглядело рабочим — верхний снимок рисуется последним и
   закрывает обложку, — но обложка не гасла, и переход был не сменой кадра,
   а наложением. Проверка «виден ровно один снимок» такое ловит. */
.ccard__ph:not([data-i]) img:first-child{opacity:1}
.ccard:hover .ccard__ph img{transform:scale(1.04)}
/* Видимый кадр слайдера задаётся атрибутом data-i (меняет JS по направлению мыши). */
.ccard__ph[data-i="0"] img:first-child,
.ccard__ph[data-i="1"] img:nth-child(2),
.ccard__ph[data-i="2"] img:nth-child(3),
.ccard__ph[data-i="3"] img:nth-child(4){opacity:1}
/* Точки вместо счётчика, как у донора. */
.ccard__dots{position:absolute;left:10px;bottom:10px;z-index:3;display:flex;gap:4px;
  padding:6px 8px;border-radius:12px;background:rgba(9,9,11,.42)}
.ccard__dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5);
  transition:background .2s,width .2s,border-radius .2s}
.ccard__dots i.is-on{width:8px;border-radius:3px;background:#fff}
.ccard__price{margin-top:14px;font-family:var(--display);font-weight:800;font-size:1.12rem;letter-spacing:-.026em;color:#fff;font-variant-numeric:tabular-nums}
.ccard__specs{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:8px 0 0;padding:0;font-size:.76rem;color:var(--muted)}
.ccard__spec{display:inline-flex;align-items:center;gap:6px}
.ccard__ic{flex:none;width:15px;height:15px}
.cars__empty{margin-top:26px;padding:34px 20px;text-align:center;border:1px dashed var(--line-2);border-radius:var(--r);color:var(--muted);font-size:.9rem}
.cars__empty a{color:var(--red-2);text-decoration:underline}

/* ---------- «под заказ из Китая» ---------- */
.oors{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 18px}
.oor{display:grid;grid-template-rows:auto 1fr;position:relative}
.oor:hover h3{color:var(--red-2)}
.oor__ph{aspect-ratio:4 / 3;border-radius:var(--r);overflow:hidden}
.oor__ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.oor:hover .oor__ph img{transform:scale(1.04)}
.oor__ph .ph-slot{aspect-ratio:auto;height:100%;border-radius:0}
.oor__b{padding-top:13px}
.oor h3{font-family:var(--display);font-weight:700;font-size:.96rem;letter-spacing:-.018em;margin-bottom:6px}
.oor__s{font-size:.755rem;color:var(--muted);margin-bottom:9px}
.oor__m{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px;font-size:.8rem;color:var(--muted);padding-top:10px;border-top:1px solid var(--line);margin:0}
.oor__m b{font-family:var(--display);font-weight:800;font-size:1rem;color:var(--text);letter-spacing:-.024em;font-variant-numeric:tabular-nums;white-space:nowrap}
.oor__m span{white-space:nowrap}

/* ---------- «под заказ» (компактный список, для каталога) ---------- */
.orders{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ocard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:16px;display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:center;transition:border-color .2s,background-color .2s}
.ocard:hover{border-color:var(--line-3);background:#17171A}
.ocard__ph{aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.ocard__ph img{width:100%;height:100%;object-fit:cover}
.ocard__t{font-family:var(--display);font-weight:700;font-size:.96rem;letter-spacing:-.018em}
.ocard__m{font-size:.78rem;color:var(--muted);margin-top:5px}
.ocard__m b{color:var(--text);font-weight:700}

/* ---------- шаги ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr)}
.step{position:relative;padding:18px 22px 18px 0;border-top:1px solid var(--line-2)}
.step__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:16px}
.step__n{font-family:var(--display);font-weight:800;font-size:1.42rem;letter-spacing:-.04em;color:var(--text);line-height:1;font-variant-numeric:tabular-nums}
.step__ico{color:var(--red-2);flex:none}
.step__ico svg{width:22px;height:22px}
.step h3{font-family:var(--font);font-weight:600;font-size:.9rem;letter-spacing:0;margin-bottom:8px}
.step p{font-size:.79rem;color:var(--muted);line-height:1.55}
/* Шеврон садится на стык карточек, по вертикали — на уровень номера */
.step__chev{position:absolute;top:16px;right:-8px;z-index:2;display:grid;place-items:center;color:var(--red)}
.step__chev svg{width:15px;height:15px}

/* ---------- «почему выбирают» ---------- */
.why{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:44px;align-items:start}
.why__r{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.why__r:first-child{padding-top:0}
.why__r:last-child{border-bottom:0}
.why__ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--r-sm);background:rgba(166,17,15,.14);color:var(--red-2)}
.why__ico svg{width:20px;height:20px}
.why__r h3{font-family:var(--font);font-weight:600;font-size:.92rem;letter-spacing:0;margin-bottom:6px}
.why__r p{font-size:.8rem;color:var(--muted);line-height:1.55}
.why__panel{position:relative;overflow:hidden;border-radius:var(--r-lg);min-height:352px;background:linear-gradient(120deg,var(--red-deep),var(--red) 62%,#8E1412);box-shadow:0 24px 60px rgba(122,17,19,.36)}
.why__panel .ph-slot{position:absolute;inset:0;border:0;border-radius:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 1px,transparent 1px 9px);place-content:end center;padding-bottom:26px}
.why__panel .ph-slot__t{color:rgba(255,255,255,.62)}
.why__panel .ph-slot__s{color:rgba(255,255,255,.42)}
/* Заголовок стоит по центру панели, а не в подвале: фото в референсе занимает
   верхнюю половину, текст ложится по нижней кромке затемнения. */
.why__cap{position:absolute;inset:auto 0 0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:11px;padding:clamp(22px,2.6vw,34px);background:linear-gradient(180deg,rgba(60,6,7,0),rgba(60,6,7,.86) 46%,rgba(60,6,7,.94))}
.why__k{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);margin:0}
.why__cap h3{font-family:var(--display);font-weight:800;font-size:clamp(1.15rem,1.95vw,1.6rem);line-height:1.2;letter-spacing:-.018em;color:#fff;margin:0}

/* ---------- отзывы + калькулятор ---------- */
.rev-grid{display:grid;grid-template-columns:minmax(0,1.52fr) minmax(0,1fr);gap:34px;align-items:start}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rev{position:relative;display:grid;grid-template-rows:auto 1fr auto auto;gap:14px;margin:0;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.rev__q{color:var(--line-3)}
.rev__q svg{width:22px;height:22px}
.rev blockquote{margin:0}
.rev blockquote p{font-size:.815rem;color:var(--text-2);line-height:1.62}
.rev figcaption{display:flex;align-items:center;gap:11px}
.rev__av{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:rgba(166,17,15,.18);color:var(--red-2);font-family:var(--display);font-weight:800;font-size:.95rem}
.rev__who b{display:block;font-family:var(--display);font-weight:700;font-size:.85rem}
.rev__who small{display:block;font-size:.72rem;color:var(--dim);margin-top:2px}
.rev__st{display:flex;gap:3px;color:var(--red-2)}
.rev__st svg{width:13px;height:13px}
.cteas{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg-2);padding:clamp(20px,2.4vw,28px);display:grid;gap:12px;align-content:start}
.cteas h3{font-family:var(--display);font-weight:800;font-size:1.02rem;letter-spacing:-.02em;line-height:1.24}
.cteas__p{font-size:.79rem;color:var(--muted);line-height:1.56}
.cteas .btn{justify-self:start}
.cteas__ph{aspect-ratio:16 / 10;margin-top:4px}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:38px;align-items:start}
.faq-art .ph-slot{aspect-ratio:4 / 3}
.faq-nav{display:flex;gap:8px;margin-top:14px}
.faq-nav__b{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line-2);border-radius:50%;background:transparent;color:var(--text-2);cursor:pointer;transition:border-color .2s,color .2s}
.faq-nav__b:hover{border-color:var(--red);color:var(--text)}
.faq-nav__b svg{width:15px;height:15px}
.faq-nav__b[data-faq-prev] svg{transform:rotate(180deg)}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:17px 44px 17px 0;position:relative;
  font-size:.875rem;font-weight:500;color:var(--text-2);transition:color .18s;
}
.faq summary::-webkit-details-marker{display:none}
/* Маркер — крест из двух линий; при раскрытии вертикальная складывается в минус.
   Обе линии позиционируем от самого маркера: у .faq__m нужен position:relative,
   иначе ::before уезжает в угол ближайшего позиционированного предка. */
.faq__m{position:absolute;right:8px;top:50%;width:13px;height:2px;margin-top:-1px;background:var(--muted);transition:transform .25s var(--ease),background-color .2s}
.faq__m::before{content:'';position:absolute;inset:0;background:var(--muted);transform:rotate(90deg);transition:transform .25s var(--ease),background-color .2s}
.faq details[open] summary{color:var(--text)}
.faq details[open] .faq__m,.faq details[open] .faq__m::before{background:var(--red-2)}
.faq details[open] .faq__m::before{transform:rotate(0)}
.faq__a{padding:0 50px 20px 0;color:var(--muted);font-size:.845rem;line-height:1.66;max-width:74ch}

/* ---------- калькулятор ---------- */
.calc{display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:var(--bg);box-shadow:var(--sh)}
/* Оговорка идёт отдельной строкой под обеими колонками: внутри левой она
   оставляла полсотни пикселей пустоты, если правая колонка выше. */
.calc .discl{grid-column:1/-1;padding:14px clamp(22px,2.6vw,34px) 18px;border-top:1px solid var(--line);background:var(--bg-2)}
.calc__f{padding:clamp(22px,2.6vw,34px)}
.calc__r{padding:clamp(22px,2.6vw,34px);background:var(--surface);border-left:1px solid var(--line-2)}
.calc__f{align-self:start}
.field{margin-bottom:16px}
.field label{display:block;font-size:.73rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--bg-deep);color:var(--text);font-size:.925rem;transition:border-color .2s,box-shadow .2s;
}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(166,17,15,.2)}
select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238E8E8E' stroke-width='1.6'><path d='M1 1l5 5 5-5'/></svg>");background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;
  /* Собственно выпадающий список `<option>` рисует браузер, и без явного
     color-scheme на самом select он берёт системную светлую тему — на тёмном
     сайте список открывается БЕЛЫМ. Цветовое оформление самого попапа задаём
     здесь и правилом option ниже. */
  color-scheme:dark}
select option{background-color:var(--surface);color:var(--text)}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.range{display:flex;align-items:center;gap:13px}
.range input[type=range]{flex:1;accent-color:var(--red);background:none;border:0;padding:0}
.range output{font-family:var(--display);font-weight:700;font-size:.92rem;min-width:9ch;text-align:right;font-variant-numeric:tabular-nums}
.calc__row{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.875rem}
.calc__row span{color:var(--muted)}
.calc__row b{font-weight:600;font-variant-numeric:tabular-nums}
.discl{font-size:.7rem;color:var(--dim);line-height:1.55}

/* ── Калькулятор растаможки: сегменты, чипы, курсы, результат ──────────
   Состав полей снят с донорского калькулятора (china.likeavto.ru/calculator/),
   но перекрашен в наши токены: там светлая тема, здесь тёмный премиум.
   Выбор — кнопками-сегментами, как у донора: на тач-экране кнопка честнее
   выпадающего списка, а состояние видно целиком, без раскрытия. */
.cseg{display:flex;gap:8px;flex-wrap:wrap}
.cseg--mode{margin-bottom:20px}
.cseg__b{
  flex:1 1 auto;min-width:0;cursor:pointer;text-align:center;
  padding:11px 14px;border:1px solid var(--line-2);border-radius:11px;
  background-color:var(--bg-deep);color:var(--text-2);font-size:.82rem;font-weight:600;
  transition:border-color .18s,background-color .18s,color .18s;
}
.cseg__b:hover{border-color:var(--line-3);color:var(--text)}
.cseg__b.is-on{border-color:var(--red);background-color:rgba(227,6,19,.12);color:var(--text)}
.cseg--mode .cseg__b{display:flex;flex-direction:column;gap:3px;padding:14px 16px;text-align:left;border-radius:var(--r)}
.cseg__t{font-family:var(--display);font-size:.9rem;font-weight:700;letter-spacing:-.01em}
.cseg__s{font-size:.72rem;font-weight:500;color:var(--dim)}
.cseg--mode .cseg__b.is-on .cseg__s{color:var(--muted)}
.cseg--opts .cseg__b{flex:1 1 auto;padding:10px 12px;font-size:.8rem}
/* Четыре ступени возраста — сеткой 2×2, а не лентой: в ленте они не влезают в
   колонку, и четвёртая («Старше 7») уезжает на отдельную строку, читаясь
   сиротой. У донора ровно этот же артефакт. */
.cseg--grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cseg--grid2 .cseg__b{padding:10px 12px;font-size:.8rem}
.cseg--unit,.cseg--cur{flex:none;flex-wrap:nowrap}
.cseg--unit .cseg__b,.cseg--cur .cseg__b{flex:none;padding:11px 14px;font-size:.82rem}
.cfield{margin-bottom:16px}
.cfield__l{
  display:flex;align-items:center;gap:8px;font-size:.73rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;
}
.cgrid2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
/* У электро и EREV поля объёма нет — мощность занимает всю строку. */
.cgrid2.is-single{grid-template-columns:1fr}
/* background-color, а не background: сокращение сбросило бы стрелку у
   выпадающего списка, которую рисует общее правило select. */
.cinp{
  width:100%;padding:13px 15px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background-color:var(--bg-deep);color:var(--text);font-size:.925rem;
  transition:border-color .2s,box-shadow .2s;
}
.cinp:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(227,6,19,.18)}
.cinp--sm{width:11ch;padding:9px 12px;font-size:.85rem;text-align:right;font-variant-numeric:tabular-nums}
.cchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.cchip{
  cursor:pointer;padding:5px 11px;border:1px solid var(--line-2);border-radius:11px;
  background-color:transparent;color:var(--muted);font-size:.72rem;font-weight:600;
  transition:border-color .18s,color .18s,background-color .18s;
}
.cchip:hover{border-color:var(--line-3);color:var(--text-2)}
.cchip.is-on{border-color:var(--gold);color:var(--gold);background-color:rgba(217,190,138,.08)}
.cpower,.cprice{display:flex;gap:8px;align-items:stretch}
.cpower .cinp,.cprice .cinp{flex:1;min-width:0}
.chint{margin-top:9px;font-size:.76rem;color:var(--dim);line-height:1.5}
.cbadge{
  display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;border:1px solid var(--line-2);
  background-color:rgba(255,255,255,.05);color:var(--muted);white-space:nowrap;
  font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.cbadge--ok{color:#67D6A8;background-color:rgba(47,163,110,.14);border-color:rgba(47,163,110,.35)}
.cbadge--warn{color:var(--warn);background-color:rgba(221,161,60,.12);border-color:rgba(221,161,60,.32)}
.crates__t{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  cursor:pointer;text-align:left;padding:12px 15px;margin-bottom:10px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background-color:var(--bg-2);
  color:var(--text-2);font-size:.8rem;font-weight:600;transition:border-color .18s,color .18s;
}
.crates__t:hover{border-color:var(--line-3);color:var(--text)}
.crates__t[aria-expanded=true]{border-color:var(--red);color:var(--text)}
.crates__i{display:inline-flex;transition:transform .2s var(--ease)}
.crates{
  display:grid;gap:10px;padding:14px 15px;margin-bottom:16px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background-color:var(--bg-2);
}
.crate{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.8rem;color:var(--text-2)}
.crate i{font-style:normal;font-size:.74rem;color:var(--dim)}
.crates__n{font-size:.72rem;color:var(--dim);line-height:1.55}
.cres__h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:2px}
.cres__h>span:first-child{font-family:var(--display);font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
.cres__lines{border-top:1px solid var(--line-2);margin-top:14px}
.cres__load{font-size:.84rem;color:var(--dim);padding:14px 0}
.cres__err{font-size:.84rem;color:var(--warn);line-height:1.5;padding:14px 0}
.cres__coeff{font-style:normal;font-size:.74rem;color:var(--dim);white-space:nowrap}
.cres__total{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:16px 0 4px;margin-top:2px;border-top:1px solid var(--line-2);
}
.cres__total>span:first-child{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.cres__val{
  font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.05rem);
  letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums;
}
.cres__val i{font-style:normal;color:var(--gold)}
.cres__note{font-size:.75rem;color:var(--dim);line-height:1.6;margin:12px 0 18px}
.cres__days{font-size:.75rem;color:var(--dim);margin-top:12px}
.cminis{display:grid;gap:8px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2)}
.cminis li{position:relative;padding-left:23px;font-size:.8rem;color:var(--text-2)}
.cminis li::before{
  content:'';position:absolute;left:1px;top:.34em;width:11px;height:6px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg);
}

/* ---------- «Из чего складывается растаможка авто из Китая» ---------- */
.rast-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:30px}
/* Карточки лежат на полосе sec--alt (--bg-2), поэтому фон — --surface:
   на одном с полосой фоне они читались бы пустыми рамками. Так же сделаны
   .rev и .ocard. */
.rast-card{border:1px solid var(--line-2);border-radius:var(--r);background-color:var(--surface);padding:20px 22px}
.rast-card h3{font-size:1.02rem;letter-spacing:-.015em;margin-bottom:9px}
.rast-card p{font-size:.845rem;color:var(--muted);line-height:1.66}

@media (max-width:760px){
  .cgrid2{grid-template-columns:1fr}
  .rast-cards{grid-template-columns:1fr}
  .cseg--mode{flex-direction:column}
}

/* ---------- формы ---------- */
.form-card{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg-2);padding:clamp(22px,2.6vw,34px);box-shadow:var(--sh)}
.form-card .btn{margin-top:4px}
.form-card h3{font-family:var(--display);font-weight:800;font-size:1.14rem;letter-spacing:-.02em}
.form-note{font-size:.72rem;color:var(--dim);margin-top:12px}
.form-note a{color:var(--muted);text-decoration:underline}
.form-ok{display:none;align-items:center;gap:11px;padding:14px 16px;border-radius:var(--r-sm);background:rgba(47,163,110,.12);border:1px solid rgba(47,163,110,.4);color:#8FE3BE;font-size:.86rem;margin-top:14px}
.form-ok.is-on{display:flex}
.form-ok svg{flex:none;width:17px;height:17px}
.form-err{display:none;color:#FF8A84;font-size:.78rem;margin-top:7px}
.form-err.is-on{display:block}

/* ---------- декоративные сцены (вместо слотов «место под фото») ---------- */
.deco{position:relative;overflow:hidden;background:var(--surface);border-radius:var(--r-lg)}
.deco svg{width:100%;height:100%;object-fit:cover;display:block}
.why__panel .deco{position:absolute;inset:0;border-radius:0}
.cteas .deco{aspect-ratio:16 / 10;margin-top:4px}

/* ---------- блок покупки на странице авто ---------- */
.buy__credit{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:0 0 16px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--bg);font-size:.76rem;color:var(--muted)}
.buy__credit b{font-family:var(--display);font-weight:800;font-size:1.02rem;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.buy__credit b i{font-style:normal;font-weight:700;font-size:.72rem;color:var(--muted)}
.buy__perks{display:grid;gap:8px;margin:0 0 18px;padding:0}
.buy__perks li{display:flex;gap:9px;align-items:flex-start;font-size:.8rem;color:var(--text-2);line-height:1.4}
.buy__perks svg{flex:none;width:14px;height:14px;color:var(--ok);margin-top:3px}

/* ---------- мессенджеры под кнопкой формы ---------- */
.form-alt{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.78rem;color:var(--dim);margin-top:12px}
.form-alt a{color:var(--text-2);border-bottom:1px solid var(--line-3);transition:color .18s}
.form-alt a:hover{color:var(--red-2)}
.form-alt span{color:var(--line-3)}

/* ---------- бронирование на странице лота: две кнопки вместо формы -------- */
/* На карточке лота форму заказа убрали по правке заказчика: остались две
   кнопки — Telegram (личный менеджер) и звонок. Иконки — в .btn svg. */
.buy__cta{display:grid;gap:10px;margin-top:2px}
.buy__cta .btn{width:100%}
.buy__cta-note{margin:4px 0 0;font-size:.74rem;color:var(--dim);line-height:1.45;text-align:center}

/* ---------- «Как мы привезём этот авто» (секция лота) --------------------- */
/* Сверху три тезиса-сводки, ниже шесть шагов с пометкой «вы/мы»: заказчик
   видит, где действие от него, а где — наша работа. */
.dlv__lead{margin:-10px 0 26px;color:var(--text-2);font-size:15px;line-height:1.6;max-width:74ch}
.dlv__verd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:26px}
.dlv__v{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);padding:18px 20px}
.dlv__v-t{display:block;font-family:var(--display);font-weight:700;font-size:15px;line-height:1.3;margin-bottom:6px}
.dlv__v-t.is-good{color:var(--ok)}
.dlv__v-x{display:block;color:var(--text-2);font-size:13.5px;line-height:1.5}
.dlv__steps{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.dlv__step{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:start;
  padding:16px 18px;border:1px solid transparent;border-radius:var(--r);background:var(--bg-2)}
.dlv__step.key{border-color:var(--line-2);background:var(--surface)}
.dlv__n{font-family:var(--display);font-weight:800;font-size:15px;color:var(--muted);
  font-variant-numeric:tabular-nums;padding-top:1px}
.dlv__step.key .dlv__n{color:var(--gold)}
.dlv__b{display:flex;flex-direction:column;gap:6px;min-width:0}
.dlv__tt{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.dlv__t{font-weight:700;font-size:16px;line-height:1.25}
.dlv__who{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;border:1px solid var(--line-3);color:var(--muted)}
.dlv__who--you{color:var(--text-2)}
.dlv__who--we{color:var(--gold);border-color:rgba(217,190,138,.45);background:rgba(217,190,138,.07)}
.dlv__chip{font-size:11px;color:var(--muted);border:1px dashed var(--line-3);padding:2px 9px;border-radius:999px}
.dlv__chip--good{color:var(--ok);border-color:rgba(47,163,110,.4)}
.dlv__x{color:var(--text-2);font-size:13.5px;line-height:1.55}
.dlv__foot{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);padding:18px 22px}
.dlv__phone{display:flex;flex-direction:column;gap:2px}
.dlv__phone-n{font-family:var(--display);font-weight:800;font-size:18px;color:var(--text);
  font-variant-numeric:tabular-nums}
.dlv__phone-s{color:var(--muted);font-size:13px}
.dlv__foot .btn{margin-left:auto}
@media (max-width:860px){
  .dlv__verd{grid-template-columns:1fr}
  .dlv__step{grid-template-columns:38px minmax(0,1fr);gap:12px;padding:14px}
  .dlv__foot .btn{margin-left:0;width:100%}
}

/* чип пробега на фото карточки */
.card__km{position:absolute;left:10px;bottom:10px;z-index:2}

/* ---------- красная полоса CTA ---------- */
/* Фон всей секции — фото, затемнённое к тексту (слева плотнее, чтобы форма читалась). */
.ctab{position:relative;overflow:hidden;
  background:
    linear-gradient(100deg,rgba(15,2,2,.9) 0%,rgba(84,10,12,.66) 40%,rgba(15,2,2,.34) 70%,rgba(8,1,2,.5) 100%),
    url(/img/cta/cta-pano.webp) center / cover no-repeat,
    linear-gradient(100deg,#690D0F,var(--red-deep) 44%,#8E1412);
  border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(0,0,0,.4)}
.ctab__in{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:center;padding:clamp(34px,3.6vw,54px) 22px}
.ctab__l{max-width:660px}
.ctab h2{color:#fff;margin-bottom:12px}
.ctab__l>p{color:rgba(255,255,255,.8);font-size:.94rem;margin-bottom:24px;max-width:46ch}
.ctab__form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px}
.ctab__field input{
  width:100%;padding:14px 16px;min-height:48px;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-sm);
  background:rgba(255,255,255,.1);color:#fff;font-size:.9rem;transition:border-color .2s,background-color .2s;
}
.ctab__field input::placeholder{color:rgba(255,255,255,.62)}
.ctab__field input:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.17)}
.ctab__btn{background:#fff;color:var(--red-deep);box-shadow:0 10px 26px rgba(0,0,0,.24)}
.ctab__btn:hover{background:#F1EDE8;color:var(--red-deep)}
.ctab__note{font-size:.71rem;color:rgba(255,255,255,.62);margin-top:11px}
.ctab__note a{text-decoration:underline}
/* Коробки ответа теперь внутри формы (иначе forms.js их не находит) — а форма
   это grid из трёх колонок, поэтому без явного span они встали бы четвёртой
   ячейкой в строку с кнопкой. Скрытые они строки не создают: display:none. */
.ctab__form>.form-err,.ctab__form>.form-ok{grid-column:1/-1}
.ctab__err{color:#FFD9D6}
.ctab__ok{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff}
/* Фото-слот в правой колонке красной полосы: в графитовой версии правила
   потерялись, а элемент в разметке остался — слот стоял без стилей. */
.ctab__r{position:relative;min-height:190px;align-self:stretch}
.ctab__r .ph-slot{position:absolute;inset:0;border-color:rgba(255,255,255,.24);background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 1px,transparent 1px 9px)}
.ctab__r .ph-slot__t{color:rgba(255,255,255,.7)}
.ctab__r .ph-slot__s{color:rgba(255,255,255,.48)}
/* Компактная плашка для внутренних страниц: без фото и без формы. */
.ctab__box{
  position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;
  padding:clamp(24px,2.8vw,38px);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);
  background:linear-gradient(100deg,#690D0F,var(--red-deep) 52%,#8E1412);
  box-shadow:0 22px 56px rgba(122,17,19,.3);
}
.ctab__box h2{color:#fff;margin-bottom:10px}
.ctab__box p{color:rgba(255,255,255,.8);font-size:.9rem;max-width:56ch;margin:0}

/* ---------- контакты ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.info-list li{display:flex;gap:16px;padding:17px 0;border-bottom:1px solid var(--line)}
.info-list li:first-child{padding-top:0}
.info-list .k{width:112px;flex:none;font-size:.76rem;letter-spacing:.05em;color:var(--dim);text-transform:uppercase;padding-top:3px}
.info-list .v{font-size:.96rem}
.info-list .v a:hover{color:var(--red-2)}
.info-list .v small{display:block;color:var(--muted);font-size:.8rem;margin-top:4px}
/* Фото шоурума на «Контактах» — на месте карты. Раньше здесь стоял .map-box
   с кнопкой «Показать карту»: iframe грузился по клику (js/map.js). Карту
   убрали по просьбе заказчика, поэтому ушли и правила, и скрипт.
   Высоту не фиксируем: снимок 925×788 показываем целиком, без обрезки —
   подгонять его под высоту левой колонки значило бы резать шоурум. */
.showroom{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.showroom img{display:block;width:100%;height:auto}

/* ---------- крошки ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.78rem;color:var(--dim);padding:calc(var(--hdr) + 22px) 0 0}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--text)}
.crumbs span{opacity:.5}

/* ---------- страница авто ---------- */
.pcar{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:start;padding-top:20px}
.pcar__title{font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.12;letter-spacing:-.02em;margin-bottom:2px}
.gal__main{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);aspect-ratio:4/3}
.gal__main img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.gal__thumbs{display:flex;gap:9px;margin-top:9px;flex-wrap:wrap}
.gal__thumbs button{width:84px;aspect-ratio:4/3;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface);cursor:pointer;opacity:.55;transition:opacity .2s,border-color .2s}
.gal__thumbs button[aria-current="true"],.gal__thumbs button:hover{opacity:1;border-color:var(--red)}
.gal__thumbs img{width:100%;height:100%;object-fit:cover}
.buy{position:sticky;top:calc(var(--hdr) + 16px);border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg-2);padding:24px;box-shadow:var(--sh)}
.buy__price{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,2.8vw,2.25rem);letter-spacing:-.038em;line-height:1;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.buy__sub{font-size:.78rem;color:var(--muted);margin-bottom:18px}
.spec{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:12px}
.spec div{background:var(--bg-2);padding:12px 14px}
.spec dt{font-size:.7rem;letter-spacing:.06em;color:var(--dim);margin-bottom:4px;text-transform:uppercase}
.spec dd{margin:0;font-size:.89rem;font-weight:500}
.dl{display:grid;grid-template-columns:auto 1fr;border-top:1px solid var(--line)}
.dl dt,.dl dd{margin:0;padding:12px 0;border-bottom:1px solid var(--line);font-size:.89rem}
.dl dt{color:var(--muted);padding-right:18px;white-space:nowrap}
.dl dd{text-align:right;font-weight:500}

/* блоки страницы авто «под заказ» (зеркалим структуру честныйпрайс.рф) */
.order__owners{display:flex;align-items:center;gap:12px;margin-top:20px;padding:14px 18px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);width:fit-content}
.order__owners b{font-size:1.55rem;color:var(--red);line-height:1}
.order__owners span{color:var(--muted);font-size:.85rem}
.order__grp{margin:0 0 26px}
.order__grp h3{display:block;font-size:1.02rem;margin-bottom:0}

/* ---------- фильтры каталога ---------- */
/* ---------- каталог: левый сайдбар + сетка 3 в ряд (как в макете) ---------- */
.cat__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:18px;margin-bottom:24px}
.cat__h1{font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:8px}
.cat__cnt{font-size:.88rem;color:var(--muted)}
.cat__cnt b{color:var(--text);font-weight:700}
.cat__tools{display:flex;align-items:center;gap:10px}
.sel{display:inline-flex;align-items:center;gap:9px;padding:10px 15px;min-height:44px;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg-2);
  font-size:.83rem;color:var(--text-2);cursor:pointer}
.sel>span{color:var(--muted)}
.sel select{border:0;background:transparent;color:var(--text);font:inherit;font-weight:600;
  padding:0 4px;cursor:pointer;min-height:40px}
.sel--btn{font-weight:600;color:var(--text)}
.sel--btn:hover{border-color:var(--line-3)}

.cat{display:grid;grid-template-columns:264px minmax(0,1fr);gap:clamp(18px,2.4vw,34px);align-items:start}
.cat__main{min-width:0}
.cars--cat{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Ряд марок на витрине «под заказ»: сайдбар фильтров заменён кнопками.
   Логотип — маска (background-color = currentColor), поэтому монохром
   бесплатный, а в активном состоянии кнопка краснеет целиком. */
.brands{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 clamp(16px,2vw,24px)}
.brands__ttl{font-size:.82rem;font-weight:700;letter-spacing:.02em;color:var(--text-2);margin-right:2px}
.brands__sep{width:1px;height:26px;background:var(--line-2);margin:0 4px}
.cat--solo{display:block}
.brand{border:1px solid var(--line);border-radius:999px;background:var(--bg-2);color:var(--text-2);
  font:inherit;cursor:pointer;padding:0;min-height:44px;transition:border-color .18s var(--ease),
  background-color .18s var(--ease),color .18s var(--ease)}
.brand__in{display:flex;align-items:center;gap:8px;padding:8px 14px}
.brand__lg{width:30px;height:21px;flex:none;background:currentColor;
  -webkit-mask:var(--lg) center/contain no-repeat;mask:var(--lg) center/contain no-repeat}
.brand__lg:not([style]){display:none}
.brand__nm{font-size:.84rem;font-weight:600;white-space:nowrap}
.brand__n{font-size:.7rem;font-weight:700;color:var(--dim);background:var(--surface);
  border-radius:999px;padding:2px 7px;line-height:1.2}
.brand__n:empty{display:none}
.brand:hover{border-color:var(--line-3);color:var(--text)}
.brand.is-on{border-color:var(--red);background:color-mix(in srgb,var(--red) 12%,var(--bg-2));color:var(--red-2)}
.brand.is-on .brand__n{color:var(--red-2);background:transparent}
.brand:focus-visible{outline:2px solid var(--red-2);outline-offset:2px}

.side{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);
  padding:6px 18px 18px;position:sticky;top:calc(var(--hdr) + 18px)}
.side__h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 0 12px;border-bottom:1px solid var(--line);font-size:.9rem}
.side__x{padding:8px 10px;min-height:40px;border:0;background:none;color:var(--red);font:inherit;font-size:.78rem;
  cursor:pointer;text-decoration:underline}
.sbg{border-bottom:1px solid var(--line)}
.sbg:last-of-type{border-bottom:0}
.sbg>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 0;font-family:var(--display);font-weight:700;font-size:.86rem;
  letter-spacing:-.01em;cursor:pointer;list-style:none;min-height:48px}
.sbg>summary::-webkit-details-marker{display:none}
.sbg>summary::after{content:'';width:8px;height:8px;flex:none;border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .2s;margin-top:-4px}
.sbg[open]>summary::after{transform:rotate(-135deg);margin-top:2px}
.sbg__b{display:grid;gap:11px;padding:0 0 16px}
.sbx{display:flex;align-items:center;gap:10px;font-size:.83rem;color:var(--text-2);
  cursor:pointer;min-height:40px;line-height:1.3;padding:6px 0}
.sbx input{appearance:none;width:17px;height:17px;flex:none;border:1px solid var(--line-3);
  border-radius:3px;background:var(--bg);cursor:pointer;position:relative;transition:border-color .15s,background-color .15s;
  margin:0;padding:0}
.sbx input:checked{background:var(--red);border-color:var(--red)}
.sbx input:checked::after{content:'';position:absolute;left:5px;top:2px;width:5px;height:9px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(42deg)}
.sbx:hover{color:var(--text)}
#f-max{width:100%;accent-color:var(--red);margin:2px 0 8px;min-height:40px}
.sbr__o{font-size:.78rem;color:var(--muted)}
.sbr__o b{color:var(--text)}
.side__foot{display:grid;gap:13px;padding-top:16px}
.side__foot .btn{width:100%;justify-content:center}

.pagin{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:36px;flex-wrap:wrap}
.pagin__i{display:grid;place-items:center;min-width:40px;height:40px;padding:0 11px;
  border:1px solid var(--line);border-radius:var(--r);font-size:.85rem;font-weight:600;
  color:var(--text-2);transition:border-color .18s,color .18s,background-color .18s}
.pagin__i:hover{border-color:var(--line-3);color:var(--text)}
.pagin__i.is-on{background:var(--red);border-color:var(--red);color:#fff}
.pagin__i--dots{border-color:transparent;pointer-events:none}
.pagin__i--n svg{width:14px;height:14px}
.pill{padding:11px 17px;min-height:44px;border:1px solid var(--line-2);border-radius:999px;font-size:.83rem;cursor:pointer;background:transparent;transition:border-color .2s,color .2s,background-color .2s}
.pill:hover{border-color:var(--line-3)}
.pill[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.empty{padding:56px 20px;text-align:center;border:1px dashed var(--line-2);border-radius:var(--r-lg);color:var(--muted)}

/* ---------- футер ---------- */
.ftr{background:var(--bg-deep);border-top:1px solid var(--line);padding:38px 0 20px}
.ftr__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr 1fr;gap:26px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.ftr h4{font-family:var(--display);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-bottom:12px;font-weight:700}
.ftr ul li{margin-bottom:7px}
.ftr ul a{font-size:.83rem;color:var(--text-2)}
.ftr ul a:hover{color:var(--text)}
.ftr__logo img{height:30px;width:auto;background:transparent}
.ftr__logo .sub{margin-top:10px;font-size:.75rem;color:var(--dim);max-width:28ch;line-height:1.5}
.ftr__contacts a{display:block;font-size:.87rem;margin-bottom:5px;color:var(--text-2)}
.ftr__contacts a:hover{color:var(--text)}
.ftr__contacts .big{font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:-.02em;color:var(--text)}
.ftr__contacts .sub{font-size:.75rem;color:var(--dim);line-height:1.5;margin-top:7px}
.ftr__soc-in{display:flex;gap:10px;margin-bottom:8px}
.ftr__soc .sub{font-size:.74rem;color:var(--dim);line-height:1.5}
.ftr__bot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding-top:16px;font-size:.74rem;color:var(--dim)}
.ftr__bot a:hover{color:var(--text-2)}

/* ---------- лайтбокс ---------- */
.lb{position:fixed;inset:0;z-index:100;background:rgba(5,5,6,.95);display:none;padding:24px}
.lb.is-on{display:grid;place-items:center}
.lb img{max-width:min(1200px,94vw);max-height:88vh;object-fit:contain;border-radius:var(--r)}
.lb__x{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:rgba(20,20,24,.92);color:var(--text);cursor:pointer;font-size:1.25rem;line-height:1}
.lb__n{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:var(--muted);font-size:.8rem}

/* ---------- 404 ---------- */
.p404{min-height:70vh;display:grid;place-items:center;text-align:center;padding:calc(var(--hdr) + 60px) 22px 70px}
.p404 h1{font-size:clamp(4rem,14vw,9rem);letter-spacing:-.05em;color:var(--red);line-height:.9}

/* ---------- адаптив ---------- */
@media (max-width:1180px){
  .nav{display:none}
  .burger{display:grid}
  /* Телефон на узком экране остаётся иконкой: номер и часы работы
     уезжают в мобильное меню, где для них есть место. */
  .np-text{display:none}
  .navcta{display:none}
  .navcontacts{gap:10px}
  .hero__l{max-width:min(620px,64%)}
  .hero__car img{width:40vw}
  .why{grid-template-columns:1fr;gap:30px}
  .why__panel,.why__cap{min-height:300px}
  .rev-grid{grid-template-columns:1fr;gap:30px}
  .faq-grid{grid-template-columns:1fr;gap:30px}
  .faq-art{max-width:520px}
  .ctab__in{grid-template-columns:1fr;gap:22px}
  .ftr__top{grid-template-columns:1fr 1fr 1fr;gap:26px}
  .cat{grid-template-columns:230px minmax(0,1fr)}
  .cars--cat{grid-template-columns:repeat(2,1fr)}
  .pcar{grid-template-columns:1fr}
  .buy{position:static}
  .calc{grid-template-columns:1fr}
  .calc__r{border-left:0;border-top:1px solid var(--line-2)}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:980px){
  .hero__ph{width:100%;opacity:.4}
  .hero__l{max-width:none}
  /* Машина уходит под текст лёгким фоном, как и art-слой. */
  .hero__car{right:-6%;bottom:3%;opacity:.4}
  .hero__car img{width:56vw}
  /* У обычного hero машина — фон: аура-разрез бессмысленна и мешает, убрать.
     Но сцена (hero--stage) — особый случай: там машина НЕ фон, она видима и
     крупная, и по просьбе заказчика разрез должен открываться и тапом пальца
     на мобильном. Поэтому для сцены интерактив и ауру возвращаем. */
  .hero__frame{pointer-events:none}
  .hero__aura{display:none!important}
  .hero__cut{display:none}
  .hero--stage .hero__frame{pointer-events:auto}
  .hero--stage .hero__aura{display:block!important}
  /* Важнее правил .hero__frame img{display:block} (0,1,1) и
     .hero--stage .hero__car img{display:block} (0,2,1): иначе слой-разрез
     остаётся видимым под машиной и на мобильном. */
  .hero--stage .hero__car .hero__cut{display:none}
  .steps{grid-template-columns:repeat(2,1fr);gap:0 20px}
  .step__chev{display:none}
  .cars{grid-template-columns:repeat(3,minmax(0,1fr))}
  .oors{grid-template-columns:repeat(2,1fr)}
  .revs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .cars{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}
  .revs{grid-template-columns:1fr}
  .orders{grid-template-columns:1fr}
  .ctab__form{grid-template-columns:1fr}
  .ftr__top{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .cars{grid-template-columns:minmax(0,1fr)}
  body{font-size:15px}
  .hdr{inset:0 0 auto}
  /* Hero в референсе — 1/5 экрана. На телефоне держим ~55–60 % первого
     экрана: достаточно, чтобы кадр читался как hero, но следующий блок
     уже виден и страница не превращается в «одну кнопку на экран». */
  .hero{padding:calc(var(--hdr) + 30px) 0 34px;min-height:min(560px,62vh)}
  .hero__l{max-width:none}
  .hero__ph{opacity:.34;width:100%}
  .hero h1{font-size:clamp(2rem,9.2vw,2.7rem);margin-bottom:14px}
  .hero__lead{font-size:.87rem;margin-bottom:20px}
  .hero__car{right:-16%;bottom:5%;opacity:.32}
  .hero__car img{width:88vw}
  .hf{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;margin-bottom:20px}
  .hf li{font-size:.735rem;align-items:flex-start;gap:7px}
  .hf__i svg{width:16px;height:16px}
  .hero__btns{gap:10px}
  .hero__btns .btn--primary{padding:14px 20px}
  .btn--play{padding:4px 0}
  .hero__ring{width:40px;height:40px}
  .hero__play-t{font-size:.72rem}
  .hero__play-t small{font-size:.66rem}
  .steps{grid-template-columns:1fr;gap:0}
  .step{padding:13px 0}
  .step__top{margin-bottom:10px}
  .why__cap,.why__panel{min-height:250px}
  /* Сайдбар уходит под сетку; фильтры разворачиваются по кнопке. */
  .cat{grid-template-columns:1fr}
  .side{position:static;display:none}
  .side.is-open{display:block}
  .cars--cat{grid-template-columns:minmax(0,1fr)}
  .cat__tools{width:100%}
  .sel{flex:1;justify-content:space-between}
  .ocard{grid-template-columns:1fr}
  .ocard__ph{max-width:170px}
  .spec{grid-template-columns:1fr}
  .btn{width:100%}
  .btn--sm,.btn--play{width:auto}
  .card__f{flex-wrap:nowrap}
  .ctab h2{font-size:1.28rem}
  .ftr__top{grid-template-columns:1fr;gap:22px}
  .crumbs{padding-top:calc(var(--hdr) + 18px)}
  .dl dt{white-space:normal}
  .sec{padding:34px 0}
  .sec--tight{padding:30px 0}
  /* Шапка: на мобильном оставляем логотип + бургер. Телефон и CTA-в-шапке
     уезжают в таб-бар и в мобильное меню, чтобы не разрывать ряд. */
  .hdr__r{gap:6px}
  .np-icon{width:40px;height:40px}
  .hero__in{padding:calc(var(--hdr) + 24px) var(--pad) 32px}
  /* Полоса преимуществ: на телефоне — вертикальный столбец вместо 5. */
  .feats{grid-template-columns:minmax(0,1fr)}
  .sec-head{margin-bottom:22px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media print{
  .hdr,.mnav,.ftr,.btn,.calc,.form-card,.ctab{display:none!important}
  body{background:#fff;color:#000}
}

/* ---------- сетка «под заказ» и мелочи ---------- */
.pdesc{margin-top:24px;border-top:1px solid var(--line);padding-top:20px}
.pdesc h2{font-size:1.05rem;margin-bottom:12px}
.pdesc p{color:var(--muted);font-size:.92rem;line-height:1.72;white-space:pre-line}
.buy__avito{margin-top:12px;font-size:.8rem}
.buy__avito a{color:var(--red-2);border-bottom:1px solid rgba(196,20,20,.4)}

/* ---------- карточки на внутренних страницах ---------- */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:0 26px}
.feat__i{padding:22px 0;border-top:1px solid var(--line-2)}
.feat__ico{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-sm);background:rgba(166,17,15,.14);color:var(--red-2);margin-bottom:14px}
.feat__ico svg{width:20px;height:20px}
.feat__i h3{font-family:var(--font);font-weight:600;font-size:.92rem;letter-spacing:0;margin-bottom:8px}
.feat__i p{font-size:.8rem;color:var(--muted);line-height:1.58}
.hero__stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:34px;border-top:1px solid var(--line)}
.hero__stats div{padding:22px 20px 0 0}
.hero__stats b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,2.3vw,2rem);letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.hero__stats span{display:block;margin-top:8px;font-size:.77rem;color:var(--muted)}
.hero__stats b i{font-style:normal;color:var(--gold);font-size:.6em}
@media (max-width:980px){
  .feat{grid-template-columns:repeat(2,1fr)}
  .hero__stats{grid-template-columns:1fr 1fr;gap:0 20px}
}
@media (max-width:760px){
  /* На мобильных показываем таб-бар, но шапка и бургер ещё работают. */
  .mtab{display:grid;grid-template-columns:repeat(4,1fr)}
  body{padding-bottom:calc(var(--mtab) + 4px + env(safe-area-inset-bottom))}
}
@media (max-width:640px){
  .feat{grid-template-columns:1fr;gap:0}
  .hero__stats div{padding:18px 14px 0 0}
  .oors{grid-template-columns:1fr}
}

/* ── feat--rich: секция «Параллельный импорт» на витрине Китая ── */
/* Иконки этой секции нарисованы в манере полосы .feats с главной: свой
   рисунок, круглые концы и стыки, штрих 1.9, плитка 46×46 вместо 40×40.
   Общие правила .feat для этого не годятся — под ними ходят /about/ и
   /process/, и правка .feat__ico утащила бы их за собой. Отсюда модификатор:
   он меняет только секцию с ним, а не класс.
   Колонок две, а не три: пунктов четыре, и в сетке из трёх четвёртый висел
   бы один в целом ряду. Оба правила стоят ПОСЛЕ медиазапросов .feat — при
   равной специфичности побеждает нижнее, и без этого мобильный .feat{1fr}
   оказался бы слабее и дал бы две колонки на телефоне. */
.feat--rich{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px}
.feat--rich .feat__ico{width:46px;height:46px;background:rgba(227,6,19,.12);margin-bottom:16px}
.feat--rich .feat__ico svg{width:24px;height:24px}
.feat--rich .feat__i h3{font-family:var(--display);font-weight:700;font-size:.98rem}
@media (max-width:760px){
  .feat--rich{grid-template-columns:minmax(0,1fr);gap:0}
}

/* ── hero--stack: начало (правит temp/_patch_frontend.py) ── */
/* На главной машина прижата к правому краю абсолютом. На «Под заказ» снимок
   шире (в кадре три машины) и идёт в потоке ПОД текстом с кнопками, поэтому
   герой выше. Префикс .hero--stack не случаен: в медиазапросах .hero__car
   на планшете и телефоне сделан бледным фоном за краем (opacity .4/.32), а
   нам нужен непрозрачный снимок в потоке — двойной класс перебивает их по
   специфичности независимо от порядка правил. */
.hero--stack .hero__car {
  position:relative;right:auto;bottom:auto;opacity:1;
  width:min(1040px,100%);margin:0 auto;
  /* flow-root не даёт отрицательным полям снимка «вытечь» из контейнера:
     иначе они схлопнулись бы с полями самого .hero__car, высота бокса стала
     бы равна полному кадру, и тень ::after повисла бы на 305px ниже колёс. */
  display:flow-root;
}
/* Прозрачные поля кадра (15.25% ширины сверху и 11.00% снизу, строки 183…488)
   гасим полями САМОГО снимка, а не контейнера. Ширина снимка равна ширине
   контейнера, поэтому проценты считаются ровно от той ширины, к которой
   относятся поля кадра. На контейнере они считались бы от ширины hero__in:
   на 1500px это 1420px против снимка в 1040px, и машины уезжали на 25px ВЫШЕ
   кнопок — то есть ровно та дыра, которую мы убираем, только с обратным знаком. */
.hero--stack .hero__car img {
  width:100%;display:block;
  margin:calc(clamp(14px,2vw,32px) - 15.25%) 0 -11.00%;
}
/* ── hero--stack: конец ── */

/* ── hero-map: начало ── */
/* Карта пригона (Пекин → Набережные Челны) — средний план героя витрины.
   Лежит выше гор (.hero__art, z-index 1) и ниже текста с машиной
   (.hero__in, z-index 2). При равном z-index выигрывает тот, кто позже в
   документе, поэтому в разметке карта стоит ровно между ними — сразу после
   .hero__art и перед .hero__in. Машина перекрывает её снизу, горы
   просвечивают сквозь: это и есть «между горами и автомобилем».
   Само изображение — с уже снятым чёрным фоном и впечёнными краями
   (temp/_map_make.py): в ассете остались только контуры, подписи и красный
   маршрут, а слева, сверху и снизу он гаснет сам, поэтому CSS-маска не
   нужна вовсе.

   background:transparent здесь ОБЯЗАТЕЛЕН. В начале файла есть общее
   правило img{background:var(--surface)} — оно страхует от белой вспышки на
   время загрузки, но красит плиту под ЛЮБОЙ картинкой, включая прозрачную.
   Замер это и поймал: вклад карты накрывал 93% площади бокса ровным
   прямоугольником (0.0 на x=805, 4.0 на x=812), то есть карта читалась как
   вставленная плита — ровно то, чего заказчик не хотел. Тот же приём уже
   стоит у .logo img, .hero__car img и .ftr__logo img.

   Координаты взяты из ЗАМЕРА, а не на глаз. Правый край текста (по
   чернилам, а не по боксу .hero__l) гуляет от 60.1vw на 1000 px до 48.1vw
   на 1920: абзац переносится по-разному, и в vw его край не постоянен.
   Худший случай — 60.1vw, поэтому карта начинается на 56vw, а до 1080 px
   её нет вовсе: ниже этой ширины текст занимает больше половины кадра и
   карте остаётся полоска в 200 px, где подписи не читаются.
   Правый край уходит за границу кадра на 3vw (при 1440 это 43 px): карта
   читается как вырезка из большего полотна, а не как вставленная картинка.
   Маршрут при этом целиком внутри кадра — он занимает 17.5%…87% ширины
   ассета, то есть 64.2vw…96.9vw экрана, и «Харбин» с «Чанчунем» на правом
   конце не срезаны. */
.hero__map{
  position:absolute;z-index:1;pointer-events:none;user-select:none;
  top:clamp(110px,16vh,190px);
  left:56vw;
  width:47vw;height:auto;
  background:transparent;
  opacity:.62;
}
/* На планшете и телефоне герой --stack короткий: машина стоит в потоке
   вплотную к тексту, и карте не остаётся ни места, ни смысла — она лезла бы
   под подписи. Прячем совсем, а не уменьшаем. */
@media (max-width:1080px){.hero__map{display:none}}
/* ── hero-map: конец ── */

/* ── about-band: начало (правит temp/_patch_about.py) ── */
/* Фон секции — подготовленный заказчиком кадр 1774×887 (ровно 2:1): тёмная
   фактура, машина с красной подсветкой в правом верхнем углу. Кадр лежит
   отдельным <img> в ОДНОЙ ячейке сетки с содержимым: высоту задаёт он (2:1),
   поэтому фон ложится ровно и не режется, а если содержимое окажется выше —
   секция вырастет, и низ кадра уйдёт под тёмный фон страницы (стык не виден,
   низ кадра почти чёрный). */
.ab-band{
  position:relative;display:grid;overflow:hidden;
  padding:0;                       /* у .sec--tight свои паддинги — тут лишние */
  background:var(--bg);
}
.ab-band__bg{grid-area:1/1;width:100%;height:auto}
/* Колонку содержимого считаем ОТ СЕКЦИИ, а не от .wrap: у .wrap своя ширина
   (max-width:1400px + 2*pad) и центрирование, из-за которых на 1024px текст
   упирался в самый край экрана (97% ширины) — то есть ровно под фару машины
   из фона (замер: контраст лида падал до 1.51:1 при норме 4.5).
   Слева повторяем отступ .wrap, справа держим 16%: машина и красные полосы
   в кадре начинаются на x 85%, так что текст кончается на 84% и не доходит
   до них ни на одной ширине. */
.ab-band__in{
  grid-area:1/1;z-index:1;
  /* position:relative ОБЯЗАТЕЛЕН, а не украшение: z-index на статичном
     элементе не действует. Без него в сложенном столбике (там .ab-band__bg
     становится position:absolute и уезжает в слой позиционированных) фон
     ложился ПОВЕРХ текста — getComputedStyle при этом бодро рапортовал
     «visible», а на экране текста не было (поймано hit-тестом). */
  position:relative;
  width:100%;max-width:none;margin:0;   /* выходим из коробки .wrap — см. выше */
  display:flex;align-items:center;      /* фото и текст — по центру полосы */
  padding-left:max(var(--pad),calc((100% - var(--wrap) - var(--pad) * 2) / 2 + var(--pad)));
  padding-right:max(var(--pad),16%);
}
.ab-band .ab{width:100%}
/* Фото салона приходит ВМЕСТЕ со своей рамкой: скруглённые углы, красная
   полоса слева, плашка с адресом. Своя рамка .ab__ph (border + border-radius
   + фон) дала бы вторую, поэтому её убираем, а размеры отдаём самой картинке:
   кадр почти квадратный (1:1.174), обрезка по 4/3 срезала бы вывеску
   сверху и плашку снизу. */
.ab-band .ab__ph{border:0;border-radius:0;background:none;aspect-ratio:auto}
.ab-band .ab__ph img{height:auto;object-fit:contain}
/* Верх кадра светлее фона страницы (верхняя строка 15.2 против 12.3 у --bg) —
   на стыке читалась бы бледная граница во всю ширину. Гасим её градиентом от
   цвета фона. pointer-events:none ОБЯЗАТЕЛЕН: декоративный слой во всю ширину
   поверх интерактивных детей молча съедает по ним клики (грабли prpv). */
.ab-band::before{
  content:'';position:absolute;top:0;left:0;right:0;height:clamp(18px,4.5vw,90px);
  background:linear-gradient(var(--bg),rgba(10,11,16,0));
  pointer-events:none;z-index:2;
}
@media (max-width:900px){
  /* В две колонки секция тут не помещается: в исходной вёрстке на 390px фото
     сжималось до 164px, а текст — до 172px (снято с дорабочей копии). Кадр
     становится настоящим фоном секции и закрывает её целиком, содержимое —
     в столбик. */
  .ab-band{display:block}
  .ab-band__bg{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center;
  }
  .ab-band__in{
    display:block;
    /* Боковые отступы возвращаем к --pad: базовые проценты (16%) на узком
       экране отрезали бы у столбика правый край. */
    padding:clamp(22px,5vw,40px) var(--pad) clamp(26px,5vw,44px);
  }
  .ab-band .ab{grid-template-columns:minmax(0,1fr)}
}
/* ── about-band: конец ── */

/* ── «Пять строк. Ни одной скрытой.» ─────────────────────────────────────
   Разложение цены примера на пять статей. Полоса сегментов и список строк
   связаны: подсветка строки подсвечивает её сегмент (src/js/pb.js).

   Ширина сегмента задаётся через flex-grow, а не flex-basis в процентах:
   с процентами и gap полоса вылезала бы за контейнер на сумму зазоров.
   Значение --w подставляется разметкой как безразмерное число долей. */
.sec--pb{padding-top:clamp(34px,5vw,64px)}
.pb{
  border:1px solid var(--line-2);border-radius:18px;background:var(--surface);
  padding:clamp(20px,3vw,38px);
}
.pb__head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:start}
.pb__head-l h2{margin:8px 0 12px;font-size:clamp(23px,3vw,37px);line-height:1.12}
.pb__head-l h2 em{font-style:normal;color:var(--red)}
.pb__lead{margin:0;color:var(--text-2);font-size:15px;line-height:1.55;max-width:54ch}
.pb__lead a{
  color:var(--text);text-decoration:underline;
  text-decoration-color:var(--line-3);text-underline-offset:3px;
}
.pb__lead a:hover{text-decoration-color:var(--red)}
.pb__head-r{display:flex;flex-direction:column;align-items:flex-end;gap:12px;text-align:right}
.pb__chip{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  background:rgba(217,190,138,.12);border:1px solid rgba(217,190,138,.34);
  color:var(--gold);font-size:13px;font-weight:600;white-space:nowrap;
}
.pb__chip i{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px rgba(217,190,138,.16)}
.pb__total-cap{
  display:block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px;
}
.pb__total-val{
  display:block;font-family:var(--display);font-weight:800;line-height:1.02;
  font-size:clamp(25px,3.3vw,41px);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.pb__total-val i{font-style:normal;font-size:.6em;color:var(--text-2);margin-left:2px}

/* Полоса: пять долей одной тёплой шкалы. */
.pb__bar{display:flex;gap:3px;height:52px;margin:28px 0 10px;border-radius:10px;overflow:hidden}
/* Смета на странице лота собирается на клиенте: до готовности полосу прячем,
   иначе на секунду висит пустой серый отрезок. Без JS строк нет — секция
   просто короче (заголовок и итог приходят с сервера). */
.pb[data-pb-car]:not([data-pb-ready]) .pb__bar{display:none}
.pb__seg{
  flex:var(--w) 1 0;min-width:5px;background:var(--c);
  transition:opacity .18s var(--ease),transform .18s var(--ease);
}
.pb__bar[data-hover] .pb__seg:not(.is-h){opacity:.3}
.pb__bar[data-hover] .pb__seg.is-h{transform:scaleY(1.08)}

.pb__rows{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pb__row{
  display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:14px 16px 14px 0;border-radius:12px;border:1px solid transparent;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.pb__row:hover,.pb__row.is-h{background:rgba(255,255,255,.035);border-color:var(--line)}
.pb__n{
  font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted);
  border-left:3px solid var(--c);padding-left:12px;line-height:1.1;
}
.pb__row-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.pb__row-t{font-weight:600;font-size:16px;line-height:1.25}
.pb__row-n{color:var(--text-2);font-size:13.5px;line-height:1.4}
.pb__row-v{
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.pb__row-v b{font-size:17px;font-weight:700}
.pb__row-v s{text-decoration:none;font-size:13px;color:var(--muted)}

.pb__foot{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--line-2);
}
.pb__sum{margin:0;color:var(--text-2);font-size:14px;line-height:1.5;max-width:62ch}
.pb__sum b{color:var(--text)}

@media (max-width:860px){
  .pb__head{grid-template-columns:minmax(0,1fr)}
  .pb__head-r{align-items:flex-start;text-align:left}
  .pb__bar{height:36px;margin-top:24px}
  .pb__row{grid-template-columns:38px minmax(0,1fr) auto;gap:12px;padding-right:8px}
}
@media (max-width:560px){
  .pb{padding:18px 16px;border-radius:14px}
  /* Строка перестаёт быть тремя колонками: пояснение уходит, а сумма
     встаёт под названием. Иначе «Пошлина, сбор и утильсбор» и сумма
     начинают драться за одну строку и обе рвутся пополам. */
  .pb__row{grid-template-columns:30px minmax(0,1fr);gap:10px;row-gap:6px;padding:12px 6px 12px 0}
  .pb__row-n{display:none}
  .pb__row-v{
    grid-column:2;flex-direction:row;align-items:baseline;gap:10px;justify-content:flex-start;
  }
  .pb__row-v b{font-size:16px}
  .pb__bar{height:28px;margin:20px 0 8px}
  .pb__total-val{font-size:26px}
  .pb__foot{flex-direction:column;align-items:stretch}
  .pb__foot .btn{width:100%;justify-content:center}
}

/* ── смета в правой колонке страницы лота ────────────────────────────────
   Тот же компонент .pb (и тот же pb-car.js), но стоит не во всю ширину, а
   в колонке 0.85fr — это ~580 px при --wrap 1400. Компактные правила
   завёрнуты в min-width:1181px, потому что ровно на 1180px .pcar
   схлопывается в одну колонку: ниже смета снова во всю ширину, и ужимать
   её там незачем. Заодно это спасает от драки специфичности с мобильными
   правилами .pb__row (у .pb--side .pb__row она выше и перебила бы их). */
.pcar__side{display:flex;flex-direction:column;gap:20px}
/* .buy залипает (position:sticky). В паре со сметой это ломается: sticky
   резервирует место в потоке, а смета стоит следом — при прокрутке
   карточка наезжает на неё. Здесь колонка едет целиком, поэтому залипание
   снимаем только у этой связки; на карточках машин .buy остаётся sticky. */
.pcar__side .buy{position:static}

@media (min-width:1181px){
  .pb--side{padding:20px}
  .pb--side .pb__head{grid-template-columns:minmax(0,1fr);gap:14px}
  .pb--side .pb__head-l h2{margin:6px 0 8px;font-size:clamp(19px,1.6vw,25px)}
  .pb--side .pb__lead{font-size:13px;line-height:1.5}
  .pb--side .pb__head-r{
    flex-direction:row;flex-wrap:wrap;align-items:center;
    justify-content:space-between;gap:10px;text-align:left;
  }
  .pb--side .pb__total{text-align:right}
  .pb--side .pb__total-val{font-size:clamp(21px,1.9vw,27px)}
  .pb--side .pb__chip{font-size:11.5px;padding:6px 11px}
  .pb--side .pb__bar{height:32px;margin:18px 0 8px}
  .pb--side .pb__row{grid-template-columns:30px minmax(0,1fr) auto;gap:12px;padding:11px 8px 11px 0}
  .pb--side .pb__n{font-size:12px;padding-left:9px;border-left-width:2px}
  .pb--side .pb__row-t{font-size:14.5px}
  .pb--side .pb__row-n{font-size:12.5px;line-height:1.35}
  .pb--side .pb__row-v b{font-size:15px}
  .pb--side .pb__row-v s{font-size:12px}
  .pb--side .pb__foot{margin-top:18px;padding-top:16px;gap:12px}
  .pb--side .pb__sum{font-size:12.5px;max-width:none}
  .pb--side .pb__foot .btn{width:100%;justify-content:center}
}

/* ---------- окно подбора в правом нижнем углу ---------- */
/* Разметка — lib/parts/widget.html (одна на оба движка), поведение —
   js/widget.js. Ставится только на страницы БЕЗ своей формы заявки: на
   карточке машины и на странице лота форма уже есть, и второе окно поверх
   неё — навязчивость, а не подсказка.

   z-index 50 — намеренно НИЖЕ мобильного меню (55), таб-бара (60) и
   лайтбокса (100). Открытое меню обязано перекрывать окно; если поставить
   выше, окно всплывёт поверх меню и будет ловить клики, которые адресованы
   пунктам меню. */
.cw{
  position:fixed;right:22px;bottom:22px;z-index:50;
  width:340px;max-width:calc(100vw - 24px);padding:22px 22px 18px;
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:linear-gradient(158deg,var(--surface) 0%,var(--bg-2) 58%,#1D1113 100%);
  box-shadow:var(--sh-lg);
  /* Стартовое состояние: окно ждёт снаружи, ниже и чуть меньше. */
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.975);
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;
}
.cw.is-on{opacity:1;visibility:visible;transform:none}
.cw__x{
  position:absolute;top:10px;right:10px;display:grid;place-items:center;
  width:30px;height:30px;padding:0;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--dim);cursor:pointer;transition:color .18s,background-color .18s;
}
.cw__x:hover{color:var(--text);background:rgba(255,255,255,.07)}
.cw__x svg{pointer-events:none}
.cw__eye{
  margin:0 0 8px;font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--red-2);
}
.cw__t{font-family:var(--display);font-weight:800;font-size:1.06rem;line-height:1.28;letter-spacing:-.02em;margin:0 0 8px;padding-right:26px}
.cw__s{margin:0 0 15px;font-size:.82rem;line-height:1.5;color:var(--text-2)}
.cw__form{display:grid;gap:8px}
.cw__field input{
  width:100%;min-height:44px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:rgba(255,255,255,.05);color:var(--text);font-size:.88rem;
  transition:border-color .18s,background-color .18s;
}
.cw__field input::placeholder{color:var(--dim)}
.cw__field input:focus{outline:none;border-color:var(--red);background:rgba(255,255,255,.09)}
.cw__btn{width:100%;justify-content:center;margin-top:2px}
/* Коробки ответа — внутри формы (иначе forms.js их не достанет), в grid идут
   обычными строками: скрытая строка места не занимает. */
.cw__err{margin-top:2px}
.cw__ok{margin-top:2px;font-size:.8rem}
.cw__note{margin:11px 0 0;font-size:.68rem;line-height:1.45;color:var(--dim)}
.cw__note a{text-decoration:underline}
.cw__note a:hover{color:var(--text-2)}
@media (max-width:760px){
  /* На мобильных таб-бар занимает низ: окно встаёт НАД ним, иначе кнопка
     «Получить подборку» окажется под полосой навигации. */
  .cw{
    left:12px;right:12px;bottom:calc(var(--mtab) + 14px + env(safe-area-inset-bottom));
    width:auto;max-width:none;padding:18px 18px 15px;
  }
  .cw__t{font-size:1rem}
  .cw__s{margin-bottom:12px}
}
@media (max-width:360px){
  .cw__s{display:none}   /* на узком экране описание съедает форму */
}


/* ══ hero--stage: начало (главная, «красная сцена») ══════════════════════════
   Hero главной под референс заказчика: высота 90 % экрана, фон — SVG из
   присланного fon2.html, машина в центре, справа список подборки, слева
   курсы ЦБ. Всё новое живёт под .hero--stage, базовые правила .hero не
   тронуты: витрина /china/ собрана на .hero--stack и переписывать её не
   просили. Блок стоит В КОНЦЕ файла намеренно: выше есть медиазапросы вида
   `.hero{min-height:min(560px,62vh)}` с той же специфичностью, что у
   `.hero--stage`, и при равной специфичности побеждает тот, кто ниже.

   Префикс класса, а не правка `.hero`, ещё и потому, что .hero__stats
   используется на странице «О компании» — общий блок обязан остаться. */

.hero--stage{
  /* Высота — переменная, потому что от неё считаются ещё две вещи: размер
     машины и её отступ снизу. Дуга фона — часть того же SVG, растянутого на
     секцию (preserveAspectRatio="none"), поэтому её положение тоже
     пропорционально высоте, и связь «машина выше дуги» держится при любом
     окне. max(600px,…) вместо min-height: при min-height секция вырастала
     до 87vh, потому что содержимое не влезало. */
  --hs-h:max(600px,90vh);
  /* Красный ТОЧКИ между годом и двигателем. Базовый --red (#E30613) на тёмном
     фоне даёт 3,8:1, поэтому светлее; в референсе точка красная. */
  --hs-red:#FF5A64;
  /* Цвет ЦЕНЫ в подборке — отдельная переменная, потому что подложки под
     блоком больше нет (заказчик: «убрать тёмный блюр»), и цена теперь лежит на
     голом градиенте сцены. Раньше её контраст держала именно подложка: #FF5A64
     на фоне без неё даёт 3,42:1 на 1280, 3,23:1 на 1920, 2,50:1 на 3440 —
     порог AA для 13 px это 4,5, то есть на широких экранах цена сливалась с
     фоном. Сперва стояла светло-коралловая #FFB4BB (худший 4,53), заказчик
     заменил её на жёлтую.
     Жёлтая #FFD24A проходит AA на всех проверенных размерах, худший — 5,28
     (мерил `temp/_hero_price_red.py` по самому светлому пикселю под ценой,
     15 размеров от 1280×720 до 3440×1440). Границы выбора тоже измерены:
     темнее идёт #FFC107 — 4,67, впритык к порогу; светлее #FFE066 — 5,84,
     но в кадре читается бледно (`temp/_hero_price_shot.py`).
     Точку не трогаем: она 4 px и декоративная, порог AA к ней не применяется,
     а насыщенный красный в ней — деталь референса. */
  --hs-price:#FFD24A;
  height:var(--hs-h);
  min-height:0;
  display:block;              /* база .hero — flex с центрированием по центру */
  background:#050505;
  border-bottom:0;
}
/* Базовая ::before — красное пятно поверх фона. У сцены фон сам красный
   градиент, второе свечение только мутит середину. */
.hero--stage::before{display:none}
.hero--stage .hero__art{opacity:1}
.hero--stage .hero__art svg{opacity:1}
/* Верхняя затемняющая накладка. Не «украшение»: под заголовком фон в самой
   яркой точке градиента (#ed0007), и белый текст даёт там 4,4:1 — ниже порога
   AA для мелкого текста. Накладка гасит верх и поднимает контраст, а середина
   и низ остаются яркими, как в присланном коде. */
.hero--stage::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(5,5,5,.42) 0%,rgba(5,5,5,.18) 26%,rgba(5,5,5,0) 50%);
}

.hero__stage{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  height:100%;min-height:0;
  padding:calc(var(--hdr) + clamp(14px,1.8vw,28px)) 0 clamp(20px,2.4vw,36px);
}
/* Переход сцены в следующую секцию. Сцена кончается на #050505 (у краёв —
   вовсе (3,3,3)), а следующая секция — на --bg #0A0B10: замер по строкам на
   стыке давал перепад до +13 в синем канале, и он читался ступенькой.
   Гасим низ сцены в --bg, а не в «похожий чёрный»: тогда нижняя строка сцены
   равна первой строке секции побайтово, и шва нет ни на одной ширине.
   Живёт на .hero__stage, а не на .hero--stage::after, потому что ::after стоит
   под содержимым (z-index:1 против z-index:2) — отражение машины осталось бы
   не погашенным и упёрлось в стык. z-index:3 кладёт градиент поверх всего в
   сцене. Кривая с несколькими ступенями, а не линейная: линейная даёт заметную
   границу там, где градиент начинается. */
.hero__stage::after{
  content:'';position:absolute;left:0;right:0;bottom:0;z-index:3;
  height:clamp(80px,15%,150px);pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(10,11,16,0) 0%,rgba(10,11,16,.30) 42%,
    rgba(10,11,16,.74) 74%,#0A0B10 100%);
}

/* ── текстовая шапка сцены ── */
.hero__copy{max-width:none;text-align:center}
/* Надзаголовок в базе красный (#FF4252) — на красном фоне это 3,04:1, ниже
   порога AA для 12px. Белый даёт 7,6:1. */
.hero--stage .eyebrow{justify-content:center;color:rgba(255,255,255,.92)}
.hero--stage .eyebrow::before{background:#fff}
.hero--stage h1{margin-bottom:12px;text-shadow:0 2px 26px rgba(0,0,0,.45)}
/* `h1 em` красится в --red. На красном фоне это невидимый текст, а не
   акцент: подчёркивание смысла переезжает на начертание и тень. */
.hero--stage h1 em{color:#fff}
.hero--stage .hero__lead{
  max-width:780px;margin:0 auto 22px;
  color:#fff;text-shadow:0 1px 16px rgba(0,0,0,.5);
}
.hero--stage .hero__btns{justify-content:center}

/* ── сцена: курсы | машина | подборка ── */
.hero__deck{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:clamp(18px,3vw,58px);
  /* Остаток высоты после заголовка — машине. min-height не даёт сцене
     схлопнуться в ноль на низком окне. */
  flex:1 1 auto;min-height:170px;
  margin-top:clamp(8px,1.4vw,20px);
}
/* .wrap ограничивает ширину 1400 px. Сцене это тесно: машина плюс две
   колонки — подборка уезжала бы от края к центру. Расширяем до вьюпорта. */
.hero--stage .hero__deck{max-width:none;padding:0 clamp(18px,3.4vw,70px)}

/* Боковые колонки (курсы, подборка) подняты на 300 px в полосу текстовой шапки
   — как в оригинале, по просьбе заказчика. Чтобы на ширинах <=1280 (где подъём
   наезжал на текст: замер давал наложения до 78×20 px) не повторять эту
   проблему, курсы и подборку на <=1280 мы НЕ показываем вовсе — та же логика,
   что у мобильной версии. Выше 1281 восстанавливается исходный вид. */
.hrates,.hstock{transform:translateY(-300px)}

/* Почему подъём идёт в паре со сдвигом наружу.
   Внутренние края колонок стоят вплотную к машине (левая колонка кончается на
   «левая грань машины минус gap»), и это же место — внутри самой широкой
   строки лида («Прямые поставки…»). На 150 px блоки стояли НИЖЕ этой строки и
   потому не мешали; на 300 px они входят ровно в неё — на кадре «12,54 ₽»
   налезает на «Прямые поставки», а линия подборки режет «trade-in.».
   Замер по чернилам (Range.getClientRects, а не боксы — бокс h1 растянут на
   всю ширину, а глифы стоят по центру) на 160 размерах дал нужный сдвиг
   наружу: 41 px на 1261…1280 и до 76 px на 1536 при высоте окна 600 px. Чем
   шире окно, тем шире строка лида, а машина растёт медленнее — отсюда рост.
   Берём 5vw с потолком 76 px: на 1261 это 63 px при необходимых 41, на 1536 —
   ровно 76, дальше потолок (на 1920 нужно 64, на 2560 — тоже 64).
   Сдвиг действует на ВСЕХ ПК-ширинах, а не только на низких окнах: иначе при
   изменении высоты блоки прыгали бы вбок на 76 px.
   Проверено и обратное: сдвиг нигде не выносит блок за секцию. Худший запас до
   её края — 9 px на 1261×864 (подборка), и это запас БОКСА: чернила кончаются
   на полсотни пикселей раньше, а подложка (inset -70px) гасится градиентом и
   обрезается краем незаметно. */
@media (min-width:1261px){
  /* Курсы (слева) и подборка (справа) фланкируют центр героя СИММЕТРИЧНО:
     внутренние кромки блоков стоят на фиксированных 403 px от оси (кнопки
     героя центрированы, их ~233 px плюс зазор 170 px = 403). Так курсы встают
     ровно в 170 px от первой кнопки на любой ПК-ширине, обе колонки не
     наезжают на лид, и картина зеркальна слева/справа.
     Позиция от машины: её центр = центр героя, её ширина
     min(var(--hs-h)*.671,40vw), кромки = centre ± машW/2 ± gap. Сдвиг ниже
     доводит кромку до centre ± 395. */
  .hrates{
    transform:translate(calc(-403px + min(var(--hs-h)*.671,40vw)/2 + clamp(18px,3vw,58px)),-300px);
  }
  .hstock{
    transform:translate(calc(403px - min(var(--hs-h)*.671,40vw)/2 - clamp(18px,3vw,58px)),-300px);
  }
}
/* У china первичная кнопка героя c иконкой и текстом «Выбрать модель» —
   группа кнопок уже на ~42 px (около 21 px на сторону), чем на главной/used.
   Тот же якорь 403 давал бы зазор ~191 вместо 170. Для china якорь 382
   (= кнопка ~212 px + 170). У used кнопки по ширине совпадают с главной,
   там остаётся якорь 403. */
.hero--geely .hrates{
  transform:translate(calc(-382px + min(var(--hs-h)*.671,40vw)/2 + clamp(18px,3vw,58px)),-300px);
}
.hero--geely .hstock{
  transform:translate(calc(382px - min(var(--hs-h)*.671,40vw)/2 - clamp(18px,3vw,58px)),-300px);
}

/* На ширинах <=1280 курсы и подборка скрываются — решение заказчика: на
   экране 1280×720 они, поднятые на 300 px, наезжали на текст, поэтому на
   1280 и ниже прячем их так же, как на мобильной. Выше 1281 — исходный вид
   с подъёмом (см. выше). Правила планшета (<=1080) для них с этого момента
   мертвы, но оставлены: если блоки когда-нибудь вернут, они снова
   понадобятся. */
@media (max-width:1280px){
  .hrates,.hstock{display:none}
}

/* ── курсы валют (слева) ──
   Подложки под боковыми блоками НЕТ — по прямой просьбе заказчика («надо убрать
   тёмный блюр из блоков курсы валют и 12 авто в hero-блоке»). Сначала тёмное
   пятно-градиент гасило белую линию фона, которая шла под текстом, пока колонки
   стояли на 150 px ниже; затем его сменило матовое стекло (скругление, кромка,
   backdrop-filter), и стекло тоже убрано.
   Фон под блоками и без подложки тёмный: замер по кадру с погашенными блоками —
   максимум яркости внутри их боксов 46…50 на 1280, 1366, 1440 и 1920 при 255 в
   остальном фоне. Именно поэтому текст читается: контраст держит сам градиент
   сцены, а не заливка. Проверяется в `temp/_hero_probe.py` (контраст против
   фактического фона) и `temp/_hero_deck_check.py` (подложки быть не должно). */
/* Блок курсов намеренно тихий: это справочная строчка, а не второй герой.
   Уменьшены и кегль, и контраст, и ширина — он не должен спорить с машиной. */
.hrates{justify-self:end;width:100%;max-width:196px}
/* Подпись курсов — самый мелкий текст на странице (9 px). Прозрачность .5
   давала на ней 3,02:1: под верхней строкой блока фон светлее всего, потому
   что подложка там только набирает силу. .72 даёт 5,15:1 — и при этом
   подпись остаётся самой тихой строкой блока. */
.hrates__t{
  margin:0 0 8px;font-size:.58rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
}
.hrates__l{list-style:none;margin:0;padding:0;display:grid;gap:5px}
/* align-items:center, а не baseline: у SVG базовой линии нет, и по baseline
   иконка встала бы по нижнему краю строки, оторвавшись от названия.
   Название прижато влево через margin-right:auto, а курс с «изменением к
   вчера» (hrates__v + hrates__d) — справа, рядом: так дельта читается как
   часть значения, а не третий столбец. */
.hrates__l li{
  display:flex;align-items:center;gap:10px;
  padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.12);
}
.hrates__l li:last-child{border-bottom:0;padding-bottom:0}
.hrates__k{display:flex;align-items:center;gap:6px;margin-right:auto;font-size:.71rem;
  color:rgba(255,255,255,.6)}
.hrates__i{flex:none}
/* Цвет иконки = цвет линии этой же валюты на графике (см. .fxch__l ниже).
   Так список сам служит легендой, и отдельная легенда не нужна: в блоке
   196 px, и любая лишняя строка вывела бы его выше списка валют, а график
   заказчик ограничил именно его высотой. */
.hrates__i[data-fx-icon="EUR"]{color:#5BC8F5}
.hrates__i[data-fx-icon="USD"]{color:#4FD07E}
.hrates__i[data-fx-icon="CNY"]{color:#FFD24A}
.hrates__v{
  font-size:.8rem;font-weight:600;color:rgba(255,255,255,.88);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* «Изменение к вчера» — цветная подпись у курса: рост красным, падение
   зелёным (вслед за биржевой расцветкой, как просил заказчик), без изменения —
   нейтральным. Мелко и tabular-nums, чтобы «прыгающие» числа не дёргали
   ширину строки при каждом обновлении курса. */
.hrates__d{
  font-size:.6rem;font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap;letter-spacing:.02em;
}
.hrates__d[data-diff="up"]{color:#ff5b57}
.hrates__d[data-diff="down"]{color:#3ddc84}
.hrates__d[data-diff="flat"]{color:rgba(255,255,255,.45)}
/* ── график динамики курсов за неделю ──
   Высота 76 px при списке трёх валют 83 px — условие заказчика: график не
   выше блока валют. Подписи шкалы нарисованы ВНУТРИ той же высоты, в левом
   отступе: отдельная строка под графиком сделала бы блок выше. */
.hrates__chart{margin:10px 0 0;padding:0}
.hrates__chart svg{display:block;width:100%;height:auto}
.fxch__l{
  fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  /* Толщина не должна зависеть от того, во сколько раз растянулся viewBox:
     в узкой колонке линия иначе превратилась бы в волосок. */
  vector-effect:non-scaling-stroke;
}
.fxch__l[data-fx-line="EUR"]{stroke:#5BC8F5}
.fxch__l[data-fx-line="USD"]{stroke:#4FD07E}
.fxch__l[data-fx-line="CNY"]{stroke:#FFD24A}
/* Нулевая линия — «за неделю не изменилось». Тише данных: это ориентир. */
.fxch__zero{
  stroke:rgba(255,255,255,.28);stroke-width:1;stroke-dasharray:2 3;
  vector-effect:non-scaling-stroke;
}
.fxch__ax{
  font-size:7.5px;font-weight:600;fill:rgba(255,255,255,.62);
  font-variant-numeric:tabular-nums;
}
/* Ось X под графиком: засечки и точки — по публикациям ЦБ, даты — под ними.
   Ось и даты ТИШЕ данных: они отвечают на вопрос «когда», а не «сколько». */
.fxch__axis{stroke:rgba(255,255,255,.22);stroke-width:1;vector-effect:non-scaling-stroke}
.fxch__tick{stroke:rgba(255,255,255,.32);stroke-width:1;vector-effect:non-scaling-stroke}
.fxch__dot{fill:rgba(255,255,255,.55)}
.fxch__dt{
  font-size:6.6px;font-weight:600;fill:rgba(255,255,255,.5);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}

/* ── машина (центр) ──
   Машина садится НА дугу, а не за неё. Дуга под машиной проходит на 89 %
   высоты секции у её краёв и на 91,6 % в центре — посчитано по кривой
   Безье из fon2.html, а не подобрано на глаз. Низ машины держим на 84 %,
   то есть с запасом ~5 пунктов высоты. Проверяется пробой: она снимает
   кадр и ищет белую линию под машиной. */
.hero--stage .hero__car{
  position:relative;right:auto;bottom:auto;left:auto;opacity:1;
  /* Колонка задана явно, хотя при трёх блоках её выбирает и авто-раскладка.
     Как только курсы и подборку гасит медиазапрос (<=1260), первым элементом
     сетки становится машина и уезжает в первую колонку — на 1260 это сдвиг на
     312 px влево от центра. Правило планшета (<=1080) ниже перебивает его на
     grid-column:1 / -1 — там сцена в две колонки. */
  grid-column:2;
  justify-self:center;align-self:end;height:auto;
  margin-bottom:calc(var(--hs-h) * .12);
  display:flex;align-items:center;justify-content:center;
}
/* На невысоких ПК-окнах (высота <=800 px) машина, поднятая базовым
   margin-bottom .12, своей верхней кромкой наезжала на кнопки героя:
   замер по чернилам (temp/_hero_car_buttons.py) давал наложения до -59 px
   на 1536×720. Чтобы машина не резала кнопки, на этих окнах уменьшаем
   подъём: margin .04 вместо .12 — машина опускается ниже. (Здесь блоки
   курсов/подборки на <=1280 и так скрыты; правило работает для всех ПК,
   где машина одна в центре.) */
@media (min-width:1081px) and (max-height:800px){
  .hero--stage .hero__car{margin-bottom:calc(var(--hs-h) * .02)}
}
.hero--stage .hero__car img{
  display:block;
  /* Задаём ШИРИНУ, высота выходит из пропорции снимка (997×505).
     0.671 = 0.34 × 1.974: машина занимает 34 % высоты секции. Ограничение
     по vw нужно на узких окнах — там дуга под краями машины заметно ниже. */
  width:min(calc(var(--hs-h) * .671),40vw);
  height:auto;max-width:100%;max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 30px 26px rgba(0,0,0,.5));
}
/* Тень-подложка из базы не нужна: у снимка своя тень в альфе, а ниже стоит
   отражение — оно и прижимает машину к «стеклу». */
.hero--stage .hero__car::after{display:none}
/* Отражение. Маска живёт на НЕперевёрнутом контейнере, а переворот — на его
   ::before: маска применяется в локальных координатах элемента, и если
   повесить её на тот же элемент, что и scaleY(-1), она перевернётся вместе с
   ним и погасит отражение у самой машины, а не у её хвоста. */
.hero__refl{
  /* Поднимаем отражение вверх, чтобы оно соприкасалось с машиной: у самой
     картинки снизу ~8px прозрачного поля (bot_pad), плюс перевёрнутое
     отражение показывает низ машины только чуть ниже своего верха — суммарно
     ~24px «пустоты», которую убираем подъёмом. */
  position:absolute;left:0;right:0;top:calc(100% - 24px);height:42%;
  overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),rgba(0,0,0,0));
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),rgba(0,0,0,0));
}
.hero__refl::before{
  content:'';position:absolute;inset:0;
  /* center bottom: у отражения верхний край (примыкающий к машине) показывает
     НИЖНЮЮ часть машины, а scaleY(-1) её переворачивает — классическое
     отражение в «пол». */
  background:url(/img/hero-cx5.webp) center bottom/100% auto no-repeat;
  transform:scaleY(-1);opacity:.22;
}

/* ── подборка (справа) ──
   Точка и отрезок линии — псевдоэлементы САМОЙ строки. Отдельная неподвижная
   точка оторвалась бы от своей машины на первом же сдвиге, а общая линия
   потребовала бы держать её высоту в согласии с высотой строки вручную. */
.hstock{
  --hs-i:62px;                /* высота строки: от неё считаются кадр и сдвиг */
  --hs-dot:8px;
  justify-self:start;width:100%;max-width:268px;
}
.hstock__view{position:relative;height:calc(var(--hs-i) * 3);overflow:hidden}
.hstock__list{list-style:none;margin:0;padding:0}
.hstock__i{position:relative;height:var(--hs-i);padding-left:calc(var(--hs-dot) + 13px)}
.hstock__i::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:rgba(255,255,255,.3)}
.hstock__i::after{content:'';position:absolute;top:50%;
  left:calc(1px - var(--hs-dot) / 2);margin-top:calc(var(--hs-dot) / -2);
  width:var(--hs-dot);height:var(--hs-dot);border-radius:50%;background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.6)}
.hstock__a{
  display:flex;flex-direction:column;justify-content:center;gap:2px;height:100%;
  text-decoration:none;
}
.hstock__n,.hstock__s{
  /* Высота строки фиксирована (--hs-i) — от неё считается сдвиг. Двухстрочное
     название вылезло бы за свой бокс и налезло на следующую машину. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hstock__n{font-weight:700;font-size:.86rem;line-height:1.15;color:#fff}
/* Год и двигатель разделены КРАСНОЙ точкой — как в референсе. Отдельным
   элементом, а не символом в строке: точку надо красить независимо от
   текста спецификации. */
.hstock__s{font-size:.72rem;line-height:1.25;color:rgba(255,255,255,.72);
  display:flex;align-items:center;gap:.42em}
.hstock__d{flex:none;width:4px;height:4px;border-radius:50%;background:var(--hs-red)}
.hstock__p{font-size:.8rem;font-weight:700;line-height:1.2;color:var(--hs-price);
  font-variant-numeric:tabular-nums}
.hstock__a:hover .hstock__n{text-decoration:underline}

/* Планшет: сцена в три колонки уже не помещается — подборка и курсы уходят
   под машину, но остаются рядом друг с другом, как в референсе. Жёсткая
   высота 90vh здесь снимается: строк стало больше, и содержимое важнее.
   Подъём на 300 px тоже снимается — он был рассчитан на три колонки. На этих
   ширинах боковых блоков уже нет (их гасит <=1260), так что правила ниже —
   запас на случай, если их вернут. */
@media (max-width:1080px){
  .hero--stage{height:auto}
  .hero__stage{height:auto}
  .hrates,.hstock{transform:none}
  .hero__deck{grid-template-columns:1fr 1fr;gap:22px clamp(20px,4vw,48px);
    flex:none;min-height:0}
  .hero--stage .hero__car{grid-column:1 / -1;order:-1;height:auto;
    align-self:auto;margin-bottom:0}
  .hero--stage .hero__car img{width:min(74vw,560px);max-height:none}
  .hrates{justify-self:end}
  .hstock{justify-self:start}
}
/* Мобильная версия (760 px — та же граница, что у бургера и таб-бара).
   Курсы и подборка здесь не нужны вовсе: они дублируют содержимое страницы
   и съедают первый экран. Вместе с ними уходит и дуга — фон остаётся
   простым градиентом от красного к чёрному, как на ПК, но без линии. */
@media (max-width:760px){
  .hrates,.hstock{display:none}
  .hs-arc{display:none}
  .hero--stage{height:auto;min-height:var(--hs-h)}
  .hero__deck{grid-template-columns:1fr;gap:18px}
  /* Заголовок в 35 px занимал четыре строки — это 140 px высоты на ровном
     месте. */
  .hero--stage h1{font-size:clamp(1.65rem,7.4vw,2.2rem);margin-bottom:10px}
  .hero--stage .hero__lead{font-size:.92rem;margin-bottom:16px}
  /* Кнопки в строку: столбиком они съедали ещё 110 px. */
  .hero--stage .hero__btns{gap:8px}
  .hero--stage .hero__btns .btn{flex:1 1 0;min-width:0;padding:12px 10px;font-size:.84rem}
  .hero--stage .hero__car{margin-bottom:calc(var(--hs-h) * .06)}
  .hero--stage .hero__car img{width:70vw}
  .hero--stage::after{background:linear-gradient(to bottom,
    rgba(5,5,5,.5) 0%,rgba(5,5,5,.22) 30%,rgba(5,5,5,0) 58%)}
}
@media (prefers-reduced-motion:reduce){
  .hstock__list{transition:none!important}
}
/* ══ hero--stage: конец ══ */
/* ── лид героя: сужение на ПК-ширинах ────────────────────────────────────
   Первая строка лида («Подберём автомобиль по вашим параметрам…») уходила
   под блоки курсов (.hrates, слева) и подборки (.hstock, справа). Блоки
   подняты на 300 px по просьбе заказчика и встают ровно в полосу текстовой
   шапки; сдвиг наружу clamp(40px,5vw,76px) этого не снимает — его считали
   исходя из «нужных 41 px» на 1261, а по факту нужно 134.

   Замер по чернилам (temp/_hero_ink2.py, temp/_hero_lead_width.py): при
   780 px — 46 наложений на 44 размера окна, худшее 78×20 px на 1320×600;
   при высоте окна 600 px наложение есть на ВСЕХ ширинах до 1920. При 580 px
   — ноль наложений и запас 20 px, перенос остаётся в две строки. При 620 px
   запас выходит 0 px: строка встаёт впритык к графику курсов и развалится
   от смены шрифта. Отсюда 580.

   Правило стоит ПОСЛЕ маркера «hero--stage: конец», вне блока, который
   правит temp/_patch_frontend.py (тот трогает только hero--stack): при
   повторной правке фронтенда оно не затирается. */
@media (min-width:1261px){
  .hero--stage .hero__lead{max-width:580px}
}

/* ── Задача #77: машина обязана стоять НАД белой дугой ──────────────────────
   Дуга — часть фонового SVG, растянутого на секцию (preserveAspectRatio
   ="none"), поэтому её положение пропорционально ВЫСОТЕ секции, а не задано
   разметкой. Низ машины, наоборот, прижат к содержимому. На высоких окнах обе
   величины сходятся, на низких — расходятся, и машина уходит под линию.
   Замер (temp/_hero_arc_check.py, 15 размеров; белая линия — это paths 5-6,
   #ffffff и url(#hsWhiteLine), а не красное свечение шириной 35) до правки:
   худший запас −58,7 px на 1366×600, то есть низ машины на 102 % высоты
   секции при линии на 92 %.

   1) Строка сетки — во всю высоту .hero__deck, а не по содержимому.
   Высоту .hero__deck задаёт flex (flex:1 1 auto), и на низком окне он
   ужимается до min-height:170px. Строка же размером auto считалась по машине
   (её высота плюс нижний отступ 12 %) и перерастала колонку; машина, стоящая
   align-self:end, садилась по концу СТРОКИ — ниже низа секции. С rows:100 %
   низ машины прижат к низу .hero__deck, а тот растянут до низа секции, и низ
   выходит на 84 % высоты — ровно то, что обещает комментарий у .hero__car.
   Запас стал +47,2 px на худшем размере, сдвиг курсов и подборки 0,0 px.
   Правило только >1080: ниже сцена в две колонки и высота секции не задана
   (height:auto), там 100 % не от чего считать. */
@media (min-width:1081px){
  .hero--stage .hero__deck{grid-template-rows:100%}
}

/* 2) На 761…1080 дуга уходит. Здесь сцена в две колонки, высота секции — по
   содержимому, низ машины отстоит от низа секции на её padding-bottom (20 px),
   а белая линия проходит на 92 % высоты: машина под линией на 31 px на всех
   размерах диапазона. Поднять её можно только пустотой под низом (~100 px,
   запас +39 px), но это растягивает герой на 80 px ради декоративной линии —
   а на <=760 дуга и так снята. Поэтому снимаем её и здесь: решение заказчика
   от 30.09.2026. Красный градиент (hsRedAmbient, hsRedDepth) остаётся — он вне
   группы .hs-arc. */
@media (max-width:1080px){
  .hs-arc{display:none}
}

/* ── Фасетный сайдбар витрины «Автомобили с пробегом»: начало ── */
/* Склад «Честный прайс» — ~700 000 лотов, поэтому фильтр здесь не «кнопки
   марок сверху», как на витрине новых автомобилей, а секционный сайдбар,
   как у донора (честныйпрайс.рф/china/catalog). Фильтрация серверная: форма
   GET перезагружает страницу с новыми параметрами, состояние живёт в адресе.
   Блок стоит в КОНЦЕ файла сознательно: правила ниже по тексту перебивают
   равные по специфичности выше, а нам нужно перебить и .side{position:sticky}
   из мобильного медиазапроса, и .sbg>summary{justify-content:space-between}. */

/* Секций одиннадцать — сайдбар длиннее экрана, поэтому даём ему собственный
   скролл. Без этого position:sticky прижимал бы верх панели, а её низ
   (кнопка «Показать», цвет, КПП) оставался бы недостижимым: прокрутка идёт
   по документу, а панель стоит. Только от 641px: на телефоне сайдбар
   скрыт и раскрывается кнопкой, там ограничивать высоту нечем. */
@media (min-width:641px){
  .side--facets{max-height:calc(100dvh - var(--hdr) - 36px);overflow:auto;
    overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-3) transparent}
  .side--facets::-webkit-scrollbar{width:8px}
  .side--facets::-webkit-scrollbar-thumb{background:var(--line-3);border-radius:4px}
}

/* Заголовок секции: подпись и бейдж — одна группа, чтобы ::after-стрелка
   осталась прижатой вправо. В .sbg>summary стоит justify-content:space-between,
   и три отдельных элемента (текст, бейдж, стрелка) разъехались бы по всей
   ширине — бейдж встал бы посередине. */
.sbg__t{display:flex;align-items:center;gap:8px;min-width:0}
.sbg__n{flex:none;max-width:11ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.68rem;font-weight:700;color:var(--red-2);
  background:color-mix(in srgb,var(--red) 16%,transparent);
  border-radius:999px;padding:2px 8px;line-height:1.25}
.sbg.is-set>summary{color:var(--text)}
.sbg.is-set>summary .sbg__t{color:var(--text)}

/* Пара «от / до» для числовых фасетов (цена, пробег, мощность). */
.fpair{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.fpair label{display:block;min-width:0}
.fpair span{display:block;font-size:.66rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.fpair input{width:100%;min-height:42px;padding:9px 11px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--bg);color:var(--text);font:inherit;
  font-size:.83rem;font-variant-numeric:tabular-nums}
.fpair input::placeholder{color:var(--dim)}
.fpair input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(166,17,15,.2)}

/* Селект фасета и подсказка «сначала выберите марку». */
.fsel{width:100%;min-height:42px;padding:9px 11px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--bg);color:var(--text);font:inherit;
  font-size:.83rem;cursor:pointer}
.fsel:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(166,17,15,.2)}
.fsel:disabled{opacity:.5;cursor:not-allowed}
.fhint{margin:0;font-size:.78rem;color:var(--dim);line-height:1.5}

/* Пилюли года — как у донора: ряд «Все 2026 … 2021». */
.ypills{display:flex;flex-wrap:wrap;gap:6px}
.ypill{display:inline-flex;align-items:center;justify-content:center;min-height:38px;
  padding:0 13px;border:1px solid var(--line-2);border-radius:999px;background:transparent;
  color:var(--text-2);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;
  transition:border-color .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease)}
.ypill:hover{border-color:var(--line-3);color:var(--text)}
.ypill.is-on{background:var(--red);border-color:var(--red);color:#fff}
.ypill:focus-visible{outline:2px solid var(--red-2);outline-offset:2px}

/* Чипы применённых фильтров над сеткой: снимают фильтр одним кликом и
   показывают состояние, даже когда его секция свёрнута. */
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;
  border:1px solid var(--line-2);border-radius:999px;background:var(--bg-2);
  color:var(--text-2);font-size:.78rem;font-weight:600;white-space:nowrap}
.chip svg{width:11px;height:11px;flex:none;opacity:.55}
.chip:hover{border-color:var(--red);color:var(--text)}
.chip:hover svg{opacity:1;color:var(--red-2)}
.chips__x{font-size:.78rem;color:var(--red-2);text-decoration:underline;margin-left:2px}
.chips__x:hover{color:var(--text)}

/* Кнопка «Фильтры» — только на телефоне, где сайдбар скрыт до нажатия
   (правило .side{display:none} из медиазапроса 640px). */
.cat__fbtn{display:none}
@media (max-width:640px){
  .cat__fbtn{display:inline-flex;width:auto}
  .side--facets{max-height:none}
  .sbg__b{padding-bottom:14px}
}
/* ── Фасетный сайдбар: конец ── */