/* Стили для активной вкладки */
.t-store .t-store__tabs__controls .t-store__tabs__button_active {
    background-color: #FFE600 !important; /* Цвет активной кнопки */
    color: #333 !important; /* Цвет текста активной кнопки */
    border-radius: 20px !important; /* Закругленные края */
    padding: 10px 20px !important; /* Отступы внутри кнопки */
    margin: 5px !important; /* Расстояние между кнопками */
    transition: all 0.3s ease !important; /* Плавный переход */
    border: none !important; /* Убираем границу */
}

/* Стили для обычной кнопки */
.t-store .t-store__tabs .t-store__tabs__button {
    background-color: white; /* Цвет обычной кнопки */
    color: #333 !important; /* Цвет текста обычной кнопки */
    border-radius: 40px !important; /* Закругленные края */
    padding: 10px 20px !important; /* Отступы внутри кнопки */
    margin: 5px !important; /* Расстояние между кнопками */
    transition: all 0.3s ease !important; /* Плавный переход */
    border: none !important; /* Убираем границу */
}

/* Добавление эффекта наведения для обычной кнопки */
.t-store .t-store__tabs .t-store__tabs__button:hover {
    background-color: #FFE600 !important; /* Цвет при наведении */
    color: #333 !important; /* Цвет текста при наведении */
    border-bottom: none !important; /* Убираем нижнюю границу */
}

/* Исправление мобильной версии */
@media screen and (max-width: 560px) {
    
        .t-store .t-store__tabs__controls .t-store__tabs__button_active .t-store__tabs__button-title:after {
            border-bottom: none!important;
        }
        
    .t-store .t-store__tabs__controls {
        display: flex !important;
        flex-direction: column !important; /* Располагаем кнопки вертикально */
        align-items: center !important; /* Центрируем кнопки по горизонтали */
    }
    
    .t-store .t-store__tabs__controls .t-store__tabs__button {
        position: relative !important;
        padding: 0px 20px !important; /* Уменьшение высоты кнопки */
        margin: 5px !important; /* Расстояние между кнопками */
        overflow: visible !important;
        justify-content: center !important; /* Центрирование текста внутри кнопки */
        text-align: center !important; /* Выравнивание текста по центру */
        flex-shrink: 0 !important;
        width: 100% !important; /* Растягиваем кнопки на 100% ширины */
        max-width: 90% !important; /* Устанавливаем максимальную ширину с небольшим отступом */
        border: none !important; /* Убираем границу */
    }
}

.t-store .t-store__tabs_tabs .t-store__tabs__content {
    margin: 30px 0 0 0;
    background: #fff;
    max-width: 100%;
    border-radius: 20px;
    padding: 20px;
}





.js-store-grid-cont {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);  /*Количество колонок на десктопе*/
    gap: 20px;  /*Отступы между карточками*/
    box-sizing: border-box;
}

.t-slds__container {
    border-radius: 20px;
}

.t-store__card__btns-wrapper a {
    width: 100%;    /*Ширина кнопок на 100%*/
}

.t-slds__bgimg {
    border-radius: 10px;
}

.t-slds__thumbsbullet-border {
    border-radius: 10px;
}

.uc-maincatalog .js-store-grid-cont {
    padding: 0 20px;
}

.t-store__relevants-grid-cont .t-store__card__wrap_all {
    background-color: #fff!important;
}

.js-store-grid-cont:before,
.js-store-grid-cont:after,
.t-store__grid-separator{
  display: none !important;     /*Скрываем все лишние элементы, чтобы блок нормально выглядел*/
}
/*Общие настройки ширины и высоты карточки*/
.js-product {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}
    /*Если нужно расположить варианты на одной строке с заголовком*/
.js-product-edition-option {
    /* display: flex; */
    /* justify-content: space-between; */
    /* gap: 20px; */
}
.t-store__card__bgimg, .t-store__card__bgimg_second {
    margin: 10px;   /*Отступы вокруг изображений*/
    border-radius: 12px !important; /*Скругление углов изображений*/
    overflow: hidden;
}

