/*
 * art-texx — оформление новой раскладки каталога.
 *
 * Вся новая верстка живёт под префиксом .atx-, поэтому исходные стили сайта
 * с ней не пересекаются. Палитра взята из style-new.css / main.min.css, чтобы
 * фильтры не выглядели чужеродно.
 *
 * Файл подключается последним.
 */

/* Токены объявлены на :root, а не на .atx-filters, потому что верхнее меню
   категорий живёт за пределами панели и тоже ими пользуется. */
:root {
    --atx-blue: #00309d;
    --atx-blue-deep: #102f97;
    --atx-blue-soft: #5d7dcf;
    --atx-sky: #63aeeb;
    --atx-pale: #ddedfa;
    --atx-yellow: #ffcb00;
    --atx-warm: #ffa100;
    --atx-ink: #0f172a;
    --atx-text: #2b2b2b;
    --atx-muted: #9a9ca3;
    /* Один цвет рамок на всё: карточка фильтров, чипы категорий, поля ввода.
       До этого было три разных — #eef1f7, #ddd и #e7edf6. */
    --atx-line: #e6ecf5;
    --atx-bg: #f7f9fc;
    --atx-chip-bg: #f1f4f9;
    --atx-chip-hover: #e6ecf5;
    --atx-ease: .18s cubic-bezier(.4, 0, .2, 1);
}

/* Это <form>: без скрипта фильтры уходят обычным GET на адрес категории.
   margin обнуляем явно — у формы он от браузера.

   Появление — только прозрачностью: сдвиг здесь неуместен (карточка длинная и
   на десктопе прилипшая), а transform сделал бы её containing block'ом для
   вложенных fixed-элементов. */
.atx-filters {
    animation: atx-appear .5s ease both;
    display: flex;
    flex-direction: column;
    margin: 0;
    background: #fff;
    border: 1px solid var(--atx-line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px -18px rgba(0, 48, 157, .35);
    overflow: hidden;
    font-size: 14px;
    color: var(--atx-text);
}

/* Скроллится только эта обёртка — рамка и скругления карточки остаются
   целыми, а подвал с кнопками не уезжает вместе с фильтрами. */
.atx-filters__body {
    flex: 1 1 auto;
    /* min-height: 0 обязателен: без него flex-элемент не даёт себя сжать
       ниже содержимого и overflow не включается. */
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d7dfec transparent;
}

.atx-filters__body::-webkit-scrollbar {
    width: 6px;
}

.atx-filters__body::-webkit-scrollbar-thumb {
    background: #d7dfec;
    border-radius: 3px;
}

.atx-filters__body::-webkit-scrollbar-thumb:hover {
    background: #bcc8db;
}

.atx-filters__footer {
    flex: 0 0 auto;
}

/* ---------- Секция фильтра ---------- */

/* Секции разделяются воздухом, а не линиями: в панели и так много рамок. */
.atx-group {
    padding: 14px 16px;
}

.atx-group:first-child {
    padding-top: 16px;
}

.atx-group__title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--atx-ink);
    text-transform: none;
}

.atx-group__subtitle {
    margin: 14px 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--atx-muted);
}

.atx-group__list {
    margin: 0 -8px;
    scrollbar-width: thin;
    scrollbar-color: #d7dfec transparent;
}

/* Состояния `is-*` общие для стилей и скрипта, но оформление всегда привязано
   к своему компоненту: те же имена уже ходят по сайту. Например, штатный
   обработчик вешает `is-active` на блок сортировки (main_v2.js:1425) — с
   голым правилом `.is-active` он красился в жёлтый цвет активной категории. */

/* Свёрнутый вид: лишние пункты просто не показываем. Все они лежат в одном
   списке, поэтому скролл при раскрытии принадлежит списку целиком.

   Только под has-js: разворачивает список скрипт, и без него спрятанные пункты
   было бы уже не достать — а форма без скрипта должна отправлять любой фильтр.
   Класс лежит в разметке, чтобы длинный список не мелькал целиком до запуска. */
html.has-js .atx-group__list.is-collapsed .atx-opt.is-extra,
html.has-js .atx-group__list.is-collapsed .atx-group__subtitle.is-extra {
    display: none;
}
html.has-js .atx-group__list.is-collapsed .atx-opt.is-extra.is-view {
    display: flex!important;
}

/* Раскрытый список выше потолка — прокручивается сам. Класс вешает
   setListExpanded() после анимации высоты. */
