.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-filters .catalog-filter-groups__divider {
    margin: 32px 0 20px;
    border-top: 1px solid #d9d9d9;
}

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

/* Блоки дочерних категорий по группам pim: занимают место прежней сетки карточек.
   Колонка навигации (по содержимому) появляется только когда есть .group-nav (≥ 2 групп). */
.production-groups-layout {
    --group-nav-top: 24px;
    --group-nav-accent: #98070A;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 16px;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.production-groups-layout:has(.group-nav) {
    grid-template-columns: minmax(0, 1fr) auto;
}

.production-groups {
    min-width: 0;
}

.production-group-title {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    scroll-margin-top: 120px;
}

.group-nav {
    position: sticky;
    top: var(--group-nav-top);
    align-self: start;
    z-index: 100;
    box-sizing: border-box;
    min-width: 48px;
    max-width: 220px;
    max-height: calc(100vh - var(--group-nav-top) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.group-nav__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid #e0e0e0;
}

.group-nav__link {
    display: block;
    padding: 4px 8px;
    margin-left: -1px;
    border-left: 3px solid transparent;
    color: #111111;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    overflow-wrap: break-word;
}

.group-nav__link:hover {
    color: var(--group-nav-accent);
}

.group-nav__link.is-active {
    border-left-color: var(--group-nav-accent);
    color: var(--group-nav-accent);
}

.group-nav__link:focus {
    outline: none;
}

.group-nav__link:focus-visible {
    outline: 2px solid var(--group-nav-accent);
    outline-offset: -2px;
}

.production-groups .production-items-wrapper + .production-group-title,
.production-groups .production-items-wrapper + .production-items-wrapper {
    margin-top: 32px;
}

.production-groups .production-items-h2 {
    height: auto;
    overflow: visible;
}

.production-groups .production-items-h2 h2 {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

@media (max-width: 767px) {
    .production-group-title {
        margin-bottom: 10px;
        font-size: 18px;
    }

    .production-groups .production-items-h2 h2 {
        font-size: 14px;
    }
}

.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__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: #111111;
    font: inherit;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
}

.category-sidebar__toggle:hover {
    color: #98070A;
}

.category-sidebar__chevron {
    flex: none;
    width: 8px;
    height: 8px;
    margin: 0 4px 3px 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease, margin 0.2s ease;
}

.category-sidebar__toggle[aria-expanded="true"] .category-sidebar__chevron {
    margin-bottom: 0;
    transform: rotate(-135deg);
}

.category-sidebar__toggle[aria-expanded="true"] + .category-sidebar__nav {
    margin-top: 16px;
}

.category-sidebar__nav[hidden] {
    display: none;
}

.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;
}

/* Локальный поиск обычных свойств фильтра. Бренд и «В наличии» используют
   отдельную старую разметку и этими правилами не затрагиваются. */
.category-filters .catalog-filter-groups {
    display: flex;
    flex-direction: column;
}

.category-filters .filter-group {
    margin: 0 0 28px;
    padding: 0;
    border: 0;
}

.category-filters .filter-group__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    color: #2f2f2f;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    list-style: none;
}

.category-filters .filter-group__summary::-webkit-details-marker {
    display: none;
}

.category-filters .filter-group__summary::before {
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    content: "";
    transform: rotate(45deg);
    transition: transform .15s ease;
}

.category-filters .filter-group:not([open]) .filter-group__summary::before {
    transform: rotate(225deg);
}

.category-filters .views-exposed-form.bef-exposed-form .filter-group__body {
    max-height: none;
    overflow: visible;
    padding: 0;
}

.category-filters .filter-group__search {
    display: block;
    width: 100%;
    height: 40px;
    margin: 0 0 14px;
    padding: 0 12px;
    border: 1px solid #ccd5df;
    border-radius: 8px;
    box-sizing: border-box;
    color: #2f2f2f;
    background: #fff;
    font: inherit;
    font-size: 14px;
}

.category-filters .filter-group__search:focus {
    border-color: #7d9bb8;
    outline: 2px solid rgba(125, 155, 184, .2);
    outline-offset: 0;
}

.category-filters .views-exposed-form.bef-exposed-form .filter-group .bef-checkboxes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 4px;
}

