/* ========================================================= 
   БАЗА / ПЕРЕМЕННЫЕ
========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --Base-Gray_02: #CDCDCD;
    --Base-Black: #000;
    --Base-White: #fff;
    --Text-Muted: #929292;
    --Text-Primary: #000;

    --font-body: 'Roboto', sans-serif;

    --tile-h: 48px;
    --btn-icon: 48px;
    --btn-new: 67px;
    --btn-cat: 103px;

    --menu-w: 1420px;
    --menu-h: 49px;

    --gutter-inline: 20px;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
    background-color: #f2f2f2;
}

/* Фикс «микросдвига», без левого резерва полосы */
html {
    scrollbar-gutter: stable;
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

[hidden] {
    display: none !important;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.site-header,
.site-header * {
    font-family: var(--font-body);
}

/* =========================================================
   КАРКАС ХЕДЕРА
========================================================= */
.site-header {
    position: relative;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
}

.site-header .container {
    max-width: none;
    margin: 0;
    position: relative;
    padding-inline: var(--gutter-inline);
}

/* Трек */
.header-bar {
    position: relative;
    width: 100%;
    max-width: var(--menu-w);
    height: var(--menu-h);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "left logo actions";
    align-items: center;
    justify-items: stretch;
    gap: 0;

    background: transparent;
    border: 1px solid var(--Base-Gray_02);
    overflow: visible;
    /* Изменено для выпирающего логотипа */
    z-index: 1501;
}

@media (min-width:1720px) {
    .header-bar {
        max-width: var(--menu-w);
    }
}

.header-left {
    grid-area: left;
    display: flex;
    height: 100%;
    position: relative;
    justify-self: start;
    align-items: stretch;
}

.header-actions {
    grid-area: actions;
    display: flex;
    height: 100%;
    align-items: stretch;
    justify-self: end;
}

/* ОСНОВНЫЕ ИЗМЕНЕНИЯ ДЛЯ ВЫПИРАЮЩЕГО ЛОГОТИПА */
.header-logo {
    grid-area: logo;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    justify-self: center;
    position: relative;
    z-index: 2500;
}

.logo-link,
.custom-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--tile-h) + 20px);
    padding: 0 20px;
    text-decoration: none;
    line-height: 1;
    position: relative;
    z-index: 2501;
    background: transparent !important;
    border: none !important;
}

.custom-logo-link img,
.custom-logo {
    height: 56px;
    width: auto;
    display: block;
    margin: 0;
    object-fit: contain;
    position: relative;
    z-index: 2502;
}

/* Убираем все фоны и границы для логотипа */
body.home .logo-link,
body.front-page .logo-link,
body.home .custom-logo-link,
body.front-page .custom-logo-link,
body:not(.home):not(.front-page) .logo-link,
body:not(.home):not(.front-page) .custom-logo-link {
    background: transparent !important;
    border: none !important;
}

/* =========================================================
   ЭЛЕМЕНТЫ
========================================================= */
.tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--tile-h);
    padding: 16px;
    gap: 4px;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: background .3s, color .3s, opacity .3s, transform .08s, border-color .3s;
    border-left: 1px solid var(--Base-Gray_02);
    border-right: 1px solid var(--Base-Gray_02);
    border-top: 0;
    border-bottom: 0;
    position: relative;
    z-index: 1502;
}

.header-left .tile:first-child {
    border-left: 0;
}

.header-actions .tile:last-child {
    border-right: 0;
}

.tile:hover,
.tile:active,
.tile--active {
    background: #000;
    color: #fff;
    border-left-color: var(--Base-Gray_02);
    border-right-color: var(--Base-Gray_02);
}

.tile:focus-visible {
    outline: none;
}

.header-left .tile+.tile,
.header-actions .tile+.tile {
    border-left: 0;
}

