/* ═══════════════════════════════════════════════════════════════════════════
   STROM · размещения акции вне раздела /promo/
   Полоса-анонс над шапкой, баннер в листинге, плашки в каталоге.

   ВАЖНО: этот файл печатается на КАЖДОЙ странице сайта, пока идёт акция.
   Поэтому:
     • токены объявляются на самих блоках, а не на :root — палитра сайта живёт
       в home.css под классом .sh-home, а полоса стоит ВЫШЕ .wd-page-wrapper
       и до этого класса не достаёт;
     • селекторы начинаются со своего префикса .spb / .spl — ни одного правила,
       которое могло бы задеть чужую разметку;
     • ничего не позиционируется fixed/sticky: липкая шапка темы считает офсет
       от своего положения, и любой фиксированный слой сверху её ломает.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Полоса-анонс над шапкой ─────────────────────────────────────────────── */

.spb{
  --spb-bg:#0a5738;          /* --green-dark сайта: полоса говорит голосом сайта,
                                а не оранжевым голосом поставщика */
  --spb-fg:#ffffff;
  --spb-dim:rgba(255,255,255,.72);
  --spb-line:rgba(255,255,255,.22);
  --spb-sans:"Plex Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --spb-mono:"Plex Mono","Plex Sans",ui-monospace,SFMono-Regular,Menlo,monospace;

  position:relative;
  display:flex;align-items:stretch;justify-content:center;
  background:var(--spb-bg);color:var(--spb-fg);
  font-family:var(--spb-sans);
}

/* Ссылка занимает всю полосу: цель клика — вся строка, а не только слова.
   min-height 40px — палец попадает, но полоса не съедает первый экран. */
.spb__in{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:6px 18px;
  width:100%;max-width:1400px;
  min-height:40px;padding:8px 52px 8px 15px;
  color:inherit;text-decoration:none;
  text-align:center;
}
.spb__in:hover,.spb__in:focus{color:inherit;text-decoration:none;}

.spb__t{font-size:14px;font-weight:600;letter-spacing:-.005em;}

/* Срок — моно и тусклее: это служебное число, а не часть обещания.
   Он ОБЯЗАТЕЛЕН рядом с анонсом (ФЗ-38 ст. 9: сроки в рекламе стимулирующего
   мероприятия), поэтому он не декоративный элемент и не прячется на мобиле. */
.spb__d{
  font-family:var(--spb-mono);font-size:12px;font-weight:400;
  color:var(--spb-dim);white-space:nowrap;
}

.spb__go{
  font-size:12px;font-weight:500;letter-spacing:.02em;
  padding-bottom:1px;border-bottom:1px solid var(--spb-line);
  white-space:nowrap;transition:border-color .18s cubic-bezier(.22,.61,.36,1);
}
.spb__in:hover .spb__go{border-bottom-color:currentColor;}

/* Крестик — поверх правого края, вне потока ссылки: иначе клик по нему
   считался бы кликом по анонсу и уводил на страницу акции. */
.spb__x{
  position:absolute;top:0;right:0;
  display:flex;align-items:center;justify-content:center;
  width:44px;align-self:stretch;
  padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:22px;line-height:1;
  color:var(--spb-dim);
  transition:color .18s cubic-bezier(.22,.61,.36,1);
}
.spb__x:hover{color:var(--spb-fg);}
.spb__x:focus-visible{outline:2px solid var(--spb-fg);outline-offset:-4px;}

@media (max-width:719px){
  /* На узком экране строка встаёт в две: обещание сверху, срок и переход снизу.
     «Условия →» не убираем — без перехода анонс некуда вести, а сноска про
     условия обязана быть доступна с самой рекламы. */
  .spb__in{gap:2px 12px;padding:7px 46px 7px 12px;}
  .spb__t{font-size:13px;flex:0 0 100%;}
  .spb__d,.spb__go{font-size:11px;}
  .spb__x{width:38px;font-size:20px;}
}

/* Печать: анонс не нужен на бумаге. */
@media print{.spb{display:none;}}