.atx-group__list.is-scrollable {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Поиск снимает ограничение по количеству, не трогая состояние свёртки. */
.atx-group__list.is-searching .atx-opt.is-extra {
    display: flex;
}

.atx-group__list.is-searching .atx-group__subtitle,
.atx-group__list.is-collapsed .atx-group__subtitle.is-extra {
    display: none;
}

.atx-group__list.is-searching {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 4px;
}

.atx-group__list::-webkit-scrollbar {
    width: 6px;
}

.atx-group__list::-webkit-scrollbar-thumb {
    background: #d7dfec;
    border-radius: 3px;
}

.atx-group__list::-webkit-scrollbar-thumb:hover {
    background: #bcc8db;
}

/* ---------- Строка-опция с чекбоксом ---------- */

.atx-opt {
    /* Обязательно: строка должна быть containing block'ом для своего скрытого
       чекбокса (ниже он absolute). Иначе им становится ближайший
       спозиционированный предок за пределами прокручиваемого списка, инпут
       остаётся на месте при скролле, и браузер, ставя на него фокус по клику,
       утягивает страницу к его старым координатам. */
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 2px;
    padding: 6px 8px;
    border-radius: 10px;
    font-weight: 400;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color var(--atx-ease);
}

.atx-opt:hover {
    background: #f4f8ff;
}

/* Настоящий чекбокс убран с глаз, но остаётся в потоке фокуса и в форме:
   рисуем вместо него .atx-opt__box. */
.atx-opt input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.atx-opt__box {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 1.5px solid #cfd8e6;
    border-radius: 5px;
    background: #fff;
    transition: background-color var(--atx-ease), border-color var(--atx-ease), box-shadow var(--atx-ease);
}

/* Галочка — две грани псевдоэлемента, повёрнутые на 45°: без иконочных шрифтов. */
.atx-opt__box::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 5.5px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(.4);
    opacity: 0;
    transition: transform var(--atx-ease), opacity var(--atx-ease);
}

.atx-opt:hover .atx-opt__box {
    border-color: var(--atx-blue-soft);
}

.atx-opt input:checked ~ .atx-opt__box {
    background: var(--atx-blue);
    border-color: var(--atx-blue);
}

.atx-opt input:checked ~ .atx-opt__box::after {
    transform: rotate(45deg) scale(1);
    opacity: 1;
}

.atx-opt input:focus-visible ~ .atx-opt__box {
    box-shadow: 0 0 0 3px rgba(0, 48, 157, .18);
}

/* Кружок-образец цвета. Внутренняя обводка нужна, чтобы белый и молочный
   не сливались с фоном карточки. */
.atx-opt__dot {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .14);
}

.atx-opt__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    color: var(--atx-text);
    transition: color var(--atx-ease);
}

.atx-opt:hover .atx-opt__text,
.atx-opt input:checked ~ .atx-opt__text {
    color: var(--atx-blue);
}

.atx-opt input:checked ~ .atx-opt__text {
    font-weight: 500;
}

/* ---------- Свёрнутый список и поиск ---------- */

/* Не совпавшие с поиском пункты. !important здесь по делу: правило показа
   «лишних» пунктов при поиске идёт от двух классов-предков и иначе перевесит. */
.atx-opt.is-hidden {
    display: none !important;
}

/* Поиск по группе и кнопка «Показать все» работают только скриптом — без него
   список и так показан целиком, и обе кнопки были бы мёртвыми. */
html:not(.has-js) .atx-search-wrap,
html:not(.has-js) .atx-more {
    display: none;
}

.atx-search-wrap {
    margin: 0 0 12px;
}

.atx-search {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 34px;
    border: 1px solid var(--atx-line);
    border-radius: 10px;
    background-color: var(--atx-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9ca3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 16px 16px;
    font-size: 13.5px;
    color: var(--atx-text);
    outline: none;
    transition: border-color var(--atx-ease), box-shadow var(--atx-ease), background-color var(--atx-ease);
}

.atx-search::placeholder {
    color: var(--atx-muted);
}

.atx-search:focus {
    background-color: #fff;
    border-color: var(--atx-blue-soft);
    box-shadow: 0 0 0 3px rgba(0, 48, 157, .12);
}

.atx-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--atx-blue);
    cursor: pointer;
    transition: color var(--atx-ease);
}

.atx-more::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    transition: transform var(--atx-ease);
}

.atx-more.is-open::after {
    transform: rotate(-135deg);
    margin-top: 2px;
}

.atx-more:hover {
    color: var(--atx-blue-deep);
}

/* ---------- Цена ---------- */

/* Блок .filter-price переехал сюда целиком, поэтому гасим его «поповерное»
   прошлое: заголовок-тоглер, кнопку сброса и локальную кнопку «Применить».
   Штатные подписи «₽» тоже не нужны — знак валюты теперь внутри поля. */
