/* ==========================================================================
   Блок: Header (шапка сайта) + мобильное меню
   Figma → секция «Header»:
     120:527   — Header, десктоп 1440 × 104 (верхняя строка 40 + основная 64)
     270:2936  — Header, мобильный 375 × 64
     142:3306  — состояния поля поиска (Default / Variant2 / Variant3)
     281:13830 — Mobile - Menu, свёрнутое состояние
     281:15321 — Mobile - Menu, раскрытый аккордеон
   ========================================================================== */

.header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    color: var(--c-white);
}

/* --------------------------------------------------------------------------
   Верхняя строка: меню + соцсети + телефон
   -------------------------------------------------------------------------- */

.header__topbar {
    background-color: var(--c-header-topbar);
}

.header__topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    padding-bottom: 8px;
}

.header__nav-list {
    display: flex;
    align-items: center;
    gap: 24px;
}

.header__nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: var(--c-white);
    opacity: 0.8;
    white-space: nowrap;
    transition: opacity var(--transition);
}

.header__nav-link:hover {
    opacity: 1;
}

.header__nav-chevron {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    transition: transform var(--transition);
}

.header__nav-chevron img {
    width: 100%;
    height: 100%;
}

/* Выпадающее меню пункта «О компании» (Figma: О нас / Сертификаты / Реквизиты).
   Скрыто по умолчанию, поэтому обычный вид шапки не меняется; раскрывается
   при наведении и с клавиатуры. Пункты приходят из «Настройки сайта → Меню». */
.header__nav-item {
    position: relative;
}

