/* ==========================================================================
   Сигма · витрина — дизайн-система
   1 токены · 2 база · 3 типографика · 4 сетка · 5 компоненты · 6 шапка/подвал
   7 главная · 8 каталог · 9 карточка авто · 10 кредит · 11 сервис/контакты · 12 движение
   ========================================================================== */

/* ---------- шрифты (лежат рядом, без внешних CDN) ---------- */
@font-face{font-family:"Unbounded";font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/unbounded-cyr.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/unbounded-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/unbounded-latext.woff2) format("woff2");unicode-range:U+0100-017F,U+20BD}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/onest-cyr.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/onest-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/onest-latext.woff2) format("woff2");unicode-range:U+0100-017F,U+20BD}

/* ---------- 1. токены ---------- */
:root{
  color-scheme:light;
  /* поверхности и текст */
  --paper:#F3F2EE; --surface:#FFFFFF; --sunken:#E9E7E1;
  --ink:#1B1C27; --ink-2:#4A4D5B; --ink-3:#626573;
  --line:#DCD9D1; --line-2:#C6C2B8;
  /* акцент — глубокий синий #1F447B (выбор Влада 30.09.2026); пары «светлая тема / тёмная и ночные блоки», другие варианты — data-accent на <html> */
  --acc:#1F447B; --acc-hover:#183A6A; --acc-on:#FFFFFF; --acc-ink:#1F447B; --acc-soft:#E1E8F4;
  --accd:#3A66B8; --accd-hover:#4A76C8; --accd-on:#FFFFFF; --accd-ink:#8FB0F0; --accd-soft:#172845;
  --accent:var(--acc); --accent-hover:var(--acc-hover); --on-accent:var(--acc-on); --accent-ink:var(--acc-ink); --accent-soft:var(--acc-soft);
  /* смысловые */
  --ok:#1A7A43; --ok-soft:#DFF1E6; --warn:#8F5C00; --warn-soft:#FAEED2; --err:#B92819; --err-soft:#FBE3DF; --info:#2560A8; --info-soft:#E1ECF8;
  /* «ночные» блоки — тёмные в обеих темах */
  --night:#12131A; --night-2:#1C1E28; --night-3:#272A37; --on-night:#F1EFEA; --on-night-2:#A9AAB5; --night-line:#30323F;
  --shadow-1:0 1px 2px rgba(27,28,39,.06),0 2px 8px rgba(27,28,39,.05);
  --shadow-2:0 2px 4px rgba(27,28,39,.06),0 12px 32px rgba(27,28,39,.10);
  --shadow-3:0 8px 24px rgba(27,28,39,.12),0 32px 80px rgba(27,28,39,.18);
  --scrim:rgba(18,19,26,.56);
  --img-dim:1;

  /* типографика */
  --f-display:"Unbounded","Onest",system-ui,sans-serif;
  --f-text:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-display:clamp(1.75rem,1rem + 2.8vw,3.25rem);
  --fs-h1:clamp(1.75rem,1.2rem + 2.3vw,3rem);
  --fs-h2:clamp(1.5rem,1.18rem + 1.35vw,2.25rem);
  --fs-h3:clamp(1.125rem,1.04rem + .4vw,1.375rem);
  --fs-lead:clamp(1.0625rem,1rem + .3vw,1.25rem);
  --fs-body:1rem; --fs-sm:.875rem; --fs-xs:.8125rem; --fs-cap:.75rem;

  /* шаг 4px */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --gutter:clamp(16px,2vw,24px);
  --pad:clamp(16px,4vw,48px);
  --section:clamp(56px,8vw,112px);
  --wrap:1320px;

  /* «сигма-срез»: скругление по диагонали, как у букв в логотипе */
  --r-xl:32px 6px 32px 6px; --r-lg:22px 5px 22px 5px; --r-md:14px 4px 14px 4px; --r-sm:10px 3px 10px 3px;
  --r-f:10px; --r-pill:999px;

  --hdr:72px; --tabbar:0px;
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:.15s; --t:.25s; --t-slow:.5s;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#0E0F14; --surface:#181A22; --sunken:#20222D;
    --ink:#EDEBE6; --ink-2:#B9B8C0; --ink-3:#9091A0;
    --line:#2B2D39; --line-2:#3C3F4D;
    --accent:var(--accd); --accent-hover:var(--accd-hover); --on-accent:var(--accd-on); --accent-ink:var(--accd-ink); --accent-soft:var(--accd-soft);
    --ok:#4CC27E; --ok-soft:#12301F; --warn:#E0B04A; --warn-soft:#33280F; --err:#FF7A6B; --err-soft:#3A1613; --info:#7FB2F0; --info-soft:#14263D;
    --night:#08090C; --night-2:#14161D; --night-3:#1F212B; --night-line:#272935;
    --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 28px rgba(0,0,0,.5); --shadow-3:0 24px 80px rgba(0,0,0,.65);
    --scrim:rgba(0,0,0,.66); --img-dim:.92;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0E0F14; --surface:#181A22; --sunken:#20222D;
  --ink:#EDEBE6; --ink-2:#B9B8C0; --ink-3:#9091A0;
  --line:#2B2D39; --line-2:#3C3F4D;
  --accent:var(--accd); --accent-hover:var(--accd-hover); --on-accent:var(--accd-on); --accent-ink:var(--accd-ink); --accent-soft:var(--accd-soft);
  --ok:#4CC27E; --ok-soft:#12301F; --warn:#E0B04A; --warn-soft:#33280F; --err:#FF7A6B; --err-soft:#3A1613; --info:#7FB2F0; --info-soft:#14263D;
  --night:#08090C; --night-2:#14161D; --night-3:#1F212B; --night-line:#272935;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 28px rgba(0,0,0,.5); --shadow-3:0 24px 80px rgba(0,0,0,.65);
  --scrim:rgba(0,0,0,.66); --img-dim:.92;
}
/* внутри «ночного» блока все компоненты берут тёмные значения автоматически */
.night{
  --paper:var(--night); --surface:var(--night-2); --sunken:var(--night-3);
  --ink:var(--on-night); --ink-2:#C9C8CF; --ink-3:var(--on-night-2);
  --line:var(--night-line); --line-2:#44475A;
  --accent:var(--accd); --accent-hover:var(--accd-hover); --on-accent:var(--accd-on); --accent-ink:var(--accd-ink); --accent-soft:var(--accd-soft);
  --ok:#4CC27E; --ok-soft:#12301F; --err:#FF7A6B; --err-soft:#3A1613;
  background:var(--night); color:var(--ink); color-scheme:dark;
}
@media (max-width:959px){:root{--hdr:60px; --tabbar:calc(60px + env(safe-area-inset-bottom,0px))}}

