/* Подбор по характеристикам (см. apps/catalog/templates/catalog/_picker.html
   и apps/catalog/picker.py). Кнопка+сетка карточек — общий виджет с
   помощником форсунки (static/catalog/dropdown.js/.css), здесь только то,
   что своё: форма, шапка, кнопка «Применить» и вид классических <select> —
   запасного пути без сценария (см. picker.js: он их прячет и строит рядом
   карточки, но полями формы select'ы остаются всегда). Без рамки вокруг
   формы — блок отделяет от страницы заливка и отступ (см. dropdown.css,
   там же образцы, на которые это правило опирается); классический
   <select> — родной контрол браузера, его собственную рамку не трогаем. */
.picker{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s4);
  padding:var(--s5); margin-bottom:var(--s6);
  background:var(--panel); border-radius:var(--r-md)}
.pick-head{flex-basis:100%; font:600 10px/1 var(--mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint)}

/* Классический <select> без сценария — та же клетка, что была всегда:
   picker.js её не трогает, только прячет целиком (row.hidden = true),
   когда рядом встают карточки (#pickFields, см. dropdown.css: .sh-field
   и соседи).

   Авторский display перебивает атрибут hidden — браузерное display:none
   проигрывает ему по каскаду (тот же гвоздь, что в catalog/list.html,
   .flist[hidden]: там из-за него оба списка раздела показывались разом).
   Без строки ниже .pick оставался бы display:flex несмотря на hidden, и
   родной <select> внутри торчал бы под кнопками-карточками — ровно то,
   что видели на проде. */
.pick{display:flex; flex-direction:column; gap:6px; flex:1 1 176px; min-width:176px}
.pick[hidden]{display:none}
.pick-label{font:500 11px/1.3 var(--sans); color:var(--muted)}
.pick-native{min-height:38px; padding:0 var(--s3); border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--page); color:var(--ink);
  font:400 13px/1.4 var(--sans)}
.pick-native:hover{border-color:var(--ink)}
.pick-native:focus-visible{outline:2px solid var(--ink); outline-offset:-1px}

.pick-apply{flex:none; min-height:38px; padding:0 var(--s5); border:0;
  border-radius:var(--r-sm); background:var(--dark); color:var(--dark-ink);
  font:600 10.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer}
.pick-apply:hover{opacity:.85}
.pick-apply[hidden]{display:none}
@media (max-width:640px){
  .picker{flex-direction:column; align-items:stretch; padding:var(--s4)}
  .pick{min-width:0}
  .pick-apply{width:100%}
}

/* Телефон (владелец 28.10.2026: «подбор форсунки в одну строку»): поля-кнопки подбора в раздел — в одну строку,
   по три в ряд (у форсунки три: расход, угол, рисунок), значение мельче. Не auto-fit: в колонке flex Chrome
   считает высоту сетки по одной колонке, и под полями оставалась пустая полоса. Помощник на карточке
   и на главной — свои, их не трогаем: правило только внутри .picker. */
@media (max-width:900px){
  .picker .sh-fields{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s2)}
  .picker .sh-label{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .picker .sh-btn{min-height:44px; padding:8px 10px; font-size:14px}
  /* список значений — во всю ширину блока, а не узкой колонкой поля: держит его сетка, не поле */
  .picker .sh-fields{position:relative}
  .picker .sh-field{position:static}
  .picker .sh-pop{left:0; right:0}
}