/* ============================================================
   HEADER RESPONSIVE FIX
   ------------------------------------------------------------
   Назначение: адаптив шапки (#header__root) для легаси-шаблона.
   Брейкпоинты: 1279 / 1024 / 960 / 768 / 480.
   ≤960px — шапка в одну строку + бургер-меню,
            header-top и header-bottom скрыты,
            логотип — узкая версия,
            ЛК и корзина — только иконка.
   НЕ добавляйте сюда стили других блоков!
   При рефакторинге шапки — инлайнить медиа внутрь header.css.
   ============================================================ */


/* ============================================================
   0) ОБЩИЕ СТИЛИ СЧЁТЧИКОВ НАВИГАЦИИ
   ------------------------------------------------------------
   Позиционируется относительно .header-nav-item-img.
   Работает для ЛК, корзины, сравнения, отложенного и любых
   новых блоков — если счётчик имеет класс .ui-counter-inner.
   ============================================================ */

.header-nav-item-img {
    position: relative;
}

.header-nav-item-img > .ui-counter-inner {
    position: absolute;
    top: 2px;
    right: -11px;
    z-index: 2;
    pointer-events: none;        /* не перехватывает клик по ссылке */
}

/* компактные иконки — сдвигаем чуть внутрь */
@media (max-width: 960px) {
    .header-nav-item-img > .ui-counter-inner {
        top: 0;
        right: -9px;
    }
}

@media (max-width: 480px) {
    .header-nav-item-img > .ui-counter-inner {
        top: -2px;
        right: -8px;
    }
}


/* ============================================================
   1) СНЯТИЕ ЖЁСТКИХ ОГРАНИЧЕНИЙ (база для адаптива)
   ============================================================ */

@media (max-width: 1279px) {
    body { min-width: 320px; }
    .header { min-width: 0; }

    /* декоративные боковые «распорки» больше не нужны */
    .header-main-left-cont,
    .header-main-right-cont { display: none; }

    .header-main {
        display: block;
        padding: 0 16px;
    }

    .header-main-center {
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
        min-width: 0;
    }
}


/* ============================================================
   2) КНОПКА «КАТАЛОГ» — только иконка от 1024 и до мобилки
   ============================================================ */

@media (max-width: 1024px) {
    .catalog-btn {
        width: 44px;
        min-width: 44px;
        padding: 0;
        justify-content: center;
    }
    .catalog-btn > span:not(.icon-svg-wrap) {
        display: none;
    }
    .catalog-btn svg {
        margin-right: 0;
    }

    /* ЛК и корзина — только иконка */
    .personal-line-wrapper .header-nav-item-text-wrapper,
    .basket-line-wrapper  .header-nav-item-text-wrapper {
        display: none;
    }

    .header-main-cont-right {
        flex: 0 0 auto;
        justify-content: flex-end;
    }

    .header-main-right-nav {
        width: auto;
        justify-content: flex-end;
        gap: 14px;
        flex-wrap: nowrap;
    }

    .header-nav-item {
        width: auto;
        min-width: 0;
        height: auto;
    }
}


/* ============================================================
   2.1) ЛОГОТИП — по умолчанию широкая версия, узкая только ≤960
   ============================================================ */

.header-logo__narrow { display: none; }


/* ============================================================
   3) БУРГЕР + МОБИЛЬНАЯ ПАНЕЛЬ — базовые стили (вне медиа,
      показываем только ≤960 через переключатели)
   ============================================================ */

