/* Тема «Центр» — оформление демо-витрины «АДС-Центр» (autoshow.acemaster.ru).
   =====================================================================
   Канон: тема-оверлей поверх базового слоя (ADR-0033/0040; ADR-0068 —
   решение о теме «Центр»). Правки вида — только здесь, базовый слой не
   трогается; форки CSS-слоя запрещены (ADR-0053).

   Палитра — восстановление фирменных значений АДС-Центра (донор — легаси,
   `seed/extracted/adscenter`):
     основной синий (кнопки, акценты):   #4d81cd
     тёмный (ховеры, активные ссылки):   #366ec0
     маркетинговый акцент (бейджи-акции): #ff8c3a (точечно, вторая волна)
     красный (уведомления):              #e53935
   База перекрашена 05.09.2026 (0df1c08) в палитру «Авто Драйв»
   (#306fae/#245a8f/#e60000) — тема возвращает палитру АДС-Центра.

   Разделы: 1) переменные, 2) общие акценты, 3) шапка, 4) кнопки,
   5) каталог и карточки, 6) детальная, 7) кредит, 8) согласия (rkn),
   9) cookie-UI, 10) страницы/FAQ, 11) оживление главной (#393: сетка
   ленты, бургер-оверлей, ритм секций, кнопка «Показать все»),
   12) герой и его ручки (замеры эталона 20.10.2026),
   13) ручки карусели «Предложение дня».
   ===================================================================== */

/* ── 1. Переменные ─────────────────────────────────────────────────── */

:root {
    /* Канон ролей (CONTEXT.md, ADR-0080): primary — фирменный цвет
       (кнопки, CTA, активные состояния), accent — тёмный оттенок для
       hover/active, primary-light — светлый оттенок основного.
       До #658 роли были перевёрнуты: primary нёс тёмный #366ec0, а
       основной #4d81cd жил в primary-light литералами кнопок — из-за
       этого акцент каталога не доходил до кнопок и шапки.
       Значения — палитра донора АДС-Центра (разведка: docs/recon/adscenter.md,
       исходники донора: seed/extracted/adscenter/src/static/theme/css —
       вне git, как и в реконе): основной #4d81cd (соцкнопка, активные чипы
       марок, активные ссылки), тёмный #366ec0 (hover/active). `primary-light`
       оставлен прежним (#4d81cd): эталон третьего оттенка не задаёт, а смена
       значения перекрасила бы иконки преимуществ и рамку фокуса фильтра —
       дефолтный вид витрины должен остаться прежним.
       Внимание: роли переставлены осознанно — базовые виджеты, читающие
       `var(--c-primary)` (герой-кнопка, калькулятор кредита, бейдж «новый»),
       теперь берут фирменный #4d81cd вместо прежнего тёмного #366ec0. Это и
       есть предмет правки: до #658 канал акцентов до них не доходил. */
    --c-primary: #4d81cd;
    --c-accent: #366ec0;
    --c-primary-light: var(--c-primary);
    /* Роли канала 1.6+ (#729 каталога): цвет текста поверх заливки primary
       и тот же оттенок в роли краски. Дефолты воспроизводят прежний вид —
       белый текст на заливке и сам primary как краска; каталог переопределяет
       их блоком site_base.html, когда присылает роли. */
    --c-text-on-primary: #fff;
    --c-primary-as-text: var(--c-primary);
    /* Тёмные стопы канона (ADR-0080, волна #1001): нужны градиентам и
       глубоким подложкам. Дефолт — производная от основных ролей через
       color-mix, поэтому тема остаётся согласованной и БЕЗ канала: если
       админка каталога пришлёт свой акцент, тёмные стопы пересчитаются
       сами, а если канал пришлёт ещё и явные primary_dark/accent_dark —
       они переопределят эти значения (allowlist `_ACCENT_CSS_VARS`).
       Потребителей в теме «Центр» пока нет: роли объявлены, чтобы канал
       тёмных стопов работал, как только появятся градиенты. */
    --c-primary-dark: color-mix(in srgb, var(--c-primary) 78%, #000);
    --c-accent-dark: color-mix(in srgb, var(--c-accent) 72%, #000);
    /* Нейтральные роли канала (#701, ADR-0075): канал темы домена
       переопределяет их серверным блоком, дефолты ниже — вид без канала. */
    --c-bg: #fff;
    --c-surface: #f3f4f3;
    --c-surface-alt: #f6f8fb;
    --c-text: #2c2d2e;
    --c-text-muted: #7f7f86;
    --c-line: #e0e0e0;
    --c-line-strong: #d0d0d1;
    /* Роли подвала канала (1.6, #710): две ступени шкалы подвала. Носителя
       `.footer` у этой темы нет (подвал — карточка без тёмного класса),
       поэтому роли объявлены для канала и гейта, но пока не привязаны:
       привязка появится вместе с носителем. Дефолт — исторический тон. */
    --c-footer-dark: #16304f;
    --c-footer-light: #16304f;
}

body.theme-center {
    /* Легаси-страницы задавали хедер desktop от 1270px; тема держит
       тот же ритм, что база — переопределений нет. */
    min-width: 320px;
}

/* ── 2. Общие акценты ──────────────────────────────────────────────── */

a {
    /* Ссылки — канонический primary (#658): прежние литералы держали
       их вне канала акцентов */
    color: var(--c-primary-as-text);
}

a:hover {
    /* Hover — тёмный accent (#658) */
    color: var(--c-accent);
}

/* ── 3. Шапка ──────────────────────────────────────────────────────── */
/* Шапка читает канон (#658): телефон и лого — primary, активные ссылки
   и ховеры — тёмный accent. Литералы совпадали с дефолтами темы,
   поэтому вид витрины без переопределения не меняется, а акцент
   каталога доходит до шапки. */

header .phone {
    color: var(--c-primary-as-text);
}

header .phone svg path {
    stroke: var(--c-primary-as-text);
}

header nav a.active,
header nav a:hover {
    color: var(--c-accent);
}

header #menu div a.active {
    color: var(--c-accent);
}

header .phonefavorite .phone:hover {
    color: var(--c-accent);
}

header .phonefavorite .phone:hover svg,
header .phonefavorite .favorite:hover svg {
    stroke: var(--c-accent);
}

/* Гео-метка — ссылка на карту (эталон АДС, ADR-0073). Размер зоны 34×44
   как в эталоне, иконка 24px. Краска иконки ФИКСИРОВАННАЯ: красная метка
   #ff4433 — цвет файла `ya.svg` эталона (замер 20.10.2026), это знак
   «точка на карте», а не ссылка действия, поэтому она не идёт через канал
   акцентов: не перекрашивать в var(--c-primary). Класс свой
   (`header-map-link`): базовый `.map-link` — фолбэк-ссылка карты в
   контактах, с плашкой и рамкой. */
body.theme-center header .phonefavorite .header-map-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 44px;
    color: inherit;
    text-decoration: none;
}

body.theme-center header .phonefavorite .header-map-link svg {
    width: 24px;
    height: 24px;
    display: block;
}

header .search button:hover svg path {
    stroke: var(--c-accent);
}

/* Кнопка поиска шапки — без капсулы (дефект приёмки 16.10, #637: «иконка
   поиска обведена тенью»): кнопка прозрачная, но наследует от общих
   правил `button` радиус .857rem (база ui.css) и тень (база general.css,
   перекрашена выше) — вокруг иконки читалась белесая капсула, выходящая
   за поле. Гасим оба в покое и на ховере; тот же класс дефекта, что у
   Кнопки-бургера (#408). */
body.theme-center header .search button,
body.theme-center header .search button:hover {
    box-shadow: none;
    border-radius: 0;
}

/* Фолбэк без знака (вид «text»): в подвале имя — тёмный accent по
   канону ролей (#658, ADR-0080). В шапке оно стоит на синей плашке
   #4d81cd, где тёмный accent #366ec0 даёт контраст 1.29:1 (WCAG —
   ниже порога 3:1 даже для крупного текста), а белое имя — 3.94:1;
   поэтому в шапке имя белое. */
