/* refine.css — единый источник стилей карточки каталога (десктоп).
   ПОРЯДОК: грузится ПОСЛЕ styles.css, поэтому перебивает его по каскаду БЕЗ !important
   (где у styles.css выше специфичность — добавляем тему/вложенность).
   Чисто после аудита 2026-07-25: один селектор = одно правило, дублей и мёртвых правил нет.
   ОТКАТ всего аудита: git checkout pre-css-audit-2026-07-25 -- static/css/ */

/* ───────── Каркас карточки: прозрачный 12px [плашка | тело] ───────── */
.listing-card{
  background:transparent; box-shadow:none; padding:0;
  display:flex; align-items:stretch; gap:0; border-radius:12px;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
}
[data-theme="dark"] .listing-card{background:transparent}

/* ───────── Плашка типа двигателя — оверлей НА фото (единый блок, без деления) ───────── */
.engine-badge{
  position:absolute; left:0; top:0; bottom:0; width:46px; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:20px 4px;
  border-radius:12px 0 0 12px;
}
.engine-badge img{width:22px; height:22px; filter:brightness(0) invert(1) drop-shadow(0 1px 8px rgba(0,0,0,.24))}
.engine-badge-text{
  color:#fff; font-size:16px; font-weight:700; letter-spacing:.08em;
  line-height:1; writing-mode:vertical-rl; transform:rotate(180deg);
  text-transform:uppercase;
  text-shadow:0 1px 8px rgb(0 0 0 / 24%);
}
.engine-badge--electro{background:rgba(45,101,183,.3)}
.engine-badge--hybrid{background:rgba(106,92,162,.3)}
.engine-badge--gasolin{background:rgba(46,166,65,.3)}
.engine-badge--diesel{background:rgba(84,77,76,.3)}
.engine-badge--gas{background:rgba(100,116,139,.3)}