.tile--icon {
    width: var(--btn-icon);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tile--new {
    width: var(--btn-new);
    padding: 0 16px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    text-transform: uppercase;
}

.tile--catalog {
    width: var(--btn-cat);
    padding: 0 16px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
}

.tile-cart {
    position: relative;
}

/* Иконки */
.site-header .tile img.ico,
.site-header .tile img.ico-alt {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}

.site-header .tile img.ico {
    display: inline-block;
}

.site-header .tile img.ico-alt {
    display: none;
}

/* Мобильные иконки */
.m-item img,
.m-item svg {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* =========================================================
   СЧЁТЧИКИ КОРЗИНЫ / ИЗБРАННОГО
========================================================= */

/* контейнеры с количеством: расширяем плитку,
   одинаково на главной и внутренних страницах */
.site-header .header-actions .tile--icon.tile--with-count {
    width: 68px;
    height: 48px;
    padding: 16px;
    gap: 4px;
    justify-content: flex-start;
    /* иконка слева, счётчик справа */
}

/* мобилка: те же размеры, если на .m-item повешен tile--with-count */
@media (max-width: 768px) {
    .m-item.tile--with-count {
        width: 68px;
        height: 48px;
        justify-content: flex-start;
    }
}

/* зелёный квадратик */
.header-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 16px;
    background: var(--Accent-Chartreuse, #7FFF00);
    border-radius: 1px;
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    color: #000000;
    margin-left: 4px;
}

.header-counter__value {
    display: inline-block;
    width: 16px;
    text-align: center;
}

.header-counter.is-empty {
    display: none;
}

/* =========================================================
   ВЫПАДАЮЩЕЕ МЕНЮ ПОД ГАМБУРГЕРОМ
========================================================= */
.nav-dropdown {
    position: absolute;
    left: -1px;
    top: calc(100% - 1px);
    margin-top: 0;
    z-index: 2000;
    display: none;

    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    max-height: calc(100vh - 160px);
    overflow: auto;
}

/* показать дропдаун и разрешить выходить за пределы трека */
#nav-toggle:checked~.container .header-bar {
    overflow: visible !important;
}

#nav-toggle:checked~.container .header-bar .nav-dropdown {
    display: block !important;
}

/* Списки */
.nav-dropdown .menu,
.nav-dropdown .menu>li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* НЕТ вертикального зазора, и бордеры не «толстеют»: схлопываем на -1px */
.nav-dropdown .menu>li+li {
    margin-top: -1px;
}

/* Пункты меню — типографика по ТЗ */
.nav-dropdown .menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 218px;
    height: 48px;
    padding: 16px;
    gap: 4px;
    border: 1px solid var(--Base-Gray_02);
    text-decoration: none;

    font-family: Body, var(--font-body), sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    leading-trim: none;
    line-height: 100%;
    letter-spacing: 0px;
    text-align: center;
    text-transform: uppercase;

    background: transparent;
    color: var(--Base-Black);
    transition: background .2s, color .2s, border-color .2s;
    white-space: nowrap;
    position: relative;
    z-index: 2001;
}

/* префикс >>> */
.nav-dropdown .menu a::before {
    content: ">>> ";
    display: inline-block;
    margin-right: 4px;
    line-height: 1;
}

/* Ховеры по умолчанию (светлый вариант) */
.nav-dropdown .menu a:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* Контрастный фон всего дропдауна по страницам */
body.home .nav-dropdown,
body.front-page .nav-dropdown {
    background: #fff;
}

body:not(.home):not(.front-page) .nav-dropdown {
    background: #000;
}

/* Адаптация цветов пунктов под фон дропдауна */
body.home .nav-dropdown .menu a,
body.front-page .nav-dropdown .menu a {
    color: #000;
    border-color: var(--Base-Gray_02);
}

body.home .nav-dropdown .menu a:hover,
body.front-page .nav-dropdown .menu a:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

body:not(.home):not(.front-page) .nav-dropdown .menu a {
    color: #fff;
    border-color: var(--Base-Gray_02);
}

body:not(.home):not(.front-page) .nav-dropdown .menu a:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

/* Бекдроп: закрытие кликом вне меню */
.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: none;
    background: transparent;
}

#nav-toggle:checked~.nav-backdrop {
    display: block;
}

/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ ≤768px (HEADER)
========================================================= */
.m-item {
    display: none;
}

.header-logo.m-logo {
    display: none;
}

