/* Фильтр цены «От / До»: подписи, поля в тонкой рамке со скруглением (как карточка фильтра, filters.css),
   ползунок со сплошными жёлтыми ручками. Один для каталога, поиска и подборок (разметку создаёт price-filter.js). */
.vp-price { display: block; width: 100%; margin: 0; padding: 2px 0 2px; }
.vp-fields { display: flex; gap: 10px; }
.vp-field { flex: 1 1 0; min-width: 0; }
.vp-cap { display: block; margin-bottom: 5px; font-size: 12px; line-height: 16px; font-weight: 400; color: #787878; }
/* «.vp-price .vp-input» сильнее правила сайта «.var-filter input { display: none }» */
.vp-price .vp-input { display: block; width: 100%; height: auto; margin: 0; padding: 8px 10px; border: 1px solid #EAEAEA;
    border-radius: 8px; background: #fff; box-shadow: none; outline: none; -webkit-appearance: none; appearance: none;
    font-size: 14px; line-height: 18px; color: #303030; transition: border-color .15s, box-shadow .15s; }
@media (hover: hover) {
    .vp-price .vp-input:hover { border-color: #D5D8DC; }
    .vp-price .noUi-horizontal .noUi-handle:hover { background: #FFD600; box-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
}
.vp-price .vp-input:focus { border-color: #FEDC29; box-shadow: 0 0 0 3px rgba(254, 220, 41, .25); }
.vp-price .vp-input[readonly] { cursor: default; }
/* телефон и планшет: шрифт поля не меньше 16 px — иначе iPhone приближает страницу при нажатии на поле */
@media (max-width: 1000px), (pointer: coarse) {
    .vp-price .vp-input { font-size: 16px; line-height: 20px; }
}

/* ползунок: тонкая полоса, выбранная часть — жёлтая; поля по краям — над центрами ручек */
.vp-track { padding: 22px 10px 10px; }
.vp-price .noUi-target { border: 0; border-radius: 2px; background: #E6E8EB; box-shadow: none; }
.vp-price .noUi-horizontal { height: 4px; }
.vp-price .noUi-connects { border-radius: 2px; }
.vp-price .noUi-connect { background: #FEDC29; }
.vp-price .noUi-horizontal .noUi-handle { width: 20px; height: 20px; top: 50%; right: auto; left: 100%;
    -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
    border: 0; border-radius: 50%; background: #FEDC29; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); cursor: pointer; }
/* ручку тянут — чуть ярче (на телефоне — только пока палец на ней; наведение — в правиле с hover выше) */
.vp-price .noUi-horizontal .noUi-handle.noUi-active { background: #FFD600; box-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
.vp-price .noUi-handle::before, .vp-price .noUi-handle::after { display: none; }
.vp-price .noUi-touch-area { background: transparent; border-radius: 50%; }
.vp-price .noUi-tooltip { display: none; }