/* ===== ПЕРЕМЕННЫЕ ===== */
:root {
    --megamenu-bg: #FFFFFF;
    --megamenu-border: #E3D5B8;
    --megamenu-ink: #3D2B1F;
    --megamenu-accent: #B23A2E;
}

/* header должен быть точкой отсчёта для абсолютно спозиционированной панели */
header {
    position: relative;
}

/* ===== СТРОКА МЕНЮ (перенесено из style.css, чтобы всё было в одном месте) =====
   position: relative — теперь именно здесь, а не на <header>. Это делает
   .header-nav точкой отсчёта для mega-panel (top: 100%), поэтому панель
   встаёт вплотную к border-bottom, а не к нижнему краю всего header
   (который включал ещё и header-top с лого/иконками — отсюда был зазор). */
.header-nav {
    position: relative;
    display: flex;
    gap: 20px;
    padding-left: 4rem;
    margin-top: 6px;
    border-bottom: 1px solid #e0dcd3; /* подбери оттенок под свою палитру */
}

.header-nav-item {
    padding: 0;
}

.header-nav-item--extra {
    display: none;
}

/* Шапка мобильного оверлея ("МЕНЮ" + крестик) — на десктопе не нужна вообще */
.mobile-menu-topbar {
    display: none;
}

/* Отключает CSS-переходы у меню на время самого ресайза окна (класс ставит
   и снимает JS в menu.js) — без этого, при пересечении брейкпоинта 850px,
   transform/grid-template-rows резко меняются, и transition честно
   анимирует этот скачок, отсюда "мигание" меню на долю секунды. */
.resize-animation-stopper .header-nav,
.resize-animation-stopper .mega-panel {
    transition: none !important;
}

/* ===== ПУНКТ МЕНЮ =====
   position: relative + ::after — линия-подчёркивание, которая выезжает
   слева направо (scaleX) при наведении или когда панель открыта. Сам
   текст получает padding-bottom, чтобы линия не наезжала на буквы. */
.header-nav-item__link {
    position: relative;
    display: block;
    padding-bottom: 0.5rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 0.700rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Подсветка активного (открытого) пункта — общая для десктопа и мобильного */
.header-nav-item.is-open > .header-nav-item__link {
    color: var(--megamenu-accent);
}

/* ===== ТОЛЬКО ДЕСКТОП (min-width: 851px) =====
   Всё, что относится исключительно к hover-механике десктопной mega-панели,
   собрано в одном месте — чтобы ни одно из этих правил случайно не
   просочилось в мобильную раскладку без @media (именно так раньше
   ломался мобильный аккордеон: правило display:block ниже раньше стояло
   без @media и своей специфичностью перебивало мобильную grid-анимацию). */
@media (min-width: 851px) {

    .header-nav-item__link::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.25s ease;
    }

    .header-nav-item__link:hover::after,
    .header-nav-item.is-open > .header-nav-item__link::after {
        transform: scaleX(1);
    }

    /* NEW: перенесено сюда из глобальной области — раньше действовало
       и на мобильном, конфликтуя по специфичности с мобильной
       grid-анимацией панели. */
    .header-nav-item.is-open .mega-panel {
        display: block;
    }

    /* NEW: вариант без фото (как "О нас" / ABOUT HERMES) — вертикальный
       список без колонок, ссылки крупнее и жирнее, как заголовки разделов.
       Перенесено сюда же по той же причине: раньше было без @media и
       перебивало мобильные стили ссылок из-за более высокой специфичности
       селектора (.mega-panel__inner--simple .mega-panel__col a). */
    .mega-panel__inner--simple {
        display: block;
        padding: 32px 24px;
    }

    .mega-panel__inner--simple .mega-panel__col {
        display: block;
    }

    .mega-panel__inner--simple .mega-panel__col a {
        display: block;
        font-family: var(--font-primary);
        font-size: 0.850rem;
        font-weight: 700;
        margin-bottom: 28px;
    }

    .mega-panel__inner--simple .mega-panel__col a:last-child {
        margin-bottom: 0;
    }

}

/* ===== ПАНЕЛЬ (ДЕСКТОП) =====
   left: 50% + margin-left: -50vw — классический full-bleed приём: панель
   растягивается на всю ширину ЭКРАНА, а не только на ширину .header-nav
   (которая теперь позиционный контейнер из-за position:relative выше).
   Без этого left:0/right:0 привязали бы ширину панели к .header-nav,
   а не ко всему вьюпорту, как было изначально. */
.mega-panel {
    display: none;
    position: absolute;
    left: 50%;
    right: auto;
    width: 100vw;
    margin-left: -50vw;
    top: 100%;
    background: var(--megamenu-bg);
    border-top: 1px solid var(--megamenu-border);
    border-bottom: 1px solid var(--megamenu-border);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    z-index: 100;
}

.mega-panel__inner {
    display: flex;
    gap: 32px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 24px;
}

