/* ═══════════════════════════════════════════════════════════════════════════
   STROM · окно первого захода с разбором «Трапы из нержавеющей стали»

   Файл печатается почти на каждой странице сайта. Поэтому:
     • токены объявляются на самом блоке — палитра сайта живёт в home.css под
       классом .sh-home, а окно стоит в подвале и до этого класса не достаёт;
     • каждый селектор начинается с префикса .sgm — ни одного правила, способного
       задеть чужую разметку;
     • пока окно закрыто, у него display:none, и ни один его потомок не считается.

   Габарит: 880px по ширине. У кампании БРАЕР окно было 780 (Popup Maker, size
   large) — здесь шире, потому что сверху стоит слайдер и узкая полоса кадра
   выглядела бы обрезком. Высота держится под 768px-ноутбук: кадр 2,7:1 (326px)
   плюс текстовая часть ~320px.
   ═══════════════════════════════════════════════════════════════════════════ */

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

  position:fixed;inset:0;z-index:99990;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  font-family:var(--sgm-sans);
}

/* Тема местами переопределяет display у произвольных селекторов — атрибут hidden
   обязан остаться сильнее, иначе окно проступит до того, как его поднимет скрипт. */
.sgm[hidden]{display:none !important;}

.sgm__scrim{
  position:absolute;inset:0;
  background:rgba(16,26,21,.62);
  opacity:0;transition:opacity .3s var(--sgm-ease);
}
.sgm.is-on .sgm__scrim{opacity:1;}

.sgm__win{
  position:relative;
  width:100%;max-width:880px;
  max-height:min(92vh,780px);
  display:flex;flex-direction:column;
  background:#fff;border-radius:8px;overflow:hidden auto;
  box-shadow:0 30px 80px rgba(16,26,21,.34);
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .34s var(--sgm-ease),transform .34s var(--sgm-ease);
}
.sgm.is-on .sgm__win{opacity:1;transform:none;}

/* ⚠️ Скрипт переводит фокус на само окно (tabindex="-1"), чтобы читалка объявила
   диалог. Тема вешает на :focus своё оранжевое кольцо (auto 1px rgb(229,151,0)) —
   вокруг белого листа оно читается как чужая рамка. Снимаем ТОЛЬКО у контейнера:
   у кнопок и ссылок внутри кольца остаются, они там и нужны. */
.sgm__win:focus,
.sgm__win:focus-visible{outline:none !important;}

/* ─── Крестик ─────────────────────────────────────────────────────────────── */

/* ⚠️ min-height:0 обязателен: у темы на button висит min-height:42px, и круг 36px
   вытянулся бы в овал (та же грабля ловила стрелки слайдера в статье о трапах). */
.sgm__x{
  position:absolute;top:14px;right:14px;z-index:3;
  width:36px;height:36px;min-height:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;color:var(--sgm-ink);
  background:rgba(255,255,255,.92);border:1px solid var(--sgm-line);border-radius:50%;
  transition:background .25s var(--sgm-ease),color .25s var(--sgm-ease);
}
.sgm__x:hover{background:var(--sgm-green);border-color:var(--sgm-green);color:#fff;}
.sgm__x:focus-visible{outline:2px solid var(--sgm-green);outline-offset:2px;}

/* ─── Слайдер ─────────────────────────────────────────────────────────────── */

.sgm__deck{
  position:relative;flex:0 0 auto;
  aspect-ratio:2.7;overflow:hidden;background:var(--sgm-tint);
}

/* Стопка в одной ячейке грида: высота колоды равна кадру, и окно не прыгает
   при переключении. Гашение через visibility выключает слайд и для клавиатуры. */
/* ⚠️ `grid-template-rows:100%` — не украшение. Без явной строки грид считает её
   `auto`, единственная строка разрастается под интринсик картинки (496px при
   колоде 326), а `height:100%` у слайда разрешается уже от РАЗБУХШЕЙ строки.
   В итоге кадр вылезает из колоды, обрезается по верху, и `object-fit`/
   `object-position` не работают вовсе — трапа на кадре просто нет.
   `min-height:0` снимает минимум по содержимому у элемента грида. */
.sgm__slides{display:grid;grid-template-rows:100%;grid-template-columns:100%;width:100%;height:100%;}
.sgm__slide{
  grid-area:1/1;margin:0;width:100%;height:100%;min-height:0;min-width:0;overflow:hidden;
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--sgm-ease),visibility .5s;
}
.sgm__slide.is-on{opacity:1;visibility:visible;}

