/* ==========================================================================
   vitrina-white.css — белый фон для страницы категории STELS ATV.
   Активируется классом body.page-vitrina-white.
   Переопределяет CSS-переменные темы, не затрагивая остальной сайт.
   ========================================================================== */

body.page-vitrina-white {
    --color-bg: #ffffff;
    --color-surface: #f7f7f8;
    --color-surface-2: #efeff1;
    --color-surface-3: #e5e5e8;
    --color-border: #e2e2e5;
    --color-border-strong: #c8c8cc;
    --color-text: #16161a;
    --color-text-soft: #2b2b30;
    --color-muted: #5c5c63;
    --color-faint: #8e8e96;

    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #16161a;
}

/* Секции и hero-блоки, если они тянут фон из переменной, тоже белые. */
body.page-vitrina-white .page-hero,
body.page-vitrina-white .section,
body.page-vitrina-white main {
    background: transparent !important;
    color: #16161a;
}

/* Заголовки и lead — тёмные на белом */
/* Тёмный текст только внутри main, чтобы не задеть футер/хедер. */
body.page-vitrina-white main h1,
body.page-vitrina-white main h2,
body.page-vitrina-white main h3,
body.page-vitrina-white main h4,
body.page-vitrina-white .page-hero h1 {
    color: #16161a;
}

body.page-vitrina-white .page-hero .lead,
body.page-vitrina-white .lead {
    color: #4a4a52;
}

/* Чипсы категорий */
body.page-vitrina-white .catalog-cat {
    background: #f2f2f4 !important;
    color: #16161a !important;
    border-color: #e2e2e5 !important;
}
body.page-vitrina-white .catalog-cat:hover {
    background: #e8e8ec !important;
}
body.page-vitrina-white .catalog-cat.is-active {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}
body.page-vitrina-white .catalog-cat__count {
    background: rgba(0, 0, 0, 0.08) !important;
    color: inherit !important;
}
body.page-vitrina-white .catalog-cat.is-active .catalog-cat__count {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

/* Хлебные крошки */
body.page-vitrina-white .breadcrumbs,
body.page-vitrina-white .breadcrumbs a,
body.page-vitrina-white .breadcrumbs span {
    color: #5c5c63;
}
body.page-vitrina-white .breadcrumbs a:hover {
    color: #dc2626;
}

/* Скроллбар — светлый */
body.page-vitrina-white::-webkit-scrollbar-track { background: #f2f2f4; }
body.page-vitrina-white::-webkit-scrollbar-thumb { background: #cccccc; }

/* ============================================================
 * ШИРИНА КОНТЕЙНЕРА — как на /styleguide/.
 * Базовый .container = 1200px. Здесь расширяем до 90% ширины,
 * но не больше 1400px. На узких экранах (<1555px) — 90vw без cap'а.
 * ============================================================ */
body.page-vitrina-white .container {
    width: 90%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
@media (max-width: 1555px) {
    body.page-vitrina-white .container {
        width: 90%;
        max-width: none;
    }
}

/* Футер всегда жёлтый — не перебиваем его цветом витрины */
body.page-vitrina-white .site-footer__heading {
    color: var(--donor-yellow, #fed500) !important;
}

/* ============================================================
 * Зазор между фоновым видео и каталогом.
 * main#top идёт сразу после hero-video-block — отодвигаем его вниз.
 * ============================================================ */
body.page-vitrina-white main#top {
    padding-top: 40px;
}
@media (max-width: 900px) {
    body.page-vitrina-white main#top {
        padding-top: 28px;
    }
}