.header__submenu {
    position: absolute;
    top: 100%;
    left: -20px;
    z-index: 60;
    display: none;
    min-width: 180px;
    margin-top: 8px;
    padding: 8px;
    background-color: var(--c-white);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

/* Прозрачный мостик поверх отступа, чтобы меню не закрывалось,
   пока курсор идёт от пункта к выпадающему списку */
.header__submenu::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.header__nav-item--has-sub:hover .header__submenu,
.header__nav-item--has-sub:focus-within .header__submenu {
    display: block;
}

.header__nav-item--has-sub:hover .header__nav-chevron,
.header__nav-item--has-sub:focus-within .header__nav-chevron {
    transform: rotate(180deg);
}


.header__submenu-link {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
    color: var(--c-grey-800);
    transition: background-color var(--transition), color var(--transition);
}

.header__submenu-link:hover {
    background-color: var(--c-grey-200);
    color: var(--c-red-500);
}

.header__contacts {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header__socials {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header__social {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background-color: rgba(255, 255, 255, 0.12);
    transition: background-color var(--transition);
}

.header__social:hover {
    background-color: rgba(255, 255, 255, 0.24);
}

.header__social img {
    width: 16px;
    height: 16px;
}

.header__phone {
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-white);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Основная строка: логотип + каталог + поиск + кнопка
   Полупрозрачная, с размытием — лежит поверх первого экрана
   -------------------------------------------------------------------------- */

.header__main {
    background-color: rgba(255, 255, 255, 0.01);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.header__main-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    padding-bottom: 12px;
}

.header__left {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* --- Логотип --- */

.header__logo {
    position: relative;
    flex-shrink: 0;
    width: 318.333px;
    height: 40px;
}

.header__logo-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
}

.header__logo-title {
    position: absolute;
    top: 0;
    left: 45.14px;
    font-size: 18.333px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
}

/* Подпись в две строки: «Официальный дистрибьютор» + названия брендов
   (перенос по <br>). Вторая строка с Finncolor длиннее и на одной строке
   уже вылезала за знак — нормальный перенос и ширина держат её в пределах. */
.header__logo-sub {
    position: absolute;
    top: 19px;
    left: 45.14px;
    max-width: 273px;
    font-size: 9.167px;
    font-weight: 400;
    line-height: 1.12;
    color: #ffffff;
    white-space: normal;
}

/* --- Кнопка «Каталог» --- */

.header__catalog {
    flex-shrink: 0;
}

/* Знак «бенто» лежит в разметке в двух цветах: тёмный — для белой кнопки
   (шапка поверх фотографии и свёрнутая), белый — для тёмной на светлой шапке */
.header__catalog .btn__icon img + img {
    display: none;
}

/* --------------------------------------------------------------------------
   Поле поиска — три состояния из макета (142:3306)
     Default   — тёмное полупрозрачное, иконка и текст белые
     Variant2  — в фокусе: белый фон, рамка Grey 300, иконка и плейсхолдер Grey 500
     Variant3  — с введённым запросом: то же + крестик очистки, текст Grey 800
   -------------------------------------------------------------------------- */

.header__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    width: 360px;
    height: 40px;
    padding: 10px 16px 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color var(--transition), border-color var(--transition);
}

.header__search-icon {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.header__search-icon img {
    width: 100%;
    height: 100%;
}

/* Тёмная (серая) иконка показывается только в светлых состояниях */
.header__search-icon img + img {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

.header__search-input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    outline: none;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: var(--c-white);
}

.header__search-input::placeholder {
    color: var(--c-white);
    opacity: 1;
}

.header__search-clear {
    display: none;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.header__search-clear img {
    width: 100%;
    height: 100%;
}

/* Variant2 / Variant3 — светлое состояние */
.header__search:focus-within,
.header__search.is-filled {
    background-color: #ffffff;
    border-color: var(--c-grey-300);
}

.header__search:focus-within .header__search-icon img,
.header__search.is-filled .header__search-icon img {
    display: none;
}

.header__search:focus-within .header__search-icon img + img,
.header__search.is-filled .header__search-icon img + img {
    display: block;
}

.header__search:focus-within .header__search-input,
.header__search.is-filled .header__search-input {
    color: var(--c-grey-800);
}

.header__search:focus-within .header__search-input::placeholder,
.header__search.is-filled .header__search-input::placeholder {
    color: var(--c-grey-500);
}

/* Variant3 — есть запрос: крестик и симметричные отступы */
.header__search.is-filled {
    padding-right: 12px;
}

.header__search.is-filled .header__search-clear {
    display: block;
}

/* --- Кнопка «Получить консультацию» --- */

.header__cta {
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Светлая шапка — для страниц без фотографии на первом экране
   Figma: 120:878. Верхняя строка та же, основная — на заливке Grey 200,
   логотип и поиск тёмные, кнопка «Каталог» из белой становится тёмной
   (в разметке .btn--dark вместо .btn--white).
   При скролле шапка на всех страницах одна и та же — тёмная, поэтому
   правила ниже действуют только пока она не зафиксирована
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
    /* фотографии под шапкой нет, поэтому она стоит в потоке страницы */
    .header--light:not(.is-stuck) {
        position: relative;
        color: var(--c-grey-800);
    }

    .header--light:not(.is-stuck) .header__main {
        background-color: var(--c-grey-200);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .header--light:not(.is-stuck) .header__logo-title,
    .header--light:not(.is-stuck) .header__logo-sub {
        color: var(--c-grey-800);
    }

    /* кнопка «Каталог» здесь тёмная, значит знак на ней белый */
    .header--light:not(.is-stuck) .header__catalog .btn__icon img {
        display: none;
    }

    .header--light:not(.is-stuck) .header__catalog .btn__icon img + img {
        display: block;
    }

    /* поле поиска сразу в светлом состоянии — том же, что при фокусе */
    .header--light:not(.is-stuck) .header__search {
        background-color: #ffffff;
        border-color: var(--c-grey-300);
    }

    .header--light:not(.is-stuck) .header__search-icon img {
        display: none;
    }

    .header--light:not(.is-stuck) .header__search-icon img + img {
        display: block;
    }

    .header--light:not(.is-stuck) .header__search-input {
        color: var(--c-grey-800);
    }

    .header--light:not(.is-stuck) .header__search-input::placeholder {
        color: var(--c-grey-500);
    }
}

/* --------------------------------------------------------------------------
   Широкое поле поиска — страница результатов поиска (макет 143:4239).
   Там шапка отвязана от компонента, и поле растянуто с 360px до 632px:
   до кнопки «Получить консультацию» остаётся 18.67px.
   Ниже 1440px поле сжимается вместе с шапкой, чтобы ничего не выехало
   -------------------------------------------------------------------------- */

@media (min-width: 1280px) {
    .header--search .header__left {
        flex: 1 1 auto;
        min-width: 0;
        /* 18.67px — зазор от поля до кнопки «Получить консультацию» в макете;
           он же не даёт им сойтись вплотную на промежуточных ширинах */
        padding-right: 18.67px;
    }

    .header--search .header__search {
        flex: 0 1 632px;
        width: auto;
        min-width: 180px;
    }
}

/* --------------------------------------------------------------------------
   Бургер (только мобильный). В открытом состоянии превращается в крестик —
   макет 281:15205: две полосы 27.59 × 2, поворот ±45°, скругление 10px
   -------------------------------------------------------------------------- */

.header__burger {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    overflow: hidden;
}

.header__burger span {
    display: block;
    width: 27.59px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--c-white);
    transition: transform var(--transition), opacity var(--transition);
}

.header__burger.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.header__burger.is-active span:nth-child(2) {
    opacity: 0;
}

.header__burger.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Планшет: сжимаем отступы, поиск становится резиновым
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
    .header__left {
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 24px;
    }

    .header__search {
        flex: 1 1 auto;
        width: auto;
        min-width: 180px;
    }
}

@media (max-width: 1199px) {
    .header__nav-list {
        gap: 16px;
    }
}

/* --------------------------------------------------------------------------
   Мобильная версия — 375 × 64 (270:2936)
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
    .header {
        position: relative;
        background-color: var(--c-header-topbar);
    }

    /* Верхняя строка целиком уходит в мобильное меню */
    .header__topbar {
        display: none;
    }

    .header__main {
        background-color: var(--c-header-topbar);
    }

    .header__main-inner {
        gap: 40px;
    }

    .header__left {
        flex: 1 1 0;
        min-width: 0;
        gap: 16px;
        margin-right: 0;
    }

    /* На мобильном от логотипа остаётся только знак 40 × 40 */
    .header__logo {
        width: 40px;
    }

    .header__logo-title,
    .header__logo-sub {
        display: none;
    }

    .header__catalog,
    .header__cta {
        display: none;
    }

    .header__search {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    /* На iOS Safari поле с font-size < 16px при фокусе зумит всю страницу
       («экран будто приближается»). У поля поиска размер 14px — на мобильном
       поднимаем до 16px, чтобы зума не было. На десктопе остаётся 14px. */
    .header__search-input {
        font-size: 16px;
    }

    .header__burger {
        display: flex;
    }

    /* Пока меню открыто, шапка прижата к верху экрана — как на макете
       Mobile - Menu, где меню начинается сразу под шапкой */
    body.is-menu-open .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
}

/* ==========================================================================
   Header при скролле — 61:2738
   Комментарий дизайнера (61:2711): «При скролле фиксировать Header».
   Как только обычная шапка уходит за верх экрана, она прижимается к нему.
   На десктопе она при этом сжимается в одну строку 64px на заливке #141414:
   знак логотипа, «Каталог», поиск, пункты меню и красная кнопка.
   Разметка не меняется — строки распускаются через display: contents
   ========================================================================== */

/* Высота обычной шапки, когда она стояла в потоке страницы: без этого
   отступа страница дёрнулась бы вверх в момент фиксации. Значение
   подставляет header.js; на страницах с фотографией под шапкой она
   спозиционирована абсолютно, компенсировать нечего и отступ остаётся 0 */
body {
    padding-top: var(--header-stuck-space, 0px);
}

.header.is-stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--c-header-topbar);
}

/* полупрозрачность и размытие нужны были поверх фотографии первого экрана */
.header.is-stuck .header__main {
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Свёрнутая шапка — только на десктопе: ниже 1280px пункты меню, поиск
   и кнопка в одну строку уже не помещаются, и шапка остаётся двухстрочной */
@media (min-width: 1280px) {
    /* обе строки распускаются, и их содержимое встаёт в один ряд */
    .header.is-stuck .header__topbar,
    .header.is-stuck .header__topbar-inner,
    .header.is-stuck .header__main,
    .header.is-stuck .header__main-inner {
        display: contents;
    }

    /* геометрия .container переезжает на саму шапку: те же 1440 и поля 60 */
    .header.is-stuck {
        display: flex;
        align-items: center;
        gap: 40px;
        padding: 12px calc(var(--container-offset) + var(--container-pad));
    }

    .header.is-stuck .header__left {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 0;
        padding-right: 0;
    }

    .header.is-stuck .header__nav {
        order: 2;
        flex-shrink: 0;
    }

    /* поля кнопки 16px вместо 24px — 194px против 210px в обычной шапке */
    .header.is-stuck .header__cta {
        order: 3;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* соцсети и телефон в свёрнутую шапку не переезжают */
    .header.is-stuck .header__contacts {
        display: none;
    }

    /* от логотипа остаётся только знак 40 × 40 */
    .header.is-stuck .header__logo {
        width: 40px;
    }

    .header.is-stuck .header__logo-title,
    .header.is-stuck .header__logo-sub {
        display: none;
    }

    /* «Каталог» тут белая на любой странице (на светлых в разметке .btn--dark) */
    .header.is-stuck .header__catalog {
        background-color: var(--c-white);
        color: var(--c-grey-800);
    }

    .header.is-stuck .header__catalog:hover {
        background-color: var(--c-gray-200);
    }

    /* поиск забирает всё, что осталось, — 429px при ширине 1440 */
    .header.is-stuck .header__search {
        flex: 1 1 auto;
        width: auto;
        min-width: 180px;
    }
}

/* ==========================================================================
   Мобильное меню — 281:13830 / 281:15321
   Панель занимает экран под шапкой, фон Grey 200
   ========================================================================== */

.mobile-menu {
    position: fixed;
    top: 64px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 26px 16px 32px;
    overflow-y: auto;
    background-color: var(--c-grey-200);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}

.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
}

/* Группа пунктов: строки по 40px с шагом 4px */
.mobile-menu__group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Заголовок группы — «Каталог:», «Связаться с нами:» */
.mobile-menu__caption {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-grey-500);
}

.mobile-menu__caption img {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.mobile-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    text-align: left;
    color: var(--c-grey-800);
    transition: color var(--transition);
}

.mobile-menu__link:hover {
    color: var(--c-red-500);
}

.mobile-menu__chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    transform: rotate(90deg);
    transition: transform var(--transition);
}