.atx-group--price .filter-price-toggle,
.atx-group--price .reset-filter,
.atx-group--price .filter-dropdown__subtitle,
.atx-group--price .filter-submit-price,
.atx-group--price .mt-30,
.atx-group--price .filter-dropdown_price > label {
    display: none !important;
}

.atx-group--price .filter,
.atx-group--price .filter-price {
    position: static;
    width: 100%;
    margin: 0;
}

.atx-group--price .filter-dropdown,
.atx-group--price .filter-dropdown_price {
    display: block !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: none !important;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

/* Дорожка занимает ширину секции минус половину бегунка с каждой стороны:
   бегунок центрируется на значении и в крайних положениях выступает на 9px,
   так что при нулевом отступе он свисал бы за край карточки. */
/* Ползунок доезжает позже остальной страницы: noUiSlider и wNumb сайт
   подгружает динамически (main_v2.js:1689). Класс noUi-target вешается на сам
   #keypress, поэтому до инициализации он пуст и высотой 0 — держим высоту
   дорожки заранее, чтобы карточка не подпрыгивала. */
.atx-group--price #keypress {
    min-height: 4px;
    margin: 18px 9px 18px;
}

/* Поля «от» и «до». Видимые — витрина: в них человеческий формат «1290 ₽» и
   нет атрибута name, в форму они не уходят. Значение отправляют штатные
   инпуты сайта, переведённые скриптом в type=hidden. */
.atx-price__fields {
    display: flex;
    gap: 8px;
}

.atx-price__field {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

/* Подпись лежит поверх поля и не ловит клики — попадание мимо цифр всё равно
   фокусирует инпут. Печатать в неё нельзя: это оформление, а не текст поля. */
.atx-price__label {
    position: absolute;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    margin: 0;
    font-size: 13px;
    line-height: 1;
    color: var(--atx-muted);
    pointer-events: none;
}

.atx-price__input {
    width: 100%;
    height: 42px;
    padding: 0 12px 0 38px;
    border: 1px solid var(--atx-line);
    border-radius: 12px;
    background: var(--atx-bg);
    font-size: 14px;
    color: var(--atx-ink);
    outline: none;
    transition: border-color var(--atx-ease), box-shadow var(--atx-ease), background-color var(--atx-ease);
}

.atx-price__input:hover {
    border-color: #d7dfec;
}

.atx-price__input:focus {
    background: #fff;
    border-color: var(--atx-blue-soft);
    box-shadow: 0 0 0 3px rgba(0, 48, 157, .12);
}

/* Ползунок noUiSlider */
/* Сайт держит дорожку узкой: .noUi-target { width: 110px } в main.min.css.
   Снимаем ограничение, иначе ползунок не тянется на ширину секции. */
.atx-group--price .noUi-target {
    /* Появляется в момент, когда noUiSlider вешает класс. */
    animation: atx-appear .45s ease both;
    width: auto;
    height: 4px;
    border: 0;
    border-radius: 3px;
    background: #e7edf6;
    box-shadow: none;
}

.atx-group--price .noUi-connect {
    background: linear-gradient(90deg, var(--atx-blue-soft), var(--atx-blue));
}

/* left: auto обязателен: у сайта .noUi-horizontal .noUi-handle { left: -17px },
   и при заданных сразу left и right побеждает left — бегунки уехали бы. */
.atx-group--price .noUi-handle {
    width: 18px;
    height: 18px;
    top: -7px;
    right: -9px;
    left: auto;
    border: 2px solid var(--atx-blue);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 48, 157, .25);
    cursor: grab;
    transition: transform var(--atx-ease), box-shadow var(--atx-ease);
}

.atx-group--price .noUi-handle::before,
.atx-group--price .noUi-handle::after {
    display: none;
}

.atx-group--price .noUi-handle:hover {
    transform: scale(1.12);
}

.atx-group--price .noUi-handle:active,
.atx-group--price .noUi-active {
    transform: scale(1.18);
    box-shadow: 0 0 0 6px rgba(0, 48, 157, .12), 0 2px 6px rgba(0, 48, 157, .25);
    cursor: grabbing;
}

/* ---------- Низ панели: применить / сбросить ---------- */

.atx-filters__footer {
    padding: 6px 16px 16px;
}

/* Штатно .filter-total показывается только на мобильном, а .filter-reset сайт
   прячет через fadeOut. В новой панели подвал постоянный: без кнопки нельзя
   применить цену (поля цены не триггерят авто-фильтрацию), а «Сбросить»
   рядом с ней логичнее, чем всплывающая ссылка. !important нужен, чтобы
   перебить инлайновый display от jQuery. */
.atx-filters__footer .filter-total {
    display: block !important;
    margin: 0;
}

.atx-filters__footer .filter-reset {
    display: block !important;
}