@media (max-width: 768px) {
    :root {
        --gutter-inline: 10px;
    }

    /* Скрываем десктопные элементы */
    .header-left,
    .header-actions,
    .header-logo:not(.m-logo) {
        display: none !important;
    }

    /* Основная сетка для мобилки:
       1: гамбургер
       2: поиск
       3: логотип
       4: профиль
       5: корзина
    */
    .header-bar {
        width: 100%;
        max-width: none;
        margin: 20px 0 0;
        display: grid;
        grid-template-columns: 48px 48px 1fr 48px 48px;
        grid-template-rows: 48px;
        align-items: center;
        border-top: 1px solid var(--Base-Gray_02);
        border-bottom: 1px solid var(--Base-Gray_02);
        position: relative;
        overflow: visible;
    }

    /* Базовый вид мобильных кнопок */
    .m-item {
        display: flex !important;
        width: 48px;
        height: 48px;
        align-items: center;
        justify-content: center;
        background: transparent;
        position: relative;
        z-index: 1502;
        transition: background .2s;
        border: none !important;
    }

    .m-burger {
        grid-column: 1;
    }

    .m-search {
        grid-column: 2;
    }

    .header-logo.m-logo {
        grid-column: 3;
        position: relative;
        height: 100%;
        z-index: 2500;
        pointer-events: none;
        display: flex !important;
    }

    .m-profile {
        grid-column: 4;
    }

    .m-cart {
        grid-column: 5;
    }

    /* Размер иконок */
    .m-item img,
    .m-item svg {
        width: 20px;
        height: 20px;
    }

    /* ──────── Вертикальные разделители ──────── */
    /* 1. Между бургером и поиском */
    .header-bar::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 48px;
        width: 1px;
        background: var(--Base-Gray_02);
    }

    /* 2. Между поиском и логотипом */
    .header-bar::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 96px;
        /* 48 + 48 */
        width: 1px;
        background: var(--Base-Gray_02);
    }

    /* 3. Линии слева от профиля и корзины */
    .header-bar>.m-profile::before,
    .header-bar>.m-cart::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 1px;
        background: var(--Base-Gray_02);
        z-index: 1;
    }

    /* Логотип по центру в своей колонке */
    .header-logo.m-logo .logo-link {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: all;
        background: transparent !important;
    }

    .header-logo.m-logo .custom-logo {
        width: 80px !important;
        height: 32px !important;
        object-fit: contain;
        display: block;
    }

    .nav-dropdown {
        left: 0;
        right: 0;
        width: 100%;
        top: calc(100% - 1px);
    }

    .nav-dropdown .menu a {
        width: 100%;
        box-sizing: border-box;
    }

    .tile:hover,
    .tile:active,
    .tile--active {
        transform: none !important;
    }

    /* Фикс логотипа под Woo / мобайл */
    html body.woocommerce .header-logo.m-logo a.logo-link img.custom-logo,
    html body.woocommerce-shop .header-logo.m-logo a.logo-link img.custom-logo,
    html body.woocommerce-page .header-logo.m-logo a.logo-link img.custom-logo,
    html body.is-mobile .header-logo.m-logo a.logo-link img.custom-logo,
    .header-logo.m-logo .custom-logo {
        width: 80px !important;
        height: 32px !important;
        max-width: none !important;
        object-fit: contain !important;
    }
}

/* =========================================================
   ПЛАНШЕТ 769–1024px
========================================================= */
@media (min-width:769px) and (max-width:1024px) {
    :root {
        --gutter-inline: 20px;
    }

    .header-left,
    .header-actions,
    .header-logo {
        display: flex !important;
    }

    .m-item,
    .header-logo.m-logo {
        display: none !important;
    }

    .header-bar {
        width: 100%;
        max-width: var(--menu-w);
        margin: 40px auto 0;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas: "left logo actions";
    }
}

/* =========================================================
   ДЕСКТОП ≥1025px
========================================================= */
@media (min-width:1025px) {
    :root {
        --gutter-inline: 20px;
    }

    .header-left,
    .header-actions,
    .header-logo {
        display: flex !important;
    }

    .m-item,
    .header-logo.m-logo {
        display: none !important;
    }

    .header-bar {
        width: 100%;
        max-width: var(--menu-w);
        margin: 40px auto 0;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas: "left logo actions";
    }
}

/* =========================================================
   ИНВЕРСИИ ДЛЯ КНОПОК/ИКОНКИ
========================================================= */
body.home .site-header .tile,
body.front-page .site-header .tile {
    color: #fff;
    background: transparent;
}

body.home .site-header .tile img.ico,
body.front-page .site-header .tile img.ico {
    display: none;
}

body.home .site-header .tile img.ico-alt,
body.front-page .site-header .tile img.ico-alt {
    display: inline-block;
}

body.home .site-header .tile:hover,
body.front-page .site-header .tile:hover {
    background: #fff !important;
    color: #000 !important;
    border-left-color: var(--Base-Gray_02);
    border-right-color: var(--Base-Gray_02);
}

body.home .site-header .tile:hover img.ico,
body.front-page .site-header .tile:hover img.ico {
    display: inline-block;
}

body.home .site-header .tile:hover img.ico-alt,
body.front-page .site-header .tile:hover img.ico-alt {
    display: none;
}