/* ─── Полоса акции: баннер поставщика + наш текст ──────────────────────────
   Один компонент на два места: главная (`--home`) и листинг (`--listing`).
   Токены объявлены на самом блоке: в листинге вокруг нет `.sh-home`, откуда
   палитра сайта, и полоса обязана выглядеть одинаково в обоих контекстах.

   Кадр НЕ обрезаем и НЕ растягиваем (`object-fit:contain` + своя пропорция):
   это рекламный макет поставщика, нарисованный под конкретный крой. Ширина
   слота держится в пределах ~700 CSS px — при исходнике 1920 это 2,7× на
   ретине, и LED-надпись на кадре остаётся резкой. Полоса во всю ширину дала
   бы 1,4× и мыло на единственной высокочастотной части макета. */

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

  font-family:var(--spr-sans);color:var(--spr-ink);
}

.spr__in{display:grid;gap:clamp(18px,3vw,38px);align-items:center;
  color:inherit;text-decoration:none;}
.spr__in:hover,.spr__in:focus{color:inherit;text-decoration:none;}

/* Кадр: мятный фон макета продолжается плашкой, поэтому «письмо» не обрывается
   по краю картинки, даже если пропорция слота чуть другая. */
.spr__pic{display:block;overflow:hidden;border-radius:4px;background:#76bfab;}
.spr__pic img{display:block;width:100%;height:auto;}
.spr__pic .sh-ph{position:static;border:0;border-radius:0;}
.spr__pic .sh-ph__img{width:100%;height:auto;}

.spr__copy{display:flex;flex-direction:column;align-items:flex-start;gap:6px;}

.spr__eyebrow{display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--spr-mono);font-size:.66rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--spr-green);}
.spr__eyebrow i{font-style:normal;opacity:.5;}

.spr__h{font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--spr-ink);}

/* Главное обещание — крупнее заголовка: заголовок называет акцию, а продаёт эта строка. */
.spr__claim{font-weight:700;letter-spacing:-.02em;line-height:1.08;color:var(--spr-green-dark);}

.spr__facts{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:2px;
  font-family:var(--spr-mono);font-size:.7rem;color:var(--spr-text);}
.spr__facts b{color:var(--spr-ink-2);font-weight:500;}

.spr__go{display:inline-flex;align-items:center;gap:.6em;margin-top:8px;
  padding:11px 20px;border-radius:100px;background:var(--spr-green);color:#fff;
  font-size:.86rem;font-weight:600;
  transition:background .2s var(--spr-ease);}
.spr__in:hover .spr__go{background:var(--spr-green-dark);}

/* Оговорка про корзину. Тихая, но обязательная — см. комментарий в strip.php. */
.spr__note{margin-top:6px;font-size:.76rem;line-height:1.45;color:var(--spr-text);}

/* ── Главная: две колонки, кадр слева ── */
.spr--home{margin:0 auto;padding:clamp(30px,5vw,58px) 15px;max-width:1400px;}
.spr--home .spr__in{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);}
.spr--home .spr__h{font-size:clamp(1.1rem,1.6vw,1.35rem);}
.spr--home .spr__claim{font-size:clamp(1.5rem,2.6vw,2.1rem);}

/* ── Листинг: компактнее, кадр уже, живёт над сеткой товаров ── */
.spr--listing{margin:0 0 26px;padding:16px;border:1px solid var(--spr-line);
  border-radius:6px;background:var(--spr-ground);}
.spr--listing .spr__in{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:20px;}
.spr--listing .spr__h{font-size:1rem;}
.spr--listing .spr__claim{font-size:clamp(1.15rem,1.9vw,1.5rem);}
.spr--listing .spr__go{margin-top:6px;padding:9px 16px;font-size:.8rem;}
.spr--listing .spr__note{font-size:.72rem;}

/* ── Узкий экран: кадр сверху, текст под ним ── */
@media (max-width:767px){
  .spr--home .spr__in,
  .spr--listing .spr__in{grid-template-columns:minmax(0,1fr);}
  .spr--listing{padding:12px;}
}

@media print{.spr{display:none;}}

/* ─── Плашка «товар в акции» под ценой на карточке товара ───────────────────
   Стоит в Elementor-шаблоне товара, где палитры сайта (`.sh-home`) нет, —
   поэтому свои токены. Оформление намеренно НЕ рекламное: это служебная
   строка рядом с ценой, и её задача — не перекричать цену, а не дать
   покупателю подумать, что подарок посчитает корзина. */