.atx-filters__footer .filter-total__btn {
    display: block;
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 11px;
    background: var(--atx-yellow);
    font-size: 14px;
    font-weight: 700;
    color: var(--atx-ink);
    cursor: pointer;
    transition: background-color var(--atx-ease), transform var(--atx-ease);
}

.atx-filters__footer .filter-total__btn:hover {
    background: var(--atx-warm);
    transform: translateY(-1px);
}

.atx-filters__footer .filter-total__btn:active {
    transform: translateY(0);
}

/* Заблокированная кнопка «Применить»: применять нечего. На мобильном она
   такой не бывает — там тот же клик закрывает панель. */
.atx-filters__footer .filter-total__btn:disabled {
    opacity: .45;
    cursor: default;
    pointer-events: none;
    box-shadow: none;
}

.atx-filters__footer .filter-reset {
    margin: 12px 0 0;
    padding: 0;
    text-align: center;
}

.atx-filters__footer .filter-reset a {
    font-size: 13px;
    color: var(--atx-muted);
    border: 0;
    transition: color var(--atx-ease);
}

.atx-filters__footer .filter-reset a:hover {
    color: var(--atx-blue);
}

/* Крестик — две палочки-псевдоэлемента, у сайта залитые красным (#C22222).
   Привязываем их к currentColor: тогда крестик серый вместе с текстом и
   перекрашивается вместе с ним, без дублирования цветов в двух местах. */
.atx-filters__footer .filter-reset a::before,
.atx-filters__footer .filter-reset a::after {
    background: currentColor;
    transition: background-color var(--atx-ease);
}

/* Плавающая кнопка применить */
.atx-sidebar .filters-float-btn {
    top: 20px;
    background: var(--atx-yellow);
    font-size: 14px;
    font-weight: 700;
    color: var(--atx-ink);
    border: none;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    height: 42px;
    line-height: 42px;
    outline: none;
    position: absolute;
    right: -95px;
    text-align: center;
    width: 100px;
    transition: top 0.4s ease, opacity 0.4s ease, visibility 0s linear 0.4s;
    opacity: 0;
    visibility: hidden;
}
.atx-sidebar .filters-float-btn:after {
    content: attr(data-label);
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
.atx-sidebar .filters-float-btn:before {
    content: "";
    background: var(--atx-yellow);
    display: block;
    width: 22px;
    height: 22px;
    left: -3px;
    position: absolute;
    top: 10px;
    transform: rotate(135deg);
    z-index: 0;
}
@media (min-width: 992px) {
    .atx-sidebar .filters-float-btn.view {
        opacity: 1;
        visibility: visible;
        transition: top 0.4s ease, opacity 0.4s ease;
    }
}

/* ---------- Строка над каталогом: бейджи и сортировка ---------- */

/* Штатно .filters отбита сверху и снизу линиями #ddd. Убираем их: ряд чипов
   сверху и карточка фильтров слева уже держат границы блоков, а полосы во всю
   ширину только дробят страницу. */
.filters-wrap .filters {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    /* Сверху отступ больше, снизу меньше: строка должна читаться как часть
       каталога, а не как продолжение навигации. Верхнее поле складывается с
       отступом под чипами. */
    margin: 12px 0 10px;
    padding: 0;
    border: 0;
}

/* .filters__row шириной во всю строку ломал бы ряд на две — прижимаем бейджи
   к содержимому, чтобы сортировка встала справа на той же линии. */
.filters-wrap .filters__row {
    flex: 0 1 auto;
    width: auto;
    margin: 0;
}

.filters-wrap .filter__flex {
    flex: 0 1 auto;
    width: auto;
    margin: 0 0 0 auto;
}

.filters-wrap .filter-sort {
    position: relative;
    margin: 0;
    text-align: right;
}

/* Штатная «Сортировать» — пунктирное подчёркивание и треугольник, собранный
   из бордеров абсолютным позиционированием. Меняем на чистый текст с
   шевроном; position: static обязателен, иначе штатный right: -17px уводит
   шеврон за край строки. */
.filters-wrap .filter-sort-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    border: 0;
    font-size: 14px;
    color: var(--atx-ink);
    text-decoration: none;
}

