/* ============================================================================
   HERO-ENTITY — canonical stylesheet for the ONE unified hero render (.u-hero).
   Фаза P пилот. Geometry + skin defined ONCE here (not per-page CSS overrides).
   Values matched to the pre-existing shop-category ink hero (probe 2026-07-05):
   gradient 135deg #15161a→#23252e, radius 13, pad 26/30/30, min-h A=310 / B=430,
   eyebrow pill var(--brand) 12/800 uppercase 999px, h1 40/800 white.
   Loaded via css_view[] from show_hero.php only when an active hero renders.
   ============================================================================ */
:root{
  --u-hero-ink:#15161a;
  --u-hero-ink2:#23252e;
  --u-hero-brand:var(--brand);
  --u-hero-a-h:310px;
  --u-hero-b-h:430px;
  --u-hero-rad:13px;
}

.u-hero{
  position:relative;
  box-sizing:border-box;
  background:linear-gradient(135deg,var(--u-hero-ink) 0%,var(--u-hero-ink2) 100%);
  border-radius:var(--u-hero-rad);
  padding:26px 30px 30px;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}
.u-hero--a{ min-height:var(--u-hero-a-h); }
.u-hero--b{ min-height:var(--u-hero-b-h); }
.u-hero__inner{ width:100%; }

.u-hero__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.u-hero__lead{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  min-width:0;
}
.u-hero__eyebrow{
  display:inline-block;
  background:var(--u-hero-brand);
  color:var(--u-hero-ink);
  font-size:12px;
  font-weight:800;
  line-height:1;
  border-radius:999px;
  padding:6px 13px;
  text-transform:uppercase;
  letter-spacing:.6px;
  white-space:nowrap;
}
.u-hero__count{
  display:inline-block;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.78);
  font-size:13px;
  font-weight:600;
  padding:5px 12px;
  border-radius:999px;
  white-space:nowrap;
}
.u-hero__share{ flex:0 0 auto; }
/* D20 U3: share popover must escape the hero clip while open (closed state keeps overflow:hidden). */
#wrapper .u-hero:has(.shop-list-share__dropdown:not([hidden])){ overflow:visible; }
/* Share button — the native share handler (shop.list_share.js) REQUIRES the .shop-list-share__btn
   class, which carries a site-wide light canon at #wrapper .shop-list-share__btn (mpkm-ui.css:241,
   specificity 1,1,0, width/height/radius !important). To render it dark-on-ink in the hero we must
   match that: one targeted #wrapper .u-hero override (the same single override the legacy .shop-hero
   used at mpkm-cat-canon.css:128). This overrides the shared *widget* canon, NOT the hero swamp. */
#wrapper .u-hero .shop-list-share__btn{
  width:42px!important; height:42px!important; border-radius:13px!important;
  background:rgba(255,255,255,.08)!important; color:#fff!important;
  border:1px solid rgba(255,255,255,.16)!important;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .15s ease;
}
#wrapper .u-hero .shop-list-share__btn:hover{ background:rgba(255,255,255,.14)!important; }
.u-hero .shop-list-share__btn svg{ width:18px; height:18px; }

.u-hero__h1{
  margin:0;
  font-size:40px;
  font-weight:800;
  line-height:1.08;
  color:#fff;
}
.u-hero__acc{ color:var(--u-hero-brand); }
.u-hero__desc{
  margin:14px 0 0;
  max-width:70ch;
  font-size:16px;
  line-height:1.5;
  color:rgba(255,255,255,.86);
}

/* stats slot (matches T0.5 canon: 30/800 + caps label) */
.u-hero__stats{ display:flex; gap:32px; margin-top:20px; flex-wrap:wrap; }
.u-hero__stat{ display:flex; flex-direction:column; }
.u-hero__stat-num{ font-size:30px; font-weight:800; color:#fff; line-height:1; }
.u-hero__stat-label{
  font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color:rgba(255,255,255,.66); margin-top:6px;
}

/* buttons slot */
.u-hero__ctas{ display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }
.u-hero__cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:10px; font-weight:700; text-decoration:none;
}
.u-hero__cta--pri{ background:var(--u-hero-brand); color:var(--u-hero-ink); }
.u-hero__cta--ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); }