/* варианты акцента (data-accent на <html>): светлая пара + тёмная пара */
:root[data-accent="orange"]{--acc:#F2501D; --acc-hover:#DF440F; --acc-on:#16110E; --acc-ink:#BC3507; --acc-soft:#FCE6DD; --accd:#FF6B3D; --accd-hover:#FF8258; --accd-on:#16110E; --accd-ink:#FF8E68; --accd-soft:#3A1E14}
:root[data-accent="bordo"]{--acc:#B62F46; --acc-hover:#A02638; --acc-on:#FFFFFF; --acc-ink:#A02638; --acc-soft:#F7E1E5; --accd:#E0596F; --accd-hover:#EA7387; --accd-on:#1B0A0E; --accd-ink:#F08A9A; --accd-soft:#3D1720}
:root[data-accent="red"]{--acc:#D8262A; --acc-hover:#C21F23; --acc-on:#FFFFFF; --acc-ink:#B81E22; --acc-soft:#FBE1E1; --accd:#FF5A5A; --accd-hover:#FF7373; --accd-on:#1F0A0A; --accd-ink:#FF8A8A; --accd-soft:#3E1414}
:root[data-accent="cobalt"]{--acc:#2D4FE0; --acc-hover:#2342C9; --acc-on:#FFFFFF; --acc-ink:#2342C9; --acc-soft:#E1E7FB; --accd:#6B8AFF; --accd-hover:#85A0FF; --accd-on:#0B1230; --accd-ink:#9DB2FF; --accd-soft:#1A2350}
:root[data-accent="lime"]{--acc:#C8F03C; --acc-hover:#B9E42B; --acc-on:#14160C; --acc-ink:#5B7300; --acc-soft:#EEF9CF; --accd:#D4FF4D; --accd-hover:#E0FF70; --accd-on:#14160C; --accd-ink:#CFF553; --accd-soft:#2A3312}
:root[data-accent="emerald"]{--acc:#107A4E; --acc-hover:#0D6A43; --acc-on:#FFFFFF; --acc-ink:#0D6A43; --acc-soft:#DDF2E8; --accd:#3FCF8E; --accd-hover:#5EDCA3; --accd-on:#06231A; --accd-ink:#6FE0AC; --accd-soft:#10301F}
:root[data-accent="indigo"]{--acc:#5B45D9; --acc-hover:#4C38C4; --acc-on:#FFFFFF; --acc-ink:#4C38C4; --acc-soft:#E8E4FA; --accd:#9A8BFF; --accd-hover:#ADA1FF; --accd-on:#120C33; --accd-ink:#B7ACFF; --accd-soft:#221B4A}
:root[data-accent="ink"]{--acc:#1B1C27; --acc-hover:#33354A; --acc-on:#FFFFFF; --acc-ink:#1B1C27; --acc-soft:#E4E3EA; --accd:#EDEBE6; --accd-hover:#FFFFFF; --accd-on:#12131A; --accd-ink:#EDEBE6; --accd-soft:#2B2D39}

/* ---------- 2. база ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 16px)}
body{margin:0; background:var(--paper); color:var(--ink); font:400 var(--fs-body)/1.55 var(--f-text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; padding-bottom:var(--tabbar); overflow-x:hidden}
main{flex:1 0 auto; padding-top:var(--hdr)}
body.is-home main{padding-top:0}
img,svg,video{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0; padding:0}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0; list-style:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
::selection{background:var(--accent); color:var(--on-accent)}
[hidden]{display:none!important}
.hide-m{}
@media (max-width:600px){.hide-m{display:none!important}}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:16px; top:-60px; z-index:200; background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:var(--r-f); transition:top var(--t-fast)}
.skip:focus{top:12px}

/* ---------- 3. типографика ---------- */
.display,.h1,.h2,.h3,h1,h2,h3{font-family:var(--f-display); font-weight:500; text-wrap:balance}
.display{font-size:var(--fs-display); line-height:1.06; letter-spacing:-.03em}
h1,.h1{font-size:var(--fs-h1); line-height:1.08; letter-spacing:-.03em}
h2,.h2{font-size:var(--fs-h2); line-height:1.12; letter-spacing:-.028em}
h3,.h3{font-size:var(--fs-h3); line-height:1.2; letter-spacing:-.02em}
.lead{font-size:var(--fs-lead); line-height:1.5; color:var(--ink-2); max-width:62ch; text-wrap:pretty}
.muted{color:var(--ink-2)} .dim{color:var(--ink-3)}
.sm{font-size:var(--fs-sm)} .xs{font-size:var(--fs-xs)}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font:600 var(--fs-cap)/1.2 var(--f-text); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.eyebrow::before{content:""; width:18px; height:8px; border-radius:6px 1px 6px 1px; background:var(--accent)}
.num{font-family:var(--f-display); font-weight:500; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.link{color:var(--accent-ink); font-weight:500; text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--accent-ink) 35%,transparent); text-underline-offset:3px; transition:text-decoration-color var(--t-fast)}
.link:hover{text-decoration-color:currentColor}
.arrow-link{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--ink); min-height:44px}
.arrow-link svg{width:18px; height:18px; transition:transform var(--t) var(--ease)}
.arrow-link:hover svg{transform:translateX(4px)}
.arrow-link:hover{color:var(--accent-ink)}
.prose p+p{margin-top:1em} .prose{max-width:68ch; color:var(--ink-2)}
.prose h3{margin:1.6em 0 .5em; color:var(--ink)}
.prose ul{list-style:disc; margin:.7em 0 1em; padding-left:1.4em; display:grid; gap:.4em}
.prose ul+p{margin-top:1em}

/* ---------- 4. сетка ---------- */
.wrap{width:100%; max-width:calc(var(--wrap) + var(--pad)*2); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:var(--section)}
.section--tight{padding-block:calc(var(--section)*.6)}
.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5); margin-bottom:clamp(24px,3.5vw,48px); flex-wrap:wrap}
.section__head .eyebrow{margin-bottom:var(--s4)}
.section__head p{margin-top:var(--s3)}
.grid{display:grid; gap:var(--gutter)}
.stack>*+*{margin-top:var(--s4)}
.stack-lg>*+*{margin-top:var(--s6)}
.row{display:flex; gap:var(--s4); align-items:center; flex-wrap:wrap}
.page-head{padding-block:clamp(28px,4vw,56px) clamp(20px,3vw,40px)}
.page-head h1{margin-top:var(--s4)}
.page-head .lead{margin-top:var(--s4)}

/* ---------- 5. компоненты ---------- */
.ico{width:20px; height:20px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

/* логотип: PNG как маска — перекрашивается под тему */
.logo{display:inline-flex; align-items:center; min-height:44px}
.logo__mark{display:block; width:118px; aspect-ratio:720/202; background:currentColor; -webkit-mask:url(../img/logo.png) center/contain no-repeat; mask:url(../img/logo.png) center/contain no-repeat}

/* кнопки */
.btn{--bg:var(--ink); --fg:var(--paper); display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px; border-radius:var(--r-md); background:var(--bg); color:var(--fg); font:600 var(--fs-body)/1 var(--f-text); letter-spacing:-.005em; white-space:nowrap; transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast); position:relative; border:1.5px solid transparent; text-align:center}
.btn:active{transform:translateY(1px) scale(.99)}
.btn .ico{width:18px; height:18px}
.btn--primary{--bg:var(--accent); --fg:var(--on-accent)}
.btn--primary:hover{--bg:var(--accent-hover); box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 35%,transparent)}
.btn--dark:hover{--bg:color-mix(in srgb,var(--ink) 86%,var(--paper))}
.btn--ghost{--bg:transparent; --fg:var(--ink); border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--ink); --bg:color-mix(in srgb,var(--ink) 5%,transparent)}
.btn--quiet{--bg:var(--sunken); --fg:var(--ink)}
.btn--quiet:hover{--bg:color-mix(in srgb,var(--sunken) 80%,var(--ink) 8%)}
.btn--sm{min-height:44px; padding:0 18px; font-size:var(--fs-sm); border-radius:var(--r-sm)}
.btn--lg{min-height:60px; padding:0 32px; font-size:1.0625rem}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5; pointer-events:none}
.btn.is-loading{color:transparent!important; pointer-events:none}
.btn.is-loading::after{content:""; position:absolute; width:20px; height:20px; border-radius:50%; border:2.5px solid var(--on-accent); border-right-color:transparent; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.icon-btn{position:relative; display:inline-grid; place-items:center; width:44px; height:44px; border-radius:var(--r-sm); color:var(--ink); transition:background var(--t-fast),color var(--t-fast)}
.icon-btn:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.icon-btn .ico{width:22px; height:22px}
.count-dot{position:absolute; top:4px; right:2px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--accent); color:var(--on-accent); font:700 11px/18px var(--f-text); text-align:center}

/* бейджи и чипы */
.badge{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:8px 2px 8px 2px; font:600 var(--fs-cap)/1 var(--f-text); letter-spacing:.02em; white-space:nowrap; background:var(--sunken); color:var(--ink-2)}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.badge--ok{background:var(--ok-soft); color:var(--ok)}
.badge--way{background:var(--warn-soft); color:var(--warn)}
.badge--used{background:var(--info-soft); color:var(--info)}
.badge--hot{background:var(--accent); color:var(--on-accent)}
.badge--hot::before,.badge--plain::before{display:none}
.chip{display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px; border-radius:var(--r-f); border:1.5px solid var(--line); background:var(--surface); font:500 var(--fs-sm)/1 var(--f-text); color:var(--ink); transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast); cursor:pointer; user-select:none; white-space:nowrap}
.chip:hover{border-color:var(--ink-3)}
.chip small{color:var(--ink-3); font-size:var(--fs-cap); font-weight:500}
.chip[aria-pressed="true"],.chip.is-on,input:checked+.chip{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.chip[aria-pressed="true"] small,.chip.is-on small,input:checked+.chip small{color:color-mix(in srgb,var(--paper) 65%,transparent)}
input:focus-visible+.chip{outline:2px solid var(--accent); outline-offset:3px}
.chip.is-empty{opacity:.45}
.chip--x{background:var(--sunken); border-color:transparent; padding-right:8px; min-height:36px}
.chip--x .ico{width:16px; height:16px; opacity:.6}
.chip--x:hover{border-color:var(--line-2)} .chip--x:hover .ico{opacity:1}

/* сегментированный переключатель */
.seg{display:flex; padding:4px; background:var(--sunken); border-radius:12px; gap:2px}
.seg label{flex:1; position:relative}
.seg input{position:absolute; opacity:0; inset:0; cursor:pointer}
.seg span{display:flex; flex-wrap:wrap; row-gap:0; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:0 10px; border-radius:9px; font:500 var(--fs-sm)/1 var(--f-text); color:var(--ink-2); transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast); white-space:nowrap}
.seg small{font-size:var(--fs-cap); color:var(--ink-3)}
.filters .seg label{flex:1 1 auto; min-width:0}   /* в сайдбаре каталога «Все 507 · В наличии 245 · В пути 262» не влезают в ряд — счётчики уходят на вторую строку */
.seg input:checked+span{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1); font-weight:600}
.seg input:focus-visible+span{outline:2px solid var(--accent); outline-offset:1px}

/* поля форм: подпись сверху, ошибка под полем */
.form{display:grid; gap:var(--s4)}
.form__row{display:grid; gap:var(--s4); grid-template-columns:1fr 1fr}
@media (max-width:520px){.form__row{grid-template-columns:1fr}}
.field{display:grid; gap:6px; min-width:0}
.field>label,.field>.label{font:500 var(--fs-sm)/1.3 var(--f-text); color:var(--ink-2); display:flex; justify-content:space-between; gap:8px}
.field .opt{font-weight:400; color:var(--ink-3); font-size:var(--fs-xs)}
.input,.select,.textarea{width:100%; min-height:52px; padding:0 16px; border-radius:var(--r-f); border:1.5px solid var(--line-2); background:var(--surface); color:var(--ink); font-size:1rem; transition:border-color var(--t-fast),box-shadow var(--t-fast); appearance:none; -webkit-appearance:none}
.textarea{padding:14px 16px; min-height:104px; resize:vertical; line-height:1.45}
.select{padding-right:44px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23777986' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; text-overflow:ellipsis}
.input::placeholder,.textarea::placeholder{color:var(--ink-3); opacity:.75}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ink-3)}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.select:disabled{opacity:.55; cursor:not-allowed}
.field.is-invalid .input,.field.is-invalid .select,.field.is-invalid .textarea{border-color:var(--err); background:color-mix(in srgb,var(--err-soft) 45%,var(--surface))}
.field__err{display:flex; gap:6px; align-items:flex-start; font-size:var(--fs-xs); line-height:1.35; color:var(--err); font-weight:500}
.field__err::before{content:"!"; flex:none; width:16px; height:16px; border-radius:50%; background:var(--err); color:var(--surface); font:700 11px/16px var(--f-text); text-align:center}
.field__hint{font-size:var(--fs-xs); color:var(--ink-3); line-height:1.35}
.check{display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:start; font-size:var(--fs-xs); line-height:1.45; color:var(--ink-2); cursor:pointer; padding-block:4px}
.check input{appearance:none; -webkit-appearance:none; width:24px; height:24px; margin:0; border-radius:7px; border:1.5px solid var(--line-2); background:var(--surface); display:grid; place-items:center; transition:background var(--t-fast),border-color var(--t-fast); cursor:pointer}
.check input::after{content:""; width:12px; height:7px; border-left:2.2px solid var(--on-accent); border-bottom:2.2px solid var(--on-accent); transform:rotate(-45deg) translate(1px,-1px) scale(0); transition:transform var(--t-fast) var(--ease)}
.check input:checked{background:var(--accent); border-color:var(--accent)}
.check input:checked::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.check.is-invalid input{border-color:var(--err)}
.check.is-invalid{color:var(--err)}
.form__note{font-size:var(--fs-xs); color:var(--ink-3); line-height:1.45}
.form-done{display:grid; gap:var(--s3); justify-items:start; padding:var(--s3) 0}
.form-done__ico{width:56px; height:56px; border-radius:var(--r-md); background:var(--ok-soft); color:var(--ok); display:grid; place-items:center}
.form-done__ico .ico{width:28px; height:28px; stroke-width:2.2}
.form-done h3{font-size:var(--fs-h3)}

