*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Единая система анимации. Раньше длительности были вразнобой (.14/.15/.18/
     .2/.22/.24/.25/.28/.3/.32s), из-за чего подложка и панель заканчивали
     движение в разное время — глаз читает это как рывок. Теперь три ступени:
     мелкие контролы, попапы, крупные панели. Кривая одна — easeOutQuad:
     быстрый старт, мягкое торможение, как у нативных шторок. */
  --dur-fast:.14s;
  --dur:.22s;
  --dur-slow:.3s;
  --ease:cubic-bezier(.25,.46,.45,.94);

  --w:#ffffff;--ink:#0A0B0D;--ink2:#3D4350;--ink3:#8A919E;
  --surf:#F5F7FA;--line:#E8ECF3;
  --blue:#2563EB;--blueTx:#2563EB;--blueDk:#1A4DC5;--blueLt:#EEF3FD;
  /* Нейтральный акцент (чёрный/белый/серый) — основной цвет интерфейса.
     Синий (--blue) оставлен только для логотипа, заголовка и кнопок «Позвонить». */
  --acc:#0A0B0D;--accOn:#fff;--accHover:#2A2A2D;--accTx:var(--ink);--accLt:#EEF0F3;--accBd:var(--ink2);
  --green:#16A34A;--amber:#D97706;--red:#DC2626;
  /* --r — крупные поверхности (модалки, шторки): раньше был равен --rsm
     (10px), и попап заявки скруглён был так же, как значок-бейдж на фото.
     16px на большой панели читается как её собственный радиус, а не как
     тот же мелкий чип, растянутый на весь экран. --rsm остаётся для кнопок,
     чипов, полей — то, что действительно должно оставаться мелким. */
  --r:16px;--rsm:12px;--rxs:8px;--rlg:22px;--pill:999px;
  --sh:0 2px 12px rgba(10,11,13,.07);
  --shLg:0 8px 40px rgba(10,11,13,.13);
  --fn:'Onest',system-ui,sans-serif;
}
/* ═══ ТЁМНАЯ ТЕМА ═══ */
html[data-theme="dark"]{
  /* Тёмная тема собрана как система «поверхностей»: чем ближе элемент
     к пользователю, тем он светлее. Шаг между уровнями — около 4–6 единиц
     воспринимаемой светлоты L*: меньше глаз не различает, больше выглядит
     полосато.
        #0F0F10  фон страницы            (самый дальний уровень)
        #131314  ниша под фото           (утоплена в карточку)
        #19191B  карточки, шапка, панели (приподняты над фоном)
        #222224  чипы, поля, наведение
        #2F2F32  границы
     Все оттенки нейтрально-серые (без синего подтона), а не чистый чёрный:
     чистый чёрный на светящемся экране читается как провал и утомляет глаз. */
  --w:#19191B;--ink:#ECECED;--ink2:#B9B9BD;--ink3:#929297;
  --surf:#222224;--surf2:#2A2A2D;--line:#2F2F32;
  /* Синих два вместо одного, и это не прихоть: заливка кнопки обязана
     держать на себе белый текст (нужно 4.5:1 — у #2E6FE8 ровно 4.6),
     а синий ТЕКСТ на тёмном фоне должен читаться сам (у #5E9BFF 6.4:1).
     Одним цветом оба требования не выполняются: чем светлее синий, тем
     хуже на нём белые буквы, и наоборот. */
  --blue:#2E6FE8;--blueTx:#5E9BFF;--blueDk:#2559C9;--blueLt:#16233A;
  --acc:#ECECED;--accOn:#0F0F10;--accHover:#FFFFFF;--accTx:var(--ink);--accLt:#2A2A2D;--accBd:var(--ink2);
  --green:#2ED573;--amber:#F5A524;--red:#F06A6A;
  /* Тени на тёмном почти не видны, поэтому они глубже, а основную работу
     по разделению блоков делают границы. */
  --sh:0 2px 14px rgba(0,0,0,.55);
  --shLg:0 18px 50px rgba(0,0,0,.7);
}
html[data-theme="dark"],html[data-theme="dark"] body{background:#0F0F10}
/* Шапка больше не сливается с фоном: она на уровень выше и отделена границей.
   Раньше шапка, hero и страница были одного цвета — верх экрана читался
   как одно бесструктурное пятно. */
html[data-theme="dark"] header{background:var(--w)}
html[data-theme="dark"] .hero{background:#131314}
html[data-theme="dark"] .hdr-cta-text,html[data-theme="dark"] .tg-btn-text{color:#fff}
/* Ниша под фото — ТЕМНЕЕ карточки. Раньше была светлее, и пустая плашка
   выглядела заплаткой, приклеенной поверх карточки. В светлой теме это
   место тоже темнее фона карточки — теперь поведение одинаковое. */
html[data-theme="dark"] .card-img,html[data-theme="dark"] .card-img-empty,
html[data-theme="dark"] .rw-img{background:#131314}
html[data-theme="dark"] .qs-suggest,html[data-theme="dark"] .brand-dd-menu{background:var(--surf)}
html[data-theme="dark"] .qs-suggest{box-shadow:var(--shLg)}
html[data-theme="dark"] .qs-sug-item:hover,html[data-theme="dark"] .qs-sug-item.active{background:var(--surf2)}
html[data-theme="dark"] .logo{color:var(--ink)}
/* В тёмной теме --ink светлый: тексту на таких кнопках нужен тёмный цвет */
html[data-theme="dark"] .fs-apply,html[data-theme="dark"] .params-apply{color:#0F0F10}
html[data-theme="dark"] .fs-apply:hover,html[data-theme="dark"] .params-apply:hover{background:#fff}
html[data-theme="dark"] .fs-pill.on,html[data-theme="dark"] .params-pill.on{color:#0F0F10}
html[data-theme="dark"] .cs-close:hover{color:#0F0F10}
html[data-theme="dark"] .toast{color:#0F0F10;box-shadow:0 8px 28px rgba(0,0,0,.6)}
/* Карточка при наведении: на тёмном тень не читается, поэтому подсвечиваем
   границу — это единственный способ показать отклик, который реально видно. */
@media (hover:hover) and (pointer:fine){
  html[data-theme="dark"] .card:hover{border-color:#414145;box-shadow:0 6px 28px rgba(0,0,0,.5)}
}
/* Фотографии сняты на белом фоне и в тёмной теме превращаются в слепящие
   прямоугольники. Приглушаем совсем чуть-чуть: цвет машины не искажается,
   а глазу вечером заметно легче. Не нравится — удалите это правило. */
html[data-theme="dark"] .card-img img,html[data-theme="dark"] .rw-img img{filter:brightness(.93)}
/* Кнопка переключения темы */
.theme-toggle{width:34px;height:34px;border-radius:var(--rsm);background:var(--surf);border:1.5px solid var(--line);color:var(--ink2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .15s,color .15s}
.theme-toggle:hover{border-color:var(--accBd);color:var(--accTx)}
/* Пункт переключения темы в бургер-меню (мобильные) */
.burger-theme{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;background:var(--surf);color:var(--ink);border:1.5px solid var(--line);border-radius:var(--rsm);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:border-color .15s}
.burger-theme:hover{border-color:var(--accBd)}
.burger-theme svg{flex-shrink:0}
html{scroll-behavior:smooth}
html{background:var(--w)}
body{font-family:'Onest',system-ui,sans-serif;background:var(--w);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%;padding-bottom:env(safe-area-inset-bottom);overflow-x:clip;-webkit-tap-highlight-color:transparent}
html{overflow-x:clip}
@media(min-width:769px){html{scrollbar-gutter:stable}}
button,a,select,input{touch-action:manipulation}

/* Уважение к системной настройке «уменьшить движение» */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ── ФОКУС С КЛАВИАТУРЫ ──
   Почти все поля и селекты на странице сбрасывают outline (border-color на
   фокусе — слишком тонкая разница в 1.5px). :focus-visible показывается
   только при навигации с клавиатуры (мышь/тач его не запускают), поэтому
   визуальный стиль страницы при клике не меняется. Селектор здесь нарочно
   специфичнее, чем `.class input{outline:none}` — иначе те правила его
   перебивали бы. */
html body :focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ── HEADER ── */
header{position:sticky;top:0;z-index:90;background:var(--w);border-bottom:1px solid var(--line)}
.hdr{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:24px;padding:0 28px;height:64px}
.logo{font-family:'Syne',sans-serif;font-weight:800;font-size:21px;color:var(--ink);text-decoration:none;letter-spacing:-.3px;white-space:nowrap;flex-shrink:0}
.logo span{color:var(--blueTx)}

/* Навигация по разделам — единая на всех страницах, активный раздел подсвечен */
.hdr-nav{display:flex;gap:2px;background:var(--surf);border-radius:var(--rsm);padding:3px;flex-shrink:0}
.hdr-nav a{padding:7px 16px;border-radius:var(--rxs);font-size:14px;font-weight:600;color:var(--ink2);text-decoration:none;transition:color .15s,background .15s;white-space:nowrap}
.hdr-nav a:hover{color:var(--ink)}
.hdr-nav a.active{background:var(--w);color:var(--ink);box-shadow:0 1px 4px rgba(10,11,13,.08)}

/* Поле поиска в шапке (.hdr-search) удалено: оно дублировало строку поиска
   в первом экране. Кнопки справа по-прежнему прижимает margin-left:auto. */
.hdr-right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-shrink:0}

/* Телефон в шапке — прямой контакт повышает доверие к салону */

/* Единственная акцентная кнопка в шапке */
.hdr-cta{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:#229ED9;color:#fff;border-radius:var(--rsm);font-family:inherit;font-size:13px;font-weight:600;text-decoration:none;transition:background .15s,transform .1s;white-space:nowrap;flex-shrink:0}
.hdr-cta:hover{background:#1a8bc0}
.hdr-cta:active{transform:scale(.97)}
.hdr-cta-max{background:#0068FF}
.hdr-cta-max:hover{background:#0055d4}
@media(max-width:1160px){}
@media(max-width:1000px){.hdr-cta{padding:6px 9px}}

/* Иконка поиска в шапке — видна только на мобильном, открывает шторку параметров */
.hdr-search-btn{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--ink2);flex-shrink:0;align-items:center;justify-content:center}

/* ── BUTTONS ── */
/* justify-content:center — обязательно. Без него содержимое кнопки прижато
   влево, и это видно на любой кнопке шире своего текста: «Отправить заявку»
   в форме и «Оставить заявку» на мобильном растянуты на всю ширину, а подпись
   стояла у левого края. Раньше это лечили точечно в двух местах
   (.brand-sheet-foot .btn и .brand-dd-foot .btn) — теперь правило одно,
   в базовом классе, как и в car.css. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 18px;border-radius:var(--rsm);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;border:none;text-decoration:none;transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast);white-space:nowrap}
.btn-primary{background:var(--acc);color:var(--accOn)}
.btn-primary:hover{background:var(--accHover)}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-outline:hover{border-color:var(--accBd);color:var(--accTx)}
.btn-ghost{background:var(--surf);color:var(--ink2);border:1.5px solid var(--line)}
.btn-ghost:hover{background:var(--line)}
.btn-danger{background:#FEF2F2;color:var(--red);border:1.5px solid #FECACA}
.btn-danger:hover{background:#FEE2E2}
.btn-sm{padding:7px 14px;font-size:13px}
.btn-xs{padding:5px 10px;font-size:12px}

/* ── HERO ── */
/* Поля сверху и снизу одинаковые. Раньше было 76px сверху и 56px снизу —
   блок выглядел смещённым вверх, хотя содержимое в нём отцентровано. */
.hero{position:relative;background:var(--surf);padding:64px 28px;text-align:center;border-bottom:1px solid var(--line);z-index:5}
/* overflow у .hero не обрезаем: иначе список подсказок поиска срезался по нижней границе первого экрана */
/* Отступ снизу — 36px: подзаголовок из героя убран, и этот отступ держит
   прежнее расстояние между заголовком и строкой поиска. */
.hero h1{font-family:'Onest',sans-serif;font-size:clamp(32px,5.5vw,58px);font-weight:700;line-height:1.08;letter-spacing:-1.4px;margin-bottom:36px;color:var(--ink)}
.hero h1 i{font-style:normal;color:var(--blueTx)}
/* Правил для .hero p здесь больше нет: подзаголовок из первого экрана убран,
   и стили остались бы висеть на несуществующем элементе. */

/* ── QUICK SEARCH ── */
.qsearch{display:flex;flex-direction:column;gap:10px;background:var(--w);border:1.5px solid var(--line);border-radius:var(--r);padding:16px 18px;max-width:960px;margin:0 auto;box-shadow:var(--sh)}
.qsearch-row{display:flex;align-items:center;gap:8px;width:100%}
.qsearch select,.qsearch input[type=number]{background:var(--surf);border:1.5px solid var(--line);border-radius:var(--rsm);padding:9px 12px;font-family:inherit;font-size:14px;color:var(--ink);outline:none;transition:border-color .2s;height:40px}
.qsearch select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A919E' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;padding-right:30px;cursor:pointer}
.qsearch select:focus,.qsearch input[type=number]:focus{border-color:var(--accBd);background:var(--w)}
.qsearch input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}
.qsearch .btn-primary{padding:0 22px;height:40px;font-size:14px;flex-shrink:0}

/* Search text field */
.qs-field{position:relative;flex:1;min-width:0}
.qs-field svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink3);pointer-events:none}
.qs-field input{width:100%;background:var(--surf);border:1.5px solid var(--line);border-radius:var(--rsm);padding:9px 12px 9px 34px;font-family:inherit;font-size:14px;color:var(--ink);outline:none;transition:border-color .2s;height:40px}
.qs-field input:focus{border-color:var(--accBd);background:var(--w)}

/* Autocomplete */
/* Подсказки поиска — минималистичный список: без иконок и заголовков
   групп, крупное название и серая подпись под ним (тип · количество). */
.qs-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--w);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 40px rgba(10,11,13,.12);z-index:50;display:none;padding:6px;max-height:min(420px,60vh);overflow-y:auto;text-align:left;overscroll-behavior:contain}
.qs-suggest.open{display:block;animation:qsSugIn var(--dur-fast) var(--ease)}
@keyframes qsSugIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.qs-sug-item{display:block;padding:9px 12px;border-radius:var(--rxs);cursor:pointer;transition:background var(--dur-fast) var(--ease)}
.qs-sug-item:hover,.qs-sug-item.active{background:var(--surf)}
.qs-sug-title{display:block;font-size:15px;line-height:1.3;color:var(--ink);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qs-sug-title b{font-weight:600}
.qs-sug-sub{display:block;margin-top:2px;font-size:13px;line-height:1.3;color:var(--ink3)}
.qs-sug-hint{font-size:13px;color:var(--ink3);padding:8px 12px 4px}

/* Range pair */
.qs-range{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.qs-range select,.qs-range input{flex:1;min-width:0}
.qs-dash{font-size:13px;color:var(--ink3);flex-shrink:0}
/* Divider between rows */
.qs-divider{height:1px;background:var(--line);margin:2px 0}


/* ── LAYOUT ── */
/* scroll-margin-top = высота липкой шапки. Без него scrollIntoView ставит
   верх блока в самый верх окна, и первые 64px уезжают под шапку. */
.page{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:256px 1fr;gap:28px;padding:32px 28px;align-items:start;scroll-margin-top:64px}

/* ── SIDEBAR ── */
.sidebar{position:sticky;top:80px;background:var(--w);border:1.5px solid var(--line);border-radius:var(--r);padding:22px}
.sb-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.sb-hdr h3{font-family:'Onest',sans-serif;font-size:15px;font-weight:700}
.sb-hdr button{background:none;border:none;color:var(--accTx);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.fb{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.fb:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.fb-lbl{font-size:11px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.8px;margin-bottom:9px}
.fb select,.fb input{width:100%;background:var(--surf);border:1.5px solid var(--line);border-radius:var(--rsm);padding:9px 32px 9px 12px;font-family:inherit;font-size:16px;color:var(--ink);outline:none;transition:border-color .2s}
.fb select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A919E' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.fb input{padding:9px 12px}
.fb select:focus,.fb input:focus{border-color:var(--accBd);background:var(--w)}
.fb-range{display:flex;align-items:center;gap:8px}
.fb-range input{flex:1;min-width:0;padding:9px 10px;font-size:15px}
.fb-range-dash{color:var(--ink3);flex-shrink:0}
/* Селекты в диапазоне (объём двигателя) — узкие, стрелка ближе к краю */
.fb-range input{font-size:14px;height:40px}
.fb-range input::placeholder{color:var(--ink3)}

/* Кастомный выпадающий список (объём двигателя) — см. enhanceSelect() */
.csel{position:relative;flex:1;min-width:0}
.csel-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none;padding:0!important;border:0!important}
.csel-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:6px;height:40px;padding:0 10px 0 12px;background:var(--surf);border:1.5px solid var(--line);border-radius:var(--rsm);font-family:inherit;font-size:14px;color:var(--ink3);cursor:pointer;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.csel.has-val .csel-btn{color:var(--ink)}
.csel-btn:hover{border-color:#CBD2DE}
.csel-btn svg{flex-shrink:0;color:var(--ink3);transition:transform var(--dur) var(--ease)}
.csel.open .csel-btn{border-color:var(--accBd);background:var(--w)}
.csel.open .csel-btn svg{transform:rotate(180deg)}
.csel-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csel-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:max(100%,140px);max-height:280px;overflow-y:auto;background:var(--w);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 36px rgba(10,11,13,.14);padding:6px;z-index:40;display:none;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.csel-menu::-webkit-scrollbar{width:6px}
.csel-menu::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.csel.open .csel-menu{display:block;animation:qsSugIn var(--dur-fast) var(--ease)}
/* У правого поля («До») меню прижимаем к правому краю — не уезжает за сайдбар */
.fb-range .csel:last-child .csel-menu{left:auto;right:0}
.csel-opt{padding:9px 12px;border-radius:var(--rxs);font-size:14px;color:var(--ink);cursor:pointer;white-space:nowrap;transition:background var(--dur-fast) var(--ease)}
.csel-opt:hover{background:var(--surf)}
.csel-opt.sel{font-weight:600;color:var(--accTx);background:var(--accLt)}
.csel-reset{display:flex;align-items:center;gap:8px;color:var(--ink3)}
.csel-reset:hover{color:var(--ink)}
html[data-theme="dark"] .csel-opt:hover{background:var(--surf2)}
html[data-theme="dark"] .csel-menu{box-shadow:var(--shLg)}
html[data-theme="dark"] .csel-btn:hover{border-color:#3E3E42}
.params-range .csel-btn{height:44px;padding:0 12px 0 14px;font-size:15px}
/* Год в первом экране: кастомный список вместо системного */
.qs-range .csel{text-align:left}
.qs-range .csel:last-child .csel-menu{left:auto;right:0}
.qsearch .csel-btn{height:40px;font-size:14px}
/* Числовые поля (цена, пробег) — без стрелочек-счётчиков */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.chklist{display:flex;flex-direction:column;gap:7px}
.chkitem{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink2);cursor:pointer}
.chkitem input{width:16px;height:16px;accent-color:var(--acc);cursor:pointer;flex-shrink:0}

/* ── LISTINGS ── */
.lb{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.lb h2{font-family:'Onest',sans-serif;font-size:17px;font-weight:700;display:inline}
.lb .cnt{color:var(--ink3);font-size:14px;font-weight:400;margin-left:6px}
.sort-sel{background:var(--surf);border:1.5px solid var(--line);border-radius:var(--rsm);padding:8px 28px 8px 12px;font-family:inherit;font-size:13px;color:var(--ink);cursor:pointer;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A919E' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}

/* ── PAGINATION ── */
.pagination{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:28px;padding-bottom:8px}
.pg-btn{min-width:36px;height:36px;border-radius:var(--rsm);border:1.5px solid var(--line);background:var(--w);font-family:'Onest',sans-serif;font-size:14px;font-weight:600;color:var(--ink2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast);padding:0 6px;font-variant-numeric:tabular-nums}
.pg-btn:hover{border-color:var(--accBd);color:var(--accTx)}
.pg-btn.active{background:var(--acc);border-color:var(--accBd);color:var(--accOn)}
.pg-btn:disabled{opacity:.35;cursor:default;pointer-events:none}
.pg-btn.arrow{color:var(--ink3)}
.pg-dots{color:var(--ink3);font-size:14px;padding:0 4px;line-height:36px}

/* ── CAR GRID ── */
.cargrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}

/* ── CAR CARD ── */
.card{background:var(--w);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:box-shadow .2s,border-color .2s;display:flex;flex-direction:column;text-decoration:none;color:inherit}
/* Hover только для устройств с настоящим курсором. На тач-экране браузер
   применяет :hover в точке касания при скролле, и подсветка «залипает»
   на карточке, пока не тапнешь в другое место. Внутри @media её просто нет. */
@media (hover:hover) and (pointer:fine){.card:hover{box-shadow:0 4px 24px rgba(10,11,13,.10);border-color:#bfcfe8}}

/* SCROLL TO TOP */
.to-top{position:fixed;bottom:24px;right:24px;z-index:80;width:44px;height:44px;border-radius:var(--rsm);background:var(--w);border:1px solid var(--line);box-shadow:0 4px 16px rgba(10,11,13,.12);color:var(--ink2);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .25s,transform .25s,color .15s,border-color .15s}
.to-top.show{opacity:1;pointer-events:all;transform:translateY(0)}
.to-top:hover{color:var(--accTx);border-color:var(--accBd)}
@media(max-width:768px){.to-top{bottom:18px;right:16px;width:42px;height:42px}}

/* IMAGE AREA */
.card-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#edf0f5;flex-shrink:0}
.card-img img{width:100%;height:100%;object-fit:cover;display:block}
.card-img-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#c5ccda}
.card-img-empty span{font-size:12px;color:#b0b8c8}

/* PHOTO COUNT PILL */
.card-photo-count{position:absolute;bottom:10px;left:10px;background:rgba(10,11,13,.72);color:#fff;font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--rxs);display:flex;align-items:center;gap:4px;pointer-events:none}

/* BADGE */
.card-badge{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:4px 9px;border-radius:var(--rxs);pointer-events:none;background:var(--green);color:#fff}
.card-badge.badge-order,.card-badge.badge-transit{background:var(--amber)}
.card-badge.badge-sale{background:var(--red)}

/* BODY */
.card-body{padding:14px 16px 0;display:flex;flex-direction:column;gap:0;flex:1}
.card-title-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:4px}
.card-name{font-family:'Onest',sans-serif;font-size:16px;font-weight:700;color:var(--ink);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px}
.card-year{font-family:'Onest',sans-serif;font-size:14px;font-weight:600;color:var(--ink3);flex-shrink:0;font-variant-numeric:tabular-nums}

/* SPECS ROW */
.card-specs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.spec{font-size:12px;color:var(--ink2);background:var(--surf);border-radius:var(--rxs);padding:2px 8px;white-space:nowrap}
.spec-dot{color:var(--line);font-size:11px;align-self:center;flex-shrink:0}

/* DIVIDER */
.card-divider{height:1px;background:var(--line);margin:auto -16px 0}

/* PRICE + ACTIONS */
/* Симметричный паддинг 14px сверху и снизу — цена с кнопками стоят ровно
   посередине между разделительной линией и нижним краем карточки.
   flex:1 + центрирование — на случай карточек разной «длины» контента в ряду. */
.card-foot{padding:14px 16px;display:flex;align-items:center;align-content:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.price-block{min-width:0}
.price-main{font-family:'Onest',sans-serif;font-size:17px;font-weight:700;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.3px;white-space:nowrap;flex-shrink:0}

.card-actions{display:flex;gap:6px;flex-shrink:0}
.card-btn-call{padding:7px 11px;font-size:12px;font-weight:600;background:var(--blue);color:#fff;border:none;border-radius:var(--rsm);cursor:pointer;font-family:inherit;transition:background .15s;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.card-btn-call:hover{background:var(--blueDk)}}
.card-btn-msg{padding:7px 10px;font-size:13px;background:var(--surf);color:var(--ink2);border:1px solid var(--line);border-radius:var(--rsm);cursor:pointer;font-family:inherit;transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast);display:flex;align-items:center}
@media (hover:hover) and (pointer:fine){.card-btn-msg:hover{border-color:var(--accBd);color:var(--accTx)}}

/* CITY TAG */
.card-city{font-size:11px;color:var(--ink3);display:flex;align-items:center;gap:3px;margin-bottom:6px}

/* COLOR ROW */
.card-colors{display:flex;align-items:center;gap:5px;margin-bottom:8px;flex-wrap:wrap}
.card-color-dot{width:11px;height:11px;border-radius:50%;border:1px solid rgba(128,128,128,.45);box-shadow:inset 0 0 0 8px rgba(255,255,255,.09),inset 0 2px 2px rgba(255,255,255,.4),inset 0 -1px 2px rgba(0,0,0,.28);flex-shrink:0;display:inline-block}
.card-color-lbl{font-size:11px;color:var(--ink3)}
.card-color-sep{font-size:11px;color:var(--line)}

/* ── NO RESULTS ── */
.no-res{grid-column:1/-1;text-align:center;padding:80px 20px}
.no-res svg{color:var(--line);margin-bottom:14px}
.no-res p{font-size:15px;color:var(--ink3)}

/* ── CAR DETAIL MODAL ── */
.car-ov{position:fixed;inset:0;z-index:200;background:rgba(10,11,13,.6);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease)}
.car-ov.open{opacity:1;pointer-events:all}
.car-sheet{background:var(--w);width:100%;max-width:1100px;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);border-radius:var(--r);overflow:hidden;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 24px 80px rgba(10,11,13,.3);transform:translateY(12px) scale(.98);transition:transform var(--dur) var(--ease);display:flex;flex-direction:column}
.car-sheet::-webkit-scrollbar{width:5px}
.car-sheet::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--rsm)}
.car-ov.open .car-sheet{transform:translateY(0) scale(1)}

/* ── TOP BAR: название + цена + закрыть ── */
.cs-topbar{padding:20px 24px 16px;border-bottom:1px solid var(--line);flex-shrink:0}
.cs-topbar-row1{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:4px}
.cs-title{font-family:'Onest',sans-serif;font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.3px;line-height:1.2}
.cs-topbar-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.cs-price-top{font-family:'Onest',sans-serif;font-size:22px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.3px;white-space:nowrap}
.cs-close{width:32px;height:32px;border-radius:var(--rsm);background:var(--surf);border:1px solid var(--line);cursor:pointer;font-size:16px;color:var(--ink3);display:flex;align-items:center;justify-content:center;transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast);flex-shrink:0}
.cs-close:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.cs-topbar-row2{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cs-vat{font-size:12px;color:var(--ink3)}
.cs-vat b{color:var(--ink2);font-weight:600}

.cs-art{display:inline-flex;align-items:center;gap:4px;background:var(--surf);border:1px solid var(--line);border-radius:var(--rxs);padding:2px 8px;font-size:11px;font-family:'Onest',sans-serif;font-weight:600;color:var(--ink3);letter-spacing:.3px;cursor:pointer;transition:border-color .14s,color .14s}
.cs-art:hover{border-color:var(--accBd);color:var(--accTx)}

/* ── ACTION BUTTONS ROW ── */
.cs-actions{display:flex;gap:10px;padding:14px 24px;border-bottom:1px solid var(--line);flex-shrink:0}
.cs-btn-call{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 24px;background:var(--blue);color:#fff;border:none;border-radius:var(--rsm);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s}
.cs-btn-call:hover{background:var(--blueDk)}
.cs-btn-msg{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;background:var(--surf);color:var(--ink2);border:1.5px solid var(--line);border-radius:var(--rsm);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast)}
.cs-btn-msg:hover{border-color:var(--accBd);color:var(--accTx)}

/* ── MESSENGER POPUP ── */
.msg-popup-ov{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease)}
.msg-popup-ov.open{opacity:1;pointer-events:all}
.msg-popup-bg{position:absolute;inset:0;background:rgba(10,11,13,.5)}
.msg-popup{position:relative;background:var(--w);border-radius:var(--r);width:100%;max-width:360px;padding:8px 0 12px;box-shadow:0 24px 60px rgba(10,11,13,.2);transform:scale(.92) translateY(10px);transition:transform var(--dur) var(--ease)}
.msg-popup-ov.open .msg-popup{transform:scale(1) translateY(0)}
.msg-popup-handle{display:none}
.msg-popup-title{text-align:center;font-size:13px;color:var(--ink3);margin:18px 44px 14px;line-height:1.5}
.msg-popup-title b{display:block;color:var(--ink);font-size:15px;font-weight:700;margin-top:2px}
.msg-popup-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border:none;border-radius:var(--rsm);background:var(--surf);color:var(--ink2);font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;transition:background .14s}
.msg-popup-close:hover{background:var(--line);color:var(--ink)}
.msg-btn{display:flex;align-items:center;gap:14px;padding:12px 20px;font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);background:none;border:none;width:100%;cursor:pointer;text-decoration:none;transition:background .14s;border-radius:var(--rsm);margin:0 0 2px}
.msg-btn:hover{background:var(--surf)}
.msg-btn-sub{font-size:12px;color:var(--ink3);font-weight:400;margin-top:1px}
.msg-popup-cancel{display:block;width:calc(100% - 32px);margin:8px 16px 4px;padding:13px;background:var(--surf);border:none;border-radius:var(--rsm);font-family:inherit;font-size:15px;font-weight:600;color:var(--ink2);cursor:pointer;transition:background .14s}
.msg-popup-cancel:hover{background:var(--line)}

@media(max-width:600px){
  .msg-popup-ov{align-items:flex-end;justify-content:center;padding:0}
  .msg-popup{max-width:100%;border-radius:var(--rlg) var(--rlg) 0 0;padding:0 0 calc(16px + env(safe-area-inset-bottom));transform:translateY(100%)}
  .msg-popup-ov.open .msg-popup{transform:translateY(0)}
  .msg-popup-title{margin:16px 44px 10px}
}

/* ── MAIN CONTENT: specs left + gallery right ── */
.cs-body{display:grid;grid-template-columns:300px 1fr;gap:0;flex:1}

/* ── LEFT: SPECS COLUMN ── */
.cs-specs{padding:20px 24px;overflow-y:auto;overscroll-behavior:contain;border-right:1px solid var(--line)}
.cs-specs::-webkit-scrollbar{width:3px}
.cs-specs::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--rsm)}

.cs-spec-group{margin-bottom:22px}
.cs-spec-group:last-child{margin-bottom:0}
.cs-group-title{font-family:'Onest',sans-serif;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:12px}
.cs-spec-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.cs-spec-row:last-child{border-bottom:none}
.cs-spec-label{font-size:12px;color:var(--ink3);flex-shrink:0}
.cs-spec-val{font-size:13px;font-weight:600;color:var(--ink);text-align:right;display:flex;align-items:center;gap:5px}
.cs-color-dot{width:12px;height:12px;border-radius:50%;border:1px solid rgba(128,128,128,.45);box-shadow:inset 0 0 0 8px rgba(255,255,255,.09),inset 0 2px 2px rgba(255,255,255,.4),inset 0 -1px 2px rgba(0,0,0,.28);flex-shrink:0;display:inline-block}

/* Features pills */
.cs-features-title{font-family:'Onest',sans-serif;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:10px}
.cs-pills{display:flex;flex-wrap:wrap;gap:5px}
.cs-pill{background:var(--surf);border:1px solid var(--line);border-radius:var(--rxs);padding:3px 10px;font-size:11px;color:var(--ink2);font-weight:500}

/* Description */
.cs-desc{font-size:13px;line-height:1.7;color:var(--ink2);margin-top:6px}

/* ── RIGHT: GALLERY COLUMN ── */
.cs-gallery{display:flex;flex-direction:column;padding:16px;gap:10px;background:var(--surf)}

/* Main photo 4:3 */
.cs-main{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;cursor:zoom-in;background:#0c0d10;flex-shrink:0}
.cs-main img{width:100%;height:100%;object-fit:cover;display:block}
.cs-main-empty{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#3a3f52;cursor:default}
.cs-main-empty span{font-size:12px}

/* Arrow buttons over main photo */
.cs-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:var(--rsm);background:rgba(0,0,0,.55);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;transition:background .14s}
.cs-arrow:hover{background:rgba(0,0,0,.7)}
.cs-arrow:disabled{opacity:.15;cursor:default;pointer-events:none}
.cs-arrow-prev{left:10px}
.cs-arrow-next{right:10px}

/* Counter + zoom button */
.cs-main-counter{position:absolute;bottom:10px;left:12px;background:rgba(0,0,0,.5);color:#fff;font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--rxs);font-family:'Onest',sans-serif;font-variant-numeric:tabular-nums;pointer-events:none}
.cs-main-zoom{position:absolute;bottom:10px;right:10px;width:30px;height:30px;border-radius:var(--rsm);background:rgba(0,0,0,.4);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;transition:background .14s}
.cs-main-zoom:hover{background:rgba(0,0,0,.7)}

/* Thumbnail GRID below main — авто.ру стиль */
.cs-thumbgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.cs-thumb{position:relative;aspect-ratio:4/3;border-radius:var(--rxs);overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color .14s,opacity .14s;opacity:.7}
.cs-thumb:hover{opacity:1}
.cs-thumb.on{border-color:var(--accBd);opacity:1}
.cs-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* «Ещё N фото» overlay на последней миниатюре */
.cs-thumb-more{position:absolute;inset:0;background:rgba(10,11,13,.6);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;text-align:center;line-height:1.3}

/* ── FULLSCREEN LIGHTBOX ── */
.lightbox{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.96);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease)}
.lightbox.open{opacity:1;pointer-events:all}
.lightbox img{max-width:calc(100vw - 120px);max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);object-fit:contain;border-radius:var(--r);display:block;user-select:none}
.lb-close{position:fixed;top:16px;right:16px;width:40px;height:40px;border-radius:var(--rsm);background:rgba(255,255,255,.12);border:none;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .14s;z-index:6}
.lb-close:hover{background:rgba(255,255,255,.24)}
.lb-arrow{position:fixed;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:var(--rsm);background:rgba(255,255,255,.1);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .14s;z-index:6}
.lb-arrow:hover{background:rgba(255,255,255,.22)}
.lb-arrow:disabled{opacity:.18;pointer-events:none}
.lb-prev{left:16px}
.lb-next{right:16px}
.lb-counter{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.5);font-size:12px;font-family:'Onest',sans-serif;font-variant-numeric:tabular-nums}

/* ── RESPONSIVE ── */

/* ── TOAST ── */
.toast{position:fixed;bottom:24px;right:24px;z-index:500;background:var(--ink);color:#fff;padding:13px 20px;border-radius:var(--rsm);font-size:14px;font-weight:500;transform:translateY(64px);opacity:0;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);box-shadow:0 8px 28px rgba(10,11,13,.25)}
.toast.show{transform:translateY(0);opacity:1}
.toast.ok{background:var(--green)}
.toast.warn{background:var(--amber)}

/* ── RESPONSIVE ── */
.mob-btns{display:none}
.burger-btn{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--ink);flex-shrink:0;align-items:center;justify-content:center}
/* ═══ АДАПТИВ — ПЛАНШЕТ (≤1024px) ═══ */
@media(max-width:1024px){
  .page{grid-template-columns:220px 1fr;gap:20px;padding:24px 20px}
  .cargrid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
  .hero{padding:52px 20px}
  .hdr{padding:0 20px}
  .cs-body{grid-template-columns:1fr}
  .cs-specs{border-right:none;border-bottom:1px solid var(--line)}
  .cs-thumbgrid{grid-template-columns:repeat(5,1fr)}
}

/* ═══ АДАПТИВ — МОБИЛЬНЫЙ (≤768px) ═══ */
@media(max-width:768px){
  /* Header */
  .hdr{padding:0 16px;gap:8px;height:56px}
  .burger-btn{display:flex}
  .hdr-search-btn{display:flex;margin-left:auto}
  .hdr-right{display:none}
  .hdr-nav{display:none}
  .logo{font-size:18px}

  /* Hero — по центру, крупнее, с тем же градиентом что на десктопе.
     Поля сверху и снизу одинаковые. У заголовка margin-bottom обнулён:
     строка поиска на мобильном скрыта, и этот отступ просто висел снизу
     пустотой, сдвигая текст вверх. */
  .hero{padding:48px 20px;text-align:center}
  .hero h1{font-size:clamp(30px,8.5vw,40px);letter-spacing:-.8px;margin-bottom:0}

  /* Quick search скрыт */
  .qsearch{display:none}

  /* Layout */
  .page{grid-template-columns:1fr;padding:12px 16px;gap:0;background:var(--w);min-height:calc(100vh - 56px);min-height:calc(100dvh - 56px);scroll-margin-top:56px}
  .sidebar{display:none}

  /* Overlay */
  .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(10,11,13,.5);z-index:140}
  .sidebar-overlay.open{display:block}

  /* Кнопка «Параметры и сортировка» */
  .mob-filter-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:var(--w);border:1.5px solid var(--line);border-radius:var(--rsm);font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;margin-bottom:14px;box-shadow:var(--sh)}
  .mob-filter-btn svg{color:var(--accTx)}
  .mob-btns{display:flex;gap:8px;margin-bottom:14px}
  .sort-sel{display:none}
  .mob-filter-badge{background:var(--acc);color:var(--accOn);font-size:11px;font-weight:700;border-radius:var(--pill);width:18px;height:18px;display:none;align-items:center;justify-content:center;flex-shrink:0}
  .mob-filter-badge.show{display:inline-flex}

  /* Cards — убираем кнопки действий, только цена */
  .cargrid{grid-template-columns:1fr 1fr;gap:8px}
  .card-body{padding:10px 12px 0}
  .card-divider{margin-left:-12px;margin-right:-12px}
  .card-name{font-size:14px}
  .card-year{font-size:13px}
  .spec{font-size:11px;padding:2px 6px}
  .card-actions{display:flex}
  .card-foot{padding:12px}
  .price-main{font-size:16px}

  /* Pagination */
  .pg-btn{min-width:32px;height:32px;font-size:13px}

  /* Car detail — шторка снизу */
  .car-ov{padding:0;align-items:flex-end}
  .car-sheet{border-radius:var(--rlg) var(--rlg) 0 0;max-height:95vh;max-height:95dvh;overflow-y:auto}
  .cs-topbar{padding:12px 16px 10px}
  .cs-price-top{font-size:17px}
  .cs-specs{padding:14px 16px}
  .cs-gallery{padding:12px;gap:8px}
  .cs-thumbgrid{grid-template-columns:repeat(4,1fr);gap:4px}
  .cs-actions{padding:10px 16px;gap:8px}
  .cs-btn-call,.cs-btn-msg{padding:10px 14px;font-size:13px}
  .cs-btn-msg{display:inline-flex}
  .lb-prev{left:8px}
  .lb-next{right:8px}
}

/* ═══ АДАПТИВ — МИНИ (≤420px) ═══
   .cargrid здесь больше НЕ схлопывается в 1 колонку: iPhone XR (414px),
   15 Pro (393px) и большинство современных телефонов уже помещают две
   карточки — .cargrid{grid-template-columns:1fr 1fr} из блока ≤768px
   работает и здесь без изменений. В одну колонку список уходит только
   на действительно крошечных экранах, см. блок ≤340px ниже. */
@media(max-width:420px){
  .cs-thumbgrid{grid-template-columns:repeat(3,1fr)}
  .qsearch-row select{min-width:100%}
}

/* ═══ АДАПТИВ — МИКРО (≤340px) ═══
   Совсем узкие экраны (iPhone SE 1-го поколения и т.п., 320-340px) —
   двум карточкам в ряд уже не хватает места без потери читаемости,
   возвращаемся к одной колонке. */
@media(max-width:340px){
  .cargrid{grid-template-columns:1fr}
}

/* Footer mobile */
@media(max-width:768px){
  footer [style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr!important}
  footer [style*="justify-content:space-between"]{flex-direction:column;gap:4px;text-align:center}
}

/* ═══ ФИЛЬТР-ШТОРКА (BOTTOM SHEET) ═══ */
.filter-sheet{position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--w);border-radius:var(--rlg) var(--rlg) 0 0;box-shadow:0 -8px 40px rgba(10,11,13,.15);transform:translateY(100%);will-change:transform;transition:transform var(--dur-slow) var(--ease);display:flex;flex-direction:column;max-height:88vh;max-height:88dvh}
.filter-sheet.open{transform:translateY(0)}
.fs-handle{width:40px;height:4px;border-radius:var(--rsm);background:var(--line);margin:0 auto;flex-shrink:0;cursor:grab;padding:16px 60px;background-clip:content-box}
.fs-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 12px;border-bottom:1px solid var(--line);flex-shrink:0}
.fs-header h3{font-family:'Onest',sans-serif;font-size:17px;font-weight:700}
.fs-reset{background:none;border:none;font-family:inherit;font-size:14px;color:var(--accTx);cursor:pointer;font-weight:600;padding:0}
.fs-body{overflow-y:auto;overscroll-behavior:contain;padding:0 20px;flex:1}
.fs-body::-webkit-scrollbar{width:3px}
.fs-body::-webkit-scrollbar-thumb{background:var(--line)}
.fs-section{padding:18px 0;border-bottom:1px solid var(--line)}
.fs-section:last-child{border-bottom:none}
.fs-label{font-size:12px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.7px;margin-bottom:12px}

/* Пилюли-теги для выбора */
.fs-pills{display:flex;flex-wrap:wrap;gap:8px}
.fs-pill{padding:8px 16px;border-radius:var(--rsm);border:1.5px solid var(--line);background:var(--surf);font-family:inherit;font-size:14px;font-weight:500;color:var(--ink2);cursor:pointer;transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast);user-select:none}
.fs-pill.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Диапазон цены/года в шторке */
.fs-range{display:flex;align-items:center;gap:10px}
.fs-range input,.fs-range select{flex:1;min-width:0;background:var(--surf);border:1.5px solid var(--line);border-radius:var(--rsm);padding:11px 14px;font-family:inherit;font-size:15px;color:var(--ink);outline:none;transition:border-color .2s}
.fs-range input:focus,.fs-range select:focus{border-color:var(--accBd);background:var(--w)}
.fs-range input::-webkit-inner-spin-button{-webkit-appearance:none}
.fs-range-dash{font-size:16px;color:var(--ink3);flex-shrink:0}

/* Sort pills */
.fs-sort{display:flex;flex-direction:column;gap:0}
.fs-sort-item{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);cursor:pointer;font-size:15px;color:var(--ink2);transition:color .14s}
.fs-sort-item:last-child{border-bottom:none}
.fs-sort-item.on{color:var(--accTx);font-weight:600}
.fs-sort-item .fs-check{width:20px;height:20px;border-radius:var(--rxs);border:2px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast)}
.fs-sort-item.on .fs-check{border-color:var(--accBd);background:var(--acc)}