/* Фото слева — высота фиксирована явно, чтобы реальные пропорции
   загруженной картинки не растягивали панель (раньше height:100% на img
   внутри контейнера без явной высоты иногда откатывался к натуральным
   пропорциям фото, и панель "уезжала" за пределы своего фона). */
.mega-panel__photo {
    position: relative;
    flex: 0 0 300px;
    height: 280px;
    display: block;
    overflow: hidden;
    text-decoration: none;
}

.mega-panel__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mega-panel__photo-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
    color: #fff;
    font-family: var(--font-secondary);
    font-size: 0.8125rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Колонки справа — ширина по содержимому, gap задаёт реальное расстояние.
   Количество колонок = сколько .mega-panel__col добавили внутрь, руками. */
.mega-panel__columns {
    display: flex;
    gap: 56px;
}

.mega-panel__col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Крупнее прежнего (13px → 1rem/16px) — по образцу Hermès, где ссылки
   в выпадающей панели читаются заметно свободнее строки навигации. */
.mega-panel__col a {
    font-family: var(--font-primary);
    font-size: 0.850rem;
    color: var(--megamenu-ink);
    text-decoration: none;
}

.mega-panel__col a:hover {
    color: var(--megamenu-accent);
}

/* Вариант без фото — вертикальный список без колонок (как ABOUT HERMES).
   Само переключение display/padding для --simple задаётся ниже, отдельно
   для десктопа (@media min-width:851px) и мобильного (@media max-width:850px) —
   без @media эти стили раньше просачивались в обе раскладки одновременно. */

/* ===== БЛОКИРОВКА СКРОЛЛА СТРАНИЦЫ ПОД МОБИЛЬНЫМ ОВЕРЛЕЕМ =====
   .header-nav в мобильной версии — это position:fixed; inset:0 оверлей
   со своим overflow-y:auto. Без этого правила страница ЗА оверлеем
   продолжает скроллиться независимо — получаются два одновременных
   скролла. Это правило — CSS-подстраховка; сам menu.js теперь тоже
   явно выставляет overflow при открытии/закрытии (см. JS), так что
   блокировка работает двойным контуром.
   NEW: блокируем и html, и body. В style.css у html задан собственный
   overflow-x: clip — а по спецификации CSS браузер "передаёт" overflow
   от body к html (то есть скроллится вся страница по правилам body)
   ТОЛЬКО если у html overflow остался visible (по умолчанию). Раз у html
   уже есть свой явный overflow-x, эта передача отключается, и html
   начинает скроллиться сам по себе, полностью игнорируя overflow:hidden
   на body — отсюда и был второй скролл.
   Правило намеренно вне @media — .header-nav.is-open как fixed-оверлей
   физически существует только в мобильной раскладке. */
html:has(.header-nav.is-open),
body:has(.header-nav.is-open) {
    overflow: hidden;
}

/* ===== МОБИЛЬНАЯ ВЕРСИЯ (max-width: 850px) =====
   Полноэкранный оверлей по образцу Hermès: список категорий с "+",
   тап раскрывает пункт, внутри — либо фото+ссылки, либо простой список
   (см. варианты шаблонов в templates/menu/items/). Раскрытие панели —
   через grid-template-rows (0fr → 1fr): CSS сам анимирует до реальной
   высоты содержимого, JS не должен ничего измерять руками — именно
   ручной расчёт max-height через scrollHeight был источником всех
   прошлых багов с "пропавшими" пунктами и сбитым скроллом.
   Открытие/закрытие оверлея — класс .is-open на .header-nav, целиком
   управляется через menu.js (см. блок openOverlay/closeOverlay). */
