/* Каталог: те, чого немає у вёрстці (main.css) — стани, які зʼявились разом із динамікою. */

@media screen and (min-width: 1024px) {
    .filter__nav {
        display: block;
        padding: 0 24px 24px;
    }
}

.filter__top-reset {
    margin-top: 0;
    font-size: 14px;
    line-height: 1.2;
}

@media screen and (max-width: 1023px) {
    .filter__top-reset {
        margin-right: 44px;
    }
}

@media screen and (max-width: 1023px) {
    .filter__nav {
        position: sticky;
        bottom: 0;
        z-index: 2;
        padding: 12px;
        background: #fff;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 -6px 16px rgba(0, 0, 0, .08);
    }
}

@media screen and (min-width: 1200px) {
    .catalog__side {
        width: 22%;
    }

    .catalog__main {
        width: 78%;
    }
}

/* 1024-1199: контейнер тут помітно вужчий (максимум 1400px, а по факту ширина екрана
   мінус 48px падінгів), тому ті самі 22% дають ~215px і фільтри стискаються. Даємо більше. */
@media screen and (min-width: 1023px) and (max-width: 1199px) {
    .catalog__side {
        width: 27%;
    }

    .catalog__main {
        width: 73%;
    }
}

@media screen and (min-width: 1400px) {
    .catalog__body .product {
        width: calc(25% - 15px);
    }
}

@media screen and (min-width: 1200px) {
    .catalog__body .product__nav {
        flex-wrap: nowrap;
    }

    .catalog__body .product__nav .btn-yellow {
        min-width: 0;
        white-space: normal;
        font-size: 14px;
        line-height: 1.2;
        padding: 8px 10px;
    }
}

/* Фільтр-діапазон числового атрибута: селектор одиниці + повзунок (js-unit-range).
   Розмітка повторює блок ціни, тож більшість стилів уже є в main.css — тут лише відступ
   під селектором і стан «в цій одиниці значень немає». */
.filter__unit-range-select {
    margin-bottom: 12px;
}

/* Блоки фільтра — акордеон на grid-template-rows, тож у них overflow: hidden, і абсолютна
   випадайка Choices обрізалась краєм блоку та ховалась під наступним фільтром. Розкриваємо
   список У ПОТОЦІ: одиниць тут одна-дві, блок просто підростає. z-index не рятував би — обрізає
   саме overflow, а не порядок накладання. Селектор із [data-type], щоб перебити правило теми. */
.filter__unit-range .choices[data-type*=select-one] .choices__list--dropdown {
    position: static;
    margin-top: 4px;
}

/* Через це ж розкриття в потоці поїхала стрілка: у темі вона намальована як ::after самого
   контейнера .choices з top: 50%, а контейнер тепер росте разом зі списком — і «половина
   висоти» опинялась на першому пункті. Перевішуємо стрілку на .choices__inner: цей елемент
   завжди рівно висоти поля, бо випадайка йому сусід, а не вміст. */
.filter__unit-range .choices[data-type*=select-one]::after {
    display: none;
}

.filter__unit-range .choices[data-type*=select-one] .choices__inner {
    position: relative;
}

.filter__unit-range .choices[data-type*=select-one] .choices__inner::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 19px;
    height: 19px;
    background: url(../img/icon-select.svg) no-repeat center center;
    background-size: contain;
    transform: translateY(-50%);
    transition: transform .35s ease;
    pointer-events: none;
}

.filter__unit-range .choices[data-type*=select-one].is-open .choices__inner::after {
    transform: translateY(-50%) rotate(180deg);
}

.filter__unit-range.is-empty .filter__price,
.filter__unit-range.is-empty .filter__range {
    opacity: .45;
    pointer-events: none;
}