/* =========================================================
   ОСНОВНЫЕ НАСТРОЙКИ
   ========================================================= */

* {
    box-sizing: border-box;
}


body {

    margin: 0;

    font-family: Arial, sans-serif;

    background: #f5f5f5;

    color: #111;

    /* Telegram fullscreen: оставляем место под нижнюю навигацию
       и системную/Telegram safe-area. */
    padding-bottom: calc(
        60px +
        var(
            --tg-content-safe-area-inset-bottom,
            env(safe-area-inset-bottom, 0px)
        )
    );

}



/* =========================================================
   ШАПКА
   ========================================================= */

.header {

    width: 100%;

    padding:
        max(
            16px,
            var(--tg-content-safe-area-inset-top, 0px)
        )
        16px
        16px;

    background: white;

    border-bottom: 1px solid #ddd;

}


.header h1 {

    margin: 0;

    font-size: 24px;

    font-weight: 600;

}



/* =========================================================
   ФИЛЬТРЫ
   ========================================================= */

.filters-section {

    width: 100%;

    background: white;

    border-bottom: 1px solid #ddd;

}


.filters-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 12px;

    display: flex;

    gap: 8px;

    align-items: flex-start;

    flex-wrap: nowrap;

    overflow-x: auto;

    overflow-y: visible;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

}


.filters-container::-webkit-scrollbar {

    display: none;

}



/* =========================================================
   ОТДЕЛЬНЫЙ ФИЛЬТР
   ========================================================= */

.filter {

    position: relative;

    flex: 0 0 auto;

}



/* =========================================================
   КНОПКА ФИЛЬТРА
   ========================================================= */

.filter-button {

    border: 1px solid #d0d0d0;

    background: white;

    border-radius: 6px;

    padding: 9px 12px;

    min-width: 110px;

    font-size: 14px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    white-space: nowrap;

}


.filter-button:hover {

    background: #f7f7f7;

}


.arrow {

    font-size: 16px;

}



/* =========================================================
   ВЫПАДАЮЩИЙ СПИСОК
   ========================================================= */

.filter-dropdown {

    display: none;

    position: absolute;

    top: calc(100% + 5px);

    left: 0;

    z-index: 100;

    width: 220px;

    max-height: 350px;

    overflow-y: auto;

    overflow-x: hidden;

    background: white;

    border: 1px solid #ddd;

    border-radius: 8px;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);

    padding: 10px;

}


.filter-dropdown.active {

    display: block;

}



/* =========================================================
   ПОИСК
   ========================================================= */

.filter-search {

    width: 100%;

    padding: 9px 10px;

    margin-bottom: 8px;

    border: 1px solid #ddd;

    border-radius: 6px;

    outline: none;

    font-size: 14px;

}


.filter-search:focus {

    border-color: #999;

}



/* =========================================================
   ОПЦИИ ФИЛЬТРОВ
   ========================================================= */

.filter-options {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.filter-option {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 7px 5px;

    cursor: pointer;

    border-radius: 5px;

    font-size: 14px;

}


.filter-option:hover {

    background: #f3f3f3;

}


.filter-option input {

    width: 16px;

    height: 16px;

    cursor: pointer;

}



/* =========================================================
   СООБЩЕНИЯ
   ========================================================= */

.filter-message {

    color: #777;

    font-size: 13px;

    line-height: 1.4;

    padding: 8px 4px;

}



/* =========================================================
   КНОПКА СБРОСА
   ========================================================= */

.reset-button {

    border: none;

    background: #111;

    color: white;

    border-radius: 6px;

    padding: 10px 14px;

    cursor: pointer;

    font-size: 14px;

}


.reset-button:hover {

    background: #333;

}



/* =========================================================
   КАТАЛОГ
   ========================================================= */

.catalog {

    width: 100%;

    padding: 10px;

    /* Дополнительный запас перед нижней навигацией */
    padding-bottom: calc(
        80px +
        var(
            --tg-content-safe-area-inset-bottom,
            env(safe-area-inset-bottom, 0px)
        )
    );

}


.products-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

}



/* =========================================================
   КАРТОЧКА ТОВАРА
   ========================================================= */

.product-card {

    width: 100%;

    background: white;

    overflow: hidden;

    border-radius: 8px;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;

}


.product-card:active {

    transform: scale(0.98);

}



/* =========================================================
   ФОТО ТОВАРА
   ========================================================= */

.product-image {

    width: 100%;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    display: block;

}