.mobile-menu__link[aria-expanded="true"] .mobile-menu__chevron {
    transform: rotate(-90deg);
}

/* Вложенные пункты — отступ 16px, обычное начертание */
.mobile-menu__sub {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-menu__sub[hidden] {
    display: none;
}

.mobile-menu__sublink {
    display: flex;
    align-items: center;
    height: 40px;
    padding-left: 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: var(--c-grey-800);
    transition: color var(--transition);
}

.mobile-menu__sublink:hover {
    color: var(--c-red-500);
}

/* Разделитель. Отрицательный отступ компенсирует собственную высоту линии,
   чтобы расстояния между блоками совпадали с макетом (24 / 1 / 24) */
.mobile-menu__divider {
    height: 1px;
    margin-top: -1px;
    background-color: var(--c-grey-300);
}

/* Нижняя группа: подпись, кнопка, соцсети */
.mobile-menu__contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 245px;
}

.mobile-menu__contacts .mobile-menu__caption {
    height: 19px;
}

.mobile-menu__socials {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
}

.mobile-menu__social {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px 0 12px;
    border-radius: var(--radius-sm);
    background-color: var(--c-grey-800);
    transition: background-color var(--transition);
}

.mobile-menu__social:hover {
    background-color: var(--c-grey-800-hover);
}