/* чекбокс-строка фасета */
.opt-row{display:grid; grid-template-columns:22px 1fr auto; gap:12px; align-items:center; min-height:40px; cursor:pointer; font-size:var(--fs-sm); border-radius:8px}
.opt-row input{appearance:none; -webkit-appearance:none; width:22px; height:22px; margin:0; border-radius:6px; border:1.5px solid var(--line-2); background:var(--surface); display:grid; place-items:center; cursor:pointer; transition:background var(--t-fast),border-color var(--t-fast)}
.opt-row input::after{content:""; width:11px; height:6px; border-left:2px solid var(--paper); border-bottom:2px solid var(--paper); transform:rotate(-45deg) translate(1px,-1px) scale(0); transition:transform var(--t-fast)}
.opt-row input:checked{background:var(--ink); border-color:var(--ink)}
.opt-row input:checked::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.opt-row:hover input{border-color:var(--ink-3)}
.opt-row small{color:var(--ink-3); font-size:var(--fs-cap); font-variant-numeric:tabular-nums}
.opt-row.is-empty{opacity:.45}

/* карточка-поверхность */
.card{background:var(--surface); border-radius:var(--r-lg); border:1px solid var(--line); padding:clamp(20px,2.4vw,32px)}
.card--flat{border-color:transparent; background:var(--sunken)}