/* =========================================================
   ИНФОРМАЦИЯ О ТОВАРЕ
   ========================================================= */

.product-info {

    padding: 8px;

}


.product-name {

    margin: 0 0 6px 0;

    font-size: 15px;

    line-height: 1.2;

    font-weight: 400;

}


.product-price {

    margin: 0;

    font-size: 16px;

    line-height: 1.2;

    font-weight: 700;

}



/* =========================================================
   КОМПЬЮТЕР
   ========================================================= */

@media (min-width: 700px) {

    .catalog {

        max-width: 1200px;

        margin: 0 auto;

        padding: 20px;

        padding-bottom: calc(
        90px +
        var(
            --tg-content-safe-area-inset-bottom,
            env(safe-area-inset-bottom, 0px)
        )
    );

    }


    .products-grid {

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 16px;

    }


    .product-info {

        padding: 12px;

    }


    .product-name {

        font-size: 16px;

    }


    .product-price {

        font-size: 18px;

    }

}



/* =========================================================
   МОБИЛЬНЫЕ ФИЛЬТРЫ
   ========================================================= */

@media (max-width: 699px) {

    .filters-container {

        width: 100%;

        padding: 10px;

        gap: 6px;

        flex-wrap: nowrap;

        overflow-x: auto;

        overflow-y: visible;

    }


    .filter {

        flex: 0 0 auto;

    }


    .filter-button {

        min-width: auto;

        padding: 8px 10px;

        white-space: nowrap;

    }


    .reset-button {

        flex: 0 0 auto;

        padding: 9px 10px;

        white-space: nowrap;

    }


    .filter-dropdown {

        width: 220px;

        max-width: calc(100vw - 30px);

    }

}



/* =========================================================
   ПАГИНАЦИЯ БРЕНДОВ
   ========================================================= */

.brand-pagination {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top: 8px;

    padding-top: 8px;

    border-top: 1px solid #eee;

}


.brand-page-button {

    width: 28px;

    height: 28px;

    border: 1px solid #ddd;

    background: white;

    border-radius: 5px;

    cursor: pointer;

    font-size: 18px;

    line-height: 1;

}


.brand-page-button:hover:not(:disabled) {

    background: #f3f3f3;

}


.brand-page-button:disabled {

    opacity: 0.35;

    cursor: default;

}


.brand-page-info {

    min-width: 45px;

    text-align: center;

    font-size: 13px;

    color: #666;

}



/* =========================================================
   ВЫБОР ПОЛА В DROPDOWN
   ========================================================= */

.gender-option {

    width: 100%;

    padding: 10px 12px;

    border: 1px solid #ddd;

    border-radius: 8px;

    background: white;

    cursor: pointer;

    text-align: left;

    font-size: 14px;

    transition: 0.2s;

}


.gender-option:hover {

    background: #f5f5f5;

}


.gender-option.selected {

    background: #222;

    color: white;

    border-color: #222;

}



/* =========================================================
   ПЕРЕКЛЮЧАТЕЛЬ ПОЛА
   ========================================================= */

.gender-buttons {

    width: 100%;

    display: flex;

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



/* =========================================================
   КНОПКА ПОЛА
   ========================================================= */

.gender-button {

    flex: 1;

    width: 50%;

    padding: 14px 10px;

    border: none;

    border-radius: 0;

    background: #e9e9e9;

    color: #555;

    font-size: 16px;

    font-weight: 500;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.1s ease;

}


.gender-button:hover {

    background: #dcdcdc;

}


.gender-button.selected {

    background: #222;

    color: white;

    font-weight: 600;

}


.gender-button:active {

    transform: scale(0.99);

}



/* =========================================================
   ЦВЕТА
   ========================================================= */

.color-options {

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 12px;

    max-height: 260px;

    overflow-y: auto;

    padding: 8px;

}


.color-option {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    border: 2px solid transparent;

    cursor: pointer;

    position: relative;

    transition:
        transform 0.15s ease,
        border-color 0.15s ease;

}


.color-option:hover {

    transform: scale(1.1);

}


.color-option.selected {

    border-color: #000;

}


.color-option.selected::after {

    content: "✓";

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 18px;

    font-weight: bold;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.7);

}



/* =========================================================
   НИЖНЯЯ НАВИГАЦИЯ
   ========================================================= */