body.theme-center header a.logo .logo-name {
    color: #fff;
}

body.theme-center footer a.logo .logo-name {
    color: var(--c-accent);
}

/* Знак темы (эталон АДС): фирменный SVG вместо текстового имени.
   Замеры оригинала 20.10.2026 (стенд эталона 8099): плашка-контейнер
   логотипа 175×56 с фоном #4d81cd (радиус — из базовой темы, .857rem),
   знак 80×46 внутри ссылки 94×46. Сам знак рисован в натуральном
   синем #4d81cd (logo.svg): в шапке он осветляется до белого фильтром,
   в подвале остаётся синим, как в оригинале.

   Цвет плашки — var(--c-primary): дефолт темы после #658 (ADR-0080) равен
   #4d81cd, то есть эталону, но акцент витрины доходит до плашки, а не
   упирается в литерал. Тени у плашки в оригинале нет — база «нейтральной
   головы» её добавляет.

   Селектор знака — по полному пути ассета: по одному имени logo.svg
   правило поймало бы BRAND_LOGO (S3-картинку витрины) с тем же именем
   файла и исказило бы её размером и белым фильтром. */
body.theme-center header .logomenu {
    background-color: var(--c-primary);
    box-shadow: none;
}

/* База «нейтральной головы» (general.css, конец файла) перекрывает
   гамбургер тёмным #245a8f — на фирменной синей плашке его не видно.
   В эталоне линии белые. */
body.theme-center header .logomenu .hamburger .top,
body.theme-center header .logomenu .hamburger .middle,
body.theme-center header .logomenu .hamburger .bottom {
    stroke: #fff;
}

body.theme-center header a.logo img[src$="/themes/center/logo.svg"],
body.theme-center footer a.logo img[src$="/themes/center/logo.svg"] {
    display: block;
    width: 80px;
    height: 46px;
}

body.theme-center header a.logo img[src$="/themes/center/logo.svg"] {
    filter: brightness(0) invert(1);
}

/* Адаптив знака — те же пороги, что в оригинале (замеры 20.10.2026:
   80×46 от 640 px, 74×43 ниже, 65×37 до 400 px включительно). */
@media (max-width: 639px) {

    body.theme-center header a.logo img[src$="/themes/center/logo.svg"],
    body.theme-center footer a.logo img[src$="/themes/center/logo.svg"] {
        width: 74px;
        height: 43px;
    }
}

@media (max-width: 400px) {

    body.theme-center header a.logo img[src$="/themes/center/logo.svg"],
    body.theme-center footer a.logo img[src$="/themes/center/logo.svg"] {
        width: 65px;
        height: 37px;
    }
}

/* Разделитель перед знаком в шапке — осветлённый акцент (замер эталона
   20.10.2026: #a2bde5, то есть primary, смешанный с белым пополам; в базе
   #e0e0e0 — на синей плашке разделитель выглядит инородно). */
body.theme-center header a.logo:before {
    background-color: color-mix(in srgb, var(--c-primary) 50%, #fff);
}

/* Верхняя строка меню (#topmenu) на широких экранах остаётся скрытой,
   как в базовой теме (general.css, min-width: 1271px — «одна навигация
   на desktop»). В эталоне АДС эта строка видима и несёт навигацию
   («Рассрочка», «Подбор авто», «Автоблог», «Отзывы»), но у витрины «Центр»
   состав top_items другой — служебные пункты (Cookies, политика, согласие).
   Показывать их в шапке — хуже, чем не показывать: возврат строки делаем
   после наполнения данных витрины (решение владельца 20.10.2026). */

/* Счётчик избранного — уведомление (красный АДС-Центра). */
header .phonefavorite .favorite.notempty span {
    background-color: #e53935;
}

#topmenu .wrap a:hover,
#topmenu .wrap a.active {
    /* Активная ссылка верхнего меню — accent (#658) */
    color: var(--c-accent);
}

#adressline {
    /* Полоса адресов в шапке — primary с тёмной окантовкой (#658) */
    background-color: var(--c-primary);
    border-top-color: var(--c-accent);
}

/* Плавающая кнопка связи (пульс) и соцкнопка. */
#socials {
    background: var(--c-primary);
}

.pulse-button__rings {
    border-color: var(--c-primary);
}

/* ── 4. Кнопки ─────────────────────────────────────────────────────── */

button,
.button,
.btn,
.btn-primary,
.button-primary,
.submit-button,
input[type="submit"],
#applyFilters,
#notfind button {
    /* CTA — канонический primary (#658): литерал #4d81cd держал кнопки
       вне канала акцентов; значение дефолта то же, вид не меняется. */
    background-color: var(--c-primary);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--c-primary) 22%, transparent);
}

button:hover,
.button:hover,
.btn:hover,
.btn-primary:hover,
.button-primary:hover,
.submit-button:hover,
input[type="submit"]:hover,
#applyFilters:hover,
#notfind button:hover {
    /* Hover — тёмный accent (#658) */
    background-color: var(--c-accent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--c-primary) 30%, transparent);
}

/* Кнопка-ссылка «уточнить» (`.muted-run`): подложка и канон hover —
   база (фикс приёмки 06.10); тема задаёт только акцент АДС-Центра. */
.muted-run:hover {
    color: var(--c-accent);
}

/* «Показать все» (offer_list): канон #266 — компактная вторичная кнопка —
   уже в базе (`widgets.css`); тема правила не дублирует (ADR-0053 —
   темы несут значения, не копии). Hover-акцент приходит через
   var(--c-primary) — после #658 это фирменный `#4d81cd` (роль primary),
   а не прежний тёмный `#366ec0`. */

/* ── 5. Каталог и карточки ─────────────────────────────────────────── */

.breadcrumbs li:not(:last-child)::after {
    color: var(--c-primary-as-text);
}

.breadcrumbs a:hover {
    color: var(--c-accent);
}

/* Плашки марок (главная, страницы моделей, каталог) — эталон АДС,
   замеры 20.10.2026: пилюля высотой 43, радиус 28, серый фон #f3f4f3,
   логотип марки 28×28 в круге с тонкой обводкой, зазор 7, текст 14/700.
   В эталоне у пилюли две псевдоподложки: `::before` — вращающаяся
   градиентная обводка на hover, `::after` — внутренний серый слой,
   который оставляет от градиента только кайму 1px. */
body.theme-center #brands .brand-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 43px;
    min-height: 43px;
    width: auto;
    /* Поля симметричные по 16px — как в эталоне: логотип начинается с 16px,
       название — с 51px (16 + 28 лого + 7 зазор). Марка-ссылка без логотипа
       («Все марки») получает то же поле слева, поэтому надпись не
       прижимается к краю. */
    padding: 7.588px 16px;
    border: none;
    border-radius: 28px;
    background: var(--c-surface, #f3f4f3);
    color: var(--c-text, #2c2d2e);
    font-size: 14px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

/* Раскладка полосы марок: в эталоне марки-ссылки идут потоком по ширине текста
   (flex + wrap, зазор 14), а не сеткой равных колонок — поэтому длинные
   названия («LADA (ВАЗ)») не растягивают соседей. */
body.theme-center #brands .brand-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

body.theme-center #brands .brand-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 200%;
    margin: auto;
    aspect-ratio: 9 / 9;
    z-index: 0;
    transform: translate(-50%, -50%);
}

body.theme-center #brands .brand-btn::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 28px;
    background: var(--c-surface, #f3f4f3);
    z-index: 1;
}

body.theme-center #brands .brand-btn img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 100%;
    border: 1px solid rgba(0, 0, 0, .102);
    padding: 2.8px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

body.theme-center #brands .brand-btn b {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--c-text, #2c2d2e);
    position: relative;
    z-index: 2;
}

/* Hover: кайма из вращающегося градиента (роль primary) + смена фона и
   тень. Анимация только для устройств с наведением — на тач-экранах
   кайма не нужна. */
