/* ═══════════════════════════════════════════════════════════════════════════
   STROM · разборы внутри каталога
   Полоса над сеткой товаров (.sgs), микроссылка в характеристиках (.sgl),
   строка под паспортом карточки (.sgp).

   Файл печатается на страницах товара и архивах категорий. Поэтому:
     • токены объявляются на самих блоках — палитра сайта живёт в home.css под
       классом .sh-home, а каталог собран темой и до этого класса не достаёт;
     • каждый селектор начинается со своего префикса .sgs / .sgl / .sgp;
     • ничего не позиционируется fixed/sticky — у листинга своя колонка фильтров
       со sticky, и лишний слой сверху ломает её расчёт.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Полоса разбора над сеткой ───────────────────────────────────────────── */

.sgs{
  --sgs-ink:#232624;
  --sgs-text:#6f756f;
  --sgs-green:#0e7e50;
  --sgs-line:rgba(35,38,36,.13);
  --sgs-tint:#f1f7f3;
  --sgs-sans:"Plex Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --sgs-mono:"Plex Mono","Plex Sans",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sgs-ease:cubic-bezier(.22,.61,.36,1);

  margin:0 0 28px;
  font-family:var(--sgs-sans);
}

/* Рамка, а не заливка. Полоса акции рядом залита цветом и обязана перекрикивать
   всё вокруг; разбор — служебная подсказка, и если он начнёт спорить по весу
   с акцией, перестанут читать именно акцию. */
.sgs__in{
  display:flex;align-items:center;gap:22px;
  padding:16px 22px 16px 16px;
  border:1px solid var(--sgs-line);border-radius:6px;
  background:#fff;color:var(--sgs-ink);text-decoration:none;
  transition:border-color .25s var(--sgs-ease),background .25s var(--sgs-ease);
}
.sgs__in:hover,
.sgs__in:focus-visible{border-color:var(--sgs-green);background:var(--sgs-tint);color:var(--sgs-ink);}
.sgs__in:focus-visible{outline:2px solid var(--sgs-green);outline-offset:3px;}

.sgs__pic{
  flex:0 0 130px;align-self:stretch;min-height:86px;
  border-radius:4px;overflow:hidden;background:var(--sgs-tint);
}
/* strom_home_frame_attachment() отдаёт <picture> в обёртке .sh-ph — обе обёртки
   уводим из раскладки, чтобы <img> стал прямым ребёнком слота (тот же приём,
   что в блоках главной). */
.sgs__pic .sh-ph,
.sgs__pic picture{display:contents;}
.sgs__pic img{width:100%;height:100%;object-fit:cover;display:block;}
/* ⚠️ Уголки-засечки .sh-ph::before/::after — метка ПЛЕЙСХОЛДЕРА (home.css:126).
   На настоящем кадре они читаются рамкой кадрирования, а display:contents их
   не убирает: псевдоэлементы остаются в потоке как дети. Гасим явно. */
.sgs__pic .sh-ph--img::before,
.sgs__pic .sh-ph--img::after{content:none;}

.sgs__copy{display:flex;flex-direction:column;gap:5px;min-width:0;}

.sgs__eyebrow{
  font-family:var(--sgs-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sgs-green);
}
.sgs__h{font-size:17px;line-height:1.25;font-weight:600;}
.sgs__lead{font-size:13px;line-height:1.5;color:var(--sgs-text);}

.sgs__go{
  display:inline-flex;align-items:center;gap:9px;margin-top:3px;
  font-size:13px;font-weight:600;color:var(--sgs-green);
}
.sgs__go i{
  font-style:normal;font-family:var(--sgs-mono);font-size:11px;font-weight:400;
  letter-spacing:.06em;color:var(--sgs-text);
}
.sgs__go span{transition:transform .25s var(--sgs-ease);}
.sgs__in:hover .sgs__go span{transform:translateX(3px);}

@media (max-width:767px){
  .sgs__in{gap:14px;padding:12px 14px 14px 12px;align-items:flex-start;}
  .sgs__pic{flex-basis:84px;min-height:64px;}
  .sgs__h{font-size:15px;}
  /* На узком экране строка обещания ломалась бы на три строки из-за времени
     чтения — оно здесь не главное, и его можно не показывать. */
  .sgs__go i{display:none;}
}

/* ─── Микроссылка в таблице характеристик ─────────────────────────────────── */

/* Тихая по умолчанию и зелёная под курсором: строка характеристик — это данные,
   и ссылка не должна перетягивать взгляд с самого значения. */
.sgl{
  margin-left:8px;white-space:nowrap;
  font-size:12px;color:#8a908a;text-decoration:none;
  border-bottom:1px dotted currentColor;
  transition:color .2s ease;
}
.sgl:hover,
.sgl:focus-visible{color:#0e7e50;}

/* ─── Строка под паспортом карточки ───────────────────────────────────────── */

.sgp{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 18px;padding:11px 14px;
  border:1px solid rgba(35,38,36,.13);border-left:2px solid #0e7e50;border-radius:4px;
  background:#f1f7f3;
  font-family:"Plex Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:13px;line-height:1.4;color:#232624;text-decoration:none;
  transition:background .25s cubic-bezier(.22,.61,.36,1);
}
.sgp:hover,
.sgp:focus-visible{background:#e7f4ed;color:#232624;}
.sgp:focus-visible{outline:2px solid #0e7e50;outline-offset:2px;}
.sgp__t{font-weight:600;}
.sgp__go{flex:0 0 auto;color:#0e7e50;transition:transform .25s cubic-bezier(.22,.61,.36,1);}
.sgp:hover .sgp__go{transform:translateX(3px);}