.bottom-navigation {

    position: fixed;

    left: 0;

    right: 0;

    bottom: var(
        --tg-content-safe-area-inset-bottom,
        env(safe-area-inset-bottom, 0px)
    );

    height: 60px;

    display: flex;

    justify-content: space-around;

    align-items: center;

    background: white;

    border-top: 1px solid #ddd;

    z-index: 10000;

}



/* =========================================================
   КНОПКА НАВИГАЦИИ
   ========================================================= */

.bottom-nav-button {

    flex: 1;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-decoration: none;

    color: #777;

    font-size: 12px;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        opacity 0.15s ease,
        transform 0.1s ease;

}



/* =========================================================
   НАВЕДЕНИЕ
   ========================================================= */

.bottom-nav-button:hover {

    background: #f5f5f5;

    color: #222;

}



/* =========================================================
   НАЖАТИЕ
   ========================================================= */

.bottom-nav-button:active {

    transform: scale(0.96);

}



/* =========================================================
   ИКОНКА
   ========================================================= */

.bottom-nav-icon {

    font-size: 22px;

    line-height: 1;

    margin-bottom: 3px;

}



/* =========================================================
   ТЕКСТ
   ========================================================= */

.bottom-nav-text {

    font-size: 11px;

}



/* =========================================================
   АКТИВНАЯ КНОПКА
   ========================================================= */

.bottom-nav-button.active {

    color: #000;

}



/* =========================================================
   ТЕКУЩАЯ СТРАНИЦА
   ========================================================= */

/*
   Текущая страница:

   - визуально приглушена;
   - не имеет hover;
   - не имеет эффекта нажатия;
   - не реагирует на клики;
   - не является ссылкой.
*/

.bottom-nav-button.current {

    color: #aaa;

    background: transparent;

    opacity: 0.55;

    cursor: default;

    pointer-events: none;

}



/* =========================================================
   ТЕКУЩАЯ КНОПКА — HOVER
   ========================================================= */

.bottom-nav-button.current:hover {

    color: #aaa;

    background: transparent;

}



/* =========================================================
   ТЕКУЩАЯ КНОПКА — ACTIVE
   ========================================================= */

.bottom-nav-button.current:active {

    transform: none;

    color: #aaa;

    background: transparent;

}



/* =========================================================
   ТЕКУЩАЯ ИКОНКА
   ========================================================= */

.bottom-nav-button.current .bottom-nav-icon {

    opacity: 0.65;

}



/* =========================================================
   ТЕКУЩИЙ ТЕКСТ
   ========================================================= */

.bottom-nav-button.current .bottom-nav-text {

    opacity: 0.8;

}

/* =========================================================
   TELEGRAM FULLSCREEN / SAFE AREA
   ========================================================= */

.favorites-header {
    padding:
        max(
            16px,
            var(--tg-content-safe-area-inset-top, 0px)
        )
        16px
        0;
}

/* =========================================================
   ФИЛЬТРЫ — ТОЧНАЯ НАСТРОЙКА ПО HTML
   ========================================================= */

.filters-section {
    position: relative;
    z-index: 20;
}

.filters-scroll {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.filters-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Каждый фильтр — опорный контейнер для своего полотна */
.filters-container > .filter {
    position: relative;
    flex: 0 0 auto;
}

/* Кнопки фильтров */
.filters-container .filter-button {
    min-height: 38px;
    padding: 8px 11px;
    color: #322D29 !important;
    background: #E5E5E5 !important;
    border: 1px solid #BDBDBD !important;
    border-radius: 9px !important;
    white-space: nowrap;
    box-shadow: none !important;
}

/* Активная кнопка */
.filters-container .filter-button:hover,
.filters-container .filter-button[aria-expanded="true"] {
    color: #72383D !important;
    background: #DADADA !important;
    border-color: #72383D !important;
}

/* =========================================================
   ВЫПАДАЮЩЕЕ ПОЛОТНО
   ========================================================= */

.filters-container .filter-dropdown {
    position: absolute !important;
    top: calc(100% + 7px) !important;
    left: 0 !important;
    right: auto !important;

    width: 220px;
    min-width: 0;
    max-width: calc(100vw - 32px);

    max-height: min(55vh, 380px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    padding: 10px;
    box-sizing: border-box;

    background: #E5E5E5 !important;
    border: 1px solid #BDBDBD !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(50, 45, 41, 0.14) !important;

    z-index: 1000;
}

/* Содержимое фильтра */
.filters-container .filter-options {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Поиск бренда */
#brand-search.filter-search {
    width: 100%;
    min-height: 38px;
    margin-bottom: 8px;
    padding: 8px 10px;
    box-sizing: border-box;

    color: #322D29 !important;
    background: #F2F2F2 !important;
    border: 1px solid #BDBDBD !important;
    border-radius: 8px !important;
}

/* =========================================================
   ЦВЕТОВЫЕ ФИЛЬТРЫ
   ========================================================= */

/* Сетка: ровно 4 цвета в ряд */
#color-options .color-options {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    justify-items: center;
    align-items: center;
    width: 100%;
}

/* Цветовой образец: скруглённый квадрат */
#color-options .color-option {
    display: block;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
    min-height: 38px;
    padding: 0 !important;

    box-sizing: border-box;
    border: 1px solid #AFAFAF !important;
    border-radius: 7px !important;

    cursor: pointer;
    box-shadow: none !important;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

/* Наведение */
#color-options .color-option:hover {
    border-color: #72383D !important;
    transform: scale(1.05);
}

