.views-align-center {
    text-align: center;
}

/*
 * Круглая кнопка «В корзину» в таблице каталога (иконка — base.css) не
 * трогаем, только добавляем состояние «уже в корзине» (.is-in-cart, ставит
 * cart_add_controller.js после успешного добавления/снимает после удаления):
 * инверсия цвета (белый фон, бордовая рамка/иконка) + замена иконки на
 * «удалить», т.к. повторный клик по этой кнопке убирает товар из корзины.
 *
 * cursor: base.css писался под <a> (у которых указатель "pointer" по
 * умолчанию), но сейчас здесь настоящий <button> — курсор для него
 * по умолчанию "default", явно нигде не задан.
 */
.view-content.row table.views-view-table td.views-field-add-to-cart .basic_cart-get-quantity.button {
    cursor: pointer;
}

.view-content.row table.views-view-table td.views-field-add-to-cart .basic_cart-get-quantity.button.is-in-cart {
    background: #fff url("../../../images/stratec/pages/cart/delete3-576z9oY.png") center center / 18px 18px no-repeat;
    border: 2px solid #820000;
    box-sizing: border-box;
}

.view-content.row table.views-view-table td.views-field-add-to-cart .basic_cart-get-quantity.button.is-in-cart:hover {
    background-color: #fff7f7;
    outline: none;
}

.category-description {
    color: #6b6b6b;
    margin: -8px 0 20px;
}

.category-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.category-left-column {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.category-sidebar,
.category-filters {
    padding: 24px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

/*
 * .views-exposed-form.bef-exposed-form (base.css) сама рисует рамку/паддинг
 * (карточка-в-карточке для мобильной выезжающей панели фильтров) — внутри
 * .category-filters (уже своя карточка) это даёт видимую рамку в рамке.
 */
.category-filters .views-exposed-form.bef-exposed-form {
    border: 0;
    border-radius: 0;
    padding: 0;
}

.category-sidebar__back {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
    color: #111111;
    font-size: 16px;
    text-decoration: none;
}

.category-sidebar__back img {
    width: 20px;
    height: 20px;
}

.category-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.category-sidebar__link {
    color: #111111;
    font-size: 16px;
    text-decoration: none;
}

.category-sidebar__link:hover {
    text-decoration: underline;
}

.category-sidebar__link.is-active {
    color: #98070A;
}

.category-sidebar__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * .bef-checkboxes (base.css) — repeat(auto-fit, minmax(140px, 1fr)): при
 * ширине сайдбара 280px до чекбоксов остаётся ~186px после паддингов
 * .category-sidebar/.view-filters/fieldset — двум колонкам по 140px там
 * никогда не хватит места. Две узкие колонки по 70px, в свою очередь,
 * приемлемы только для коротких значений (коды/числа) — на длинном тексте
 * (category.html.twig помечает такие группы модификатором --compact только
 * когда ни у одной опции значение не длиннее 10 символов) колонки схлопываем
 * обратно в одну, иначе текст переносится по 1-2 буквы в строке.
 */
.view-filters .views-exposed-form.bef-exposed-form .bef-checkboxes {
    grid-template-columns: minmax(0, 1fr);
}

.view-filters .views-exposed-form.bef-exposed-form .bef-checkboxes--compact {
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
}

.checkbox-custom--filter {
    display: flex;
    min-height: 32px;
    gap: 12px;
}

.checkbox-custom--filter .checkbox-custom__box {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
}

.checkbox-custom--filter input:checked + .checkbox-custom__box::after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
}

.checkbox-custom--filter .checkbox-custom__text {
    color: #111111;
    font-size: 15px;
}

/* .attr-badge вынесен в base.css (бейджи теперь и в фильтрах, и в карточке
   товара, а не только в листинге каталога). */

/*
 * .view-conent_and_filters (base.css) резервирует первую колонку грида под
 * мобильную панель фильтров (minmax(280px, 27%) 1fr) — на этой странице
 * фильтры уже вынесены в .category-sidebar снаружи, поэтому внутри
 * .category-results эта колонка всегда пустует, отодвигая таблицу вправо.
 * Колонку не убираем совсем (другие правила base.css адресуют контент через
 * grid-column: 2, вторая колонка обязана существовать), а схлопываем до 0 —
 * ширины при этом больше не резервируется.
 */
.category-results .view-conent_and_filters {
    grid-template-columns: 0 minmax(0, 1fr);
    column-gap: 0;
}

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

.category-results__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.category-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid #d7d7d7;
    border-radius: 20px;
    color: #111111;
    font-size: 13px;
    text-decoration: none;
    background: #f6f5f5;
}

.category-filter-chip:hover {
    border-color: #98070A;
    color: #98070A;
}

.category-results__count {
    color: #747474;
    font-size: 14px;
    margin-left: auto;
}

@media (max-width: 1023px) {
    .category-layout {
        flex-direction: column;
    }

    .category-sidebar {
        flex-basis: auto;
        width: 100%;
        box-sizing: border-box;
    }
}

/*
 * <th> без явного класса выравнивания центрируется браузером по умолчанию,
 * а <td> — прижимается влево: колонки без .views-align-center/left
 * (Наименование, БРЕНД и колонки атрибутов серии) визуально не совпадали
 * с заголовком, хотя границы ячеек были идентичны.
 */
.category-results table.views-view-table td {
    text-align: center;
}

/*
 * `.row` в этой вёрстке — `display: table-row` (см. chrome.css), `.col` —
 * ячейка этой псевдотаблицы. <turbo-frame> — кастомный элемент, который
 * ДОЛЖЕН лежать ВНУТРИ `.table-responsive.col` (а не оборачивать его снаружи
 * как прямой потомок `.row`) — иначе он встраивается прямо в контекст
 * табличной раскладки строки и ломает вычисление ширины ячеек соседних карточек
 * серий. display:contents убирает у самого <turbo-frame> собственный бокс —
 * <table>/<nav>/<button> внутри рендерятся как обычные прямые потомки
 * `.table-responsive.col`, как и до появления фрейма, а Turbo продолжает
 * находить фрейм по id для частичного обновления при пагинации серии.
 */
.series-frame {
    display: contents;
}

/*
 * `.button`/`form-submit` в base.css стилизованы только внутри конкретных
 * контекстов (`.views-exposed-form .form-actions`, `.addtocart-link-class`
 * и т.п.) — универсального базового класса кнопки в теме нет. Кнопка
 * «Показать ещё» лежит вне этих контекстов (внутри карточки серии), поэтому
 * получает стиль отдельно — цвет/радиус взяты из `.views-exposed-form
 * .form-actions .form-submit` (base.css) для единообразия с остальными
 * кнопками страницы.
 */
.series-load-more__btn {
    display: block;
    width: fit-content;
    margin: 12px auto 8px;
    padding: 10px 20px;
    border: 0;
    border-radius: 10px;
    background: #980000;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease;
}

/*
 * Тот же конфликт, что и у `.pager--series[hidden]` выше: собственный
 * `display: block` — авторский стиль, перебивает UA-правило
 * `[hidden] { display: none }`. Без этого кнопка остаётся видимой (причём в
 * :disabled-виде — JS блокирует её перед fetch'ем страницы), когда
 * `series_load_more_controller.js` прячет её на последней странице серии.
 */
.series-load-more__btn[hidden] {
    display: none;
}

.series-load-more__btn:hover {
    background: #7f0000;
}

.series-load-more__btn:disabled {
    background: #c98f8f;
    cursor: not-allowed;
}