/* Помощник подбора форсунки — главная и карточка товара (см.
   apps/catalog/templatetags/spec_helper_tags.py, apps/catalog/helper_views.py
   и static/catalog/spec-helper.js). Кнопка+сетка вариантов — общий виджет
   с пикером раздела, вынесен в dropdown.js/dropdown.css; здесь только то,
   что у самого помощника своё: сам блок и компактный список результатов.
   Без рамок — блок отделяют от страницы заливка и отступ, поля друг от
   друга — только отступ: сайт светлый документ, а не набор рамок (см.
   dropdown.css — там же образцы, на которые это правило опирается). */
.spec-helper{position:relative; padding:var(--s5); margin:var(--s6) 0;
  background:var(--panel); border-radius:var(--r-md)}
.sh-head{display:block; margin-bottom:var(--s4); font:600 10px/1 var(--mono);
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}

/* Компактный список результатов + «все результаты» — отделены от полей
   только отступом, без линии-разделителя. */
.sh-results{margin-top:var(--s6)}
.sh-list{display:flex; flex-direction:column; gap:2px}
.sh-item{display:flex; align-items:center; gap:var(--s3); padding:var(--s2); border-radius:var(--r-sm);
  text-decoration:none; color:inherit}
.sh-item:hover{background:var(--page)}
.sh-shot, .sh-noimg{flex:none; width:44px; height:44px; border-radius:var(--r-sm); overflow:hidden; background:#fff}
.sh-noimg{background:#F4F3F0}
.sh-shot img{width:100%; height:100%; object-fit:contain; display:block}
.sh-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.sh-info b{font:500 12.5px/1.3 var(--sans); color:var(--ink); font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sh-stock{font:500 9px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#22A06B}
.sh-price{flex:none; font:600 12.5px/1 var(--mono); color:var(--ink); white-space:nowrap}
.sh-empty{margin:0; font:400 12.5px/1.5 var(--sans); color:var(--muted)}
.sh-more{display:inline-block; margin-top:var(--s4); font:500 11px/1 var(--mono); color:var(--muted);
  text-decoration:none; border-bottom:1px solid var(--line)}
.sh-more:hover{color:var(--ink); border-color:var(--ink)}
