/* ============================================================================
   ЛесОптТорг — Меню и шапка
   menu.css

   Стили шапки (.navbar-top), главного меню (.navbar-nav-menu),
   подложки логотипа (.navbar-brand) и выпадающих подменю.

   Перенесено с :82 (public_html_82). Использует токены из tokens.css.
   Подключается ПОСЛЕ tokens.css, чтобы var(--color-text) работал.
============================================================================ */

/* ─── 1. Базовые стили navbar (z-index, фон) ─── */
/* Прилипающая шапка через position: sticky — остаётся в потоке,
   контент не скачет, никакие компенсаторы padding не нужны.
   navbar-top — обычное состояние; navbar-fixed-top тоже sticky (на случай
   если JS его навешивает). */
.navbar-top,
.navbar-fixed-top {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: #fff;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
}

/* Компенсатор больше не нужен — sticky не выводит шапку из потока. */
body.body-navbar-fixed .section-1 {
    padding-top: 0;
}

.navbar .dropdown-menu,
.navbar .navbar-collapse {
    z-index: 200;
}

/* Шапка: фон, нижняя граница, тень */
.navbar-top {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 14px rgba(16, 34, 48, 0.08);
    max-width: 100%;
}

body:not(.bx-admin-active) .navbar-top {
    margin-top: 0;
}

body:not(.bx-admin-active).body-navbar-fixed .navbar-fixed-top {
    top: 0;
}

@media (max-width: 800px) {
    .navbar-fixed-top {
        display: block;
        position: relative;
    }
}

/* Выпадающее меню — overflow visible, чтобы dropdown'ы не обрезало */
@media (min-width: 768px) {
    .navbar-top,
    .navbar-top .container,
    .navbar-top #navbar,
    .navbar-top .navbar-collapse {
        overflow: visible !important;
    }
    .navbar-top {
        z-index: 100 !important;
    }
}

/* Контейнер шапки — фон и поведение overflow */
.navbar-top .container,
.navbar-top .navbar-header,
.navbar-top #navbar.navbar-collapse {
    background: #ffffff !important;
}

/* Сдвиг содержимого navbar-collapse, чтобы не наезжало на квадрат логотипа.
   Логотип = 90px шириной + ~15px отступ слева → ~110px резерва. */
@media (min-width: 992px) {
    .navbar-top #navbar.navbar-collapse {
        padding-left: 110px !important;
    }
}

.navbar-top .navbar-header {
    position: relative;
    z-index: 110;   /* выше navbar-collapse, чтобы лого не перекрывалось меню */
}

.navbar-top > .container {
    overflow-x: visible;
    overflow-y: visible;
    max-width: 100%;
    box-sizing: border-box;
}

.navbar-top .navbar-collapse,
.navbar-nav-menu,
.navbar-nav-menu > li {
    position: relative;
    overflow: visible !important;
}


/* ─── 2. Логотип (.navbar-brand) — без подложки/полоски/тени, растворяется в белом фоне ─── */
.navbar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 90px !important;
    height: 90px !important;
    padding: 8px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 110 !important;
    flex-shrink: 0 !important;
}
.navbar-brand::after { content: none; }
.navbar-brand:hover {
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.navbar-brand img {
    display: block !important;
    width: 74px !important;
    height: auto !important;
    max-width: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 767px) {
    .navbar-brand {
        width: 70px !important;
        height: 70px !important;
        padding: 6px !important;
    }
    .navbar-brand img {
        width: 56px !important;
    }
}


/* ─── 3. Главное меню (.navbar-nav-menu) ─── */
.navbar-nav-menu {
    float: left;
    margin-left: 30px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.navbar-nav-menu li {
    position: relative;
    flex: 0 0 auto;
}

/* Невидимый «мостик» под пунктом верхнего уровня — чтобы hover не пропадал
   при прохождении мышки от пункта к выпадашке. */
.navbar-nav-menu > li::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 8px;
    pointer-events: auto;
}

.navbar-nav li a svg {
    margin-right: 10px;
    margin-top: 1px;
}

/* Пункты верхнего уровня — таблеточки с тонкой границей */
.navbar-top .navbar-nav > li > a,
.navbar-nav-menu > li > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1.2 !important;
    min-height: 28px;
    margin: 13px 0;
    color: var(--color-text, #304351) !important;
    font-weight: 500 !important;
    letter-spacing: 0.005em;
    border-radius: 8px;
    padding: 4px 13px !important;
    background: transparent;
    border: 1px solid rgba(17, 24, 39, 0.12);
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

@media (min-width: 992px) {
    #navbar .navbar-nav-menu > li > a {
        border-radius: 8px !important;
    }
}


/* ─── 4. Hover/active состояния пунктов верхнего уровня ─── */
/* Тёмно-зелёный градиент с тенью — как на :82. */
.navbar-top .navbar-nav > li > a:hover,
.navbar-top .navbar-nav > li > a:focus,
.navbar-nav-menu > li:hover > a,
.navbar-nav-menu > li.jshover > a,
.navbar-nav-menu > li > a.root-item-selected,
.navbar-nav-menu > li.item-selected > a,
#horizontal-multilevel-menu li a.root-item-selected {
    background: linear-gradient(145deg, #1d3d37 0%, #244b43 52%, #2b5850 100%) !important;
    color: #f2fbf6 !important;
    border-color: rgba(158, 228, 190, 0.40) !important;
    box-shadow: 0 6px 16px rgba(10, 35, 30, 0.28) !important;
}

/* /cooperation/ — оранжевый акцент в одной палитре с CTA, бейджами и точками */
.navbar-top .navbar-nav > li > a:is([href="/cooperation/"]),
.navbar-nav-menu a:is([href="/cooperation/"]),
.navbar-nav-menu li a:is([href="/cooperation/"]),
.navbar-nav-menu li ul a:is([href="/cooperation/"]),
.navbar-nav-menu li li a:is([href="/cooperation/"]),
.navbar-nav-menu li:hover li a:is([href="/cooperation/"]),
.navbar-nav-menu li.jshover li a:is([href="/cooperation/"]),
#horizontal-multilevel-menu a:is([href="/cooperation/"]) {
    color: #ff5a1f !important;
}