/* карточка автомобиля */
.car{position:relative; display:flex; flex-direction:column; background:var(--surface); border-radius:var(--r-lg); border:1px solid var(--line); overflow:hidden; transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t); isolation:isolate}
.car:hover{transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:transparent}
.car__media{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--sunken)}
.car__media img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); filter:brightness(var(--img-dim))}
.car:hover .car__media img{transform:scale(1.045)}
.car__badges{position:absolute; left:12px; top:12px; display:flex; gap:6px; flex-wrap:wrap; z-index:2}
.car__badges .badge{backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.car__shots{position:absolute; right:12px; bottom:12px; z-index:2; display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 8px; border-radius:6px; background:rgba(18,19,26,.62); color:#fff; font:500 var(--fs-cap)/1 var(--f-text); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.car__shots .ico{width:13px; height:13px}
.fav{position:absolute; right:8px; top:8px; z-index:3; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; color:#fff; transition:transform var(--t-fast)}
.fav::before{content:""; position:absolute; inset:5px; border-radius:50%; background:rgba(18,19,26,.42); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:background var(--t-fast)}
.fav .ico{position:relative; width:19px; height:19px}
.fav:hover::before{background:rgba(18,19,26,.7)}
.fav:active{transform:scale(.9)}
.fav[aria-pressed="true"] .ico{fill:var(--accent); stroke:var(--accent)}
.fav[aria-pressed="true"]::before{background:#fff}
.car__body{display:flex; flex-direction:column; gap:10px; padding:18px 20px 20px; flex:1}
.car__brand{font:600 var(--fs-cap)/1 var(--f-text); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.car__title{font:500 1.125rem/1.2 var(--f-display); letter-spacing:-.02em}
.car__title a::after{content:""; position:absolute; inset:0; z-index:1}
.car__spec{font-size:var(--fs-sm); color:var(--ink-2); line-height:1.45}
.car__price{margin-top:auto; padding-top:10px; display:flex; align-items:flex-end; justify-content:space-between; gap:6px 12px; flex-wrap:wrap}
.car__price .num{font-size:1.3125rem; line-height:1.15; white-space:nowrap; display:block}
.car__old{display:block; font-size:var(--fs-xs); color:var(--ink-3); text-decoration:line-through; margin-bottom:2px}
.car__gain{font-size:var(--fs-xs); font-weight:600; color:var(--accent-ink); white-space:nowrap}
.car__foot{display:flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--ink-3); padding-top:12px; border-top:1px solid var(--line)}
.car__foot .ico{width:14px; height:14px}
.cars{display:grid; gap:var(--gutter); grid-template-columns:repeat(auto-fill,minmax(min(100%,272px),1fr))}

/* свотчи цвета */
.sw{--c:#ccc; width:18px; height:18px; border-radius:50%; background:var(--c); border:1px solid color-mix(in srgb,var(--ink) 22%,transparent); flex:none}

/* модальные окна — нативный <dialog>; на телефоне выезжают снизу */
.modal{border:0; padding:0; background:var(--surface); color:var(--ink); border-radius:var(--r-xl); width:min(480px,calc(100vw - 32px)); max-height:min(92dvh,900px); box-shadow:var(--shadow-3); overflow:auto; overscroll-behavior:contain}
.modal::backdrop{background:var(--scrim); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)}
.modal[open]{animation:pop var(--t) var(--ease)}
@keyframes pop{from{opacity:0; transform:translateY(16px) scale(.98)}}
.modal__in{padding:clamp(24px,4vw,36px); display:grid; gap:var(--s5)}
.modal__head{display:grid; gap:8px; padding-right:40px}
.modal__head h2{font-size:1.5rem}
.modal__close{position:absolute; top:12px; right:12px}
.modal__car{display:grid; grid-template-columns:88px 1fr; gap:14px; align-items:center; padding:10px; background:var(--sunken); border-radius:var(--r-md)}
.modal__car img{width:88px; aspect-ratio:4/3; object-fit:cover; border-radius:10px 3px 10px 3px}
.modal__car b{display:block; font:500 .9375rem/1.25 var(--f-display); letter-spacing:-.02em}
.modal__car span{font-size:var(--fs-sm); color:var(--ink-2)}
@media (max-width:600px){
  .modal{width:100vw; max-width:100vw; margin:auto 0 0; border-radius:24px 24px 0 0; max-height:94dvh}
  .modal[open]{animation:sheet var(--t) var(--ease)}
  .modal__in{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}
@keyframes sheet{from{transform:translateY(100%)}}

/* тосты */
.toasts{position:fixed; left:50%; bottom:calc(var(--tabbar) + 20px); transform:translateX(-50%); z-index:300; display:grid; gap:8px; pointer-events:none; width:max-content; max-width:calc(100vw - 32px)}
.toast{background:var(--ink); color:var(--paper); padding:12px 18px; border-radius:var(--r-md); font-size:var(--fs-sm); font-weight:500; box-shadow:var(--shadow-2); animation:pop var(--t) var(--ease); display:flex; gap:10px; align-items:center}
.toast .ico{width:18px; height:18px}

/* аккордеон */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:20px 0; cursor:pointer; list-style:none; font:500 1.0625rem/1.3 var(--f-text); min-height:44px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:""; flex:none; width:12px; height:12px; border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3); transform:rotate(45deg) translate(-3px,-3px); transition:transform var(--t) var(--ease)}
.acc details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.acc summary:hover{color:var(--accent-ink)}
.acc .acc__body{padding:0 0 22px; color:var(--ink-2); max-width:72ch}

/* хлебные крошки */
.crumbs{display:flex; flex-wrap:wrap; gap:6px 8px; font-size:var(--fs-sm); color:var(--ink-3); align-items:center}
.crumbs a{min-height:32px; display:inline-flex; align-items:center}
.crumbs a:hover{color:var(--ink)}
.crumbs li{display:flex; align-items:center; gap:8px}
.crumbs li+li::before{content:"/"; opacity:.5}
.crumbs [aria-current]{color:var(--ink-2)}

/* ---------- 6. шапка, нижнее меню, подвал ---------- */
.hdr{position:fixed; inset:0 0 auto; z-index:100; height:var(--hdr); color:var(--ink); transition:background var(--t),box-shadow var(--t),color var(--t),transform var(--t) var(--ease)}
.hdr::before{content:""; position:absolute; inset:0; background:color-mix(in srgb,var(--paper) 86%,transparent); backdrop-filter:saturate(1.4) blur(16px); -webkit-backdrop-filter:saturate(1.4) blur(16px); border-bottom:1px solid var(--line); transition:opacity var(--t); z-index:-1}
.hdr__in{height:100%; display:flex; align-items:center; gap:clamp(16px,2.5vw,40px)}
.nav{display:flex; gap:2px; margin-right:auto}
.nav a{position:relative; display:inline-flex; align-items:center; min-height:44px; padding:0 14px; white-space:nowrap; border-radius:var(--r-sm); font:500 .9375rem/1 var(--f-text); color:var(--ink-2); transition:color var(--t-fast),background var(--t-fast)}
.nav a:hover{color:var(--ink); background:color-mix(in srgb,var(--ink) 7%,transparent)}
.nav a[aria-current="page"]{color:var(--ink); font-weight:600}
.nav a[aria-current="page"]::after{content:""; position:absolute; left:14px; right:14px; bottom:4px; height:3px; border-radius:3px 1px 3px 1px; background:var(--accent)}
.hdr__tools{display:flex; align-items:center; gap:4px}
.hdr__phone{display:grid; text-align:right; margin-right:12px; font:500 1rem/1.15 var(--f-display); letter-spacing:-.02em; white-space:nowrap}
.hdr__phone small{font:500 var(--fs-cap)/1.3 var(--f-text); color:var(--ink-3); letter-spacing:0}
.hdr__phone:hover{color:var(--accent-ink)}
.hdr__call{margin-left:8px}
.hdr__phone-ico{display:none}
/* на главной шапка прозрачная поверх «ночного» первого экрана, после прокрутки — обычная */
body.is-home .hdr:not(.is-solid){color:var(--on-night); --ink:var(--on-night); --ink-2:#D5D4DA; --ink-3:var(--on-night-2); --accent-ink:#FF8E68}
body.is-home .hdr:not(.is-solid)::before{opacity:0}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .i-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .i-moon{display:none}
}
@media (max-width:1280px){.hdr__phone small{display:none} .nav a{padding:0 10px; font-size:.875rem} .hdr__in{gap:16px}}
@media (max-width:1150px){.hdr__call{display:none}}
@media (max-width:959px){
  .nav{display:none}
  .logo{margin-right:auto}
  .logo__mark{width:100px}
  /* телефон: на телефоне справа от логотипа номер, под ним режим работы; значки убраны */
  .hdr__phone{display:grid; margin-right:0; font-size:.9375rem}
  .hdr__phone small{display:block; order:2; margin-top:2px; font-size:11px}
  .hdr__tools .icon-btn,.hdr__tools .asst-entry--hdr{display:none}
}

.tabbar{display:none}
@media (max-width:959px){
  .tabbar{position:fixed; inset:auto 0 0; z-index:100; display:grid; grid-template-columns:repeat(5,1fr); height:var(--tabbar); padding-bottom:env(safe-area-inset-bottom,0px); background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:saturate(1.4) blur(16px); -webkit-backdrop-filter:saturate(1.4) blur(16px); border-top:1px solid var(--line)}
  .tabbar a{display:grid; place-content:center; justify-items:center; gap:4px; font:500 11px/1 var(--f-text); color:var(--ink-3); position:relative; min-width:0}
  .tabbar .ico{width:23px; height:23px}
  .tabbar a[aria-current="page"]{color:var(--ink); font-weight:600}
  .tabbar a[aria-current="page"]::before{content:""; position:absolute; top:0; left:50%; width:28px; height:3px; margin-left:-14px; border-radius:0 0 3px 3px; background:var(--accent)}
}

.ftr{margin-top:auto}
.ftr__top{padding-block:clamp(40px,6vw,80px); display:grid; gap:var(--s7) var(--gutter); grid-template-columns:1.3fr repeat(3,1fr)}
.ftr__brand p{margin-top:var(--s4); color:var(--ink-3); font-size:var(--fs-sm); max-width:34ch}
.ftr .logo__mark{width:150px}
.ftr h4{font:600 var(--fs-cap)/1.2 var(--f-text); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-bottom:var(--s4)}
.ftr li a{display:inline-flex; min-height:36px; align-items:center; color:var(--ink-2); font-size:.9375rem; transition:color var(--t-fast)}
.ftr li a:hover{color:var(--ink)}
.ftr__phone{font:500 1.375rem/1.2 var(--f-display); letter-spacing:-.025em; display:inline-block; margin-bottom:6px}
.ftr__phone:hover{color:var(--accent-ink)}
.ftr__bottom{border-top:1px solid var(--line); padding-block:var(--s5); display:flex; gap:var(--s3) var(--s6); flex-wrap:wrap; justify-content:space-between; font-size:var(--fs-xs); color:var(--ink-3); line-height:1.5}
.ftr__bottom p{max-width:78ch}
.ftr__bottom a:hover{color:var(--ink)}
@media (max-width:900px){.ftr__top{grid-template-columns:1fr 1fr}.ftr__brand{grid-column:1/-1}}
@media (max-width:480px){.ftr__top{grid-template-columns:1fr}}

/* ---------- 7. главная ---------- */
.hero{position:relative; min-height:min(800px,calc(100svh - 56px)); display:flex; flex-direction:column; justify-content:flex-end; padding-top:calc(var(--hdr) + 24px); isolation:isolate}
.hero__bg{position:absolute; inset:0 0 0 22%; z-index:-2; overflow:hidden}
.hero__bg img{width:100%; height:100%; object-fit:cover; object-position:100% 62%; animation:heroIn 1.6s var(--ease) both}
@keyframes heroIn{from{transform:scale(1.07); opacity:.4}}
.hero::before{content:""; position:absolute; inset:0; z-index:-1; background:
  linear-gradient(90deg,var(--night) 0%,var(--night) 22%,rgba(14,15,20,.86) 34%,rgba(14,15,20,.3) 60%,rgba(14,15,20,.08) 100%),
  linear-gradient(0deg,rgba(14,15,20,.9) 0%,rgba(14,15,20,0) 38%),
  linear-gradient(180deg,rgba(14,15,20,.78) 0%,rgba(14,15,20,.35) 12%,rgba(14,15,20,0) 26%)}
.hero__body{padding-bottom:clamp(28px,4vw,52px); display:grid; gap:clamp(18px,2.2vw,28px); max-width:860px}
.hero .eyebrow{color:var(--on-night-2)}
.hero .display em{font-style:normal; color:var(--accent)}
.hero .lead{color:#D9D8DE; max-width:50ch}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:4px}
@media (max-width:600px){.hero__cta .btn{flex:1 1 auto}}
.hero__shot{position:absolute; right:var(--pad); top:calc(var(--hdr) + 20px); display:inline-flex; align-items:center; gap:10px; padding:8px 14px 8px 10px; border-radius:var(--r-sm); background:rgba(14,15,20,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14); font-size:var(--fs-xs); color:#E6E5EA; transition:background var(--t-fast),border-color var(--t-fast)}
.hero__shot:hover{background:rgba(14,15,20,.8); border-color:rgba(255,255,255,.3)}
.hero__shot b{color:#fff; font-weight:600}
.hero__shot .dot{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent)}
/* быстрый подбор — «наезжает» на следующую секцию */
.finder{position:relative; z-index:2; margin-bottom:-44px; background:var(--surface); color:var(--ink); border-radius:var(--r-lg); box-shadow:var(--shadow-3); padding:clamp(16px,1.8vw,22px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; gap:12px; align-items:end;
  --paper:#F3F2EE; --surface:#FFFFFF; --sunken:#E9E7E1; --ink:#1B1C27; --ink-2:#4A4D5B; --ink-3:#626573; --line:#DCD9D1; --line-2:#C6C2B8; --accent:var(--acc); --accent-hover:var(--acc-hover); --on-accent:var(--acc-on); --accent-ink:var(--acc-ink); --accent-soft:var(--acc-soft); color-scheme:light}
.finder .btn{min-width:230px}
:root[data-theme="dark"] .finder{--paper:#0E0F14; --surface:#20222D; --sunken:#2B2E3B; --ink:#EDEBE6; --ink-2:#B9B8C0; --ink-3:#9091A0; --line:#383B4A; --line-2:#4A4D5E; --accent:var(--accd); --accent-hover:var(--accd-hover); --on-accent:var(--accd-on); --accent-ink:var(--accd-ink); --accent-soft:var(--accd-soft); color-scheme:dark; border:1px solid #383B4A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .finder{--paper:#0E0F14; --surface:#20222D; --sunken:#2B2E3B; --ink:#EDEBE6; --ink-2:#B9B8C0; --ink-3:#9091A0; --line:#383B4A; --line-2:#4A4D5E; --accent:var(--accd); --accent-hover:var(--accd-hover); --on-accent:var(--accd-on); --accent-ink:var(--accd-ink); --accent-soft:var(--accd-soft); color-scheme:dark; border:1px solid #383B4A}}
.finder__quick{grid-column:1/-1; display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding-top:4px; font-size:var(--fs-sm); color:var(--ink-3)}
.finder__quick a{display:inline-flex; align-items:center; min-height:36px; padding:0 12px; border-radius:var(--r-f); background:var(--sunken); color:var(--ink); font-weight:500; transition:background var(--t-fast)}
.finder__quick a:hover{background:var(--line)}
.after-hero,.hero + .section,.hero + [data-block-hidden] + .section{padding-top:calc(44px + clamp(40px,6vw,72px))}
@media (max-width:959px){
  /* на телефоне шапка на главной сразу с фоном (не прозрачная поверх фото), первый экран начинается под ней */
  body.is-home main{padding-top:var(--hdr)}
  body.is-home .hdr:not(.is-solid){color:var(--ink); --ink:inherit; --ink-2:inherit; --ink-3:inherit; --accent-ink:inherit}
  body.is-home .hdr:not(.is-solid)::before{opacity:1}
  .hero{min-height:0; padding-top:0; justify-content:flex-start}
  .hero__bg{position:relative; inset:auto; aspect-ratio:4/3; max-height:56svh; width:100%}
  .hero__bg img{object-position:60% 60%}
  .hero__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,15,20,.55) 0%,rgba(14,15,20,0) 30%,rgba(14,15,20,0) 60%,var(--night) 100%)}
  .hero::before{display:none}
  .hero__body{padding-top:4px; margin-top:-28px; position:relative}
  .hero__shot{top:auto; right:auto; left:var(--pad); position:absolute; top:12px}
  .finder{grid-template-columns:1fr 1fr; margin-bottom:-36px}
  .finder .field:nth-child(3){grid-column:1/-1}
  .finder .btn{grid-column:1/-1; min-width:0}
  .after-hero,.hero + .section,.hero + [data-block-hidden] + .section{padding-top:calc(36px + 40px)}
}
@media (max-width:420px){.finder{grid-template-columns:1fr}.finder .field:nth-child(3){grid-column:auto}.finder__quick span{display:none}}

/* марки — лента логотипов под главным экраном */
.brands{display:flex; flex-wrap:wrap; align-items:center; gap:14px 0; padding-block:clamp(18px,2.6vw,28px); border-block:1px solid var(--line)}
.brands__cap{flex:0 0 100%; display:flex; gap:10px; align-items:baseline; font:600 var(--fs-cap)/1.3 var(--f-text); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.brands__cap b{color:var(--ink); font-weight:600}
.brands__list{flex:1 1 400px; min-width:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px clamp(16px,2vw,28px)}
.brands__list a,.brands__svc a{flex:0 0 auto; display:grid; place-items:center; min-height:52px}
.brands__logo{display:block; width:auto; height:auto; max-width:96px; max-height:28px; opacity:.82; transition:opacity var(--t),transform var(--t) var(--ease)}
.brands__logo--chery{max-height:40px}
.brands__logo--umo{max-height:22px}
.brands__logo--tall{max-height:44px; max-width:56px}
.brands a:hover .brands__logo{opacity:1; transform:translateY(-2px)}
.brands__svc{flex:0 0 auto; display:flex; align-items:center; gap:clamp(12px,1.6vw,24px); margin-left:clamp(16px,2vw,28px); padding-left:clamp(16px,2vw,28px); border-left:1px solid var(--line)}
:root[data-theme="dark"] .brands__logo{filter:invert(1) brightness(1.1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brands__logo{filter:invert(1) brightness(1.1)}}
@media (max-width:1200px){
  .brands__list{flex:0 0 100%; justify-content:flex-start; gap:8px clamp(16px,2.4vw,28px)}
  .brands__logo{max-width:84px; max-height:26px} .brands__logo--chery{max-height:36px} .brands__logo--umo{max-height:20px} .brands__logo--tall{max-height:44px}
  .brands__svc{order:3; width:100%; border-left:0; padding-left:0; margin-left:0; margin-top:4px; padding-top:16px; border-top:1px solid var(--line); gap:clamp(20px,3.6vw,40px)}
}
@media (max-width:600px){.brands__cap{flex-wrap:wrap; gap:4px 10px}.brands__list{gap:4px 22px}.brands__list a{min-height:48px}}

/* акции и новости — лента постов, каждый пост отдельный блок (скрывается и двигается в админке) */
.section--post{padding-block:0}
.post{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(20px,3.2vw,56px); align-items:center; padding-block:clamp(22px,3vw,40px); border-top:1px solid var(--line)}
.post__img{display:block; aspect-ratio:3/2; border-radius:var(--r-lg); overflow:hidden; background:var(--sunken)}
.post__img img{width:100%; height:100%; object-fit:cover; filter:brightness(var(--img-dim)); transition:transform var(--t-slow) var(--ease)}
.post:hover .post__img img{transform:scale(1.03)}
.post__meta{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:var(--s3); font-size:var(--fs-sm); color:var(--ink-3)}
.post__meta time{font-weight:600; color:var(--ink-2)}
.post h2{font-size:clamp(1.25rem,1.05rem + .9vw,1.875rem); line-height:1.15; letter-spacing:-.02em}
.post p{margin-top:var(--s3); color:var(--ink-2); max-width:62ch}
.post .arrow-link{margin-top:var(--s4)}
.section--post + .section{padding-top:clamp(32px,5vw,64px); border-top:1px solid var(--line)}
@media (max-width:760px){.post{grid-template-columns:1fr; gap:16px; padding-block:22px}.post__img{aspect-ratio:16/9}}

/* страница акции / новости */
.article{max-width:880px}
.article__head h1{margin-top:var(--s4)}
.article__img{aspect-ratio:2/1; border-radius:var(--r-xl); overflow:hidden; background:var(--sunken); margin-bottom:clamp(24px,3vw,40px)}
.article__img img{width:100%; height:100%; object-fit:cover; filter:brightness(var(--img-dim))}
.article__body{max-width:68ch; font-size:var(--fs-lead); line-height:1.6; color:var(--ink-2)}
.article__body p+p{margin-top:var(--s4)}
.article__body h2{font-size:var(--fs-h3); margin-top:var(--s6); color:var(--ink)} .article__body h2+p{margin-top:var(--s3)} .article__body h3{font-size:var(--fs-body); font-weight:600; margin-top:var(--s5); color:var(--ink)}
.article__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:clamp(24px,3vw,40px)}
.more{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gutter)}
.more__item{display:grid; gap:12px; padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); transition:transform var(--t) var(--ease),box-shadow var(--t)}
.more__item:hover{transform:translateY(-3px); box-shadow:var(--shadow-2)}
.more__img{display:block; aspect-ratio:16/9; border-radius:var(--r-md); overflow:hidden; background:var(--sunken)}
.more__img img{width:100%; height:100%; object-fit:cover}
.more__body{display:grid; gap:4px} .more__body small{color:var(--ink-3); font-size:var(--fs-xs)} .more__body b{font:500 1rem/1.25 var(--f-display); letter-spacing:-.01em}
@media (max-width:760px){.more{grid-template-columns:1fr}.more__item{grid-template-columns:120px 1fr; align-items:center}.article__img{aspect-ratio:16/10; border-radius:var(--r-lg)}}
.post h2 a:hover{color:var(--accent-ink)}
/* страница модели и блок моделей */
.models{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gutter)}
@media (max-width:1100px){.models{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.models{grid-template-columns:repeat(2,minmax(0,1fr))}.model__name{font-size:1.25rem}}
.tbl-trims{width:100%; border-collapse:collapse; font-size:var(--fs-sm)}
.tbl-trims th,.tbl-trims td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle}
.tbl-trims th{font:600 var(--fs-cap)/1.2 var(--f-text); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.tbl-trims tr:last-child td{border-bottom:0}
.tbl-trims .r{text-align:right; white-space:nowrap}
.tbl-trims .arrow-link{font-size:var(--fs-sm)}
.hint-row{margin-top:var(--s4); display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; font-size:var(--fs-sm); color:var(--ink-3)}
.page-head .keyfacts{margin-top:clamp(24px,3vw,36px)}
@media (max-width:760px){.keyfacts{grid-template-columns:1fr 1fr}.tbl-trims th,.tbl-trims td{padding:10px 12px}}
/* каталог: пока список не отрисован, держим место — футер не прыгает */
#list:empty{min-height:min(80vh,960px)}

/* лента моделей */
.rail{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px,1fr); gap:var(--gutter); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin-inline:calc(var(--pad)*-1); padding-inline:var(--pad); scroll-padding-inline:var(--pad); padding-block:6px 10px}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.rail-nav{display:flex; gap:8px}
.rail-nav .icon-btn{border:1.5px solid var(--line-2); border-radius:var(--r-sm)}
.rail-nav .icon-btn:disabled{opacity:.35; pointer-events:none}
.model{display:grid; grid-template-columns:minmax(0,1fr); gap:6px; align-content:start; min-width:0} /* minmax(0,1fr): длинное слово в названии (Countryman) не растягивает карточку шире колонки */
.model__img{position:relative; display:block; aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden; background:var(--sunken); margin-bottom:10px}
.model__img img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); filter:brightness(var(--img-dim))}
.model:hover .model__img img{transform:scale(1.06)}
.model__brand{font:600 var(--fs-cap)/1 var(--f-text); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.model__name{font:500 1.5rem/1.05 var(--f-display); letter-spacing:-.03em; transition:color var(--t-fast); overflow-wrap:anywhere}
.model:hover .model__name{color:var(--accent-ink)}
.model__meta{font-size:var(--fs-sm); color:var(--ink-2)}
.model__n{position:absolute; left:12px; bottom:12px; height:28px; padding:0 10px; display:inline-flex; align-items:center; border-radius:8px 2px 8px 2px; background:rgba(18,19,26,.66); color:#fff; font:600 var(--fs-cap)/1 var(--f-text); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}

/* вкладки предложений */
.tabs{display:flex; gap:6px; flex-wrap:wrap}
.tabs button{min-height:44px; padding:0 16px; border-radius:var(--r-f); font:500 var(--fs-sm)/1 var(--f-text); color:var(--ink-2); border:1.5px solid var(--line); background:transparent; transition:all var(--t-fast)}
.tabs button:hover{border-color:var(--ink-3); color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}

/* бенто «услуги» */
.bento{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter)}
.tile{position:relative; border-radius:var(--r-xl); padding:clamp(24px,3vw,40px); display:flex; flex-direction:column; gap:var(--s4); overflow:hidden; min-height:340px; isolation:isolate}
.tile h3{font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem); line-height:1.1}
.tile p{max-width:40ch}
.tile .arrow-link{margin-top:auto}
.tile--credit{grid-column:span 7}
.tile--trade{grid-column:span 5; background:var(--accent); color:var(--on-accent); --ink:var(--on-accent); --ink-2:color-mix(in srgb,var(--on-accent) 84%,var(--accent)); --ink-3:color-mix(in srgb,var(--on-accent) 70%,var(--accent)); --accent-ink:var(--on-accent)}
.tile--trade .big{font:500 clamp(1.75rem,1rem + 1.9vw,2.75rem)/1 var(--f-display); letter-spacing:-.04em; margin-top:auto; overflow-wrap:anywhere}
.tile--trade .big small{display:block; font:600 var(--fs-cap)/1.2 var(--f-text); letter-spacing:.09em; text-transform:uppercase; margin-bottom:10px}
.tile--service{grid-column:span 12; background:var(--surface); border:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; padding:0; min-height:0}
.tile--service .tile__txt{padding:clamp(24px,3vw,40px); display:flex; flex-direction:column; gap:var(--s4)}
.tile--service .tile__img{position:relative; min-height:280px}
.tile--service .tile__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(var(--img-dim))}
.tile ul.ticks{display:grid; gap:8px; margin-top:4px}
.ticks li{display:flex; gap:10px; align-items:flex-start; color:var(--ink-2); font-size:.9375rem}
.ticks .ico{width:18px; height:18px; margin-top:3px; color:var(--accent-ink); stroke-width:2.2}
.mini-calc{display:grid; gap:var(--s4); margin-top:auto; padding-top:var(--s4)}
.mini-calc__row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:var(--fs-sm); color:var(--ink-3)}
.mini-calc__row b{font:500 1.0625rem/1 var(--f-display); letter-spacing:-.02em; color:var(--ink)}
.mini-calc__out{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:var(--s4); border-top:1px solid var(--line)}
.mini-calc__out .num{font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem); line-height:1}
.mini-calc__out small{display:block; color:var(--ink-3); font-size:var(--fs-xs); margin-bottom:8px}
@media (max-width:900px){.tile--credit,.tile--trade{grid-column:span 12}.tile{min-height:0}.tile--service{grid-template-columns:1fr}.tile--service .tile__img{min-height:220px; order:-1}}

