/* «Премьер» — дизайн по макету Figma (кадр 1200 px).
   Все размеры в rem: 1rem = 16px на 1200px, дальше макет пропорционально растёт до 1440px. */
:root{
  --head-gap:1.75rem; /* заголовок и описание экрана → его элементы: везде одинаково (28px) */
  --bg:#F9F9F9;
  --ink:#2C2F36;
  --ink-2:#34373C;
  --red:#AC0E13;
  --red-h:#8E0B10;
  --line-d:rgba(44,47,54,.08);
  --line-w:rgba(255,255,255,.10);
  --soft:rgba(44,47,54,.04);
  --muted:rgba(44,47,54,.16);
  --r:4px;
  --font-h:'Onest',system-ui,sans-serif;
  --font-t:'Manrope',system-ui,sans-serif;
}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (min-width:1200px){html{font-size:clamp(16px,calc(100vw / 75),19.2px)}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-t);line-height:1.4;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
/* Переносы: заголовки выравниваем по строкам, в абзацах не оставляем одно-два слова на последней строке */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{width:100%;max-width:75rem;margin:0 auto;padding:0 2.5rem}

/* Кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;height:2.5625rem;padding:0 1.5rem;border-radius:var(--r);
  font:400 .75rem/1 var(--font-t);white-space:nowrap;cursor:pointer;border:1px solid transparent;background:none;color:inherit;
  transition:background .2s,color .2s,border-color .2s}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-h)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}
.btn-white{background:#fff;color:#343434}
.btn-white:hover{background:#ECECEC}
.btn-line-w{border-color:#fff;color:#fff}
.btn-line-w:hover{background:#fff;color:var(--ink)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}

/* Шапка */
.header{color:#fff}
.header-in{display:flex;align-items:center;gap:2.5rem;height:5rem}
.logo{display:inline-flex;align-items:center;min-height:2.5rem}
/* логотип «Автопремьер»: белый над тёмным первым экраном, тёмный на светлой шапке */
.logo img{display:block;height:1.5rem;width:auto}
.logo .logo-d{display:none}
.header.is-solid .logo-w,.header-light .logo-w,.header.mega-open .logo-w,.header.search-open .logo-w{display:none}
.header.is-solid .logo-d,.header-light .logo-d,.header.mega-open .logo-d,.header.search-open .logo-d{display:block}
.nav{display:flex;font-size:.8125rem}
.nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.header-r{margin-left:auto;display:flex;align-items:center;gap:1.5rem;font-size:.75rem}

/* Первый экран */
.hero{position:relative;height:37.5rem;min-height:600px;background:var(--ink);color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0;opacity:.27}
.hero-video{width:100%;height:100%;object-fit:cover}
.grid-lines{position:absolute;inset:0;max-width:75rem;margin:0 auto;padding:0 2.5rem;display:flex;justify-content:space-between;pointer-events:none}
.grid-lines i{width:1px;background:var(--line-w)}
.hero-in{position:relative;height:100%;display:flex;flex-direction:column;padding-top:7.875rem;padding-bottom:2.5rem}
.hero-text{max-width:36.8rem}
h1{font:500 2.5rem/1 var(--font-h);letter-spacing:-.04em}
.hero-lead{margin-top:.75rem;max-width:34rem;font:500 .875rem/1.25rem var(--font-t)}
.hero-btns{display:flex;gap:.5rem;margin-top:1.75rem}

.search{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr) 1fr;height:4.0625rem;border:1px solid rgba(249,249,249,.08);
  border-radius:var(--r);background:rgba(255,255,255,.04);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
/* Тезисы — надзаголовок первого экрана: плашки с тонкой обводкой. Отступ сверху уменьшен на высоту ряда плашек,
   поэтому заголовок, описание и кнопки стоят там же, где стояли без тезисов */
.hero-in{padding-top:calc(7.875rem - 2.625rem)}
.hero-tags{display:flex;flex-wrap:wrap;width:max-content;max-width:calc(100vw - 2rem);gap:.5rem;margin:0 0 .75rem;padding:0;list-style:none}
.hero-tags li{display:inline-flex;align-items:center;gap:.375rem;height:1.875rem;padding:0 .875rem;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  font:400 .75rem/1 var(--font-t);color:rgba(255,255,255,.88);white-space:nowrap}
.hero-tags svg{width:.875rem;height:.875rem;color:#fff;opacity:.85}
.search-f{position:relative;display:flex;flex-direction:column;justify-content:center;gap:.25rem;padding:0 1.3rem;border-right:1px solid var(--line-w);cursor:pointer}
.search-f span{font:300 .75rem/1 var(--font-t)}
.search-f select{appearance:none;-webkit-appearance:none;border:0;background:none;color:#fff;font:400 .75rem/1.2 var(--font-t);padding:0 1rem 0 0;cursor:pointer;outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' fill='none'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center}
.search-f select option{color:var(--ink)}
.search-b{display:flex;align-items:center;padding:0 .75rem}
.search-b .btn{width:100%}

/* Бегущая строка логотипов */
.marquee{position:relative;height:11.625rem;overflow:hidden;border-bottom:1px solid var(--line-d)}
.marquee::before,.marquee::after{content:'';position:absolute;top:0;bottom:0;width:6rem;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--bg),rgba(249,249,249,0))}
.marquee::after{right:0;background:linear-gradient(-90deg,var(--bg),rgba(249,249,249,0))}
.marquee-track{display:flex;width:max-content;height:100%;animation:marquee 36s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.m-cell{flex:none;width:11.6875rem;height:100%;display:flex;align-items:center;justify-content:center;border-left:1px solid var(--line-d)}
.m-cell img{width:auto;opacity:.32;transition:opacity .2s}
.m-cell:hover img{opacity:.7}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Заголовки секций */
.eyebrow{font:300 .75rem/1 var(--font-h);letter-spacing:-.04em;color:var(--ink);opacity:.32}
h2{margin-top:.75rem;max-width:36.8rem;font:500 2rem/2.25rem var(--font-h);letter-spacing:-.04em;color:var(--ink)}
.sec{padding:5rem 0 0}
.sec:last-of-type{padding-bottom:5rem}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}
.sec-head .btn{flex:none}

/* Общие для всех страниц */
.sec-sub{margin-top:.5rem;max-width:30rem;font:300 1rem/1.25rem var(--font-t)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.foot-note{margin-top:1.25rem;font:400 .625rem/1rem var(--font-t);opacity:.5}
/* Заглушка фото: где снимка пока нет, видно, какой кадр туда нужен */
.ph{display:flex;align-items:flex-end;width:100%;height:100%;padding:1rem;border-radius:var(--r);background:var(--soft)}
.ph span{font:300 .75rem/1.2 var(--font-t);opacity:.5}

/* Быстрый старт: нижние карточки поднимаются в один ряд при скролле */
.start{position:relative;z-index:1}
/* секция заходит на следующий блок (отрицательный отступ на десктопе): пустая её часть не перехватывает мышь,
   иначе не нажималась кнопка «Все автомобили в наличии» под ней */
.start{pointer-events:none}
.start .scard,.start a,.start button,.start .sec-head{pointer-events:auto}
.start-pin{padding-top:5rem}
.start-grid{--lift:16.9375rem;display:grid;grid-template-columns:repeat(4,1fr);column-gap:.75rem;margin-top:var(--head-gap);padding-bottom:var(--lift)}
.scard{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.scard.low{transform:translateY(calc(var(--lift) * (1 - var(--p,0))));will-change:transform}
/* Порядковые линии: красная заливка растёт слева направо по мере прокрутки (--f задаёт JS) */
.steps{display:flex;gap:.4rem;width:100%}
.steps i{position:relative;flex:1;height:4px;border-radius:4px;background:var(--muted);overflow:hidden}
.steps i::after{content:'';position:absolute;inset:0;border-radius:4px;background:var(--red);transform-origin:left;transform:scaleX(var(--f,0))}
.scard h3{margin-top:1.5rem;font:500 1.25rem/1.5rem var(--font-h);letter-spacing:-.03em;max-width:17.1rem}
.scard p{margin-top:.75rem;font:300 1rem/1.25rem var(--font-t);max-width:16.2rem}
.scard p{margin-bottom:1.5rem}
.scard .btn{margin-top:auto}

@media (min-width:1024px){
  /* Блок закрепляется, пока нижние карточки поднимаются; освободившееся место
     под ними перекрывает следующий экран, поэтому отступ до каталога — те же 80px */
  .start{height:calc(var(--pin-h,100vh) + var(--lift-px,271px) * 2);margin-bottom:calc(var(--lift-px,271px) * -1)}
  .start-pin{position:sticky;top:0}
  .start + .sec{position:relative}
}

/* Карточка автомобиля */
.cars{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:var(--head-gap)}
.car{position:relative;display:flex;flex-direction:column;background:var(--soft);border-radius:var(--r);padding:.25rem .25rem 1.25rem}
.car-ph{position:relative;height:16.25rem;border-radius:var(--r);background:#E6E7E9;overflow:hidden}
.car-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.car-ph img.cut{object-fit:contain;padding:2.5rem 1.5rem 1.25rem}
/* обычное фото с фоном (16:9 или 3:2) — целиком, без обрезки колёс; верх кадра остаётся под плашки статуса */
.car-ph img.full{object-fit:contain;object-position:center 62%}
.car:hover .car-ph img{transform:scale(1.03)}
.badges{position:absolute;top:.5rem;left:.5rem;right:2.5rem;display:flex;flex-wrap:wrap;gap:.25rem}
.badge{padding:.4rem .375rem;border-radius:2px;background:rgba(77,77,77,.16);backdrop-filter:blur(2.8px);-webkit-backdrop-filter:blur(2.8px);
  color:#E9E9E9;font:400 .5rem/1 var(--font-t)}
.car-ph.light .badge{background:rgba(44,47,54,.42);color:#fff}
/* Видимый квадрат 24px как в макете, зона нажатия 40px */
.fav{position:absolute;top:.25rem;right:.25rem;width:2.5rem;height:2.5rem;border:0;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.fav::before{content:'';position:absolute;inset:.5rem;border-radius:2px;background:var(--bg)}
.fav svg{position:relative}
.fav svg{width:.5rem;height:.5rem;fill:none;stroke:var(--ink);stroke-width:1.4}
.fav.on svg{fill:var(--red);stroke:var(--red)}
.car-b{padding:1.25rem .75rem 0;display:flex;flex-direction:column;flex:1;color:var(--ink-2)}
.car-t{font:500 1.25rem/1.75rem var(--font-h);letter-spacing:-.03em}
.car-s{margin-top:.25rem;font:500 .75rem/1.25rem var(--font-t)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem;max-width:16rem}
.chip{padding:.4rem .75rem;border-radius:var(--r);background:rgba(40,42,45,.04);font:400 .75rem/1.25rem var(--font-t)}
.price{margin-top:auto;padding-top:1.5rem;font:500 1.25rem/1.75rem var(--font-h);letter-spacing:-.03em}
.price s{margin-left:.75rem;text-decoration-thickness:1px}
.price-d{font:500 .625rem/1.25rem var(--font-t)}
.car-btns{display:grid;grid-template-columns:8.42fr 11.64fr;gap:.5rem;margin-top:1rem;padding-right:.75rem}
.car-btns .btn{padding:0 1rem}
.car-btns .btn-line{border-color:var(--ink-2);color:var(--ink-2)}
.car-btns .btn-line:hover{background:var(--ink-2);border-color:var(--ink-2);color:#fff}

/* Марки */
.brands{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:var(--head-gap)}
.brand{position:relative;height:28.25rem;border-radius:8px;overflow:hidden;color:#fff;padding:1.8rem 1.5rem 1.5rem;display:flex;flex-direction:column;
  background:linear-gradient(127deg,#272A30 0.7%,#23334B 90.6%)}
/* Все машины одной высоты, стоят на одной линии и по центру карточки */
.brand-img{position:absolute;left:50%;transform:translateX(-50%);bottom:4.75rem;height:13.75rem;width:auto;max-width:none;transition:transform .6s}
.brand:hover .brand-img{transform:translateX(-52%)}
/* Фото с фоном (16:9 или 4:3) — во всю карточку. Верхние ~30% кадра под заголовок и текст, низ — под модели;
   затемнение сверху и снизу держит текст читаемым на любом фото */
.brand.photo::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(23,25,30,.82) 0%,rgba(23,25,30,.35) 30%,rgba(23,25,30,0) 50%,rgba(23,25,30,0) 68%,rgba(23,25,30,.78) 100%)}
.brand.photo > :not(.brand-img){z-index:2}
.brand-img.full,.sim .brand-img.full{inset:0;left:0;bottom:0;width:100%;height:100%;max-width:100%;object-fit:cover;transform:none}
.brand:hover .brand-img.full{transform:scale(1.03)}
.brand-logo{position:relative;height:1.1rem;width:auto;filter:invert(1);align-self:flex-start}
.brand h3{position:relative;font:500 1.5rem/1.75rem var(--font-h);letter-spacing:-.03em}
.brand p{position:relative;margin-top:.25rem;max-width:19.9rem;font:300 .75rem/1rem var(--font-t);color:#C0C0C0}
.brand-models{position:relative;margin-top:auto;display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem}
.brand-go{margin-left:auto;padding:.4rem 0;font:400 .75rem/1.25rem var(--font-t);font-style:normal;opacity:0;transform:translateX(-.5rem);transition:opacity .25s,transform .25s}
.brand-go::after{content:' →'}
.brand:hover .brand-go,.brand:focus-visible .brand-go{opacity:1;transform:none}
.brand-models span,.brand-models a:not(.brand-go){padding:.4rem .75rem;border-radius:var(--r);background:rgba(255,255,255,.08);font:400 .75rem/1.25rem var(--font-t);backdrop-filter:blur(4px)}
.brand-models a:not(.brand-go):hover,.sim:hover .brand-models span{background:rgba(255,255,255,.2)}


/* Планшет */
@media (max-width:1023px){
  .nav{display:none}
  .start-grid{grid-template-columns:1fr 1fr;row-gap:3rem;padding-bottom:0}
  .scard.low{transform:none}
  .cars{grid-template-columns:1fr 1fr}
}
/* Мобайл */
@media (max-width:640px){
  .wrap,.grid-lines{padding:0 1rem}
  .header-r .phone{display:none}
  .hero{height:auto;min-height:100svh;display:flex;flex-direction:column}
  .hero-in{flex:1;height:auto;width:100%}
  .hero-in{padding-top:6.5rem}
  h1{font-size:2rem}
  .hero-in{padding-bottom:1rem}
  .hero-btns{flex-direction:column;gap:.75rem}
  .hero-btns .btn{width:100%}
  .search{grid-template-columns:1fr;height:auto;margin-top:auto}
  .hero-btns{margin-bottom:2.5rem}
  .search-f{padding:.9rem 1rem;border-right:0;border-bottom:1px solid var(--line-w)}
  .search-b{padding:.75rem}
  .grid-lines i:nth-child(2),.grid-lines i:nth-child(4){display:none}
  .marquee{height:7rem}
  .m-cell{width:8.5rem}
  .m-cell img{transform:scale(.8)}
  h2{font-size:1.75rem;line-height:1.9rem}
  .sec{padding-top:4rem}
  .sec:last-of-type{padding-bottom:4rem}
  .start-pin{padding-top:4rem}
  .sec-head{flex-direction:column;align-items:flex-start;gap:1.5rem}
  .start-grid{grid-template-columns:1fr}
  .scard h3{margin-top:.75rem}
  .cars,.brands{grid-template-columns:1fr}
  .brand{height:24rem}
  .brand-img:not(.full){bottom:4.5rem;height:10rem}
  .brand-go{opacity:1;transform:none}
  .brand-models a{display:inline-flex;align-items:center;min-height:2.5rem}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation-duration:120s}
  .scard.low{transform:none}
}

/* Футер — по прототипу */
.footer{padding:4rem 0 2rem;background:var(--ink);color:rgba(255,255,255,.7)}
.f-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr) 1.3fr;gap:.75rem}
.f-grid h4{margin:0 0 1rem;font:500 .75rem/1 var(--font-h);letter-spacing:.04em;text-transform:uppercase;color:#fff;opacity:.5}
.f-col{display:flex;flex-direction:column;align-items:flex-start}
.f-col a{display:inline-flex;align-items:center;min-height:2rem;font:400 .875rem/1.25rem var(--font-t);transition:color .2s}
.f-col a:hover{color:#fff}
.f-logo{display:inline-block}
.f-logo img{display:block;height:1.75rem;width:auto}
.f-about{margin-top:1rem;max-width:18rem;font:300 .75rem/1.125rem var(--font-t)}
.f-phone{font:500 1.25rem/1.5rem var(--font-h)!important;color:#fff}
.f-addr{margin-top:.5rem;font:300 .75rem/1.125rem var(--font-t)}
.f-msg{display:flex;gap:.5rem;margin-top:1rem}
.f-msg a{justify-content:center;width:2.5rem;height:2.5rem;min-height:0;border-radius:var(--r);background:rgba(255,255,255,.08);color:#fff;font:500 .625rem/1 var(--font-t)}
.f-msg a:hover{background:var(--red)}
.f-bottom{display:grid;grid-template-columns:1.6fr 2fr 1fr;gap:.75rem;align-items:start;margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);font:300 .625rem/1rem var(--font-t)}
.f-bottom p{margin:0}
.f-bottom a{text-decoration:underline;text-underline-offset:2px}
.f-bottom a:hover{color:#fff}
.f-dev{justify-self:end;text-align:right}
.f-dev b{font-weight:600;color:#fff;letter-spacing:.04em}
@media (max-width:1023px){
  .f-grid{grid-template-columns:repeat(3,1fr);row-gap:2rem}
  .f-grid > :first-child,.f-grid > :last-child{grid-column:span 3}
  .f-bottom{grid-template-columns:1fr}
  .f-dev{justify-self:start;text-align:left}
}
@media (max-width:640px){
  .footer{padding:3rem 0 1.5rem}
  .f-grid{grid-template-columns:1fr 1fr}
  .f-grid > :first-child,.f-grid > :last-child{grid-column:span 2}
  .f-col a{min-height:2.5rem}
}

/* Аккордеон вопросов — один вид на всех страницах */
.fq{border-radius:var(--r);background:#E7E7E7;transition:background .25s}
.fq summary{display:flex;align-items:center;gap:1rem;min-height:2.75rem;padding:.5rem .5rem .5rem 1rem;cursor:pointer;list-style:none}
.fq summary::-webkit-details-marker{display:none}
.fq-n{flex:none;font:300 .75rem/1 var(--font-h);opacity:.35}
.fq-q{flex:1;font:400 1rem/1.375rem var(--font-t)}
.fq-t{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:var(--r);background:var(--ink);color:#fff;transition:transform .3s,background .2s}
.fq-t svg{width:1rem;height:1rem}
.fq[open] .fq-t{transform:rotate(180deg);background:var(--red)}
.fq summary:hover .fq-t{background:var(--red)}
.fq-a{padding:0 3rem 1rem 2.6rem;animation:fq-in .35s ease}
.fq-a p{font:300 .875rem/1.35rem var(--font-t)}
@keyframes fq-in{from{opacity:0;transform:translateY(-4px)}}

/* Плавная прокрутка (Lenis) */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important} /* иначе браузерное сглаживание спорит с Lenis */
.lenis.lenis-stopped{overflow:hidden}

.footer{position:relative;overflow:hidden}
.footer .wrap{position:relative}

/* Фирменные кольца из знака логотипа — фоновый паттерн тёмных и серых плашек.
   rings-w — белые на тёмном видео, rings-d — тёмные плашки (белое кольцо, красная дуга),
   rings-g — светло-серые плашки (серое кольцо, красная дуга). Прозрачность низкая: это фон, а не графика */
.rings{position:absolute;right:var(--rx,-4rem);bottom:var(--ry,-5rem);z-index:0;display:block;width:var(--rs,18rem);aspect-ratio:1;pointer-events:none;--a:0deg}
.rings svg{display:block;width:100%;height:100%;overflow:visible}
.rings .r-o{transform:rotate(var(--a));transform-origin:98.52px 98.52px;transition:transform .25s linear}
.rings .r-i{transform:rotate(calc(var(--a) * -1.6));transform-origin:98.52px 98.52px;transition:transform .25s linear}
.rings circle{stroke:var(--rc1)}
.rings path{fill:var(--rc2)}
.rings-w{--rc1:rgba(255,255,255,.07);--rc2:rgba(255,255,255,.09)}
.rings-d{--rc1:rgba(255,255,255,.07);--rc2:rgba(172,14,19,.45)}
.rings-g{--rc1:rgba(44,47,54,.05);--rc2:rgba(172,14,19,.12)}
.rings-process{--rs:34rem;--rx:-5rem;--ry:-11rem}
.contacts-card,.info.has-rings{position:relative;overflow:hidden}
.contacts-card > :not(.rings),.info.has-rings > :not(.rings),.calc-out > :not(.rings),.cta-dark > :not(.rings){position:relative;z-index:1}
.calc-out .rings{--rs:15rem;--rx:-2.5rem;--ry:-3rem}
.cta-dark .rings{--rs:22rem;--rx:-5rem;--ry:-7rem}
.info.has-rings .rings{--rs:13rem;--rx:-3.5rem;--ry:-4.5rem}
.big-n{position:relative;isolation:isolate}
.rings-404{--rs:12rem;right:auto;bottom:auto;left:50%;top:50%;z-index:-1;translate:-50% -50%}
@media (max-width:640px){.rings-process{--rs:20rem;--rx:-6rem;--ry:-7rem}.contacts-card .rings{--rs:13rem}}
@media (prefers-reduced-motion:reduce){.rings .r-o,.rings .r-i{transition:none}}

/* поле-ловушка для ботов в формах — вне экрана, недоступно с клавиатуры */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Баннер cookie: над всем, на телефоне — над нижней панелью действий */
.cookie-bar{position:fixed;left:1rem;bottom:1rem;z-index:70;max-width:32rem;display:grid;gap:1rem;padding:1.25rem;border-radius:var(--r);background:var(--ink);color:#fff;box-shadow:0 .5rem 2rem rgba(0,0,0,.18);font:300 .75rem/1.125rem var(--font-t)}
.cookie-bar a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.cookie-btns{display:flex;gap:.5rem;flex-wrap:wrap}
.cookie-btns .btn{flex:1}
.f-cookie{display:inline-block;padding:.75rem 0;margin:-.75rem 0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
@media (max-width:640px){.cookie-bar{left:.5rem;right:.5rem;bottom:calc(4.25rem + env(safe-area-inset-bottom));max-width:none;padding:1rem}}

/* Быстрый поиск: модель недоступна, пока не выбрана марка */
.search-f.is-off{opacity:.55}
.search-f select:disabled{cursor:not-allowed}