.navbar-top .navbar-nav > li > a:is([href="/cooperation/"]):is(:hover, :focus),
.navbar-nav-menu > li:is(:hover, .jshover, .item-selected) > a:is([href="/cooperation/"]),
.navbar-nav-menu > li > a.root-item-selected:is([href="/cooperation/"]),
#horizontal-multilevel-menu > li:is(:hover, .jshover) > a:is([href="/cooperation/"]),
#horizontal-multilevel-menu > li > a.root-item-selected:is([href="/cooperation/"]) {
    color: #ff7842 !important;       /* чуть светлее — на тёмно-зелёном hover-фоне читается ярче */
}


/* ─── 5. Выпадающее подменю ─── */
.navbar-nav-menu li ul {
    display: none;
}

.navbar-nav-menu li:hover > ul,
.navbar-nav-menu li.jshover > ul {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    /* margin: 0 — без зазора, чтобы hover не терялся при движении мышки.
       padding-top: 10px заменяет визуальный отступ — он внутри hit-area. */
    margin: 0;
    min-width: 230px;
    width: max-content;
    max-width: 360px;
    text-align: left;
    padding: 10px 0 8px 0;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
    z-index: 200 !important;
}

/* Пункты подменю — округлённые, без подложек */
.navbar-nav-menu li a + ul a {
    color: var(--color-text, #304351) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    display: block;
    padding: 9px 16px !important;
    border-radius: 10px;
    margin: 0 6px;
    border: 1px solid transparent;
    text-transform: none;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.navbar-nav-menu li ul li a:hover,
.navbar-nav-menu li ul li a:focus {
    background: rgba(0, 173, 93, 0.08) !important;
    color: var(--color-text, #304351) !important;
    border-color: rgba(0, 173, 93, 0.20);
    box-shadow: 0 4px 10px rgba(0, 102, 57, 0.10) !important;
    transform: none;
}


/* ─── 6. Правая колонка шапки (телефон, режим, корзина) ─── */
#navbar .header-right-col {
    max-width: 100%;
    min-width: 0;
}

#navbar .header-right-meta {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}

#navbar .header-right-meta .navbar-phone,
#navbar .header-right-meta .header-worktime-under-mail {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
}

#navbar .header-right-meta .navbar-phone a {
    overflow: visible;
    text-overflow: clip;
    display: inline-block;
    max-width: 100%;
}

#navbar .header-right-meta .header-worktime-value {
    overflow: visible;
    text-overflow: clip;
}


/* ─── 7. Спец-метки в выпадающем «Каталог» ─── */

/* «Лиственница» — мелкий красный бейдж «ПРЕМИУМ» отдельной строкой
   над названием, само название — обычным тёмным цветом.
   display: flex column гарантирует, что ::before займёт отдельную строку. */