/* ползунок */
.range{--p:50%; width:100%; height:28px; margin:0; background:transparent; appearance:none; -webkit-appearance:none; cursor:pointer}
.range::-webkit-slider-runnable-track{height:6px; border-radius:3px; background:linear-gradient(90deg,var(--accent) var(--p),var(--line-2) var(--p))}
.range::-moz-range-track{height:6px; border-radius:3px; background:var(--line-2)}
.range::-moz-range-progress{height:6px; border-radius:3px; background:var(--accent)}
.range::-webkit-slider-thumb{-webkit-appearance:none; width:24px; height:24px; margin-top:-9px; border-radius:9px 3px 9px 3px; background:var(--surface); border:2px solid var(--accent); box-shadow:var(--shadow-1); transition:transform var(--t-fast)}
.range::-moz-range-thumb{width:20px; height:20px; border-radius:9px 3px 9px 3px; background:var(--surface); border:2px solid var(--accent)}
.range:active::-webkit-slider-thumb{transform:scale(1.12)}
.range:focus-visible{outline:none}
.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent)}

/* факты */
.facts{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line)}
.fact{padding:clamp(20px,3vw,40px) clamp(12px,2vw,28px) 0 0; display:grid; gap:10px; align-content:start}
.fact+.fact{padding-left:clamp(12px,2vw,28px); border-left:1px solid var(--line)}
.fact .num{font-size:clamp(2rem,1.2rem + 3.4vw,4rem); line-height:1}
.fact p{color:var(--ink-2); font-size:.9375rem; max-width:24ch}
@media (max-width:760px){.facts{grid-template-columns:1fr 1fr}.fact{padding-bottom:20px}.fact:nth-child(3){padding-left:0; border-left:0}.fact:nth-child(n+3){border-top:1px solid var(--line)}}
.split{display:grid; grid-template-columns:5fr 7fr; gap:clamp(24px,5vw,80px); align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* дилерские центры */
.places{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--gutter); align-items:stretch}
.places__list{display:grid; gap:12px; align-content:start}
.place{display:grid; grid-template-columns:auto 1fr auto; gap:4px 16px; padding:18px 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); align-items:center; transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.place:hover{border-color:var(--ink-3)}
.place__n{grid-row:span 2; width:40px; height:40px; border-radius:10px 3px 10px 3px; background:var(--ink); color:var(--paper); display:grid; place-items:center; font:500 1rem/1 var(--f-display)}
.place b{font:500 1.0625rem/1.25 var(--f-display); letter-spacing:-.02em}
.place>span:not(.place__n){grid-column:2; font-size:var(--fs-sm); color:var(--ink-2)}
.place .place__n{grid-column:1; grid-row:1/3}
.place .icon-btn{grid-row:1/3; grid-column:3}
.map{position:relative; border-radius:var(--r-xl); overflow:hidden; background:var(--sunken); min-height:420px; border:1px solid var(--line)}
.map>div,.map iframe,.map ymaps{width:100%!important; height:100%!important; min-height:inherit}
.map .leaflet-container{width:100%; height:100%; min-height:inherit; background:var(--sunken); font:inherit}
.map .leaflet-tile{filter:saturate(.55) contrast(.92) brightness(1.04)}
.map .leaflet-control-attribution{font-size:10px; background:rgba(255,255,255,.7); color:var(--ink-3)}
.map .leaflet-control-attribution a{color:var(--ink-2)}
.map .leaflet-bar{border:1px solid var(--line); box-shadow:0 2px 8px rgba(0,0,0,.1)}
.map .leaflet-bar a{background:var(--surface); color:var(--ink); border-bottom-color:var(--line)}
.pin{width:36px; height:44px; position:relative}
.pin__b{position:absolute; left:0; top:0; width:36px; height:36px; background:var(--accent); border-radius:50% 50% 50% 0; transform:rotate(-45deg); box-shadow:0 4px 12px rgba(0,0,0,.25); border:2px solid #fff}
.pin__n{position:absolute; left:0; top:0; width:36px; height:36px; display:grid; place-items:center; font-weight:700; font-size:15px; color:#fff}
.pin--svc .pin__b{background:#2F7D4F}
.map .leaflet-popup-content-wrapper{border-radius:var(--r-md); font:inherit; color:var(--ink); background:var(--surface); box-shadow:0 10px 30px rgba(0,0,0,.18)}
.map .leaflet-popup-tip{background:var(--surface)}
.map .leaflet-popup-content{margin:12px 14px; font-size:var(--fs-sm); line-height:1.4}
.map .leaflet-popup-content b{display:block; font-size:15px; margin-bottom:2px}
.map .leaflet-popup-content .m{color:var(--ink-3); display:block; margin-bottom:8px}
.map .leaflet-popup-content a.r{color:var(--accent); font-weight:600; text-decoration:none}
.map .leaflet-popup-content a.r:after{content:" →"}
.map .leaflet-popup-close-button{color:var(--ink-3)}
:root[data-theme="dark"] .map .leaflet-tile{filter:invert(1) hue-rotate(180deg) saturate(.5) brightness(.85) contrast(.9)}
:root[data-theme="dark"] .map .leaflet-control-attribution{background:rgba(24,26,34,.8)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .map .leaflet-tile{filter:invert(1) hue-rotate(180deg) saturate(.5) brightness(.85) contrast(.9)}
  :root:not([data-theme="light"]) .map .leaflet-control-attribution{background:rgba(24,26,34,.8)}
}
.map__ph{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:12px; color:var(--ink-3); font-size:var(--fs-sm); text-align:center; padding:24px}
@media (max-width:900px){.places{grid-template-columns:1fr}.map{min-height:340px}}

/* полоса с заявкой */
.cta{border-radius:var(--r-xl); padding:clamp(28px,5vw,72px); display:grid; grid-template-columns:1fr minmax(0,440px); gap:clamp(24px,5vw,80px); align-items:center; position:relative; overflow:hidden; isolation:isolate}
.cta::before{content:""; position:absolute; z-index:-1; right:-8%; top:-40%; width:60%; aspect-ratio:1; border-radius:42% 8% 42% 8%; background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 32%,transparent),transparent); filter:blur(20px)}
.cta .form{background:var(--surface); padding:clamp(20px,2.4vw,28px); border-radius:var(--r-lg); border:1px solid var(--line)}
@media (max-width:900px){.cta{grid-template-columns:1fr}}

/* ---------- 8. каталог ---------- */
.catalog{display:grid; grid-template-columns:300px minmax(0,1fr); gap:clamp(24px,3vw,40px); align-items:start; padding-bottom:var(--section)}
.filters{position:sticky; top:calc(var(--hdr) + 16px); max-height:calc(100dvh - var(--hdr) - 32px); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:8px 20px 20px}
.filters__head{display:none}
.fgroup{border-bottom:1px solid var(--line); padding:4px 0 16px}
.fgroup:last-of-type{border-bottom:0}
.fgroup>summary{display:flex; align-items:center; justify-content:space-between; min-height:48px; cursor:pointer; list-style:none; font:600 .9375rem/1.2 var(--f-text)}
.fgroup>summary::-webkit-details-marker{display:none}
.fgroup>summary::after{content:""; width:9px; height:9px; border-right:1.8px solid var(--ink-3); border-bottom:1.8px solid var(--ink-3); transform:rotate(45deg) translate(-2px,-2px); transition:transform var(--t)}
.fgroup[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.fgroup>summary i{font-style:normal; margin-left:8px; margin-right:auto; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--accent); color:var(--on-accent); font:700 11px/20px var(--f-text); text-align:center}
.fgroup__chips{display:flex; flex-wrap:wrap; gap:8px}
.fgroup__chips label{position:relative}
.fgroup__chips input{position:absolute; opacity:0; inset:0; cursor:pointer}
.price-io{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:6px}
.price-io .input{min-height:46px; padding:0 12px; font-size:.9375rem}
.dual{position:relative; height:32px; margin:6px 2px 0}
.dual__track{position:absolute; left:0; right:0; top:13px; height:6px; border-radius:3px; background:var(--line-2)}
.dual__fill{position:absolute; top:13px; height:6px; border-radius:3px; background:var(--accent)}
.dual input{position:absolute; inset:0; width:100%; height:32px; margin:0; background:none; pointer-events:none; appearance:none; -webkit-appearance:none}
.dual input::-webkit-slider-runnable-track{background:none; height:32px}
.dual input::-moz-range-track{background:none}
.dual input::-webkit-slider-thumb{-webkit-appearance:none; pointer-events:auto; width:24px; height:24px; margin-top:4px; border-radius:9px 3px 9px 3px; background:var(--surface); border:2px solid var(--accent); box-shadow:var(--shadow-1); cursor:grab}
.dual input::-moz-range-thumb{pointer-events:auto; width:20px; height:20px; border-radius:9px 3px 9px 3px; background:var(--surface); border:2px solid var(--accent); cursor:grab}
.dual input:focus-visible{outline:none}
.dual input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent)}
.filters__foot{display:none}
.filters__foot .btn{padding-inline:14px; overflow:hidden; text-overflow:ellipsis}
/* каталог: табы состояния и кнопки-меню фильтров на ПК (шторка .filters остаётся для телефона) */
.ctabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:16px; overflow:auto; scrollbar-width:none}
.ctabs button{position:relative; display:inline-flex; align-items:center; gap:8px; padding:14px 18px; font:600 .9375rem/1 var(--f-text); color:var(--ink-3); white-space:nowrap; border-radius:8px 8px 0 0; transition:color var(--t-fast),background var(--t-fast)}
.ctabs button:hover{color:var(--ink); background:var(--sunken)}
.ctabs button small{font:500 var(--fs-cap)/1 var(--f-text); color:var(--ink-3); padding:3px 7px; border-radius:999px; background:var(--sunken)}
.ctabs button[aria-selected="true"]{color:var(--ink)}
.ctabs button[aria-selected="true"]::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2.5px; background:var(--accent); border-radius:2px 2px 0 0}
.ctabs button[aria-selected="true"] small{background:var(--ink); color:var(--paper)}
.fbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px}
.fdd{position:relative}
.fdd>button{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px 0 16px; border-radius:var(--r-f); border:1.5px solid var(--line); background:var(--surface); font:500 var(--fs-sm)/1 var(--f-text); color:var(--ink); white-space:nowrap; transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast)}
.fdd>button:hover{border-color:var(--ink-3)}
.fdd>button::after{content:""; width:7px; height:7px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; opacity:.6; transform:rotate(45deg) translate(-1px,-2px); transition:transform var(--t-fast)}
.fdd.is-open>button{border-color:var(--ink)} .fdd.is-open>button::after{transform:rotate(-135deg) translate(-2px,-1px)}
.fdd>button.is-on{border-color:var(--ink); background:var(--ink); color:var(--paper)}
.fdd>button b{font-weight:600}
.fdd__pop{display:none; position:absolute; left:0; top:calc(100% + 8px); z-index:40; min-width:280px; max-width:min(560px,calc(100vw - 48px)); max-height:min(70vh,640px); overflow:auto; overscroll-behavior:contain; padding:8px 16px 14px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:0 14px 40px rgba(0,0,0,.14)}
.fdd.is-open .fdd__pop{display:block}
.fdd--wide .fdd__pop{min-width:520px}
.fdd--right .fdd__pop{left:auto; right:0}
.fdd__pop .fgroup__chips{padding-top:6px}
.fdd__pop .opt-list{display:grid; gap:2px; grid-template-columns:1fr 1fr; column-gap:16px}
.fdd__pop h4,.fsub h4{font:600 var(--fs-cap)/1 var(--f-text); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:14px 0 6px}
.fdd__pop>h4:first-child,.fsub:first-child h4{margin-top:8px}
.fdd__foot{display:flex; gap:8px; justify-content:space-between; position:sticky; bottom:-14px; margin:12px -16px -14px; padding:12px 16px 14px; background:var(--surface); border-top:1px solid var(--line)}
.fsub{margin-bottom:4px}
#ff .fsub h4{margin:12px 0 6px}
@media (min-width:1024px){.filters{display:none} .catalog{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1023px){.fbar{display:none} .ctabs{margin-inline:calc(var(--pad)*-1); padding-inline:var(--pad)}}
@media (max-width:600px){.ctabs{gap:0} .ctabs button{padding:12px 10px; font-size:.875rem; flex:1 1 auto; justify-content:center}}

.sw-chip{display:inline-flex; align-items:center; gap:8px}

.results__bar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:16px}
.search{position:relative; flex:1 1 280px; min-width:0}
.search .ico{position:absolute; left:16px; top:50%; margin-top:-10px; color:var(--ink-3); pointer-events:none}
.search .input{padding-left:46px; padding-right:44px}
.search__clear{position:absolute; right:4px; top:4px}
.results__bar .select{width:auto; min-width:220px; flex:0 0 auto}
.results__meta{display:flex; gap:8px 12px; align-items:center; flex-wrap:wrap; margin-bottom:20px; min-height:36px}
.results__count{font:500 1.0625rem/1.2 var(--f-display); letter-spacing:-.02em; margin-right:8px}
.results__count small{font:400 var(--fs-sm)/1 var(--f-text); color:var(--ink-3); letter-spacing:0; margin-left:6px}
.results__reset{font-size:var(--fs-sm); font-weight:600; color:var(--accent-ink); min-height:36px; padding:0 6px}
.results__reset:hover{text-decoration:underline; text-underline-offset:3px}
.filter-btn{display:none}
.more{display:grid; justify-items:center; gap:14px; margin-top:clamp(28px,4vw,48px)}
.more__bar{width:min(280px,80%); height:4px; border-radius:2px; background:var(--line); overflow:hidden}
.more__bar i{display:block; height:100%; background:var(--ink); border-radius:2px; transition:width var(--t-slow) var(--ease)}
.empty{grid-column:1/-1; display:grid; justify-items:center; text-align:center; gap:var(--s4); padding:clamp(40px,7vw,96px) var(--s5); background:var(--surface); border:1px dashed var(--line-2); border-radius:var(--r-lg)}
.empty__ico{width:72px; height:72px; border-radius:var(--r-md); background:var(--sunken); display:grid; place-items:center; color:var(--ink-3)}
.empty__ico .ico{width:32px; height:32px}
.empty p{max-width:46ch; color:var(--ink-2)}
.empty .row{justify-content:center}