body.theme-center #brands .brand-btn:hover {
    /* Фон подложки не виден: ::after (z-index 1) непрозрачен и закрывает его —
       при наведении работает только внешняя тень и край-градиент ниже. */
    box-shadow: rgba(0, 0, 0, .05) 0 2px 4px 0;
    text-decoration: none;
}

@media (hover: hover) {
    body.theme-center #brands .brand-btn:hover::before {
        background-image: conic-gradient(var(--c-primary) 0deg, var(--c-primary) 5%, transparent 5%, transparent 50%,
                var(--c-primary) 50%, var(--c-primary) 55%, transparent 55%, transparent 100%);
        animation: center-brand-spin 5s linear infinite;
    }
}

body.theme-center .brand-selector .toggle-btn:hover {
    background: #e0e0e0;
    border-color: var(--c-primary);
    color: var(--c-accent);
}

/* ── Роль «Все марки» — одна (эталон АДС, ADR-0076) ──
   В эталоне «Все марки» — акцентная кнопка 105×43: фон rgb(77,129,205),
   белый текст, радиус 28. У нас роль играют два разных элемента: при
   малом числе марок — марка-ссылка `[title="Все марки"]` (была серая),
   при большом — `#showAllBtn`/`#collapseBtn` (были серые тоже). Оба
   получают один вид, иначе одна и та же роль выглядит по-разному в
   зависимости от количества марок в каталоге. */
body.theme-center #brands .brand-btn[title="Все марки"],
body.theme-center #brands #showAllBtn,
body.theme-center #brands #collapseBtn {
    box-sizing: border-box;
    height: 43px;
    min-height: 43px;
    padding: 3.794px 16px;
    color: var(--c-text-on-primary);
    background: var(--c-primary);
    border: none;
    border-radius: 28px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Текст внутри марки-ссылки красится своим правилом (`.brand-btn b` —
   тёмный), поэтому акцентную роль задаём и ему. */
body.theme-center #brands .brand-btn[title="Все марки"] b {
    color: #fff;
    font-weight: 400;
}

/* Псевдоподложки марки-ссылки (`::before` — градиентная кайма,
   `::after` — серый внутренний слой, закрывающий фон) для акцентной роли
   не нужны: они перекрыли бы акцентный фон и вернули серую плашку. */
body.theme-center #brands .brand-btn[title="Все марки"]::before,
body.theme-center #brands .brand-btn[title="Все марки"]::after {
    content: none;
    display: none;
}

body.theme-center #brands .brand-btn[title="Все марки"]:hover,
body.theme-center #brands #showAllBtn:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
}

@keyframes center-brand-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Скидки карточек — светлый синий АДС-Центра (легаси-эталон: скидки
   донора были светлым синим, не тёмным). */
#products .card .text h5 .discount,
#products .card .text p.cost .discount,
.catalog-section .card .text h5 .discount,
.catalog-section .card .text p.cost .discount {
    color: var(--c-primary-as-text);
}

/* Маркетинговый бейдж «Предложение дня» — оранжевый акцент АДС-Центра
   (легаси: фон #ff8c3a). Контраст текста AA: #2c2d2e на #ff8c3a ≈ 7.3:1. */
body.theme-center .daily-badge {
    background: #ff8c3a;
    color: var(--c-text, #2c2d2e);
}

/* Бейдж «Популярный выбор» карточки-подборки — тот же оранжевый акцент
   эталона (легаси #tocatalog .badge: #ff8c3a на белом тексте). Базовый
   слой даёт нейтральный var(--c-accent) темы, здесь — значение слепка. */
body.theme-center #tocatalog .badge {
    background: #ff8c3a;
    color: #fff;
}

/* Избранное и пагинация. */
.heartadd:hover svg path,
#searchresult .heartadd:hover svg path {
    stroke: var(--c-accent);
}

.heartadd.favorite svg path,
#searchresult .heartadd.favorite svg path {
    fill: var(--c-accent);
    stroke: var(--c-accent);
}

.dot.active,
#searchresult .dot.active {
    border-bottom: 3px solid var(--c-primary);
}

/* Индикатор кадра в фотопревью карточки (эталон АДС, ADR-0073).
   Полоска 3px акцента у активного кадра объявлена выше (`.dot.active`),
   но не показывалась: канонические поля кнопок растягивали `.dot` выше
   полосы `.slider-dots` (20px), и рамка уходила за её край. Здесь только
   сброс полей и box-sizing — высота и прозрачная рамка уже приходят из
   базы (`catalog.css`). Вид — эталонный, зона клика — наша: полоса 20px,
   клик по фото ведёт в карточку (ADR-0016). */
body.theme-center .slider-dots .dot {
    box-sizing: border-box;
    padding: 0;
}

#pagination .pagination-controls button:hover svg {
    fill: var(--c-accent);
}

.cn-dot.is-active {
    background: var(--c-primary);
}

/* ── 6. Детальная страница ─────────────────────────────────────────── */

#product .text .complectation-item.active {
    border-color: var(--c-primary);
}

#trade-in {
    fill: var(--c-primary-as-text);
}

#exchangeform .close,
#getcredit .close {
    stroke: var(--c-primary-as-text);
}

#exchangeform .close:hover,
#getcredit .close:hover {
    stroke: var(--c-accent);
}

#product .gallery .thumbs .cn-slide.cn-slide-thumb-active img {
    border: 1px solid var(--c-primary);
}

/* ── 7. Кредит ─────────────────────────────────────────────────────── */

.thin-range-slider::-webkit-slider-thumb {
    background: var(--c-primary);
}

.thin-range-slider::-moz-range-thumb {
    background: var(--c-primary);
}

#credityears .button:hover {
    border: 1px solid var(--c-primary);
}

#credityears .button.active {
    border: 1px solid var(--c-accent);
}

.progress-fill {
    background: var(--c-primary);
}

/* ── 8. Согласия (rkn) ─────────────────────────────────────────────── */

.rkn small a {
    color: var(--c-primary-as-text);
}

.rkn small a:hover {
    color: var(--c-accent);
}

.rkncheckboxbutton.checked .rkncheck,
.rkncheckboxbutton.checked .rkncheckbox {
    stroke: var(--c-primary-as-text);
}

.rkn.error .rkncheckboxbutton.checked .rkncheckbox {
    stroke: var(--c-primary-as-text);
}

/* ── 9. Cookie-UI (152-ФЗ, ADR-0063) ───────────────────────────────── */

.cookie-notification__content a {
    color: var(--c-primary-as-text);
}

.cookie-notification__content a:hover {
    color: var(--c-accent);
}

#accept-cookies {
    background-color: var(--c-primary);
    border: 1px solid var(--c-primary);
}

#accept-cookies:hover {
    border: 1px solid var(--c-accent);
    background-color: var(--c-accent);
}

.cookie-notification__settings:hover {
    color: var(--c-primary-as-text);
}

.cookie-settings-modal__dismiss:hover {
    background: color-mix(in srgb, var(--c-primary) 8%, transparent);
    color: var(--c-accent);
}

.cookie-settings-form__save {
    background-color: var(--c-primary);
    border: 1px solid var(--c-primary);
}

.cookie-settings-form__save:hover {
    background-color: var(--c-accent);
    border-color: var(--c-accent);
}

.cookie-settings-form__decline {
    border: 1px solid var(--c-primary);
    color: var(--c-primary-as-text);
}