/* Выбранный цвет */
#color-options .color-option.selected {
    border: 2px solid #72383D !important;
    box-shadow: 0 0 0 2px rgba(114, 56, 61, 0.15) !important;
}

/* Фокус с клавиатуры */
#color-options .color-option:focus-visible {
    outline: 2px solid #72383D;
    outline-offset: 3px;
}


/* Полотно фильтра цветов */
#color-filter {
    width: 220px !important;
    max-width: calc(100vw - 32px);
    padding: 12px !important;
    box-sizing: border-box;

    background: #E5E5E5 !important;
    border: 1px solid #BDBDBD !important;
    border-radius: 12px !important;

    box-shadow: 0 8px 24px rgba(50, 45, 41, 0.14) !important;
}


/* =========================================================
   ПОЛОТНА ФИЛЬТРОВ — ПРИВЯЗКА К КНОПКАМ
   ========================================================= */

/* Контейнер фильтров */
.filters-container {
    position: relative;
    overflow: visible;
}

/* Каждый фильтр служит опорой для своего полотна */
.filters-container > .filter {
    position: relative;
    overflow: visible;
}

/* Общий стиль полотна */
.filters-container > .filter > .filter-dropdown {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    bottom: auto !important;

    width: 220px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;

    max-height: min(60vh, 420px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;

    box-sizing: border-box;
    z-index: 1000;

    background: #E5E5E5 !important;
    border: 1px solid #BDBDBD !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(50, 45, 41, 0.14) !important;
}

/* Бренд: левый край полотна под кнопкой */
#brand-filter {
    left: 0 !important;
    right: auto !important;
}

/* Тип: левый край полотна под кнопкой */
#type-filter {
    left: 0 !important;
    right: auto !important;
}

/* Цвет: правый край полотна под правым краем кнопки */
#color-filter {
    left: auto !important;
    right: 0 !important;
}

/* Размер: полотно растягивается на ширину кнопки */
#size-filter {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
}

/* =========================================================
   КНОПКА «СБРОСИТЬ» — ВСЕГДА БОРДОВАЯ
   ========================================================= */

#reset-filters,
#reset-filters:hover,
#reset-filters:focus,
#reset-filters:active {
    color: #FFFFFF !important;
    background: #72383D !important;
    border: 1px solid #72383D !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* =========================================================
   ПРОКРУТКА РЯДА ФИЛЬТРОВ
   ========================================================= */

.filters-scroll {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}



/* =========================================================
   ОБНОВЛЕНИЕ ФИЛЬТРОВ КАТАЛОГА
   ========================================================= */

/* Бренды: список без пагинации, прокрутка внутри dropdown */
#brand-filter {
    overflow: hidden;
    display: none;
    width: min(220px, calc(100vw - 32px));
    max-height: none;
    padding: 12px;
}
#brand-filter.active {
    display: flex;
    flex-direction: column;
}
#brand-search {
    flex: 0 0 auto;
}
#brand-options {
    min-height: 0;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: #72383D #e8e4e2;
}
#brand-options::-webkit-scrollbar {
    width: 6px;
}
#brand-options::-webkit-scrollbar-track {
    background: #e8e4e2;
    border-radius: 8px;
}
#brand-options::-webkit-scrollbar-thumb {
    background: #72383D;
    border-radius: 8px;
}
#brand-options .filter-option {
    flex: 0 0 auto;
    padding: 8px 5px;
}