@media (max-width: 850px) {

    /* Оверлей всегда в DOM, но по умолчанию сдвинут за левый край экрана —
       так transform можно анимировать (в отличие от display:none/block) */
    .header-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        background: #fff;
        z-index: 2000;
        padding: 0 20px 40px;
        margin-top: 0;
        overflow-y: auto;
        overscroll-behavior: contain; /* скролл меню не "пробрасывает" инерцию на body под ним */
        scrollbar-width: none;      /* NEW: прячет полосу прокрутки визуально (Firefox), сам скролл продолжает работать */
        -ms-overflow-style: none;   /* NEW: то же для старого Edge/IE */
        gap: 0;
        transform: translateX(-100%);
        transition: transform 0.32s ease;
        pointer-events: none;
        /* NEW: .mobile-menu-topbar внутри оверлея — sticky и перекрывает
           верх контента. Без scroll-padding-top браузер при программном
           scrollIntoView() (см. menu.js) подводит открытый пункт вплотную
           к самому верху скролл-контейнера — и заголовок категории
           прячется под топбар "МЕНЮ ✕". Значение — примерная высота
           топбара (padding 20px сверху/снизу + текст ~24px) с запасом;
           если топбар поменяет высоту, подгони под неё. */
        scroll-padding-top: 70px;
    }

    /* NEW: прячет полосу прокрутки в Chrome/Safari/новом Edge — на реальных
       телефонах браузер и так не рисует постоянную видимую полосу поверх
       контента (это чисто desktop-особенность отображения при наведении
       мышью), так что скрытие здесь просто выравнивает картинку в
       DevTools/десктопном браузере с тем, как это выглядит на телефоне. */
    .header-nav::-webkit-scrollbar {
        display: none;
    }

    /* Выезжает слева направо при открытии */
    .header-nav.is-open {
        transform: translateX(0);
        pointer-events: auto;
    }

    /* Шапка оверлея — "MENU" + крестик закрытия. Сама разметка добавляется
       в base.html первым элементом внутри <nav class="header-nav"> */
    .mobile-menu-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 0;
        position: sticky;
        top: 0;
        z-index: 10;
        background: #fff;
    }

    .mobile-menu-title {
        font-family: var(--font-primary);
        font-weight: 700;
        font-size: 1.25rem;
        letter-spacing: 0.0625rem;
        text-transform: uppercase;
    }

    .mobile-menu-close {
        border: none;
        background: none;
        font-size: 1.375rem;
        line-height: 1;
        cursor: pointer;
        padding: 0;
    }

    /* Каждый пункт — строка со своей нижней линией, как у Hermès */
    .header-nav-item {
        border-bottom: 1px solid var(--megamenu-border);
    }

    .header-nav-item--extra {
        display: block;
    }

    .header-nav-item__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 0;
        font-family: var(--font-primary);
        font-size: 0.700rem;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        transition: font-size 0.25s ease, letter-spacing 0.25s ease;
    }

    /* Открытый пункт — заголовок становится крупным, обычного регистра
       (как "Women" у Hermès), с подчёркиванием снизу. font-size и
       letter-spacing анимируются transition-ом из базового правила выше;
       text-transform одномоментно переключается на обычный регистр —
       эта конкретная CSS-переход не умеет плавно анимироваться, зато
       сам текст в шаблонах уже написан в исходном регистре ("Зодиаки",
       "О нас" и т.д.), так что просто снимаем uppercase. */
    .header-nav-item.is-open > .header-nav-item__link {
        font-size: 1.75rem;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        border-bottom: 1px solid var(--megamenu-ink);
        padding-bottom: 16px;
    }

    /* Плюс/минус — только у пунктов, у которых реально есть выпадающая панель */
    .header-nav-item:has(> .mega-panel) > .header-nav-item__link::after {
        content: '+';
        font-size: 1.25rem;
        font-weight: 300;
        color: var(--megamenu-ink);
        transition: transform 0.25s ease;
    }

    .header-nav-item.is-open > .header-nav-item__link::after {
        content: '\2212';
    }

    /* ===== АККОРДЕОН: display:none / display:block, без анимации высоты =====
       Раньше пробовали grid-template-rows (0fr → 1fr) — красиво в теории,
       но .mega-panel сам является flex-элементом внутри .header-nav
       (display:flex; flex-direction:column), а у flex-элементов есть
       автоматический min-height:auto, который при подсчёте "естественной"
       минимальной высоты может ориентироваться на полный контент панели,
       ИГНОРИРУЯ текущее значение grid-template-rows. Это не баг в разметке,
       а особенность того, как auto-размеры вложенных flex/grid контейнеров
       считаются в спецификации — и она давала протекание первой строки
       текста у закрытых пунктов.
       display:none полностью исключает элемент из расчёта размеров любого
       предка — никаких auto-min-height эффектов, протечь физически нечему.
       Cs потеряли плавную анимацию раскрытия, зато это гарантированно
       работает в любых условиях. */
    .mega-panel {
        display: none;
        position: static;
        left: auto;        /* сброс десктопного full-bleed позиционирования */
        width: auto;       /* было 100vw — на мобильном не нужно */
        margin-left: 0;    /* было -50vw, уводило панель за левый край экрана,
                               т.к. margin действует независимо от position (в отличие от left) */
        border: none;
        box-shadow: none;
        background: none;
    }

    .header-nav-item.is-open > .mega-panel {
        display: block;
    }

    .mega-panel__inner {
        display: flex;
        flex-direction: column;
        max-width: none;
        gap: 0;
        margin: 0;
        padding: 0 0 20px;
    }

    /* Фото — после ссылок, внизу раскрытого блока (порядок как у Hermès) */
    .mega-panel__columns {
        order: 1;
        display: block;
        margin-top: 24px; /* NEW: отступ от подчёркивания открытого заголовка до первой ссылки */
    }

    .mega-panel__photo {
        order: 2;
        flex: none;
        height: 180px;
        margin-top: 16px;
    }

    .mega-panel__inner--simple {
        display: block;
        padding: 0 0 20px;
        margin-top: 24px; /* NEW: тот же отступ сверху для варианта без фото (как "О нас") */
    }

    .mega-panel__col {
        margin-bottom: 16px;
        text-align: center; /* NEW: ссылки по центру, как подпункты у Hermès */
    }

    .mega-panel__col a {
        display: block;
        padding: 6px 0;
        font-weight: 700; /* NEW: везде жирное начертание, как у "О нас" */
    }
}