/*
 * VERSTA desktop — шапка (SiteHeader), основное меню и мега-меню «Каталог» (BES-48, BES-55).
 * Режимы задаются классом на <body>: page--header-light | -overlay | -minimal.
 * Разметка — include/header.php и components/bitrix/menu/vd_top/, поведение — assets/js/header.js.
 */

/* ---------- Логотип ---------- */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.logo:hover {
    color: inherit;
}

.logo__mark {
    width: 34px;
    height: 30px;
    object-fit: contain;
    transition: filter var(--vd-transition);
}

.logo__word {
    font: 700 22px / 1 var(--vd-font-display);
    letter-spacing: .42em;
    margin-right: -.42em;
}

/* ---------- Шапка ---------- */
/* Полная высота шапки (топ-бар + основная строка) — на неё первый экран в overlay сдвигает свой контент */
:root {
    --vd-header-h: calc(var(--vd-topbar-h) + var(--vd-header-main-h));
}

.site-header {
    position: relative;
    z-index: 50;
    background: var(--vd-white);
    color: var(--vd-ink);
    transition: background-color var(--vd-transition), color var(--vd-transition);
}

/* Топ-бар: промо-фразы слева, сервисные ссылки справа. Всегда тёмный — и в overlay */
.site-header__topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    min-height: var(--vd-topbar-h);
    padding-inline: var(--vd-gutter);
    background: var(--vd-ink);
    color: var(--vd-white);
    font-size: var(--vd-fs-caption);
    line-height: 1;
}

.site-header__promo {
    display: flex;
    align-items: center;
    gap: 32px;
    min-width: 0;
    color: rgba(255, 255, 255, .8);
    white-space: nowrap;
}

.site-header__promo a:hover,
.site-header__service a:hover {
    color: var(--vd-white);
}

.site-header__promo a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-header__service {
    display: flex;
    align-items: center;
    gap: 28px;
    white-space: nowrap;
}

.site-header__service a {
    opacity: 1;
    transition: opacity var(--vd-transition);
}

.site-header__service a:hover {
    opacity: .7;
}

.site-header__service .contact-phone {
    font-weight: 600;
}

/*
 * Основная строка: меню | логотип по центру | действия.
 * Колонка меню не уже своего содержимого (max-content): если меню шире половины строки (лишний пункт,
 * более широкий шрифт), логотип сдвигается вправо, а меню под него не заходит. Пока меню помещается,
 * боковые колонки равны и логотип стоит по центру.
 */
.site-header__main {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    column-gap: 24px;
    min-height: var(--vd-header-main-h);
    padding-inline: var(--vd-gutter);
    border-bottom: 1px solid var(--vd-divider);
    transition: border-color var(--vd-transition);
}

.site-header__nav {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.site-header__logo {
    display: flex;
    align-items: center;
}

.site-header__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 26px;
}

/* ---------- Основное меню (bitrix:menu vd_top) ---------- */
/*
 * Кегль пунктов — 19px от 1600px; на меньшей ширине уменьшается вместе с окном (1440 — 17px, 1280 — 15px),
 * зазор между пунктами — пропорционально (30px при 19px). Так шесть пунктов помещаются в колонку слева
 * от логотипа с зазором до него не меньше ~48px даже запасным Impact (он шире Druk). На 1440 правый
 * край меню и зазор до логотипа — как в макете (SiteHeader).
 */
.main-nav {
    --vd-nav-fs: clamp(13px, calc(1.25vw - 1px), 19px);
    display: flex;
    align-items: stretch;
    gap: calc(var(--vd-nav-fs) * 30 / 19);
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav__item {
    display: flex;
}

.main-nav__link {
    display: flex;
    align-items: center;
    /* Подчёркивание активного пункта ложится на нижнюю линию шапки */
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font: 200 var(--vd-nav-fs) / 1 var(--vd-font-display);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--vd-transition), border-color var(--vd-transition);
}

.main-nav__link.is-active,
.main-nav__item.is-open > .main-nav__link {
    border-bottom-color: var(--vd-accent);
}

/* ---------- Действия справа ---------- */
.site-header__icon {
    flex: none;
}

/* Поиск-заглушка до include/search.php: «поле» с подчёркиванием, как в макете */
.site-header__search {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 230px;
    padding: 10px 0;
    border-bottom: 1px solid var(--vd-divider);
    font-size: var(--vd-fs-small);
    line-height: 1;
}

.site-header__search-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .7;
}

/* Иконка-ссылка (вишлист, корзина) со счётчиком */
.site-header__action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
}