.filters-wrap .filter-sort-toggle::after {
    content: "";
    position: static;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border: solid var(--atx-muted);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

/* Поповер сортировки держался на штатных правилах от .filters, и просто
   перекрасить его мало — штатные координаты конфликтуют с новыми:

   - `bottom: -10px` вместе с нашим `top` переопределяет высоту (для абсолютного
     блока с height: auto заданы обе кромки — браузер решает уравнение и
     схлопывает карточку в несколько пикселей, а список вываливается наружу);
   - `transform: translateY(100%)` доводил бы её ещё ниже;
   - на мобильном добавляется `left: -15px` от `.filters .filter .filter-dropdown`
     — карточка уезжает за правый край экрана.

   Поэтому кромки и трансформация сброшены явно, а вес селекторов поднят до
   штатных (те идут от трёх классов и, для пунктов списка, ещё и от трёх тегов).
   Открывает список по-прежнему штатный fadeToggle — он ставит инлайновый
   display, который перебивает наш display: none. */
.filters-wrap .filter.filter-sort .filter-dropdown_sort {
    display: none;
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    right: 0;
    bottom: auto;
    left: auto;
    width: auto;
    min-width: 210px;
    max-width: none;
    padding: 6px;
    border: 1px solid var(--atx-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px -14px rgba(15, 23, 42, .35);
    text-align: left;
    transform: none;
}

.filters-wrap .filter.filter-sort .filter-dropdown_sort ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.filters-wrap .filter.filter-sort .filter-dropdown_sort ul li a {
    display: block;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--atx-text);
    text-decoration: none;
    transition: background-color var(--atx-ease), color var(--atx-ease);
}

.filters-wrap .filter.filter-sort .filter-dropdown_sort ul li a:hover {
    background: var(--atx-chip-bg);
    color: var(--atx-blue);
}

/* ---------- Десктоп: сайдбар слева ---------- */

@media (min-width: 992px) {
    /* Sticky вешаем на сам .aside, а границей прилипания служит колонка
       .col-lg-3: она flex-элемент ряда и уже тянется во всю его высоту.
       Прежний height:100% на .aside превращал колонку фильтров в пустую
       простыню на несколько тысяч пикселей, которая прокручивалась вхолостую.

       margin-top живёт здесь, а не на .atx-sidebar: у вложенного элемента
       верхний margin схлопнулся бы с родительским и поехал бы вместе с ним. */
    .content_catalog .aside {
        position: sticky;
        top: var(--atx-sticky-top, 99px);
        /* Столько же, сколько верхнее поле строки бейджей: верх карточки
           встаёт вровень с ней. */
        margin-top: 12px;
        z-index: 5;
    }

    /* Небольшой отступ сверху: карточка фильтров начинается чуть ниже строки
       бейджей, а не упирается в неё верхней кромкой. */
    /* Панель выше экрана прилипала бы с обрезанным низом, поэтому её высота
       ограничена. Скроллит содержимое .atx-filters__body, а не сайдбар. */
    .content_catalog .aside .atx-filters {
        max-height: calc(100vh - var(--atx-sticky-top, 99px) - 20px);
    }


    .atx-mobile-host {
        display: none;
    }

    .filters-wrap .filters__toggle-filter {
        display: none;
    }
}

/* ---------- Шапка панели фильтров ---------- */

.atx-filters__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 14px 16px;
    border-bottom: 1px solid var(--atx-line);
}

.atx-filters__title {
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 700;
    color: var(--atx-ink);
}

.atx-filters__reset {
    flex: 0 0 auto;
}

/* Сброс показываем, только когда есть что сбрасывать — класс вешает скрипт.
   В разметке ссылка видима: без скрипта страница может быть уже отфильтрована
   по адресу, и сброс должен быть под рукой.

   !important на самой ссылке — против штатного fadeIn/fadeOut: сайт дёргает
   .filter-reset инлайновым display, и без него состояние ссылки перестаёт
   зависеть от нас. */
.atx-filters__reset.is-hidden {
    display: none;
}

.atx-filters__reset .filter-reset {
    display: block !important;
    margin: 0;
    padding: 0;
}

.atx-filters__reset .filter-reset a {
    font-size: 13px;
    color: var(--atx-muted);
    border: 0;
    transition: color var(--atx-ease);
}

.atx-filters__reset .filter-reset a:hover {
    color: var(--atx-blue);
}

/* Крестик у ссылки сброса — декоративный, рядом с кнопкой закрытия панели
   получалось два креста подряд. Оставляем только текст. */
.atx-filters__reset .filter-reset a::before,
.atx-filters__reset .filter-reset a::after {
    display: none;
}

/* Кнопка закрытия нужна только когда панель раскрыта поверх экрана. */
.atx-filters__close {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--atx-chip-bg);
    color: var(--atx-ink);
    cursor: pointer;
    transition: background-color var(--atx-ease);
}

.atx-filters__close:hover {
    background: var(--atx-chip-hover);
}

/* Кнопка «Фильтры» в строке над каталогом — только на мобильном. */
.atx-bar__btn {
    display: none;
}

/* ---------- Мобильный: строка с кнопкой и панель поверх экрана ---------- */