.category-filters .filter-group .filter-option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 32px;
    margin: 0 !important;
}

.category-filters .filter-group .filter-option[hidden],
.category-filters .filter-group__empty[hidden] {
    display: none;
}

.category-filters .filter-group .filter-option .checkbox-custom__box {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
}

.category-filters .filter-group .filter-option input:checked + .checkbox-custom__box::after {
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
}

.category-filters .filter-group .filter-option .checkbox-custom__text {
    color: #111;
    font-size: 15px;
    line-height: 1.35;
}

.category-filters .filter-group__empty {
    margin: 8px 0 0;
    color: #747474;
    font-size: 14px;
}

@media (min-width: 1024px) {
    /* На desktop общий reset возвращается в прежнем виде и фиксируется у
       нижнего края viewport. Кнопка «Показать» остаётся только в mobile
       drawer. */
    .category-filters .mobile-catalog-filter-actions.submit-filter {
        position: fixed;
        z-index: 1000;
        /* Позиция вычисляется от реальной desktop-колонки фильтров. */
        left: var(--catalog-filter-actions-left, 40px);
        bottom: 16px;
        display: block !important;
        width: min(280px, var(--catalog-filter-actions-width, calc(100vw - 32px)));
        box-sizing: border-box;
        margin: 0;
        padding: 12px 16px 16px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 4px 18px rgba(0, 0, 0, .16);
    }

    .category-filters .mobile-catalog-filter-actions.submit-filter .form-submit {
        display: none !important;
    }

    .category-filters .mobile-catalog-filter-actions.submit-filter .form-reset {
        display: block !important;
        width: 100%;
    }

    .category-filters [data-catalog-filter-group] > .filter-group__reset {
        display: block;
        margin: 12px 0 0 auto;
        padding: 0 0 2px;
        border: 0;
        border-bottom: 1px dashed currentColor;
        color: #c52222;
        background: transparent;
        font: inherit;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.2;
        cursor: pointer;
    }

    .category-filters [data-catalog-filter-group] > .filter-group__reset[hidden] {
        display: none !important;
    }

    /* Ссылка общего сброса из мобильной панели не должна дублироваться
       сверху на desktop: здесь используется фиксированная кнопка внизу. */
    .category-results .view-conent_and_filters.mobile-catalog-layout .mobile-catalog-toolbar__reset {
        display: none !important;
    }
}