/*Настройка количества колонок для планшетов*/
@media screen and (max-width: 960px){
   .js-store-grid-cont {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
} 
}
/*Настройка количества колонок для мобилок*/
@media screen and (max-width: 480px){
   .js-store-grid-cont {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
} 
}




/*-----Стрелочка внутри кнопок фильтров-----*/
.t-store__filter__item-title:after {
    border-right-color: #002861;    /*Цвет одной части стрелки*/
    border-bottom-color: #002861;   /*Цвет другой части стрелки*/
    top: -3px;  /*Положение стрелки*/
}
/*-----Выбранные характеристики-----*/
.t-store__filter__chosen-val {
    background-color: white;    /*Цвет фона выбранных характеристик*/
}
/*-----Кнопка очистить всё-----*/
.t-store__filter__reset {
    padding: 4px 8px;   /*Отступы внутри кнопки*/
    background-color: rgb(255 255 255 / 40%);   /*Фоновый Цвет*/
    border-radius: 100px;   /*Радиус скругления углов*/
    border: none;   /*Удаление обводки снизу*/
}
/*-----Количество найденых товаров-----*/
.t-store__filter__prods-number {
    background-color: #ffffff;  /*Фоновый цвет*/
    display: inline-block;
    padding: 4px 12px;  /*Внутренние отступы*/
    border-radius: 100px;   /*Радиус скругления*/
    color: #2379f5 !important;  /*Цвет текста*/
    font-weight: 500;   /*Толщина текста*/
    border: 1px solid #2379f5;  /*Обводка*/
}
/*-----Панель с фильтрами-----*/
    .t-store__filter__controls-wrapper {
    padding: 20px;  /*Отступы внутри*/
    background-color: white;    /*Фоновый цвет*/
    border-radius: 16px;    /*Раидус скругленияф углов*/
    box-sizing: border-box; 
}
.t-store__filter__item {
    background-color: rgb(245 231 35 / 9%); /*Цвет фона*/
    padding: 4px 10px;  /*Отступы внутри*/
    border-radius: 16px;
}
.t-store__filter__item-title {
    color: #002861 !important;  /*Цвет текста самих фильтров*/
}
/*----Стили чекбокса------*/
.t-checkbox__indicator {
    border-radius: 4px; /**/
}
/*-----Фильтрация по цене и кнопка -----*/
.js-store-filter-pricemin, .js-store-filter-pricemax {
    border-radius: 8px; /*Радиус скругления*/
    background-color: white;    /*Фоновый цвет*/
    border: 1px solid #254777;  /*Обводка*/
}
.t-store__filter__btn {
    border-radius: 4px; /*Радиус скругления*/
    background-color: #2379f5;  /*Цвет фона*/
    color: white;   /*Цвет тектса*/
    border-color: #2379f5;  /*Цвет обводки*/
    transition: all 0.3s ease-in;   /*Плавность анимации*/
}

.t-store__filter__btn:hover {
    background-color: #115ecd;  /*Фон при наведении*/
}

/*-----Стили фильтров для десткопной версии------*/
@media screen and (min-width: 960px){

.t-store__filter__item-controls-wrap {
    background-color: #ecf3fe;  /*Цвет фона*/
    box-shadow: none;   /*Убираем тень*/
    border-radius: 12px;
    border: 1px solid #8196b3;
}

.t-store__filter__custom-sel:hover {
    background-color: rgb(255 255 255 / 30%);
}

.js-store-filter-search, .t-store__sort-select {
    border-radius: 100px !important; 
    background-color: white;
}
.t-store__filter__item {
    margin-right: 10px; /*Отступ справа*/
}
}

/*-----Стили фильтров для планшетной и мобильной версии------*/
@media screen and (max-width:959px){
    .t-store__filter__item_sort-mobile,
    .t-store__filter__item_price,
    .t-store__filter__item_select,
    .t-store__filter__item_checkbox{
    border: none !important; 
    background-color: rgb(35 121 245 / 9%); 
    padding: 10px !important; 
    border-radius: 12px; 
    margin-bottom: 10px !important; 
}
}