@media (max-width: 991px) {
    /* Строка бейджей лежит в разметке здесь, а живёт на мобильном внутри
       панели — переносит её скрипт. Пока он не отработал, прячем: иначе первый
       экран показывает бейджи не на месте и потом они исчезают. Правило
       привязано к строке над каталогом, поэтому в панели оно уже не действует,
       а без скрипта (нет has-js) бейджи остаются видимыми и работают формой. */
    .filters-wrap .filters {
        margin: 8px 0;
    }

    html.has-js .filters-wrap .filters > .filters__row {
        display: none;
    }

    .atx-bar__btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 14px;
        border: 1px solid var(--atx-line);
        border-radius: 12px;
        background: #fff;
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        color: var(--atx-ink);
        cursor: pointer;
        transition: border-color var(--atx-ease);
    }

    .atx-bar__btn:hover,
    .atx-bar__btn:focus-visible {
        border-color: var(--atx-blue-soft);
    }

    /* Панель фильтров.

       Без скрипта она просто лежит в потоке страницы: фильтры видны, работают
       и отправляются формой. Скрипт ставит на <html> класс has-js — и только
       тогда панель прячется и начинает открываться кнопкой поверх экрана.
       Поэтому отключённый JS не оставляет пользователя без фильтров. */
    .atx-filters {
        margin-bottom: 16px;
        border-radius: 14px;
    }

    /* Штатно .aside — выезжающая шторка каталога: fixed, свои размеры и
       transform. Дерева категорий в ней больше нет, а transform делает её
       containing block'ом для нашей fixed-панели, из-за чего та схлопывается
       в нулевую ширину. Сбрасываем шторку в обычный блок. */
    .content_catalog .aside {
        position: static;
        width: auto;
        height: auto;
        transform: none;
        overflow: visible;
        background: none;
        box-shadow: none;
    }

    html.has-js .atx-sidebar {
        display: none;
    }

    html.has-js.is-filters-open .atx-sidebar {
        display: block;
        position: fixed;
        /* Выше всего, что есть у сайта: его модалки и шапка сидят на 99999,
           а .modal-view — на 999998. */
        z-index: 999999;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        animation: atx-panel-in .22s cubic-bezier(.4, 0, .2, 1) both;
    }

    html.has-js.is-filters-open .atx-filters {
        height: 100%;
        max-height: none;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    html.has-js.is-filters-open .atx-filters__close {
        display: inline-flex;
    }

    /* Фон под раскрытой панелью не прокручивается. */
    html.is-filters-open,
    html.is-filters-open body {
        overflow: hidden;
    }

    .atx-group {
        padding: 14px 16px;
    }

    /* Бейджи скрипт переносит сюда — сверху списка фильтров. */
    .atx-filters__body > .filters__row {
        padding: 16px 16px 0;
    }
}

@keyframes atx-panel-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    html.has-js.is-filters-open .atx-sidebar {
        animation: none;
    }
}

/* ---------- Шапка каталога на всю ширину ---------- */

/* Собственные flex-свойства вместо .col-12, чтобы не зависеть от того, какие
   классы бутстрап-сетки реально доехали в сборку сайта. */