@media (max-width:1023px){
  .catalog{grid-template-columns:1fr}
  .filter-btn{display:inline-flex}
  .results__bar .select{flex:1 1 0; min-width:0}
  .results__bar .search{flex-basis:100%}
  .filters{position:fixed; inset:0; z-index:150; top:0; max-height:none; border-radius:0; border:0; padding:0 var(--pad) 0; transform:translateY(100%); visibility:hidden; transition:transform var(--t) var(--ease),visibility 0s var(--t)}
  .filters.is-open{transform:none; visibility:visible; transition:transform var(--t) var(--ease)}
  .filters__head{display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:2; background:var(--surface); padding-block:10px; margin-inline:calc(var(--pad)*-1); padding-inline:var(--pad); border-bottom:1px solid var(--line)}
  .filters__head h2{font-size:1.25rem}
  .filters__foot{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; position:sticky; bottom:0; z-index:2; background:var(--surface); margin-inline:calc(var(--pad)*-1); padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line)}
  body.is-locked{overflow:hidden}
}

/* ---------- 9. карточка автомобиля ---------- */
.vdp{display:grid; grid-template-columns:minmax(0,7fr) minmax(340px,4.2fr); grid-template-areas:"gal buy" "rest buy"; gap:0 clamp(24px,3vw,48px); align-items:start}
.vdp__gal{grid-area:gal} .vdp__rest{grid-area:rest} .vdp .buy{grid-area:buy}
.vdp__head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px 24px; flex-wrap:wrap; padding-block:20px 24px}
.vdp__head h1{font-size:clamp(1.625rem,1.2rem + 1.9vw,2.625rem)}
.vdp__sub{display:flex; gap:8px 14px; flex-wrap:wrap; align-items:center; margin-top:10px; font-size:var(--fs-sm); color:var(--ink-2)}
.vdp__sub .sep{width:3px; height:3px; border-radius:50%; background:var(--ink-3)}
.vdp__acts{display:flex; gap:8px}
.vdp__acts .icon-btn{border:1.5px solid var(--line-2)}
.vdp__acts .icon-btn[aria-pressed="true"]{color:var(--accent); border-color:var(--accent)}
.vdp__acts .icon-btn[aria-pressed="true"] .ico{fill:currentColor}