.mobile-menu__social img {
    width: 24px;
    height: 24px;
}

/* ==========================================================================
   Поиск: подсказки под полем
   Figma: 143:3536 «Поиск - нажатие»  — история + частые запросы
          143:4336 «Поиск - ввод»     — подсказки по введённому тексту
          278:8337 / 278:9529         — те же состояния на мобильном
   ========================================================================== */

/* Затемнение страницы, пока открыт поиск (Rectangle 202, rgba(0,0,0,.3)).
   Лежит под шапкой: у .header z-index 100 */
.search-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}

.search-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* В открытом состоянии поле шире — 632px против 360px (143:4195) */
.header__search.is-open {
    width: 632px;
}

/* --------------------------------------------------------------------------
   Сам список
   Ширина совпадает с полем, отбивка 12px — это нижнее поле шапки,
   поэтому список начинается ровно по её нижней границе
   -------------------------------------------------------------------------- */

/* Смещения отсчитываются от внутреннего края рамки поля, поэтому
   к отбивке 12px добавлен её 1px, а по бокам список выходит на ширину поля */
.search-drop {
    position: absolute;
    top: calc(100% + 13px);
    right: -1px;
    left: -1px;
    z-index: 1;
    max-height: calc(100vh - 116px);
    overflow-y: auto;
    border-radius: var(--radius-sm);
    background-color: #ffffff;
    color: var(--c-grey-800);
}