.atx-head {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

/* ---------- Плашка «Все ткани в наличии» ---------- */

/* Штатно это единственная в шапке каталога вещь с рамкой — рядом с
   чипами-заливками она выбивалась. Оставляем только текст и иконку: подложки
   нет, поэтому подпись выходит на правый край строки. Иконка нарисована
   зелёным прямо в SVG, менять ей цвет на наведении нечем — приглушаем всю
   надпись целиком. */
/* Строка выровнена по центру, а рядом с крупным заголовком мелкая подпись
   по геометрическому центру читается задранной: у заголовка почти весь рост
   букв выше базовой линии. Опускаем её к базовой линии заголовка — при
   align-items: center отступ сверху сдвигает блок на половину своей величины. */
.catalog-top .availability-info {
    margin: 10px 0 0;
}

.catalog-top .availability-info__btn {
    padding: 8px 0 8px 22px;
    border: 0;
    background-color: transparent;
    background-position: 0 center;
    font-size: 14px;
    line-height: 1.3;
    transition: opacity var(--atx-ease);
}

.catalog-top .availability-info__btn:hover {
    opacity: .7;
}

/* Всплывающая подсказка — по тем же правилам, что остальные поповеры: мягкое
   скругление, наша линия и тень вместо зелёной рамки. */
.catalog-top .availability-info__popup {
    padding: 10px 12px;
    border: 1px solid var(--atx-line);
    border-radius: 12px;
    box-shadow: 0 12px 32px -14px rgba(15, 23, 42, .35);
}

/* ---------- Чипы категорий ---------- */

/* Собственный компонент: заливка вместо рамки. Штатные .category-tags a здесь
   не участвуют — контейнер и классы другие. */
.atx-chips-wrap {
    margin-bottom: 12px;
}

/* Размеры чипа живут в переменных: по ним же считается высота ряда для
   ограничения на первом экране, иначе эти два места разъезжаются. */
.atx-chips {
    --atx-chip-pad-y: 8px;
    --atx-chip-pad-x: 14px;
    --atx-chip-font: 14px;
    --atx-chip-lh: 1.3;
    --atx-chips-gap: 4px;
    --atx-chip-h: calc(var(--atx-chip-font) * var(--atx-chip-lh) + var(--atx-chip-pad-y) * 2);

    display: flex;
    flex-wrap: wrap;
    gap: var(--atx-chips-gap);
}

/* Все категории лежат в разметке, и до того, как скрипт свернёт лишние, блок
   занял бы несколько рядов — первый экран дёрнулся бы. Поэтому в разметке он
   приходит с is-clamped, а скрипт снимает класс сразу после свёртки, в том же
   кадре. Ограничение только под has-js: без скрипта разворачивать ряд нечем,
   и все категории должны остаться видимыми.

   Ровно один ряд плюс пиксель на округления: чтобы не срезало нижнюю кромку
   чипа, но и высота после снятия класса менялась незаметно. */
html.has-js .atx-chips.is-clamped {
    max-height: calc(var(--atx-chip-h) + 1px);
    overflow: hidden;
}

.atx-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    margin: 0;
    /* Страховка от аномально длинного названия: без неё чип шире контейнера
       не сжимается (nowrap) и вылезает за строку вместе с горизонтальным
       скроллом страницы. */
    max-width: 100%;
    padding: var(--atx-chip-pad-y) var(--atx-chip-pad-x);
    border: 0;
    border-radius: 16px;
    background: var(--atx-chip-bg);
    font-family: inherit;
    font-size: var(--atx-chip-font);
    line-height: var(--atx-chip-lh);
    color: var(--atx-text);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--atx-ease), color var(--atx-ease);
}

.atx-chip:hover {
    background: var(--atx-chip-hover);
    color: var(--atx-blue);
    text-decoration: none;
}

.atx-chip__name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.atx-chip .num {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--atx-muted);
    transition: color var(--atx-ease);
}

.atx-chip.is-active,
.atx-chip.is-active:hover {
    background: var(--atx-yellow);
    color: var(--atx-ink);
    font-weight: 600;
}

.atx-chip.is-active .num {
    color: rgba(15, 23, 42, .5);
}

/* «ещё N» / «Свернуть» — такой же чип, но приглушённый: это не категория. */
.atx-chip--more {
    color: var(--atx-muted);
}

.atx-chip.is-hidden {
    display: none;
}

/* На узком экране чипы мельче: иначе в два ряда помещается всего четыре
   категории. Свёртка остаётся, число рядов задаёт CHIP_ROWS_MOBILE. */
@media (max-width: 767px) {
    .atx-chips {
        --atx-chip-pad-y: 6px;
        --atx-chip-pad-x: 11px;
        --atx-chip-font: 13px;
        --atx-chips-gap: 5px;
    }

    .atx-chip .num {
        font-size: 12px;
    }

    /* На мобильном свёрнутый вид — два ряда, значит и ограничение на два. */
    html.has-js .atx-chips.is-clamped {
        max-height: calc(var(--atx-chip-h) * 2 + var(--atx-chips-gap) + 1px);
    }

    .atx-chips-wrap {
        margin-bottom: 10px;
    }
}

/* ---------- Появление скрытых элементов ---------- */

/* Чипы и пункты списков скрываются через display:none, а его нельзя
   анимировать переходом — поэтому проявляем их отдельной анимацией.
   Заливка both (=forwards+backwards) держит конечное состояние до снятия
   класса и не даёт кадру мигнуть до старта при отложенном запуске. */
/* Только прозрачность: этим проявляются блоки, которые нельзя двигать. */
@keyframes atx-appear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes atx-fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.atx-chip.is-revealing,
.atx-opt.is-revealing {
    animation: atx-fade-in .22s cubic-bezier(.4, 0, .2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .atx-chip.is-revealing,
    .atx-opt.is-revealing,
    .atx-filters,
    .atx-group--price .noUi-target {
        animation: none;
    }
}

/* ---------- Бейджи «Только со скидкой / Новинки / Хиты» ---------- */

/* Компонент самодостаточный: правила привязаны к самой строке, а не к
   контейнеру .filters. Это важно, потому что на мобильном скрипт переносит
   строку внутрь панели фильтров — со штатными селекторами вида
   «.filters .filter-sale …» бейджи там превращались в голые чекбоксы.

   Отсюда же двойной класс .atx-badges.filters__row и лишний .filter в
   селекторах. Штатные правила идут от двух классов-предков
   (.filters .filter-sale …) и без добавочного веса перебивают наши: возвращается
   пунктирное подчёркивание, а крестик гасится штатным display: none.
   !important тут не нужен — хватает веса селектора.

   Оформление штатное: цветной квадратик со скошенным углом (6px 0 6px 0 —
   фирменный приём сайта, тот же у плашки «СКИДКА»). Правятся только дефекты:
   пунктирное подчёркивание, кривой крестик сброса и скачок геометрии при
   выборе. */
.atx-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 26px;
    margin: 0;
}