body .navbar-nav-menu li ul a[href="/catalog/listvennitsa/"] {
    color: var(--color-text, #304351) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-top: 8px !important;
    padding-bottom: 9px !important;
}

.navbar-nav-menu li ul a[href="/catalog/listvennitsa/"]::before {
    content: "Иркутская";
    display: block;
    width: auto;
    margin: 0 0 3px;
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ff5a1f;
}

/* «Вопросы и ответы (FAQ)» — мягкий разделитель сверху, отделяя от категорий. */
.navbar-nav-menu li ul a[href="/voprosy-i-otvety-faq/"] {
    margin-top: 10px;
    padding-top: 11px !important;
    border-top: 1px solid rgba(48, 67, 81, 0.14);
}

.navbar-nav-menu li ul a[href="/voprosy-i-otvety-faq/"]:hover {
    border-top-color: rgba(48, 67, 81, 0.22);
}





/* ============================================================================
   ─── 8. РАСКЛАДКА ШАПКИ — таблица 5×2 (как на :82) ────────────────────────

       ┌──────┬─────────────────────────────────────┬────────┬─────────┐
       │      │ ▣ ▣ ▣ ▣ ▣ ▣  (МЕНЮ — каждый пункт   │        │ телефон │
       │ ЛОГО │       в своей колонке)              │ КОРЗ.  ├─────────┤
       │      ├─────────────┬───────────────────────┤   ▼    │  CTA    │
       │      │   слоган    │       поиск→          │        │         │
       └──────┴─────────────┴───────────────────────┴────────┴─────────┘
   • Контейнер центрирован (max-width: 1600px, margin: auto).
   • Логотип   — col 1, объединены 2 строки.
   • Меню      — cols 2+3, верхняя строка (объединены столбцы).
   • Слоган    — col 2, нижняя строка.
   • Поиск     — col 3, нижняя строка.
   • Корзина   — col 4, объединены 2 строки, по низу.
   • Телефон+режим — col 5, верхняя строка.
   • CTA «Подбор под задачу» — col 5, нижняя строка.
============================================================================ */

@media (min-width: 992px) {
    /* Контейнер шапки — центрированный grid */
    .navbar-top .container {
        max-width: 1600px !important;
        margin: 0 auto !important;
        padding: 12px 15px !important;
        display: grid !important;
        grid-template-columns: 90px max-content 92px minmax(180px, auto);
        grid-template-rows: auto auto;
        grid-template-areas:
            "logo menu social phone"
            "logo info basket cta";
        justify-content: center;   /* центрируем всю grid-сетку в контейнере */
        column-gap: 18px;
        row-gap: 0;                /* слоган и поиск ближе к меню — без зазора */
        align-items: center;
    }

    /* Обёртки делаем «прозрачными» (display:contents),
       чтобы их потомки участвовали напрямую в гриде контейнера. */
    .navbar-top .navbar-header {
        display: contents !important;
    }
    .navbar-top #navbar.navbar-collapse {
        display: contents !important;
        padding: 0 !important;  /* отменяем padding-left:110px из верхней секции */
    }
    /* header-info-row теперь сам по себе grid (см. ниже), не contents */

    /* Размещение элементов по grid-area */
    .navbar-top .navbar-brand {
        grid-area: logo;
        align-self: center !important;
    }
    .navbar-top #navbar .navbar-nav-menu {
        grid-area: menu;
        align-self: center;
        justify-self: center;   /* меню центрируется в объединённой ячейке */
        margin: 0 !important;
        float: none !important;
        /* Каждая колонка меню = ширина своего текста (max-content). */
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        gap: 4px;
        width: max-content;
    }
    .navbar-top #navbar .navbar-nav-menu > li {
        width: auto;
        flex: none;
    }
    .navbar-top #navbar .navbar-nav-menu > li > a {
        justify-content: center;
        text-align: center;
        white-space: nowrap;
        font-size: 15px !important;
        padding: 6px 12px !important;
        min-height: 32px !important;
    }
    /* header-info-row — внутренняя 2-колоночная сетка: слоган | поиск.
       Помещается в одной ячейке внешнего grid'а (info, col 2 row 2),
       таким образом ширина = ширина меню над ней → поиск автоматически
       выравнивается с правым краем меню (под «Контакты»). */
    .navbar-top .header-info-row {
        display: grid !important;
        grid-area: info;
        align-self: center !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;              /* слоган и поиск на одной горизонтали */
        gap: 14px;
        width: 100%;
        margin-top: 0;                    /* без подтяжки — row 1 без режима работы стала короче */
        padding-top: 0;
    }
    .navbar-top .header-info-row .header-slogan {
        align-self: center !important;
    }
    .navbar-top .header-info-row .header-search-wrap {
        align-self: center !important;
    }
    /* Перебиваем старые правила из styles.css, которые ломают раскладку:
       у .search-form были float: right + margin-bottom: 20px, из-за чего
       поиск всплывал выше корзины. */
    .navbar-top .header-search-wrap .search-form {
        float: none !important;
        margin: 0 !important;
    }
    .navbar-top .header-info-row .header-slogan {
        align-self: start;       /* по верхнему краю */
        justify-self: start;     /* слева */
        font-size: 14px;
        line-height: 1.35;
        color: var(--color-text, #304351);
        margin: 0;
        padding-left: 12px;       /* небольшой сдвиг вправо — буква «П» не липнет к краю / выпадайке */
        white-space: nowrap;
        float: none !important;
    }
    .navbar-top .header-info-row .header-search-wrap {
        align-self: end;         /* по низу — на одной линии с корзиной и CTA */
        justify-self: end;       /* поиск справа — под «Контакты» */
        margin: 0;
        max-width: 280px;
    }
    /* Соцсети (col 3 row 1, на одном уровне с меню) */
    .navbar-top .header-social {
        grid-area: social;
        align-self: center;
        justify-self: center;
        display: flex;
        gap: 8px;
        align-items: center;
        margin: 0;
    }
    .navbar-top .header-social a {
        display: inline-flex;
        width: 24px;
        height: 24px;
        align-items: center;
        justify-content: center;
    }
    .navbar-top .header-social img {
        width: 22px;
        height: 22px;
        object-fit: contain;
    }

    .navbar-top .header-basket-tall {
        grid-area: basket;
        align-self: center;
        justify-self: center;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 36px;        /* компактная — высота как у инпута поиска */
        margin: 0;           /* синхронно с info-row — без подтяжки */
        border-radius: 10px;
        border: 1px solid rgba(0, 173, 93, 0.55);
        background: #ffffff;
        box-shadow: 0 6px 18px rgba(0, 173, 93, 0.30);   /* выраженная зелёная тень — как на :82 */
        text-decoration: none;
        position: relative;
    }
    .navbar-top .header-basket-tall svg {
        display: block;
        width: 22px;
        height: 22px;
    }
    /* Иконка корзины — зелёная (в палитре бренда). Бейдж со счётчиком оранжевый — он привлекает внимание. */
    .navbar-top .header-basket-tall .basket-count {
        position: absolute;
        top: -6px;
        right: -10px;
        left: auto;
        transform: none;
        width: 20px;
        height: 20px;
        line-height: 1;
        font-size: 11px;
        font-weight: 700;
        color: #fff;
        background: #ff5a1f;
        border: 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 50%;
        text-align: center;
    }

    /* Верхняя ячейка справа: телефон + режим работы — по верхнему краю */
    .navbar-top .header-contact-block {
        grid-area: phone;
        align-self: start;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        text-align: right;
    }
    .navbar-top .header-contact-block .navbar-phone a {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.2;
        color: #00ad5d;
        text-decoration: none;
    }
    .navbar-top .header-contact-block .navbar-phone a:hover {
        color: #027b43;
    }
    .navbar-top .header-contact-block .header-worktime-link {
        display: block;
        text-decoration: none;
        color: inherit;
    }
    .navbar-top .header-contact-block .header-worktime-title {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 700;
        color: #607483;
        line-height: 1.2;
    }
    .navbar-top .header-contact-block .header-worktime-value {
        font-size: 11px;
        color: #304351;
        line-height: 1.25;
    }

    /* CTA «Заказать звонок» — выровнена по правому краю колонки */
    .navbar-top .header-cta-block {
        grid-area: cta;
        align-self: center;
        justify-self: end;           /* блок прижат к правому краю */
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    /* CTA «Заказать звонок» — оранжевая кнопка под акцент-палитру (бейдж, точки, разделители). */
    .navbar-top .header-cta-block .btn-header {
        display: inline-block;
        float: none !important;
        margin: 0 !important;
        padding: 10px 20px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.01em;
        color: #ffffff !important;
        background: #ff5a1f !important;
        border: 0 !important;
        border-radius: 8px;
        text-decoration: none !important;
        text-align: center;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(255, 90, 31, 0.25);
        transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
    }
    .navbar-top .header-cta-block .btn-header:hover {
        color: #ffffff !important;
        background: #e64a0f !important;
        box-shadow: 0 4px 10px rgba(255, 90, 31, 0.35);
        text-decoration: none !important;
    }
    .navbar-top .header-cta-block .btn-header:active {
        transform: translateY(1px);
        box-shadow: 0 1px 3px rgba(255, 90, 31, 0.20);
    }

    /* Поиск — капсульный input + ОТДЕЛЬНАЯ квадратная лупа справа (как на :82) */
    .navbar-top .header-search-wrap .search-form {
        position: relative;
        max-width: 320px;
        width: 100%;
    }
    .navbar-top .header-search-wrap .search-form form {
        position: relative;
        display: flex !important;          /* инпут и кнопка — соседние flex-элементы */
        align-items: center;
        gap: 8px;                          /* видимый зазор между инпутом и лупой */
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    .navbar-top .header-search-wrap .search-form input[type="text"] {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        height: 36px;
        border: 1px solid #c8d3db !important;
        border-radius: 8px !important;       /* прямоугольник со скруглением */
        padding: 6px 16px !important;        /* без места под лупу — она снаружи */
        background: #ffffff;
        font-size: 13px;
        color: var(--color-text, #304351);
        box-shadow: none;
        transition: border-color .18s ease, box-shadow .18s ease;
    }
    .navbar-top .header-search-wrap .search-form input[type="text"]:focus {
        border-color: #00ad5d !important;
        box-shadow: 0 0 0 3px rgba(0, 173, 93, 0.14);
        outline: none;
    }
    /* Лупа — отдельный квадратный белый блок справа от инпута */
    .navbar-top .header-search-wrap .search-form button {
        position: static;                    /* убираем абсолют, теперь это flex-сосед */
        transform: none;
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        padding: 0;
        background: #ffffff;
        border: 1px solid rgba(0, 173, 93, 0.45);
        border-radius: 8px;
        font-size: 0;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 173, 93, 0.18);
        transition: box-shadow .15s ease, border-color .15s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .navbar-top .header-search-wrap .search-form button:hover {
        box-shadow: 0 4px 10px rgba(0, 173, 93, 0.30);
        border-color: rgba(0, 173, 93, 0.70);
    }
    .navbar-top .header-search-wrap .search-form button svg {
        position: static;
        width: 18px;
        height: 18px;
        fill: #00ad5d;
        color: #00ad5d;
    }
    .navbar-top .header-search-wrap .search-form button svg path,
    .navbar-top .header-search-wrap .search-form button svg use {
        fill: #00ad5d !important;
        stroke: #00ad5d;
    }
}

/* ============================================================================
   ─── 8.A. ШАПКА В АДМИН-РЕЖИМЕ — flex-fallback ────────────────────────────
   В админке Битрикса viewport уже (правые панели), и @media (min-width: 992px)
   c grid-раскладкой не срабатывает. Используем flexbox-fallback с явными order'ами,
   чтобы шапка не разваливалась.
============================================================================ */
body.bx-admin-active .navbar-top .container,
#bx-panel ~ * .navbar-top .container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px 18px !important;
    padding: 12px 15px !important;
    max-width: 1600px !important;
}
body.bx-admin-active .navbar-top .navbar-header,
#bx-panel ~ * .navbar-top .navbar-header {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    order: 1 !important;
}
body.bx-admin-active .navbar-top #navbar.navbar-collapse,
#bx-panel ~ * .navbar-top #navbar.navbar-collapse {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 16px !important;
    padding: 0 !important;
    order: 2 !important;
}
body.bx-admin-active .navbar-nav-menu,
#bx-panel ~ * .navbar-nav-menu {
    order: 1 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
}
body.bx-admin-active .navbar-top .header-info-row,
#bx-panel ~ * .navbar-top .header-info-row {
    order: 5 !important;
    flex: 1 1 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}