.cookie-settings-form__decline:hover {
    background-color: color-mix(in srgb, var(--c-primary) 6%, #fff);
    border-color: var(--c-accent);
    color: var(--c-accent);
}

/* ── 10. Страницы и FAQ ────────────────────────────────────────────── */

/* 10.1. FAQ по оригиналу АДС (волна «визуал-4», ADR-0076): акцент
   оригинала — #366ec0, то есть РОЛЬ `--c-accent` темы (тёмный оттенок
   палитры донора), а не брендовый `--c-primary`; литералов нет — канон
   CONTEXT «акценты только из канала». На десктопе чипы категорий без
   скругления (в эталоне 0, у нас было 6px). Текст активного чипа на
   мобиле — белый на заливке. */
body.theme-center .category-item:hover,
body.theme-center .category-item.active {
    color: var(--c-accent);
}

body.theme-center .category-item.active {
    background-color: color-mix(in srgb, var(--c-accent) 5%, transparent);
    border-left-color: var(--c-accent);
}

body.theme-center .category-item.active .count-badge {
    background-color: var(--c-accent);
}

body.theme-center .faq-question:hover,
body.theme-center .faq-question.active {
    color: var(--c-accent);
}

body.theme-center .faq-item:hover {
    border-color: color-mix(in srgb, var(--c-accent) 45%, #ffffff);
}

/* Полоса категорий на узких экранах должна занимать всю ширину
   контейнера: правило виджета `.faqlist .sidebar` (специфичность выше
   медийного `.sidebar`) держало 200px, и прокручиваемая полоса
   обрывалась на середине экрана. */
@media (max-width: 48rem) {
    body.theme-center .faqlist .sidebar {
        width: 100%;
    }

    body.theme-center .category-list {
        padding: 0.5rem 0 0.75rem;
    }

    body.theme-center .category-item {
        flex: 0 0 auto;
    }

    body.theme-center .category-item.active {
        background-color: var(--c-accent);
        border-color: var(--c-accent);
        color: #ffffff;
    }
}

/* Десктоп: чипы-категории — плоские строки списка, без скругления
   (эталон АДС), как и было до темы по форме, но без радиуса 6px. */
@media (min-width: 48.0625rem) {

    body.theme-center .category-item,
    body.theme-center .category-item.active {
        border-radius: 0;
    }
}

/* Иконки преимуществ — роль --c-primary-light (значение #4d81cd, как в
   эталоне донора). Остальные иконки и подписи блока оставлены литералами
   до волны 2: их палитра совпадает, замена значения не меняет. */
.advantage-icon svg {
    stroke: var(--c-primary-light);
}

.trust-item-icon svg {
    stroke: var(--c-primary-as-text);
}

.trust-item b {
    color: var(--c-primary-as-text);
}

/* ── 11. Оживление главной (задача #393, объём темы) ───────────────── */

/* 11.1. Поток карточек: сетка принадлежит потоку, а не секции (ADR-0084).
   Раньше grid висел на `#products`, и `h2` на детальной получал одну
   ячейку — карточки начинались в том же ряду (приёмка 22.10.2026).
   Теперь секция — блок, сетка — на `.feed-grid`: заголовок, `#showall`
   и пагинация в сетку попасть не могут. 4 в ряд на ≥1200 (канон),
   3/2/1 ниже. Оверрайды композиции — в скоупе темы (body.theme-center,
   ADR-0040). */
body.theme-center #products {
    display: block;
    width: 100%;
    margin-top: 2rem;
}

/* Контейнер главной: все секции — в той же полосе, что шапка (замер
   23.10.2026 на 1920: секции шли от x=12 до 1908, шапка — 210..1710;
   марки, лента, описания и услуги выглядели сдвинутыми влево на 198px).
   Главную опознаём по маркам (`#brands` — её прямой ребёнок): на деталке
   прямым ребёнком `main` идёт fixed-попап `#getcredit`, в каталоге —
   `#notfind` со страниц темы; без этого ограничения попап сужался бы до
   контейнера. Порог 1200 — тот же, что у ядра для `.wrap` (ui.css). */
body.theme-center main:has(> #brands) > section,
body.theme-center main:has(> #brands) > div.container {
    width: 100%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 1400px) {
    body.theme-center main:has(> #brands) > section,
    body.theme-center main:has(> #brands) > div.container {
        max-width: 1200px;
    }
}

body.theme-center #products .feed-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}

body.theme-center #products .card {
    width: auto;
    margin: 0;
}

@media only screen and (max-width: 1199px) {
    body.theme-center #products .feed-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 999px) {
    body.theme-center #products .feed-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 600px) {
    body.theme-center #products .feed-grid {
        grid-template-columns: 1fr;
    }
}

/* 11.2. Бургер на широких: раскрытие мега-меню — оверлей поверх
   контента, без сдвига страницы (было: панель в потоке шапки).
   Скоуп темы (ADR-0040); `header` — sticky (ADR-0041), панель встаёт
   от его нижней границы. */
@media only screen and (min-width: 1024px) {
    body.theme-center header #menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 30;
        margin: 0;
        box-shadow: 0 .5rem 1.25rem rgba(44, 45, 46, .12);
    }

    /* Клип шапки снимается на время открытого меню (#636): панель —
       absolute-оверлей под нижней границей sticky-шапки, а header —
       контейнер обрезки/скролла (overflow-x: hidden; overflow-y: auto).
       Без снятия клипа панель в DOM открыта, но не отображается.
       Снимается и базовая горизонтальная обрезка шапки — при открытом
       меню это безопасно: скролл страницы заблокирован (html.overflow-
       hidden от ядра), переполнение проверено (кадры 1350/960/380).
       Два правила, а не список селекторов: список не «прощающий» — в
       браузерах без :has() правило с ним отбрасывается целиком, и
       фолбэк в том же списке не работал бы. Фолбэк шире меню: класс
       html.overflow-hidden ядро ставит и поисковой панели, и модалкам
       (там клип тоже снимается — при заблокированном скролле безобидно). */
    body.theme-center header:has(#menu.open) {
        overflow: visible;
    }

    html.overflow-hidden body.theme-center header {
        overflow: visible;
    }
}

/* 11.3. Вертикальный ритм секций главной (равномерные поля ≥3rem).
   Специфичность выше базовых секционных классов (`.brand-selector`
   и т.п. задают margin 24–28px) — префикс body.theme-center. */
body.theme-center main>section {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

/* Секция ленты — id-правило базы (`#products { margin-top: 2rem }`)
   перебивается id-правилом темы. */
body.theme-center main>section#products {
    margin-top: 3rem;
}

body.theme-center main>section.brand-selector {
    margin-top: 2rem;
}

/* ── 12. Карточка «Фильтры» (задача #638, вид оригинала АДС) ────────
   Витринный слой раскладки главной + надстройка над ядром facet-controls
   (selects-вид, ручное применение) — способ как у темы lime:
   - «Показать больше» раскрывает детальную панель ядра на месте
     ([data-filters-toggle] — контракт facet-controls.js);
   - лейбл тогла в закрытом состоянии рисует ::after, родной текст
     скрывается нулевым кеглем: ядро переписывает textContent тогла
     («Свернуть»/«Все фильтры») только после кликов, а вид оригинала
     в закрытом состоянии — «Показать больше»;
   - шапка-дубль ядра (h5 «Фильтры» + кнопка «Все фильтры») подавлена,
     «Сбросить» и бейдж активных остаются в раскрытой панели.
   Палитра АДС: #4d81cd (светлый) / #366ec0 (тёмный). */
body.theme-center .search-panel {
    /* auto по бокам — общий контейнер главной (1500); раньше `2rem 0`
       перебивало его и полоса фильтров оставалась прижатой влево. */
    margin: 2rem auto;
}

/* Базовый `.container` — флекс-контейнер (`.container, .flex` из базы):
   в ветке карточки он собирал «шапку, сетку и кнопку» в одну строку
   (факт локальной приёмки #638 — поля в столбик 180px). Все три уровня
   ветки — блочные; сетку рисует `.filters-grid`. */
body.theme-center .search-panel>.wrap,
body.theme-center .search-panel-form,
body.theme-center .search-panel .filter-card {
    display: block;
    width: auto;
}

body.theme-center .search-panel .filter-card {
    /* Эталон АДС (замер 20.10.2026): карточка 21px поля, радиус 16. */
    padding: 21px;
    border-radius: 16px;
}

body.theme-center .filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    /* Разделитель под шапкой карточки — как в оригинале АДС (14px). */
    padding-bottom: 14px;
    border-bottom: 1px solid #e6e9ed;
}

