/* Подбор по характеристикам (см. 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)}
/* Ряд полей — на всю ширину блока: в flex-родителе он сжимался по содержимому, окно списка выходило шириной с кнопку и резало значения. */
.picker > .sh-fields{flex:1 1 100%; min-width:0}
/* С кнопками-карточками выбор применяется сразу; «Применить» нужна только родным <select> без сценария. */
.picker[data-pick-enhanced] .pick-apply{display:none}
.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}
@media (max-width:640px){
  .picker{flex-direction:column; align-items:stretch; padding:var(--s4)}
  .pick{min-width:0}
  .pick-apply{width:100%}
}