/* Кнопка «Показать N объявлений» */
.fs-footer{padding:14px 20px 24px;flex-shrink:0}
.fs-apply{width:100%;padding:15px;background:var(--ink);color:#fff;border:none;border-radius:var(--rsm);font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:background .15s}
.fs-apply:hover{background:#262628}

/* ── NEW MOBILE SHEETS ── */
.mob-params-btn,.mob-sort-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 16px;background:var(--w);border:1.5px solid var(--line);border-radius:var(--rsm);font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap;box-shadow:var(--sh);transition:border-color .15s}
.mob-params-btn:hover,.mob-sort-btn:hover{border-color:var(--accBd)}
.mob-params-btn svg,.mob-sort-btn svg{color:var(--accTx);flex-shrink:0}
@media(max-width:380px){.mob-params-btn,.mob-sort-btn{font-size:13px;padding:9px 10px;gap:5px}}
.params-sheet,.brand-sheet{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:200;background:var(--w);display:flex;flex-direction:column;transform:translateX(100%);will-change:transform;transition:transform var(--dur-slow) var(--ease);overflow:hidden}
.params-sheet.open,.brand-sheet.open{transform:translateX(0)}
.brand-sheet{z-index:210}
.params-hdr{display:flex;align-items:center;height:56px;padding:0 16px;border-bottom:1px solid var(--line);flex-shrink:0;gap:0}
.params-hdr h3{flex:1;text-align:center;font-family:'Onest',sans-serif;font-size:17px;font-weight:700;margin:0}
.params-close{background:none;border:none;font-size:22px;color:var(--ink3);cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.params-reset-btn{background:none;border:none;font-family:inherit;font-size:14px;color:var(--accTx);cursor:pointer;font-weight:600;white-space:nowrap;flex-shrink:0;padding:0}
.params-body{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;flex:1;width:100%;box-sizing:border-box}
.params-row{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s}
.params-row:active{background:var(--surf)}
.params-row-label{font-size:15px;font-weight:500}
.params-row-val{font-size:14px;color:var(--accTx);font-weight:600;display:flex;align-items:center;gap:4px}
.params-sec{font-size:11px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.7px;padding:12px 20px 8px;background:var(--surf)}
.params-inner{padding:12px 20px 16px;border-bottom:1px solid var(--line)}
.params-inner-lbl{font-size:12px;color:var(--ink3);margin-bottom:8px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.params-range{display:flex;align-items:center;gap:10px}
.params-range input,.params-range select{flex:1;min-width:0;padding:10px 14px;border:1.5px solid var(--line);border-radius:var(--rsm);font-family:inherit;font-size:15px;background:var(--surf);outline:none;color:var(--ink)}
.params-range input:focus,.params-range select:focus{border-color:var(--accBd)}
.params-range-dash{color:var(--ink3);flex-shrink:0}
.params-pills{display:flex;flex-wrap:wrap;gap:8px}
.params-pill{padding:8px 16px;border-radius:var(--rsm);border:1.5px solid var(--line);background:var(--surf);font-family:inherit;font-size:14px;font-weight:500;color:var(--ink2);cursor:pointer;transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast);user-select:none}
.params-pill.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.params-footer{padding:14px 20px;padding-bottom:calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);flex-shrink:0}
.params-apply{width:100%;padding:15px;background:var(--ink);color:#fff;border:none;border-radius:var(--rsm);font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:background .15s}
.params-apply:hover{background:#262628}
.brand-search-box{position:relative;padding:12px 16px;border-bottom:1px solid var(--line);flex-shrink:0}
.brand-search-box svg{position:absolute;left:28px;top:50%;transform:translateY(-50%);color:var(--ink3);pointer-events:none}
.brand-search-box input{width:100%;padding:11px 14px 11px 40px;border:1.5px solid var(--line);border-radius:var(--rsm);font-family:inherit;font-size:15px;color:var(--ink);background:var(--surf);outline:none}
.brand-search-box input:focus{border-color:var(--accBd)}
.brand-list-wrap{flex:1;overflow-y:auto;overscroll-behavior:contain}
.brand-row{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line);cursor:pointer;font-size:15px;transition:background .12s}
.brand-row.sel{background:var(--accLt);color:var(--accTx);font-weight:600}
.brand-chk{width:22px;height:22px;border-radius:var(--rxs);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast)}
.brand-row.sel .brand-chk{background:var(--acc);border-color:var(--accBd)}
.brand-sheet-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;gap:10px}
.brand-sheet-foot .btn{flex:1;justify-content:center}

