/* Параметрический подбор — секция на главной.
   Только переменные темы из :root сайта, своих цветов нет: иначе панель
   выпадет из тёмной темы. Классы строк результатов (.srow, .addcart, .rneed,
   .ask) НЕ переопределяются — берутся сайтовые как есть. */

/* Почему тут вообще правило для body.
   У сайта стоит `html,body{overflow-x:hidden}` — защита от горизонтальной
   прокрутки. Побочный эффект: body становится областью прокрутки, и любой
   position:sticky внутри него мёртв. Именно поэтому колонка фильтров уходила
   с экрана, хотя sticky был прописан и в стилях числился применённым.

   `clip` режет по горизонтали ровно так же, как `hidden`, но областью прокрутки
   элемент НЕ делает — это и есть штатное лекарство. Правило сужено до
   «пока панель открыта»: закрытая панель оставляет сайт ровно таким, как был.
   Старый браузер, не знающий clip или :has(), просто отбросит правило и получит
   сегодняшнее поведение — колонка прокручивается вместе со страницей. */
body:has(#paramsWrap.open){overflow-x:clip}

#paramsWrap{display:none;margin-top:18px}
#paramsWrap.open{display:block}

/* overflow:hidden здесь БЫЛО — ради скруглённых углов. Оно же делало шелл
   областью прокрутки, и position:sticky у колонки фильтров становился мёртвым:
   стиль применялся, а колонка всё равно уходила с экрана. Углы теперь скругляет
   сама шапка (единственный элемент со своим фоном), а шелл ничего не режет. */
.pp-shell{border:1px solid var(--border);border-radius:14px;background:var(--bg)}
.pp-top{padding:14px 18px;border-bottom:1px solid var(--border-soft);background:var(--muted-bg);
  border-radius:13px 13px 0 0}
.pp-cover{font-size:12.5px;color:var(--gray);line-height:1.5}
.pp-cover b{color:var(--ink);font-weight:600}
.pp-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pp-tab{border:1px solid var(--border);background:var(--bg);color:var(--gray);
  border-radius:999px;padding:5px 12px;font-size:12.5px;cursor:pointer;white-space:nowrap;
  font-family:inherit;transition:.15s}
.pp-tab:hover{border-color:var(--ink)}
.pp-tab b{color:var(--ink);font-weight:600}
.pp-tab.on{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.pp-tab.on b{color:var(--bg)}

.pp-body{display:flex;align-items:flex-start;gap:0}
.pp-side{width:288px;flex:none;border-right:1px solid var(--border-soft);padding:14px;
  position:sticky;top:0;align-self:flex-start}
/* top здесь только затравка: дальше его ведёт params_app.js по направлению
   прокрутки — колонка выше окна, и одним значением тут не обойтись. */
/* max-height и своей прокрутки у колонки НЕТ: была max-height:680px при содержимом
   2117px — фильтр обрывался прямо по строке значения, а кнопка под ним уезжала под
   фолд, и достать её было нечем.

   Но без sticky фильтры просто уходили с экрана: замер на «Резисторах» — при 1800 px
   прокрутки (треть выдачи из тридцати позиций) на экране НОЛЬ фильтров. Поэтому
   sticky вернулся, и именно bottom:0, а не top:0. Колонка выше окна (1404 против
   800), и это решает всё:
     top:0    — прижимает верх, и нижние 600 px колонки не показать НИКОГДА;
     bottom:0 — не срабатывает вовсе: липкий отступ держит элемент со своей
                стороны, вверх он его не тянет (замерено).
   Поэтому top ведёт скрипт по направлению прокрутки; подробности там же.
   На телефоне это перекрывается position:fixed в медиазапросе ниже. */
.pp-main{flex:1;min-width:0}

.pp-f{border:1px solid var(--border-soft);border-radius:10px;margin-bottom:9px;overflow:hidden}
.pp-f>h4{margin:0;padding:8px 10px;background:var(--muted-bg);font-size:12.5px;font-weight:600;
  color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:8px}
.pp-f>h4 span{color:var(--soft);font-weight:400;font-size:11px;white-space:nowrap}
.pp-f>h4 .pp-drv{border:1px solid var(--border);border-radius:999px;padding:1px 6px;
  font-size:10px;color:var(--gray);margin-left:6px;cursor:help}
/* НИКАКОЙ прокрутки внутри фильтра. Раньше здесь было max-height+overflow, и на
   экране оказывалось семь вложенных скроллов сразу — колесо цеплялось за ближний
   список вместо колонки. Теперь длинные списки режутся по 12 значений с кнопкой
   «показать все», а прокрутка в панели ровно одна — у колонки фильтров. */
.pp-f .pp-in{padding:8px 10px}
.pp-v{display:flex;align-items:center;gap:7px;padding:2.5px 0;cursor:pointer;font-size:13px;color:var(--ink)}
.pp-v input{margin:0;flex:none;accent-color:var(--ink)}
.pp-v .pp-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-v .pp-n{color:var(--soft);font-size:11.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.pp-f input[type=search],.pp-f input[type=number]{width:100%;padding:5px 7px;border:1px solid var(--border);
  border-radius:7px;font:inherit;font-size:12.5px;background:var(--bg);color:var(--ink);outline:none}
.pp-f input[type=search]:focus,.pp-f input[type=number]:focus{border-color:var(--ink)}
.pp-range{display:flex;gap:6px;align-items:center}
.pp-range input{width:50%}
.pp-range span{color:var(--soft);font-size:12px}
/* «Понято как …» — строка под полем. Она обязана быть видна ВСЕГДА, пока поле
   на экране: разбор написанного человеком содержит догадку, и догадка, о
   которой не сказали, однажды означает неправильную закупку. Поэтому это не
   всплывающая подсказка и не title, а обычный текст. */
.pp-hint{margin-top:5px;font-size:11.5px;line-height:1.45;color:var(--soft)}
/* Предупреждение у слабого фильтра. Стоит НАД значениями, а не под ними:
   покупатель должен прочитать его до того, как поставит галочку, а не после.
   Своих цветов нет — рамка из переменной темы, как у всего остального. */
.pp-weak{margin:0 0 7px;padding:5px 7px;font-size:11px;line-height:1.4;
  color:var(--gray);border:1px solid var(--border);border-radius:7px;background:var(--muted-bg)}
/* «НЕ УКАЗАНО (N)» — обязательная строка фильтра с неполным покрытием.
   Под значениями, а не над: сперва то, чем сузить, потом честная оговорка.
   Не флажок и не кнопка: по «не указано» не фильтруют, это сообщение. */
.pp-unset{margin-top:6px;padding-top:6px;border-top:1px dashed var(--border);
  font-size:11.5px;color:var(--soft);font-variant-numeric:tabular-nums}
.pp-hint b{color:var(--ink);font-weight:600}
.pp-hint .pp-bad{color:var(--ink);border-bottom:1px dashed var(--border)}
.pp-more{background:none;border:0;color:var(--ink);cursor:pointer;padding:5px 0;font:inherit;
  font-size:12px;text-decoration:underline;text-underline-offset:3px}
/* Кнопка «Показать все фильтры» отделяет видимую часть панели от скрытой —
   она обязана быть заметной, поэтому берёт сайтовый .btn .btn-outline, а не
   подчёркнутую строчку, которой помечены действия ВНУТРИ фильтра. */
.pp-allf{width:100%;margin-top:4px}

.pp-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:12px 18px;border-bottom:1px solid var(--border-soft);flex-wrap:wrap}
.pp-head .pp-count{font-size:13px;color:var(--gray);font-variant-numeric:tabular-nums}
.pp-head .pp-count b{color:var(--ink)}
.pp-chips{display:flex;flex-wrap:wrap;gap:6px}
.pp-chip{border:1px solid var(--border);border-radius:999px;padding:3px 9px;font-size:12px;
  color:var(--ink);background:var(--muted-bg);cursor:pointer;font-family:inherit}
.pp-chip:hover{border-color:var(--ink)}
.pp-chip i{font-style:normal;color:var(--soft);margin-left:5px}
.pp-note{padding:8px 18px;font-size:12px;color:var(--gray);border-bottom:1px solid var(--border-soft);
  background:var(--muted-bg)}
.pp-empty{padding:26px 18px;color:var(--soft);font-size:13px}
.pp-foot{padding:10px 18px;font-size:12px;color:var(--soft);border-top:1px solid var(--border-soft)}
.pp-busy{opacity:.55;transition:opacity .12s}

/* кнопка «Фильтры» — только на телефоне */
.pp-mob{display:none;width:100%;height:44px;border:1px solid var(--border);border-radius:10px;
  background:var(--bg);color:var(--ink);font:inherit;font-weight:600;font-size:13.5px;cursor:pointer;
  align-items:center;justify-content:center;gap:8px}
.pp-mob b{background:var(--ink);color:var(--bg);border-radius:999px;min-width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;font-size:11.5px}
.pp-close{display:none}

@media(max-width:860px){
  .pp-side{width:246px}
}
@media(max-width:640px){
  .pp-body{display:block}
  .pp-mob{display:inline-flex;margin:12px 14px;width:calc(100% - 28px)}
  .pp-side{position:fixed;inset:0;z-index:90;width:auto;max-height:none;background:var(--bg);
    border:0;padding:14px 16px 76px;overflow:auto;overscroll-behavior:contain;display:none;top:0}
  .pp-side.open{display:block}
  /* кнопка «Показать N» появляется ТОЛЬКО когда открыты фильтры.
     Раньше здесь стояло display:flex безусловно — и она висела всегда. */
  .pp-close{display:none;position:fixed;left:16px;right:16px;bottom:16px;z-index:91;height:46px;
    align-items:center;justify-content:center;border:0;border-radius:12px;background:var(--ink);
    color:var(--bg);font:inherit;font-weight:600;font-size:14px;cursor:pointer}
  .pp-side.open+.pp-close{display:flex}
  /* ВКЛАДКИ В ОДНУ СТРОКУ, ПРОКРУТКОЙ ВБОК.
     Замер на 375 px: шестнадцать вкладок переносом занимали 490 px в
     ПЯТНАДЦАТИ строках, и до первой карточки товара было 698 px — почти
     весь экран телефона уходил на оглавление. В одну строку это 44 px. */
  .pp-tabs{gap:6px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    scrollbar-width:none;padding-bottom:2px;margin-right:-12px;padding-right:12px}
  .pp-tabs::-webkit-scrollbar{display:none}
  .pp-tab{flex:none;scroll-snap-align:start;padding:8px 13px;font-size:13px}
  /* ПАЛЕЦ, А НЕ КУРСОР. Строка значения была 26 px при общепринятом минимуме
     44 px на касание: попасть по флажку можно только ногтем. Высоту даёт
     min-height, а не padding, — иначе длинное значение в две строки
     раздувается вдвое. */
  .pp-v{min-height:44px;padding:4px 0;font-size:14px}
  .pp-v input{width:20px;height:20px}
  .pp-f>h4{padding:11px 12px;font-size:13px}
  .pp-f .pp-in{padding:8px 12px}
  .pp-f input[type=search],.pp-f input[type=number],.pp-range input{
    min-height:40px;font-size:16px}   /* 16px — иначе iOS зумит страницу на фокусе */
  /* Отступы: на 375 px шапка панели съедала 86 px по бокам, полоса вкладок
     оставалась 289 px. */
  .pp-top{padding:12px}
  .pp-head{padding:10px 12px}
  .pp-shell{border-radius:12px}
  .pp-cover{font-size:12px}
}