/* Общий выпадающий список подбора: подпись + значение + тонкая стрелка,
   без рамок и теней — стиль взят из уже свёрстанных частей витрины, а не
   придуман заново (см. static/catalog/dropdown.js). Один и тот же виджет
   стоит и у помощника форсунки (главная, карточка товара —
   spec-helper.css/js), и у пикера раздела (picker.css/js). Здесь только
   общая часть; своё у каждого места — в spec-helper.css и picker.css.

   Сайт — белый документ: иерархия строится типографикой, отступами и
   выравниванием, а не рамками. Образцы, которым эти правила следуют:
     — выбор/наведение без обводки — подсветка color-mix(в 8% ink), как
       у выбранного пункта дерева разделов (catalog/list.html, .flist
       a.on .lbl);
     — своя строка целиком тёмная у ТЕКУЩЕГО состояния (не просто наведён,
       а действительно выбран) — как активный язык в списке (templates/
       base.html, .langpop li a[aria-current]) и активная вкладка
       категорий/марок (catalog/list.html, .seg button[aria-selected]);
     — подпись сверху мельче и приглушённей значения снизу, разделитель —
       тонкая линия МЕЖДУ строками, а не рамка вокруг них (карточка
       товара, product.html, .spec-main th/td);
     — поверхность без обводки — заливка (assist-log p.bot, templates/
       base.html) вместо границы;
     — фокус с клавиатуры у элемента без рамки — только :focus-visible,
       кольцо внутрь (catalog/list.html, .frow > .fold:focus-visible). */

/* [hidden] ниже — не украшение: без него display:flex того же правила
   перебивал бы атрибут hidden по каскаду (авторский display всегда
   старше правила user-agent, независимо от специфичности — тот же гвоздь,
   что у catalog/list.html, .flist[hidden]). У #pickFields это пока не
   видно глазами (он пуст, пока сценарий не построил карточки), но у
   .pick — родного <select> пикера раздела — уже было видно на проде:
   ряд оставался display:flex вопреки hidden, и <select> торчал под
   кнопками (см. picker.css, .pick[hidden]). */
/* Ряд полей — сетка равных колонок внутри блока (правка владельца): на
   флексе третье поле («Spray pattern») упиралось в правый край и резалось.

   Колонок ровно столько, сколько полей, и число это ставит сценарий
   (--sh-cols, см. dropdown.js, buildGroup). auto-fit здесь не годится:
   общий «сброс» растянут на всю строку и держит занятыми все колонки, а
   занятую колонку auto-fit не сворачивает — ряд полей вышел бы прижатым
   влево, с пустыми колонками справа. minmax(0, 1fr) — колонки равные и
   ровно по блоку: ноль в минимуме не даёт длинной подписи распереть ряд. */
.sh-fields{display:grid; align-items:start; gap:var(--s5);
  grid-template-columns:repeat(var(--sh-cols, 3), minmax(0, 1fr))}
.sh-fields[hidden]{display:none}
/* --sh-inset — общий вынос: на него кнопка поля выступает за колонку,
   чтобы её значение стояло ровно под подписью, и ровно на него же
   раскрывается список. Одно число на оба правила — разъехаться им нечем,
   а окно списка совпадает с полем по обоим краям (правка владельца). */
/* Заливка поля стоит на той же левой линии, что заголовок и всё
   остальное в блоке (замечание владельца 23.09.2026: «по вертикали
   рассинхрон из-за вложенности»). Поэтому выноса нет, а подпись над полем
   отступает внутрь ровно на padding самого поля — значение стоит под ней. */
.sh-field{--sh-inset:0px; position:relative; min-width:0;
  display:flex; flex-direction:column; gap:5px}
.sh-label{font:500 11px/1.3 var(--sans); color:var(--muted)}

.sh-row{display:flex; align-items:center; gap:2px}

/* Поле = значение + тонкая стрелка. Ни рамки, ни фона — до наведения или
   открытия виден только текст; тогда же, вместо обводки, лёгкая подложка
   (тот же color-mix, что у выбранного раздела в дереве слева). Отрицательные
   отступы компенсируют внутренний padding, чтобы текст не съезжал вправо
   относительно подписи над ним. Поле — основная зона касания виджета,
   отсюда и рост (правка владельца): 44–48px в высоту, значение крупнее. */
/* Поле залито всегда, а не только под курсором: без заливки его принимали
   за подпись и не пробовали нажать (замечание владельца 23.09.2026).
   Заливка — та же, что у строки поиска в шапке: рамок сайт не носит. */
.sh-btn{display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  flex:1; min-width:0; min-height:46px; padding:9px 12px;
  margin:0 calc(-1 * var(--sh-inset)); border:0; border-radius:var(--r-sm);
  background:var(--chip); color:var(--ink);
  font:600 16.5px/1.3 var(--mono); text-align:left; cursor:pointer}
.sh-btn:hover, .sh-btn[aria-expanded="true"]{background:color-mix(in srgb, var(--ink) 10%, transparent)}
.sh-btn:focus-visible{outline:2px solid var(--ink); outline-offset:-2px}
.sh-btn span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sh-car{flex:none; color:var(--faint); transition:transform .12s ease}
.sh-btn[aria-expanded="true"] .sh-car{transform:rotate(180deg)}

