/* ============================================================
   mi_header — шапка в стиле Mi-Parti для темы oct_showcase

   Первая строка:  логотип | поиск | телефон и адрес | закладки, корзина
   Вторая строка:  «Каталог» | меню | язык, валюта

   Обе строки собраны внутри <header class="header">, верхняя полоса
   темы <nav id="top"> от 768px скрыта. Поиск и .header-buttons
   остаются там, где их поставила тема, — ничего не переезжает
   после загрузки, JS нет вообще.

   Порог — 768px, тот же, на котором тема переключается на мобильную
   вёрстку: промежуточного «гибридного» состояния не остаётся.
   ============================================================ */

/* --- Размеры и цвета: меняются в одном месте ----------------
   --mi-row1 задаёт и высоту первой строки, и высоту цветной
   подложки, и отрицательный sticky-сдвиг, поэтому менять её
   достаточно здесь — остальное пересчитается само.
   ----------------------------------------------------------- */
.header {
    --mi-row1:       96px;      /* высота первой строки      */
    --mi-row2:       56px;      /* высота строки меню        */
    --mi-top-bg:     #F0F6FB;   /* фон первой строки         */
    --mi-text:       #1c1c28;   /* телефон, пункты меню      */
    --mi-muted:      #8f90a6;   /* адрес                     */
    --mi-icon:       #4f43e3;   /* иконки трубки, маркера, языка */
    --mi-hover:      #4f43e3;   /* наведение на пункт меню   */
    --mi-gap:        2.75rem;   /* шаг меню, «Каталога», языка */

    /* Картинки иконок. Чтобы поставить свою, переопределите
       переменную, а НЕ селектор иконки:
           .header { --mi-img-phone: url("/image/catalog/icons/mobile.png"); }
       Маску нельзя вешать на .mi-phone — это весь блок с номером,
       и маска обрежет сам номер по форме иконки. */
    --mi-img-phone: url(../img/sprite.svg#include--phone-icon);
    --mi-img-lang:  url(../img/mi-lang-icon.svg);
}
.sc-footer {
    --mi-footer-icon: #c7c9d9;  /* цвет иконок заголовков футера */
    --mi-img-footer-phones:  url(../img/sprite.svg#include--footer-phones-title-icon);
    --mi-img-footer-socials: url(../img/sprite.svg#include--footer-socials-title-icon);
}

/* ===========================================================
   ИКОНКИ (маски по образцу .sc-btn-icon темы — цвет задаётся
   свойством background)
       маркер → sprite.svg#include--top-location-icon (класс темы)
       трубка → sprite.svg#include--phone-icon
       язык   → mi-lang-icon.svg (наш файл)
       футер  → sprite.svg#include--footer-*-title-icon
   =========================================================== */
.header .mi-icon {
    width: 16px;
    height: 16px;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background: #4f43e3;
    background: var(--mi-icon, #4f43e3);
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16px;
    flex: 0 0 16px;
}
.mi-icon-phone {
    -webkit-mask-image: url(../img/sprite.svg#include--phone-icon);
    mask-image: url(../img/sprite.svg#include--phone-icon);
    -webkit-mask-image: var(--mi-img-phone, url(../img/sprite.svg#include--phone-icon));
    mask-image: var(--mi-img-phone, url(../img/sprite.svg#include--phone-icon));
}
.mi-icon-lang {
    -webkit-mask-image: url(../img/mi-lang-icon.svg);
    mask-image: url(../img/mi-lang-icon.svg);
    -webkit-mask-image: var(--mi-img-lang, url(../img/mi-lang-icon.svg));
    mask-image: var(--mi-img-lang, url(../img/mi-lang-icon.svg));
}

/* Маска и фиксированный размер должны стоять ТОЛЬКО на .mi-icon.
   Если они окажутся на самом .mi-phone или .mi-lang-toggle (это
   весь блок «иконка + текст»), маска обрежет текст по форме
   иконки — номер превращается в набор обрывков. Снимаем жёстко;
   свою картинку иконки ставьте переменной --mi-img-phone. */
.header .mi-contacts .mi-phone,
.header .mi-lang-dropdown .mi-lang-toggle {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    height: auto !important;
}

/* ===========================================================
   ОТ 768px — наша шапка
   =========================================================== */
@media (min-width: 768px) {

    /* Верхняя полоса темы не нужна: её содержимое собрано в .header */
    #top.mi-header {
        display: none !important;
    }

    /* Липнет только строка меню.
       Отдельный sticky у дочернего блока работать не будет: он
       «отлипает» вместе с родителем, а родитель здесь высотой в
       саму шапку. Поэтому липким остаётся весь .header, но с
       отрицательным смещением на высоту первой строки — она
       уезжает вверх, строка меню фиксируется у края окна. */
    .header:not(.with-slideshow) {
        top: calc(-1 * var(--mi-row1));
    }

    /* Высоту задаём строками, а не паддингами: от неё считается
       и подложка, и sticky-сдвиг. У темы на планшете стоит
       height:56px — перебиваем. */
    .header {
        height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Цветная подложка первой строки во всю ширину окна */
    .header::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: var(--mi-row1);
        background: #F0F6FB;
        background: var(--mi-top-bg, #F0F6FB);
    }
    .header > .container-fluid {
        position: relative;
        z-index: 1;
    }

    /* Колонка «Каталога» не рендерится — правая занимает всю ширину */
    .header .row > .col-12.col-xl-9 {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
    }

    /* Две строки из одного flex-контейнера */
    .header .header-search-box {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 100%;
    }
    .header .header-search-box > .mi-logo        { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; -ms-flex: 0 0 auto; flex: 0 0 auto; }
    .header .header-search-box > .header-search  { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; -ms-flex: 1 1 auto; flex: 1 1 auto; }
    .header .header-search-box > .mi-contacts    { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; -ms-flex: 0 1 auto; flex: 0 1 auto; min-width: 0; }
    .header .header-search-box > .header-buttons { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; margin-left: 2rem; }
    .header .header-search-box > .mi-bottom-nav  { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; -ms-flex: 0 0 100%; flex: 0 0 100%; width: 100%; }

    /* Высоту первой строки задают логотип и поиск. Контакты и кнопки
       тянуть на всю высоту нельзя: у кнопок темы стоит
       align-self-stretch и justify-content:space-between, поэтому
       иконка и подпись разъезжаются по краям. Им — высоту по
       содержимому и выравнивание по центру строки. */
    .header .header-search-box > .mi-logo,
    .header .header-search-box > .header-search {
        height: var(--mi-row1);
    }
    .header .header-search-box > .mi-contacts,
    .header .header-search-box > .header-buttons {
        height: auto;
        -ms-flex-item-align: center;
        align-self: center;
    }
    .header .header-buttons .sc-btn {
        -ms-flex-item-align: center;
        align-self: center !important;
    }
    .header .header-search-box > .header-search {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        min-width: 0;
        max-width: 800px;         /* на широких экранах поиск не растягивается */
        margin: 0 auto 0 2rem;    /* свободное место уходит перед контактами */
        padding: 0 !important;    /* у темы здесь свои паддинги */
    }
    .header .header-search-box > .header-search > * {
        width: 100%;
    }

    /* Логотип */
    .header .mi-logo img {
        max-height: 76px;
        width: auto;
    }

    /* Телефон, под ним адрес */
    .header .header-search-box > .mi-contacts {
        margin-left: 40px;
    }
    .header .mi-contacts .mi-phone {
        color: #1c1c28;
        color: var(--mi-text, #1c1c28);
        /* .mi-phone — это весь блок «иконка + номер». Ширину и
           маску здесь задавать нельзя: маска обрежет номер по
           форме иконки. Фиксируем ширину по содержимому, чтобы
           номер не переносился по символам. */
        width: -webkit-max-content;
        width: max-content;
        max-width: 100%;
        white-space: nowrap;
    }
    .header .mi-contacts .sc-dropdown-toggle::after {
        background: #1c1c28;
        background: var(--mi-text, #1c1c28);
    }
    .header .mi-contacts .mi-address {
        color: #8f90a6;
        color: var(--mi-muted, #8f90a6);
        text-decoration: none;
        line-height: 1.25;
        max-width: 280px;
        margin-top: .125rem;
    }
    .header .mi-contacts .mi-address:hover {
        text-decoration: underline;
    }
    .header .mi-contacts .mi-call-trigger {
        color: #4f43e3;
        color: var(--mi-hover, #4f43e3);
        cursor: pointer;
        text-decoration: underline;
        margin-top: .125rem;
    }
    .header .mi-contacts .mi-call-trigger:hover {
        text-decoration: none;
    }

    /* Закладки и корзина. Остальные кнопки темы в шапке не нужны —
       если какая-то понадобится, уберите её селектор из списка. */
    .header .header-buttons .header-buttons-catalog,
    .header .header-buttons .header-buttons-viewed,
    .header .header-buttons .header-buttons-account,
    .header .header-buttons .header-buttons-compare {
        display: none !important;
    }
    .header .header-buttons .header-buttons-wishlist {
        border-left: 0 !important;
        padding-left: 0 !important;
    }

    /* --- Строка меню: белая, липкая ------------------------ */
    .header .mi-bottom-nav {
        height: var(--mi-row2);
    }
    .header .mi-bottom-nav #menuToggleButton {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-width: 160px;
        margin-right: var(--mi-gap, 2.75rem);
    }
    .header .mi-bottom-nav .top-left-links {
        margin: 0;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .header .mi-bottom-nav .top-left-links li:not(:last-child) {
        margin-right: var(--mi-gap, 2.75rem);
    }
    .header .mi-bottom-nav .top-left-links li a {
        color: #1c1c28;
        color: var(--mi-text, #1c1c28);
        font-size: .875rem;
        text-decoration: none;
    }
    .header .mi-bottom-nav .top-left-links li a:hover {
        color: #4f43e3;
        color: var(--mi-hover, #4f43e3);
        text-decoration: none;
    }
    .header .mi-bottom-nav .mi-lang-dropdown {
        margin-left: var(--mi-gap, 2.75rem);
    }
    .header .mi-bottom-nav #oct_desktop_currency .sc-switcher {
        margin-left: 1rem !important;
    }
}

/* --- Планшет 768–1199: та же шапка, но компактнее ----------- */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .header {
        --mi-row1: 76px;
        --mi-row2: 52px;
        --mi-gap: 1.5rem;
    }
    .header .mi-logo img {
        max-height: 56px;
    }
    .header .header-search-box > .header-search {
        margin-left: 1.5rem;
    }
    .header .header-search-box > .mi-contacts {
        margin-left: 1.5rem;
    }
    .header .header-search-box > .header-buttons {
        margin-left: 1.5rem;
    }
    .header .mi-contacts .mi-address {
        max-width: 200px;
    }
    .header .mi-bottom-nav #menuToggleButton {
        min-width: 0;
    }
    /* Мегаменю здесь у темы — выезжающая панель с top:60px.
       Сдвигаем её под нашу шапку. */
    .sc-megamenu {
        top: calc(var(--mi-row1, 76px) + var(--mi-row2, 52px));
    }
}

/* ===========================================================
   ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА
   Механику открытия берём у темы: .sc-dropdown-box /
   .sc-dropdown-toggle / .sc-dropdown — своего JS нет.
   =========================================================== */
.header .mi-lang-dropdown .mi-lang-toggle {
    color: #1c1c28;
    color: var(--mi-text, #1c1c28);
}
/* В .header у темы нет правила для «галочки» — задаём цвет сами,
   иначе маска останется без фона и стрелка будет невидимой. */
.header .mi-lang-dropdown .sc-dropdown-toggle::after {
    background: #1c1c28;
    background: var(--mi-text, #1c1c28);
}
.header .mi-lang-dropdown .sc-dropdown,
.header .mi-lang-dropdown .sc-dropdown-inner {
    min-width: 120px;
}
/* Штатный .sc-switcher внутри выпадашки — в вертикальный список.
   Утилиты Bootstrap (p-2, br-12, ms-3/ms-xl-4) идут с !important. */
.header .mi-lang-dropdown .sc-switcher {
    background: transparent !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch !important;
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
.header .mi-lang-dropdown .sc-switcher button {
    color: #1c1c28;
    width: 100%;
    padding: .375rem .5rem;
    border-radius: 4px;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    line-height: 1.25rem;
}
.header .mi-lang-dropdown .sc-switcher button:hover,
.header .mi-lang-dropdown .sc-switcher button.active {
    background: #f2f4f8;
    border: 0;
}

/* ===========================================================
   ИКОНКИ ФУТЕРА
   Были <img src="sprite.svg#...">, стали span.sc-btn-icon —
   цвет управляется через --mi-footer-icon.
   =========================================================== */
.sc-footer .mi-footer-icon {
    width: 24px;
    height: 24px;
    background: #c7c9d9;
    background: var(--mi-footer-icon, #c7c9d9);
    -webkit-box-flex: 0;
    -ms-flex: 0 0 24px;
    flex: 0 0 24px;
}
.mi-footer-icon-phones {
    -webkit-mask-image: url(../img/sprite.svg#include--footer-phones-title-icon);
    mask-image: url(../img/sprite.svg#include--footer-phones-title-icon);
    -webkit-mask-image: var(--mi-img-footer-phones, url(../img/sprite.svg#include--footer-phones-title-icon));
    mask-image: var(--mi-img-footer-phones, url(../img/sprite.svg#include--footer-phones-title-icon));
}
.mi-footer-icon-socials {
    -webkit-mask-image: url(../img/sprite.svg#include--footer-socials-title-icon);
    mask-image: url(../img/sprite.svg#include--footer-socials-title-icon);
    -webkit-mask-image: var(--mi-img-footer-socials, url(../img/sprite.svg#include--footer-socials-title-icon));
    mask-image: var(--mi-img-footer-socials, url(../img/sprite.svg#include--footer-socials-title-icon));
}