/* ── Десктоп: дропдаун выбора марок (мультивыбор) ── */
.brand-dd{position:relative}
.brand-dd-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;height:40px;background:var(--surf);border:1.5px solid var(--line);border-radius:var(--rsm);font-family:inherit;font-size:14px;color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;transition:border-color .15s}
.brand-dd-btn:hover{border-color:#bfcfe8}
.brand-dd.open .brand-dd-btn{border-color:var(--accBd)}
.brand-dd-btn span{overflow:hidden;text-overflow:ellipsis}
.brand-dd-btn svg{flex-shrink:0;transition:transform .18s;color:var(--ink3)}
.brand-dd.open .brand-dd-btn svg{transform:rotate(180deg)}
.brand-dd-btn.has-sel{color:var(--accTx);font-weight:600;border-color:#bfcfe8}
.brand-dd-menu{position:fixed;min-width:240px;background:var(--w);border:1.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shLg);z-index:120;display:none;flex-direction:column;max-height:340px;overflow:hidden}
.brand-dd.open .brand-dd-menu{display:flex}
.brand-dd-search{padding:10px;border-bottom:1px solid var(--line)}
.brand-dd-search input{width:100%;padding:8px 12px;border:1.5px solid var(--line);border-radius:var(--rsm);font-family:inherit;font-size:14px;color:var(--ink);background:var(--surf);outline:none}
.brand-dd-search input:focus{border-color:var(--accBd)}
.brand-dd-list{overflow-y:auto;overscroll-behavior:contain;padding:4px}
.brand-dd-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--rxs);cursor:pointer;font-size:14px;transition:background .12s}
.brand-dd-item:hover{background:var(--surf)}
.brand-dd-chk{width:18px;height:18px;border-radius:var(--rxs);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast)}
.brand-dd-item.sel{color:var(--accTx);font-weight:600}
.brand-dd-item.sel .brand-dd-chk{background:var(--acc);border-color:var(--accBd)}
.brand-dd-foot{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.brand-dd-foot .btn{flex:1;justify-content:center;padding:8px}
.brand-dd-clear{background:none;border:1.5px solid var(--line);border-radius:var(--rsm);font-family:inherit;font-size:13px;font-weight:600;color:var(--ink2);cursor:pointer;padding:8px 14px}
.brand-dd-clear:hover{border-color:var(--accBd);color:var(--accTx)}
.sort-sheet{position:fixed;inset:0;z-index:200;background:var(--w);display:flex;flex-direction:column;transform:translateX(100%);will-change:transform;transition:transform var(--dur-slow) var(--ease)}
.sort-sheet.open{transform:translateX(0)}
.sort-handle{display:none}
.sort-sheet-title{display:flex;align-items:center;height:56px;padding:0 16px;border-bottom:1px solid var(--line);flex-shrink:0;gap:0}
.sort-sheet-title span{flex:1;text-align:center;font-family:'Onest',sans-serif;font-size:17px;font-weight:700}
.sort-rows{flex:1;overflow-y:auto;overscroll-behavior:contain}
.sort-row{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--line);cursor:pointer;font-size:15px;transition:background .12s}
.sort-row:last-child{border-bottom:none}
.sort-row.active{color:var(--accTx);font-weight:600}
.sort-chk{width:22px;height:22px;border-radius:var(--rxs);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast)}
.sort-row.active .sort-chk{background:var(--acc);border-color:var(--accBd)}