body.theme-center .filter-header h5 {
    margin: 0;
    font-size: 18px;
    /* Вес 700 — замер эталона АДС (18.004px / 700). */
    font-weight: 700;
    color: var(--c-text, #2c2d2e);
}

body.theme-center .filters-expand {
    font-size: .9rem;
    /* Текст «Показать больше» тёмный, линия под ним — акцентная 2px (эталон:
       border-bottom 2px акцента, а не text-decoration). Шорткат
       `text-decoration` сбрасывал бы text-decoration-color в currentColor,
       поэтому линия сделана рамкой. */
    color: #333;
    text-decoration: none;
    border-bottom: 2px solid var(--c-primary);
    padding-bottom: 3px;
    cursor: pointer;
}

body.theme-center .filters-expand:hover {
    color: var(--c-accent);
    border-bottom-color: var(--c-accent);
}

body.theme-center .search-panel form:has(.facet-panel.facet-detail-hidden) .filters-expand {
    font-size: 0;
}

body.theme-center .search-panel form:has(.facet-panel.facet-detail-hidden) .filters-expand::after {
    content: 'Показать больше';
    font-size: .9rem;
}

/* Сетка полей — пороги эталона АДС (замеры 20.10.2026, ADR-0073):
   три колонки шире 768px (эталон держит три вплоть до 810px), две — на
   768px и уже, одна — на 500px и уже. Было: две уже с 1024px, то есть на
   планшете полей стояло меньше, чем в оригинале. */
body.theme-center .filters-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem 1.1rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    body.theme-center .filters-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 500px) {
    body.theme-center .filters-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

body.theme-center .filter-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}

body.theme-center .filter-field>span {
    /* Подпись поля — 14px тёмная, с двоеточием как в эталоне («Марка:»). */
    font-size: 14px;
    font-weight: 400;
    color: #333;
}

body.theme-center .filter-field>span::after {
    content: ':';
}

body.theme-center .filter-field select {
    width: 100%;
    /* Поле — как select-trigger эталона: высота 44, поля 14, радиус 12.25.
       box-sizing важен: без него padding 14 прибавлялся к высоте и поле
       выходило 48px вместо эталонных 44. */
    box-sizing: border-box;
    height: 44px;
    padding: 14px 34px 14px 14px;
    font-size: 14px;
    color: var(--c-text, #2c2d2e);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236b7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;
    border: 1px solid #d9d9d9;
    border-radius: 12.25px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .15s ease;
}

body.theme-center .filter-field select:hover {
    border-color: var(--c-primary);
}

body.theme-center .filter-field select:focus {
    border-color: var(--c-accent);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary) 18%, transparent);
}

body.theme-center .filter-actions {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-top: 1.1rem;
    flex-wrap: wrap;
}

/* Кнопки-действия: одна база и виды (эталон АДС, ADR-0073/ADR-0076).
   База — то, что у эталонных кнопок общее: радиус 12, шрифт 14/400,
   горизонтальные поля 21px, высота 38px. Виды различаются краской:
   основная — акцент, вторичная — #919399, тёмная — #2c2d2e,
   светлая — белая с тёмным текстом.

   Круг шире, чем в волне «визуал-3»: раньше токен покрывал только
   «Применить»/«Сбросить»/«Подобрать авто», а попапы, лид-формы,
   калькулятор, кнопки ленты и детальной оставались в старом виде
   (48px / радиус 6–8.75 / 13.1–15px / вес 600) — кнопки разъезжались
   от блока к блоку. Теперь один список селекторов. */
body.theme-center .filter-actions .find-btn,
body.theme-center .filters-reset,
body.theme-center #notfind button,
body.theme-center .btn-secondary,
body.theme-center header .phonefavorite button,
body.theme-center #showall,
body.theme-center .rknbtn,
body.theme-center #know-button,
body.theme-center #accept-cookies,
body.theme-center .creditcalc-submit,
body.theme-center .card .buttons button {
    box-sizing: border-box;
    height: 38px;
    /* Высота задаётся вместе с минимумом: иначе кнопку растягивают
       собственные поля/строка базы (она даёт min-height 48px),
       и эталонные 38px не держатся. */
    min-height: 38px;
    padding: 0 21px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease;
}

/* Кнопка ленты — 43px: это высота эталонных карточек (замеры 21.10.2026),
   кнопка живёт в сетке карточки и растёт вместе с ней. */
body.theme-center .card .buttons button {
    height: 43px;
    min-height: 43px;
}

/* Вторичная — «Показать ещё», «Сбросить»: выше на 2px. Краска у обоих
   #919399; здесь же единый hover, иначе вторичные кнопки темнели
   по-разному (база даёт #2c2d2e). */
body.theme-center .filters-reset,
body.theme-center .btn-secondary {
    height: 40px;
    min-height: 40px;
}

body.theme-center .btn-secondary:hover,
body.theme-center .filters-reset:hover {
    background: #767c85;
}

/* Основная — акцент, белый текст. «Показать все» тоже основная: в эталоне
   это синяя кнопка, а не белая плашка (было 40px / радиус 10 / 13.3px). */
body.theme-center .filter-actions .find-btn,
body.theme-center #notfind button,
body.theme-center header .phonefavorite button,
body.theme-center #showall,
body.theme-center .rknbtn,
body.theme-center #know-button,
body.theme-center #accept-cookies,
body.theme-center .creditcalc-submit,
body.theme-center .card .buttons button {
    color: var(--c-text-on-primary);
    background: var(--c-primary);
    box-shadow: none;
}

body.theme-center .filter-actions .find-btn:hover,
body.theme-center #notfind button:hover,
body.theme-center header .phonefavorite button:hover,
body.theme-center #showall:hover,
body.theme-center .rknbtn:hover:not(:disabled),
body.theme-center #know-button:hover:not(:disabled),
body.theme-center #accept-cookies:hover,
body.theme-center .creditcalc-submit:hover,
body.theme-center .card .buttons button:hover {
    background: var(--c-accent);
    box-shadow: none;
}

/* Недоступное действие — серое, не акцентное (эталон): пока форма не
   заполнена, кнопка не должна выглядеть готовой к нажатию. */
body.theme-center .rknbtn:disabled,
body.theme-center .rknbtn:disabled:hover,
body.theme-center .creditcalc-submit:disabled,
body.theme-center #know-button:disabled,
body.theme-center #accept-cookies:disabled {
    color: #fff;
    background: #919399;
    cursor: default;
    opacity: 1;
}

/* «Сбросить» — серая кнопка оригинала АДС; ссылка (списки, сброс в
   чистый каталог) и button[type=reset] (главная) выглядят одинаково,
   без подчёркивания ссылочного стиля. */
body.theme-center .filters-reset {
    color: #fff;
    background: #919399;
    box-shadow: none;
}

body.theme-center .filters-reset:hover {
    color: #fff;
    box-shadow: none;
}

/* ── Кнопки страницы предложения (эталон АДС, замеры 21.10.2026) ──
   Три роли с разными высотами — так в эталоне: заявка и тест-драйв по
   38px, «Кредитный калькулятор» — 45px и белая (единственная светлая в
   наборе). Табы — 38px и вес 400: раньше они были 13.1/600.

   Селекторы намеренно повторяют id-путь базы (`#product .text .btns
   button`: радиус 10, кегль 15, min-height 48) — без этого специфичность
   темы проигрывала базе и кнопки оставались 48/15/10 (замечание ревью
   PR #705). `width: 100%` базы сохраняется: кнопки по-прежнему в колонку. */
body.theme-center #product .text .btns button,
body.theme-center #product .btns button {
    height: 38px;
    min-height: 38px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;
}

body.theme-center #product .text .btns #credit,
body.theme-center #product .btns #credit {
    color: var(--c-text-on-primary);
    background: var(--c-primary);
}

body.theme-center #product .text .btns #credit:hover,
body.theme-center #product .btns #credit:hover {
    background: var(--c-accent);
}

body.theme-center #product .text .btns #call,
body.theme-center #product .btns #call {
    color: #fff;
    background: #2c2d2e;
}

body.theme-center #product .text .btns #call:hover,
body.theme-center #product .btns #call:hover {
    background: #1f2021;
}