.gal{display:grid; gap:10px}
.gal__main{position:relative; aspect-ratio:4/3; border-radius:var(--r-xl); overflow:hidden; background:var(--night-2); cursor:zoom-in}
.gal__main img{width:100%; height:100%; object-fit:cover; filter:brightness(var(--img-dim))}
.gal__main img.is-swap{animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:.35}}
.gal__nav{position:absolute; top:50%; margin-top:-24px; width:48px; height:48px; border-radius:var(--r-sm); background:rgba(18,19,26,.5); color:#fff; display:grid; place-items:center; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:background var(--t-fast),opacity var(--t-fast); z-index:2}
.gal__nav:hover{background:rgba(18,19,26,.8)}
.gal__nav--prev{left:14px} .gal__nav--next{right:14px}
.gal__count{position:absolute; left:14px; bottom:14px; z-index:2; height:30px; padding:0 12px; border-radius:8px 2px 8px 2px; background:rgba(18,19,26,.6); color:#fff; display:inline-flex; align-items:center; gap:6px; font:500 var(--fs-xs)/1 var(--f-text); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.gal__zoom{position:absolute; right:14px; bottom:14px; z-index:2; width:40px; height:40px; border-radius:10px 3px 10px 3px; background:rgba(18,19,26,.6); color:#fff; display:grid; place-items:center; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.gal__badges{position:absolute; left:14px; top:14px; z-index:2; display:flex; gap:6px}
.gal__thumbs{display:grid; grid-auto-flow:column; grid-auto-columns:clamp(72px,9vw,104px); gap:8px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; padding:2px}
.gal__thumbs::-webkit-scrollbar{display:none}
.gal__thumbs button{aspect-ratio:4/3; border-radius:10px 3px 10px 3px; overflow:hidden; opacity:.62; transition:opacity var(--t-fast),outline-color var(--t-fast); outline:2px solid transparent; outline-offset:0; scroll-snap-align:start; background:var(--sunken)}
.gal__thumbs button:hover{opacity:1}
.gal__thumbs button[aria-current="true"]{opacity:1; outline-color:var(--accent)}
.gal__thumbs img{width:100%; height:100%; object-fit:cover}

.lb{border:0; padding:0; margin:0; width:100vw; height:100dvh; max-width:none; max-height:none; background:rgba(8,9,12,.96); color:#fff; overflow:hidden}
.lb::backdrop{background:#08090C}
.lb[open]{display:grid; grid-template-rows:auto 1fr auto}
.lb__bar{display:flex; justify-content:space-between; align-items:center; padding:10px 16px; font-size:var(--fs-sm); color:#C9C8CF}
.lb__bar .icon-btn{color:#fff}
.lb__stage{position:relative; min-height:0; display:grid; place-items:center; padding-inline:clamp(8px,6vw,88px)}
.lb__stage img{max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; user-select:none; -webkit-user-drag:none}
.lb .gal__nav{position:fixed}
.lb__thumbs{display:flex; gap:6px; justify-content:center; padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px)); overflow-x:auto; scrollbar-width:none}
.lb__thumbs button{flex:none; width:64px; aspect-ratio:4/3; border-radius:6px; overflow:hidden; opacity:.45; outline:2px solid transparent}
.lb__thumbs button[aria-current="true"]{opacity:1; outline-color:var(--accent)}
.lb__thumbs img{width:100%; height:100%; object-fit:cover}

.buy{position:sticky; top:calc(var(--hdr) + 16px); align-self:start; display:grid; gap:var(--s5); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(20px,2.2vw,30px)}
.buy__top{display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap}
.buy__price{display:grid; gap:4px}
.buy__price .num{font-size:clamp(1.875rem,1.5rem + 1.4vw,2.5rem); line-height:1.05}
.buy__price s{color:var(--ink-3); font-size:var(--fs-sm)}
.gains{display:grid; gap:0; border-radius:var(--r-md); background:var(--sunken); padding:6px 16px}
.gains div{display:flex; justify-content:space-between; gap:12px; padding:10px 0; font-size:var(--fs-sm); color:var(--ink-2)}
.gains div+div{border-top:1px solid var(--line)}
.gains b{font-weight:600; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums}
.gains .gains__sum{color:var(--ink); font-weight:600}
.gains .gains__sum b{color:var(--accent-ink); font:500 1.0625rem/1.2 var(--f-display); letter-spacing:-.02em}
.buy__cta{display:grid; gap:10px}
.buy__where{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:var(--fs-sm); color:var(--ink-2); padding-top:var(--s4); border-top:1px solid var(--line)}
.buy__where .ico{grid-row:span 2; margin-top:2px; color:var(--ink-3)}
.buy__where b{color:var(--ink); font-weight:600}
.keyfacts{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:var(--s5)}
.kf{padding:16px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line); display:grid; gap:8px; align-content:start}
.kf .ico{color:var(--ink-3); width:22px; height:22px}
.kf small{font-size:var(--fs-cap); color:var(--ink-3); display:block}
.kf b{font:500 .9375rem/1.2 var(--f-display); letter-spacing:-.02em}
.vsec{margin-top:clamp(36px,5vw,64px)}
.vsec>h2{font-size:clamp(1.25rem,1.1rem + .8vw,1.625rem); margin-bottom:var(--s5)}
.specs{display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(24px,4vw,56px)}
.specs div{display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); font-size:.9375rem}
.specs dt{color:var(--ink-3)} .specs dd{font-weight:500; text-align:right}
.equip{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:var(--s5) var(--s6)}
.equip h3{font:600 var(--fs-cap)/1.2 var(--f-text); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
.equip li{position:relative; padding:5px 0 5px 22px; font-size:.9375rem; color:var(--ink-2); line-height:1.4}
.equip li::before{content:""; position:absolute; left:2px; top:11px; width:10px; height:5px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg)}
.clamp{position:relative; max-height:260px; overflow:hidden}
.clamp::after{content:""; position:absolute; inset:auto 0 0; height:90px; background:linear-gradient(transparent,var(--paper)); pointer-events:none}
.clamp.is-open{max-height:none} .clamp.is-open::after{display:none}
.desc{white-space:pre-line; color:var(--ink-2); max-width:72ch; font-size:.9375rem; line-height:1.6}
.buybar{display:none}
@media (max-width:1023px){
  .vdp{grid-template-columns:1fr; grid-template-areas:"gal" "buy" "rest"; gap:var(--s5) 0}
  .buy{position:static}
  .keyfacts{grid-template-columns:1fr 1fr}
  .specs{grid-template-columns:1fr}
  .gal__main{border-radius:var(--r-lg)}
  .gal__nav{width:40px; height:40px; margin-top:-20px}
  .buybar{position:fixed; inset:auto 0 var(--tabbar); z-index:90; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px var(--pad); background:color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-top:1px solid var(--line); transform:translateY(120%); transition:transform var(--t) var(--ease)}
  .buybar.is-on{transform:none}
  .buybar .num{font-size:1.125rem; display:block; line-height:1.15}
  .buybar small{font-size:var(--fs-cap); color:var(--ink-3)}
}
@media (max-width:600px){
  .vdp__wrap{--bleed:var(--pad)}
  .gal__main{margin-inline:calc(var(--pad)*-1); border-radius:0}
}

/* ---------- 10. кредит ---------- */
.calc{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line); background:var(--surface)}
.calc__in{padding:clamp(20px,3vw,40px); display:grid; gap:var(--s6); align-content:start}
.calc__out{padding:clamp(20px,3vw,40px); display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s5); align-content:start; min-width:0}
.ctl{display:grid; gap:10px}
.ctl__top{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.ctl__top label{font:500 var(--fs-sm)/1.3 var(--f-text); color:var(--ink-2)}
.ctl__val{font:500 1.25rem/1 var(--f-display); letter-spacing:-.025em; white-space:nowrap}
.ctl__val small{font:400 var(--fs-sm)/1 var(--f-text); color:var(--ink-3); letter-spacing:0; margin-left:6px}
.ctl__scale{display:flex; justify-content:space-between; font-size:var(--fs-cap); color:var(--ink-3)}
.calc__pay small{display:block; font-size:var(--fs-sm); color:var(--ink-3); margin-bottom:10px}
.calc__pay .num{font-size:clamp(2.25rem,1.5rem + 3vw,3.75rem); line-height:1}
.calc__pay .num span{display:block; font:400 var(--fs-sm)/1.3 var(--f-text); color:var(--ink-3); letter-spacing:0; margin-top:6px}
.calc__rows{display:grid}
.calc__rows div{display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--line); font-size:.9375rem; color:var(--ink-3)}
.calc__rows b{color:var(--ink); font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums}
.calc__car{display:grid; grid-template-columns:72px 1fr auto; gap:12px; align-items:center; padding:10px; border-radius:var(--r-md); background:var(--sunken)}
.calc__car img{width:72px; aspect-ratio:4/3; object-fit:cover; border-radius:8px 2px 8px 2px}
.calc__car b{display:block; font:500 .875rem/1.25 var(--f-display); letter-spacing:-.02em}
.calc__car span{font-size:var(--fs-xs); color:var(--ink-2)}
@media (max-width:900px){.calc{grid-template-columns:minmax(0,1fr)}}
/* телефон: сумма платежа ужимается под ширину панели, иначе «49 849 ₽» одним словом растягивал колонку и кнопка уезжала за край */
@media (max-width:480px){.calc__pay .num{font-size:clamp(1.625rem,8.6vw,2.5rem); overflow-wrap:anywhere}}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gutter); counter-reset:s}
.step{counter-increment:s; display:grid; gap:12px; align-content:start; padding-top:var(--s5); border-top:2px solid var(--ink)}
.step::before{content:"0" counter(s); font:500 var(--fs-sm)/1 var(--f-display); color:var(--accent-ink)}
.step h3{font-size:1.125rem}
.step p{color:var(--ink-2); font-size:.9375rem}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.banks{display:flex; flex-wrap:wrap; gap:10px}
.banks span{display:inline-flex; align-items:center; height:48px; padding:0 20px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); font:500 .9375rem/1 var(--f-display); letter-spacing:-.02em}
.trio{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gutter)}
.trio h3{hyphens:auto; overflow-wrap:anywhere}
.trio .card{display:grid; gap:12px; align-content:start}
.trio .card .kf-ico{width:48px; height:48px; border-radius:var(--r-sm); background:var(--sunken); display:grid; place-items:center; margin-bottom:6px}
.trio .card .kf-ico .ico{width:24px; height:24px}
.trio .card p{color:var(--ink-2); font-size:.9375rem}
@media (max-width:900px){.trio{grid-template-columns:1fr}}

