/* ТЗ-127 ч. 2 (26.09): панель фильтров каталога, кнопка «Все фильтры / Фильтры (N)», плашки выбранных значений.
   Разметка — core/elements/templates/category.tpl (колонка и оболочка панели), ajax/category_filters.php и
   core/elements/_lib/filtrPanel.php (свойства и значения), snippets/filtrPlashki.php (плашки); поведение —
   assets/templates/js/kombinacii.js.
   Десктоп (≥ 993 px — там же, где видна левая колонка): панель в колонке под меню «Каталог», открыта, кнопка
   «Показать N» плавает справа от изменённой строки. До 992 px: колонки нет — панель окном на весь экран по
   кнопке «Фильтры (N)», внизу закреплены «Сбросить» и «Показать N товаров». Цвета — фирменные: тёмно-синий
   #001960, серый фон #f5f5f6, линии #e1e5f0. */

/* левая колонка: меню «Каталог» и панель одна под другой; меню больше не липнет — под ним панель, а липкий
   блок наезжал бы на неё при прокрутке */
.category__kolonka{display:flex;flex-direction:column;gap:16px;flex-shrink:0;width:360px}
.category__kolonka .sidemenu{width:auto}
.category__kolonka--filtr .sidemenu{position:static;max-height:none}

.pfiltr{position:relative;display:flex;flex-direction:column;padding:14px 14px 10px;background-color:#f5f5f6;border-radius:10px}
.pfiltr__shapka{display:flex;align-items:center;gap:12px;padding:0 4px 6px}
.pfiltr__nazvanie{margin-right:auto;font-weight:600;font-size:18px;line-height:130%;color:#001960}
.pfiltr__sbros-verh{padding:0;font-size:14px;line-height:140%;color:#001960;text-decoration:underline;text-decoration-color:rgba(0,25,96,.35)}
.pfiltr__sbros-verh:hover{text-decoration-color:inherit}
.pfiltr__zakryt{display:none}
.pfiltr--svernuta .pfiltr__forma,.pfiltr--svernuta .pfiltr__plav,.pfiltr--svernuta .pfiltr__sbros-verh{display:none}
.pfiltr--svernuta .pfiltr__shapka{padding-bottom:0}

.pfiltr__forma{display:flex;flex-direction:column}
.pfiltr__svojstvo{min-width:0;margin:0;padding:12px 4px 10px;border:0;border-top:1px solid #e1e5f0}
.pfiltr__svojstvo:first-child{border-top:0;padding-top:4px}
/* legend внутри fieldset ведёт себя как блок только так: float + ширина, дальше — clear */
.pfiltr__zag{float:left;width:100%;margin:0 0 6px;padding:0 2px;font-weight:600;font-size:15px;line-height:140%;color:#333}
.pfiltr__zag+*{clear:both}
.pfiltr__poisk{display:block;width:100%;margin-bottom:6px;padding:7px 10px;font-size:14px;line-height:140%;color:#333;background-color:#fff;border:1px solid #e1e5f0;border-radius:6px;-webkit-appearance:none;appearance:none}
.pfiltr__poisk:focus{border-color:#001960}
.pfiltr__poisk::placeholder{color:#a9adb4}
.pfiltr__znacheniya{display:flex;flex-direction:column;gap:1px}
.pfiltr__znach{position:relative;display:flex;align-items:center;gap:10px;padding:5px 6px;font-size:14px;line-height:135%;color:#333;border-radius:6px;cursor:pointer;transition:background-color .2s}
.pfiltr__znach:hover{background-color:#fff}
.pfiltr__znach input{position:absolute;left:8px;top:50%;width:1px;height:1px;margin:0;opacity:0}
.pfiltr__galka{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;background-color:#fff;border:1.5px solid #a9adb4;border-radius:4px;transition:background-color .2s,border-color .2s}
.pfiltr__znach:hover .pfiltr__galka{border-color:#001960}
.pfiltr__znach input:checked+.pfiltr__galka{background-color:#001960;border-color:#001960}
.pfiltr__znach input:checked+.pfiltr__galka::after{content:"";width:5px;height:9px;margin-top:-2px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pfiltr__znach input:focus-visible+.pfiltr__galka{outline:2px solid #001960;outline-offset:2px}
.pfiltr__znach input:checked~.pfiltr__tekst{color:#001960;font-weight:600}
.pfiltr__tekst{flex:1;min-width:0;overflow-wrap:anywhere}
.pfiltr__chislo{flex-shrink:0;font-size:12px;line-height:140%;color:#8a8f98}
/* значение, которое при текущем выборе даёт 0 товаров, — серое и неактивное */
.pfiltr__znach--pusto,.pfiltr__znach--pusto:hover{color:#b8bcc4;background:none;cursor:default}
.pfiltr__znach--pusto .pfiltr__galka,.pfiltr__znach--pusto:hover .pfiltr__galka{background-color:#f5f5f6;border-color:#dfe2e8}
.pfiltr__znach--pusto .pfiltr__chislo{color:#c9ccd2}
.pfiltr__znach--lishnee{display:none}
.pfiltr__svojstvo--vse .pfiltr__znach--lishnee,.pfiltr__svojstvo--poisk .pfiltr__znach--lishnee{display:flex}
.pfiltr__znach--ne-najdeno{display:none!important}
.pfiltr__nichego{margin:0;padding:4px 6px;font-size:13px;color:#8a8f98}
.pfiltr__nichego[hidden],.pfiltr__esche-bloki[hidden]{display:none}
.pfiltr__vse,.pfiltr__esche{align-self:flex-start;padding:4px 6px;font-size:14px;line-height:140%;color:#001960;text-align:left}
.pfiltr__vse{margin-top:4px}
.pfiltr__vse:hover,.pfiltr__esche:hover{text-decoration:underline}
.pfiltr__esche{margin:4px 0 2px;padding:10px 4px 4px;width:100%;font-weight:600;border-top:1px solid #e1e5f0}
.pfiltr__pusto{margin:0;padding:6px 4px;font-size:14px;color:#8a8f98}

/* пока значения грузятся — полосы-заглушки той же высоты, что строки */
.pfiltr__zagruzka{display:flex;flex-direction:column;gap:12px;padding:8px 4px}
.pfiltr__zagruzka span{height:14px;border-radius:4px;background:linear-gradient(90deg,#e7e9ee 25%,#f5f6f8 50%,#e7e9ee 75%);background-size:200% 100%;animation:pfiltr-zagruzka 1.2s linear infinite}
.pfiltr__zagruzka span:nth-child(3n+1){width:55%}
@keyframes pfiltr-zagruzka{from{background-position:200% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.pfiltr__zagruzka span{animation:none}}

/* «Показать N товаров»: десктоп — плавает справа от изменённой строки, стрелкой к ней */
.pfiltr__plav{position:absolute;left:calc(100% + 14px);z-index:6;display:inline-flex;align-items:center;padding:10px 16px;font-weight:600;font-size:14px;line-height:140%;white-space:nowrap;color:#fff;background-color:#001960;border-radius:8px;box-shadow:0 6px 18px rgba(0,25,96,.28);transform:translateY(-50%);cursor:pointer;transition:background-color .2s}
.pfiltr__plav::before{content:"";position:absolute;left:-5px;top:50%;width:11px;height:11px;background-color:inherit;transform:translateY(-50%) rotate(45deg)}
.pfiltr__plav:hover{color:#fff;box-shadow:0 8px 22px rgba(0,25,96,.36)}
.pfiltr__plav[hidden]{display:none}
.pfiltr__plav.pfiltr__knopka--nel{background-color:#5c6690;box-shadow:0 4px 12px rgba(0,0,0,.12);cursor:default}
.pfiltr__niz{display:none}

/* кнопка над списком: «Все фильтры» на десктопе, «Фильтры (N)» до 992 px */
.pfiltr-knopka{font:inherit;text-align:left}
.pfiltr-knopka__mob{display:none}
.pfiltr-knopka[aria-expanded="true"]{border-color:#001960}
.pfiltr-knopka[aria-expanded="true"] .dropdown__svg--filter{fill:#001960}
.pfiltr-knopka[aria-expanded="true"] .dropdown__text{color:#001960}

/* выбранные значения над списком */
.pfiltr-plashki{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pfiltr-plashki__zag{margin-right:2px;font-size:14px;line-height:140%;color:#8a8f98}
.pfiltr-plashka{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:6px 8px 6px 12px;font-size:14px;line-height:130%;color:#001960;background-color:#edf0f7;border-radius:100px;transition:background-color .2s}
.pfiltr-plashka:hover{background-color:#dde3f1}
.pfiltr-plashka__pole{color:#5b6478}
.pfiltr-plashka__znach{font-weight:600;overflow-wrap:anywhere}
.pfiltr-plashka__krest{position:relative;flex-shrink:0;width:18px;height:18px;border-radius:50%;background-color:rgba(0,25,96,.1)}
.pfiltr-plashka__krest::before,.pfiltr-plashka__krest::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.5px;background-color:#001960;transform:translate(-50%,-50%) rotate(45deg)}
.pfiltr-plashka__krest::after{transform:translate(-50%,-50%) rotate(-45deg)}
.pfiltr-plashka:hover .pfiltr-plashka__krest{background-color:#001960}
.pfiltr-plashka:hover .pfiltr-plashka__krest::before,.pfiltr-plashka:hover .pfiltr-plashka__krest::after{background-color:#fff}
.pfiltr-plashki__sbros{margin-left:4px;font-size:14px;line-height:140%;color:#001960;text-decoration:underline;text-decoration-color:rgba(0,25,96,.35)}
.pfiltr-plashki__sbros:hover{text-decoration-color:inherit}

@media screen and (max-width:1600px){.category__kolonka{width:310px}}

/* до 992 px левой колонки нет (меню «Каталог» скрыто и раньше): панель — окно на весь экран */
@media screen and (max-width:992px){
    .category__kolonka{display:contents}
    .pfiltr{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:30;padding:0;background-color:#fff;border-radius:0}
    .pfiltr--otkryta{display:flex}
    .pfiltr__shapka{flex-shrink:0;padding:12px 12px 12px 16px;border-bottom:1px solid #e1e5f0}
    .pfiltr__sbros-verh,.pfiltr__plav{display:none!important}
    .pfiltr__zakryt{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;background-color:#f5f5f6;border-radius:8px}
    .pfiltr__zakryt svg{width:20px;height:20px;fill:none;stroke:#001960;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
    .pfiltr__forma,.pfiltr--svernuta .pfiltr__forma{display:flex;flex:1;min-height:0;padding:4px 16px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
    .pfiltr__znach{padding:8px 6px;font-size:15px}
    .pfiltr__poisk{font-size:16px}
    .pfiltr__niz{display:grid;flex-shrink:0;grid-template-columns:1fr 1.7fr;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background-color:#fff;border-top:1px solid #e1e5f0;box-shadow:0 -6px 16px rgba(0,0,0,.06)}
    .pfiltr__pokazat.pfiltr__knopka--nel,.pfiltr__pokazat:disabled{background-color:#8c93ad;box-shadow:none;cursor:default}
    .pfiltr-knopka__desk{display:none}
    .category__dropdown--filter.pfiltr-knopka .pfiltr-knopka__mob{display:inline}
    .pfiltr-knopka[aria-expanded="true"]{border-color:#e1e5f0}
}

/* ── ТЗ-127 ч. 11 (решение владельца 26.09): фильтр не удлиняет страницу и не уезжает ──────────────────────────────
   Колонка прилипает под шапкой (--pfiltr-top: высота липкой шапки + 16, ставит kombinacii.js), панель не выше окна;
   прокручиваются свойства (форма), а не сама панель — иначе плавающую «Показать N» (она справа, за краем панели)
   обрезало бы overflow. Длина страницы от панели не зависит. */
@media screen and (min-width:993px){
    /* sticky создаёт свой контекст наложения: без z-index плавающую «Показать N» (она над списком) накрывали картинки карточек; 3 — выше карточек, ниже шапки (у неё 4: её выпадающие меню и подсказки поиска должны ложиться поверх) */
    .category__kolonka--filtr{position:sticky;top:var(--pfiltr-top,100px);align-self:flex-start;z-index:3}
    .category__kolonka--filtr .pfiltr{max-height:calc(100vh - var(--pfiltr-top,100px) - 16px);box-sizing:border-box}
    .category__kolonka--filtr .pfiltr__forma{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;margin-right:-8px;padding-right:8px}
}
/* заголовок свойства — кнопка «свернуть / развернуть» */
.pfiltr__zag-knopka{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:0;font:inherit;font-weight:600;font-size:15px;line-height:140%;color:#333;text-align:left;background:none;border:0;cursor:pointer}
.pfiltr__zag-knopka:hover{color:#001960}
.pfiltr__strelka{flex:none;width:8px;height:8px;margin:0 4px 4px 0;border-right:2px solid #8a8f98;border-bottom:2px solid #8a8f98;transform:rotate(45deg);transition:transform .2s}
.pfiltr__zag-knopka[aria-expanded="false"] .pfiltr__strelka{transform:rotate(-45deg);margin-bottom:0}
.pfiltr__svojstvo--svernuto{padding-bottom:10px}
.pfiltr__svojstvo--svernuto .pfiltr__zag{margin-bottom:0}
.pfiltr__telo[hidden]{display:none}
/* «Показать все (N)»: все значения — в окне ~280 px с собственной прокруткой, поиск сверху окна (виден только тут) */
.pfiltr__poisk{display:none}
.pfiltr__svojstvo--vse .pfiltr__poisk{display:block;margin:0;border-radius:6px 6px 0 0}
.pfiltr__svojstvo--vse .pfiltr__znacheniya{max-height:280px;overflow-y:auto;overscroll-behavior:contain;padding:4px 6px;background-color:#fff;border:1px solid #e1e5f0;border-top:0;border-radius:0 0 6px 6px;scrollbar-width:thin}
.pfiltr__svojstvo--vse .pfiltr__nichego{margin-top:6px}
@media screen and (max-width:992px){
    .pfiltr__zag-knopka{font-size:16px;padding:4px 0}
    .pfiltr__svojstvo--vse .pfiltr__znacheniya{max-height:300px}
}