/* ==========================================================================
   Шапка десктопа v2 — редизайн по брендбуку (24.09.2026)
   Требование владельца: шапка НЕ броская — спокойная, без ярких цветов.
   Красный (#DD1D1D) только в бейджах корзины/избранного и в кнопке
   «Обратный звонок» внутри выпадашки телефонов — как было до редизайна.
   Логотип прежний (logo_0.png), без дескриптора — решение владельца.

   Подключается из v_base.php только при $header_v2 = TRUE.
   ОТКАТ: $header_v2 = FALSE в v_base.php — файл перестаёт грузиться,
   возвращается прежняя разметка .hinfo. Этот файл можно не удалять.

   Всё внутри min-width: 1280px — ниже включается мобильная шапка
   (media.css @media max-width: 1279px), её этот файл не трогает.
   Основной цвет — графит брендбука #3A3A3A, фоны — тёплый светло-серый.
   ========================================================================== */

@media screen and (min-width: 1280px) {

    header.hdr2 {
        border-bottom: 1px solid #ebe8e3;
    }

    /* ---------- Верхняя полоса (w_navbar.php) ---------- */
    .hdr2 .navi-page {
        min-height: 36px;
        padding: 0 24px;
        background-color: #f7f6f4;
        border-bottom: 1px solid #eeece8;
    }

    .hdr2 .navi-page .navBar li a {
        color: #5c5c5c;
    }

    .hdr2 .navi-page .navBar li a:hover {
        color: #1f1f1f;
    }

    .hdr2 .navi-page .adress span {
        color: #7a7a7a;
    }

    /* Часы работы переехали под телефон — в полосе остаётся только адрес */
    .hdr2 .navi-page .adress span:first-child {
        display: none;
    }

    .hdr2 .navi-page .adress span:nth-child(2) {
        margin-right: 0;
        padding-left: 20px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") no-repeat 0 50%;
        background-size: 14px;
    }

    .hdr2 .navi-page .lang_select a {
        color: #8a8a8a;
    }

    .hdr2 .navi-page .lang_select a:hover {
        color: #1f1f1f;
        background: #ebe9e5;
    }

    .hdr2 .navi-page .lang_select span[aria-hidden] {
        color: #cfccc6;
    }

    .hdr2 .navi-page .lang_select span[aria-current] {
        color: #2a2a2a;
        background: #e6e4e0;
    }

    /* ---------- Основная строка ---------- */
    .hdr2 .hinfo {
        display: flex;
        align-items: center;
        gap: 32px;
        box-sizing: border-box;
        height: 84px;
        padding: 0 24px;
    }

    .hdr2 .brand {
        float: none;
        flex: none;
    }

    /* Логотип прежний. На главной ссылки нет — поэтому правила и на .logo, и на .logo a */
    .hdr2 .logo,
    .hdr2 .logo a {
        position: static;
        float: none;
        display: block;
        width: auto;
        height: auto;
    }

    /* По центру строки должна стоять надпись «Делюкс», а не вся картинка: в logo_0.png
       надпись занимает нижнюю часть (центр на 73% высоты), листок уходит вверх.
       При ширине 110px высота 39px → надпись ниже центра на ~9px, поднимаем на столько же
       (старая шапка делала то же через top: 14px). */
    .hdr2 .logo {
        position: relative;
        top: -9px;
        left: 0; /* в style.css у .logo left: 46px — при relative он бы сработал */
    }

    .hdr2 .logo img {
        display: block;
        width: 110px;
        height: auto;
    }

    .hdr2 .header-info {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        height: auto;
        margin-left: 0;
    }

    /* ---------- Кнопка «Каталог» (целиком ссылка) ----------
       Заливка #323232 — цвет задал владелец 24.09 (до этого пробовали #5c5a57 из 5 вариантов акцента).
       Чистый графит #3A3A3A и чёрная кнопка поиска были отклонены как тяжёлые;
       светлая плашка — как слишком слабый акцент. Поиск остаётся светлым. */
    .hdr2 .catalog-button {
        top: 0;
        flex: none;
        min-width: 0;
        height: 42px;
        padding: 0 18px;
        gap: 9px;
        border-radius: 8px;
        background-color: #323232;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.2px;
        text-decoration: none;
        transition: background-color 0.2s, color 0.2s;
    }

    .hdr2 .catalog-button:hover {
        background-color: #3d3d3d; /* на почти чёрном затемнение незаметно — при наведении чуть светлее */
        box-shadow: none;
        color: #fff;
        text-decoration: none;
    }

    .hdr2 .catalog-button svg {
        flex: none;
    }

    /* Выпадающее меню каталога (v_base.php, вне header; показ — js.js по mouseenter на кнопке).
       Левый край = левый край кнопки: от .site это padding .hinfo 24 + логотип 110 + gap 32 = 166px.
       В style.css было left: 257px под старую кнопку. top оставлен прежним (-22px = низ кнопки).
       Меняешь ширину логотипа/отступы строки — пересчитай это число. */
    .hdr2-catmenu {
        top: -16px; /* 6px зазор под кнопкой: уход с кнопки прячет меню через 300 мс, вход в меню отменяет */
        left: 166px;
        width: auto;
        padding: 12px;
        border: 1px solid #ebe8e3;
        border-radius: 12px;
        box-shadow: 0 18px 36px rgba(31, 24, 16, 0.10);
    }

    /* Две колонки (v_catalog_menu.php режет список пополам): высота меню ~вдвое меньше,
       все категории видны без прокрутки. Раскрытие подкатегорий двигает только свою колонку.
       32px между колонками, чтобы шевроны левой не липли к иконкам правой (замечание владельца 24.09).
       Колонки фиксированной ширины 300px: самая широкая строка с раскрытыми подкатегориями —
       300px (UA «Борошно, висівки, клітковина» + счётчик) — при раскрытии соседняя колонка не прыгает. */
    .hdr2-catmenu .catalog-menu {
        display: flex;
        align-items: flex-start;
        gap: 32px;
    }

    .hdr2-catmenu .d-cat-col {
        width: 300px;
    }

    /* Строка = ссылка целиком: иконка, название, счётчик и шеврон идут подряд
       (счётчик и шеврон не отрываются от своей категории). Фон при наведении — на всю строку. */
    .hdr2-catmenu .d-cat-item {
        position: relative;
        display: block;
        padding: 0;
        border-bottom: 0;
    }

    .hdr2-catmenu .d-cat-item > .d-cat-link {
        display: flex;
        align-items: center;
        padding: 9px 12px;
        border-radius: 8px;
        color: #3A3A3A;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.35;
        white-space: nowrap;
        transition: background-color 0.15s;
    }

    .hdr2-catmenu .d-cat-item > .d-cat-link:hover {
        background-color: #f4f3f1;
        color: #1f1f1f;
    }

    /* Иконки категорий: линейные, тёплый серый, при наведении — графит */
    .hdr2-catmenu .d-cat-ico {
        flex: none;
        width: 22px;
        height: 22px;
        margin-right: 12px;
        color: #8a857d;
        transition: color 0.15s;
    }

    .hdr2-catmenu .d-cat-ico svg {
        display: block;
    }

    .hdr2-catmenu .d-cat-link:hover .d-cat-ico {
        color: #3A3A3A;
    }

    /* Счётчик — мелкий серый текст сразу за названием */
    .hdr2-catmenu .d-cat-badge {
        min-width: 0;
        margin-left: 8px;
        padding: 0;
        background: none;
        color: #a3a09a;
        font-size: 12px;
        font-weight: 400;
    }

    /* Шеврон подкатегорий — вплотную за счётчиком; зона клика 24×24 */
    .hdr2-catmenu .d-cat-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 24px;
        height: 24px;
        margin: -2px 0 -2px 4px;
        border-radius: 6px;
        color: #8a8a8a;
        transition: transform 0.2s, background-color 0.15s, color 0.15s;
    }

    .hdr2-catmenu .d-cat-toggle:hover {
        background-color: #e8e6e2;
        color: #3A3A3A;
    }

    .hdr2-catmenu .d-cat-toggle svg {
        display: block;
    }

    /* Подкатегории: текст на одной линии с названиями родителей (12 + 22 + 12 = 46px),
       счётчик тоже сразу за названием, подсветка — на всю строку */
    .catalog_menu_wrapper.hdr2-catmenu ul.d-cat-sub {
        margin: 0 0 6px;
        padding: 0 !important;
        background: none;
    }

    .hdr2-catmenu .d-cat-sub-item {
        justify-content: flex-start;
        padding: 0;
        border-top: 0;
        border-radius: 6px;
        transition: background-color 0.15s;
    }

    .hdr2-catmenu .d-cat-sub-item:hover {
        background-color: #f4f3f1;
    }

    .hdr2-catmenu .d-cat-sub-item a {
        padding: 6px 0 6px 46px;
        color: #5c5c5c;
        font-size: 14px;
        white-space: nowrap;
    }

    .hdr2-catmenu .d-cat-sub-item a:hover {
        color: #1f1f1f;
    }

    .hdr2-catmenu .d-cat-badge-sub {
        margin-left: 8px;
        padding: 0 12px 0 0;
        font-size: 12px;
    }

    /* ---------- Поиск (w_searchbar.php; автокомплит берёт ширину и низ у поля) ----------
       Поле и кнопка — одна светлая плашка с рамкой, лупа графитовая без заливки.
       Лупа лежит поверх поля справа (absolute), поле на всю ширину рамки — тогда
       выпадашка автокомплита (ширина = outerWidth поля) совпадает с рамкой. */
    .hdr2 .search-header {
        flex: 1;
        min-width: 0;
    }

    .hdr2 .searchForm {
        position: relative;
        display: flex;
        box-sizing: border-box;
        height: 42px;
        margin: 0;
        border: 1.5px solid #e2dfda;
        border-radius: 8px;
        background: #f6f5f3;
        overflow: hidden;
        transition: border-color 0.2s, background-color 0.2s;
    }

    .hdr2 .searchForm:focus-within {
        border-color: #a8a49d;
        background: #fff;
    }

    .hdr2 .searchForm div:first-child {
        float: none;
        flex: 1;
        min-width: 0;
    }

    .hdr2 .searchForm div:last-child {
        position: absolute;
        top: 0;
        right: 0;
        float: none;
    }

    .hdr2 .searchField {
        top: 0;
        box-sizing: border-box;
        width: 100%;
        height: 39px;
        padding: 0 50px 0 16px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #3A3A3A;
        font-size: 15px;
    }

    .hdr2 .searchField:focus {
        background: transparent;
    }

    .hdr2 .searchField::placeholder {
        color: #999;
    }

    .hdr2 .searchButton {
        top: 0;
        width: 50px;
        height: 39px;
        padding: 0;
        border-radius: 0;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A3A3A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") no-repeat center;
        background-size: 19px;
        background-color: transparent;
        opacity: 0.75;
        transition: opacity 0.2s;
    }

    .hdr2 .searchButton:hover {
        background-color: transparent;
        opacity: 1;
    }

    /* ---------- Телефон ---------- */
    .hdr2 .hdr2-phone-wrap {
        position: relative;
        flex: none;
        margin-left: 8px;
    }

    .hdr2 .phones {
        position: relative;
        top: 0;
        display: flex;
        align-items: center;
        padding: 5px 28px 5px 5px;
        border-radius: 10px;
        transition: background-color 0.2s;
    }

    .hdr2 .phones:hover,
    .hdr2 .phones.is-open {
        background-color: #f6f5f3;
    }

    .hdr2 .phones div:first-child {
        float: none;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0;
        color: #3A3A3A;
    }

    .hdr2 .hdr2-phone-ico {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #f1f0ed;
        color: #3A3A3A;
    }

    /* Номер и часы по центру друг под другом — короткая строка часов не «висит» слева */
    .hdr2 .hdr2-phone-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.2;
    }

    .hdr2 .hdr2-phone-num {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -0.2px;
        white-space: nowrap;
        color: #3A3A3A;
    }

    .hdr2 .hdr2-phone-hours {
        margin-top: 3px;
        font-size: 12px;
        letter-spacing: 0.2px;
        color: #8a8a8a;
        white-space: nowrap;
    }

    /* Стрелка (обработчик js.js на '.phones div:last-child') растянута на весь блок:
       раскрывает список кликом по любому месту телефона. Значок — справа. */
    .hdr2 .phones div:last-child {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: auto;
        height: auto;
        margin: 0;
        float: none;
        font-size: 0;
        border-radius: 10px;
    }

    .hdr2 .phones div:last-child::before {
        top: 50%;
        right: 8px;
        bottom: auto;
        left: auto;
        width: 12px;
        height: 12px;
        margin-top: -6px;
        background-size: 8px;
    }

    .hdr2 .phones-also {
        top: calc(100% + 8px);
        left: 0;
        width: 280px;
        box-sizing: border-box;
    }

    /* ---------- Кабинет / Избранное / Корзина: иконка + подпись ---------- */
    .hdr2 .last-header {
        position: static;
        top: 0;
        flex: none;
        display: flex;
        align-items: center;
        gap: 2px;
        padding-right: 0;
    }

    .hdr2 .last-header .user-header,
    .hdr2 .last-header .fav-header,
    .hdr2 .last-header div.card-header {
        position: relative;
        top: 0;
        float: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        box-sizing: border-box;
        width: 72px;
        height: 56px;
        margin: 0;
        border-radius: 8px;
        background: none;
        color: #3A3A3A;
        opacity: 1;
        overflow: visible;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.2s, background-color 0.2s;
    }

    .hdr2 .last-header .user-header:hover,
    .hdr2 .last-header .fav-header:hover,
    .hdr2 .last-header div.card-header:hover {
        color: #111;
        background-color: #f4f3f1;
        text-decoration: none;
    }

    .hdr2 .last-header svg {
        display: block;
        flex: none;
    }

    .hdr2 .hdr2-ico-label {
        font-size: 12px;
        line-height: 1;
        white-space: nowrap;
    }

    /* Бейджи — единственный красный в шапке (как было до редизайна).
       display переключает js.js (.show()/.hide()) — здесь его не задаём */
    .hdr2 .last-header .card-header-info,
    .hdr2 .last-header .fav-header-count {
        position: absolute;
        top: 3px;
        left: 50%;
        margin-left: 4px;
        box-sizing: border-box;
        width: auto;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        border: 2px solid #fff;
        border-radius: 999px;
        background-color: #DD1D1D;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
    }
}