body.bx-admin-active .navbar-top .header-social,
#bx-panel ~ * .navbar-top .header-social { order: 2 !important; }
body.bx-admin-active .navbar-top .header-contact-block,
#bx-panel ~ * .navbar-top .header-contact-block { order: 3 !important; }
body.bx-admin-active .navbar-top .header-basket-tall,
#bx-panel ~ * .navbar-top .header-basket-tall { order: 4 !important; }
body.bx-admin-active .navbar-top .header-cta-block,
#bx-panel ~ * .navbar-top .header-cta-block { order: 6 !important; flex: 0 0 auto !important; }

/* ============================================================================
   ─── 9. ПОЛОСА С ФИЛИАЛАМИ ────────────────────────────────────────────────
   После шапки — горизонтальная строка: 3 склада + график работы справа.
   Перенесена с :80 (lot_new), адаптирована к токенам lot.
============================================================================ */
.top-stores {
    background: #d4ecd9;                              /* салатный — как мягкая зелёная кнопка */
    border-top: 1px solid #2b5850;                    /* тёмно-зелёная полоска сверху */
    border-bottom: 1px solid #2b5850;                 /* и снизу — обрамляют салатную полосу */
    box-shadow: none;
    font-size: 13px;
    line-height: 1.4;
    /* Полоса теперь часть .lot-sticky-header — не sticky сама по себе.
       z-index НЕ ставим (auto), иначе создаётся отдельный stacking-контекст
       и выпадающее меню каталога перекрывается этой полосой. */
    position: static;
}