.atx-badges .filter {
    /* См. .atx-opt: на мобильном строка бейджей переезжает в прокручиваемую
       панель, а штатное правило position: relative работает только внутри
       .filters — без него фокус на скрытом чекбоксе дёргает страницу. */
    position: relative;
    margin: 0 !important;
}

.atx-badges .filter [type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.atx-badges.filters__row .filter [type=checkbox] + label {
    position: relative;
    display: inline-block;
    height: auto;
    margin: 0 0 0 25px;
    padding: 0;
    border: 0;
    font-size: 14px;
    line-height: 1.3;
    color: var(--atx-text);
    cursor: pointer;
}

/* Квадратик со скошенным углом слева от подписи. */
.atx-badges.filters__row .filter [type=checkbox] + label::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -25px;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 6px 0 6px 0;
    transition: none;
}

/* Выбранный бейдж: заливка совпадает с самой подписью, поля заданы настоящим
   padding — справа больше, под крестик. Ничего за пределы блока не вылезает,
   поэтому gap в строке работает как задумано.

   Заливка — фон самой подписи, а не растянутый квадратик: штатно квадратик
   растягивается на 100% и уводится под текст z-index'ом -1, но это правило
   живёт в связке с .filters, и в перенесённой строке текст пропадал под
   заливкой. Фоном на подписи такой связки нет вовсе. */
.atx-badges.filters__row .filter [type=checkbox]:checked + label {
    margin-left: 0;
    padding: 4px 30px 4px 12px;
    border-radius: 6px 0 6px 0;
    color: #fff;
}

.atx-badges.filters__row .filter [type=checkbox]:checked + label::before {
    display: none;
}

/* Крестик справа — подсказка, что бейдж снимается. Отдельная кликабельная
   зона не нужна: клик по всей подписи и так переключает чекбокс.
   Появляется прозрачностью: перемещать его с места квадратика нельзя,
   иначе он «прилетает» из угла. */
.atx-badges.filters__row .filter [type=checkbox]:checked + label::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 11px;
    left: auto;
    width: 10px;
    height: 10px;
    border: 0;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3l6 6M9 3l-6 6'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
    animation: atx-cross-in .18s ease both;
}

@keyframes atx-cross-in {
    from {
        opacity: 0;
    }

    to {
        opacity: .85;
    }
}

@media (prefers-reduced-motion: reduce) {
    .atx-badges.filters__row .filter [type=checkbox]:checked + label::after {
        animation: none;
        opacity: .85;
    }
}

.atx-badges.filters__row .filter-sale [type=checkbox] + label::before,
.atx-badges.filters__row .filter-sale [type=checkbox]:checked + label {
    background: #e52976;
}

.atx-badges.filters__row .filter-new [type=checkbox] + label::before,
.atx-badges.filters__row .filter-new [type=checkbox]:checked + label {
    background: #75b819;
}

.atx-badges.filters__row .filter-hits [type=checkbox] + label::before,
.atx-badges.filters__row .filter-hits [type=checkbox]:checked + label {
    background: #993399;
}

:root {
    --load_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' viewBox='0 0 35 35'%3E%3Ccircle cx='17.5' cy='17.5' r='16' fill='none' stroke='%2300309d' stroke-width='3' stroke-linecap='round' stroke-dasharray='75 101'/%3E%3C/svg%3E");
}
@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}
.content_catalog .js_products_loop {
    position: relative;
}
.content_catalog .js_products_loop:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s linear, visibility 0s linear .3s;
}
.content_catalog .js_products_loop.load:after {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s linear;
}
.content_catalog .js_products_loop:before {
    content: '';
    position: absolute;
    top: var(--load-top, 20px);
    left: 50%;
    width: 35px;
    height: 35px;
    margin-left: -17.5px;
    z-index: 6;
    background-image: var(--load_icon);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s linear, visibility 0s linear .3s;
    animation: rotate 1s linear infinite;
}
.content_catalog .js_products_loop.load:before {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s linear;
}