/* ============================================================================
   Мобильная шапка (≤780px), 15.09.2026 — по мотивам b2b.madeindream.com.
   Отдельный файл, а не блок в stylesheet.css (12 700 строк): шапка ещё будет
   меняться (липкая строка, нижний бар), правки должны быть обозримы. Подключён
   в header.tpl сразу после stylesheet.css — при равной специфичности побеждает
   порядком.
   Было: регион/валюта/язык + четыре иконки, полоса градиента, логотип на всю
   ширину, три строки режима работы, телефон с подписью, поиск с бургером —
   ~410px, весь первый экран телефона без единого товара. Стало: одна строка
   56px (бургер · логотип · вход · корзина), 4px брендового градиента и строка
   поиска. Регион, валюта, язык, часы, телефоны, сравнение, избранное, доставка
   и соцсети — в шторке (#sidemenu). Ничего не удалено: узлы переносит JS
   (midMobileHeaderSlots в common.js), поэтому счётчики, модалка города и
   переключатели продолжают работать. Десктоп не тронут.
   ============================================================================ */

/* Пункты, которых нет в десктопном меню (в шторке включаются ниже) */
#menu #sidemenu .item-sidemenu-only {
    display: none;
}

@media (max-width: 780px) {
    header {
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: 56px auto auto;
        grid-template-areas:
            "menu logo icons"
            "gradient gradient gradient"
            "search search search";
        gap: 0;
        padding: 0;
    }
    /* Регион и телефон в шапке прячем только когда JS подтвердил перенос
       (html.mobile-slots). Без класса (старый common.js в кэше, JS упал) —
       оставляем их в шапке строками внизу, чтобы город и номер не пропали совсем. */
    .mobile-slots header > .header__region,
    .mobile-slots header > .header__time {
        display: none;
    }
    header > .header__region,
    header > .header__time {
        grid-area: auto;
        grid-column: 1 / -1;
        justify-self: stretch;
        margin: 0;
        padding: 8px 16px 0;
    }
    header > .header__time .time-block {
        align-items: flex-start;
    }

    /* Бургер: обычная иконка 44×44 вместо голубой «таблетки» — цвет оставляем
       кнопке поиска и градиенту, чтобы в строке был один акцент — логотип */
    .header__menu {
        grid-area: menu;
        width: auto;
        justify-self: start;
        align-self: center;
        padding-left: 6px;
    }
    #menu .item_name_mobile {
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 10px;
        color: #00364a;
        background: transparent;
    }
    #menu .item_name_mobile:active {
        background: rgba(0, 54, 74, .06);
    }
    #menu .item_name_mobile svg {
        width: 26px;
        height: 26px;
        color: #00364a;
    }

    .header__logo {
        height: auto; /* 70px из правила ≤1480px не влезали в строку 56px — логотип уезжал за верх экрана */
        align-self: center;
    }
    .header__logo a {
        display: block;
        line-height: 0;
    }
    .header__logo img {
        display: block;
        width: 150px;
        max-width: 100%;
        height: auto;
    }

    /* В строке остаются вход и корзина; сравнение/избранное уехали в шторку */
    .header__icons {
        margin: 0;
        padding: 0 6px 0 0;
        justify-self: end;
        align-self: center;
    }
    .nav-icons {
        display: flex;
        gap: 0;
        margin: 0;
        padding: 0;
    }
    .nav-icons > a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        color: #00364a;
    }
    .nav-icons svg {
        width: 26px;
        height: 26px;
    }

    .header__gradient {
        grid-area: gradient;
        padding: 0;
    }
    .header__gradient .gradient-div {
        height: 4px;
    }

    /* Поиск: во всю ширину, без бургера слева; тип поиска (товары/статьи/рецепты) сохранён */
    .header__search {
        padding: 12px 16px 14px;
        background: #fff;
    }
    .header__search .container-fluid {
        padding: 0;
    }
    .search-wrapper {
        justify-content: stretch;
        padding: 0;
    }
    .search-container {
        width: 100%;
        max-width: none;
        min-width: 0;
        padding-left: 0;
    }
    .search-container .form-select {
        height: 44px;
        max-width: 136px;
        padding-left: 14px;
        margin-left: 0;
    }
    .header__search .search-input {
        height: 44px;
        padding: 0 14px !important;
    }
    .search-wrapper .btn-search {
        width: 48px;
        height: 44px;
        border-radius: 0 18px 18px 0;
    }

    /* Плавающая «поделиться» лежала поверх логотипа/баннера; соцсети теперь внизу шторки */
    #social_link {
        display: none;
    }

    /* ---- Шторка ---- */
    #menu #sidemenu .item-sidemenu-only {
        display: block;
    }
    /* Ссылки и соцсети стоят в разметке вверху (см. комментарий в header.tpl), в шторке — внизу */
    #menu #sidemenu .sidemenu-links {
        order: 10;
    }
    #menu #sidemenu .sidemenu-social {
        order: 11;
    }

    /* Регион · валюта · язык, под ними режим работы и телефоны */
    #menu #sidemenu .sidemenu-info {
        padding: 6px 20px 16px;
    }
    #sidemenu .header__region {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 14px;
        margin: 0;
        padding: 0;
    }
    #sidemenu .region-block {
        flex: 1 1 100%;
        gap: 5px;
        font-family: 'Inter', Arial, sans-serif;
        font-size: 14px;
        line-height: 1.4;
        color: #00364a;
    }
    #sidemenu .region-block .mobDev {
        display: inline;
        font-family: inherit;
        font-size: inherit;
        font-weight: 400;
        color: inherit;
    }
    #sidemenu #geoip .zone {
        display: inline;
        padding: 0;
        border: 0;
        font-family: inherit;
        font-size: inherit;
        font-weight: 600;
        color: #1ea3d2;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    #sidemenu #currency.btn-top {
        font-size: 14px;
    }
    #sidemenu .header__time {
        margin-top: 12px;
        justify-self: start; /* center с ≤1100px: Chrome применяет justify-self и к блокам — часы уезжали к центру */
    }
    #sidemenu .time-block {
        align-items: flex-start;
        gap: 1px;
    }
    #sidemenu .time-block .text-normal {
        font-family: 'Inter', Arial, sans-serif;
        font-size: 13px;
        line-height: 1.45;
        color: #6b7d85;
    }
    /* Сначала номер, под ним режим работы: номер — главное, часы — пояснение к нему */
    #sidemenu .time-block__pnones {
        order: -1;
    }
    #sidemenu .time-block .phones-list {
        margin-top: 0;
        margin-bottom: 6px;
    }
    /* Номер 17px + иконка + пилюля «Показать» не влезают в строку шторки (на 320px
       экране под неё остаётся ~240px) — «Показать» падала на вторую строку.
       Иконку трубки убираем (в списке контактов она ничего не добавляет),
       номер 15px, пилюля компактнее. */
    #sidemenu .phones-list__icon {
        display: none;
    }
    #sidemenu .phones-list__note {
        padding-left: 0;
    }
    #sidemenu .time-block .header-tel-link {
        font-size: 15px !important;
        white-space: nowrap;
    }
    #sidemenu .time-block .show-phone {
        padding: 2px 7px;
        letter-spacing: 0;
    }

    /* Сравнение (n) · Избранное (n) · Информация о доставке — строки как у пунктов меню */
    #menu #sidemenu .sidemenu-links {
        padding: 4px 0;
    }
    /* два id в селекторе — перебить `#menu > ul > li.item > a` (display/цвет/шрифт пунктов меню) */
    #menu #sidemenu .sidemenu-links > a {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 0;
        padding: 11px 20px;
        border-radius: 0;
        background: none;
        font-family: 'Inter', Arial, sans-serif;
        font-size: 15px;
        font-weight: 500;
        color: #00364a;
        text-decoration: none;
    }
    #sidemenu .sidemenu-links svg {
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
        color: #00364a;
    }
    #sidemenu .sidemenu-links .nav-icon-text,
    #sidemenu .sidemenu-links .shipping-info-text {
        display: block;
        flex: none;
        font-size: 15px;
        line-height: 1.3;
        color: #00364a;
    }
    /* счётчик — не бейдж на иконке, а число после текста */
    #sidemenu .sidemenu-links .count {
        position: static;
        order: 3;
        height: 20px;
        min-width: 20px;
        padding: 0 6px;
        font-size: 12px;
        border-radius: 10px;
    }
    #sidemenu .sidemenu-links .position-relative {
        display: contents;
    }

    #menu #sidemenu .sidemenu-social {
        padding: 14px 20px 22px;
        border-bottom: 0;
    }
    .sidemenu-social__list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .sidemenu-social__list li {
        list-style: none;
        padding: 0;
    }
    .sidemenu-social__list a {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #f1f5f7;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 24px 24px;
    }
    /* Картинки только когда шторка открыта (#sidemenu.show): она visibility:hidden,
       а не display:none, и фон запрашивался бы при загрузке страницы. Сейчас те же
       SVG всё равно приходят из подвала (<img loading="lazy">), так что гейт —
       на случай, если подвал изменится */
    #sidemenu.show .sidemenu-social__list a.vk      { background-image: url('../image/social/vk.svg'); }
    #sidemenu.show .sidemenu-social__list a.yt      { background-image: url('../image/social/youtube.svg'); }
    #sidemenu.show .sidemenu-social__list a.ok      { background-image: url('../image/social/ok.svg'); }
    #sidemenu.show .sidemenu-social__list a.tlg     { background-image: url('../image/social/telegram.svg'); }
    #sidemenu.show .sidemenu-social__list a.rawblog { background-image: url('../image/social/blog.svg'); }
    #sidemenu.show .sidemenu-social__list a.tiktok  { background-image: url('../image/social/tiktok.svg'); }

    /* Плашка «Смена языка» (#l-box, вставляется скриптом после #glanguage) внутри
       шторки — абсолют в углу поверх крестика. Делаем её обычным блоком под
       переключателем языка. */
    #sidemenu #l-box {
        position: static;
        width: 100%;
        margin-top: 8px;
        box-shadow: none;
        border-radius: 8px;
        border: 1px solid #cfe9f3;
    }
    #sidemenu #l-box .icon-left {
        display: none;
    }
}