.header-burger {
    display: none;                      /* по умолчанию скрыт */
    position: relative;                 /* для z-index внутри шапки */
    z-index: 101;                       /* выше панели меню и overlay */
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0 0 0 4px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    transition: background-color 120ms ease;
}
.header-burger:hover { background: var(--gray-bg-sw, #F3F4F6); }

.header-burger__line {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--gray-sw, #535E70);
    border-radius: 2px;
    transition: transform 200ms ease, opacity 200ms ease;
}

/* анимация в крестик */
.header-burger.is-open .header-burger__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.header-burger.is-open .header-burger__line:nth-child(2) {
    opacity: 0;
}
.header-burger.is-open .header-burger__line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- Мобильная панель (базовые стили вне медиа) --- */
.mobile-nav-panel {
    display: none;              /* показываем только ≤960 через .is-open */
    position: relative;
    z-index: 100;               /* выше overlay, ниже бургера */
    background: #fff;
    border-top: 1px solid var(--gray1-sw, #E6E9EC);
    box-shadow: 0 8px 16px rgba(0,0,0,.06);
    max-height: 0;
    overflow: hidden;
    transition: max-height 250ms ease;
}
.mobile-nav-panel.is-open {
    display: block;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}
.mobile-nav {
    padding: 8px 0;
}
.mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ============================================================
   4) 960px и меньше — шапка в одну строку + бургер
   ============================================================ */

@media (max-width: 960px) {

    /* --- 4.0. Шапка поднимается над overlay --- */
    .header {
        position: relative;
        z-index: 100;
    }

    /* --- 4.1. Скрываем верхнюю строку и нижнее меню --- */
    .header-top    { display: none; }
    .header-bottom { display: none; }

    /* --- 4.2. Вся шапка — одна строка --- */
    .header-main-center-wrapper {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        height: auto;
        padding: 8px 0;
        gap: 24px;
    }

    .header-main-cont-left {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        align-items: center;
        margin-right: 0;
        gap: 14px;
    }

    /* поиск растягивается */
    .header-search {
        order: 0;
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
    }

    /* правая навигация — по содержимому */
    .header-main-cont-right {
        flex: 0 0 auto;
        justify-content: flex-end;
    }

    .header-main-right-nav {
        width: auto;
        justify-content: flex-end;
        gap: 14px;
        flex-wrap: nowrap;
    }

    .personal-line-wrapper.noauth {
        width: auto;
        min-width: 0;
    }

    /* --- 4.3. Элементы навигации — компактно --- */
    .header-nav-item {
        width: auto;
        min-width: 0;
        height: auto;
    }
    .header-nav-item-a { width: auto; }

    .header-nav-item-img {
        width: 40px;
        height: 40px;
        margin-right: 0;
        border-radius: 10px;
    }

    /* ЛК и корзина — только иконка */
    .personal-line-wrapper .header-nav-item-text-wrapper,
    .basket-line-wrapper  .header-nav-item-text-wrapper {
        display: none;
    }

    .basket-line-wrapper .header-nav-item-img { position: relative; }

    /* --- 4.4. Показываем бургер --- */
    .header-burger { display: inline-flex; }

    /* --- 4.5. Логотип: узкая версия --- */
    .header-logo {
        width: auto;
        flex: 0 0 auto;
    }
    .header-logo__wide { display: none; }
    .header-logo__narrow {
        display: inline-block;
        /*width: 90px;*/
        /*height: 40px;*/
        vertical-align: middle;
    }

    /* --- 4.6. Попапы персонального меню/корзины — к правому краю --- */
    .card-personal-menu-popup {
        left: auto;
        right: 0;
        min-width: 280px;
        max-width: calc(100vw - 24px);
    }
    .card-baskets-popup {
        right: 0;
        left: auto;
        max-width: calc(100vw - 24px);
    }

    /* --- 4.7. Общие попапы — не выходят за экран --- */
    .popup-window { max-width: calc(100vw - 24px); }
}


/* ============================================================
   5) 768px — планшет (только то, что ещё не сделано на 960)
   ============================================================ */

@media (max-width: 768px) {
    /* иконки навигации чуть компактнее */
    .header-nav-item-img {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    /* узкий логотип меньше */
    .header-logo__narrow {
        /*width: 80px;*/
        /*height: 36px;*/
    }

    .header-main-cont-left {
        display: contents;
    }

    /* Обёртка — multi-line flex */
    .header-main-center-wrapper {
        flex-wrap: wrap;
        row-gap: 8px;
        column-gap: 14px;
    }

    /* Всё, кроме поиска, — первая строка */
    .header-logo,
    .catalog-btn,
    .header-main-cont-right {
        order: 1;
    }

    /* Поиск — вторая строка на всю ширину */
    .header-search {
        order: 2;
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* ============================================================
   6) 480px — мобилка
   ============================================================ */

@media (max-width: 480px) {
    .header { padding: 6px 0; margin-bottom: 6px; }
    .header-main { padding: 0 12px; }

    /* узкий логотип ещё меньше */
    .header-logo__narrow {
        /*width: 70px;*/
        /*height: 32px;*/
    }

    /* кнопка «Каталог» ещё меньше */
    .catalog-btn {
        width: 40px;
        min-width: 40px;
        height: 40px;
    }

    /* иконки навигации — 36×36 */
    .header-nav-item-img {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }


    /* поиск — компактнее */
    .header-search-form .form-group input {
        /*padding-left: 14px !important;*/
        padding-right: 42px;
        font-size: 14px;
        min-width: 0;
    }
    .header-search-form .search-button {
        width: 40px;
        height: 38px;
    }

    /* бургер — 40×40 */
    .header-burger {
        width: 40px;
        height: 40px;
        margin-left: 0;
    }
    .header-burger__line { width: 18px; }

    /* попапы — на всю ширину минус отступы */
    .card-personal-menu-popup,
    .card-baskets-popup {
        right: 0;
        left: 0;
        min-width: 0;
        width: calc(100vw - 24px);
    }

    /* поисковые подсказки */
    #top-fix-search .catalog-section-search {
        border-radius: 0 0 8px 8px;
    }

}


/* ============================================================
   7) Тач-устройства — попапы по клику (нужен JS .is-open)
   ============================================================ */

@media (hover: none) {
    .personal-line-wrapper:hover .card-personal-menu-popup,
    .price-demo-line-wrapper:hover .card-price-demo-popup,
    .header-bottom .store-horizontal li:hover ul {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .personal-line-wrapper.is-open .card-personal-menu-popup,
    .price-demo-line-wrapper.is-open .card-price-demo-popup,
    .header-bottom .store-horizontal li.is-open ul {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}


/* ============================================================
   8) Защита от «просвечивания» скрытых попапов
   ============================================================ */

.card-personal-menu-popup,
.card-price-demo-popup {
    pointer-events: none;
}
.personal-line-wrapper:hover .card-personal-menu-popup,
.price-demo-line-wrapper:hover .card-price-demo-popup {
    pointer-events: auto;
}