.site-header__count {
    position: absolute;
    top: -6px;
    right: -11px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--vd-accent);
    color: var(--vd-white);
    font: 700 10px / 17px var(--vd-font-text);
    text-align: center;
    pointer-events: none;
}

.site-header__count[hidden] {
    display: none;
}

/* Авторизован — кружок с инициалами */
.site-header__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font: 700 11px / 1 var(--vd-font-display);
    letter-spacing: .06em;
}

.site-header__login {
    font-size: var(--vd-fs-small);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* ---------- Мега-меню «Каталог» ---------- */
/* Панель во всю ширину шапки: позиционируется от .site-header, а не от пункта меню */
.mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--vd-white);
    color: var(--vd-ink);
    border-bottom: 1px solid var(--vd-divider);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity var(--vd-transition), transform var(--vd-transition), visibility 0s linear 200ms;
}

.main-nav__item.is-open .mega {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity var(--vd-transition), transform var(--vd-transition), visibility 0s;
}

.mega__inner {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    padding: 40px var(--vd-gutter) 48px;
}

.mega__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Разделов много — в две колонки, коллекции — в одну */
.mega__col--sections {
    flex: 2 1 0;
}

.mega__col--collections {
    flex: 1 1 0;
}

.mega__title {
    padding-bottom: 12px;
    font: 11px / 1 var(--vd-font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vd-text-3);
}

.mega__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mega__col--sections .mega__list {
    columns: 2;
    column-gap: 48px;
}

.mega__item {
    break-inside: avoid;
}

.mega__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin: 0 -14px;
    padding: 12px 14px;
    border-radius: var(--vd-radius-s);
    font: 600 15px / 1.2 var(--vd-font-text);
    transition: background-color var(--vd-transition), color var(--vd-transition);
}

.mega__link:hover,
.mega__link:focus-visible,
.mega__link.is-current {
    background: var(--vd-chip);
    color: var(--vd-ink);
}

.mega__link:focus-visible {
    outline-offset: -2px;
}

.mega__count {
    flex: none;
    font: 12px / 1 var(--vd-font-mono);
    color: var(--vd-text-4);
}

.mega__all {
    margin-top: 20px;
}

/* Промо-карточка коллекции */
.mega-promo {
    position: relative;
    flex: 0 0 clamp(240px, 25vw, 360px);
    display: block;
    height: 300px;
    overflow: hidden;
    border-radius: var(--vd-radius);
    background: var(--vd-placeholder);
    color: var(--vd-white);
}

.mega-promo:hover {
    color: var(--vd-white);
}

.mega-promo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0) 40%, rgba(10, 10, 10, .62));
}

.mega-promo__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform 600ms ease;
}

.mega-promo:hover .mega-promo__img {
    transform: scale(1.03);
}

.mega-promo__body {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 20px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mega-promo__eyebrow {
    font: 11px / 1 var(--vd-font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.mega-promo__title {
    font: 700 36px / 1 var(--vd-font-display);
    letter-spacing: .08em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.mega-promo__more {
    font: 600 13px / 1 var(--vd-font-text);
}

.mega-promo__more::after {
    content: ' →';
}

/* Затемнение страницы под открытым мега-меню (шапка остаётся над ним) */
.mega-backdrop {
    position: fixed;
    inset: 0;
    z-index: 49;
    background: rgba(10, 10, 10, .45);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--vd-transition), visibility 0s linear 200ms;
}

.mega-backdrop.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--vd-transition), visibility 0s;
}

/* ---------- overlay — прозрачная шапка поверх первого экрана с фото ---------- */
/*
 * Шапка абсолютная, но от обёртки .site-header-slot: та стоит в потоке после #panel,
 * поэтому админ-панель Битрикса у редактора шапку не перекрывает. Обёртка схлопывается в 0,
 * первый экран заходит под шапку, а свой контент сдвигает вниз на --vd-header-h.
 */
.page--header-overlay .site-header-slot {
    position: relative;
}

.page--header-overlay .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    color: var(--vd-white);
}

.page--header-overlay .site-header__main {
    border-bottom-color: rgba(255, 255, 255, .3);
}

.page--header-overlay .site-header__search {
    border-bottom-color: rgba(255, 255, 255, .3);
}

/*
 * Знак логотипа — картинка без прозрачности (тёмный знак на белом). invert + screen из макета
 * не работает: шапка с z-index изолирует смешивание. SVG-фильтр из include/header.php
 * переводит яркость в прозрачность: белый фон исчезает, знак становится белым.
 */