/* Тип: чистая иерархия текста без рамок у строк */
#type-filter {
    width: min(220px, calc(100vw - 32px));
    max-height: min(65vh, 520px);
    overflow-y: auto;
    padding: 16px 18px;
}
#type-options {
    gap: 12px;
    padding: 2px 0 6px 4px;
}
#type-options .type-category {
    margin: 0;
    padding: 0;
}
#type-options .type-category-button,
#type-options .type-subcategory-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}
#type-options .type-category-button {
    padding: 8px 2px 7px;
    color: #72383D;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.035em;
}
#type-options .type-subcategories {
    padding: 2px 0 4px 12px;
}
#type-options .type-subcategory {
    margin: 3px 0 7px;
}
#type-options .type-subcategory-button {
    padding: 7px 2px;
    color: #322D29;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 500;
}
#type-options .type-items {
    padding: 3px 0 4px 9px;
}
#type-options .filter-option {
    padding: 7px 4px;
    gap: 10px;
    color: #322D29;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 6px;
}
#type-options .filter-option:hover {
    background: rgba(114, 56, 61, .06);
}
#type-options .filter-option input {
    flex: 0 0 16px;
    accent-color: #72383D;
}
#type-options .type-arrow {
    flex: 0 0 auto;
    margin-left: 10px;
    color: #8d7775;
    font-size: 20px;
    transition: transform .18s ease;
}
#type-options .type-category-button.open .type-arrow,
#type-options .type-subcategory-button.open .type-arrow {
    transform: rotate(90deg);
}


/* =========================================================
   ФИНАЛЬНОЕ ПРИМЕНЕНИЕ ФИРМЕННОГО ШРИФТА И ЦВЕТОВ КАТАЛОГА
   ========================================================= */
html,
body,
body *,
body *::before,
body *::after {
    font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
}

body {
    color: #322D29;
}

#type-filter,
#brand-filter,
#color-filter,
#size-filter {
    color: #322D29 !important;
    background: #E5E5E5 !important;
}

#type-options .type-category-button {
    color: #72383D !important;
    font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
    font-size: 21px !important;
    font-weight: 400 !important;
}

#type-options .type-subcategory-button {
    color: #72383D !important;
    font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 300 !important;
}

#type-options .filter-option,
#brand-options .filter-option,
#brand-search {
    color: #322D29 !important;
    font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
}

/* Размер и стиль названий брендов */
#brand-options .filter-option {
    font-size: 16px;
    line-height: 1.35;
    color: #72383D;
    font-weight: 400;
} 



/* =========================================================
   РАЗМЕР ПОЛОТЕН ФИЛЬТРОВ: ОКОЛО 8 СТРОК С ПРОКРУТКОЙ
   Бренд и Тип по ширине совпадают с Цветом; Размер не меняем.
   ========================================================= */

/* =========================================================
   ФИНАЛЬНЫЕ РАЗМЕРЫ И ПРОКРУТКА ФИЛЬТРОВ
   ========================================================= */

/* Ширина панелей: бренд, тип и цвет */
#brand-filter,
#type-filter,
#color-filter {
    width: 220px !important;
    max-width: calc(100vw - 32px) !important;
    box-sizing: border-box !important;
}

/* Панели не прокручиваем целиком */
#brand-filter,
#type-filter,
#color-filter,
#size-filter {
    box-sizing: border-box;
    overflow: hidden;
}

/* Бренд: поле поиска остаётся на месте,
   прокручивается только список */
#brand-options {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 280px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #72383D #e8e4e2;
}

/* Тип: категории и подкатегории прокручиваются вместе */
#type-options {
    min-height: 0;
    max-height: 280px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #72383D #e8e4e2;
}

/* Цвет: прокручивается именно внутренняя сетка */
#color-options .color-options {
    max-height: 280px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #72383D #e8e4e2;
}

/* Размер: ширину не меняем */
#size-options {
    min-height: 0;
    max-height: 280px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #72383D #e8e4e2;
}

/* Полосы прокрутки */
#brand-options::-webkit-scrollbar,
#type-options::-webkit-scrollbar,
#color-options .color-options::-webkit-scrollbar,
#size-options::-webkit-scrollbar {
    width: 6px;
}

#brand-options::-webkit-scrollbar-thumb,
#type-options::-webkit-scrollbar-thumb,
#color-options .color-options::-webkit-scrollbar-thumb,
#size-options::-webkit-scrollbar-thumb {
    background: #72383D;
    border-radius: 8px;
}