body.home .site-header .tile--active,
body.front-page .site-header .tile--active {
    background: #fff !important;
    color: #000 !important;
}

/* Внутренние страницы */
body:not(.home):not(.front-page) .site-header .tile {
    color: #000;
    background: transparent;
}

body:not(.home):not(.front-page) .site-header .tile img.ico {
    display: inline-block;
}

body:not(.home):not(.front-page) .site-header .tile img.ico-alt {
    display: none;
}

body:not(.home):not(.front-page) .site-header .tile:hover {
    background: #000 !important;
    color: #fff !important;
    border-left-color: var(--Base-Gray_02);
    border-right-color: var(--Base-Gray_02);
}

body:not(.home):not(.front-page) .site-header .tile:hover img.ico {
    display: none;
}

body:not(.home):not(.front-page) .site-header .tile:hover img.ico-alt {
    display: inline-block;
}

body:not(.home):not(.front-page) .site-header .tile--active {
    background: #000 !important;
    color: #fff !important;
}

/* =========================================================
   ПРОЧИЕ ФИКСЫ
========================================================= */
.header-left,
.header-actions {
    flex-shrink: 1;
    min-width: 0;
}

.tile {
    flex-shrink: 0;
}

.m-item.m-burger:active {
    transform: none;
}

.logo-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.logo-link .custom-logo {
    transition: opacity 0.3s ease;
}

.logo-link .ico-alt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Главная страница - светлый логотип */
body.home .logo-link .ico,
body.front-page .logo-link .ico {
    opacity: 1;
}

body.home .logo-link .ico-alt,
body.front-page .logo-link .ico-alt {
    opacity: 0;
}

/* Все остальные страницы - темный логотип */
body:not(.home):not(.front-page) .logo-link .ico {
    opacity: 0;
}

body:not(.home):not(.front-page) .logo-link .ico-alt {
    opacity: 1;
}

/* =========================================================
   ПАНЕЛЬ ПОИСКА В ХЕДЕРЕ (БАЗА, ДЕСКТОП)
========================================================= */

.site-header .search-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #FFFFFF;
    z-index: 3000;
    display: none;
    overflow-y: auto;
}

/* при включённом чекбоксе показываем панель и скрываем трек */
#search-toggle:checked~.search-panel {
    display: block;
}

#search-toggle:checked~.container .header-bar {
    display: none;
}

/* Верхняя строка поиска – как на макете (десктоп/таблет) */
.site-header .search-bar-container {
    position: absolute;
    max-width: 1420px;
    width: calc(100% - 500px);
    height: 48px;
    top: 40px;
    left: 250px;
    display: flex;
    align-items: stretch;
    gap: 10px;
    opacity: 1;
}

.site-header .search-form {
    display: flex;
    flex: 1;
    align-items: stretch;
}

.site-header .search-input-wrapper {
    position: relative;
    flex: 1;
    height: 48px;
}

.site-header .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
}

.site-header .search-field {
    width: 100%;
    height: 100%;
    padding: 0 16px 0 40px;
    border: 1px solid var(--Base-Gray_02);
    font-family: var(--font-body);
    font-size: 16px;
    box-sizing: border-box;
    background: #FFFFFF;
}

.site-header .search-submit {
    width: 119px;
    height: 48px;
    padding: 16px 32px;
    border: 1px solid #000000;
    background: #000000;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
}

