<style>
/* --- НАСТРОЙКИ СОРТИРОВКИ ST315N --- */
/* 1. Стили самого выпадающего списка */
.t-store__sort-select {
/* ТИПОГРАФИКА */
font-family: 'Manrope', Arial, sans-serif !important; /* ЗАМЕНИТЕ на ваш шрифт */
font-size: 14px !important; /* Размер шрифта */
font-weight: 400 !important; /* Жирность */
color: #1a1a1a !important; /* Цвет текста */
line-height: 1.4 !important;
/* ВИЗУАЛ БЛОКА */
background-color: #ffffff !important; /* Цвет фона */
border: 1px solid #e0e0e0 !important; /* Цвет и толщина рамки */
border-radius: 6px !important; /* Скругление углов */
padding: 10px 40px 10px 16px !important; /* Отступы: верх право низ лево */
/* УБИРАЕМ СТАНДАРТНУЮ СТРЕЛКУ БРАУЗЕРА */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* ДОБАВЛЯЕМ СВОЮ СТРЕЛКУ (SVG) */
/* Здесь закодирована черная галочка. Можно менять цвет fill='%23000000' */
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center; /* Позиция стрелки */
background-size: 10px; /* Размер стрелки */
cursor: pointer;
transition: all 0.3s ease; /* Плавность анимации */
outline: none !important;
}
/* 2. Состояние при наведении (Hover) */
.t-store__sort-select:hover {
border-color: #000000 !important; /* Рамка темнеет */
background-color: #fafafa !important; /* Легкий фон */
}
/* 3. Текст "Сортировать:" (лейбл слева) */
.t-store__sort-title {
font-family: 'Manrope', Arial, sans-serif !important; /* Тот же шрифт */
font-size: 14px !important;
color: #888888 !important; /* Цвет лейбла посветлее */
font-weight: 500 !important;
margin-right: 12px !important;
}
/* МОБИЛЬНАЯ ВЕРСИЯ */
@media screen and (max-width: 640px) {
/* Если на мобильном нужно убрать слово "Сортировать:", раскомментируйте строчку ниже: */
/* .t-store__sort-title { display: none !important; } */
.t-store__sort-select {
width: 100% !important; /* На мобильном растянуть на всю ширину */
}
}
</style>