/* list-box slot (dostavka ATI / oplata / reviews «Кто обращается» / shef / docs asides) */
.u-hero__box{
  margin-top:20px; max-width:340px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:14px 16px;
}
.u-hero__box-title{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:rgba(255,255,255,.66); margin-bottom:8px;
}
.u-hero__box-list{ list-style:none; margin:0; padding:0; }
.u-hero__box-list li{
  position:relative; padding-left:16px; margin:5px 0;
  font-size:14px; line-height:1.4; color:rgba(255,255,255,.9);
}
.u-hero__box-list li::before{
  content:''; position:absolute; left:0; top:8px;
  width:6px; height:6px; border-radius:50%; background:var(--u-hero-brand);
}
.u-hero__box-cta{
  display:inline-block; margin-top:10px; font-size:13px; font-weight:700;
  color:var(--u-hero-brand); text-decoration:none;
}
.u-hero__box-cta:hover{ text-decoration:underline; }

/* chips slot (docs tags: ГОСТ / СП / СНиП / …) */
.u-hero__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
/* sub-chips row UNDER the desc (pricelist tags) — same pill look, tighter top margin, coexists with a slot */
.u-hero__subchips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.u-hero__chip{
  display:inline-block; padding:6px 12px; border-radius:8px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  font-size:12px; font-weight:600; color:rgba(255,255,255,.9);
}

/* bg-image variant (proektirovschikam blueprint) — bg set inline; ensure text stays legible */
.u-hero--bg{ background-color:var(--u-hero-ink); }

@media (max-width:640px){
  .u-hero{ padding:20px; }
  .u-hero__h1{ font-size:28px; }
  .u-hero__top{ flex-wrap:wrap; }
  .u-hero__stats{ gap:20px; }
}

/* ── BIG-RUN Unit-2: two-column split for box (list) slot heroes ──────────────
   text column left, box aside right — fixes the small-box-jammed-left + dead
   right-half (dostavka/oplata/reviews/…). stats/buttons/chips stay in-flow. */
.u-hero__inner--split{ display:flex; align-items:center; gap:44px; }
.u-hero__inner--split .u-hero__main{ flex:1 1 auto; min-width:0; }
.u-hero__inner--split .u-hero__aside{ flex:0 0 auto; display:flex; }
.u-hero__inner--split .u-hero__box{ margin-top:0; max-width:360px; }
@media (max-width:820px){
  .u-hero__inner--split{ flex-direction:column; align-items:stretch; gap:0; }
  .u-hero__inner--split .u-hero__box{ margin-top:20px; max-width:none; }
}
/* compact height for sparse label heroes (eyebrow+H1 only) — tighter proportion, less dead space */
.u-hero.u-hero--compact{ min-height:212px; }

/* ============================================================================
   ДОБИВКА-6 U-HERO — категорийный герой ПО КОНТЕНТУ (убрать мёртвую нижнюю полосу).
   Фикс-высота A-героя (min-height 310px) + justify-content:center центрировали
   ~182px контента в тёмном прямоугольнике → сверху И снизу мёртвые тёмные полосы
   (замер /remont-betona/: deadStrip 66px). Убираем фикс-высоту: герой обнимает
   контент, низ героя = его bottom-padding (30px). Симметрия top(26)≈bottom(30).
   Класс .u-hero--compact уже эмитится show_hero.php для sparse-героев (был без CSS).
   Скоуп: только .u-hero--a (шоп-категории/лист/корень/pricelist/объекты/страницы).
   Новости/шеф-героям min-height задан ОТДЕЛЬНО (mpkm-hero-unify.css) — не затронуто.
   ============================================================================ */
.u-hero--a{ min-height:0; }
.u-hero--compact{ min-height:0; }

/* D26 1.4: share на сплит-hero (--b: оплата/доставка) сидел в потоке левой колонки (в 434px от
   правого края, посреди HERO). Канон = правый-верх 30/26 как у --a. Абсолют к .u-hero (relative);
   мобилка (<761) уже единообразна потоком (20/20) — не трогаем. Поповер якорится к этому же div. */
@media(min-width:761px){
  #wrapper .u-hero--b .u-hero__share{ position:absolute; top:26px; right:30px; z-index:3; }
}
/* D26 1.4: mobile-поповер. Генерик mpkm-fixes.css:312 (@≤767 left:0) писан под старый контекст
   кнопки СЛЕВА (.shop-list-header); в hero кнопка справа → дропдаун уезжал за вьюпорт (right 556
   при vw 390, и так же на канон-категории). В hero-скоупе якорим правым краем к кнопке. */
@media(max-width:767px){
  #wrapper .u-hero__share .shop-list-share__dropdown{ left:auto; right:0; }
}