body.theme-center #product .text .btns #tradein,
body.theme-center #product .btns #tradein {
    height: 45px;
    min-height: 45px;
    color: #2c2d2e;
    background: #fff;
    border-radius: 12px;
}

body.theme-center #product .text .btns #tradein:hover,
body.theme-center #product .btns #tradein:hover {
    background: #f3f4f3;
}

/* ── Пара «Характеристики + Комплектация» (эталон АДС, 22.10.2026) ─────
   База (`product.css`, #308) развела блоки по вертикали: характеристики
   держат 52%, а `section#complectation.card.container` — 100% отдельной
   карточкой. В эталоне это пара в одну строку: ТТХ 480 при контейнере 944
   слева и комплектация 442 справа (замер 1024). Возвращаем пару сеткой
   `auto-fit` — она переключается по доступной ширине, а не по вьюпорту:
   порог `min-width: 1024px` из волны-5 оставлял полосу 801–1023, где
   ТТХ занимали 52%, а компоновка шла отдельной карточкой — справа
   пустота (приёмка 22.10.2026). Скоуп темы — базу не форкаем (ADR-0053). */
body.theme-center #carinfo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 22px;
    align-items: start;
}

/* Стоимость владения — всегда отдельной строкой над парой. */
body.theme-center #carinfo #ownership {
    grid-column: 1 / -1;
}

body.theme-center #carinfo #characteristics,
body.theme-center #carinfo section#complectation.card.container {
    width: 100%;
    margin: 0;
    padding: 1.75rem 1.2rem;
}

/* На узких минимум 420px шире вьюпорта — одна колонка на всю ширину
   (тот же приём, что в теме avenu: #309). */
@media only screen and (max-width: 640px) {
    body.theme-center #carinfo {
        grid-template-columns: 1fr;
    }
}

/* ── Раскладка кнопок карточки (эталон АДС, замеры 22.10.2026) ─────────
   В эталоне на ≥768 заявка и тест-драйв стоят в одну строку по половине
   ширины, третья («Кредитный калькулятор») — во всю ширину ниже; зазор
   между ними 14px. База держит `.btns` колонкой (`flex-direction: column`,
   `button { width: 100% !important }`), поэтому раскладка возвращается
   здесь, в скоупе темы (ADR-0053: базу не форкаем).

   Замеры эталона: 1024 — кнопки 423/423 при контейнере 860, шаг по
   вертикали 52 = 38 + 14; 768 — 323/323 при 660; 390 — колонка (как есть).
   Наш прежний зазор был 23px на мобиле вместо 14. */
body.theme-center #product .text .btns {
    gap: 14px;
}

/* База даёт `#tradein { margin-top: 1rem }` в расчёте на колонку без gap;
   вместе с нашим gap это давало 23px вместо 14 (мобилка) и `.btns` 111
   вместо 97 (планшет/десктоп). Отступ снимаем — шаг задаёт gap. */
body.theme-center #product .text .btns #tradein {
    margin-top: 0 !important;
}

@media (min-width: 768px) {
    body.theme-center #product .text .btns {
        flex-direction: row;
    }

    body.theme-center #product .text .btns #credit,
    body.theme-center #product .text .btns #call {
        /* Половина контейнера за вычетом половины зазора: 423 = (860-14)/2. */
        width: calc(50% - 7px) !important;
    }

    body.theme-center #product .text .btns #tradein {
        width: 100% !important;
    }
}

/* Табы: эталон — 38px и вес 400 (было 13.1/600). Высоту задаём явно —
   база тянет её из паддингов и кегля, и от нашего кегля она «плыла». */
body.theme-center #product .tablinks,
body.theme-center .tablinks {
    box-sizing: border-box;
    min-height: 38px;
    height: 38px;
    font-size: 14px;
    font-weight: 400;
}

/* ── Попапы (эталон АДС, замеры 21.10.2026) ──
   Заголовок формы — 26px/700 (у нас было 600). Текст заголовка остаётся
   каркасным (`POPUPS.callback.title`): его канон закреплён ADR-0066 и
   тестами попапа, смена текста — отдельное решение, а не вид темы. */
body.theme-center .popup-content h4 {
    font-weight: 700;
}

/* ---------- Дополнительные фильтры эталона (волна 2, #647) ----------
   Скрыты, пока панель в компактном состоянии: класс facet-detail-hidden
   снимает ядровой тогл «Показать больше», и тогда дополнительный блок
   раскрывается вместе с нашими фасетами. */
body.theme-center .extra-filters {
    display: none;
}

body.theme-center .search-panel form:has(.facet-panel:not(.facet-detail-hidden)) .extra-filters {
    display: block;
}

/* Числовые поля «От/До» — пара в одной ячейке сетки (эталон:
   .range-inputs); оформление — как у селектов темы. */
body.theme-center .range-inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

body.theme-center .filter-field input[type="number"] {
    width: 100%;
    /* Как селект темы (эталон: поле 44, поля 14, радиус 12.25) — иначе
       «От/До» выбивались из ряда полей панели. */
    box-sizing: border-box;
    height: 44px;
    padding: 14px;
    font-size: 14px;
    color: var(--c-text, #2c2d2e);
    background: var(--c-bg, #fff);
    border: 1px solid #d9d9d9;
    border-radius: 12.25px;
    box-shadow: none;
}

body.theme-center .filter-field input[type="number"]:focus {
    border-color: var(--c-primary);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary) 18%, transparent);
}

/* Дополнительные фасеты («Отделка / Назначение / Комплектация») приходят
   в карточку полями-селектами из шаблона темы — дублирующих чипсов в
   разметке больше нет, скрывать группы не нужно (было: 12 селекторов
   `[data-facet=...] { display: none }` поверх ядровой панели). */

/* Популярные подборки — теги-ссылки (#647): перенос эталонного tags.css
   АДС слоем темы (ADR-0053: вид эталона — оверрайд темы, база не
   меняется). Применяется только к разметке `.tags-grid` темы. */
body.theme-center .tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