.page--header-overlay .logo__mark {
    filter: url(#vd-logo-on-dark);
}

/* Мега-меню открыто — шапка на время становится светлой, иначе белый текст теряется */
.page--header-overlay .site-header.is-mega-open {
    background: var(--vd-white);
    color: var(--vd-ink);
}

.page--header-overlay .site-header.is-mega-open .site-header__main,
.page--header-overlay .site-header.is-mega-open .site-header__search {
    border-bottom-color: var(--vd-divider);
}

.page--header-overlay .site-header.is-mega-open .logo__mark {
    filter: none;
}

/* ---------- minimal — оформление заказа ---------- */
.site-header--minimal .site-header__main {
    align-items: center;
}

.site-header__back {
    justify-self: start;
    font-size: var(--vd-fs-small);
    line-height: 1;
    color: var(--vd-text-2);
}

.site-header__back:hover {
    color: var(--vd-ink);
}

.site-header__secure {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--vd-fs-small);
    line-height: 1;
    color: var(--vd-text-2);
    white-space: nowrap;
}

.site-header__secure .contact-phone {
    font-weight: 700;
    color: var(--vd-ink);
}

.site-header__secure .contact-phone:hover {
    color: var(--vd-accent);
}

.site-header__dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vd-ink);
}

/* Минимальная шапка всегда светлая — даже если раздел выставил overlay */
.page--header-minimal .site-header--minimal,
.page--header-overlay .site-header--minimal {
    position: relative;
    background: var(--vd-white);
    color: var(--vd-ink);
}

.page--header-overlay .site-header--minimal .site-header__main {
    border-bottom-color: var(--vd-divider);
}

.page--header-overlay .site-header--minimal .logo__mark {
    filter: none;
}

/* ---------- Узкие экраны (планшеты тоже получают десктоп-шаблон) ---------- */
@media (max-width: 1360px) {
    .site-header__search {
        width: 190px;
    }
}

@media (max-width: 1200px) {
    .site-header__promo > :nth-child(n + 3) {
        display: none;
    }

    /* Логотип слева, меню посередине: по центру всё не помещается (minimal не трогаем) */
    .site-header:not(.site-header--minimal) .site-header__main {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .site-header:not(.site-header--minimal) .site-header__logo {
        order: -1;
    }

    .site-header__nav {
        justify-content: center;
    }

    /* Меню в средней колонке, места больше — кегль не уменьшаем */
    .main-nav {
        --vd-nav-fs: 19px;
        gap: 18px;
    }

    .site-header__actions {
        gap: 20px;
    }

    .site-header__search {
        width: auto;
        padding: 6px 0;
        border-bottom: 0;
    }

    .site-header__search-label {
        display: none;
    }

    .mega__inner {
        gap: 32px;
    }

    .mega__col--sections .mega__list {
        column-gap: 32px;
    }
}

@media (max-width: 1024px) {
    /* Две строки: логотип с действиями и меню под ними (+1px — нижняя линия шапки) */
    :root {
        --vd-header-row-h: 64px;
        --vd-header-nav-h: 48px;
        --vd-header-h: calc(var(--vd-topbar-h) + var(--vd-header-row-h) + var(--vd-header-nav-h) + 1px);
    }

    .site-header__promo {
        display: none;
    }

    .site-header__topbar {
        justify-content: flex-end;
    }

    /* Меню уходит во вторую строку и прокручивается по горизонтали */
    .site-header:not(.site-header--minimal) .site-header__main {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "logo actions"
            "nav nav";
        row-gap: 0;
    }

    .site-header:not(.site-header--minimal) .site-header__logo {
        grid-area: logo;
        min-height: var(--vd-header-row-h);
    }

    .site-header__actions {
        grid-area: actions;
    }

    .site-header__nav {
        grid-area: nav;
        justify-content: flex-start;
        min-height: var(--vd-header-nav-h);
        margin-inline: calc(var(--vd-gutter) * -1);
        padding-inline: var(--vd-gutter);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .site-header__nav::-webkit-scrollbar {
        display: none;
    }

    .mega-promo {
        display: none;
    }

    /* Чекаут: подпись не влезает рядом с логотипом — остаётся точка и телефон */
    .site-header__secure-label {
        display: none;
    }
}

@media (max-width: 767px) {
    .site-header__service {
        gap: 18px;
    }

    .site-header__secure {
        display: none;
    }

    .site-header--minimal .site-header__main {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .mega__inner {
        flex-direction: column;
        gap: 28px;
        padding-block: 28px 32px;
    }

    .mega__col--sections .mega__list {
        columns: 1;
    }
}