.search-drop__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* группа объявлена флексом, поэтому одного атрибута hidden ей мало */
.search-drop__group[hidden] {
    display: none;
}

/* Первая группа отбита сверху, вторая — сверху и снизу */
.search-drop__group--history {
    padding-top: 16px;
}

.search-drop__group--popular,
.search-drop__group--suggest {
    padding: 16px 0;
}

/* Заголовок группы: «История» + «Очистить» */
.search-drop__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 16px;
}

.search-drop__title {
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-grey-800);
}

.search-drop__clear {
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    color: var(--c-grey-500);
    transition: color var(--transition);
}

.search-drop__clear:hover {
    color: var(--c-grey-800);
}

/* --- Строка списка --- */

.search-drop__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 10px 12px;
    transition: background-color var(--transition);
}

/* Ховер строки — Grey 200 (в макете показан на второй строке истории) */
.search-drop__item:hover {
    background-color: var(--c-grey-200);
}

.search-drop__btn {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    text-align: left;
    color: var(--c-grey-800);
}

.search-drop__btn img {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.search-drop__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Крестик «убрать из истории» */
.search-drop__remove {
    display: flex;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    opacity: 0.7;
    transition: opacity var(--transition);
}

.search-drop__remove:hover {
    opacity: 1;
}

.search-drop__remove img {
    width: 100%;
    height: 100%;
}

/* Кнопка «Закрыть» — только мобильная (278:8944) */
.header__search-close {
    display: none;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-red-500);
}

/* --------------------------------------------------------------------------
   Поиск — планшет и мобильный
   -------------------------------------------------------------------------- */

/* На планшете поле и так резиновое, расширять его некуда */
@media (max-width: 1279px) {
    .header__search.is-open {
        width: auto;
    }
}

/* Мобильный режим поиска (278:8337): от шапки остаются поле и «Закрыть»,
   подсказки занимают весь экран под шапкой, затемнения нет */
@media (max-width: 1023px) {
    body.is-search-open .header {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
    }

    /* фон Grey 200 из макета; размытие снимаем — под сплошным фоном оно
       всё равно не видно, зато backdrop-filter создаёт систему координат
       для fixed-потомков и ломает раскрытый список */
    body.is-search-open .header__main {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: var(--c-grey-200);
    }

    body.is-search-open .header__main-inner {
        gap: 16px;
    }

    body.is-search-open .header__logo,
    body.is-search-open .header__burger {
        display: none;
    }

    body.is-search-open .header__search-close {
        display: block;
    }

    .search-overlay {
        display: none;
    }

    .search-drop {
        position: fixed;
        top: 64px;
        right: 0;
        bottom: 0;
        left: 0;
        max-height: none;
        border-radius: 0;
    }
}