.filter-by-others .checkbox { transition: opacity 0.15s ease; }
.filter-by-others .checkbox.sf-locked,
.filter-by-others .checkbox.sf-unavailable { display: none !important; }
.filter-by-others .sf-group-hidden { display: none !important; }
.filter-by-others .checkbox.sf-only { opacity: 0.55; }
.filter-by-others .checkbox.sf-only label {
    cursor: not-allowed;
    pointer-events: none;
    color: #a0a0a0 !important;
}
.filter-by-others .checkbox.sf-only label span,
.filter-by-others .checkbox.sf-only span {
    color: #a0a0a0 !important;
    font-weight: 300 !important;
}
.filter-by-others .checkbox.sf-only input[type="checkbox"] {
    cursor: not-allowed;
    pointer-events: none;
    accent-color: #b0b0b0;
    filter: grayscale(1);
}
.filter-by-others [id^="filter-group"] {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: #c2c2c2 transparent;
}
.filter-by-others [id^="filter-group"]::-webkit-scrollbar { width: 6px; }
.filter-by-others [id^="filter-group"]::-webkit-scrollbar-track { background: transparent; }
.filter-by-others [id^="filter-group"]::-webkit-scrollbar-thumb { background-color: #c2c2c2; border-radius: 3px; }
.filter-by-others [id^="filter-group"]::-webkit-scrollbar-thumb:hover { background-color: #999; }

/* Поиск внутри фильтр-группы — стиль «1stDibs»: тонкая рамка, скругление,
   иконка лупы справа, шрифт того же размера, что и метки фильтров.
   Sticky — чтобы при скролле списка поле оставалось сверху. */
.filter-by-others .sf-filter-search {
    position: sticky;
    top: 0;
    z-index: 2;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 30px 7px 10px;
    margin: 0 0 8px 0;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'><path fill='%23888' d='M105.5 211.3C47.5 211.3.3 164.1.3 106.1.4 48.2 47.5 1 105.5 1s105.2 47.2 105.2 105.2-47.2 105.1-105.2 105.1zm0-190.3c-47 0-85.2 38.2-85.2 85.2s38.2 85.2 85.2 85.2 85.2-38.2 85.2-85.2S152.5 21 105.5 21z'/><path fill='%23888' d='M239.9 250c-2.5 0-5-.9-6.9-2.8l-67.7-64.9c-4-3.8-4.1-10.2-.3-14.1 3.8-4 10.2-4.1 14.1-.3l67.7 64.9c4 3.8 4.1 10.2.3 14.1-2 2.1-4.6 3.1-7.2 3.1z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 13px 13px;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.4;
    color: #333;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
}
.filter-by-others .sf-filter-search:focus {
    outline: none;
    border-color: #cf9147;
    box-shadow: 0 0 0 1px rgba(207, 145, 71, .15);
}
.filter-by-others .sf-filter-search::placeholder {
    color: #aaa;
    font-weight: 300;
    opacity: 1;
}
/* Скрываем нативный «×» в Chrome у type="text" — рисуют сами по 〈Esc〉. */
.filter-by-others .sf-filter-search::-webkit-search-cancel-button { display: none; }
.filter-by-others .checkbox.sf-search-hidden { display: none !important; }

/* Карточки товаров с «Request price» при активном фильтре по цене.
   Класс .sf-request-hidden ставится из smart-filter.js (см. sfApplyRequestPriceHide). */
.sf-request-hidden { display: none !important; }

/* В Bootstrap 3 .row собран на float'ах. Когда часть .product-layout
   спрятана через display:none, оставшиеся колонки «зацепляются» друг
   за друга по высоте и образуют лестницу с пустыми местами.
   Если в строке есть скрытые карточки — переключаем её в flex-wrap,
   тогда видимые тайлы аккуратно перетекают без пробелов. */
.sf-row-flex {
    display: flex !important;
    flex-wrap: wrap !important;
}
.sf-row-flex > .product-layout {
    float: none !important;
}
/* Pavothemer выравнивает плитки через min-height: иногда инлайном,
   иногда классом — обнуляем, чтобы flex сам выровнял по строке. */
.sf-row-flex > .product-layout > .product-layout-default,
.sf-row-flex > .product-layout .product-thumb {
    min-height: 0 !important;
    height: 100% !important;
}

/* ============================================================
   Замена ценового слайдера (Ion.RangeSlider) — radio + min/max
   ============================================================
   Старый IRS остаётся в DOM (скрыт), наш JS пишет в его hidden
   <input id="filter_price"> через ionRangeSlider API. */

/* Скрываем оригинальный IRS и его служебные элементы. */
.filter-by-price .irs,
.filter-by-price .clear-price { display: none !important; }
/* Контейнер становится «нулевой» высоты, чтобы не оставлять пустого
   места между заголовком и нашим UI. */
.filter-by-price .slider-padding {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}

/* Контейнер UI цены — фон/шрифт/цвет наследуем от темы. */
.sf-price-ui {
    padding: 8px 10px 10px 10px;
}

/* Список radio-вариантов — каждая строка с padding: 10px 0 как у
   `.list-group-item`/`.checkbox` в теме (даёт ~20px между строками). */
.sf-price-radios {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 4px 0;
}
.sf-price-radios label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 0;
    cursor: pointer;
    user-select: none;
    font: inherit;
    color: inherit;
}
.sf-price-radios label:hover { color: #cf9147; }
.sf-price-radios input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 1px solid #bbb;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    flex: 0 0 auto;
    position: relative;
    transition: border-color .12s ease;
}
.sf-price-radios input[type="radio"]:hover { border-color: #cf9147; }
.sf-price-radios input[type="radio"]:checked {
    border-color: #cf9147;
    background: #fff;
}
.sf-price-radios input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: #cf9147;
}
.sf-price-radios input[type="radio"]:focus { outline: none; }
.sf-price-radios input[type="radio"]:focus-visible {
    box-shadow: 0 0 0 2px rgba(207, 145, 71, .25);
}

/* Кастомная строка min … to … max + apply */
.sf-price-range {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin: 4px 0 0 0;
}
.sf-price-range input[type="text"] {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fff;
    color: inherit;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
}
.sf-price-range input[type="text"]:focus {
    outline: none;
    border-color: #cf9147;
    box-shadow: 0 0 0 1px rgba(207, 145, 71, .15);
}
.sf-price-range input[type="text"]::placeholder {
    color: #aaa;
    opacity: 1;
}
.sf-price-range .sf-price-to {
    flex: 0 0 auto;
    align-self: center;
    color: #888;
    padding: 0 2px;
}

/* Apply-кнопка: белая плашка с тёмно-серым шевроном (как было исходно).
   Тема Pavothemer ставит на любые <button> внутри .list-group / .filter-by-price
   правило display:none !important — поэтому селекторы максимально специфичные,
   и продублированы для html/body. Дополнительно display проставляется
   inline-стилем из JS — это побеждает любой внешний !important. */
html body .filter-by-price .sf-price-ui .sf-price-range button.sf-price-apply,
html body .pavlayerednavigation .sf-price-ui .sf-price-range button.sf-price-apply,
.sf-price-range button.sf-price-apply,
.sf-price-range .sf-price-apply {
    flex: 0 0 auto !important;
    width: 32px !important;
    min-width: 32px !important;
    height: auto !important;
    align-self: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #ddd !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: #444 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
html body .filter-by-price .sf-price-ui .sf-price-range button.sf-price-apply:hover,
.sf-price-range button.sf-price-apply:hover,
.sf-price-range .sf-price-apply:hover {
    border-color: #cf9147 !important;
    color: #cf9147 !important;
}
html body .filter-by-price .sf-price-ui .sf-price-range button.sf-price-apply:active,
.sf-price-range button.sf-price-apply:active,
.sf-price-range .sf-price-apply:active {
    background: #faf3eb !important;
    border-color: #cf9147 !important;
    color: #b67a35 !important;
}
.sf-price-range .sf-price-apply svg {
    width: 12px !important;
    height: 12px !important;
    fill: currentColor !important;
    display: block !important;
    pointer-events: none;
}