/* Обёртка навбара и полосы адресов — единый sticky-блок.
   Перебивает sticky внутреннего navbar-top, чтобы они двигались как одно целое
   и не было «подтягивания» полосы при прокрутке. */
.lot-sticky-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100;
    background: #fff;
}
.lot-sticky-header .navbar-top,
.lot-sticky-header .navbar-fixed-top {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
}
/* В режиме админки — отключаем только sticky-обёртку.
   .navbar-top оставляем как есть — Битриксовские правила в template_styles.css
   уже делают навбар position: relative + z-index: 1, чего достаточно.
   Z-index'ы наших элементов в диапазоне 1-300, Битрикс-модалки (10000+) автоматически выше. */
body.bx-admin-active .lot-sticky-header {
    position: static !important;
    top: auto !important;
}

/* ============================================================================
   ─── 12. JUMBOTRON (баннер на главной) — убрать лес, уменьшить ─────────────
   Контент jumbotron'а закомментирован, оставалась только картинка леса
   высотой 603px. Делаем белый фон и сжимаем — слайдер с каталогом теперь
   просто на белом, без декорации.
============================================================================ */
.jumbotron {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;                 /* было 30px margin-bottom от Bootstrap — убираем */
    background-image: none !important;
    background: #fff !important;
    overflow: visible !important;
}