/* .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;
}

.mobile-catalog-filters__header,
.mobile-catalog-filters-backdrop {
    display: none;
}

@media (max-width: 1023px) {
    .category-results .view-conent_and_filters.mobile-catalog-layout {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .category-results .view-conent_and_filters.mobile-catalog-layout > * {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 7px !important;
        padding: 0 !important;
    }

    .category-results .view-conent_and_filters.mobile-catalog-layout .mobile-catalog-toolbar {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 0 16px !important;
        padding: 12px 24px !important;
        background: #fff;
        border-radius: 0;
    }

    .category-results .view-conent_and_filters.mobile-catalog-layout .mobile-catalog-toolbar__btn {
        display: inline-flex !important;
        align-items: center;
        gap: 10px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #1f1f1f;
        font-size: 15px;
        line-height: 1.2;
        font-weight: 400;
        cursor: pointer;
    }

    .category-results .view-conent_and_filters.mobile-catalog-layout .mobile-catalog-toolbar__btn--filter {
        gap: 8px;
        padding: 8px 10px !important;
        border-radius: 999px;
        background: #f4f4f4;
    }

    .category-results .view-conent_and_filters.mobile-catalog-layout .mobile-catalog-toolbar__actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        margin-left: auto;
    }

    .category-results .view-conent_and_filters.mobile-catalog-layout .mobile-catalog-toolbar__reset {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 10px;
        border: 1px solid #d9b6b6;
        border-radius: 999px;
        color: #980000;
        background: #fff;
        font-size: 13px;
        line-height: 1.2;
        text-decoration: none;
        white-space: nowrap;
    }

    .category-results .view-conent_and_filters.mobile-catalog-layout .mobile-catalog-toolbar__reset:hover {
        border-color: #980000;
        background: #fff7f7;
    }

    .category-results .view-conent_and_filters.mobile-catalog-layout .mobile-catalog-toolbar__btn--filter .mobile-catalog-toolbar__icon {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
        background-image: url("../../../images/stratec/common/view-open-filters-rTUk9AN.svg");
    }

    .category-results .view-conent_and_filters.mobile-catalog-layout .mobile-catalog-toolbar__count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        height: 24px;
        padding: 0 6px;
        box-sizing: border-box;
        border-radius: 999px;
        background: #24639a;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        line-height: 1;
    }

    .category-results .view-conent_and_filters.mobile-catalog-layout .mobile-catalog-content {
        display: block !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.mobile-catalog-filters-open {
        overflow: hidden;
    }

    .category-layout .category-filters {
        display: none;
    }

    .category-layout .category-filters.is-open {
        position: fixed;
        z-index: 1100;
        inset: 8px 8px auto;
        display: flex;
        flex-direction: column;
        width: auto;
        max-height: calc(100dvh - 16px);
        padding: 0;
        overflow: hidden;
        border: 0;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
    }

    .mobile-catalog-filters__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
        min-height: 62px;
        padding: 0 16px;
        border-bottom: 1px solid #e8e8e8;
    }

    .mobile-catalog-filters__header h2 {
        margin: 0;
        color: #2f2f2f;
        font-size: 20px;
        line-height: 1.2;
    }

    .mobile-catalog-filters__close {
        width: 36px;
        height: 36px;
        padding: 0;
        border: 0;
        color: #8b8b8b;
        background: transparent;
        font-size: 30px;
        font-weight: 300;
        line-height: 1;
        cursor: pointer;
    }

    .category-layout .category-filters.is-open > .views-exposed-form {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        border: 0;
        border-radius: 0;
    }

    .category-layout .category-filters.is-open > .views-exposed-form .catalog-filter-groups {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: 16px;
    }

    .category-layout .category-filters.is-open > .views-exposed-form .mobile-catalog-filter-actions {
        position: relative;
        flex: 0 0 auto;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
        margin: 0;
        padding: 12px 16px 16px;
        border-top: 1px solid #e8e8e8;
        background: #fff;
    }

    .category-layout .category-filters.is-open > .views-exposed-form .mobile-catalog-filter-actions .form-submit,
    .category-layout .category-filters.is-open > .views-exposed-form .mobile-catalog-filter-actions .form-reset {
        display: block;
        min-height: 46px;
        margin: 0;
        border: 0;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
    }

    .category-layout .category-filters.is-open > .views-exposed-form .mobile-catalog-filter-actions .form-submit {
        background: #24639a;
        color: #fff;
    }

    .category-layout .category-filters.is-open > .views-exposed-form .mobile-catalog-filter-actions .form-reset {
        background: #f3f3f3;
        color: #4b4b4b;
    }

    .mobile-catalog-filters-backdrop {
        position: fixed;
        z-index: 1090;
        inset: 0;
        display: block;
        background: rgba(0, 0, 0, .52);
    }

    .mobile-catalog-filters-backdrop[hidden] {
        display: none;
    }
}

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

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

    .production-groups-layout,
    .production-groups-layout:has(.group-nav) {
        grid-template-columns: minmax(0, 1fr);
    }

    .group-nav {
        display: none;
    }
}

/*
 * <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;
}

/*
 * Колонка «БРЕНД» в таблице серии — иконка бренда из `brand_logo()`
 * (App\Twig\BrandExtension); нет картинки — остаётся текст по центру.
 */
.series-frame .views-field-field-brand {
    text-align: center;
}

.series-frame .views-field-field-brand .brand-logo {
    display: inline-block;
    height: 22px;
    width: auto;
    /* `img { max-width: 100% }` из base.css сплющивает иконку в узкой колонке */
    max-width: none;
    margin: 0;
    vertical-align: middle;
}

/* Фильтр «БРЕНД» — варианты иконками из `brand_logo()` (нет картинки — текст). */
.filter-brand .checkbox-custom__text .brand-logo {
    display: inline-block;
    height: 20px;
    width: auto;
    margin: 0;
    vertical-align: middle;
}