.spl{
  --spl-green:#0e7e50;
  --spl-green-dark:#0a5738;
  --spl-soft:#e7f4ed;
  --spl-ink:#232624;
  --spl-text:#5c635c;
  --spl-sans:"Plex Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --spl-mono:"Plex Mono","Plex Sans",ui-monospace,SFMono-Regular,Menlo,monospace;

  display:flex;gap:12px;align-items:flex-start;
  margin:14px 0 4px;padding:11px 14px;
  border:1px solid rgba(14,126,80,.28);border-radius:6px;background:var(--spl-soft);
  font-family:var(--spl-sans);color:var(--spl-ink);text-decoration:none;
  transition:border-color .2s cubic-bezier(.22,.61,.36,1);
}
.spl:hover,.spl:focus{color:var(--spl-ink);text-decoration:none;border-color:var(--spl-green);}

.spl__b{flex:0 0 auto;padding:4px 9px;border-radius:100px;
  background:var(--spl-green);color:#fff;
  font-family:var(--spl-mono);font-size:.66rem;font-weight:500;letter-spacing:.02em;
  white-space:nowrap;}

.spl__c{display:flex;flex-direction:column;gap:4px;min-width:0;}
.spl__t{font-size:.82rem;line-height:1.45;color:var(--spl-text);}
.spl__t b{color:var(--spl-ink);font-weight:600;}
.spl__go{font-family:var(--spl-mono);font-size:.68rem;letter-spacing:.04em;
  color:var(--spl-green-dark);}
.spl:hover .spl__go{text-decoration:underline;}

@media (max-width:479px){
  .spl{flex-direction:column;gap:8px;}
}

/* ─── Подсказка в корзине ───────────────────────────────────────────────────
   Самое опасное место акции: корзина считает по обычным ценам. Плашка
   объясняет это ДО того, как покупатель решит, что его обманули. */
.spc{
  --spc-green:#0e7e50;
  --spc-green-dark:#0a5738;
  --spc-ink:#232624;
  --spc-text:#5c635c;
  --spc-sans:"Plex Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --spc-mono:"Plex Mono","Plex Sans",ui-monospace,SFMono-Regular,Menlo,monospace;

  margin:0 0 22px;padding:14px 16px;
  border:1px solid rgba(14,126,80,.3);border-left:3px solid var(--spc-green);
  border-radius:6px;background:#f1f7f3;
  font-family:var(--spc-sans);
}
.spc__h{display:block;margin-bottom:5px;font-size:.92rem;font-weight:700;color:var(--spc-ink);}
.spc__t{margin:0 0 8px;font-size:.84rem;line-height:1.5;color:var(--spc-text);}
.spc__t b{color:var(--spc-ink);font-weight:600;}
.spc__go{display:inline-block;font-family:var(--spc-mono);font-size:.7rem;letter-spacing:.04em;
  color:var(--spc-green-dark);}
.spc__go:hover{text-decoration:underline;}

@media print{.spl,.spc{display:none;}}

/* ─── Метка «3-й в подарок» на плитке каталога ──────────────────────────────
   Живёт в стеке меток темы (.product-labels), поэтому геометрию — размеры,
   радиус, отступы — задаёт тема, а мы переопределяем только цвет.

   Красный — РОВНО ТОТ ЖЕ #E22D2D, что у «Хит продаж» темы
   (woodmart/css/parts/woo-mod-product-labels.min.css: .product-label.featured)
   и что дочерняя тема повторяет на главной (.sh-product__tag--hit в home.css).
   Своего оттенка красного здесь не заводим: на сайте он один.
   Решение владельца 01.09.2026 — плашки листинга красным фоном. */
.product-labels .strom-promo-label{
  background-color:#e22d2d !important;
  color:#fff !important;
}

/* Разбор по позициям в подсказке корзины: сколько единиц взято и сколько из них
   бесплатны. Список, а не абзац: строк столько же, сколько акционных позиций. */
.spc__l{margin:0 0 8px;padding:0 0 0 16px;list-style:none;
  font-size:.84rem;line-height:1.55;color:var(--spc-text);}
.spc__l li{position:relative;padding-left:2px;}
.spc__l li::before{content:"•";position:absolute;left:-12px;color:var(--spc-green);}
.spc__l b{color:var(--spc-ink);font-weight:600;}