/* Панель фильтра подборки. Вынесена из niche.css: тем же фильтром
   пользуется главная — он приезжает в меню-бургер, а раздел держит
   его в боковой колонке. */
.filter-panel{position:sticky;top:78px;padding:20px;border:1px solid var(--catalog-line);border-radius:18px;background:#fff;box-shadow:0 14px 42px rgba(18,45,53,.07)}
.filter-heading{font-family:'Unbounded',sans-serif;font-size:18px;font-weight:600}
.filter-caption{margin-top:6px;color:var(--catalog-muted);font-size:11.5px;line-height:1.45}
.filter-group{padding-top:18px;margin-top:18px;border-top:1px solid var(--catalog-line)}
.filter-group-title{display:block;margin-bottom:10px;font-size:13px;font-weight:750}
.filter-options{display:flex;flex-wrap:wrap;gap:7px}
.filter-option input{position:absolute;opacity:0;pointer-events:none}
.filter-option span{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:7px 10px;border:1px solid var(--catalog-line);border-radius:999px;background:#fff;color:#405158;font-size:11.5px;cursor:pointer;transition:.18s}
.filter-option-count{color:#849298;font-size:10px;font-weight:550}
.filter-option input:checked+span{border-color:var(--catalog-aqua);background:#e5f4f6;color:var(--catalog-aqua-dark);font-weight:700}
.filter-option input:checked+span .filter-option-count{color:var(--catalog-aqua-dark)}
.filter-option input:focus-visible+span{outline:3px solid var(--catalog-sun);outline-offset:2px}
.filter-option.implied span{cursor:default;box-shadow:inset 0 0 0 1px rgba(9,122,147,.08)}
.filter-option.implied span:before{content:'✓';font-size:10px;font-weight:800}
.filter-selects{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.filter-select{width:100%;height:40px;padding:0 9px;border:1px solid var(--catalog-line);border-radius:10px;background:#fff;color:#30434a;font:500 11.5px 'Onest',sans-serif}
.filter-actions{display:grid;gap:8px;margin-top:20px}
.apply-filter{min-height:44px;border:0;border-radius:11px;background:var(--catalog-aqua);box-shadow:0 2px 0 #05687b,0 8px 16px rgba(9,122,147,.18);color:#fff;font:700 13px 'Onest',sans-serif;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.apply-filter:hover{background:var(--catalog-aqua-dark);box-shadow:0 3px 0 #054f60,0 11px 20px rgba(9,122,147,.22);transform:translateY(-1px)}
.apply-filter.loading{opacity:.78}
.apply-filter:disabled{background:#aab9bd;box-shadow:none;cursor:default;transform:none}
.reset-filter{text-align:center;color:var(--catalog-muted);font-size:11.5px;text-decoration:underline;text-underline-offset:3px}
.filter-open{display:none}
@media(max-width:900px){.filter-panel{position:relative;top:auto}}
@media(max-width:760px){.filter-open{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:46px;padding:0 14px;border:1px solid var(--catalog-line);border-radius:12px;background:#fff;color:var(--catalog-ink);font:700 13px 'Onest';cursor:pointer}.filter-panel{display:none;margin-top:10px;padding:16px}.filter-panel.open{display:block}}
.filter-disclosure{padding-top:14px;margin-top:14px}
/* Кнопка, не <summary> — у native <details> в части мобильных браузеров
   (замечено на живом телефоне) есть свой значок раскрывашки, не убираемый
   через CSS: ни list-style:none, ни ::marker, ни appearance:none не гасили
   его до конца. У обычной кнопки такого значка нет ни в одном браузере. */
.filter-disclosure-summary{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:34px;padding:0;margin:0;border:0;outline:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;font:inherit;font-size:13px;font-weight:750;color:inherit;text-align:left}
.filter-disclosure-summary:after{content:'+';display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:var(--catalog-wash);color:var(--catalog-aqua-dark)}
.filter-disclosure.open>.filter-disclosure-summary:after{content:'−'}
.filter-disclosure .filter-options{padding-top:10px}
.filter-disclosure:not(.open) .filter-options{display:none}
/* Строка с кнопкой всегда прижата к низу видимой области — это может быть
   окно браузера (боковая колонка на десктопе) или сам скроллящийся блок
   (меню-бургер). position:sticky решает это без JS: сама находит нужный
   скроллящийся предок и либо держит кнопку у его нижнего края, либо —
   когда прокрутка дошла до конца формы — отпускает её на своё место
   в потоке. Раньше здесь были JS-классы live-count-visible/-docked
   с ручным пересчётом через getBoundingClientRect() по событию window
   scroll — и переставали работать именно в меню, потому что скролл там
   идёт внутри .niche-panel, а не у window: событие просто не долетало. */
.filter-actions{position:sticky;bottom:0;z-index:2;margin:20px -20px -20px;padding:14px 20px;background:#fff;border-top:1px solid var(--catalog-line)}
@media(max-width:760px){.filter-actions{margin:14px -16px -16px;padding:12px 16px}}
.filter-option.implied span{cursor:pointer}
.filter-option.implied span:before{content:none}
.filter-option.implied input:checked+span:before{content:'✓';font-size:10px;font-weight:800}
/* Внутри меню панель всегда плоская: своя рамка и тень ей там не нужны,
   меню само по себе карточка. Строка с кнопкой — тот же sticky, что и у
   боковой колонки раздела (см. выше): скроллящийся предок здесь не
   window, а сам .niche-panel, но sticky это выясняет сам, без JS.
   Отрицательные поля по бокам равны отступу .niche-panel (22px десктоп,
   18px телефон — see base.css), чтобы подложка шла во всю ширину. */
.niche-filter-slot .filter-panel{display:block;position:static;top:auto;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.niche-filter-slot .filter-actions{margin:16px -22px -22px;padding:14px 22px;border-top:1px solid var(--border)}
@media(max-width:760px){.filter-open{display:none}.filter-caption{font-size:12px}.filter-option-count{font-size:12px}.reset-filter{font-size:12px}.filter-option span{font-size:12px}.filter-select{font-size:12px}.niche-filter-slot .filter-heading{font-size:16px}.niche-filter-slot .filter-caption{max-width:34em;margin-top:5px}.niche-filter-slot .filter-group{padding-top:14px;margin-top:14px}.niche-filter-slot .filter-actions{margin:14px -18px -18px;padding:12px 18px calc(12px + env(safe-area-inset-bottom))}.niche-filter-slot .reset-filter{display:none}.niche-filter-slot .apply-filter{min-height:46px;font-size:13px}}
@media(min-width:761px){.niche-panel.has-mobile-filter{padding-bottom:0}.niche-filter-slot .filter-actions{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px}.niche-filter-slot .apply-filter{padding:0 18px}.niche-filter-slot .reset-filter{white-space:nowrap}}

/* Иконки групп фильтра — плотно обрезаны по своему рисунку, без квадратной
   рамки: ширина от 22 до 41px при высоте 24 (после того как из файлов убрали
   обрывок-артефакт — см. комментарий в filter_icons.html, там же была причина
   штриха между иконкой и текстом, а не в этом CSS).
   С inline-flex и gap каждая строка получала свой отступ до текста, и подписи
   съезжали лесенкой. Колонка под иконку — фиксированной ширины (grid), поэтому
   текст всегда стартует в одной точке; сама иконка выровнена по левому краю. */
.filter-group-head{display:grid;grid-template-columns:44px 1fr;align-items:center;column-gap:11px;min-width:0}
.filter-group-icon{height:24px;width:auto;max-width:100%;justify-self:start;display:block;border:0;outline:0;vertical-align:middle;opacity:.85}
.filter-disclosure.open>.filter-disclosure-summary .filter-group-icon{opacity:1}
@media(max-width:760px){.filter-group-head{grid-template-columns:36px 1fr;column-gap:10px}.filter-group-icon{height:20px}}