/* Стиль для контейнера поиска и сортировки */
.t-store__filter__search-and-sort {
    display: flex; /* Используем flexbox для выравнивания элементов */
    align-items: center; /* Выравниваем элементы по центру по вертикали */
    gap: 10px; /* Расстояние между элементами */
    padding: 15px; /* Внутренние отступы */
    background-color: #f8e1bf; /* Цвет фона */
    border-radius: 12px; /* Скругление углов контейнера */
}

/* Стиль для поля поиска внутри контейнера */
.t-store__filter__search-and-sort .t-store__filter__input.js-store-filter-search {
    flex: 1; /* Поле поиска занимает все доступное пространство */
    padding: 10px 20px; /* Внутренние отступы */
    font-size: 14px; /* Размер шрифта */
    color: #333; /* Цвет текста */
    background-color: #fff; /* Цвет фона */
    border: 1px solid #ddd; /* Граница */
    border-radius: 50px; /* Скругление углов (50px) */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Внутренняя тень */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Плавный переход */
}

/* Стиль для поля поиска при фокусе */
.t-store__filter__search-and-sort .t-store__filter__input.js-store-filter-search:focus {
    border-color: #007bff; /* Цвет границы при фокусе */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Тень при фокусе */
    outline: none; /* Убираем стандартный контур */
}

/* Стиль для кнопки сортировки или других элементов внутри контейнера */
.t-store__filter__search-and-sort .t-store__filter__sort-button {
    padding: 10px 20px; /* Внутренние отступы */
    font-size: 14px; /* Размер шрифта */
    color: #fff; /* Цвет текста */
    background-color: #007bff; /* Цвет фона */
    border: none; /* Убираем границу */
    border-radius: 50px; /* Скругление углов */
    cursor: pointer; /* Курсор в виде указателя */
    transition: background-color 0.3s ease; /* Плавный переход */
}

/* Стиль для кнопки сортировки при наведении */
.t-store__filter__search-and-sort .t-store__filter__sort-button:hover {
    background-color: #0056b3; /* Цвет фона при наведении */
}

/* Стиль для обертки выпадающего списка сортировки */
.t-store__sort-select-wrapper {
    border-radius: 50px; /* Скругление углов */
    overflow: hidden; /* Обрезаем содержимое, чтобы углы были скруглены */
    border: 1px solid #ddd; /* Граница */
    background-color: #fff; /* Цвет фона */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Плавный переход */
}

/* Стиль для выпадающего списка внутри обертки */
.t-store__sort-select-wrapper select {
    width: 100%; /* Ширина на всю доступную область */
    padding: 10px 20px; /* Внутренние отступы */
    font-size: 14px; /* Размер шрифта */
    color: #333; /* Цвет текста */
    background-color: transparent; /* Прозрачный фон */
    border: none; /* Убираем границу */
    outline: none; /* Убираем контур при фокусе */
    cursor: pointer; /* Курсор в виде указателя */
}

/* Стиль для обертки при фокусе */
.t-store__sort-select-wrapper:focus-within {
    border-color: #007bff; /* Цвет границы при фокусе */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Тень при фокусе */
}