body.theme-center .tag-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem 1rem .25rem .5rem;
    background: var(--c-surface, #f3f4f3);
    border: 1px solid #e0e0e0;
    border-radius: 1.5rem;
    color: var(--c-text, #2c2d2e);
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

body.theme-center .tag-btn:hover {
    background: #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
    transform: translateY(-1px);
    text-decoration: none;
}

body.theme-center .tag-btn:active {
    transform: translateY(0);
}

body.theme-center .tag-btn svg {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    padding: .2rem;
    color: var(--c-text, #2c2d2e);
    border: 1px solid rgba(0, 0, 0, .102);
    border-radius: 100%;
}

/* ---------- Карточка автомобиля (волна 3, #648) ---------- */
/* Плашки преимуществ над галереей: раскладку 4 / 2 / 1 задаёт блок
   «Преимущества слайдом» ниже — статичная сетка (flex + gap 14),
   потому что эталон показывает все четыре плашки в ряд и листать
   нечего. Ядровый `--cn-per` здесь не используется: он задаёт ширину
   без учёта зазора, и при gap слайды переполняют трек. */

/* Иконки преимуществ — акцент темы приходит из общего правила
   `.advantage-icon svg` выше (роль --c-primary-light); отдельного
   правила для #productsplus не нужно — блок и так в скоупе темы. */

/* Индикатор применения и подписи черновика — контракты ядра
   (.is-applying / .apply-failed / .find-btn-hint). */
body.theme-center .find-btn .proc-lbl {
    display: none;
}

body.theme-center .search-panel.is-applying .find-btn .lbl {
    display: none;
}

body.theme-center .search-panel.is-applying .find-btn .proc-lbl {
    display: inline;
}

body.theme-center .find-btn-hint {
    font-size: .88rem;
    color: #6b7280;
}

body.theme-center .find-btn-error {
    display: none;
    font-size: .88rem;
    color: #e53935;
}

body.theme-center .search-panel.apply-failed .find-btn-error {
    display: inline;
}

/* Страницы списков (каталог, марки, кузова, подкатегории, сегментные):
   в оригинале АДС карточка «Фильтры» — широким блоком над лентой, а не
   сайдбаром ядра; раскладка страницы в скоупе темы — одним столбцом. */
body.theme-center .catalog-layout {
    display: block;
}

/* Детальная панель ядра: скрыта до «Показать больше», раскрывается на
   месте (контракт selects-вида); своя рамка-разделитель вместо карточки.
   Режим неважен (home на главной / catalog на списках) — вид один. */
/* Ядровая панель групп живёт в разметке, но не показывается: остров
   ядра (islands-loader) грузится по `#filter[data-mode]`, поэтому узел
   обязан остаться в DOM, а «Показать больше» раскрывает продолжение
   ОДНОЙ сетки карточки (`#extraFilters`) — как в эталоне АДС, где нет
   второй панели с чипсами (волна «визуал-4», ADR-0076). Класс
   `facet-detail-hidden` тогл ядра продолжает переключать, поэтому
   правило раскрытия `.extra-filters` ниже остаётся рабочим. */
body.theme-center .search-panel #filter.facet-panel {
    display: none;
}

/* Мобильная шторка ядра (FAB «Фильтры» + оверлей) в теме не нужна:
   панель, которую она открывает, скрыта выше, «Показать больше» живёт в
   карточке. Без этих правил на ≤767px оставалась плавающая кнопка,
   открывавшая пустое место (замечание ревью PR #705). */
body.theme-center .search-panel .facet-toggle,
body.theme-center .search-panel .facet-overlay {
    display: none;
}

/* ── Баннер: габариты и ручки карусели (эталон АДС, замеры 21.10.2026) ── */

/* Подложка панели. В эталоне серая панель (`#f3f4f3`, радиус 16px) — это
   контейнер, несущий пагинацию: она 412px, кадр внутри 367px, запас 45px
   уходит под точки. Подложка живёт на панели, а не на секции: подпись
   «* Ставка…» лежит ВНЕ панели и должна оставаться на белом фоне
   страницы (было: фон висел на `#banner`, и подпись стояла на сером).
   Вид эталона, скелет наш (ADR-0073/ADR-0076). */
body.theme-center #banner {
    background: none;
}

body.theme-center #banner .cn-shell {
    min-height: 412px;
    padding-bottom: 45px;
    box-sizing: border-box;
    /* Подложка панели — роль канала (#701, ADR-0075 каталога): у витрин с
       собственным оформлением край берётся из канала, дефолт — серый
       эталона. Фон держит панель, а не секция (ADR-0076). */
    background: var(--c-surface, #f3f4f3);
    border-radius: 16px;
    /* Кадр внутри панели прямоугольный — скругляет только панель,
       поэтому кромку держим у неё, а не у картинки. */
    overflow: hidden;
}

/* Кадр (сама карусель) — без своей подложки и радиуса: скругление и фон
   держит панель. Иначе низ кадра скруглялся отдельно от серой панели и
   панель выглядела «с острыми углами снизу». */
body.theme-center #banner .cn.banner {
    background: none;
    border-radius: 0;
}

/* Слайд героя в эталоне выше нашего на 124px: поля у обоих 42px, разница —
   в картинке (325 против 201) и, как следствие, в воздухе вокруг текста.
   Задаём эталонную высоту слайда и картинки, чтобы ритм не зависел от
   конкретного баннера (контент приходит каналом и бывает разной длины). */
body.theme-center #banner .slide {
    min-height: 367px;
}

body.theme-center #banner .slide .image {
    min-height: 325px;
}

/* Точки пагинации. База скрывает их на устройствах с мышью («одна ручка —
   стрелки»); в эталоне точки видны на всех ширинах, поэтому возвращаем их
   теме. Замер эталона: активная — белая полоска 32×8, остальные — кружки
   8×8 цвета #919399 с прозрачностью .5 (на фотографии баннера акцентный
   цвет не читается, поэтому краска фиксированная, не из канала).
   Позиция — как в эталоне: `absolute; bottom: 8px` от низа панели, то есть
   на её подложке, а не отдельной полосой под кадром. */
body.theme-center #banner .cn-dots {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    /* База даёт точкам верхний отступ — в absolute-полосе он добавляет
       пустую высоту и сдвигает точки вверх от края панели. */
    padding: 0;
    /* Зазор между точками даёт только их собственный margin: база
       добавляет ещё и `gap: .45rem`, из-за чего просвет выходил 14px
       против эталонных 8 (замер 21.10.2026). */
    gap: 0;
}

body.theme-center #banner .cn-dot {
    background: #919399;
    opacity: .5;
}

body.theme-center #banner .cn-dot.is-active {
    background: var(--c-bg, #fff);
    opacity: 1;
    width: 2.286rem;
}

/* Стрелки. База скрывает их на тач-устройствах и узких экранах — в эталоне
   они есть на всех ширинах (на мобильном 37px вместо 40px) и выступают за
   край карточки баннера. */
body.theme-center #banner .cn-prev,
body.theme-center #banner .cn-next {
    display: flex;
}

body.theme-center #banner .cn-prev {
    left: -5px;
}

body.theme-center #banner .cn-next {
    right: -5px;
}

@media (max-width: 767.98px) {

    body.theme-center #banner .cn-prev,
    body.theme-center #banner .cn-next {
        width: 37px;
        height: 37px;
    }

    /* Мобильные точки Баннера — 30×7 и 7×7 как в эталоне (вместо пересчёта
       из rem: при корне 13px rem давал 29.7×7.4). */
    body.theme-center #banner .cn-dot.is-active {
        width: 30px;
        height: 7px;
    }

    body.theme-center #banner .cn-dot {
        width: 7px;
        height: 7px;
    }
}

/* ── «Предложение дня»: ручки карусели (эталон АДС, замеры 20.10.2026) ── */

/* Точки. База скрывает их при наличии мыши; в эталоне у карусели дня они
   видны на всех ширинах и все одной длины: 32×8, радиус 8, зазор 8px,
   краска — акцентная (замер эталона: rgb(77, 129, 205) = роль --c-primary).
   В отличие от героя здесь точки лежат на светлом фоне, поэтому акцент
   работает и меняется из админки каталога вместе с остальными ролями.
   Позиция — как в эталоне: точки наложены на низ карточки (16px от её
   края), а не отдельной строкой под каруселью — иначе секция выше на 36px. */
body.theme-center #daily-offers .cn-dots {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    gap: 8px;
    padding: 0;
}

body.theme-center #daily-offers .cn-dot {
    width: 32px;
    height: 8px;
    margin: 0;
    border-radius: 8px;
    background: var(--c-primary);
    opacity: 1;
}

/* Стрелки. В эталоне они есть на всех ширинах (белый круг 40×40 — это уже
   дефолт базы), поэтому снимаем только скрытие на тач-устройствах. */
body.theme-center #daily-offers .cn-prev,
body.theme-center #daily-offers .cn-next {
    display: flex;
}

/* ── Кредитный калькулятор (эталон АДС, замеры 21.10.2026) ─────────────
   В эталоне под полями стоит инфо-раздел: подпись — `small` (12px,
   приглушённая), значение — `h5` (18px/700, тёмное). У нас значения
   печатались обычным текстом, а ставки в панели не было вовсе. */
body.theme-center .creditcalc-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 .5rem;
    margin: 1.25rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid #e6e9ed;
}

body.theme-center .creditcalc-info small {
    display: block;
    margin-top: .5rem;
    /* 12px эталона АДС (замеры 21.10.2026). Ровно px, а не rem: при корне
       14px `.857rem` даёт 11.998px, и замер приёмки расходится с макетом
       (ревью PR #705). */
    font-size: 12px;
    font-weight: 400;
    color: #919399;
}

body.theme-center .creditcalc-info h5 {
    margin: 0;
    /* 18px эталона (было 1.125rem → 15.75px). */
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: #2c2d2e;
}

body.theme-center .creditcalc-info h5 b {
    /* Эталон: значение платежа — `<b>` и браузерный вес 900 (замер
       22.10.2026: fs 18.004px, fw 900). Наше правило 700 гасило `<b>` —
       на приёмке это читалось как «не такой жирный, как в эталоне». */
    font-weight: 900;
}