/* ─── 12.1. Слайдер + каталог в общей карточке — стиль с :82 ─────────────────
   markup: <section class="section-1 section-1--homepage section-1--home-offset">
   на главной (см. header.php). Стили скопированы 1:1 с :82 template_styles.css.
============================================================================ */

/* offset под старый jumbotron больше не нужен — фон леса убит, баннера нет */
.section-1.section-1--homepage.section-1--home-offset {
    margin-top: 0;
}
body.body-navbar-fixed .section-1.section-1--homepage.section-1--home-offset {
    margin-top: 0;
    padding-top: 0 !important;
}

/* Общая карточка вокруг каталога+слайдера */
.section-1.section-1--homepage .row {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    padding: 12px;
}
.section-1.section-1--homepage .row > [class*="col-"] {
    float: none;
}

@media (min-width: 992px) {
    .section-1.section-1--homepage .row > .col-md-3 {
        order: -1;     /* каталог слева, слайдер справа */
    }
}

/* Слайдер — компактнее, тише, не доминирует.
   max-height 260px + filter saturate/brightness снижают «крикливость» промо. */
.section-1.section-1--homepage .row .slider-sm {
    border-radius: 0;
    overflow: hidden;
    height: 100%;
    max-height: 260px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}
/* Лёгкая виньетка — мягко вписывает баннер в карточку */
.section-1.section-1--homepage .row .slider-sm::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.18);
    z-index: 5;
}
.section-1.section-1--homepage .row .slider-sm .carousel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.section-1.section-1--homepage .row .slider-sm .carousel-inner.sale-block {
    flex: 1;
    min-height: 0;
    display: flex;
}
.section-1.section-1--homepage .row .slider-sm .carousel-inner,
.section-1.section-1--homepage .row .slider-sm .slick-list,
.section-1.section-1--homepage .row .slider-sm .slick-track {
    flex: 1;
    min-height: 0;
    height: 100%;
}
.section-1.section-1--homepage .row .slider-sm .item,
.section-1.section-1--homepage .row .slider-sm .slick-slide {
    height: 100%;
}
.section-1.section-1--homepage .row .slider-sm .item img,
.section-1.section-1--homepage .row .slider-sm .slick-slide img {
    width: 100%;
    height: 100%;
    max-height: 260px;
    object-fit: cover;
    /* Притушиваем кричащие промо-картинки: меньше насыщенности и яркости */
    filter: saturate(0.72) brightness(0.96);
}

/* Каталог внутри карточки — без своей тени/скругления, тонкая граница справа */
.section-1.section-1--homepage .catalog-menu {
    box-shadow: none;
    border-radius: 0;
    min-height: 100%;
    border-right: 1px solid #e8e8e8;
}

.section-1.section-1--homepage .row > .col-md-3,
.section-1.section-1--homepage .row > .col-md-9 {
    position: static;
    left: auto;
    right: auto;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 0;
    padding-bottom: 0;
}
.section-1.section-1--homepage .row > .col-md-3:last-child {
    padding-left: 0;
}
.section-1.section-1--homepage .row > .col-md-9:first-child {
    padding-right: 0;
}

/* Компактные размеры каталога — глобально (на всех страницах одинаково) */
.catalog-menu_head {
    padding: 8px 16px !important;
}
.catalog-menu_link {
    padding: 12px 16px !important;
}
.catalog-menu_link li {
    line-height: 32px !important;
}
.section-1.section-1--homepage .catalog-menu {
    min-height: 0;
}

/* Блок баннер+каталог — компактные отступы вокруг */
.section-1.section-1--homepage {
    margin-bottom: 16px;
}
.section-1.section-1--homepage .container {
    padding-top: 0;
    padding-bottom: 0;
}

/* Резервируем место под отсутствующие на главной хлебные крошки + H1.
   На :81 фактическая разница ~30px. */
.section-1.section-1--homepage > .container::before {
    content: "";
    display: block;
    height: 30px;
}
@media (max-width: 991px) {
    .section-1.section-1--homepage > .container::before {
        height: 20px;
    }
}

