/**
 * Тулбар каталога магазина (shop_info_filter_ajax.twig) — "Все товары N",
 * поиск и кнопка "Фильтр". Правки только для мобильной/планшетной ширины
 * (совпадает с брейкпоинтом, на котором .filter_button вообще становится
 * видимой — она скрыта на десктопе, там вместо неё всегда открыт сайдбар
 * #column-left). На десктопе .shop-toolbar остаётся пустой прозрачной
 * обёрткой без единого своего правила — верстка и стили там не меняются.
 *
 * Раньше это были три визуально независимых блока с большими отступами:
 * заголовок, отдельная серая плашка поиска, отдельная большая
 * полноширинная кнопка "Фильтр" с текстом. Теперь на мобильном это один
 * компактный белый блок (.shop-toolbar): заголовок сверху, а поиск и
 * фильтр — один общий тулбар-поле, фильтр — просто иконка справа от
 * поиска, а не отдельная строка.
 */
/* Крестик очистки поиска — рядом с полем ввода на любой ширине (в том
   числе легаси-раскладка поиска на десктопе, которую этот файл иначе не
   трогает). Появляется/прячется через JS (tepsey.js) — по мере ввода и
   сразу после поиска, если запрос уже есть в URL (value="{{search_value}}"). */
.manufacturer-page .shop-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: var(--gray-200);
    color: var(--gray-600);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .1s ease;
}

.manufacturer-page .shop-search-clear[hidden] {
    display: none;
}

.manufacturer-page .shop-search-clear:hover {
    background: var(--gray-300);
    color: var(--navy);
}

.manufacturer-page .shop-search-clear:active {
    transform: scale(.92);
}

.manufacturer-page .shop-search-clear svg {
    display: block;
}

@media (max-width: 1023px) {
    .manufacturer-page .shop-toolbar {
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: 16px;
        padding: 14px 14px 12px;
        margin: 16px 0 20px;
    }

    .manufacturer-page .shop-products-header {
        margin: 0 0 10px;
    }

    .manufacturer-page .shop-products-header__title {
        font-size: 16px;
    }

    .manufacturer-page .shop-products-header__label {
        font-size: 13px;
    }

    .manufacturer-page .shop-products-header__wrapper {
        margin: 0;
    }

    /* Нативный select — для десктопа (≥1024). Класс hidden-xs прячет его
       только <768px, поэтому на планшете 768–1023 он оставался рядом с
       иконкой .shop-sort-mobile. Прячем на том же брейкпоинте, что
       компактный тулбар и .filter_button. */
    .manufacturer-page .shop-products-header__wrapper__sort {
        display: none;
    }

    /* Единое поле — поиск + разделитель + иконка фильтра внутри одной
       серой пилюли, вместо инпута с плашкой + отдельной большой кнопки
       под ней. */
    .manufacturer-page .shop-products-header__wrapper__search {
        background: var(--gray-50);
        border-radius: 12px;
        height: 44px;
        padding: 0 4px 0 14px;
        flex: 1;
        min-width: 0;
    }

    .manufacturer-page .shop-search {
        flex: 1;
        width: 0;
        min-width: 0;
        font-size: 14px;
    }

    .manufacturer-page .shop-btn-search {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        border-radius: 50%;
        color: var(--gray-500);
        opacity: 1;
        transition: background-color .15s ease;
    }

    .manufacturer-page .shop-btn-search:active {
        background: var(--gray-200);
    }

    .manufacturer-page .shop-btn-search svg {
        display: block;
    }

    /* В компактной пилюле — тот же размер тап-таргета, что у лупы. */
    .manufacturer-page .shop-search-clear {
        width: 34px;
        height: 34px;
    }

    .manufacturer-page .shop-search-divider {
        display: block;
        width: 1px;
        height: 22px;
        margin: 0 2px;
        background: var(--gray-200);
        flex-shrink: 0;
    }

    /* .filter_button раньше была большой отдельной строкой (padding:15px 0,
       своя рамка, margin-bottom:20px, текст "Фильтр") — здесь она
       превращается в компактную круглую иконку внутри поля поиска,
       поэтому легаси-паддинги/рамку/отступ сбрасываем. */
    .manufacturer-page .shop-products-header__wrapper__search .filter_button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 50%;
        background: transparent;
        color: var(--blue);
        column-gap: 0;
        transition: background-color .15s ease;
    }

    .manufacturer-page .shop-products-header__wrapper__search .filter_button:active {
        background: rgba(33, 70, 125, .1);
    }

    /* Активное состояние — когда шторка с фильтрами открыта (класс active
       навешивает существующий JS в common.min.js). */
    .manufacturer-page .shop-products-header__wrapper__search .filter_button.active {
        background: rgba(33, 70, 125, .12);
    }

    .manufacturer-page .shop-products-header__wrapper__search .filter_button svg {
        display: block;
    }
}

/* ===== Сортировка на мобильном/планшете (≤1023px) — на десктопе остаётся
   нативный select (.shop-products-header__wrapper__sort). Select прячется
   в медиаquery выше, иконка-кнопка в том же поле поиска открывает
   компактное меню вариантов. */
.manufacturer-page .shop-sort-mobile {
    display: none;
}

@media (max-width: 1023px) {
    .manufacturer-page .shop-sort-mobile {
        display: block;
        position: relative;
        flex-shrink: 0;
    }

    .manufacturer-page .shop-sort-mobile__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--blue);
        cursor: pointer;
        transition: background-color .15s ease;
    }

    .manufacturer-page .shop-sort-mobile__btn:active,
    .manufacturer-page .shop-sort-mobile__btn.is-open {
        background: rgba(33, 70, 125, .1);
    }

    .manufacturer-page .shop-sort-mobile__btn svg {
        display: block;
    }

    .manufacturer-page .shop-sort-mobile__menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        min-width: 210px;
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: 14px;
        box-shadow: 0 8px 40px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .06);
        padding: 6px;
        z-index: 50;
    }

    .manufacturer-page .shop-sort-mobile__menu[hidden] {
        display: none;
    }

    .manufacturer-page .shop-sort-mobile__item {
        display: block;
        padding: 10px 12px;
        border-radius: 10px;
        font-family: var(--font-roboto);
        font-size: 14px;
        line-height: 1.3;
        color: var(--gray-800);
        text-decoration: none;
        white-space: nowrap;
    }

    .manufacturer-page .shop-sort-mobile__item:active {
        background: var(--gray-100);
    }

    .manufacturer-page .shop-sort-mobile__item.is-active {
        color: var(--blue);
        font-weight: 600;
        background: rgba(33, 70, 125, .07);
    }
}