@media (min-width: 720px) {
    body.theme-center .creditcalc-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 2rem;
    }
}

/* ── Преимущества слайдом (эталон АДС, замеры 22.10.2026) ──────────────
   Эталон: слайд 423×97 в один ряд — слева фото 89×84 (отступы 15/7),
   справа текст (`h6` 16px/700 + подпись 14px) с зазором 14, радиус 16.
   Раньше у нас это были белые карточки 251×141 с иконкой и текстом в
   столбик — на приёмке читалось «слипаются и не как в эталоне».

   Картинка — оформление темы, не данные: набор преимуществ остаётся
   {icon, title, text}, а фото why*.webp подставляет CSS (фон слота иконки
   по порядку слайдов) и тонирует `hue-rotate(100deg)` — ровно как эталон
   (`#productsplus .images`). SVG-иконка в центре скрыта: она — фолбэк
   для витрин без своего набора фото. */
body.theme-center .advantage-slider .advantage {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    min-height: 97px;
    padding: 7px 15px;
    background: var(--c-surface, #f3f4f3);
    border: 1px solid transparent;
    border-radius: 1.1em;
    overflow: hidden;
}

/* «Бегущая» рамка эталона: конус в цветах primary + вращение 5s.
   ::before — градиент, ::after — маска на 1px внутрь: остаётся контур.
   Ровно эталонный conic и `spin 5s linear infinite` (animation.css).
   Светлый стоп — осветлённый primary (в эталоне #9db9e3): в центре роль
   `--c-primary-light` совпадает с primary, и конус терял бы градацию. */
body.theme-center .advantage-slider .advantage::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    aspect-ratio: 1;
    margin: auto;
    z-index: 0;
    background-image: conic-gradient(transparent 0deg,
            var(--c-primary) 10%,
            color-mix(in srgb, var(--c-primary) 55%, #fff) 20%,
            var(--c-primary) 30%,
            transparent 40%,
            transparent 50%,
            transparent 50%,
            var(--c-primary) 60%,
            color-mix(in srgb, var(--c-primary) 55%, #fff) 70%,
            var(--c-primary) 80%,
            transparent 90%);
    animation: spin 5s linear infinite;
}

body.theme-center .advantage-slider .advantage::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 1rem;
    background: var(--c-surface, #f3f4f3);
    z-index: 1;
}

/* Контент — над маской (эталон держит фото и текст на z-index 3). */
body.theme-center .advantage-slider .advantage>* {
    position: relative;
    z-index: 2;
}

body.theme-center .advantage-slider .advantage-icon {
    flex: 0 0 89px;
    width: 89px;
    height: 84px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 0;
    filter: hue-rotate(100deg);
}

/* SVG — только фолбэк для витрин без собственного набора фото. */
body.theme-center .advantage-slider .advantage-icon svg {
    display: none;
}

/* Фото по порядку слайдов — набор эталона АДС: why6, why7, why4, why3
   (порядок картинок в легаси-каталоге `seed/extracted/adscenter`). */
body.theme-center .advantage-slider .cn-slide:nth-child(4n + 1) .advantage-icon {
    background-image: url('/static/theme/img/why6.webp');
}

body.theme-center .advantage-slider .cn-slide:nth-child(4n + 2) .advantage-icon {
    background-image: url('/static/theme/img/why7.webp');
}

body.theme-center .advantage-slider .cn-slide:nth-child(4n + 3) .advantage-icon {
    background-image: url('/static/theme/img/why4.webp');
}

body.theme-center .advantage-slider .cn-slide:nth-child(4n + 4) .advantage-icon {
    background-image: url('/static/theme/img/why3.webp');
}

body.theme-center .advantage-slider .advantage-text {
    min-width: 0;
}

body.theme-center .advantage-slider .advantage-text h6 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

body.theme-center .advantage-slider .advantage-text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    color: #6b6d70;
}

/* Доступность: при `prefers-reduced-motion` движение снимаем, рамка
   остаётся статичным контуром primary (цвет и толщина не меняются). */
@media (prefers-reduced-motion: reduce) {
    body.theme-center .advantage-slider .advantage::before {
        animation: none;
    }
}

/* Трек — статичная сетка эталона: все плашки видны, листать нечего.
   Ядро (`.`cn-slide` → `flex: 0 0 calc(100% / var(--cn-per))`) ширину
   без зазора считает, поэтому здесь она задана явно: зазор 14,
   в ряд — 4 / 2 / 1 (эталон: 423 при контейнере 1006). */
body.theme-center .advantage-slider .cn-track {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

body.theme-center .advantage-slider .cn-slide {
    flex: 0 0 100%;
    min-width: 0;
}

@media (min-width: 560px) {
    body.theme-center .advantage-slider .cn-slide {
        flex: 0 0 calc(50% - 7px);
    }
}

@media (min-width: 1000px) {
    body.theme-center .advantage-slider .cn-slide {
        flex: 0 0 calc(25% - 10.5px);
    }
}

/* ── Подвал темы (волна «визуал-4», ADR-0076) ───────────────────────────
   Вид оригинала АДС: бренд-блок + четыре смысловые группы ссылок в одну
   строку, марки тремя колонками, юридическая обвязка — отдельным блоком
   снизу. Разметку даёт themes/center/widgets/footer.html; здесь только
   раскладка и типографика (база красила колонки как сплошной поток). */

body.theme-center .cn-footer-top {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr);
    gap: 2rem 3rem;
    align-items: start;
}

body.theme-center .cn-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
}

body.theme-center .cn-footer-brand .logo svg,
body.theme-center .cn-footer-brand .logo img {
    max-width: 180px;
    height: auto;
}

body.theme-center .cn-footer-brand .adress {
    margin: 0;
    font-size: .9375rem;
    font-weight: 400;
    color: #2c2d2e;
}

body.theme-center .cn-footer-brand .tel {
    font-size: 1.125rem;
    font-weight: 700;
    color: #2c2d2e;
    text-decoration: none;
}

body.theme-center .cn-footer-brand .tel:hover {
    color: var(--c-accent);
}

body.theme-center .cn-footer-route {
    font-size: .875rem;
    color: #5b6270;
    text-decoration: underline;
}

body.theme-center .cn-footer-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem 2rem;
}

body.theme-center .cn-footer-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
    min-width: 0;
}

body.theme-center .cn-footer-group h6,
body.theme-center .cn-footer-marks h6 {
    margin: 0 0 .25rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #919399;
}

body.theme-center .cn-footer-group a {
    font-size: .9375rem;
    line-height: 1.35;
    color: #2c2d2e;
    text-decoration: none;
}

body.theme-center .cn-footer-group a:hover,
body.theme-center .cn-footer-group a.active {
    color: var(--c-accent);
    text-decoration: underline;
}

/* Марки: три колонки (includes/markslinks.html даёт три div) — в эталоне
   они идут ровными столбцами, а не в две колонки с дырами. */
body.theme-center .cn-footer-marks-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .25rem 2rem;
}

body.theme-center .cn-footer-marks-cols>div {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

body.theme-center .cn-footer-marks-cols a {
    font-size: .9375rem;
    color: #2c2d2e;
    text-decoration: none;
}

body.theme-center .cn-footer-marks-cols a:hover {
    color: var(--c-accent);
    text-decoration: underline;
}

body.theme-center .cn-footer-marks-cols b {
    font-weight: 400;
}

body.theme-center .cn-footer-legal {
    margin-top: 1.5rem;
    font-size: .875rem;
    color: #5b6270;
}

body.theme-center .cn-footer-legal a {
    color: #2c2d2e;
}

body.theme-center .cn-footer-legal a:hover {
    color: var(--c-accent);
}

@media (max-width: 1100px) {
    body.theme-center .cn-footer-top {
        grid-template-columns: 1fr;
    }

    body.theme-center .cn-footer-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    body.theme-center .cn-footer-nav {
        grid-template-columns: 1fr;
    }

    body.theme-center .cn-footer-marks-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}