.top-stores .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
}
.top-stores__item {
    color: var(--color-text, #304351);               /* обычный текст */
    text-decoration: none;
    padding: 4px 18px;
    transition: color .15s ease;
    border-right: 1px solid #ff5a1f;
    line-height: 1.3;
}
.top-stores__item:first-child {
    padding-left: 0;
}
.top-stores__item:last-of-type {
    border-right: none;
}
.top-stores__item:hover {
    color: #1b4332;                                  /* --brand-dark с :80, почти чёрно-зелёный */
    text-decoration: none;
}
/* Оранжевая точка-метка перед каждым адресом */
.top-stores__item::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff5a1f;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}
.top-stores__item strong {
    color: #1b4332;                                  /* --brand-dark с :80 */
    font-weight: 700;
    margin-right: 4px;
}
.top-stores__item span {
    color: var(--color-text-muted, #4b5563);         /* адрес — обычным приглушённым */
}
.top-stores__hours {
    padding-left: 18px;
    border-left: 1px solid #ff5a1f;
    color: var(--color-text-muted, #4b5563);         /* график — приглушённым */
    font-size: 12px;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .top-stores .container {
        padding: 6px 14px;
        font-size: 12px;
    }
    .top-stores__item {
        padding: 4px 10px;
        border: none;
    }
    .top-stores__hours {
        width: 100%;
        margin: 4px 0 0;
        padding: 4px 0 0;
        border: none;
        border-top: 1px solid #ff5a1f;
    }
}


/* ============================================================================
   ─── 11. КАТАЛОГ-МЕНЮ (боковая панель на главной) — стиль с :82 ───────────
============================================================================ */

/* Шапка «Каталог товаров» — компактнее, как на :82 */
.catalog-menu_head {
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    padding: 10px 18px !important;       /* было 8px 30px — мельче и плотнее */
    border-radius: 8px 8px 0 0 !important;
    background: linear-gradient(-170deg, #00ad5d 0, #027b43 100%) !important;
}

/* Контейнер каталога — мягкое скругление и тень, как карточка */
.catalog-menu {
    border-radius: 8px !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06) !important;
    overflow: hidden !important;          /* скругление работает корректно */
}

/* Внутренний UL у компонента bitrix:menu/sidebar_menu — отступы как на :82 */
.catalog-menu .bx_vertical_menu_advanced > ul {
    padding: 8px 0 !important;
}

/* Пункты меню каталога — мельче шрифт, плотнее line-height, сдвиг при ховере */
.catalog-menu .bx_vertical_menu_advanced .bx_hma_one_lvl > a {
    position: relative !important;
    display: block !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    padding: 8px 18px !important;
    color: #304351 !important;
    text-decoration: none !important;
    transition: color 0.15s ease, padding-left 0.15s ease, background 0.15s ease !important;
}

/* Hover — зелёный текст, лёгкая подложка, мягкий сдвиг вправо */
.catalog-menu .bx_vertical_menu_advanced .bx_hma_one_lvl > a:hover {
    color: #00ad5d !important;
    background: rgba(0, 173, 93, 0.06) !important;
    padding-left: 22px !important;
    text-decoration: none !important;
}

/* Текущий раздел — зелёный жирный, светлая подложка (override component CSS) */
.catalog-menu .bx_vertical_menu_advanced .bx_hma_one_lvl.current > a,
.catalog-menu .bx_vertical_menu_advanced .bx_hma_one_lvl.current a {
    color: #00ad5d !important;
    font-weight: 600 !important;
    background: rgba(0, 173, 93, 0.08) !important;
}

/* Полоски слева — белые по умолчанию (невидимы на белом фоне),
   зелёные на hover, оранжевые у текущего раздела. */
.catalog-menu .bx_vertical_menu_advanced .bx_hma_one_lvl > a {
    position: relative !important;
    padding-left: 26px !important;
}
.catalog-menu .bx_vertical_menu_advanced .bx_hma_one_lvl > a::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 18px !important;
    background: #ffffff !important;       /* белая по умолчанию */
    border-radius: 2px !important;
    transition: background 0.15s ease, height 0.15s ease !important;
}
.catalog-menu .bx_vertical_menu_advanced .bx_hma_one_lvl > a:hover::before {
    background: #ff5a1f !important;        /* оранжевая при наведении (как у current) */
    height: 22px !important;
}
.catalog-menu .bx_vertical_menu_advanced .bx_hma_one_lvl.current > a::before,
.catalog-menu .bx_vertical_menu_advanced .bx_hma_one_lvl.current a::before {
    background: #ff5a1f !important;        /* оранжевая у текущего раздела */
    height: 22px !important;
    display: block !important;
    content: "" !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
}

/* Hover-выпадайка с картинкой раздела (контейнер) */
.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_container {
    overflow: visible !important;
}
.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_block.advanced {
    background: #f7fafb;
    min-width: 160px;
    padding: 10px 12px;
}
.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_block.advanced .bx_children_advanced_panel {
    display: block !important;
    text-align: center;
}
.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_advanced_panel img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 6px;
    border: 1px solid rgba(0, 173, 93, 0.15);
    object-fit: cover;
}
.bx_vertical_menu_advanced .bx_hma_one_lvl .bx_children_block.advanced .bx_item_title {
    margin-top: 8px;
    font-size: 13px;
    color: #304351;
    display: block;
}

