/*
   Каталог, версия 2: шапка (заголовок + сортировка) и ряд чипсов брендов.
   Общий класс-обёртка .catalog-filters-v2 на обоих блоках:
     - _catalog_header_v2.html.twig  -> __sort-row (заголовок + сортировка), вверху страницы
     - _catalog_brands_v2.html.twig  -> __brands (чипсы), над верхней пагинацией
*/

.catalog-filters-v2 {
    font-family: Onest, sans-serif;
    margin-bottom: 20px;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

/* ---------- Название категории (слева) + сортировка (справа) ---------- */
/* Заголовок категории слева, переключатель сортировки справа */
.catalog-filters-v2__sort-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    width: 100%;
}

/* заголовок категории = .sf-cat-head h1 (теперь реальный <h1> страницы -
   старый <h1 class="scs-style-vice-versa"> при этом блоке не рендерится).
   flex: 1 - занимает всё свободное место слева, отжимая сортировку вправо.
   Сброс глобального h1 { font-size: 1.4rem } из styles.css. */
.catalog-filters-v2__cat-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    font-variant: all-small-caps;
    color: var(--text-color-primary);
}

/* контейнер = .sc-tabs: белый, 2px кант surface-sunken, скруглён в пилюлю.
   margin-left: auto - гарантирует прижатие к правому краю родителя */
.catalog-filters-v2__sort {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    padding: 0;
    background: #fff;
    outline: 2px solid #F4F4F4;
    border-radius: 25px;
    width: 380px;
    max-width: 100%;
}

/* неактивный таб = .sc-tabs__tab */
.catalog-filters-v2__sort-tab {
    flex: 1;
    border: none;
    background: transparent;
    color: #1a1512;
    border-radius: 25px;
    padding: 9px 24px;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* активный таб - оставляем как есть (акцент проекта) */
.catalog-filters-v2__sort-tab.is-active {
    background: var(--background-color-primary);
    color: var(--text-color-primary);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(84, 68, 61, 0.12);
}

/* ---------- Бренды (ниже сортировки) ---------- */
/* ряд = .sf-chips */
.catalog-filters-v2__brands {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* неактивный чипс = .sf-chip / span из макета:
   surface-sunken пилюля, вторичный тёплый текст, 13px */
.catalog-filters-v2__brand {
    padding: 6px 14px;
    border-radius: 999px;
    /*background: #F4F4F4;*/
    background: #eaeaea;
    color: rgba(26, 21, 18, 0.62);
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms cubic-bezier(0.22, 0.61, 0.36, 1),
                color 150ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ховер = .sf-chip:hover: cream фон, caramel текст */
.catalog-filters-v2__brand:hover {
    background: #FFF5E9;
    color: #9F6831;
}

/* активный чипс - оставляем как есть (акцент проекта) */
.catalog-filters-v2__brand.is-active {
    background: var(--text-color-brown);
    color: #fff;
}

@media (max-width: 575.98px) {
    .catalog-filters-v2__sort-row {
        justify-content: stretch;
    }
    .catalog-filters-v2__sort {
        width: 100%;
    }
    .catalog-filters-v2__sort-tab {
        padding: 9px 12px;
    }
}