/* «×» одного поля: мелкий приглушённый символ, не кнопка-коробка — ростом
   с саму кнопку рядом, показан только пока в поле есть выбор (см.
   KromDropdown.buildField). */
.sh-clear{flex:none; width:32px; min-height:46px; padding:0; border:0; border-radius:var(--r-sm);
  margin-right:calc(-1 * var(--sh-inset));
  background:none; color:var(--faint); font:600 15px/1 var(--mono); cursor:pointer}
.sh-clear:hover{background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--ink)}
.sh-clear:focus-visible{outline:2px solid var(--ink); outline-offset:-2px}
.sh-clear[hidden]{display:none}

/* Всплывающая сетка вариантов: отделена от страницы заливкой и отступом,
   не обводкой — та же мысль, что у пузыря ассистента (templates/base.html,
   .assist-log p.bot).

   Ширина — ровно своего поля, край в край с кнопкой (правка владельца):
   окно уже поля и вдвинутое внутрь читалось как чужое. Поэтому же
   исчез замер ширины блока в сценарии — такому окну за край блока не
   выйти по построению (см. dropdown.js).

   Высота — целое число рядов: ряд складывается из карточки и зазора, а
   карточка — из строк заданной высоты (ниже), и нижний ряд не режется
   пополам. У поля с кг/ч ряд выше, отсюда :has(). Полоса прокрутки тоньше
   и бледнее общей (templates/base.html): в окне размером с поле она не
   должна спорить с вариантами. */
.sh-pop{--sh-row:58px; position:absolute; z-index:6; top:calc(100% + 4px);
  left:calc(-1 * var(--sh-inset)); right:calc(-1 * var(--sh-inset)); width:auto;
  max-height:calc(4 * var(--sh-row) - 4px + 2 * var(--s3)); overflow-y:auto;
  margin:0; padding:var(--s3); list-style:none;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:4px;
  background:var(--chip); border-radius:var(--r-md);
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--ink) 16%, transparent) transparent}
.sh-pop:has(.sh-kgh){--sh-row:74px}
.sh-pop::-webkit-scrollbar{width:6px}
.sh-pop::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius:3px}
.sh-pop::-webkit-scrollbar-track{background:transparent}
.sh-pop[hidden]{display:none}

/* Карточка варианта — один ритм у всех: значение, под ним приглушённый
   кг/ч-компаньон, под ним счётчик, и каждый на своём месте, даже когда
   его нечем заполнить (правка владельца). Держат ритм заданные высоты
   строк, а не содержимое: у «Всё» нет ни кг/ч, ни счётчика, и её карточка
   раньше оставалась пустой на всю высоту ряда.

   Высоты строк в пикселях — не придирка: из них складывается высота ряда,
   а из неё — высота окна (см. --sh-row выше). */
.sh-card{position:relative; display:grid; grid-template-rows:20px 16px 14px;
  align-content:start; min-width:0; padding:10px 12px; border-radius:var(--r-sm);
  cursor:pointer}
.sh-pop:not(:has(.sh-kgh)) .sh-card{grid-template-rows:20px 14px}
.sh-card:hover, .sh-card.active{background:color-mix(in srgb, var(--ink) 8%, transparent)}
/* Выбранный — тем же языком, что и выбранный раздел в дереве каталога
   (catalog/list.html, .flist a.on .lbl): та же подсветка чуть плотнее и
   тонкая полоса слева. Чёрная плашка была тяжелее всего остального на
   светлой сетке (правка владельца). Полоса — псевдоэлементом, поэтому от
   выбора карточка не меняет размер. */
.sh-card[aria-selected="true"]{background:color-mix(in srgb, var(--ink) 12%, transparent)}
.sh-card[aria-selected="true"]::before{content:""; position:absolute;
  left:4px; top:10px; bottom:10px; width:2px; border-radius:1px; background:var(--ink)}
.sh-val{grid-row:1; font:600 15px/20px var(--mono); color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sh-kgh{grid-row:2; min-height:16px; font:400 11.5px/16px var(--mono); color:var(--faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sh-n{grid-row:3; min-height:14px; font:400 11px/14px var(--mono); color:var(--muted)}
.sh-pop:not(:has(.sh-kgh)) .sh-n{grid-row:2}

/* Сброс всего отбора разом — простая текстовая надпись рядом с полями,
   без рамки и без подложки: тот же язык, что у сброса отборов раздела
   (catalog/list.html, .fhead .reset). Невидим, пока сбрасывать нечего —
   не сдвигает соседей при появлении (тот же приём, что у .fhead .reset). */
.sh-reset{grid-column:1 / -1; justify-self:end; padding:5px 0; border:0; background:none;
  color:var(--muted); font:500 10.5px/1 var(--mono); letter-spacing:.06em;
  text-transform:uppercase; cursor:pointer; white-space:nowrap}
.sh-reset:hover{color:var(--ink)}
.sh-reset:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.sh-reset[hidden]{display:none}

/* Узкий экран — меньше колонок, поля переносятся: три поля в ряд ниже
   900px уже нечитаемы, а на телефоне поле занимает всю ширину. */
@media (max-width:900px){
  .sh-fields{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:640px){
  .sh-fields{grid-template-columns:minmax(0, 1fr)}
  .sh-pop{grid-template-columns:repeat(3, 1fr)}
  .sh-reset{justify-self:stretch; text-align:left}
}