.site-header .search-close {
    width: 138px;
    height: 48px;
    border: 1px solid var(--Base-Gray_02);
    background: transparent;
    color: #000000;
    font-family: var(--font-body);
    font-size: 16px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Блок с популярными запросами и товарами */
.site-header .search-suggestions {
    position: absolute;
    max-width: 1420px;
    width: calc(100% - 500px);
    min-height: 338px;
    top: 128px;
    left: 250px;
    display: flex;
    gap: 20px;
    opacity: 1;
}

.site-header .popular-queries {
    width: 335px;
    min-height: 338px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.site-header .popular-queries h3 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    text-transform: uppercase;
}

.site-header .popular-queries ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.site-header .popular-queries a {
    text-decoration: underline;
    color: #000;
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0;
}

.site-header .popular-products {
    flex: 1;
    min-height: 684px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.site-header .popular-products h3 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    text-transform: uppercase;
}

.site-header .products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.site-header .product-card {
    background: #666666;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}

.site-header .product-card img {
    width: 100%;
    height: auto;
}

.site-header .product-card .product-name {
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0;
    color: #000;
}

.site-header .product-card .product-price {
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0;
    color: #000;
}

/* Низ панели – "Смотреть все результаты" */
.site-header .view-all-results {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 48px;
    background: #000000;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0;
    text-transform: uppercase;
}

/* Блок "нет результатов" */
.site-header .no-results {
    position: absolute;
    max-width: 820px;
    width: calc(100% - 500px);
    height: 68px;
    top: 128px;
    left: 250px;
    display: none;
    /* JS включает */
    flex-direction: column;
    gap: 20px;
    border-bottom: 1px solid #000;
}

.site-header .no-results h2 {
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0;
}

.site-header .no-results p {
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0;
    margin: 0;
}

/* =========================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ ПАНЕЛИ ПОИСКА ≤ 768px
   (инпут 100%, под ним две кнопки 50/50)
========================================================= */
@media (max-width: 768px) {

    .site-header .search-bar-container,
    .site-header .search-suggestions,
    .site-header .no-results {
        left: 0;
        width: 100%;
        padding: 0 var(--gutter-inline);
        box-sizing: border-box;
    }

    /* GRID:
       1 ряд — инпут (100%)
       2 ряд — две кнопки (50/50)
    */
    .site-header .search-bar-container {
        top: 40px;
        left: 0;
        width: 100%;
        height: auto;
        position: absolute;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 48px;
        grid-template-areas:
            "input input"
            "submit close";
        column-gap: 10px;
        row-gap: 10px;
    }

    .site-header .search-form {
        display: contents;
    }

    .site-header .search-input-wrapper {
        grid-area: input;
        width: 100%;
        height: 48px;
        margin: 0;
    }

    .site-header .search-field {
        width: 100%;
        height: 100%;
    }

    .site-header .search-submit {
        grid-area: submit;
        width: 100%;
        height: 48px;
        padding: 16px 0;
    }

    .site-header .search-close {
        grid-area: close;
        width: 100%;
        height: 48px;
    }

    .site-header .search-suggestions {
        top: 128px;
        left: 0;
        width: 100%;
        flex-direction: column;
    }

    .site-header .popular-queries {
        width: 100%;
        margin-top: 35px;
    }

    .site-header .popular-products {
        display: none;
    }

    .site-header .no-results {
        left: 0;
        width: 100%;
    }
}

/* =========================================================
   ВЕРХНЯЯ БЕГУЩАЯ ПОЛОСА ДОСТАВКИ
========================================================= */
.top-shipping-bar {
    width: 100%;
    height: 20px;
    background: #000;
    color: #fff;
    overflow: hidden;

    display: flex;
    align-items: center;

    font-family: var(--font-body, 'Roboto', sans-serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    text-transform: uppercase;
}

.top-shipping-bar__inner {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: shipping-marquee 25s linear infinite;
}

/* Отступы между кусками текста */
.top-shipping-bar__inner span {
    padding: 0 10px;
}

/* Бесконечная прокрутка:
   трек продублирован JS-ом,
   поэтому двигаем его на половину ширины */
@keyframes shipping-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* На мобилке уменьшаем высоту и размер шрифта */
@media (max-width: 900px) {

    body {
        margin: 0;
        padding: 0;
    }

    .top-shipping-bar {
        margin: 0;
        padding: 0;
    }

    .site-header {
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none;
    }

    .header-wrapper {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .site-header::before {
        display: none;
    }
}

/* По умолчанию показываем только десктоп меню */
.menu-mobile {
    display: none !important;
}

.menu-desktop {
    display: block !important;
}

/* На мобильных — наоборот */
@media (max-width: 768px) {
    .menu-desktop {
        display: none !important;
    }

    .menu-mobile {
        display: block !important;
    }
}

/* === МОБИЛЬНЫЙ СЧЁТЧИК КОРЗИНЫ — ВЫРОВНЕННЫЙ === */
@media (max-width: 768px) {

    .tile.m-item.m-cart {
        position: relative;
        min-width: 40px;
        /* чтобы ничего не съезжало */
    }

    .tile.m-item.m-cart .header-counter {
        position: absolute;
        top: 18px;
        /* подняли выше */
        right: 22px;
        /* чуть выдвинули вправо */
        transform: none;
        z-index: 20;
        width: 13px;
        height: 12px;
    }

    .tile.m-item.m-cart .header-counter__value {
        font-size: 9px;
        line-height: 16px;
        /* центрирование по вертикали */
    }
}