/* *************************************************************************************
************ Сисок товаров *************************************************************
***************************************************************************************/

/* Стили =============================================================================== 
    Активные элементы: #9A8873 (темно-коричневый)

    Ссылки
    a {color: #9A8873; text-decoration: none;}
    a:hover {text-decoration: none; color: #766756;} светлее #9A8873    темнее #766756

    Активная кнопка #9A8873;
    Активная кнопка:hover #766756;

    Очистить все выбранные фильтры  font-size: 14px;
    Очистить фильтр  font-size: 12px;
    Показать все / Свернуть font-size: 14px;

    Черный #140f0b;    
==================================================================================== */



/* Сортировка ============================================================================================================================= */
        .sort-container {position: relative; display: flex; justify-content: flex-end;}

        .sort-button {display: flex; align-items: center; width: 133px; padding: 9px 37px 10px 38px; cursor: pointer;  /* 208 */
            background-color: #fff; border: 1px solid #E3E3E3; position: relative;
            background-image: url(i_sort.jpg); background-repeat: no-repeat; background-position: 14px center; white-space: nowrap;
        }

            .sort-button::after {content: ''; position: absolute; right: 19px; top: 49%;  
                width: 5px; height: 5px; border-right: 1px solid #140f0b; border-bottom: 1px solid #140f0b;  
                transform: translateY(-50%) rotate(45deg);
                transition: transform 0.3s ease; /* Плавный поворот */
            }

        /* Состояние при открытом меню */
        .sort-button.drop-open::after {
            /* Переворачиваем галочку вверх */
            transform: translateY(-20%) rotate(225deg);
        }

        .sort-dropdown {display: none; position: absolute; top: 100%; width: 208px; right: 0; left: auto; background: #FFFFFF; border: 1px solid #E3E3E3; border-top: none; z-index: 100000;
        /*
        min-width: 180px;  
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        margin-top: 5px;
        */
        }

        .sort-dropdown.active {display: block;}
        .sort-item {cursor: pointer; color: #FFFFFF; /*#140f0b;*/}
        /*.sort-item:hover {background: #F4F4F4;}*/
    
        /* Стиль активного текста */
        .sort-item.selected {padding: 10px 10px 10px 16px; background-color: #9A8873; position: relative; padding-right: 35px;}
        .sort-item a {display: block; padding: 10px 10px 10px 16px; color: #140f0b;}
        .sort-item a:hover {color: #766756;}

        /* Галочка для активного элемента (через border) */
        .sort-item.selected::after {content: ''; position: absolute; right: 19px; top: 50%; width: 3px; height: 8px; border-right: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; transform: translateY(-60%) rotate(45deg);}
    
        /* --- */
    
            /* mobi */
            @media screen and (max-width: 880px) {                            
            /* Поменять стили в каталоге */            
                .sort-top {border-top: 1px solid #E3E3E3;}
            }

            @media all and (max-width: 450px) { 
                 .sort-button {width: 138px; padding: 9px 17px 10px 38px;}
                 .sort-button::after {content: none !important;}
                 .sort-dropdown {width: 193px;}                               
            }

            /* Одна колонка - 330 (Разрешение 360) */ 
            @media all and (max-width: 380px) { 
                .sort-button {width: 128px; padding: 9px 17px 10px 38px;}
                .sort-dropdown {width: 183px;} 
            }
           
           
/* / Сортировка ========================================================================================================= */

/* Фильтры ======================================================================================================================== */
    
    /* Контейнер панели -------------------------------------------------------------------------------------- */
        /* Основная панель */
        .filter-drawer {position: fixed; top: 0; bottom: 0; right: -100%; width: 400px;
            /*height: 100%;*/    
            /*height: 100vh;*/   /* Запасной вариант */
            /*height: 100dvh;*/  /* Динамическая высота (учитывает панели браузера) */    
            background: #fff; z-index: 1000001; transition: right 0.3s ease;
    
            /* Добавляем Flexbox здесь */
            display: flex;
            flex-direction: column; 
            /*overflow: hidden;*/ /* Запрещаем скролл самой панели */
        }

        /* Состояние "открыто" */
        .filter-drawer.active {right: 0;} 

        /* --- */

            /* Мобильная версия */
            @media (max-width: 768px) {
                .filter-drawer {width: 100%; /* На весь экран */}
            }

        /* Затемнение фона ------------------ */
            .filter-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; z-index: 1000000;}
            .filter-overlay.active {display: block;}
        /* / Затемнение фона ------------------ */

        /* Шапка (Фильтры + Х) ---------------------------- */
            .drawer-header {display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid #eee; background: #fff;
                flex: 0 0 auto; /* Фиксируем высоту шапки */
            }

            .drawer-title {font-size: 18px; margin: 0;}

            .btn-close-drawer {background: none; border: none;
                font-size: 24px; /* Крупный крестик */
                line-height: 1; color: #140f0b; cursor: pointer; padding: 0 5px; transition: color 0.2s;
                display: flex; align-items: center; justify-content: center;
                margin-top: -3px;
                
            }

            /* Цвет крестика при наведении */
            .btn-close-drawer:hover {color: #9A8873; }

            /* --- */
            
                /* Увеличиваем область нажатия для мобильных устройств */
                @media (max-width: 768px) {
                    .btn-close-drawer {
                        padding: 10px;
                        margin-right: -10px; /* Чтобы визуально был ближе к краю */
                    }
                }
        /* / Шапка (Фильтры + Х) ---------------------------- */
        
    /* / Контейнер панели -------------------------------------------------------------------------------------- */


    /* Стили radio ------------------------------------------------------------------------------------------------ */
    
        /* Скрываем дефолтный радио-баттон */
        .radio-container input {display: none;}

        /* Рисуем внешний круг */
        .checkmark-r {height: 18px; width: 18px; border: 2px solid #EEEEEE; border-radius: 50%; margin-right: 12px; position: relative;
            /* Добавляем флекс для центрирования содержимого */
            display: flex; align-items: center; justify-content: center;
            transition: all 0.2s ease; box-sizing: border-box; /* Важно, чтобы рамка не раздувала размер */
        }

        /* Рисуем точку внутри при выборе */
        .radio-container input:checked + .checkmark-r {border-color: #9A8873;}

        /* Дополнительно: подсветим текст при выборе */
        /* .radio-container input:checked ~ .label-text {color: #9A8873;} */


        .radio-container input:checked + .checkmark-r:after {
            content: "";
            width: 8px; height: 8px;  /* Размер точки */
            border-radius: 50%; background: #9A8873;
            display: block; /* Убираем top/left, флекс сам поставит точку в центр */ 
        }

        .radio-container {
            display: flex; /* Выравнивает кружок и текст в ряд */
            align-items: center; /* Центрирует кружок по вертикали относительно текста */
            cursor: pointer; /* Меняет курсор на "ручку" */
            /*padding: 10px 0;*/ /* Отступы сверху и снизу для удобства нажатия */
            margin-bottom: 12px;
            width: 100%; /* Растягиваем на всю ширину окна фильтров */
            user-select: none; /* Чтобы текст не выделялся при случайном двойном клике */
        }

        /* Опционально: эффект наведения на всю строку */
        /*
        .radio-container:hover {background-color: #f9f9f9;}
        */

        /* Эффект наведения ТОЛЬКО на кружок */
        .radio-container:hover .checkmark-r {
            border-color: #CCCCCC; /* Делаем рамку темнее */
            /*background-color: #f0f0f0;*/ /* Легкая тень внутри кружка */
        }

        /* Если кнопка уже активна, можно сделать цвет еще насыщеннее при наведении */
        /*
        .radio-container:hover input:checked + .checkmark-r {border-color: #0056b3;}
        */
    
    /* / Стили radio ------------------------------------------------------------------------------------------------ */


    /* Стили чекбокса ------------------------------------------------------------------------------------------------ */
    
        /* Контейнер для чекбокса --------------------------------------------------------------- */
            .custom-checkbox {display: flex; align-items: center; position: relative;
                padding-left: 35px; margin-bottom: 12px;
                cursor: pointer; font-size: 16px; user-select: none; transition: color 0.2s;
            }
        
            /* Не активный контейнер для чекбокса (если нет товаров) --------------- */
        
                /* Общие стили для заблокированного контейнера */
                .custom-checkbox.is-disabled {
                    cursor: not-allowed; /* Указатель "запрещено" */
                    color: #bbb; /* Блеклый цвет текста */
                }

                /* Если инпут заблокирован — красим текст в серый */
                .custom-checkbox input:disabled ~ .label-text {
                    color: #bbb !important;
                    user-select: none; /* Запрещаем выделение текста */
                }

                /* Дополнительно: если вся обертка имеет класс disabled */
                .custom-checkbox.is-disabled .label-text {color: #bbb; cursor: not-allowed;}

                /* Убираем эффект наведения на текст для неактивных */
                .custom-checkbox.is-disabled:hover .label-text {color: #bbb;}

            /* / Не активный контейнер для чекбокса (если нет товаров) --------------- */

        /* / Контейнер для чекбокса --------------------------------------------------------------- */

        /* Стиль счетчика фильтров */
        .item-count-filter {font-size: 12px; margin-left: 5px; color: #9A8873;}

        /* Заголовок */
        .item-count-filter-cont {/*font-size: 18px;*/}    

        /*
        .item-count-filter-cont {display: flex;}                                                                                                                                 
        .item-count-filter {
            display: flex;
            align-items: center;  
            justify-content: center;
  
            width: 17px;
            height: 17px;
            background-color: #9A8873;
            color: #FFFFFF;           
            border-radius: 50%;       
  
            font-size: 10px; 
  
            margin: 2px 0 0 10px;
  
            line-height: 0; 
            padding-bottom: 2px; 
            box-sizing: border-box; 
        }
        */
        /* 
        .item-count-filter {display: flex; flex: 0 0 17px; justify-content: center; align-items: center; margin: 2px 11px 0 9px; height: 17px; border-radius: 8.5px; font-size: 10px; background-color: #9A8873; color: #FFFFFF;}
        */    
        
        /* Стиль счетчика товаров */
        .item-count {font-size: 12px; margin-left: 5px; color: #999;}

        /* Цвет текста ---------------------------------------------- */

            /* Цвет текста по умолчанию */
            .label-text {color: #140f0b; transition: color 0.2s ease;}

        /* / Цвет текста ---------------------------------------------- */

        /* Скрываем стандартный инпут */
        .custom-checkbox input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}

        /* Создаем кастомный квадрат */
        .checkmark {position: absolute; top: 0; left: 0; 
            height: 22px; width: 22px; background-color: #eee; border-radius: 4px; /* Скругление */ transition: all 0.2s ease;
        }

        /* Эффект при наведении */
        .custom-checkbox:hover input ~ .checkmark {background-color: #ccc;}

        /* Стили для активного (нажатого) состояния */
        .custom-checkbox input:checked ~ .checkmark {background-color: #9A8873; /* Цвет бренда */}

        /* Рисуем галочку (скрыта по умолчанию) */
        .checkmark:after {content: ""; position: absolute; display: none;}

        /* Показываем галочку при выборе */
        .custom-checkbox input:checked ~ .checkmark:after {display: block;}

        /* Стилизация самой галочки */
        .custom-checkbox .checkmark:after {left: 8px; top: 4px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg);}

        /* Дополнительно: подсветим текст при выборе */
        /* .custom-checkbox input:checked ~ .label-text {color: #9A8873;} */

        /* Стили для квадратика (checkmark) при disabled */
        .custom-checkbox input:disabled ~ .checkmark {background-color: #f5f5f5; border-color: #ddd; opacity: 0.6;}

        /* Если вдруг чекбокс был выбран, но стал недоступен — делаем галочку серой */
        .custom-checkbox input:disabled:checked ~ .checkmark {background-color: #ccc;}

        /* Убираем эффекты наведения для неактивных */
        .custom-checkbox.is-disabled:hover input ~ .checkmark {background-color: #f5f5f5; border-color: #ddd;}

    /* / Стили чекбокса ------------------------------------------------------------------------------------------------ */


    /* Фиксация кнопок внизу и прокрутка --------------------------------------------------------------------------------------------- */
        /* Контейнер внутри drawer-body */
        .drawer-body {
            flex: 1 1 auto; /* Занимает всё оставшееся пространство */
            overflow: hidden; /* Важно: само тело не скроллим, скроллим обертку внутри */
            position: relative;
            transition: opacity 0.2s ease-in-out;
        }

        /* Обертка внутри AJAX (из файла get_filters.php) */
        .drawer-wrapper {
            /*
            display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%;    
            */
    
           /* Вариант для браузера Samsung */
           position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
        }

        /* ОБЛАСТЬ СКРОЛЛА */
        .drawer-scroll-area {flex: 1 1 auto; overflow-y: auto; padding: 20px;
            /* Улучшаем скролл на мобильных */
            -webkit-overflow-scrolling: touch;
        }

        /* ФУТЕР (Кнопки) */
        /*
        .drawer-footer {flex: 0 0 auto; padding: 15px 20px; border-top: 1px solid #eee; background: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
            z-index: 1000010;
        }
        */

        /* Нижняя панель с кнопками (всегда видна) */
        .drawer-footer {
            flex: 0 0 auto; /* Не сжимается */
            padding: 15px; background: #fff; border-top: 1px solid #eee;
            display: flex;
            /*gap: 10px;*/
            /* Учет безопасных зон для некоторых смартфонов */
            padding-bottom: calc(15px + env(safe-area-inset-bottom));
            z-index: 1000010;
        }

        .drawer-footer button, .drawer-footer a {/*flex: 1;*/ padding: 12px; box-sizing: border-box;}
        .drawer-footer a {flex: 0 0 calc(62% - 7.5px); box-sizing: border-box; }
        .drawer-footer button {flex: 0 0 calc(38% - 7.5px); box-sizing: border-box;}
        

        /* Вместо gap используем margin для всех элементов, кроме последнего */
        
        .drawer-footer button:not(:last-child), 
        .drawer-footer a:not(:last-child) {margin-right: 15px;}
        

        /* Стили кнопок */
        .btn-submit, .btn-clear {width: 100%; /* заставляет flex корректно делить место */}
        /*.btn-submit {width: 62%;}
        .btn-clear {width: 38%;}*/
        
        .btn-clear {background: #f5f5f5; border: 1px solid #ddd; padding: 12px; border-radius: 6px; cursor: pointer;}

        .btn-submit {background: #9A8873; color: #fff; border: none; padding: 12px; border-radius: 6px; cursor: pointer; font-weight: bold;}
        .btn-submit:hover {background: #766756; color: #fff;}

        /* --- */
        
            /* Чтобы кнопки в мобильной версии были удобными */
            @media (max-width: 768px) {
                .drawer-footer {
                /* Отступ для челок/меню смартфонов */
                    padding-bottom: 30px; 
                    padding-bottom: calc(30px + env(safe-area-inset-bottom));
                }
            
            }
    /* / Фиксация кнопок внизу и прокрутка --------------------------------------------------------------------------------------------- */


    /* Открыть/закрыть группы фильтров (галочки) ------------------------------------------------------------------------------------------------ */
    
        /* Убираем стандартный маркер браузера */
        .filter-group-title::-webkit-details-marker {display: none;}
        /*
        .filter-group-title {
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            cursor: pointer;
            font-weight: bold;
            font-size: 16px;
            border-bottom: 1px solid #f0f0f0;
        }
        */
        .filter-group-title {display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 15px 0; list-style: none;}

        /* Контент внутри группы */
        .filter-group-content {padding: 15px 0;}

        /* Стили иконки-галочки */
        .chevron {
            transition: transform 0.3s ease;
            transform: rotate(180deg); /* По умолчанию вверх (группа открыта) */
        }

        /* Когда details закрыт (нет атрибута open) — галочка вниз */
        details:not([open]) .chevron {transform: rotate(0deg);}

        /* Дополнительно: убираем рамку при фокусе */
        .filter-group-title:focus {outline: none;}

        /* Разделитель между группами */
        .filter-group {border-bottom: 1px solid #eee;}
        .filter-group:last-child {border-bottom: none;}

        /* Очистить фильтры группы --------- */
            .group-controls {display: flex; align-items: center; gap: 15px;}

            .reset-group-btn {background: none; border: none; color: #9A8873; font-size: 12px; font-weight: normal; cursor: pointer; padding: 0 5px 5px 5px; transition: color 0.2s; text-decoration: none;}
            .reset-group-btn:hover {text-decoration: none; color: #766756;}
        /* / Очистить фильтры группы --------- */
        
        
        /* Спиннер на кнопке "Показать" (анимация загрузки) --------- */
        
            /* Стили для лоадера внутри кнопки */
            .loader-spinner {display: inline-block;
                width: 18px; height: 18px;
                border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff;
                animation: spin 0.8s linear infinite;
                vertical-align: middle; margin-right: 8px;
            }

            @keyframes spin {
                to { transform: rotate(360deg); }
            }

            /* Состояние кнопки при загрузке */
            .btn-submit.loading {
                pointer-events: none; /* Запрещаем клики */
                opacity: 0.8; display: flex; align-items: center; justify-content: center;
            }
        
        /* / Спиннер на кнопке "Показать" (анимация загрузки) --------- */


    /* / Открыть/закрыть группы фильтров (галочки) ------------------------------------------------------------------------------------------------ */



    /* Скрытиый контейнер (если больше 5) ---------------- */
        /* Скрытый блок с остальными фильтрами */
        .extra-filters {display: none; /* По умолчанию скрыто */}

        .extra-filters.expanded {display: block; /* Показываем при клике */}

        /* Кнопка "Показать все" / "Свернуть" */
        .show-more-btn {background: none; border: none; color: #9A8873; font-size: 14px;
            padding: 10px 0; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: color 0.2s; text-decoration: none;
        }
        .show-more-btn:hover {text-decoration: none; color: #766756;}

        .icon-arrow {transition: transform 0.3s ease;}

        /* Поворот стрелки, когда список развернут */
        .show-more-btn.active .icon-arrow {transform: rotate(180deg);}
    /* / Скрытиый контейнер (если больше 5) ---------------- */


    /* Ползунок - переключатель, который меняет цвет при активации ------------ */    
    /* Контейнер для текста и ползунка в одну строку */

        /* Контейнер для выравнивания всей строки */
        .switch-control {display: block; /* Позволяет строке занимать всю ширину */ padding: 10px 0; cursor: pointer;}

        /* Обертка для расположения элементов рядом */
        .switch-wrapper {display: flex; align-items: center;
            gap: 12px; /* Расстояние между ползунком и текстом */
        }

        /* Сама кнопка-переключатель (размеры прежние) */
        .switch {position: relative;
            flex: 0 0 40px; /* Фиксированная ширина, чтобы не сжимался */
            height: 22px;
        }

        .switch input {opacity: 0; width: 0; height: 0;}

        .slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .3s; border-radius: 22px;}
        .slider:before {position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%;}

        input:checked + .slider {background-color: #9A8873;}

        input:checked + .slider:before {transform: translateX(18px);}

        /* Стили для неактивного состояния текста */
        input:disabled ~ .label-text {color: #bbb !important;}

        /* Отключаем клики для disabled */
        .is-disabled {pointer-events: none;}
    
    /* / Ползунок - переключатель, который меняет цвет при активации ------------ */



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

        .price-filter-row {
            display: flex !important;
            flex-wrap: nowrap !important; /* Запрет переноса */
            align-items: flex-end;        /* Выравнивание по низу инпутов */
            width: 100%;                  /* Строка на всю ширину родителя */
            gap: 8px;                     /* Отступ между инпутами и кнопкой */            
        }

        .price-fields {display: flex; flex-wrap: nowrap; align-items: center; gap: 4px;
            /* ГЛАВНОЕ: вычитаем ширину кнопки (40px) и отступ (8px) из общей ширины */
            width: calc(100% - 48px); 
            flex-shrink: 1; /* Разрешаем инпутам сжиматься */
        }

        .price-fieldset {
            flex: 1; /* Инпуты делят место поровну */
            min-width: 0 !important; /* КРИТИЧНО: разрешает fieldset сжиматься меньше контента */
            border: 1px solid #dcdfe6;
            border-radius: 8px;
            margin: 0; padding: 0 4px 0 4px; /* Уменьшили внутренний отступ для компактности */
        }

        .price-fieldset legend {font-size: 12px; color: #999; padding: 0 3px; margin-left: 4px; line-height: 1; height: 13px;}

        .price-fieldset input {
            width: 100%; height: 24px; /* Чуть компактнее по высоте */
            border: none !important; outline: none !important; background: transparent;
            font-size: 13px; padding: 0 4px 0 4px;
        }

        /* СКРЫВАЕМ СТРЕЛКИ */
        .price-fieldset input::-webkit-outer-spin-button,
        .price-fieldset input::-webkit-inner-spin-button {
            -webkit-appearance: none; margin: 0;
        }
        .price-fieldset input[type=number] {
            -moz-appearance: textfield;
        }

        /* Круглая кнопка со стрелочкой ---------------------- */
            .arrow-button {
                /* 1. Геометрия: делаем строгий квадрат */
                width: 32px; height: 32px;
    
                /* 2. Форма: превращаем в круг */
                border-radius: 50%;
    
                /* 3. Центрирование: используем flex, чтобы иконка была в середине */
                display: inline-flex; align-items: center; justify-content: center;
    
                /* 4. Сброс настроек: убираем лишнее, что мешает клику */
                padding: 0; margin: 0; border: none; outline: none; overflow: hidden; /* Обрезаем всё, что может вылезать за круг */
    
                /* 5. Стили */
                background-color: #9A8873; color: white; cursor: pointer; transition: background 0.3s;
            }

            /* Чтобы стрелка не перекрывала область клика некорректно */
            .arrow-button svg {width: 22px; height: 22px; pointer-events: none; /* Пропускает клик сквозь себя на саму кнопку */}

            /* Эффект наведения на ВЕСЬ круг */
            .arrow-button:hover {background-color: #766756;}
        /* / Круглая кнопка со стрелочкой ---------------------- */  
  

        /* галочка внутри второго поля ------------ */
            .input-wrapper {position: relative; display: inline-block; width: 100%;}

            .check-icon {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); 
                color: #9A8873;
                pointer-events: none; /* Чтобы клик по галочке попадал в input */
            }

            /* Отступ для текста в инпуте, чтобы цифры не заходили под галочку */
            .input-wrapper input {padding-right: 35px !important; box-sizing: border-box;}
        
        /* / галочка внутри второго поля ------------ */


    /* / Цена ---------------------------------------------------------------- */
    
    
    /* Выпадающий список ---------------------------------------------------------------- */
        .select-wrapper {position: relative; width: 100%;}

        .custom-select {width: 100%; padding: 10px 35px 10px 12px; background: #fff; border: 1px solid #ddd; border-radius: 6px;
            font-size: 14px; color: #140f0b; cursor: pointer;
            /* Убираем стандартную стрелку браузера */
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            outline: none;
            transition: border-color 0.2s;
        }

        .custom-select:focus {
            border-color: #2196F3;
        }

        /* Кастомная стрелочка вниз */
        .select-arrow {position: absolute; top: 50%; right: 15px;
            transform: translateY(-50%); width: 0; height: 0;
            border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #999;
            pointer-events: none; /* Чтобы клик по стрелке открывал селект */
        }

        /* Стиль для disabled селекта (если нет товаров) */
        .custom-select:disabled {background-color: #f5f5f5; color: #bbb; cursor: not-allowed;}
    /* / Выпадающий список ---------------------------------------------------------------- */       

    /* Одиночный блок ----------------------------------------------- */
        .filter-group-simple {
            padding: 15px 20px; /* Совпадает с отступами внутри scroll-area */
            border-bottom: 1px solid #eee; background: #fff;
        }

        /* Если такой блок идет первым, можно убрать верхний отступ у scroll-area */
        .drawer-scroll-area {padding: 0; /* Убираем общий паддинг, переносим его в группы */}

        /* Настраиваем паддинги для обычных групп с деталями, чтобы всё совпало */
        .filter-group {padding: 0 20px; border-bottom: 1px solid #eee;}

        .filter-group-title {padding: 15px 0;}
    /* / Одиночный блок ----------------------------------------------- */

    /* Загрузка в filterContent ------------------------------------------ */
        .initial-loader {display: flex; flex-direction: column; align-items: center; justify-content: center;
            height: 200px; /* Чтобы лоадер был по центру пустой панели */
            color: #999;
        }

        /* Используем тот же спиннер, но серого цвета */
        .loader-spinner.gray {border-top-color: #2196F3; border-right-color: #eee; border-bottom-color: #eee; border-left-color: #eee;
            width: 30px; height: 30px; margin-bottom: 10px;
        }
    /* / Загрузка в filterContent ------------------------------------------ */

    /* Бренды - Поле поиска ------------------------------------------------ */
        .filter-search-wrapper {position: relative; margin-bottom: 12px; width: 100%; /* Ограничиваем ширину обертки */ box-sizing: border-box;}

        .filter-search-input {
            width: 100%; /* Теперь 100% означает "ровно по ширине контейнера" */
            box-sizing: border-box; /* КРИТИЧНО: отступы теперь внутри ширины */
            padding: 8px 12px 8px 32px; border: 1px solid #eee; border-radius: 6px; font-size: 13px; outline: none; background: #f9f9f9;
            /* Убираем возможное влияние стандартных стилей браузера */
            margin: 0; 
            display: block;
        }

        .filter-search-input:focus {border-color: #9A8873; background: #fff;}

        /* Иконка лупы */
        .search-icon {position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 1;}

        .filter-list-container {
            max-height: 250px; /* Опционально: внутренний скролл только для брендов */
            overflow-y: auto;
            -webkit-overflow-scrolling: touch; /* Плавность для iOS */
        }
    
        /* Всегда показывать выбранные чекбоксы, даже если они в скрытом блоке */
        .filter-item-label:has(input:checked) {display: flex !important;}

        /* Убедитесь, что поиск не перекрывает клики */
        .filter-search-input {position: relative; z-index: 2;}
   
   
        /* чтобы клик всегда «прошивал» до чекбокса ----------------------- */
            .filter-item-label {cursor: pointer; position: relative;}

            /* Убеждаемся, что клик по тексту всегда выбирает инпут */
            .filter-item-label span {pointer-events: none;}

            /* Сам инпут должен быть доступен для событий */
            .filter-item-label input {pointer-events: all;}
        /* / чтобы клик всегда «прошивал» до чекбокса ----------------------- */
   
        /* чтобы клик всегда попадал в цель */
            .filter-item-label {position: relative; pointer-events: auto; /* Разрешаем события на всей строке */}

            /* Весь контент внутри label не должен мешать клику дойти до input */
            .filter-item-label .label-text,
            .filter-item-label .checkmark,
            .filter-item-label .item-count {pointer-events: none;}

            /* Только сам input и label (обертка) реагируют на клик */
            .filter-item-label input {pointer-events: auto;}
        /* / чтобы клик всегда попадал в цель */
   
    /* / Бренды - Поле поиска ------------------------------------------------ */


    /* Плавное появление контента ----------------------------------------------------- */    
        /* Контейнер фильтров */
        #filterContent {transition: opacity 0.2s ease-in-out; opacity: 1;}

        /* Состояние во время AJAX-запроса */
        #filterContent.loading {opacity: 0.4; /* Контент не исчезает, а плавно тускнеет */ pointer-events: none; /* Запрещаем клики во время загрузки */}

        /* Убираем дергание при восстановлении скролла */
        .filter-list-container {scroll-behavior: auto !important;}
    /* / Плавное появление контента ----------------------------------------------------- */


    /* Полоса загрузки ----------------------------------------------------- */
        .loader-line {position: absolute;
            top: 60px; /* Высота filter-header */
            left: 0; height: 3px; width: 0; background: #9A8873;
            z-index: 1001; /* Выше контента */
            transition: width 0.4s ease, opacity 0.3s ease; opacity: 0;
        }

        /* Класс, который мы будем добавлять через JS */
        .loader-line.active {width: 100%; opacity: 1;}
    /* / Полоса загрузки ----------------------------------------------------- */
    

    /* Выбранные фильтры ------------------------------------------------------ */
        .selected-filters-wrapper {padding: 20px; border-bottom: 1px solid #eee;}

        .selected-filters-list {
            display: flex;
            flex-wrap: wrap;     
            /* Или nowrap + overflow-x: auto для скролла в ряд */
            /*
            flex-wrap: nowrap;
            overflow-x: auto;
            */
    
            gap: 10px;
            align-items: center;
        }

        .filter-chip {
            cursor: pointer; /* Вся кнопка теперь выглядит кликабельной */
            user-select: none; /* Чтобы текст не выделялся при случайном двойном клике */
            transition: background 0.2s;
    
            display: flex;
            align-items: center;
            background: #EBEBEB;
            border: 1px solid #EBEBEB;
            border-radius: 20px;
            padding: 4px 10px 4px 12px;
            font-size: 13px;
            color: #140f0b;
            white-space: nowrap;
        }

        .filter-chip:hover {
            /*background: #e4e7ed;*/ /* Подсветка при наведении */
            color: #766756;
        }

        .filter-chip span {margin-right: 6px;}

        .remove-chip {background: none; border: none; color: #9A8873; font-size: 18px; cursor: pointer; line-height: 1; padding: 0;}
        .remove-chip:hover {color: #766756;}

        /* Важно: чтобы клик по тексту или крестику не мешал скрипту */
        .filter-chip span, 
        .filter-chip .remove-chip {pointer-events: none;}

        .clear-all-link {background: none; border: none; color: #9A8873; text-decoration: none; font-size: 14px; cursor: pointer; transition: color 0.2s;}
        .clear-all-link:hover {text-decoration: none; color: #766756;}    
    
    /* / Выбранные фильтры ------------------------------------------------------ */


    /* Финиш (чекбоксы / radio) ------------------------------------------------------ */
    
        /* Сетка для плиток */
        .finish-grid { display: grid; gap: 10px; margin-top: 0;
            /* grid-template-columns: repeat(3, 1fr); */ /* 3 колонки - задаётся в php */    
        }

        /* Прячем стандартный чекбокс и радиокнопку */
        .finish-item input[type="checkbox"], 
        .finish-item input[type="radio"] {display: none;}

        /* Базовый стиль карточки */
        .finish-item label {display: block; cursor: pointer;
            border: 2px solid #eee; 
            border-radius: 15px;
            overflow: hidden; transition: all 0.2s ease-in-out; text-align: center;
        }

        .finish-item label img {
            width: 100%; display: block; 
            /*height: 80px;*/
            object-fit: cover; /* Чтобы текстура не искажалась */
        }

        .finish-item label span {
            display: block;
            padding: 8px 4px;
            font-size: 13px;
            color: #333;
        }

        /* Стиль при наведении */
        .finish-item label:hover {
            border-color: #ddd;
        }

        /* Стиль при выборе (Check) */
        .finish-item input[type="checkbox"]:checked + label,
        .finish-item input[type="radio"]:checked + label {
            border-color: #9A8873; /* Цвет бренда */
            /* background-color: #f0f7ff; */
            box-shadow: 0 4px 10px rgba(154, 136, 115, 0.2); /* 0, 123, 255 */
        }

        /* Добавим галочку при выборе (опционально) */
        .finish-item input[type="checkbox"]:checked + label::after,
        .finish-item input[type="radio"]:checked + label::after {
            content: '✓';
            position: absolute;
            top: 5px; right: 5px;
            background: #9A8873;
            color: white;
            width: 20px; height: 20px;
            border-radius: 50%;
            font-size: 12px;
            line-height: 20px;
        }

        .finish-item { position: relative; } /* Для позиционирования галочки */
       
    /* / Финиш ------------------------------------------------------ */


/* / Фильтры (чекбоксы / radio) ======================================================================================================================== */


/* Бренды ======================================================================================================================== */
    .logo-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 30px; max-width: 1000px; margin: 0 auto; padding: 20px;}
    .logo-item {display: flex; flex-direction: column; align-items: center; width: 100%; text-decoration: none; transition: transform 0.2s ease, opacity 0.2s ease;}
    .logo-item:hover {transform: translateY(-3px); opacity: 0.85;}
    
    .logo-wrapper {width: 160px; height: 120px; display: flex; align-items: center; justify-content: center; background-color: #f9f9f9; border-radius: 4px; margin-bottom: 10px; border: 1px solid #eee;}
    .logo-wrapper img {max-width: 100%; max-height: 100%; object-fit: contain;}

    .logo-title {font-size: 14px; color: #333; text-align: center; font-weight: 500; word-break: break-word;}
    .logo-item:hover .logo-title {text-decoration: underline;}
/* / Бренды ======================================================================================================================== */

/* Отделки ======================================================================================================================== */
    .fabric-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 27px; padding: 27px;}
    .fabric-item {display: flex; flex-direction: column; align-items: center; background: #fff; border: 1px solid #E3E3E3; border-radius: 4px; overflow: hidden;}
    .fabric-image-wrapper {width: 100%; aspect-ratio: 260 / 96; position: relative; background: #f5f5f5;}
    .fabric-image-wrapper img {width: 100%; height: 100%; object-fit: cover; display: block;}
    .fabric-title {padding: 12px; text-align: center; margin: 0; width: 100%; box-sizing: border-box;}
/* / Отделки ======================================================================================================================== */