<style>
/* Стили для переключателя категорий каталога */
.js-store-parts-switcher {
background-color: #f0f0f0; /* Цвет фона */
line-height: 60px; /* Высота строки для вертикального выравнивания текста */
padding-left: 22px; /* Отступ слева */
padding-right: 22px; /* Отступ справа */
border-radius: 10px; /* Скругление углов */
margin-right: 10px; /* Отступ справа */
margin-left: 0px; /* Отступ слева */
border: 0px solid #074600; /* Обводка */
font-weight: 700 !important; /* Жирное начертание шрифта */
font-size: 16px !important; /* Размер шрифта */
height: 60px !important; /* Высота элемента */
vertical-align: middle !important;
box-sizing: content-box !important;
}
/* Стили для контейнера со всеми категориями */
.t-store__parts-switch-wrapper {
text-align: center; /* Выравнивание табов по центру экрана (доступны настройки: left, right) */
margin-bottom: 30px!important; /* Отступ снизу */
margin-left: 0px!important; /* Отступ слева */
margin-right: 0px!important; /* Отступ справа */
}
/* Стили для активной кнопки категории */
.t-store__parts-switch-btn.t-active {
opacity: 1; /* Полная непрозрачность */
background-color: #074600 !important; /* Цвет фона активной кнопки */
color: #ffffff !important; /* Цвет текста на активной кнопке */
border: 3px solid #074600 !important; /* Толщина и цвет рамки */
}
/* Стили для категории при наведении */
.t-store__parts-switch-btn:hover {
transition: 300ms !important; /* Плавный переход для изменений (доступны настройки: в ms - меняйте цифру */
background-color: #ffffff !important; /* Цвет фона при наведении */
color: #074600 !important; /* Цвет текста при наведении */
border: 3px solid #074600 !important; /* Цвет и толщина границы при наведении */
}
</style>
<style>
@media screen and (max-width: 960px) {
/* Стили для отображения фильтров и поиска на мобильных устройствах */
.t-store__filter__options,
.t-store__filter__search-and-sort,
.t-store__filter__sort {
display: block; /* Отображение в виде блоков */
}
/* Скрытие кнопки фильтров для мобильных */
.t-store__filter__opts-mob-btn {
display: none; /* Скрытие кнопки */
}
/* Скрытие кнопки поиска для мобильных */
.t-store__filter__search-mob-btn {
display: none; /* Скрытие кнопки */
}
}
</style>
<style>
/* Стили для элементов поиска и фильтра */
.t-store__filter__btn,
.t-store__filter__input {
background-color: #f0f0f0 !important; /* Цвет фона */
text-align: left !important; /* Позиционирование текста слева */
border: 2px solid #074600; /* Цвет и толщина границы */
border-radius: 10px !important; /* Скругление углов */
color: #000000 !important; /* Цвет текста */
padding-left: 20px !important; /* Отступ слева (для размещения иконки поиска) */
font-size: 18px; /* Размер шрифта */
height: 50px; /* Высота поля */
}
/* Увеличиваем ширину поля поиска на десктопе */
@media screen and (min-width: 440px) {
.t-store__filter__input {
width: 400px !important;
}
}
/* Стили для иконки поиска */
.t-store__search-icon {
width: 20px !important; /* Ширина иконки */
height: 20px !important; /* Высота иконки */
}
.t-store__search-icon path {
fill: #074600 !important; /* Цвет иконки */
}
</style>