/* ───────── Карточка = единый блок (белая заливка 12px, фото + контент) ───────── */
.listing-left{
  background:#FFFFFF; border-radius:12px; overflow:hidden; padding:0;
  box-shadow:0 1px 0 rgba(0,0,0,.12),0 0 1px rgba(0,0,0,.08);
}
[data-theme="dark"] .listing-left{background:#242F3D}

/* ───────── Фото (position:relative — на нём лежит плашка) ───────── */
.listing-thumb{position:relative; width:273px; height:204px; margin:0; border-radius:0; box-shadow:none}
.listing-slide{border-radius:0}
.listing-slide-img{width:100%; height:100%; object-fit:cover}

/* ───────── Контент: 2 столбца ───────── */
.listing-content{display:flex; flex-direction:row; gap:0; flex:1; min-width:0; padding:20px}
.lc-left{flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; justify-content:space-between}
.lc-right{width:180px; flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-start; text-align:right; gap:8px}

/* шапка: название(24)/комплектация(12) слева — цена(24)/город(12) справа, на одном уровне */
.lc-head,.lc-head-r{display:flex; flex-direction:column; gap:2px}
.lc-head{align-items:flex-start}
.lc-head-r{align-items:flex-end}
.lc-head .listing-title-text{font-size:24px; line-height:1.2; font-weight:700}
.lc-head .listing-trim{font-size:12px; line-height:1.4; opacity:.8; margin-left:0}
.lc-price{font-size:24px; line-height:1.2; font-weight:700; letter-spacing:-.01em}
[data-theme="dark"] .lc-price{color:#fff}
.lc-city{font-size:10px; line-height:1.4; opacity:.8; color:rgba(0,0,0,.75); font-weight:400}
[data-theme="dark"] .lc-city{color:#b8c8d8}
.lc-date{font-size:10px; line-height:1.4; opacity:.8}
[data-theme="dark"] .lc-date{color:#b8c8d8}

/* параметры по сетке */
.lc-row--params{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; font-size:14px; line-height:1.4}
.lc-row--params .listing-spec-value{
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:#17212b21; color:#e3e3e3;
  padding:6px 8px; border-radius:4px;
}
.lc-row--params .listing-spec-value:empty{background:transparent;padding:0}

/* чекбокс мультивыбора в дропдаунах — кружок как sort-option-check (жёлтый #FFB900) */
.filter_box .dd-row .dd-check{display:inline-block;width:13px;height:13px;border:2px solid #4a5568;border-radius:50%;margin-right:9px;vertical-align:middle;position:relative;flex-shrink:0;background:transparent;box-sizing:border-box;transition:border-color .15s ease,background .15s ease}
.filter_box .dd-row.dd-selected .dd-check{border-color:#EAB308;background:radial-gradient(circle,#EAB308 2px,transparent 3px)}
.filter_box .dd-row.dd-selected .dd-check::after{display:none}

/* кнопки под ячейками: «Расшифровка цены» + «Сравнить» + «Контакты» — пилюли (активный стиль ниже, строки 255+) */
.lc-badge--price,.lc-row--badges .cmp-desk-btn,.lc-badge--contacts{
  display:flex; align-items:center; justify-content:flex-start;
  border:none; border-radius:4px; padding:4px 8px; width:100%;
  font-size:13px; font-weight:400; line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;
  background:#4b5665; color:#e3e3e3;
}
.lc-badge--price:hover,.lc-row--badges .cmp-desk-btn:hover,.lc-badge--contacts:hover{background:#5a6c80; color:#fff}
[data-theme="dark"] .lc-badge--price,[data-theme="dark"] .lc-row--badges .cmp-desk-btn,[data-theme="dark"] .lc-badge--contacts{background:#4b5665; color:#e3e3e3}
/* кнопка «Выбрать» в мульти-дропдауне фильтра */
.filter_box .spec-apply-btn{background:#4b5665; color:#e3e3e3; border:none; border-radius:4px; padding:8px; width:calc(100% - 16px); margin:6px 8px; cursor:pointer; font-size:14px}
.filter_box .spec-apply-btn:hover{background:#5a6c80}
/* пробег от/до — точная копия цены от/до (тёмная ячейка #283341, hover, border, SVG-крестик) */
.filter_box .mileage-range{display:flex;align-items:center;gap:8px;flex:1;position:relative}
.filter_box .mileage-range .price-input-wrap{
  display:flex;align-items:center;justify-content:flex-start;flex:1;width:auto;height:38px;
  padding:0 5px 0 16px;background:#283341;border:1px solid transparent;color:#b8c8d8;border-radius:8px;
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 1px rgba(0,0,0,.08);
  transition:border-color .15s,box-shadow .15s,transform .12s;
}
.filter_box .mileage-range .price-input-wrap:hover{border-color:rgba(255,255,255,.1);background:#2d3a4a;box-shadow:0 1px 4px rgba(0,0,0,.15),0 0 2px rgba(0,0,0,.08)}
.filter_box .mileage-range .price-input-wrap:focus-within{border-color:#586182}
.filter_box .mileage-range .mileage-input{width:100%;height:100%;text-align:left;padding:0;background:transparent;border:none;color:#b8c8d8;font-weight:500;font-size:13px}
.filter_box .mileage-range .mileage-input::placeholder{color:#676767;font-weight:400}
.filter_box .mileage-clear{display:none;position:absolute;right:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;font-size:0;cursor:pointer;z-index:5;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='m13.41 12 3.3-3.29a1 1 0 1 0-1.42-1.42L12 10.59l-3.29-3.3a1 1 0 0 0-1.42 1.42l3.3 3.29-3.3 3.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l3.29-3.3 3.29 3.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E") no-repeat center;background-size:16px 16px}
.filter_box .mileage-range.has-value .mileage-clear{display:block}
/* фильтр по цвету — кружки как у дрома */
.filter_box .color-filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0;flex:1}
.filter_box .color-any{background:#2a3a4d;border:1px solid #3a4a5c;color:#b8c8d8;font-size:12px;padding:4px 10px;border-radius:8px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.filter_box .color-any:hover{background:#34495e;color:#fff}
.filter_box .color-circles{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filter_box .color-circle{width:26px;height:26px;border-radius:50%;border:2px solid rgba(0,0,0,.15);cursor:pointer;padding:0;transition:transform .12s,box-shadow .12s}
.filter_box .color-circle:hover{transform:scale(1.05)}
.filter_box .color-circle.is-selected{box-shadow:0 0 0 2px #fff,0 0 0 4px #FFB900}
.filter_box .color-circle[data-color="white"]{border-color:#ccc}
/* комплектации — крупная панель 500px + группировка по году, смещена влево (right:0) */
.filter_box .dropdown[data-filter="spec"] .dd-panel{width:500px;max-width:92vw;left:auto;right:0}
[data-theme="dark"] .filter_box .dd-panel,[data-theme="dark"] .filter_box .range-panel{background:#283341;box-shadow:0 2px 2px rgba(0,0,0,0.25) !important}
.filter_box .dropdown[data-filter="spec"] .dd-inner{max-height:500px}
.filter_box .dd-group-head{display:flex;align-items:center;justify-content:space-between;background:#19212a;border-radius:4px 4px 0 0;color:#c8d8e8;font-size:14px;font-weight:400;height:40px;padding:0 12px;box-sizing:border-box;text-transform:none;letter-spacing:0;cursor:default}
.filter_box .dd-group-head.dd-collapsed .dd-group-selectall{display:none}
[data-theme="light"] .filter_box .dd-group-head{background:none;color:#6b7280}
.filter_box .dd-group-selectall{background:rgba(255,255,255,.08);border:none;color:#c8d8e8;font-size:10px;font-weight:600;padding:3px 10px;border-radius:999px;cursor:pointer;font-family:inherit;text-transform:none;letter-spacing:0}
.filter_box .dd-group-selectall:hover{background:rgba(255,255,255,.18)}
.filter_box .dd-group-head{cursor:pointer}
.filter_box .dd-group-tools{display:flex;align-items:center;gap:8px}
.filter_box .dd-group-head .chev{position:static;display:inline-block;width:14px;height:14px;background-size:14px 14px;transform:none;opacity:.7;transition:transform .2s ease}
.filter_box .dd-group-head.dd-collapsed .chev{transform:rotate(-90deg)}
/* комплектации — стиль автохом: группа → чипы-параметры → строки с фото */
.filter_box .dd-group-head .dd-group-year{font-size:14px;font-weight:400;color:#c8d8e8}
.filter_box .dd-group-head .dd-group-count{font-size:11px;color:#7a8fa8}
.filter_box .dd-spec-chip{display:inline-flex;align-items:center;font-size:12px;font-weight:400;line-height:1.2;white-space:nowrap;color:#b8c8d8;background:none;border:none;padding:0}
.filter_box .dropdown[data-filter="spec"] .dd-inner{overflow-y:scroll;scrollbar-width:thin;scrollbar-color:#3a4453 transparent}
.filter_box .dropdown[data-filter="spec"] .dd-inner::-webkit-scrollbar{width:8px}
.filter_box .dropdown[data-filter="spec"] .dd-inner::-webkit-scrollbar-track{background:transparent}
.filter_box .dropdown[data-filter="spec"] .dd-inner::-webkit-scrollbar-thumb{background:#3a4453;border-radius:4px}
.filter_box .dropdown[data-filter="spec"] .dd-inner::-webkit-scrollbar-thumb:hover{background:#4d5a6e}
/* низ фильтра: «Сбросить все» (×+ссылка) слева, «Показать N» справа */
.filter-actions{display:flex;align-items:center;justify-content:space-between;gap:16px}
.filter-reset-all{display:none;align-items:center;gap:5px;font-size:14px;color:#9CA3AF;text-decoration:none;white-space:nowrap;cursor:pointer;flex-shrink:0;padding:0 0 0 2px;border:none;background:none;font-family:inherit}
.filter-reset-all:hover{color:#B32C35 !important}
.filter-reset-x{font-size:18px;line-height:1}
.filter-actions .btn-show{flex:1}
/* gap 10px между всеми ячейками фильтра */
.filter_box{gap:10px}
.filter_box .row{gap:10px}
.filter_box .dropdown,.filter_box .range-dd,.filter_box .price-range,.filter_box .mileage-range,.filter_box .col-split,.filter_box .filter-checkboxes-group{max-width:calc((100% - 20px) / 3)}
/* убрать градиенты-затемнения сверху/снизу выпадающих списков */
.dd-inner-wrapper::before,.dd-inner-wrapper::after{display:none}
/* стилизованный скроллбар под проект — 24px */
.filter_box .dd-inner{scrollbar-width:auto;scrollbar-color:#3a4a5c rgba(255,255,255,.03)}
.filter_box .dd-inner::-webkit-scrollbar{width:24px;display:block}
.filter_box .dd-inner::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
.filter_box .dd-inner::-webkit-scrollbar-thumb{background:#3a4a5c;border-radius:8px}
.filter_box .dd-inner::-webkit-scrollbar-thumb:hover{background:#5a6c80}

/* ───────── Между карточками 16px (#listing-cards = .filter-under-block) ───────── */
#listing-cards{gap:16px}
.listing-card-wrap{margin:0}

/* ───────── Вертикальный ритм страницы ───────── */
.content-blocks{gap:16px}
.sort-panel{margin-top:24px; margin-bottom:24px}
.filter-under-block{margin-top:24px}

/* ───────── Мобайл (≤768px): главная адаптируется. Десктоп не трогает. ───────── */
@media (max-width:768px){
  .popular-cars{max-width:100%; width:100%; overflow:hidden; padding:0 12px}
  .popular-cars-viewport{overflow:hidden}
  .content-blocks{flex-direction:column; gap:16px}
  .content-left,.content-right{width:100%}
  .content-right{flex-shrink:1; order:99; margin-top:16px}
  .listing-card,.listing-card-wrap{max-width:100%}
  .topbar{padding:12px}
  .topbar-center{flex-wrap:wrap; gap:10px; justify-content:center}
  .topbar-center .nav{gap:8px; flex-wrap:wrap; justify-content:center}
  .logo img{max-width:120px; height:auto}
  .nav-btn,.btn-in-stock{font-size:12px; padding:6px 10px; white-space:nowrap}
  img{max-width:100%; height:auto}
  body,html{overflow-x:hidden}
}

/* ═══════════ НЕТ анимации вдавливания: нажатие НЕ топит ячейку (scale 1) + высота всех ячеек 40px ═══════════ */
[data-theme="dark"] .filter_box .dd-head:active,[data-theme="dark"] .filter_box .range-head:active,
[data-theme="dark"] .filter_box .price-range .price-input-wrap:active,[data-theme="dark"] .filter_box .mileage-range .price-input-wrap:active,
[data-theme="dark"] .filter_box .slot:active,[data-theme="dark"] .filter_box .color-any:active,
[data-theme="dark"] .filter_box .color-circle:active,[data-theme="dark"] .filter_box .btn-show:active,
.sort-dropdown-btn:active,.lc-row--badges .cmp-desk-btn:active,.lc-badge--price:active,.lc-badge--contacts:active{scale:1 !important;transform:none !important}
[data-theme="dark"] .filter_box .dd-head,[data-theme="dark"] .filter_box .range-head,
[data-theme="dark"] .filter_box .price-range .price-input-wrap,[data-theme="dark"] .filter_box .mileage-range .price-input-wrap,
[data-theme="dark"] .filter_box .slot,[data-theme="dark"] .filter_box .btn-show{height:40px !important;min-height:40px !important}

/* ═══════════ Типографика ячеек фильтра: 14px / #e3e3e3 (значения + плейсхолдеры) ═══════════ */
[data-theme="dark"] .filter_box .dd-input,
[data-theme="dark"] .filter_box .slot-text,
[data-theme="dark"] .filter_box .price-input,
[data-theme="dark"] .filter_box .mileage-input{font-size:14px;color:#e3e3e3}
[data-theme="dark"] .filter_box .dd-input::placeholder,
[data-theme="dark"] .filter_box .price-input::placeholder,
[data-theme="dark"] .filter_box .mileage-input::placeholder{color:#e3e3e3}
/* кнопка «Показать» — 14px */
.filter_box .btn-show{font-size:14px}
.filter_box .row .btn-show{font-weight:600}
/* опции выпадающих списков — 14px и высота 40px */
[data-theme="dark"] .filter_box .dd-row{font-size:14px;height:40px !important}

/* ═══════════ Цвет: кружки прижать вправо, «Любой цвет» — пилюля по высоте кружков (26px) ═══════════ */
.filter_box .color-circles{margin-left:auto}
.filter_box .color-any{height:26px;box-sizing:border-box;border-radius:999px;padding:0 14px;display:inline-flex;align-items:center;line-height:1}

/* ═══════════ Марка: 3 секции (Любая марка • топ-10 • алфавит) + каретка ═══════════ */
.filter_box .dd-sep{height:1px;margin:0;background:rgba(255,255,255,.09);border:0;list-style:none}
.filter_box .dd-row.dd-reset.dd-brand-any,.filter_box .dd-row.dd-reset.dd-model-any,.filter_box .dd-row.dd-reset.dd-multi-any{display:flex;align-items:center;justify-content:flex-start;gap:8px}
.filter_box .dropdown[data-filter="brand"] .dd-header,.filter_box .dropdown[data-filter="model"] .dd-header{display:none}
/* затемнение 50% марки/модели при ОТКРЫТОМ дропдауне (ghost для поиска) — и с выбранным значением, и с пустым плейсхолдером; снимается при вводе (.is-typing). Стабильно по aria-expanded — без мерцания. */
[data-theme="dark"] .filter_box .dropdown[data-filter="brand"]:has(.dd-head[aria-expanded="true"]) .dd-input:not(.is-typing),
[data-theme="dark"] .filter_box .dropdown[data-filter="model"]:has(.dd-head[aria-expanded="true"]) .dd-input:not(.is-typing){opacity:.5}
.filter_box .dd-any-x{width:14px;height:14px;flex:0 0 14px;background: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='%239CA3AF' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center;background-size:contain}
/* каретка марки: затемнения НЕТ (вызывало мерцание white↔grey) — текст всегда #e3e3e3 */
/* количество машин в выпадающих списках — 12px */
[data-theme="dark"] .filter_box .dd-row-count{font-size:12px !important}
/* «Ничего не найдено» при поиске без совпадений — высота 40px, по центру */
.filter_box .dd-no-results{justify-content:center !important;color:#9CA3AF !important;cursor:default !important;pointer-events:none;height:40px !important;box-sizing:border-box !important;margin:0 !important}
.filter_box .dd-no-results:hover{background:transparent !important;color:#9CA3AF !important}
/* высота группы чекбоксов «Непроданные/Льготный» = 40px (как все ячейки); сами чекбоксы не трогаем */
.filter_box .filter-checkboxes-group{height:40px !important}
/* углы выпадающей панели не вылезают за обводку (клиппинг по border-radius) */
.filter_box .dd-panel,.filter_box .range-panel{overflow:hidden}
/* плашка «Продано» в lc-right (заливка #252A34) */
.listing-card--sold .lc-sold-stamp{font-family:inherit;background:#B22234;color:#fff;font-size:13px;font-weight:400;padding:4px 10px;border-radius:999px;line-height:1.4;white-space:nowrap;cursor:default;align-self:flex-end;margin-top:auto}
/* скругление skeleton при загрузке картинок убрано (уголки не скруглены) */
.listing-thumb-skeleton,.listing-thumb .skeleton,.listing-slide .skeleton{border-radius:0 !important}
/* «Ещё N фото» на последней картинке: без чёрной заливки (чистое фото), текст с тенью */
.listing-more-overlay{background:transparent !important}
.listing-more-overlay span,.listing-more-overlay svg{color:#fff;filter:drop-shadow(0 1px 6px rgba(0,0,0,.9))}
/* обводка ячеек при ховере — как у активной/открытой (bg #283341 + border) */
[data-theme="dark"] .filter_box .dd-head:hover,
[data-theme="dark"] .filter_box .slot:hover,[data-theme="dark"] .filter_box .price-range .price-input-wrap:hover,
[data-theme="dark"] .filter_box .mileage-range .price-input-wrap:hover,
[data-theme="dark"] .filter_box .dd-head:focus-within,
[data-theme="dark"] .filter_box .slot:focus-within,[data-theme="dark"] .filter_box .price-range .price-input-wrap:focus-within,
[data-theme="dark"] .filter_box .mileage-range .price-input-wrap:focus-within{background:#283341;border-color:rgba(255,255,255,0.04)}
/* range-head (контейнер двух слотов) — всегда прозрачный: НЕ заливается блоком при ховере */
[data-theme="dark"] .filter_box .range-head,[data-theme="dark"] .filter_box .range-head:hover,[data-theme="dark"] .filter_box .range-head:focus-within{background:transparent !important}
/* убрать theme-свечение (бирюзовый блок 18px) и сдвиг ячеек при ховере */
[data-theme="dark"] .filter_box .dropdown:hover,[data-theme="dark"] .filter_box .range-dd:hover{box-shadow:none !important;transform:none !important}
/* при выбранном значении: показываем крестик (сброс параметра), chev прячем;
   пустая ячейка — наоборот chev виден, крестик скрыт */
.filter_box .dd-clear,.filter_box .range-clear,.filter_box .price-clear,.filter_box .mileage-clear{display:none !important}
.filter_box .chev{visibility:visible !important;opacity:.6 !important}
.filter_box .dd-head[aria-expanded="true"] .chev{transform:translateY(-50%) rotate(180deg) !important}
.notice-suggestions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.notice-suggest-btn{background:#252d39;color:#c8d8e8;border:1px solid #3a4453;padding:6px 14px;border-radius:8px;cursor:pointer;font-size:13px;font-family:inherit}
.notice-suggest-btn:hover{background:#B32C35;color:#fff !important}
/* открытая ячейка: та же обводка/bg что у панели (скругления НЕ трогаем — как было) */
[data-theme="dark"] .filter_box .dd-head[aria-expanded="true"]{background:#283341;border-color:rgba(255,255,255,0.04)}

/* кнопки карточки (Расшифровка цены / Сравнить / Контакты) = стиль .color-any (пилюля 26px) */
.lc-row--badges{display:flex !important;gap:6px;flex-wrap:wrap;grid-template-columns:none !important}
.listing-card .lc-badge--price,.listing-card .lc-row--badges .cmp-desk-btn,.listing-card .lc-badge--contacts{
  display:inline-flex !important;align-items:center;justify-content:center;
  height:26px !important;box-sizing:border-box;border-radius:999px !important;padding:0 14px !important;
  font-size:12px !important;font-weight:400;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
  background:#2a3a4d !important;border:1px solid #3a4a5c !important;color:#b8c8d8 !important;width:auto !important;min-width:0;
}
.listing-card .lc-badge--price:hover,.listing-card .lc-row--badges .cmp-desk-btn:hover,.listing-card .lc-badge--contacts:hover{background:#34495e !important;color:#fff !important}
/* опции: только фон/цвет (убираем широкое transition:all) */
[data-theme="dark"] .filter_box .dd-row{transition:background-color .15s ease,color .15s ease}
/* ═══════════ Тень ячеек фильтра убрана ═══════════ */
[data-theme="dark"] .filter_box .dd-head,
[data-theme="dark"] .filter_box .price-range .price-input-wrap,
[data-theme="dark"] .filter_box .mileage-range .price-input-wrap,
[data-theme="dark"] .filter_box .slot{box-shadow:0 2px 2px rgba(0,0,0,0.08) !important}
[data-theme="dark"] .filter_box .range-head{box-shadow:none !important}

/* ═══════════ Чипы активных фильтров — пилюля (как «Любой цвет»), фон #f3bc3e, текст чёрный, красный × слева ═══════════
   ID-селектор (#active-chips) бьёт theme-файлы (0,2,0)!important. Клик по чипу удаляет фильтр (app.js). */
#active-chips{display:none;gap:8px;flex-wrap:wrap;padding:8px 4px}
/* Чипы рендерятся серверно в исходном HTML → при фильтрах контейнер сразу показан (точная высота, без прыжка) */
#active-chips.has-chips{display:flex}
#active-chips .active-chip{background:#EACB61 !important;color:#272F3C !important;border:none !important;border-radius:999px !important;height:26px;padding:0 12px;display:inline-flex !important;align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:1;box-sizing:border-box}
#active-chips .active-chip:hover{background:#f2d27a !important}
#active-chips .active-chip .active-chip-x{color:#B32C35 !important;font-weight:700;font-size:15px;line-height:1;margin-right:2px}
/* выпадающий блок опускается на 10px (не 8) */
.filter_box .dd-panel,.filter_box .range-panel{top:calc(100% + 10px) !important}
/* активная (открытая) ячейка получает тень как у её панели */
[data-theme="dark"] .filter_box .dd-head[aria-expanded="true"],[data-theme="dark"] .filter_box .range-dd:has(.range-head[aria-expanded="true"]) .slot{box-shadow:0 2px 2px rgba(0,0,0,0.25) !important}
/* активная маленькая ячейка (.slot Год/Объём): обводка как у большой dd-head — 0.04, а не ярче 0.1 */
[data-theme="dark"] .filter_box .range-dd:has(.panel-from:not([hidden])) .slot-from,
[data-theme="dark"] .filter_box .range-dd:has(.panel-to:not([hidden])) .slot-to{border-color:rgba(255,255,255,0.04) !important}
/* Прелоадер на самом фильтр-боксе убран — остаётся только спиннер ВНУТРИ
   выпадающего блока (.dd-preloader из showPreloader) при открытии/загрузке. */
@keyframes filterSpin{to{transform:rotate(360deg)}}
/* тост: комплектация снята из-за конфликта года (фиксированный, янтарный) */
.filter-toast{position:fixed;left:50%;top:84px;transform:translate(-50%,-12px);background:#283341;color:#fbbf24;border:1px solid rgba(255,185,0,.35);padding:10px 18px;border-radius:8px;font-size:13px;line-height:1.3;z-index:200;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 4px 16px rgba(0,0,0,.4);max-width:90vw;text-align:center;font-family:inherit}
.filter-toast.is-visible{opacity:1;transform:translate(-50%,0)}
/* ───────── Шапка главной: H1 НАД крошками, отступы/шрифты/цвета ───────── */
/* кнопки(шапка)→H1 = 40px, H1→крошки = 20px, крошки→фильтр = 20px */
.idx-page-title{font-size:30px !important;margin:40px 0 20px !important;padding:0 !important}
.city-breadcrumbs{font-size:16px !important;margin:0 0 20px !important;padding:0 !important}
.city-breadcrumbs a{color:#3385d1 !important}
.city-breadcrumbs a:hover{color:#B32C35 !important}
/* ячейка сортировки: ширина по контенту, без переносов (слова «Сортировка» больше нет — текст в самой кнопке) */
.sort-dropdown{width:245px}
.sort-dropdown-btn{width:100%;box-sizing:border-box}
.sort-dropdown-btn,.sort-dropdown-text{white-space:nowrap}
/* Информ-блок между фильтром и плашками: уведомление о сброшенных параметрах / «нет авто».
   Скрывается от любого клика по странице и крестиком справа. */
.filter-notice{display:none;align-items:flex-start;gap:10px;background:rgba(255,185,0,.08);border:1px solid rgba(255,185,0,.3);color:#fbbf24;padding:10px 14px;border-radius:8px;font-size:13px;line-height:1.4;margin:10px 0}
.filter-notice.is-visible{display:flex}
/* пустой стейт: мигает сама кнопка «Сбросить все фильтры» (текущий цвет #9CA3AF → красный ховера #B32C35), плавно */
.filter-reset-all.is-pulsing{animation:filterResetPulse 1.6s ease-in-out infinite alternate}
@keyframes filterResetPulse{from{color:#9CA3AF}to{color:#B32C35}}
.filter-notice-text{flex:1;min-width:0;white-space:pre-line}
.filter-notice-close{flex-shrink:0;background:none;border:none;color:#fbbf24;font-size:18px;line-height:1;cursor:pointer;padding:0 2px;opacity:.7}
.filter-notice-close:hover{opacity:1}

/* ═══════════ Блок комплектаций (новая структура): «Все комплектации» с ×, секции по фильтру,
   год → под-блоки (фото + характеристики + строки комплектаций) ═══════════ */
.filter_box .dd-row.dd-reset.dd-spec-any{display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:12px 6px 12px 12px;margin:0 0 4px 0}
.filter_box .dd-section-label{padding:8px 12px 4px;font-size:12px;font-weight:700;color:#EAB308;text-transform:uppercase;letter-spacing:.04em;cursor:default;list-style:none}
.filter_box .dd-section-label.dd-rest-label{margin-top:4px;border-top:1px solid rgba(255,255,255,.09)}
.filter_box .dd-body-head{display:flex;align-items:baseline;gap:8px;padding:10px 12px 4px;list-style:none}
.filter_box .dd-body-head .dd-body-name{font-size:13px;font-weight:700;color:#9fb4cc;text-transform:uppercase;letter-spacing:.03em}
.filter_box .dd-body-head .dd-body-count{font-size:11px;color:#7a8fa8}
.filter_box .dropdown[data-filter="spec"] .dd-options{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;padding:8px 4px 0}
.filter_box .dropdown[data-filter="spec"] .dd-options > li:not(.dd-spec-subblock){grid-column:1 / -1}
.filter_box .dd-spec-subblock{display:flex;flex-direction:column;gap:0;min-width:0;border:none;border-radius:0;background:#2b3340;padding:0;overflow:hidden;list-style:none;box-shadow:none;cursor:pointer}
.filter_box .dropdown[data-filter="spec"] .dd-options li.dd-spec-subblock:last-child{border-radius:0 !important}
.filter_box .dd-spec-subblock.dd-selected .dd-sub-chips{border-top-color:#f3bc3e}
.filter_box .dd-sub-left{flex:0 0 auto;position:relative}
.filter_box .dd-sub-img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#1a2330}
.filter_box .dd-sub-ph{width:100%;aspect-ratio:4/3;display:block;background:#1a2330}
.filter_box .dd-sub-noimg{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#1a2330,#1a2330 10px,#1e2937 10px,#1e2937 20px);color:#6b7c8f;font-size:13px;font-weight:500;text-align:center;box-sizing:border-box}
.filter_box .dd-sub-right{flex:0 0 auto;padding:0 4px}
.filter_box .dd-sub-chips{display:flex;flex-direction:column;gap:1px;padding:8px;background:#252d39;border-top:3px solid transparent;align-items:flex-start}
.filter_box .dd-sub-count{position:absolute;right:6px;bottom:6px;z-index:2;background:rgba(0,0,0,.72);color:#fff;font-size:12px;font-weight:600;padding:2px 7px;border-radius:999px}
.filter_box .dd-sub-names{display:flex;flex-direction:column;gap:4px;padding:0 4px 4px}
.filter_box .dd-sub-trim{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;background:none;border:none;color:#c8d4e0;font-size:14px;padding:7px 8px;border-radius:4px;cursor:pointer;text-align:left;font-family:inherit;box-sizing:border-box}
.filter_box .dd-sub-trim:hover{background:rgba(255,255,255,.04)}
.filter_box .dd-sub-trim.dd-selected{background:#17212B}
.filter_box .dd-sub-trim.dd-selected .dd-sub-trimname{color:#fff}
.filter_box .dd-sub-trim .dd-check{display:inline-block;width:13px;height:13px;border:2px solid #4a5568;border-radius:50%;flex-shrink:0;box-sizing:border-box;background:transparent}
.filter_box .dd-sub-trim.dd-selected .dd-check{border-color:#EAB308;background:radial-gradient(circle,#EAB308 2px,transparent 3px)}
.filter_box .dd-sub-trimname{flex:1;min-width:0;white-space:normal;word-break:break-word;line-height:1.25}
/* элементы trim-строки — по центру (align-items:center на .dd-sub-trim) */