/* Общий выпадающий список подбора: подпись + значение + тонкая стрелка,
   без рамок и теней — стиль взят из уже свёрстанных частей витрины, а не
   придуман заново (см. 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). */

.sh-fields{display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--s5)}
.sh-field{position:relative; flex:1 1 200px; min-width:200px; display:flex; flex-direction:column; gap:4px}
.sh-label{font:500 11px/1.3 var(--sans); color:var(--muted)}

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

/* Поле = значение + тонкая стрелка. Ни рамки, ни фона — до наведения или
   открытия виден только текст; тогда же, вместо обводки, лёгкая подложка
   (тот же color-mix, что у выбранного раздела в дереве слева). Отрицательные
   отступы компенсируют внутренний padding, чтобы текст не съезжал вправо
   относительно подписи над ним. */
.sh-btn{display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  flex:1; min-width:0; padding:5px 6px; margin:0 -6px; border:0; border-radius:var(--r-sm);
  background:none; color:var(--ink);
  font:600 13px/1.4 var(--mono); text-align:left; cursor:pointer}
.sh-btn:hover, .sh-btn[aria-expanded="true"]{background:color-mix(in srgb, var(--ink) 8%, 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:22px; height:22px; padding:0; border:0; border-radius:var(--r-sm);
  background:none; color:var(--faint); font:600 13px/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). Карточкам нужно место, поэтому панель шире кнопки. */
.sh-pop{position:absolute; z-index:6; top:calc(100% + 4px); left:0;
  width:480px; max-width:min(480px, 92vw); max-height:320px; overflow-y:auto;
  margin:0; padding:var(--s3); list-style:none;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:2px;
  background:var(--chip); border-radius:var(--r-md)}
.sh-pop[hidden]{display:none}

/* Карточка варианта — без рамки: крупное значение, под ним мельче и
   приглушённей кг/ч-компаньон, счётчик простым приглушённым текстом
   (не бейдж-«пилюля»). Наведение/клавиатурный «актив» — та же подсветка
   8%, что у кнопки поля; ВЫБРАННЫЙ вариант — сплошная тёмная строка, как
   активный язык в .langpop и активная вкладка в .seg. */
.sh-card{display:flex; flex-direction:column; gap:2px; min-width:0;
  padding:6px 8px; border-radius:var(--r-sm); cursor:pointer}
.sh-card:hover, .sh-card.active{background:color-mix(in srgb, var(--ink) 8%, transparent)}
.sh-card[aria-selected="true"]{background:var(--dark)}
.sh-val{font:600 12.5px/1.3 var(--mono); color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sh-card[aria-selected="true"] .sh-val{color:var(--dark-ink)}
.sh-kgh{font:400 10px/1.3 var(--mono); color:var(--faint); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.sh-card[aria-selected="true"] .sh-kgh{color:var(--dark-ink); opacity:.75}
.sh-n{font:400 10px/1 var(--mono); color:var(--muted)}
.sh-card[aria-selected="true"] .sh-n{color:var(--dark-ink); opacity:.75}

/* Сброс всего отбора разом — простая текстовая надпись рядом с полями,
   без рамки и без подложки: тот же язык, что у сброса отборов раздела
   (catalog/list.html, .fhead .reset). Невидим, пока сбрасывать нечего —
   не сдвигает соседей при появлении (тот же приём, что у .fhead .reset). */
.sh-reset{align-self:flex-end; flex:none; 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}

@media (max-width:640px){
  .sh-field{min-width:0; flex-basis:100%}
  .sh-pop{left:0; right:0; width:auto; max-width:none; grid-template-columns:repeat(3, 1fr)}
  .sh-reset{width:100%; text-align:left}
}