/* ============================================================
   Шапка, поиск и хлебные крошки на телефоне.
   Витрина «Китай Детали». Подключается в includes/head.blade.php
   ПОСЛЕ design/style.css — часть правил переопределяет старые.

   Зачем: на iPhone 390×844 до товара уходило ~454 px из ~660 видимых (69%).
   Складывалось из полосы меню (58), отдельной строки логотипа (70), формы
   поиска в три яруса (170), заголовка (60) и крошек в 3–4 строки (96).
   После правок — около 196 px.

   Граница мобильной вёрстки — 767 px (была 450). На 451–600 px старые стили
   показывали слоган, оба телефона и полноразмерный логотип: там до товара
   уходило больше 700 px, то есть первого экрана не оставалось вовсе.
   ============================================================ */

/* ---- Мобильная полоса: меню — логотип — телефон ----
   Всё внутри медиазапроса: выше 1020px полосы нет вовсе, там горизонтальное меню,
   и правило display:flex вернуло бы её на десктоп. */
@media screen and (max-width: 1020px) {

/* Фон белый, а не фирменный красный: логотип наполовину красный («К» и «КИТАЙ»),
   на красном он разваливается. Заодно совпадает с десктопной шапкой, которая
   и так светлая, а красный остаётся акцентом действия — кнопки покупки и цены. */
ul.topnav li.icon.hdr-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 8px;
    background: #fff;
    border-top: 0;
    border-bottom: 2px solid #c00;
}

ul.topnav.responsive li.icon.hdr-bar {
    border-top: 0;
}

/* Кнопки по краям: минимум 44×44 — палец промахивается по меньшим целям. */
ul.topnav li.icon.hdr-bar .hdr-bar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    margin: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #333;
    font-family: 'Play', sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

ul.topnav li.icon.hdr-bar .hdr-bar__btn i {
    font-size: 20px;
    color: #c00;
}

ul.topnav li.icon.hdr-bar .hdr-bar__btn:hover,
ul.topnav li.icon.hdr-bar .hdr-bar__btn:focus-visible {
    background: #f2f2f2;
}

/* Красный фон и рамку старое правило вешает на любую ссылку внутри li.icon —
   для логотипа их снимаем явно. */
ul.topnav li.icon.hdr-bar .hdr-bar__logo {
    display: none; /* включается только на телефоне, см. медиазапрос ниже */
    align-items: center;
    padding: 4px;
    background: transparent;
    border: 0;
}

ul.topnav li.icon.hdr-bar .hdr-bar__logo img {
    display: block;
    height: 34px;
    width: auto;
}

} /* конец @media (max-width: 1020px) */

/* ---- Кнопка поиска ----
   Была <input type="submit">, стала <button> — прежние стили формы к ней уже
   не применяются, поэтому оформление переносим сюда без изменений. */
#searchForm .search-submit {
    width: 180px;
    padding: 5px 10px;
    margin: 0 5px;
    font-family: 'Play', sans-serif;
    font-size: 15px;
    line-height: 30px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    background-color: #900;
    border: 1px solid #900;
    border-radius: 10px;
    cursor: pointer;
}

#searchForm .search-submit:hover,
#searchForm .search-submit:focus-visible {
    background-color: #b00;
}

/* На десктопе кнопка текстовая — иконка не нужна. */
#searchForm .search-submit__icon {
    display: none;
}

/* ---- Телефон (≤767): один ярус вместо трёх ---- */
@media screen and (max-width: 767px) {
    /* Блок «логотип — слоган — телефоны» целиком: логотип теперь в полосе, слоган
       и адреса и раньше скрывались, но пустой контейнер оставлял свои отступы. */
    div.WrapRow.hdr-brand {
        display: none;
    }

    ul.topnav li.icon.hdr-bar .hdr-bar__logo {
        display: inline-flex;
    }

    /* У телефона остаётся только трубка: номер читают скринридеры (aria-label),
       а место отдаётся логотипу. */
    ul.topnav li.icon.hdr-bar .hdr-bar__btn_phone .hdr-bar__btn-text,
    ul.topnav li.icon.hdr-bar .hdr-bar__btn .hdr-bar__btn-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    /* ---- Поиск в одну строку ---- */
    #searchForm form {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 2%;
    }

    #searchForm .formTitle,
    #searchForm .search-hint {
        display: none;
    }

    #searchForm .formField {
        flex: 1 1 auto;
        width: auto;
        margin: 0;
        padding: 0;
        float: none;
        overflow: visible;
    }

    #searchForm .search-ac {
        width: 100%;
        margin: 0;
    }

    #searchForm .formField .search-ac input {
        line-height: 24px;
        padding: 8px 10px 8px 34px;
    }

    #searchForm .formSubmit {
        flex: 0 0 auto;
        width: auto;
        margin: 0;
        padding: 0;
        float: none;
        overflow: visible;
    }

    /* Кнопка — квадрат с лупой: надпись «найти запчасть» съедала треть строки.
       Смысл кнопки читается по иконке, назначение поля — по placeholder. */
    #searchForm .search-submit {
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0;
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    #searchForm .search-submit__text {
        display: none;
    }

    #searchForm .search-submit__icon {
        display: inline-block;
        font-size: 18px;
    }

    /* Декоративная лупа внутри поля убирается: она дублировала бы иконку кнопки,
       а освободившийся отступ отдаётся тексту запроса. */
    #searchForm .search-ac__icon {
        display: none;
    }

    #searchForm .formField .search-ac input {
        padding-left: 12px;
    }

    /* ---- Заголовок страницы: те же 18px, но вдвое меньше воздуха ---- */
    .WrapRow h1.formTitle {
        padding: 6px 0;
        line-height: 24px;
    }

    /* ---- Крошки: одна строка с прокруткой ---- */
    .sel-path {
        padding: 6px 8px;
    }

    /* Цепочка не переносится, а прокручивается — так она целиком доступна
       и занимает одну строку вместо трёх-четырёх. */
    .sel-path .breadcrumb {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .sel-path .breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .sel-path .breadcrumb li {
        flex: 0 0 auto;
    }

    .sel-path__item {
        padding-right: 1.4rem;
        white-space: nowrap;
    }

    .sel-path__item:after {
        right: 5px;
    }

    /* «Каталог запчастей» → иконка дома. Текст остаётся в разметке для schema.org. */
    .sel-path__item_home .sel-path__home-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .sel-path__item_home .sel-path__home-icon {
        display: inline-block;
        font-size: 15px;
    }

    .sel-path__back {
        display: none;
    }
}

/* Иконка дома нужна только на телефоне: на десктопе крошка остаётся текстом. */
@media screen and (min-width: 768px) {
    .sel-path__home-icon {
        display: none;
    }
}