/* === конец catalog polish === */

/* Стрелочки ▾ у пунктов с подменю — оранжевые, в акцент-палитру */
.menu-caret {
    color: #ff5a1f !important;
}

/* Хлебные крошки — нейтральный серый по умолчанию, оранжевый акцент только на hover */
.bx-breadcrumb .bx-breadcrumb-item-link,
.bx-breadcrumb .bx-breadcrumb-item-text {
    color: #6b7785 !important;
}
/* Гасим подчёркивание у вложенного span — оно даёт вторую линию.
   Подчёркивание ставим только на сам <a> — одна тонкая линия. */
.bx-breadcrumb .bx-breadcrumb-item-link .bx-breadcrumb-item-text,
.bx-breadcrumb .bx-breadcrumb-item-link:hover .bx-breadcrumb-item-text,
.bx-breadcrumb .bx-breadcrumb-item-link:focus .bx-breadcrumb-item-text {
    text-decoration: none !important;
}
.bx-breadcrumb .bx-breadcrumb-item-link:hover,
.bx-breadcrumb .bx-breadcrumb-item-link:focus {
    color: #304351 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: rgba(48, 67, 81, 0.35) !important;
    text-underline-offset: 4px;
}
.bx-breadcrumb .bx-breadcrumb-item-angle,
.bx-breadcrumb .bx-breadcrumb-item-angle::before {
    color: #b8c0c8 !important;
}
/* Текущий (последний) пункт — тёмный, без подсветки — «вы здесь» */
.bx-breadcrumb .bx-breadcrumb-item:last-child .bx-breadcrumb-item-text {
    color: #304351 !important;
    font-weight: 500;
}

/* ============================================================================
   ─── РОТАТОР (lot-rotator) — стат-слайд + промо-слайды чередуются ─────────
   3 слайда × 4 секунды = 12 секунд цикл. Чистый CSS без JS.
============================================================================ */
.lot-rotator {
    background: #ffffff;
    border-bottom: 1px solid #e8eef0;
    overflow: hidden;
}
.lot-rotator .container {
    position: relative;
    height: 70px;          /* фиксированная высота — слайды не дёргают layout */
}
.lot-rotator__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
    opacity: 0;
    animation: lotRotate 12s infinite ease-in-out;
}
@keyframes lotRotate {
    0%, 2%   { opacity: 0; }
    5%, 30%  { opacity: 1; }    /* видим ~3 секунды */
    33%, 100% { opacity: 0; }
}

/* Стат-блок (используется внутри слайда 1) */
.lot-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.2;
}
.lot-stats__num {
    font-size: 30px;
    font-weight: 700;
    color: #ff5a1f;
    letter-spacing: 0.01em;
    line-height: 1;
}
.lot-stats__lbl {
    margin-top: 4px;
    font-size: 13px;
    color: #5a6b62;
    letter-spacing: 0.005em;
}

/* Промо-слайд: тэг + заголовок + ссылка */
.lot-rotator__promo {
    display: flex;
    align-items: center;
    gap: 16px;
}
.lot-rotator__promo-tag {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: #ff5a1f;
    border-radius: 4px;
}
.lot-rotator__promo-tag--info {
    background: #1d3d37;        /* тёмно-зелёный для нейтральных промо (доставка, гарантия и т.д.) */
}
.lot-rotator__promo-title {
    font-size: 16px;
    font-weight: 600;
    color: #1d3d37;
    line-height: 1.3;
}
.lot-rotator__promo-link {
    font-size: 14px;
    color: #ff5a1f;
    text-decoration: none;
    white-space: nowrap;
}
.lot-rotator__promo-link:hover {
    color: #e64a0f;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 767px) {
    .lot-rotator .container { height: 56px; }
    .lot-rotator__slide { gap: 24px; }
    .lot-stats__num { font-size: 20px; }
    .lot-stats__lbl { font-size: 11px; }
    .lot-rotator__promo { flex-direction: column; gap: 4px; text-align: center; }
    .lot-rotator__promo-title { font-size: 13px; }
    .lot-rotator__promo-link { font-size: 12px; }
}