(filter-2026.js, классы .v2-fscroll-*) — виден в любом браузере и
проверяем pixel-тестом.
max-height: 150px ≈ 5 строк × ~30px (бегунок появляется при >5 опциях).
──────────────────────────────────────────────────────────────────── */
.v2-filter .checkBlock__wrapper { overflow: visible; }
.v2-filter .checkBlock__scroll { overflow: visible; max-height: none; }
.v2-filter .checkBlock__wrapper:has(.checkBlock__row:nth-child(6)) {
position: relative; /* якорь для абсолютного трека */
}
.v2-filter .checkBlock__wrapper:has(.checkBlock__row:nth-child(6)) .checkBlock__scroll {
max-height: 150px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding-right: 14px !important; /* место под кастомный трек (10px) + зазор */
}
/* Прячем нативный scrollbar — рисуем свой */
.v2-filter .checkBlock__scroll {
scrollbar-width: none !important; /* Firefox */
-ms-overflow-style: none !important; /* old Edge */
}
.v2-filter .checkBlock__scroll::-webkit-scrollbar {
width: 0 !important; height: 0 !important; display: none !important; /* WebKit */
}
/* Кастомный трек + бегунок (DOM-узлы создаёт filter-2026.js) */
.v2-filter .v2-fscroll-track {
position: absolute; top: 0; right: 0; width: 10px; height: 100%;
background: var(--c-bg-soft); border-left: 1px solid var(--c-border);
z-index: 3;
}
.v2-filter .v2-fscroll-thumb {
position: absolute; top: 0; right: 1px; width: 8px; min-height: 28px;
background: var(--c-text-2); border-radius: 6px; cursor: grab;
will-change: transform;
}
.v2-filter .v2-fscroll-thumb:hover { background: var(--c-text); }
.v2-filter .v2-fscroll-thumb:active { cursor: grabbing; }
/* Длинные подписи чекбоксов переносить, не обрезать */
.v2-filter .checkBlock__label {
white-space: normal !important;
word-break: break-word !important;
overflow: visible !important;
}
/* ════════════════════════════════════════════════════
RANGE SLIDER — brand gradient (improved vs catalog)
Catalog has plain blue track; we add gradient fill + handles
════════════════════════════════════════════════════ */
.v2-filter .ui-slider,
.v2-filter .sv-filter-slider-track {
height: 4px !important;
background: var(--c-blue-light) !important;
border-radius: 999px !important;
border: 0 !important;
margin: var(--sp-3) 0 var(--sp-2) !important;
position: relative !important;
}
.v2-filter .ui-slider .ui-slider-range {
background: linear-gradient(90deg, var(--c-blue) 0%, var(--c-blue-dark) 100%) !important;
border: 0 !important;
border-radius: 999px !important;
}
.v2-filter .ui-slider .ui-slider-handle,
.v2-filter .ui-slider a.ui-slider-handle {
width: 16px !important;
height: 16px !important;
background: #FFFFFF !important;
border: 2px solid var(--c-blue) !important;
border-radius: 50% !important;
box-shadow: 0 1px 3px rgba(31,45,61,0.16) !important;
top: -6px !important;
margin-left: -8px !important;
cursor: grab !important;
transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out) !important;
outline: none !important;
}
.v2-filter .ui-slider .ui-slider-handle:hover,
.v2-filter .ui-slider a.ui-slider-handle:hover {
transform: scale(1.15) !important;
box-shadow: 0 2px 6px rgba(14,148,200,0.32) !important;
}
.v2-filter .ui-slider .ui-slider-handle:focus,
.v2-filter .ui-slider a.ui-slider-handle:focus {
outline: 0 !important;
box-shadow: 0 0 0 3px rgba(14,148,200,0.24), 0 1px 3px rgba(31,45,61,0.16) !important;
}
.v2-filter .ui-slider .ui-slider-handle:active,
.v2-filter .ui-slider a.ui-slider-handle:active {
cursor: grabbing !important;
}
/* ════════════════════════════════════════════════════
SUBMIT CTA
Brand-blue button per Owner audit 2026-05-24.
(Changed from orange: Owner prefers blue for filter CTA.)
════════════════════════════════════════════════════ */
.v2-filter__cta {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: var(--sp-2) !important;
padding: 10px 28px !important;
min-height: 44px !important;
font-family: var(--ff-body) !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: 0.01em !important;
color: #FFFFFF !important;
background: var(--c-blue) !important;
border: 0 !important;
border-radius: var(--r-md) !important;
cursor: pointer !important;
box-shadow: 0 2px 8px rgba(14,148,200,0.28) !important;
transition: background-color 160ms var(--ease-out), transform 120ms var(--ease-out) !important;
text-decoration: none !important;
max-width: none !important;
width: auto !important;
height: auto !important;
}
.v2-filter__cta:hover {
background: var(--c-blue-dark) !important;
box-shadow: 0 3px 10px rgba(8,119,168,0.38) !important;
}
.v2-filter__cta:active {
transform: translateY(1px) !important;
}
.v2-filter__cta:focus-visible {
outline: 0 !important;
box-shadow: 0 0 0 3px rgba(14,148,200,0.36) !important;
}
/* ════════════════════════════════════════════════════
FOOTER — vanilla parity (INTEGRATION/filter/index.html:163-172)
iter-05 (2026-05-31): "__footer"/"__count" переименованы в "__foot"/"__avail"
1:1 с vanilla. Disclosure слева, «Доступно X моделей» + CTA «Подобрать» справа.
(Кавычки добавлены чтобы избежать преждевременного закрытия CSS-комментария.)
════════════════════════════════════════════════════ */
.v2-filter__foot {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: var(--sp-5) !important;
margin-top: var(--sp-3) !important;
padding-top: var(--sp-4) !important;
border-top: 1px solid var(--c-border-soft) !important;
}
.v2-filter__foot-left {
display: inline-flex !important;
align-items: center !important;
gap: var(--sp-4) !important;
margin-right: auto !important;
}
.v2-filter__foot-right {
display: inline-flex !important;
align-items: center !important;
gap: var(--sp-5) !important;
}
/* CTA inside __foot-right — override iter-04-homepage.css:540 (centered solo CTA).
Здесь кнопка живёт во flex-row рядом с __avail и НЕ должна растягиваться/центроваться.
Specificity: .v2-filter__foot-right .v2-filter__cta (0,2,0) > .v2-filter__cta (0,1,0). */
.v2-filter__foot-right .v2-filter__cta {
display: inline-flex !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 10px 28px !important;
min-height: 44px !important;
font-size: 15px !important;
font-weight: 600 !important;
border-radius: var(--r-md) !important;
}
.v2-filter__avail,
.v2-filter #sv-runtime-search.v2-filter__avail {
display: inline-flex !important;
align-items: baseline !important;
gap: 4px !important;
color: var(--c-text) !important;
font-family: var(--ff-body) !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1 !important;
}
/* Цифра-как-ссылка (functions.php:1678 fn_filter_models_count_view) —
в footer-обёртке убираем подчёркивание и красим как текст, но bold. */
.v2-filter__avail a {
color: var(--c-text) !important;
font-weight: 700 !important;
text-decoration: none !important;
cursor: pointer !important;
}
.v2-filter__avail a:hover {
color: var(--c-blue) !important;
}
/* content-inner2 layout reset */
.v2-filter .content-inner2 {
margin: 0 !important;
padding: 0 !important;
}
/* Owner 2026-06-18 #3.3: clearfix ::after был рудиментом (foot — flex, floats
уже сброшены ниже). В flex-контексте ::after становился фантомным flex-item +
gap, отодвигая кнопку «Подобрать» от правого края контента (~24px). Убрали —
теперь кнопка доходит до правого края, на одной вертикали с «Очистить фильтр». */
.v2-filter .content-inner2 .float-left {
float: none !important;
}
/* ════════════════════════════════════════════════════
DISCLOSURE TOGGLE — «Полный фильтр» / «Скрыть»
Brand-blue link, chevron rotate
════════════════════════════════════════════════════ */
.v2-filter #advanced-search-link,
.v2-filter .v2-filter__advanced-toggle {
display: inline-flex !important;
align-items: center !important;
gap: var(--sp-2) !important;
padding: 4px 0 !important;
font-family: var(--ff-body) !important;
font-size: var(--fs-sm) !important;
font-weight: 500 !important;
line-height: 1.4 !important;
color: var(--c-blue) !important;
background: transparent !important;
border: 0 !important;
text-decoration: none !important;
cursor: pointer !important;
white-space: nowrap !important;
transition: color 140ms var(--ease-out) !important;
}
.v2-filter #advanced-search-link:hover,
.v2-filter .v2-filter__advanced-toggle:hover {
color: var(--c-blue-dark) !important;
}
/* Chevron ::before */
.v2-filter #advanced-search-link::before,
.v2-filter .v2-filter__advanced-toggle::before {
content: "" !important;
width: 12px !important;
height: 12px !important;
background-image: url("data:image/svg+xml;utf8,
") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
transition: transform 200ms var(--ease-out) !important;
display: inline-block !important;
}
.v2-filter #advanced-search-link.arrow-up::before,
.v2-filter .v2-filter__advanced-toggle.arrow-up::before {
transform: rotate(180deg) !important;
}
/* Remove legacy ::after glyph */
.v2-filter #advanced-search-link::after,
.v2-filter .v2-filter__advanced-toggle::after {
content: none !important;
}
.v2-filter #advanced-search-link:focus-visible,
.v2-filter .v2-filter__advanced-toggle:focus-visible {
outline: 2px solid var(--c-blue) !important;
outline-offset: 2px !important;
}
/* ════════════════════════════════════════════════════
HELPER — «Нужен другой размер?» brand-blue link
════════════════════════════════════════════════════ */
.v2-filter .need_size,
.v2-filter .filter-other-size .need_size {
display: inline-block !important;
margin-top: var(--sp-2) !important;
font-family: var(--ff-body) !important;
font-size: var(--fs-sm) !important;
font-weight: 500 !important;
color: var(--c-blue) !important;
text-decoration: underline !important;
text-decoration-color: rgba(14,148,200,0.32) !important;
cursor: pointer !important;
background: none !important;
border: 0 !important;
}
.v2-filter .need_size:hover {
color: var(--c-blue-dark) !important;
text-decoration-color: currentColor !important;
}
/* ════════════════════════════════════════════════════
RESET BUTTON
════════════════════════════════════════════════════ */
.v2-filter__reset {
font-family: var(--ff-body);
font-size: 13px;
font-weight: 500;
color: var(--c-text-2);
background: none;
border: 0;
cursor: pointer;
padding: var(--sp-1) 0;
text-decoration: underline;
text-decoration-color: var(--c-border);
transition: color 140ms var(--ease-out);
}
.v2-filter__reset:hover { color: var(--c-text); }
/* ════════════════════════════════════════════════════
FIX-3: Catalog sidebar L2 panel width + stacking
Owner audit 2026-05-24: L2 panel items truncated.
Root cause (empirical probe 2026-05-24):
cs-wrap.cs-compact collapses to 230px (L1 only).
We override width:100% = 280px (sidebar col).
When L1 clicked: JS removes cs-compact, L2 shows,
but cs-wrap stays 280px → L2 gets only 50px (280-230).
Fix: in expanded state (not .cs-compact), cs-wrap
position:absolute + width:440px (L1+L2) + z-index:100
so it floats above filter without breaking sidebar layout.
In compact state: position:static, width:100% (normal flow).
════════════════════════════════════════════════════ */
/* Compact (collapsed) — stays in flow, fills sidebar column */
.v2-sidebar .cs-wrap.cs-compact {
position: static !important;
width: 100% !important;
max-width: none !important;
z-index: auto !important;
overflow: visible !important;
}
/* Expanded (L2 active) — float above content, full L1+L2 width */
.v2-sidebar .cs-wrap:not(.cs-compact) {
position: absolute !important;
width: calc(var(--l1-w) + var(--l2-w)) !important; /* 230+210=440px */
max-width: none !important;
z-index: 100 !important;
overflow: visible !important;
top: 0 !important;
left: 0 !important;
}
/* L2 wrap and panel — ensure visible overflow for content */
.v2-sidebar .cs-l2-wrap,
.v2-sidebar .cs-l2-panel {
overflow: visible !important;
}
/* ════════════════════════════════════════════════════
ADVANCED SEARCH ROWS ANIMATION
════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
.v2-filter .advanced-search {
transition:
opacity var(--dur-base) var(--ease-out),
max-height var(--dur-base) var(--ease-out);
overflow: hidden;
}
.v2-filter .advanced-search.hidden {
display: block !important;
opacity: 0;
max-height: 0;
pointer-events: none;
}
.v2-filter .advanced-search:not(.hidden) {
opacity: 1;
max-height: 800px;
}
}
/* ════════════════════════════════════════════════════
RESPONSIVE — 2-col at narrower widths
════════════════════════════════════════════════════ */
/* Owner 2026-06-04 δ-F fix #2: breakpoint сдвинут с 1279 → 999.
В диапазоне 1000-1279 desktop layout сохраняется (4 cols × ~25%),
ниже 1000 — fallback на 2 cols × 50%. Body min-width 1200 уже
гарантирует что в обычных условиях этот @media НЕ активируется. */
@media (max-width: 999px) {
.v2-filter .products-filter div.products-filter-row div.products-filter-col {
width: 50% !important;
flex: 0 0 50% !important;
max-width: 50% !important;
}
}
@media (max-width: 767px) {
.v2-filter .products-filter div.products-filter-row div.products-filter-col {
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
}
}
/* ════════════════════════════════════════════════════
ACCESSIBILITY — reduced motion
════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.v2-filter *,
.v2-filter ::before,
.v2-filter ::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
/* ════════════════════════════════════════════════════
MISC CLEANUP
════════════════════════════════════════════════════ */
.hint-overload { display: none; }
.v2-filter .sv-search-params {
margin-top: 0 !important;
line-height: 1 !important;
}
.v2-filter .content-inner {
margin: 0 !important;
padding: 0 !important;
}
.v2-filter .limit__header_info {
display: none !important;
}
/* Owner 2026-06-02: ? hint icon рядом с заголовком характеристики.
Шаблон search_params_column.html:6 рендерит .block-hint + .limit__header_it
когда $param.descr заполнен в proshop_params_texts. Раньше всё было скрыто
через display:none — теперь раскрываем и стилизуем как DS-pill.
ВАЖНО: в шаблоне есть 4 вида .block-hint (per-param под title + per-variant
под каждый чекбокс для hard/manuf). Per-variant имеют commented-out
.limit__header_it (нет button). Скрываем их, показываем только per-param
через :has(.limit__header_it). */
.v2-filter .block-hint:not(:has(.limit__header_it)) {
display: none !important;
}
.v2-filter .block-hint:has(.limit__header_it) {
display: inline-flex !important;
align-items: center;
margin-left: 6px;
vertical-align: middle;
}
.v2-filter .block-hint .limit__header_it {
opacity: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 18px !important;
height: 18px !important;
padding: 0 !important;
border-radius: 50% !important;
border: 1px solid var(--c-text-3) !important;
background: transparent !important;
color: var(--c-text-2) !important;
font: 700 11px/1 var(--ff-body) !important;
cursor: pointer !important;
transition: background var(--dur-fast, 150ms) var(--ease-out), color var(--dur-fast, 150ms) var(--ease-out), border-color var(--dur-fast, 150ms) var(--ease-out) !important;
position: relative;
top: 0 !important;
}
.v2-filter .block-hint .limit__header_it::after {
content: "?" !important;
}
.v2-filter .block-hint .limit__header_it:hover {
background: var(--c-blue-light) !important;
color: var(--c-blue) !important;
border-color: var(--c-blue) !important;
}
.v2-filter .block-hint .limit__header_it:focus-visible {
outline: 2px solid var(--c-blue) !important;
outline-offset: 2px !important;
}
/* The label.title wrap: was inline-block of label + block-hint. Make .title
inline-block так чтобы .block-hint встал в линию справа от заголовка. */
.v2-filter .products-filter-col label.title { display: inline-block !important; }
.v2-filter .products-filter-col > div > div[style*="display: flex"] { display: block !important; }
/* ════════════════════════════════════════════════════════════════════
iter-05 (2026-05-31) — точечные доработки фильтра:
#1 510 «Разные по жёсткости стороны» → компакт (4-кол loop-ряд)
#2 ползунки уже́ (max-width)
#3 от/до и значения контрастнее (тёмные + bold)
#4 компактнее + сепараторы между ячейками для целостного вида
════════════════════════════════════════════════════════════════════ */
/* #1+#2 — все ряды фильтра на CSS-grid 4-кол (симметрия).
Селектор .products-filter-row.pf-row-4 → специфичность (0,3,0), побеждает
legacy .products-filter div.products-filter-row (0,2,1) — display:flex. */
.v2-filter .products-filter-row.pf-row-4 {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 0 !important;
margin-bottom: var(--sp-3) !important;
background: transparent !important;
}
.v2-filter .products-filter-row.pf-row-4 > .products-filter-col {
width: auto !important;
min-width: 0 !important;
padding: var(--sp-2) var(--sp-4) !important;
border: 0 !important;
background: transparent !important;
}
/* #4 — сепаратор между ячейками одного ряда (вертикальная линия) */
.v2-filter .products-filter-row.pf-row-4 > .products-filter-col + .products-filter-col {
border-left: 1px solid var(--c-border-soft) !important;
}
/* #2 (rev 2026-05-31): после перехода всех рядов на 4-кол колонки и так узкие (25%),
спец-cap max-width 200px убран — ползунок заполняет ширину ячейки симметрично. */
.v2-filter .sv-filter-slider-track,
.v2-filter .ui-slider {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* #3 — от/до и значения в инпутах: тёмные + bold для лучшей читаемости */
.v2-filter .limit__label {
color: var(--c-text) !important; /* было --c-text-2 (бледный) → --c-text */
font-weight: 600 !important;
}
.v2-filter .limit__input,
.v2-filter input.filter-text.limit__input {
color: var(--c-text) !important;
font-weight: 600 !important; /* было 500 → 600, цифры заметнее */
}
/* #4 — компактнее: чуть меньше промежутков внутри полей */
.v2-filter .limit__row { margin-bottom: 4px !important; }
.v2-filter .checkBlock__label { padding: 2px 0 !important; min-height: 22px !important; }
/* ════════════════════════════════════════════════════════════════════
iter-15 (2026-06-08) — Owner: «в блоке фильтр места где всё сливается».
Симптом: на 4-колонной сетке параметров слайдеры/инпуты соседних колонок
визуально продолжают друг друга, заголовок одной группы сливается с
инпутом соседней.
Фикс — три приёма без ломки разметки:
1. Вертикальные тонкие divider'ы между колонками (border-left на col 2+).
2. Увеличенный vertical gap между ROWS параметров.
3. Подчёркнутый title группы (margin-bottom + bold).
════════════════════════════════════════════════════════════════════ */
/* (1) Vertical dividers между колонками — column 2/3/4 получают subtle border. */
.v2-filter .products-filter-col {
padding-left: var(--sp-3) !important;
padding-right: var(--sp-3) !important;
}
.v2-filter .products-filter-col + .products-filter-col {
border-left: 1px solid var(--c-border, #E1E6EA) !important;
}
/* (2) Vertical spacing между ROWS — отделяет верхний ряд от нижнего */
.v2-filter .products-filter-row {
padding-block: var(--sp-3) !important;
}
.v2-filter .products-filter-row + .products-filter-row {
border-top: 1px solid var(--c-border, #E1E6EA) !important;
margin-top: var(--sp-3) !important;
}
/* (3) Title группы — bold + min-height для горизонтального выравнивания.
iter-15 fix #7 v2 (2026-06-08 Owner reject): селектор `> .title` НЕ матчит
потому что в DOM title обёрнут в wrapper DIV (`.products-filter-col > div
> label.title`). Используем descendant селектор. min-height: 42px (= 2
строки при 15px/1.4) → 1-строчные labels («Высота», «Конструкция»,
«Тип пружин») занимают ту же высоту, что 2-строчные («Макс. вес на одно
спальное место, кг»). Слайдеры/инпуты row-2 в одной строке выравниваются
по top. */
.v2-filter .products-filter-col .title,
.v2-filter .products-filter-col label.title {
margin-bottom: var(--sp-3) !important;
font-weight: 700 !important;
color: var(--c-text, #1F2D3D) !important;
min-height: 42px !important;
display: block !important;
/* верхний bound, чтобы 3-строчные labels не сломали grid */
line-height: 1.4 !important;
}
/* ════════════════════════════════════════════════════════════════════
iter-16 (2026-06-09) — FILTER COMPACTION для desktop 1200
────────────────────────────────────────────────────────────────────
Owner-spec: фильтр должен быть на 40-56px ниже текущего, без потери
функциональности; «Каталог товаров» подтягивается выше.
Приёмы:
- padding card'а 32→24 vertical, gutter 32 horizontal (sp-5 sp-6).
- radius 12 (унифицируется с product / sidebar — design-system).
- 4-col grid с двумя gap'ами (row 24 × col 32) вместо legacy flex+33%
с border'ами/padding'ами, которые накапливали высоту.
- foot row: flex space-between + center, без border-top/separator,
CTA «Подобрать» pill 40px.
════════════════════════════════════════════════════════════════════ */
/* (1) Внешний card — компактнее по вертикали, симметричнее по горизонтали */
.v2-filter {
padding: var(--sp-5) var(--sp-6) !important; /* 24 / 32 */
border-radius: var(--r-card) !important; /* 12 */
}
.v2-filter__head { margin-bottom: var(--sp-5) !important; } /* 24 */
/* (2) Снимаем legacy inner-обёртки (они добавляли границы/паддинги) */
.v2-filter .content-inner,
.v2-filter .content-inner2 {
width: auto !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
}
/* (3) 4-col grid: явные row/column gap'ы вместо border-divider'ов iter-15.
Симметрия по design-system + меньше визуального шума.
Iter-15 setup (display:grid, repeat(4,1fr), gap:0) перезаписывается. */
.v2-filter .products-filter-row.pf-row-4 {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: var(--sp-5) var(--sp-6) !important; /* 24 × 32 */
margin-bottom: 0 !important;
padding-block: 0 !important;
border-top: 0 !important;
}
.v2-filter .products-filter-row.pf-row-4 + .products-filter-row.pf-row-4 {
margin-top: var(--sp-5) !important;
border-top: 0 !important;
}
/* Каждая колонка — независимая ячейка, без separator'а и боковых паддингов */
.v2-filter .products-filter-row.pf-row-4 > .products-filter-col {
min-width: 0 !important;
width: auto !important;
padding: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
}
/* Снимаем iter-15 vertical divider тоже на не-pf-row-4 рядах (price slider row) */
.v2-filter .products-filter-col + .products-filter-col {
border-left: 0 !important;
}
.v2-filter .products-filter-col {
min-width: 0 !important;
}
/* (4) Footer row — компактный flex без верхней линии.
ВАЖНО: в DOM элемент имеет два класса: `v2-filter__foot sv-search-params`.
Правило `.v2-filter .sv-search-params { margin-top: 0 !important }` (стр.768,
specificity 0,2,0) перебивает короткое `.v2-filter__foot` (0,1,0).
Поэтому селектор ниже усилен до `.v2-filter .v2-filter__foot` (0,2,0)
и явно покрывает sv-search-params variant. */
.v2-filter .v2-filter__foot,
.v2-filter .v2-filter__foot.sv-search-params {
margin-top: var(--sp-5) !important; /* 24 */
padding-top: var(--sp-4) !important; /* 16 */
border-top: 1px solid var(--c-border-soft) !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
.v2-filter__foot-left.float-left,
.v2-filter__foot-left { float: none !important; }
/* (5) CTA «Подобрать» — pill 40px по design-system */
.v2-filter__cta,
.v2-filter__foot-right .v2-filter__cta {
min-height: 40px !important;
height: 40px !important;
padding: 0 var(--sp-5) !important; /* inline 24 */
border-radius: var(--r-card) !important; /* 2026-06-26: 12px, единая система скруглений */
}
/* (6) Title группы — снижаем visual mass: 42px было нужно при iter-15
border-grid; в iter-16 grid c row-gap=24 уже компенсирует разную
высоту, оставляем 32 — экономит ещё ~10px в высоту фильтра. */
.v2-filter .products-filter-col .title,
.v2-filter .products-filter-col label.title {
min-height: 32px !important;
margin-bottom: var(--sp-2) !important; /* 8 */
}
/* ════════════════════════════════════════════════════════════════════
iter-17 (2026-06-09) — COMPACT FILTER: убрать Производитель из compact
────────────────────────────────────────────────────────────────────
Owner: блок «Производитель» с 2 чекбоксами создаёт высокую пустоту
в первой строке compact-фильтра и в advanced ниже. Перенос в
полный фильтр. Реализация — CSS-only (HTML/PHP-генератор фильтра
не трогаем):
1. Колонка с `label.label-id-manuf` в первой строке pf-row-4 скрыта
по умолчанию.
2. В compact-сетке pf-row-4 убираем `repeat(4, 1fr)` → auto-fit с
`minmax(0,1fr)` пока их видно ≥3 — column перетекает.
3. При раскрытии «Полный фильтр» (когда есть видимые
`.advanced-search:not(.hidden)`) — manuf-колонка показывается
внутри advanced rows визуально, рядом с остальными расширенными
параметрами. Технически она остаётся в первой строке pf-row-4, но
становится визуально частью расширенной зоны.
Acceptance:
- Compact 4-cells без Производителя (визуально 3 ячейки + слегка
шире каждая — Цена+Размер / Жесткость / Конструкция).
- При expanded full-filter — Производитель виден.
- Высота compact-фильтра уменьшена (нет колонки с 2 чекбоксами).
──────────────────────────────────────────────────────────────────── */
/* (1) В compact (когда раскрытие НЕ активно, т.е. в DOM нет
`.advanced-search:not(.hidden)`) скрываем колонку с label-id-manuf. */
.v2-filter:not(:has(.advanced-search:not(.hidden)))
.products-filter-row.pf-row-4
.products-filter-col:has(label.label-id-manuf) {
display: none;
}
/* (2) Соответственно перестраиваем сетку: в compact колонки шире и
гибче (если manuf скрыт, остальные 3 заполняют 100% без empty slot).
minmax 180px чтобы на 1200 (content col 852, row width ≈ 788) сетка
могла удержать 4 параметра в одной строке (4×180=720 ≤ 788). При 3
видимых колонках auto-fit collapses пустой track. */
.v2-filter:not(:has(.advanced-search:not(.hidden)))
.products-filter-row.pf-row-4 {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}
/* (3) В expanded full-filter — стандартный repeat(4, ...) восстанавливается
через базовое правило выше (iter-16 строка ~2x). */
/* (4) Браузеры без :has() (Safari <15.4, старый Chrome): fallback —
просто show manuf-col, layout остаётся 4-col как в iter-16. Без
:has() селектор не сматчит → правило не сработает → колонка
видна (это и есть legacy iter-16 поведение).
На production-target (Chrome / Firefox 121+ / Safari 15.4+) :has()
доступен, см. caniuse.com/css-has. */
/* (5) AGGRESSIVE compact-shrink — устарело в iter-18.
iter-17 :has() блок был основан на наличии `.advanced-search`
рядов pf-row-4. В iter-18 compact теперь живёт в .v2-filter-compact-grid,
а advanced — в .v2-filter-advanced.advanced-search. Старые
:has()-правила оставлены КАК NO-OP fallback (DOM меняется),
но эффект почти нулевой. Реальные shrink-правила компонента —
в iter-18 блоке ниже. */
/* ════════════════════════════════════════════════════════════════════
iter-17 (2026-06-09) — FILTER COMPACT row vertical rhythm
──────────────────────────────────────────────────────────────────── */
/* Спец-row pf-row-4: row-gap должен совпадать с column-gap внутри
compact-сетки (24×32 -> 20/24 row для компактности). Уже задано
в iter-16; здесь — лишь уточняем что title min-height не разрывает
ритм при wider 3-col compact. */
.v2-filter:not(:has(.advanced-search:not(.hidden)))
.products-filter-row.pf-row-4
.products-filter-col .title,
.v2-filter:not(:has(.advanced-search:not(.hidden)))
.products-filter-row.pf-row-4
.products-filter-col label.title {
min-height: 28px !important;
}
/* ════════════════════════════════════════════════════════════════════
iter-18 (2026-06-09) — TRUE COMPACT FILTER STRUCTURE
────────────────────────────────────────────────────────────────────
DOM-структура (см. products/search/search_params.html):
.v2-filter
.v2-filter__head (заголовок «Подобрать матрас» + clear-btn)
.content-inner
.products-filter
.v2-filter-compact-grid ← всегда видимый
.v2-filter-pair.v2-filter-pair--price-size
.v2-filter-pair.v2-filter-pair--height-weight
.v2-filter-pair.v2-filter-pair--firmness-sides
.v2-filter-pair.v2-filter-pair--construction-springs
.v2-filter-advanced.advanced-search.hidden ← раскрывается JS
.v2-filter-advanced-grid
.content-inner2
.v2-filter__foot (Полный фильтр toggle + Доступно X + CTA)
Цель iter-18:
- compact grid (4 pair × 2 params) без Производителя;
- filter height @1200 ≤ 480px (было iter-17 635);
- «Каталог товаров» @1200 y ≤ 1080 (было iter-17 1247).
──────────────────────────────────────────────────────────────────── */
/* ─── (1) Compact grid: 4 pairs row ─── */
.v2-filter-compact-grid {
display: grid;
/* Цена/Размер и Высота/Вес — slider+input/select (range), занимают
больше места; Жесткость+Стороны и Конструкция+Тип пружин —
checkbox-группы, компактнее. Distribute: 1.25 1.25 1 1. */
grid-template-columns: 1.25fr 1.25fr 1fr 1fr;
gap: var(--sp-4) var(--sp-4); /* 16 × 16 — иначе на 1200 не помещаются 4 col */
align-items: start;
}
.v2-filter-pair {
display: flex;
flex-direction: column;
gap: var(--sp-3); /* 12 между двумя params в pair */
min-width: 0;
}
.v2-filter-pair > .v2-filter-cell {
width: 100%;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
}
/* В compact-grid обнуляем legacy .products-filter-col правила */
.v2-filter .v2-filter-compact-grid .products-filter-col {
width: auto !important;
min-width: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
/* Title в compact — компактнее: убираем 42px min-height из iter-15 */
.v2-filter .v2-filter-compact-grid .products-filter-col .title,
.v2-filter .v2-filter-compact-grid .products-filter-col label.title {
min-height: 0 !important;
margin-bottom: var(--sp-2) !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
}
/* Checkbox rows внутри compact-grid — плотнее */
.v2-filter .v2-filter-compact-grid .checkBlock__label {
padding: 1px 0 !important;
min-height: 20px !important;
}
/* Range slider + inputs внутри compact — компактнее */
.v2-filter .v2-filter-compact-grid .limit__row {
margin-bottom: 4px !important;
}
.v2-filter .v2-filter-compact-grid .limit__input {
height: 32px !important;
}
/* ─── (2) Advanced grid: всё остальное под раскрытием ─── */
.v2-filter-advanced {
margin-top: var(--sp-5);
padding-top: var(--sp-4);
border-top: 1px solid var(--c-border-soft);
}
/* Перебиваем legacy `.advanced-search.hidden { display: block !important }`
из iter-04-filter.css:717. AdvancedSearch() в catalog-original.js:78
toggle'ит класс `.hidden` на .advanced-search — наш wrapper его носит. */
.v2-filter .v2-filter-advanced.advanced-search.hidden {
display: none !important;
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
}
.v2-filter-advanced-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--sp-5) var(--sp-5); /* 24 × 24 */
align-items: start;
}
.v2-filter .v2-filter-advanced-grid .products-filter-col {
width: auto !important;
min-width: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
.v2-filter .v2-filter-advanced-grid .products-filter-col .title,
.v2-filter .v2-filter-advanced-grid .products-filter-col label.title {
min-height: 0 !important;
margin-bottom: var(--sp-2) !important;
font-size: 14px !important;
font-weight: 700 !important;
}
/* ─── (3) Compact-filter card overall paddings (override iter-16/17) ─── */
.v2-filter {
padding: var(--sp-4) var(--sp-5) !important; /* 16 × 24 (было 24 × 32) */
border-radius: var(--r-card) !important;
}
.v2-filter__head {
margin-bottom: var(--sp-4) !important; /* 16 (было 24) */
}
.v2-filter .v2-filter__foot,
.v2-filter .v2-filter__foot.sv-search-params {
margin-top: var(--sp-4) !important; /* 16 */
padding-top: var(--sp-3) !important; /* 12 */
}
/* ─── (4) Responsive: на 1200 padding-inline уменьшаем до 24 для сетки. ─── */
@media (max-width: 1279px) {
.v2-filter {
padding-inline: var(--sp-5) !important; /* 24 */
}
.v2-filter-compact-grid {
gap: var(--sp-3) var(--sp-3); /* 12 × 12 */
}
}
/* ─── (5) Compact filter: гарантировать что Производитель не виден ─── */
.v2-filter .v2-filter-compact-grid .products-filter-col label.label-id-manuf {
display: none;
}
.v2-filter .v2-filter-compact-grid:not(:has(label.label-id-manuf)) {
/* manuf корректно перенесён в advanced — основная сборка */
}
/* ════════════════════════════════════════════════════════════════════
iter-18.1 (2026-06-09) — COMPACT FILTER VISUAL CLEANUP
────────────────────────────────────────────────────────────────────
После iter-18 structural refactor:
- cells неравных ширин (1.25/1.25/1/1) → разъехалась сетка;
- длинный label «Макс. вес...» wrap в 3 строки в узкой ячейке;
- range sliders/inputs визуально «расползались»;
- снизу пустота между контентом и footer.
iter-18.1: 4 равные колонки + унификация range-блока + короткий label
с tooltip + tighter paddings. Target filter@1200 410-430.
──────────────────────────────────────────────────────────────────── */
/* (1) Equal pair columns (override iter-18 1.25/1.25/1/1) */
.v2-filter .v2-filter-compact-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: var(--sp-3) var(--sp-4) !important; /* 12 row × 16 col */
align-items: start !important;
}
/* (2) Pair internal rhythm — компактнее */
.v2-filter .v2-filter-pair {
gap: var(--sp-3) !important; /* 12 между двумя cells pair */
}
/* (3) Range block унификация: title → inputs row → slider track */
.v2-filter .v2-filter-compact-grid .limit__row {
gap: var(--sp-2) !important; /* 8 между «от» и «до» */
margin-bottom: 6px !important;
align-items: stretch !important;
}
.v2-filter .v2-filter-compact-grid .limit__block {
flex: 1 !important;
min-width: 0 !important;
max-width: none !important;
}
.v2-filter .v2-filter-compact-grid .limit__label {
margin-right: 4px !important;
font-size: 12px !important;
color: var(--c-text-2) !important;
}
.v2-filter .v2-filter-compact-grid .limit__input {
height: 32px !important;
padding: 0 8px !important;
font-size: 13px !important;
width: 100% !important;
min-width: 0 !important;
}
/* Slider track — на всю ширину ячейки, без негативных отступов */
.v2-filter .v2-filter-compact-grid .sv-filter-slider-track,
.v2-filter .v2-filter-compact-grid .ui-slider {
width: 100% !important;
margin: 6px 0 0 0 !important;
height: 4px !important;
}
/* (4) Checkbox column — нормализуем плотность */
.v2-filter .v2-filter-compact-grid .checkBlock__wrapper,
.v2-filter .v2-filter-compact-grid .checkBlock__scroll {
margin: 0 !important;
padding: 0 !important;
}
.v2-filter .v2-filter-compact-grid .checkBlock__row {
margin: 0 !important;
}
/* (5) Tighter card paddings: bottom воздух убираем */
.v2-filter {
padding: var(--sp-4) var(--sp-5) var(--sp-3) !important; /* 16/24/12 */
}
@media (max-width: 1279px) {
.v2-filter {
padding: var(--sp-4) var(--sp-4) var(--sp-3) !important; /* 16/16/12 */
}
.v2-filter .v2-filter-compact-grid {
gap: var(--sp-3) var(--sp-3) !important; /* 12 × 12 */
}
}
/* (6) Footer ближе к контенту */
.v2-filter .v2-filter__foot,
.v2-filter .v2-filter__foot.sv-search-params {
margin-top: var(--sp-2) !important; /* 8 (iter-18.1: -4) */
padding-top: 10px !important; /* 10 */
}
/* Head margin-bottom также чуть тоньше */
.v2-filter__head {
margin-bottom: var(--sp-2) !important; /* 8 (iter-18.1: -8) */
}
/* ─── (7) Tooltip-помощник «?» (для «Вес на спальное место, кг») ─── */
.v2-filter-label-with-help {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
position: relative;
white-space: nowrap;
}
.v2-filter-label-with-help > span:first-child {
display: inline-block;
}
.v2-filter-help {
display: inline-flex;
align-items: center;
justify-content: center;
/* Owner 2026-07-28: «?» сидел низко относительно заголовка — приподнят */
position: relative;
top: -3px;
width: 16px;
height: 16px;
padding: 0;
border: 1px solid var(--c-text-3, #8B95A1);
border-radius: 50%;
background: transparent;
color: var(--c-text-2);
font: 700 10px/1 var(--ff-body);
cursor: pointer;
flex: none;
transition: background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
.v2-filter-help:hover,
.v2-filter-help:focus-visible {
background: var(--c-blue-light);
color: var(--c-blue);
border-color: var(--c-blue);
outline: 0;
}
.v2-filter-tooltip {
position: absolute;
bottom: calc(100% + 6px);
left: 0;
display: none;
background: var(--c-text);
color: #fff;
padding: 6px 10px;
border-radius: 6px;
font: 400 12px/1.4 var(--ff-body);
white-space: normal;
width: max-content;
max-width: 240px;
z-index: 30;
box-shadow: 0 4px 14px rgba(31,45,61,0.18);
pointer-events: none;
}
.v2-filter-tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 14px;
border: 5px solid transparent;
border-top-color: var(--c-text);
}
.v2-filter-label-with-help:hover .v2-filter-tooltip,
.v2-filter-label-with-help:focus-within .v2-filter-tooltip {
display: block;
}
/* 2026-07-23 (Owner): .v2-filter-advanced имеет overflow:hidden → тултипы
верхнего ряда развёрнутого фильтра (Производитель, Кол-во пружин, …)
обрезались его верхней границей. Внутри advanced открываем ВНИЗ —
под заголовком ячейки всегда есть место (инпуты/чекбоксы). */
.v2-filter-advanced .v2-filter-tooltip {
bottom: auto;
top: calc(100% + 6px);
}
.v2-filter-advanced .v2-filter-tooltip::after {
top: auto;
bottom: 100%;
border-top-color: transparent;
border-bottom-color: var(--c-text);
}
/* ════════════════════════════════════════════════════════════════════
iter-18.2 (2026-06-09) — 4×2 VISUAL GRID + slider inset + filter width fix
────────────────────────────────────────────────────────────────────
Проблемы iter-18.1:
- 4 cells разной высоты (177/165/272/172): вторая строка params
стартует на разном y во всех 4 колонках → visual chaos.
- Adjacent sliders handles overlap −4px (Цена.right=541 vs Высота.left=537).
- .v2-filter min-width: 870 (legacy iter-04 строка 40) делает filter
шире content на 18px (1186 vs 1168).
Решение:
- `.v2-filter-pair { display: contents }` — pair wrapper становится
transparent, его 2 children становятся прямыми grid-items.
- 8 явных `.v2-filter-control--{type}` с grid-column/row для 4×2.
- Slider track `width: calc(100% - 20px); margin-inline: 10px` —
gap 20px между tracks; handles больше не перекрываются.
- `.v2-filter { min-width: 0 !important }` — снимаем legacy.
──────────────────────────────────────────────────────────────────── */
/* (1) Pair wrapper transparent — children jump to grid level */
.v2-filter .v2-filter-compact-grid .v2-filter-pair {
display: contents !important;
}
/* (2) 4×2 explicit grid */
.v2-filter .v2-filter-compact-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
grid-template-rows: auto auto !important;
column-gap: var(--sp-5) !important; /* 24 */
row-gap: var(--sp-4) !important; /* 16 */
align-items: start !important;
}
/* Row 1: Цена, Высота, Жесткость, Конструкция */
.v2-filter .v2-filter-control--price { grid-column: 1; grid-row: 1; }
.v2-filter .v2-filter-control--height { grid-column: 2; grid-row: 1; }
.v2-filter .v2-filter-control--firmness { grid-column: 3; grid-row: 1; }
.v2-filter .v2-filter-control--construction { grid-column: 4; grid-row: 1; }
/* Row 2: Размер, Вес, Стороны, Тип пружин */
.v2-filter .v2-filter-control--size { grid-column: 1; grid-row: 2; }
.v2-filter .v2-filter-control--weight { grid-column: 2; grid-row: 2; }
.v2-filter .v2-filter-control--sides { grid-column: 3; grid-row: 2; }
.v2-filter .v2-filter-control--spring-type { grid-column: 4; grid-row: 2; }
/* iter-18.3 (2026-07-28, Owner): категории с <5 контролов — авто-раскладка
в один ряд; жёсткие координаты выше стакали всё в колонку 1, остальные
колонки пустовали. Класс ставит инлайн-скрипт search_params.html. */
.v2-filter .v2-filter-compact-grid--flow .v2-filter-control {
grid-column: auto;
grid-row: auto;
}
/* (3) Range track inset — handles не пересекают cell border */
.v2-filter .v2-filter-compact-grid .sv-filter-slider-track,
.v2-filter .v2-filter-compact-grid .ui-slider {
width: calc(100% - 20px) !important;
margin: var(--sp-2) 10px 0 !important; /* 8 top, 10 sides */
}
/* (4) .v2-filter не должен выходить за content edge */
.v2-filter {
min-width: 0 !important; /* override legacy 870px */
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* (5) В compact-grid убираем дублирующий padding-внутри controls,
чтобы visual ритм был чёткий */
.v2-filter .v2-filter-control {
padding: 0 !important;
min-width: 0;
}
/* (5b) Inner wrapper inside .v2-filter-control — padding 0 чтобы title и
контент использовали полную ширину ячейки */
.v2-filter .v2-filter-control > div {
padding: 0;
}
/* (6) Row 2 alignment: чтобы Размер (select), Вес (range), Стороны
(checkbox), Тип пружин (checkbox) стартовали на одной visual baseline,
их title-blocks должны иметь одинаковый top-offset.
`align-items: start` на grid + минимальный paddings обеспечивают.
Также добавляем margin-top:0 на title в row 2 — на всякий случай. */
.v2-filter .v2-filter-control > div > div:first-child label.title,
.v2-filter .v2-filter-control > div label.title {
margin-top: 0 !important;
}
/* (7) Checkbox-группы внутри cells — нормализуем top margin */
.v2-filter .v2-filter-compact-grid .checkBlock__wrapper,
.v2-filter .v2-filter-compact-grid .checkBlock__scroll {
margin: 0 !important;
}
/* ════════════════════════════════════════════════════════════════════
iter-18.3 (2026-06-09) — COMPACT FILTER HEAD ALIGNMENT
────────────────────────────────────────────────────────────────────
Owner: «Подобрать матрас» сейчас по центру + большая band сверху →
compact-grid просел вниз, не выровнен с левым каталогом.
Target:
- title справа, на уровне «КАТАЛОГ ТОВАРОВ» (top ≤ delta 6);
- row1 labels на уровне «Взрослые матрасы» (delta ≤ 8);
- filter height ≤ 405;
- catalog y ≤ 1025.
Что меняем (всё в шапке фильтра, grid НЕ трогаем):
- .v2-filter padding-top 16→4;
- .v2-filter__head: grid → flex flex-end, min-height 32 (было 48);
- .v2-filter__head-slot {display:none} — пустой слот больше не нужен;
- .v2-filter__title text-align: right, margin: 0, font 22→20;
- .v2-filter__head margin-bottom 8→0;
- .v2-filter form { margin: 0 } — убираем browser default form-margin
(это «потерянные» 17px между head и compact-grid).
──────────────────────────────────────────────────────────────────── */
/* (1) Снимаем верхний и нижний воздух фильтра */
.v2-filter {
padding-top: var(--sp-1) !important; /* 4 (было 16) */
padding-bottom: var(--sp-2) !important; /* 8 (было 12) */
}
/* Compact-grid row-gap чуть тоньше — сетка визуально остаётся читаемой */
.v2-filter .v2-filter-compact-grid {
row-gap: var(--sp-2) !important; /* 8 (было 16) */
}
/* Head min-height чуть меньше — title по-прежнему помещается, но band тоньше */
.v2-filter .v2-filter__head {
min-height: 28px !important;
}
/* Footer ещё ближе к контенту */
.v2-filter .v2-filter__foot,
.v2-filter .v2-filter__foot.sv-search-params {
margin-top: var(--sp-2) !important; /* 8 */
padding-top: var(--sp-2) !important; /* 8 (было 10) */
}
/* (2) Head — компактная band: заголовок слева, «Очистить фильтр» справа.
Owner 2026-06-18 #3.2/#3.3: title по левому краю контента (на одной вертикали
с «Цена»), clear по правому краю — на уровне правой границы кнопки «Подобрать»
(обе у правого края контент-области, см. удаление clearfix ::after ниже). */
.v2-filter .v2-filter__head {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
gap: var(--sp-3) !important;
min-height: 32px !important;
margin-bottom: 0 !important;
text-align: left !important;
}
/* Старый пустой слот (grid-cell-1) больше не нужен в flex layout */
.v2-filter .v2-filter__head-slot {
display: none !important;
}
.v2-filter .v2-filter__title {
margin: 0 !important;
text-align: left !important;
font-size: 20px !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
.v2-filter .v2-filter__clear {
margin: 0 !important;
}
/* (3) Browser default `