Модификация каталога товаров (категории, фильтры и поиск) на Тильде

<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>