/* Э1 (T-14, T-15, D14): раскладка оболочки specialty_v2 поверх эталонов блоков Э0. Липкая только ГЛАВНАЯ строка шапки (логотип, «Каталог», поиск, иконки):
   верхнее меню (десктоп) и лента уходят со скроллом. Для position: sticky строка должна быть потомком высокого контейнера, поэтому корневые
   обёртки шапки не создают собственных блоков (display: contents), а рамку эталона (подложка, отступы, нижняя обводка) несёт сама строка.
   Размеры строк - числа паспорта header (кадры 320 / 640 / 1920); отклонение от эталона «одна рамка высотой 90/116/156» - решение владельца D14
   (запись owner_override паспорта header). Цвета, радиусы, шрифты - токены. Файл подключает header.php оболочки, после css/blocks/header.css. */
html {
    scroll-padding-top: var(--sp-header-h, 0px);
}

.sp-shell-head,
.sp-shell-head .sp-hd {
    display: contents;
}

.sp-shell-head .sp-hd__main {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 16px 24px 10px;
    border-bottom: 1px solid var(--stroke-grey-light);
    background: var(--bg-white);
}

.sp-shell-head .sp-hd__quick {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 8px 24px 10px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--stroke-grey-light);
    background: var(--bg-white);
}

.sp-shell-head .sp-hd__quick::-webkit-scrollbar {
    display: none;
}

@media (min-width: 640px) {
    .sp-shell-head .sp-hd__main {
        padding: 16px 32px;
    }

    .sp-shell-head .sp-hd__quick {
        padding: 8px 32px 12px;
    }
}

@media (min-width: 1280px) {
    .sp-shell-head .sp-hd__top {
        width: 100%;
        max-width: var(--container-max);
        margin: 0 auto;
    }

    .sp-shell-head .sp-hd__main {
        padding: 24px max(24px, calc((100% - var(--container-max)) / 2)) 16px;
        border-bottom: 0;
    }

    .sp-shell-head .sp-hd__quick {
        padding: 0 max(24px, calc((100% - var(--container-max)) / 2)) 16px;
        border-bottom: 0;
        font: var(--font-quick-lg);
    }
}

/* страница оформления: нижнего меню нет */
.sp-root.sp-root--order {
    --sp-bn-h: 0px;
}

/* Нижнее меню прикреплено к низу окна на планшете и мобайле; резерв под него - у обёртки страницы */
.sp-shell-bn {
    display: contents;
}

@media (max-width: 1279px) {
    .sp-shell-bn .sp-bn {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: var(--z-bottom-nav);
    }

    .sp-root:not(.sp-root--order) {
        padding-bottom: var(--sp-bn-h, 58px);
    }
}

.sp-root--order .sp-shell-bn {
    display: none;
}

/* Нижнее меню занимает 58 px до 1279 px (P-292 M-02): от него считается положение плашки cookie и виджета обратного звонка Envybox */
:root {
    --sp-cookie-z: 250;
}

@media (max-width: 1279px) {
    :root {
        --sp-bn-h: 58px;
    }

    .cbk-phone {
        position: fixed !important;
        top: auto !important;
        bottom: calc(var(--sp-cookie-top, var(--sp-bn-h, 0px)) + 12px) !important;
    }
}

.sp-bn__counter[hidden] {
    display: none;
}

/* «Бренды раздела» (T-57): строка ссылок брендовых фильтров подраздела оборудования, под крошками */
.sp-brands {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px 16px;
}

.sp-brands__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-brands__link {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--stroke-grey-light);
    border-radius: var(--radius-full);
    color: var(--text-black);
    font: 500 14px/1 var(--font-base);
    text-decoration: none;
}

.sp-brands__link:hover {
    background: var(--color-hover);
}

.sp-brands__link:focus-visible {
    outline: 2px solid var(--color-main);
    outline-offset: 2px;
}