/* ---------- 11. сервис, контакты, о компании ---------- */
.duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,480px); gap:clamp(24px,5vw,80px); align-items:start}
@media (max-width:960px){.duo{grid-template-columns:1fr}}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(20px,2.6vw,36px); box-shadow:var(--shadow-2)}
.panel h2{font-size:1.5rem; margin-bottom:6px}
.panel>p{color:var(--ink-2); font-size:.9375rem; margin-bottom:var(--s5)}
.svc{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--gutter)}
.svc h3{font-size:1.0625rem; hyphens:manual; overflow-wrap:break-word; word-break:normal}
.svc .card{display:grid; gap:10px; align-content:start; transition:border-color var(--t-fast),transform var(--t) var(--ease)}
.svc .card:hover{border-color:var(--ink-3); transform:translateY(-3px)}
.svc .kf-ico{width:48px; height:48px; border-radius:var(--r-sm); background:var(--ink); color:var(--paper); display:grid; place-items:center; margin-bottom:8px}
.svc .kf-ico .ico{width:24px; height:24px}
.svc p{color:var(--ink-2); font-size:.9375rem}
@media (max-width:900px){.svc{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.svc{grid-template-columns:1fr}}
.tbl{width:100%; border-collapse:collapse; font-size:.9375rem}
.tbl th{text-align:left; font:600 var(--fs-cap)/1.2 var(--f-text); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); padding:0 16px 12px 0; border-bottom:1px solid var(--line-2)}
.tbl td{padding:16px 16px 16px 0; border-bottom:1px solid var(--line); vertical-align:top}
.tbl td:first-child{font-weight:600}
.tbl a{white-space:nowrap}
.tbl a:hover{color:var(--accent-ink)}
.tbl-centers td:nth-child(2){color:var(--ink-2)}
@media (max-width:760px){
  .tbl thead{display:none}
  .tbl tr{display:grid; gap:4px; padding:16px 0; border-bottom:1px solid var(--line)}
  .tbl td{padding:0; border:0}
  .tbl-centers td:nth-child(2){font-size:var(--fs-sm); color:var(--ink-3)}
}
.hl{border-radius:var(--r-xl); padding:clamp(24px,4vw,56px); display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,56px); align-items:center}
.hl .num{font-size:clamp(3rem,2rem + 5vw,6rem); line-height:.95; color:var(--accent)}
.hl .num small{display:block; font:600 var(--fs-cap)/1.2 var(--f-text); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-top:12px}
@media (max-width:700px){.hl{grid-template-columns:1fr}}
.centers{display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter)}
.center{display:grid; gap:var(--s4); align-content:start; overflow:hidden}
.center__photo{display:block; width:calc(100% + 2*clamp(20px,2.4vw,32px)); margin:calc(-1*clamp(20px,2.4vw,32px)) calc(-1*clamp(20px,2.4vw,32px)) 0; max-width:none; aspect-ratio:16/9; height:auto; object-fit:cover; border-bottom:1px solid var(--line)}
.center__head{display:flex; gap:14px; align-items:center}
.center__head .place__n{grid-row:auto}
.center__head h3{font-size:1.25rem}
.center__list{display:grid}
.center__list li{display:grid; grid-template-columns:1fr auto; gap:2px 16px; padding:14px 0; border-top:1px solid var(--line); font-size:.9375rem}
.center__list span{color:var(--ink-2)}
.center__list a.tel{font-weight:600; white-space:nowrap; grid-row:span 2; align-self:center}
.center__list a.tel:hover{color:var(--accent-ink)}
.center__list a.site{font-size:var(--fs-sm); color:var(--ink-3); grid-column:1}
.center__list a.site:hover{color:var(--accent-ink)}
@media (max-width:860px){.centers{grid-template-columns:1fr}}
@media (max-width:480px){.center__list li{grid-template-columns:1fr}.center__list a.tel{grid-row:auto}}
.req{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s4) var(--s6); font-size:.9375rem}
.req dt{font-size:var(--fs-xs); color:var(--ink-3); margin-bottom:4px}
.req dd{font-weight:500}
.timeline{display:grid; gap:0; position:relative}
.tl{display:grid; grid-template-columns:minmax(clamp(84px,12vw,160px),auto) 1fr; gap:clamp(16px,3vw,40px); padding:clamp(18px,2.4vw,28px) 0; border-top:1px solid var(--line)}
.tl .num{font-size:clamp(1.5rem,1.1rem + 1.8vw,2.5rem); line-height:1; color:var(--ink)}
.tl .num--txt{font-size:clamp(1rem,.75rem + .9vw,1.375rem); line-height:1.25; padding-top:.3em}   /* словесная метка («Сегодня») уже колонки с годами */
.tl h3{font-size:1.125rem; margin-bottom:6px}
.tl p{color:var(--ink-2); max-width:62ch}
.photo{border-radius:var(--r-xl); overflow:hidden; position:relative}
.photo img{width:100%; height:100%; object-fit:cover; filter:brightness(var(--img-dim))}
.about-hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(24px,4vw,64px); align-items:center}
.about-hero .photo{aspect-ratio:3/2}
@media (max-width:900px){.about-hero{grid-template-columns:1fr}}
.notice{display:flex; gap:12px; padding:14px 16px; border-radius:var(--r-md); background:var(--info-soft); color:var(--ink-2); font-size:var(--fs-sm); line-height:1.45}
.notice .ico{color:var(--info); margin-top:1px}

/* ---------- 12. движение ---------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease),transform .7s var(--ease); transition-delay:calc(var(--i,0)*70ms)}
.rv.is-in{opacity:1; transform:none}
.hero__body>*{animation:rise .9s var(--ease) both; animation-delay:calc(.15s + var(--i,0)*.09s)}
.finder{animation:rise .9s var(--ease) .55s both}
@keyframes rise{from{opacity:0; transform:translateY(26px)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-delay:0s!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
  .rv{opacity:1; transform:none}
}
@media print{.hdr,.tabbar,.ftr,.buybar,.filters,.fav{display:none!important} main{padding-top:0}}