/* ⚠️ `display:contents` у <picture> обязателен, а не косметика. Без него
   `height:100%` у <img> считается от <picture>, у которого высота auto —
   процент не разрешается, картинка встаёт в СВОЙ рост (880×495 при слоте
   880×326), вылезает из колоды и обрезается по верху. Кроп при этом не
   работает вовсе, и `object-position` ни на что не влияет.
   На плейсхолдерах дефект не виден: плоская плашка одинакова в любом кропе.
   Тот же приём, что у кадров главной (.sh-ph). */
.sgm__slide picture{display:contents;}
/* ⚠️ Кроп прижат К НИЗУ, а не по центру. На всех четырёх кадрах трап лежит низко —
   на 78…85% высоты (так они и сняты: трап деталью в нижней трети). При кропе по
   центру подложка подписи накрывала его во всех четырёх, а в «Душевой» трап
   срезался кромкой совсем. Проверено рендером настоящих кропов, не на глаз.
   Меняются кадры — перепроверить: трап обязан стоять ВЫШЕ нижних 18% слота. */
.sgm__img{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block;}

/* Кадры цветные и разные по яркости — подпись читается только на собственной
   подложке, а не на «обычно тёмном низу». */
.sgm__caps{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:34px 22px 16px;
  background:linear-gradient(to top,rgba(16,26,21,.78),rgba(16,26,21,.34) 52%,transparent);
  pointer-events:none;
  min-height:2.4em;
}
.sgm__cap{
  position:absolute;left:22px;bottom:16px;
  font-family:var(--sgm-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;
  opacity:0;visibility:hidden;transition:opacity .4s var(--sgm-ease),visibility .4s;
}
.sgm__cap.is-on{opacity:1;visibility:visible;}

/* Круглые стрелки — та же деталь, что у ссылок «Все товары →» (.sh-dot),
   у карточек витрины (.shx__arrow) и у слайдера в шапке самой статьи. */
.sgm__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;min-height:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;line-height:1;color:var(--sgm-ink);
  background:rgba(255,255,255,.92);border:1.5px solid rgba(35,38,36,.16);border-radius:50%;
  transition:background .25s var(--sgm-ease),border-color .25s var(--sgm-ease),
    color .25s var(--sgm-ease),transform .25s var(--sgm-ease);
}
.sgm__arrow--prev{left:14px;}
.sgm__arrow--next{right:14px;}
.sgm__arrow:hover{background:var(--sgm-green);border-color:var(--sgm-green);color:#fff;}
.sgm__arrow--prev:hover{transform:translate(-3px,-50%);}
.sgm__arrow--next:hover{transform:translate(3px,-50%);}
.sgm__arrow:focus-visible{outline:2px solid #fff;outline-offset:2px;}

.sgm__dots{
  position:absolute;right:20px;bottom:18px;z-index:3;
  display:flex;align-items:center;gap:7px;
}
.sgm__dot{
  width:7px;height:7px;min-height:0;padding:0;
  background:rgba(255,255,255,.5);border:0;border-radius:50%;
  transition:background .25s var(--sgm-ease),transform .25s var(--sgm-ease);
}
.sgm__dot.is-on{background:#fff;transform:scale(1.5);}
.sgm__dot:focus-visible{outline:2px solid #fff;outline-offset:3px;}

/* ─── Текстовая часть ─────────────────────────────────────────────────────── */

.sgm__body{padding:26px 34px 30px;}

.sgm__kicker{
  margin:0 0 10px;
  font-family:var(--sgm-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sgm-green);
}
.sgm__h{
  margin:0 0 12px;
  font-size:26px;line-height:1.2;font-weight:600;color:var(--sgm-ink);
}
.sgm__lead{
  margin:0 0 16px;
  font-size:15px;line-height:1.55;color:var(--sgm-text);
}

.sgm__facts{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:0 0 20px;padding:12px 0;
  border-top:1px solid var(--sgm-line);border-bottom:1px solid var(--sgm-line);
  font-family:var(--sgm-mono);font-size:12px;letter-spacing:.04em;color:var(--sgm-ink);
}
.sgm__facts i{font-style:normal;color:var(--sgm-line);}

.sgm__act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-bottom:14px;}

.sgm__btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 30px;
  background:var(--sgm-green);color:#fff;border-radius:4px;
  font-size:14px;font-weight:600;text-decoration:none;
  transition:background .25s var(--sgm-ease);
}
.sgm__btn:hover,.sgm__btn:focus-visible{background:var(--sgm-green-hover);color:#fff;}
.sgm__btn:focus-visible{outline:2px solid var(--sgm-green);outline-offset:3px;}

.sgm__alt{
  font-size:14px;font-weight:600;color:var(--sgm-ink);
  text-decoration:none;border-bottom:1px solid var(--sgm-line);
  transition:color .2s ease,border-color .2s ease;
}
.sgm__alt:hover,.sgm__alt:focus-visible{color:var(--sgm-green);border-color:var(--sgm-green);}

/* Отказ — самый тихий элемент окна, но настоящая кнопка: «не сейчас» должно
   нажиматься с клавиатуры так же, как крестик. */
.sgm__no{
  min-height:0;padding:0;
  background:none;border:0;
  font-family:inherit;font-size:13px;color:#98a09a;
  text-decoration:underline;text-underline-offset:3px;
  transition:color .2s ease;
}
.sgm__no:hover{color:var(--sgm-text);}
.sgm__no:focus-visible{outline:2px solid var(--sgm-green);outline-offset:3px;}

/* ─── Телефон: лист снизу ─────────────────────────────────────────────────── */

@media (max-width:700px){
  .sgm{padding:0;align-items:flex-end;}
  .sgm__win{
    max-width:none;max-height:92vh;
    border-radius:12px 12px 0 0;
    transform:translateY(24px);
  }
  /* Кадр 4:3 (293px при ширине 390) выталкивал нижнюю строку листа за экран.
     Потолок в долях экрана: на низком телефоне кадр ужмётся сам, а не отрежет
     кнопку — высоту листа задаёт содержимое, а не картинка.
     ⚠️ Пропорция обязана быть ШИРЕ исходника (1,777): только тогда `cover` режет
     ВЫСОТУ и прижатие к низу работает так же, как на десктопе. При 16:10 (1,6)
     резалась бы ширина, кадр показывался бы во всю высоту — и подпись легла бы
     ровно на трап. */
  .sgm__deck{aspect-ratio:1.9;max-height:30vh;}
  .sgm__arrow{width:36px;height:36px;font-size:17px;}
  .sgm__arrow--prev{left:10px;}
  .sgm__arrow--next{right:10px;}
  .sgm__body{padding:22px 20px 26px;}
  .sgm__h{font-size:21px;}
  .sgm__lead{font-size:14px;}
  .sgm__act{gap:12px 18px;}
  .sgm__btn{width:100%;}
  /* Строка фактов на узком экране переносится, и точка-разделитель повисает
     в конце строки, читаясь как опечатка. Разделяем расстоянием, а не знаком. */
  .sgm__facts{gap:6px 18px;}
  .sgm__facts i{display:none;}
}

/* ─── Уважение к настройкам ──────────────────────────────────────────────── */

/* Движение выключаем, а окно оставляем: молчать о разборе — не то же самое,
   что не анимировать его появление. Смена кадров при этом идёт встык (автоход
   гасит скрипт). */
@media (prefers-reduced-motion:reduce){
  .sgm__scrim,.sgm__win,.sgm__slide,.sgm__cap,
  .sgm__arrow,.sgm__dot,.sgm__btn,.sgm__x{transition:none;}
  .sgm__win{transform:none;}
}

/* Прокрутка страницы под открытым окном. Класс вешает скрипт на <html>:
   именно этот элемент реально скроллится, и запрет на .sgm-lock у <body>
   в теме Woodmart не срабатывает. */
html.sgm-lock{overflow:hidden;}