/* ── BURGER MENU ── */
.burger-menu{position:fixed;inset:0;z-index:300;pointer-events:none}
.burger-bg{position:absolute;inset:0;background:rgba(10,11,13,.5);opacity:0;transition:opacity var(--dur-slow) var(--ease)}
.burger-panel{position:absolute;top:0;right:0;bottom:0;width:300px;max-width:88vw;overflow-y:auto;overscroll-behavior:contain;background:var(--w);transform:translateX(100%);will-change:transform;transition:transform var(--dur-slow) var(--ease);display:flex;flex-direction:column;box-shadow:-8px 0 32px rgba(10,11,13,.15)}
.burger-menu.open{pointer-events:all}
.burger-menu.open .burger-bg{opacity:1}
.burger-menu.open .burger-panel{transform:translateX(0)}
.burger-hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;flex-shrink:0}
.burger-logo{font-family:'Syne',sans-serif;font-weight:800;font-size:17px;color:var(--ink);letter-spacing:-.3px;white-space:nowrap}
.burger-logo span{color:var(--blueTx)}
.burger-close{background:var(--surf);border:none;color:var(--ink2);cursor:pointer;width:34px;height:34px;border-radius:var(--rsm);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px;transition:background .15s}
.burger-close:active{background:var(--line)}
.burger-links{padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.burger-link{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 12px;border-radius:var(--rsm);font-family:'Onest',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.3px;color:var(--ink);text-decoration:none;transition:background .12s}
.burger-link:active{background:var(--surf)}
.burger-link svg{color:var(--ink3);flex-shrink:0}
.burger-link.active{color:var(--blueTx)}
.burger-link.active svg{color:var(--blueTx)}
.burger-foot{margin-top:auto;padding:20px 22px 22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.burger-phone{text-decoration:none;line-height:1.35}
.burger-phone b{display:block;font-family:'Onest',sans-serif;font-size:20px;font-weight:700;color:var(--ink);letter-spacing:.2px}
.burger-phone span{font-size:13px;color:var(--ink3)}
/* min-height у трёх плашек подвала меню одинаковая: без неё «Тёмная тема»
   была 52px, а Telegram и MAX — по 50.5px, и в столбце друг под другом
   разнобой заметен. */
.burger-tg{min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;background:#229ED9;color:#fff;border-radius:var(--rsm);font-family:inherit;font-size:15px;font-weight:600;text-decoration:none;transition:background .15s}
.burger-tg:active{background:#1a8bc0}
.burger-max{min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;background:#0068FF;color:#fff;border-radius:var(--rsm);font-family:inherit;font-size:15px;font-weight:600;text-decoration:none;transition:background .15s}
.burger-max:active{background:#0055d4}

/* ══ ЗАЯВКА НА ПОДБОР АВТО ══ */
.req-cta{position:relative;overflow:hidden;margin-top:24px;background:#1C1C1E;border-radius:var(--r);padding:44px 48px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px 48px}
.req-cta>*{position:relative;z-index:1}
.req-cta-text h3{font-family:'Onest',sans-serif;font-size:24px;font-weight:700;color:#fff;letter-spacing:-.4px;margin-bottom:8px}
.req-cta-text p{font-size:15px;color:rgba(255,255,255,.6);max-width:460px;line-height:1.6}
.req-cta-btn{flex-shrink:0;background:var(--acc)!important;color:var(--accOn)!important;font-size:15px;font-weight:600;padding:13px 26px;border-radius:var(--rsm)}
.req-cta-btn:hover{background:var(--accHover)!important}

.req-ov{position:fixed;inset:0;z-index:180;display:none;align-items:center;justify-content:center;padding:20px}
.req-ov.open{display:flex}
.req-ov::before{content:'';position:absolute;inset:0;background:rgba(10,11,13,.5)}
.req-sheet{position:relative;background:var(--w);border-radius:var(--r);width:100%;max-width:560px;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;padding:22px 24px 24px;box-shadow:0 24px 80px rgba(10,11,13,.3)}
.req-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.req-hdr h3{font-family:'Onest',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.3px}
.req-close{background:var(--surf);border:none;width:34px;height:34px;border-radius:var(--rsm);font-size:16px;color:var(--ink2);cursor:pointer;flex-shrink:0}
.req-close:hover{background:var(--line)}
.req-sub{font-size:14px;color:var(--ink3);line-height:1.5;margin-bottom:16px}
.req-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.req-fg{display:flex;flex-direction:column;gap:5px}
.req-fg.full{grid-column:1 / -1}
.req-fg label{font-size:12px;font-weight:600;color:var(--ink3)}
.req-fg input,.req-fg textarea{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--rsm);font-family:inherit;font-size:15px;color:var(--ink);background:var(--surf);outline:none;transition:border-color .15s}
.req-fg input:focus,.req-fg textarea:focus{border-color:var(--accBd)}
.req-fg textarea{resize:vertical;min-height:64px}
/* Поле-ловушка для спам-ботов: человеку не видно, скринридер его пропускает
   (aria-hidden в разметке), а бот заполняет и выдаёт себя. Намеренно НЕ
   display:none — часть ботов такие поля игнорирует специально. */
.req-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* Согласие на обработку персональных данных */
.req-consent{display:flex;align-items:flex-start;gap:9px;margin:14px 0 4px;cursor:pointer;
  font-size:13px;line-height:1.45;color:var(--ink3)}
.req-consent input{flex:none;width:16px;height:16px;margin-top:1px;accent-color:var(--acc);cursor:pointer}
.req-consent a{color:var(--accTx);text-decoration:underline;text-underline-offset:2px}
.req-consent a:hover{text-decoration:none}
.req-submit{width:100%;margin-top:6px;padding:13px;font-size:15px;font-weight:700}
.req-success{text-align:center;padding:10px 4px 4px}
.req-success-ico{width:56px;height:56px;border-radius:50%;background:#ECFDF5;color:#059669;display:flex;align-items:center;justify-content:center;font-size:30px;margin:6px auto 14px}
.req-success h3{font-family:'Onest',sans-serif;font-size:20px;font-weight:800;margin-bottom:8px}
.req-success p{font-size:14px;color:var(--ink3);line-height:1.5;margin-bottom:18px;max-width:400px;margin-left:auto;margin-right:auto}
.req-succ-btns{display:flex;gap:10px;margin-bottom:14px}
.req-mbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:var(--rsm);font-family:inherit;font-size:14px;font-weight:600;color:#fff;border:none;cursor:pointer;text-decoration:none;transition:filter .15s}
.req-mbtn:hover{filter:brightness(1.07)}
.req-mbtn.tg{background:#229ED9}
.req-mbtn.mx{background:#0068FF}
.req-close-btn{width:100%;padding:12px;background:var(--surf);border:none;border-radius:var(--rsm);font-family:inherit;font-size:15px;font-weight:600;color:var(--ink2);cursor:pointer}
.req-close-btn:hover{background:var(--line)}
@media(max-width:600px){
  .req-ov{align-items:flex-end;padding:0}
  .req-sheet{max-width:100%;border-radius:var(--rlg) var(--rlg) 0 0;max-height:92vh;max-height:calc(100dvh - 12px);padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .req-grid{grid-template-columns:1fr}
  .req-cta{grid-template-columns:1fr;padding:30px 24px;text-align:left}
  .req-cta-btn{width:100%}
}

/* ═══════════ LAYER: переключатель вида / список ═══════════ */
/* ПЕРЕКЛЮЧАТЕЛЬ ВИД */
.lb-right{display:flex;align-items:center;gap:10px}
.view-toggle{display:flex;gap:2px;background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:2px}
/* Квадрат 34×34: раньше было 34×30, и подсветка активного режима выглядела
   приплюснутой. Заодно вся группа выросла до 40px и сравнялась по высоте
   с соседним селектом сортировки. */
.vt-btn{width:34px;height:34px;border:none;background:none;border-radius:var(--rxs);color:var(--ink3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.vt-btn:hover{color:var(--ink)}
.vt-btn.on{background:var(--w);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
html[data-theme="dark"] .vt-btn.on{background:var(--surf2);color:var(--ink)}
@media(max-width:560px){.view-toggle{display:none}}
/* ВЫДАЧА СПИСКОМ */
#grid.listmode{display:flex;flex-direction:column;gap:0}
.carrow{display:grid;grid-template-columns:264px 1fr 132px 212px;gap:20px;padding:20px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;align-items:start}
@media (hover:hover) and (pointer:fine){.carrow:hover .rw-title{color:var(--accTx)}}
.rw-img{position:relative;width:264px;height:176px;border-radius:var(--r);overflow:hidden;background:var(--surf);flex-shrink:0}
.rw-img img{width:100%;height:100%;object-fit:cover;display:block}
.rw-img-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#c5ccda}
.rw-badge{position:absolute;left:10px;top:10px;font-size:11px;font-weight:700;color:#fff;padding:4px 9px;border-radius:var(--rxs);background:var(--green)}
.rw-badge.badge-order,.rw-badge.badge-transit{background:var(--amber)}
.rw-badge.badge-sale{background:var(--red)}
.rw-count{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#fff;background:rgba(10,11,13,.62);padding:3px 8px;border-radius:var(--rxs)}
.rw-title{font-family:'Onest',sans-serif;font-weight:700;font-size:20px;color:var(--ink);line-height:1.2;transition:color .15s}
.rw-trim{margin-top:5px;font-size:13px;color:var(--ink2)}
.rw-spec{margin-top:9px;font-size:14px;color:var(--ink);font-weight:500}
.rw-spec2{margin-top:3px;font-size:13px;color:var(--ink3)}
/* Опции — обычной строкой через запятую, без плашек: в ряду карточки они
   теперь читаются как продолжение характеристик, а не как отдельные кнопки.
   Ограничение в две строки не даёт длинному списку раздуть карточку. */
.rw-feats{margin-top:8px;font-size:13px;color:var(--ink3);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rw-meta{padding-top:2px}
.rw-year{font-size:16px;font-weight:700;color:var(--ink)}
.rw-avail{margin-top:5px;font-size:13px;font-weight:600}
.rw-avail.is-stock{color:var(--green)}
.rw-avail.is-order{color:var(--amber)}
.rw-km{margin-top:4px;font-size:13px;color:var(--ink3)}
.rw-price{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.rw-price-main{font-family:'Onest',sans-serif;font-weight:800;font-size:22px;color:var(--ink);letter-spacing:-.5px}
.rw-vat{font-size:11px;color:var(--ink3);margin-top:-3px}
.rw-call{margin-top:6px;display:inline-flex;align-items:center;gap:7px;background:var(--green);color:#fff;border:none;font-family:inherit;font-weight:700;font-size:14px;padding:11px 16px;border-radius:var(--rsm);cursor:pointer;white-space:nowrap;transition:background .15s;text-decoration:none}
@media (hover:hover) and (pointer:fine){.rw-call:hover{filter:brightness(.94)}}
.rw-call.revealed{background:var(--surf);color:var(--ink);border:1px solid var(--line);font-size:15px;letter-spacing:.3px}
.rw-msg{background:none;border:none;color:var(--accTx);font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;padding:2px}
@media (hover:hover) and (pointer:fine){.rw-msg:hover{text-decoration:underline}}
.rw-city{font-size:12px;color:var(--ink3);display:flex;align-items:center;gap:4px;justify-content:flex-end}
@media(max-width:860px){
  .carrow{grid-template-columns:180px 1fr;gap:14px 16px}
  .rw-img{width:180px;height:130px}
  .rw-meta{grid-column:2;padding-top:0}
  .rw-price{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;text-align:left;gap:12px;padding-top:10px;border-top:1px dashed var(--line);margin-top:4px}
  .rw-city{width:100%;justify-content:flex-start}
}
@media(max-width:520px){
  .carrow{grid-template-columns:1fr}
  .rw-img{width:100%;height:200px}
  .rw-meta{grid-column:1}
}


/* ── ОТКЛИК НА ТАП (только устройства без курсора) ─────────────────────
   Подсветку по наведению мы с тач-экранов убрали, и нажатие перестало
   как-либо отзываться. Здесь возвращаем отклик правильным для тача способом:
   через :active. В отличие от :hover он не залипает — браузер сам снимает
   его, как только палец поехал в скролл.
   Поджатие мелкое (1.5–4%) и очень короткое: палец должен успеть увидеть
   реакцию до перехода на страницу. Анимируется transform — он считается
   на GPU и не вызывает пересчёт разметки, поэтому кадры не проседают. */
@media (hover:none){
  .card,.carrow{transition:transform .09s ease-out}
  .card:active,.carrow:active{transform:scale(.985)}
  .card-btn-call,.card-btn-msg,.rw-call,.btn{transition:transform .09s ease-out,background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
  .card-btn-call:active,.card-btn-msg:active,.rw-call:active,.btn:active{transform:scale(.96)}
}


/* ═══ МОБИЛЬНЫЕ ПРАВКИ ════════════════════════════════════════════════
   1) iOS Safari принудительно масштабирует всю страницу, когда палец
      попадает в поле ввода с font-size меньше 16px — и обратно уже не
      отматывает. Единственное надёжное лекарство — ровно 16px на телефоне.
      На десктопе поля остаются прежнего размера.
   2) Плавающие элементы прижаты к нижнему краю. На iPhone там живёт
      полоска-индикатор home, и без запаса они наезжают прямо на неё.
      body{padding-bottom:env(...)} на position:fixed не действует —
      отступ нужно задавать самим элементам.                              */
@media (max-width:768px){
  .qsearch select,.qsearch input[type=number],
  .qs-field input,
  .fb-range input,.fb-range select,
  .fs-range input,.fs-range select,
  .params-range input,.params-range select,
  .brand-search-box input,
  .brand-dd-search input,
  .req-fg input,.req-fg textarea{font-size:16px}

  .to-top{bottom:calc(18px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(16px + env(safe-area-inset-bottom))}
  .lb-counter{bottom:calc(18px + env(safe-area-inset-bottom))}
}


/* ── ПРИМЕЧАНИЕ К ЦЕНЕ ────────────────────────────────────────────────
   В быстром просмотре секции подписаны иначе, чем на странице авто:
   14px, полужирный, тёмный. Заголовок повторяет именно этот вид.
   Здесь блок остаётся в подвале карточки во всю ширину: колонка
   характеристик тут всего 300px и ещё и прокручивается — длинный абзац
   вытягивался бы в восемь строк по три слова. */
.cs-note{padding:18px 24px 22px;border-top:1px solid var(--line)}
.price-note{max-width:820px}
.price-note-head{
  font-family:'Onest',sans-serif;font-size:14px;font-weight:700;
  color:var(--ink);margin-bottom:12px;
}
/* Без маркеров — три связных предложения, а не список */
.price-note p{
  font-size:13px;line-height:1.65;color:var(--ink2);
  margin:0 0 8px;
}
.price-note p:last-child{margin-bottom:0}

/* ── ПРЕДУПРЕЖДЕНИЕ О ФОТО ──
   Живёт внутри узкой колонки .cs-specs, сразу под «Цветом».
   Без заливки и рамки — просто текст, как обычный .cs-spec-group. */
.photo-notice{
  margin-bottom:22px;
}
.photo-notice-head{
  font-family:'Onest',sans-serif;font-size:14px;font-weight:700;
  color:var(--ink);margin-bottom:12px;
}
.photo-notice p{
  font-size:13px;line-height:1.6;color:var(--ink2);margin:0;
}
@media(max-width:768px){
  .cs-note{padding:16px 16px 18px}
  .price-note p{font-size:13px}
  .photo-notice p{font-size:13px}
}

/* ═══ МОБИЛЬНЫЙ ПОИСК И ПАРАМЕТРЫ (редизайн) ═══════════════════════
   Поиск — отдельный полноэкранный экран (как в приложениях маркетплейсов):
   круглая «назад», поле, круглая кнопка параметров. Параметры — список
   строк, каждая открывает нижнюю шторку со своими контролами. */
.mob-search{display:none}
@media(max-width:768px){
  .mob-search{display:flex;align-items:center;gap:10px;height:46px;padding:0 8px 0 16px;margin-bottom:10px;background:var(--surf);border:1.5px solid var(--line);border-radius:var(--pill);color:var(--ink3);cursor:text}
  .mob-search svg{flex-shrink:0}
  .mob-search-txt{flex:1;min-width:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mob-search.has-q .mob-search-txt{color:var(--ink);font-weight:500}
  .mob-search-x{display:none;width:30px;height:30px;border-radius:50%;border:none;background:var(--line);color:var(--ink2);align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
  .mob-search.has-q .mob-search-x{display:flex}
}

.msearch{position:fixed;inset:0;z-index:230;background:var(--w);display:none;flex-direction:column}
.msearch.open{display:flex;animation:msIn var(--dur) var(--ease)}
@keyframes msIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msearch-top{display:flex;align-items:center;gap:10px;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top))}
.msearch-round{position:relative;width:44px;height:44px;flex-shrink:0;border-radius:50%;border:none;background:var(--surf);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.msearch-round:active{background:var(--line)}
.msearch-badge{display:none;position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--pill);background:var(--acc);color:var(--accOn);font-size:11px;font-weight:700;line-height:18px;text-align:center}
.msearch-badge.show{display:block}
.msearch-field{flex:1;min-width:0;position:relative;display:flex;align-items:center}
.msearch-field input{width:100%;height:44px;border:none;outline:none;background:transparent;font-family:inherit;font-size:17px;color:var(--ink);padding:0 34px 0 4px;-webkit-appearance:none;appearance:none}
.msearch-field input::placeholder{color:var(--ink3)}
.msearch-field input::-webkit-search-cancel-button{-webkit-appearance:none}
.msearch-clear{display:none;position:absolute;right:2px;width:28px;height:28px;border-radius:50%;border:none;background:var(--surf);color:var(--ink2);align-items:center;justify-content:center;cursor:pointer}
.msearch-clear.show{display:flex}
.msearch-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 0 calc(24px + env(safe-area-inset-bottom))}
.ms-head{display:flex;align-items:center;justify-content:space-between;padding:10px 20px 4px;font-size:13px;color:var(--ink3)}
.ms-head button{background:none;border:none;font-family:inherit;font-size:13px;color:var(--accTx);cursor:pointer;padding:4px 0}
.ms-row{display:flex;align-items:center;gap:16px;padding:12px 20px;min-height:56px;cursor:pointer;transition:background var(--dur-fast) var(--ease)}
.ms-row:active{background:var(--surf)}
.ms-ico{flex-shrink:0;color:var(--ink2)}
.ms-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.ms-title{font-size:17px;line-height:1.3;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-title b{font-weight:600}
.ms-sub{font-size:14px;line-height:1.3;color:var(--ink3);margin-top:2px}
.ms-chev{flex-shrink:0;color:var(--ink3)}
.ms-all .ms-title{font-weight:500}
.ms-sec{font-size:20px;font-weight:700;color:var(--ink);padding:22px 20px 12px;letter-spacing:-.2px}
.ms-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px}
.ms-chip{height:42px;padding:0 18px;border-radius:var(--pill);border:none;background:var(--surf);font-family:inherit;font-size:15px;color:var(--ink);cursor:pointer}
.ms-chip:active{background:var(--line)}
.ms-empty{padding:40px 20px;text-align:center;color:var(--ink3);font-size:15px}

/* Главная шторка параметров — карточки со строками */
.params-sheet .params-body{background:var(--surf);padding:10px 0 16px}
.pm-card{background:var(--w);border-radius:var(--r);margin:0 10px 10px;padding:4px 0;overflow:hidden}
.pm-card-title{font-size:20px;font-weight:700;color:var(--ink);padding:16px 18px 6px;letter-spacing:-.2px}
.pm-row{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 18px;cursor:pointer;position:relative;transition:background var(--dur-fast) var(--ease)}
.pm-row+.pm-row::before{content:'';position:absolute;top:0;left:18px;right:18px;height:1px;background:var(--line)}
.pm-row:active{background:var(--surf)}
.pm-row-main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.pm-row-lbl{font-size:16px;color:var(--ink2);transition:font-size var(--dur-fast) var(--ease)}
.pm-row-val{font-size:15px;color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-row-val:empty{display:none}
.pm-row.has-val .pm-row-lbl{font-size:13px;color:var(--ink3)}
.pm-chev{flex-shrink:0;color:var(--ink3)}
/* «Марка» — значение «Все» показываем как у остальных строк */
.pm-row #selBrandLabel{color:var(--ink)}
.pm-row:not(.has-val) #selBrandLabel{font-size:13px;color:var(--ink3);font-weight:400}
.params-sheet .params-footer{border-top:none;background:var(--surf)}
.params-sheet .params-apply{border-radius:var(--rsm)}

/* Нижние шторки параметров */
.psub-ov{position:fixed;inset:0;z-index:215;background:rgba(10,11,13,.45);opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease)}
.psub-ov.open{opacity:1;pointer-events:auto}
.psub{position:fixed;left:0;right:0;bottom:0;z-index:220;background:var(--w);border-radius:var(--rlg) var(--rlg) 0 0;padding:8px 18px calc(16px + env(safe-area-inset-bottom));max-height:88vh;display:flex;flex-direction:column;transform:translateY(105%);transition:transform var(--dur-slow) var(--ease);box-shadow:0 -10px 40px rgba(0,0,0,.18)}
.psub.open{transform:none}
.psub-handle{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 10px;flex-shrink:0}
.psub-hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-shrink:0}
.psub-hdr h4{font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.3px;margin:0}
.psub-reset{background:none;border:none;font-family:inherit;font-size:15px;color:var(--ink2);cursor:pointer;padding:6px 0}
.psub-body{overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0;margin:0 -18px;padding:0 18px}
.psub-range{display:flex;gap:6px}
.psub-inp{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:54px;padding:0 16px;background:var(--surf);border:1.5px solid transparent;border-radius:var(--rsm);cursor:text;transition:border-color var(--dur-fast) var(--ease)}
.psub-inp:focus-within{border-color:var(--ink)}
.psub-inp span{font-size:17px;color:var(--ink3);flex-shrink:0}
.psub-inp input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:17px;color:var(--ink);padding:0}
.psub-apply{width:100%;margin-top:16px;padding:12px 16px;border:none;border-radius:var(--rsm);background:var(--ink);color:var(--w);font-family:inherit;font-size:17px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;line-height:1.25;flex-shrink:0}
.psub-cnt{font-size:13px;font-weight:500;opacity:.75}
.psub-cnt:empty{display:none}

/* Списки с галочками / радио (коробка, двигатель, привод, наличие) */
.pm-list{display:flex;flex-direction:column}
.pm-list .params-pill,.pm-radio-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0;border:none;border-radius:0;background:none;font-size:17px;font-weight:400;color:var(--ink);cursor:pointer}
.pm-list .params-pill.on{background:none;color:var(--ink);border:none}
html[data-theme="dark"] .pm-list .params-pill.on{color:var(--ink)}
.pm-box{width:24px;height:24px;flex-shrink:0;border:2px solid var(--ink3);border-radius:var(--rxs);transition:all var(--dur-fast) var(--ease);display:flex;align-items:center;justify-content:center}
.params-pill.on .pm-box{background:var(--acc);border-color:var(--accBd);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
.pm-radio{width:24px;height:24px;flex-shrink:0;border:2px solid var(--ink3);border-radius:50%;transition:all var(--dur-fast) var(--ease)}
.pm-radio-row.on .pm-radio{border:7px solid var(--acc)}

/* Пикер «от / до» в две колонки (год, объём) */
.pk-native{display:none}
.pk{display:flex;gap:6px}
.pk-col-wrap{flex:1;min-width:0}
.pk-lbl{display:flex;align-items:center;gap:8px;height:50px;padding:0 16px;background:var(--surf);border-radius:var(--rsm);font-size:16px;color:var(--ink3);margin-bottom:6px}
.pk-lbl b{font-weight:500;color:var(--ink)}
.pk-col{height:220px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 28px),transparent 100%)}
.pk-col::-webkit-scrollbar{display:none}
.pk-item{height:44px;display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--ink2);border-radius:var(--rxs);cursor:pointer;font-variant-numeric:tabular-nums}
.pk-item.sel{background:var(--accLt);color:var(--accTx);font-weight:600}
/* Поля мобильного поиска и шторок параметров: рамку фокуса рисует сам контейнер */
html body .msearch-field input:focus-visible,html body .psub-inp input:focus-visible{outline:none}

/* ═══ НЕЙТРАЛЬНАЯ ПАЛИТРА: точечные правки ═══ */
/* Галочки внутри залитых чекбоксов — цвет «на акценте» (в тёмной теме тёмный) */
.brand-chk svg,.brand-dd-chk svg,.sort-chk svg,.fs-check svg,.type-chk svg{stroke:var(--accOn)}
/* Блок «Не нашли…» — спокойная серая плашка (тёмная была слишком контрастной) */
.req-cta{background:#EEF0F3!important}
.req-cta h3{color:var(--ink)!important}
.req-cta p{color:var(--ink2)!important}
.req-cta-btn{background:var(--acc)!important;color:var(--accOn)!important}
.req-cta-btn:hover{background:var(--accHover)!important}
.req-cta-btn svg{color:var(--accOn);stroke:currentColor}
html[data-theme="dark"] .req-cta{background:var(--surf)!important;border:1px solid var(--line)}
html[data-theme="dark"] .params-pill.on .pm-box{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230B0D11' stroke-width='3.2'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
/* «Найти» в первом экране (десктоп) остаётся синей — главное действие поиска */
.qsearch .btn-primary{background:var(--blue);color:#fff}
.qsearch .btn-primary:hover{background:var(--blueDk)}
/* Закрытые шторки уезжают за край экрана, но их тень оставалась видна
   полосой «затухания» внизу/сбоку страницы. Пока шторка закрыта — прячем
   её полностью (visibility с задержкой, чтобы анимация закрытия доигрывала). */
.psub,.filter-sheet,.params-sheet,.brand-sheet,.sort-sheet{visibility:hidden;transition-property:transform,visibility}
.psub.open,.filter-sheet.open,.params-sheet.open,.brand-sheet.open,.sort-sheet.open{visibility:visible}
.psub:not(.open),.filter-sheet:not(.open){box-shadow:none}
/* Закрытое бургер-меню уезжает вправо за экран, но его тень была видна
   полосой по правому краю страницы — прячем панель, пока меню закрыто */
.burger-panel{visibility:hidden;transition-property:transform,visibility}
.burger-menu.open .burger-panel{visibility:visible}

/* ═══ ЕДИНАЯ СИСТЕМА ОФОРМЛЕНИЯ ═══════════════════════════════════
   Скругления — 5 ступеней (токены в :root):
     --rxs 8px   мелочь: чипы, бейджи, пункты меню, галочки, миниатюры
     --rsm 12px  контролы: кнопки, поля, выпадающие кнопки
     --r   16px  поверхности: карточки, панели, меню, модалки
     --rlg 22px  нижние шторки
     --pill      поля-«пилюли» (поиск), чипы марок
   Шрифт — шкала 11 / 12 / 13 / 14 / 15 / 16 / 17 / 20 / 22 / 24 / 28.
   Все выпадающие меню выглядят одинаково: рамка 1px, радиус --r,
   одна тень, внутренний отступ 6px, пункты со скруглением --rxs. */
.qs-suggest,.csel-menu,.brand-dd-menu{border:1px solid var(--line);box-shadow:0 12px 36px rgba(10,11,13,.12)}
html[data-theme="dark"] .qs-suggest,html[data-theme="dark"] .csel-menu,html[data-theme="dark"] .brand-dd-menu{box-shadow:var(--shLg)}
.brand-dd-list{padding:6px}
.brand-dd-item{padding:9px 12px}
.brand-dd-item:hover,.csel-opt:hover,.qs-sug-item:hover{background:var(--surf)}
/* Тулбар над выдачей: всё одной высоты (38px) и одного радиуса */
.view-toggle{border-radius:var(--rsm);padding:2px}
.vt-btn{width:32px;height:32px}
.sort-sel{height:38px;padding-top:0;padding-bottom:0}
.pg-btn{height:38px;min-width:38px}
/* Подписи секций фильтров — одинаковые везде (сайдбар, шторки) */
.fb-lbl,.params-sec,.params-inner-lbl{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink3)}
/* Чекбоксы — свои, как в мобильных шторках и списке марок (вместо системных) */
.chkitem input,.req-consent input,.fb .chkitem input{-webkit-appearance:none;appearance:none;flex:none;width:18px;height:18px;min-width:18px;padding:0;margin:0;border:1.5px solid var(--ink3);border-radius:5px;background:var(--w);display:inline-grid;place-content:center;transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.chkitem input:checked,.req-consent input:checked{background:var(--acc);border-color:var(--acc);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
html[data-theme="dark"] .chkitem input:checked,html[data-theme="dark"] .req-consent input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230F0F10' stroke-width='3.4'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.chkitem input:hover{border-color:var(--ink2)}
.chkitem{font-size:14px}
.brand-chk,.brand-dd-chk,.sort-chk{border-radius:5px}
.pm-box{border-radius:6px}
/* Кнопки — одна высота для десктопа (40px) */
.btn{min-height:40px}
/* Текстовые поля показывают фокус своей рамкой — системная чёрная обводка
   поверх неё выглядела как «вспышка» при клике (особенно в поиске марки).
   Для кнопок и галочек обводка клавиатурного фокуса остаётся. */
html body input:not([type=checkbox]):not([type=radio]):focus-visible,
html body select:focus-visible,html body textarea:focus-visible{outline:none}
.brand-dd-search input{height:38px;padding:0 12px;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.brand-dd-search input:focus{border-color:var(--ink3);background:var(--w)}
/* «Готово» в списке марок — нейтральная, как остальные кнопки меню
   (синей остаётся только «Найти» в строке поиска) */
.qsearch .brand-dd-foot .btn-primary{background:var(--acc);color:var(--accOn)}
.qsearch .brand-dd-foot .btn-primary:hover{background:var(--accHover)}
.brand-dd-foot .btn,.brand-dd-clear{height:38px;min-height:38px;border-radius:var(--rsm);font-size:14px;font-weight:600}
.brand-dd-list{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.brand-dd-list::-webkit-scrollbar{width:6px}
.brand-dd-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
/* Сортировка на десктопе — тот же кастомный список, что у года и объёма */
.lb-right .csel{flex:0 0 auto;width:220px}
.lb-right .csel-btn{height:38px;color:var(--ink);background:var(--surf)}
.lb-right .csel-menu{left:auto;right:0;min-width:100%}
.csel-plain .csel-opt.sel{background:var(--surf);color:var(--ink);font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:12px}
.csel-plain .csel-opt.sel::after{content:'';width:14px;height:14px;flex-shrink:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:768px){.lb-right .csel:has(#sortSel){display:none}}

/* ═══ БУРГЕР-МЕНЮ — в общей системе оформления ═══════════════════
   Пункты — как строки в шторке «Параметры»: 17px, обычная насыщенность,
   тонкие разделители. Низ — три одинаковые по высоте (48px) строки-кнопки. */
.burger-hdr{padding:16px 20px;border-bottom:1px solid var(--line)}
.burger-close{width:36px;height:36px;border-radius:var(--rsm);font-size:14px}
.burger-links{padding:6px 0;gap:0}
.burger-link{position:relative;min-height:56px;padding:0 20px;border-radius:0;font-size:17px;font-weight:500;letter-spacing:0;line-height:1.3}
.burger-link+.burger-link::before{content:'';position:absolute;top:0;left:20px;right:20px;height:1px;background:var(--line)}
.burger-link svg{width:16px;height:16px}
.burger-link.active{font-weight:600}
.burger-foot{padding:16px 20px calc(20px + env(safe-area-inset-bottom));gap:10px}
.burger-theme{height:48px;padding:0 16px;justify-content:flex-start;gap:12px;background:var(--surf);border:none;font-size:15px;font-weight:500}
.burger-theme .bt-ico{display:flex;color:var(--ink2)}
.burger-theme:active{background:var(--line)}
/* «Позвонить» — строка-кнопка: подпись слева, синий значок трубки справа */
.burger-phone{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;min-height:56px;padding:8px 60px 8px 16px;background:var(--surf);border-radius:var(--rsm);position:relative}
.burger-phone b{font-size:15px;font-weight:600;letter-spacing:0;line-height:1.3}
.burger-phone span{font-size:12px;line-height:1.3}
.burger-phone::after{content:'';position:absolute;right:8px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center no-repeat}
.burger-phone:active{background:var(--line)}
.burger-tg,.burger-max{min-height:48px;height:48px;padding:0 16px;font-size:15px;font-weight:600;border-radius:var(--rsm)}

/* Время работы в меню (вместо строки «Позвонить») */
.burger-hours{font-size:13px;line-height:1.4;color:var(--ink3);text-align:center;padding:2px 0 0}
/* Пункты меню — тот же вес, что у навигации в шапке (600): с 500
   меню выглядело набранным «другим», более тонким шрифтом */
.burger-link{font-weight:600;letter-spacing:-.2px}
/* Крестики закрытия — иконкой, а не символом ✕ (он брался из системного шрифта) */
.burger-close svg,.params-close svg,.cs-close svg,.req-close svg,.msg-popup-close svg,.msg-close svg,.lb-close svg{display:block}
.burger-theme{font-weight:600}
/* ═══ Бургер-меню v2: без дубля логотипа, низ — единые строки ═══
   Тема, Telegram и MAX — одинаковые серые строки: слева круглый значок
   (у мессенджеров — в их фирменном цвете), справа подпись. Выравнивание
   по левому краю у всего меню, как у пунктов навигации. */
.burger-title{font-size:17px;font-weight:600;color:var(--ink)}
.burger-foot{border-top:1px solid var(--line);gap:8px}
.burger-theme,.burger-tg,.burger-max{display:flex;align-items:center;justify-content:flex-start;gap:12px;height:56px;min-height:56px;padding:0 10px;background:var(--surf);color:var(--ink);border:none;border-radius:var(--rsm);font-family:inherit;font-size:15px;font-weight:600;text-decoration:none;transition:background var(--dur-fast) var(--ease)}
.burger-theme:active,.burger-tg:active,.burger-max:active{background:var(--line)}
@media (hover:hover){.burger-theme:hover,.burger-tg:hover,.burger-max:hover{background:var(--line)}}
.burger-tg svg,.burger-max svg,.burger-theme .bt-ico{width:36px;height:36px;flex-shrink:0;border-radius:50%;box-sizing:border-box;padding:9px;display:flex;align-items:center;justify-content:center}
.burger-tg svg{background:#229ED9}
.burger-max svg{background:#0068FF}
.burger-theme .bt-ico{padding:0;background:var(--w);color:var(--ink)}
.burger-theme .bt-ico svg{width:18px;height:18px}
.burger-hours{text-align:left;padding:4px 2px 0;font-size:13px}

/* ═══ Иконки Telegram / MAX (свои, для светлой и тёмной темы) ═══
   img/icon-{telegram|max}-{light|dark}.png — показываем ту, что под тему. */
.ico-d{display:none}
html[data-theme="dark"] .ico-l{display:none}
html[data-theme="dark"] .ico-d{display:block}
.hdr-ico{display:inline-flex;width:36px;height:36px;flex-shrink:0;border-radius:10px;transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)}
.hdr-ico img{width:36px;height:36px;display:block}
.hdr-ico:hover{opacity:.85}
.hdr-ico:active{transform:scale(.95)}
.hdr-ico .ico-d{display:none}
html[data-theme="dark"] .hdr-ico .ico-l{display:none}
html[data-theme="dark"] .hdr-ico .ico-d{display:block}
/* В меню: значок вместо цветного круга */
.burger-tg img,.burger-max img{width:36px;height:36px;flex-shrink:0}
.burger-tg .ico-d,.burger-max .ico-d{display:none}
html[data-theme="dark"] .burger-tg .ico-l,html[data-theme="dark"] .burger-max .ico-l{display:none}
html[data-theme="dark"] .burger-tg .ico-d,html[data-theme="dark"] .burger-max .ico-d{display:block}
/* Строка «Тема» — такой же квадратный значок, как у мессенджеров */
.burger-theme .bt-ico{border-radius:10px;border:1px solid var(--line)}
.theme-toggle{width:36px;height:36px;border-radius:10px}

/* ═══ Иконки Telegram / MAX — вектор (SVG прямо в разметке) ═══
   Одна форма плитки, одна толщина линий, цвета берутся из темы —
   чёткие на любом экране, отдельные картинки под тему не нужны. */
:root{--icoBg:#F2F4F7;--icoBd:#E1E5EB;--icoFg:#3A3F4A}
html[data-theme="dark"]{--icoBg:#242426;--icoBd:#38383C;--icoFg:#D8D8DB}
.soc-ico{display:block;width:36px;height:36px;flex-shrink:0}
.soc-ico .si-bg{fill:var(--icoBg);stroke:var(--icoBd);stroke-width:1.2}
.soc-ico .si-fg{fill:none;stroke:var(--icoFg);stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.soc-ico .si-tg{stroke-width:1.3}
/* Переключатель темы — в тех же цветах, что и плитки */
.theme-toggle{background:var(--icoBg);border:1.2px solid var(--icoBd);color:var(--icoFg)}
.burger-theme .bt-ico{background:var(--icoBg);border:1.2px solid var(--icoBd);color:var(--icoFg)}
.burger-tg svg.soc-ico,.burger-max svg.soc-ico{padding:0;background:none;border-radius:0;width:36px;height:36px}

/* Все значки в плитках — одного размера (~17px) и одной толщины линии (1.6px):
   луна/солнце, Telegram, MAX. Толщина пересчитана под масштаб каждого значка. */
.soc-ico .si-mx .si-fg{stroke-width:1.98}
.soc-ico .si-tg{stroke-width:1.69}
.theme-toggle svg,.burger-theme .bt-ico svg{width:20px;height:20px;stroke-width:1.9}

/* ═══ ОКНО «ЗАПРОС АВТО» — доработка ═══════════════════════════════
   • появление с анимацией; закрытие по фону и Esc;
   • ошибки — по-русски под полем (без системных подсказок браузера);
   • на телефоне: шторка с «ручкой», шапка и кнопка всегда видны,
     короткие поля (марка/модель, год/комплектация) — по два в ряд;
   • экран «отправлено» — нейтральный, с иконками мессенджеров. */
.req-ov::before{animation:reqFade var(--dur) var(--ease)}
.req-ov.open .req-sheet{animation:reqIn var(--dur-slow) var(--ease)}
@keyframes reqFade{from{opacity:0}to{opacity:1}}
@keyframes reqIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.req-sheet{padding:24px}
.req-handle{display:none}
.req-hdr{margin-bottom:4px}
.req-hdr h3{font-size:22px;font-weight:700;letter-spacing:-.3px}
.req-close{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.req-sub{font-size:14px;margin-bottom:18px}
.req-grid{gap:14px 12px;margin-bottom:4px}
.req-fg{gap:6px}
.req-fg label{font-size:13px;font-weight:500;color:var(--ink2)}
.req-star{color:var(--red)}
.req-fg input,.req-fg textarea{height:44px;padding:0 14px;font-size:15px;background:var(--surf);border:1.5px solid transparent;border-radius:var(--rsm);transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.req-fg textarea{height:auto;min-height:84px;padding:11px 14px;line-height:1.45;resize:none}
.req-fg input:hover,.req-fg textarea:hover{border-color:var(--line)}
.req-fg input:focus,.req-fg textarea:focus{border-color:var(--ink3);background:var(--w)}
.req-fg input::placeholder,.req-fg textarea::placeholder{color:var(--ink3)}
.req-fg .invalid,.req-fg input.invalid,.req-fg textarea.invalid{border-color:var(--red);background:var(--w)}
.req-err{display:none;font-size:12.5px;line-height:1.35;color:var(--red)}
.req-err.show{display:block}
.req-grid>.req-err{margin-top:-6px}
.req-consent{margin:16px 0 0;font-size:13px;line-height:1.45;color:var(--ink2);gap:10px}
.req-consent input{margin-top:0}
#rConsentErr{margin:6px 0 0 28px}
.req-submit{margin-top:16px;height:48px;padding:0;font-size:15px;font-weight:600;border-radius:var(--rsm)}
.req-submit:disabled{opacity:.6;cursor:default}
/* Экран «Заявка отправлена» */
.req-success{padding:8px 0 0}
.req-success-ico{width:56px;height:56px;margin:4px auto 16px;border-radius:50%;background:#E8F7EE;color:#16A34A;font-size:0}
html[data-theme="dark"] .req-success-ico{background:#16301F;color:#4ADE80}
.req-success h3{font-size:20px;font-weight:700}
.req-success p{font-size:14px;line-height:1.5;color:var(--ink3);margin-bottom:18px}
.req-succ-btns{flex-direction:column;gap:8px;margin-bottom:8px}
.req-mbtn{justify-content:flex-start;gap:12px;height:56px;padding:0 10px;background:var(--surf)!important;color:var(--ink);font-size:15px;font-weight:600;border-radius:var(--rsm);filter:none!important}
.req-mbtn:hover{background:var(--line)!important}
.req-mbtn .soc-ico{flex-shrink:0}
.req-close-btn{height:48px;padding:0;margin-top:4px;background:var(--acc);color:var(--accOn);font-weight:600}
.req-close-btn:hover{background:var(--accHover)}
@media(max-width:768px){
  .req-sheet{padding:0 20px calc(20px + env(safe-area-inset-bottom));max-height:calc(100dvh - 24px)}
  .req-ov.open .req-sheet{animation:reqUp var(--dur-slow) var(--ease)}
  @keyframes reqUp{from{transform:translateY(100%)}to{transform:none}}
  .req-handle{display:block;position:sticky;top:0;z-index:3;height:22px;margin:0 -20px;background:var(--w)}
  .req-handle::after{content:'';position:absolute;left:50%;top:9px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line)}
  .req-hdr{position:sticky;top:22px;z-index:3;background:var(--w);padding:2px 0 8px;margin-bottom:0}
  .req-sub{font-size:14px;margin-bottom:16px}
  /* Имя и телефон — на всю ширину, короткие поля — парами */
  .req-grid{grid-template-columns:1fr 1fr}
  .req-grid .req-fg:nth-child(1),.req-grid .req-fg:nth-child(2){grid-column:1 / -1}
  .req-fg input,.req-fg textarea{font-size:16px}
}
.req-mbtn{text-decoration:none;color:var(--ink)!important}
.req-mbtn{flex:none}
.req-grid>.req-err{grid-column:1 / -1}
/* Поля заявки — без обводки при наведении и фокусе: фон остаётся серым,
   о фокусе говорит курсор. Красная рамка — только у поля с ошибкой. */
.req-fg input:hover,.req-fg textarea:hover,
.req-fg input:focus,.req-fg textarea:focus{border-color:transparent;background:var(--surf);box-shadow:none;outline:none}
.req-fg input.invalid,.req-fg textarea.invalid,
.req-fg input.invalid:focus,.req-fg textarea.invalid:focus{border-color:var(--red)}

/* ═══ Поля ввода без обводки при фокусе — везде на сайте ═══
   При клике рамка больше не темнеет и фон не меняется: поле остаётся
   как было, о фокусе говорит курсор (или открытое меню у выпадающих
   списков). Красная рамка остаётся только у полей с ошибкой. */
.qsearch select:focus,.qsearch input[type=number]:focus,.qs-field input:focus,
.fb select:focus,.fb input:focus,.fs-range input:focus,.fs-range select:focus,
.params-range input:focus,.params-range select:focus,.brand-search-box input:focus,
.brand-dd-search input:focus,.sort-sel:focus,
.csel.open .csel-btn,.brand-dd.open .brand-dd-btn{border-color:var(--line);background:var(--surf);box-shadow:none;outline:none}
.csel-btn:hover,.brand-dd-btn:hover,.qs-field input:hover{border-color:var(--line)}
.psub-inp:focus-within{border-color:transparent}
.msearch-field input:focus{outline:none;box-shadow:none}

/* ═══ Окно «Написать продавцу / Связаться» — единый вид ═══════════
   Заголовок слева (как у остальных окон), строки-кнопки как в меню:
   серый фон, иконка-плитка, название + подпись, стрелка справа.
   «Отмена» убрана — закрыть можно крестиком, кликом по фону или Esc.
   На телефоне — шторка снизу с «ручкой». */
.msg-popup,.msg-box{max-width:400px;padding:20px;border-radius:var(--r)}
.msg-popup-title,.msg-title{margin:0 44px 16px 0;text-align:left;font-size:20px;font-weight:700;line-height:1.25;color:var(--ink);letter-spacing:-.2px}
.msg-popup-title b,.msg-title b{display:block;margin-top:4px;font-size:14px;font-weight:400;line-height:1.4;color:var(--ink3);letter-spacing:0}
.msg-popup-close,.msg-close{top:16px;right:16px;width:36px;height:36px;border-radius:10px}
.msg-popup .msg-btn,.msg-box .msg-btn{display:flex;align-items:center;gap:12px;height:60px;padding:0 12px 0 10px;margin:0 0 8px;background:var(--surf);border-radius:var(--rsm);font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;transition:background var(--dur-fast) var(--ease)}
.msg-popup .msg-btn:last-of-type,.msg-box .msg-btn:last-of-type{margin-bottom:0}
.msg-popup .msg-btn:hover,.msg-box .msg-btn:hover{background:var(--line)}
.msg-popup .msg-btn:active,.msg-box .msg-btn:active{transform:scale(.99)}
.msg-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.msg-name{font-size:15px;font-weight:600;line-height:1.25}
.msg-popup .msg-sub,.msg-box .msg-sub,.msg-btn-sub{font-size:12.5px;font-weight:400;line-height:1.3;color:var(--ink3);margin:0}
.msg-chev{flex-shrink:0;color:var(--ink3)}
.msg-btn .soc-ico{flex-shrink:0}
.soc-ico g.si-fg path{fill:none}
@media(max-width:768px){
  .msg-popup,.msg-box{max-width:100%;padding:28px 16px calc(16px + env(safe-area-inset-bottom));border-radius:var(--rlg) var(--rlg) 0 0}
  .msg-popup::before,.msg-box::before{content:'';position:absolute;top:9px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line)}
  .msg-popup-close,.msg-close{top:22px;right:14px}
  .msg-popup-title,.msg-title{margin-bottom:14px}
}
.card-color-sep{color:var(--ink3)}

/* ═══ КАРТОЧКА АВТО — доработка ═══════════════════════════════════
   • длинное название — в 2 строки, а не обрезка «Mercedes-Benz GLS 450 4M…»;
   • характеристики — одна строка через «·» вместо 5 плашек (на телефоне
     плашки занимали 4–5 строк, и карточки в ряду были разной высоты);
   • пробег и город — одной строкой с мететкой места;
   • «с НДС» под ценой, как в режиме списка;
   • разделитель над ценой — рамкой подвала, цена всегда прижата к низу. */
.card-body{padding:14px 16px 12px;gap:6px}
.card-title-row{align-items:flex-start;margin-bottom:0}
.card-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.card-year{line-height:1.3;padding-top:1px}
.card-trim{font-size:13px;color:var(--ink3);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:-2px}
.card-specline{font-size:13px;line-height:1.45;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-dot{margin:0 5px;color:var(--ink3)}
.card-meta{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--ink3);line-height:1.3;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-meta svg{flex-shrink:0}
.card-colors{display:block;margin:0;font-size:12.5px;line-height:1.3;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-foot{margin-top:auto;border-top:1px solid var(--line);padding:12px 16px;align-items:baseline}
.price-block{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price-vat{font-size:12px;color:var(--ink3);font-weight:500}
@media(max-width:768px){
  .card-body{padding:10px 12px 10px;gap:5px}
  .card-name{font-size:14px}
  .card-trim,.card-specline{font-size:12px}
  .card-meta,.card-colors{font-size:11.5px}
  .card-dot{margin:0 3px}
  .card-foot{padding:10px 12px}
  .price-block{gap:4px 6px}
  .price-vat{font-size:11px}
}
.card-si{white-space:nowrap}
.card-dot{margin:0 4px 0 5px}
.card-meta-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.card-specline .card-dot{margin:0 1px 0 5px}

/* ═══ Карточка: листание фото наведением + статусы внизу слева ═══ */
.card-badge,.rw-badge{top:auto;bottom:14px;left:10px;z-index:3}
.card-photo-count{left:auto;right:10px;bottom:14px;z-index:3}
.rw-count{bottom:14px;z-index:3}
.gal-zones{position:absolute;inset:0;display:flex;z-index:2}
.gal-zones > i{flex:1;height:100%}
.gal-segs{position:absolute;left:10px;right:10px;bottom:6px;display:flex;gap:4px;z-index:3;pointer-events:none;opacity:0;transition:opacity .15s}
.gal-segs b{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.45);box-shadow:0 0 2px rgba(0,0,0,.25)}
.gal-segs b.on{background:#fff}
.gal-more{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;background:rgba(10,11,13,.55);color:#fff;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .15s}
.gal-last .gal-more{opacity:1}
@media (hover:hover) and (pointer:fine){
  .card-img:hover .gal-segs,.rw-img:hover .gal-segs{opacity:1}
  .card-img:hover .card-photo-count,.rw-img:hover .rw-count,.gal-last .card-badge,.gal-last .rw-badge{opacity:0}
}
@media (hover:none),(pointer:coarse){.gal-zones,.gal-segs,.gal-more{display:none}.card-badge,.rw-badge,.card-photo-count,.rw-count{bottom:10px}}

/* Лупа в шапке — тот же размер, что на странице авто (не «прыгает» при переходе) */
@media(max-width:768px){.hdr-search-btn{width:34px;height:34px;padding:0;color:var(--ink)}}
/* Телефон: ровный шаг 12px — поиск → Параметры/Сортировка → «Объявления» → карточки */
@media(max-width:768px){
  .mob-search{margin-bottom:12px}
  .mob-btns{margin-bottom:12px}
  main > .lb{margin-bottom:12px}
}

/* ═══ Карточка: одинаковая высота, статусы у края, снижение цены ═══ */
:root{--ok:#36B555}
.card-name{-webkit-line-clamp:1}
.card-trim{margin-top:-2px}
.card-specs{margin:0;gap:0;display:flex;flex-direction:column;flex-wrap:nowrap;font-size:13px;line-height:1.45;color:var(--ink2)}
.card-sl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-sl .card-dot{margin:0 4px}
@media(max-width:768px){.card-specs{font-size:12px}.card-sl .card-dot{margin:0 3px}}
.card-badge,.rw-badge{bottom:8px;left:8px;transition:bottom .15s,opacity .15s}
.card-photo-count{right:8px;bottom:8px}
.rw-count{right:8px;bottom:8px}
.card-badge,.rw-badge,.card-badge.badge-sale,.rw-badge.badge-sale,.card-badge.badge-new,.card-badge.badge-hot{background:var(--ok)}
.card-badge.badge-order,.card-badge.badge-transit,.rw-badge.badge-order,.rw-badge.badge-transit{background:var(--amber)}
@media (hover:hover) and (pointer:fine){
  .card-img:hover .gal-segs ~ .card-badge,.rw-img:hover .gal-segs ~ .rw-badge{bottom:16px}  /* над полосками листания */
}
.price-main,.rw-price-main,.cs-price-top{display:inline-flex;align-items:center;gap:4px}
.price-down{color:var(--ok);flex-shrink:0}
.price-main .price-down{width:16px;height:16px}

/* Чекбоксы фильтров: правила фокуса полей (.fb input:focus) перебивали фон
   отмеченного чекбокса — галочка появлялась только после клика мимо */
.fb .chkitem input,.fb .chkitem input:focus,.fb .chkitem input:focus-visible{background:var(--w);border-color:var(--ink3);box-shadow:none;outline:none}
.fb .chkitem input:hover{border-color:var(--ink2)}
.fb .chkitem input:checked,.fb .chkitem input:checked:focus,.fb .chkitem input:checked:focus-visible,.fb .chkitem input:checked:hover{background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center;border-color:var(--acc)}
html[data-theme="dark"] .fb .chkitem input:checked,html[data-theme="dark"] .fb .chkitem input:checked:focus,html[data-theme="dark"] .fb .chkitem input:checked:focus-visible,html[data-theme="dark"] .fb .chkitem input:checked:hover{background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230F0F10' stroke-width='3.4'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center;border-color:var(--acc)}

/* Боковые фильтры: если не помещаются по высоте (планшет, невысокий экран) —
   прокручиваются сами внутри себя, оставаясь прилипшими */
.sidebar{max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

/* Встроенный браузер Telegram (iOS) оставляет над страницей прозрачную зону под
   своей плашкой с адресом — в ней было видно, как листается сайт над шапкой.
   Продолжаем фон шапки вверх: в обычном браузере эта полоса за экраном и не видна. */
header::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:160px;background:var(--w);pointer-events:none}

/* ═══ «Оставить заявку» — в одном стиле с окном «Запросить КП» (kp.css) ═══
   Те же заголовок, подписи полей капсом, поля 48px с рамкой, чёрная
   кнопка 52px, зелёный кружок успеха и шторка снизу на телефоне. */
.req-ov::before{background:rgba(10,11,13,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.req-sheet{max-width:520px;padding:20px 22px 22px;border-radius:var(--r);box-shadow:0 24px 80px rgba(10,11,13,.3)}
.req-hdr{margin-bottom:0}
.req-hdr h3{font-size:20px;font-weight:800;letter-spacing:-.3px}
.req-close{width:34px;height:34px;border-radius:50%;background:var(--surf)}
.req-sub{font-size:13.5px;color:var(--ink2);line-height:1.5;margin:12px 0 14px}
.req-grid{gap:0 12px;margin-bottom:0}
.req-fg{gap:6px;margin-bottom:12px}
.req-fg label{font-size:12px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.5px}
.req-fg input,.req-fg textarea{height:auto;min-height:48px;padding:12px 14px;font-size:16px;background:var(--surf);border:1.5px solid var(--line);border-radius:var(--rsm)}
.req-fg textarea{min-height:96px;line-height:1.45}
.req-fg input:hover,.req-fg textarea:hover{border-color:var(--line)}
.req-fg input:focus,.req-fg textarea:focus{border-color:var(--ink2);background:var(--w)}
.req-fg input.invalid,.req-fg textarea.invalid,
.req-fg input.invalid:focus,.req-fg textarea.invalid:focus{border-color:var(--red)}
.req-grid>.req-err{margin:-6px 0 10px}
.req-consent{margin:6px 0 4px;font-size:12.5px;line-height:1.45;color:var(--ink2);gap:9px}
.req-consent a{color:var(--ink)}
.req-submit{width:100%;height:auto;min-height:52px;margin-top:14px;font-size:16px;font-weight:700;border-radius:var(--rsm);background:var(--acc);color:var(--accOn)}
.req-success{padding:10px 4px 2px}
.req-success-ico{width:60px;height:60px;margin:6px auto 14px;background:var(--green)!important;color:#fff!important}
.req-success h3{font-size:20px;font-weight:800;margin-bottom:8px}
.req-success p{font-size:14.5px;color:var(--ink2);line-height:1.55}
.req-close-btn{min-height:52px;height:auto;margin-top:6px;font-size:16px;font-weight:700;background:var(--acc);color:var(--accOn)}
@media(max-width:768px){
  .req-sheet{max-width:100%;border-radius:var(--rlg) var(--rlg) 0 0;padding:0 18px calc(20px + env(safe-area-inset-bottom));max-height:calc(100dvh - 12px)}
  .req-handle{margin:0 -18px}
  .req-grid{grid-template-columns:1fr}
  .req-grid .req-fg{grid-column:1 / -1}
}