/* ============================================================================
   PRODUCT DETAIL · HERO V3 «баннер-сверху»  (01-hero.css — ПОЛНАЯ ЗАМЕНА)
   ----------------------------------------------------------------------------
   Greenfield-подход: этот файл ЗАМЕНЯЕТ старый 01-hero.css целиком.
   Стилизует реальные классы из hero.php (V3). Ноль !important —
   двухклассовые селекторы .product-hero-v3 .X естественно побеждают
   одноклассовые глобальные правила из 02-layout.css.
   ============================================================================ */

/* токены шапки */
.product-hero-v3{
  --h-ink:#1e293b; --h-ink2:#475569; --h-muted:#64748b; --h-light:#94a3b8;
  --h-acc:#8ff451; --h-acc-deep:#16a34a; --h-acc-tint:#eafcdd;
  --h-line:#e7e9e7; --h-banner:linear-gradient(135deg,#e9fbdc 0%,#f5fbee 100%);
  --h-star:#f4b740; --h-fire:#f0820f; --h-danger:#ef4444;
}

/* секция: светлая, без тени и разделителя, плотный верхний отступ */
.product-hero-v3{
  background:transparent;
  border-bottom:0;
  padding:14px 0 0;
}
.product-hero-v3 .container{position:relative}

/* ── хлебные крошки ──────────────────────────────────────────────────── */
.product-hero-v3 .breadcrumb-modern{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin-bottom:14px;font-size:13px;font-weight:600;color:var(--h-muted);
}
.product-hero-v3 .breadcrumb-modern a{color:var(--h-muted);display:inline-flex;align-items:center;gap:6px;transition:color .15s}
.product-hero-v3 .breadcrumb-modern a:hover{color:var(--h-ink)}
.product-hero-v3 .breadcrumb-modern .separator{color:var(--h-light);opacity:.7}
.product-hero-v3 .breadcrumb-modern .current{color:var(--h-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46ch}

/* ── единая карточка: пастель сверху + белый низ ─────────────────────── */
.product-hero-v3 .product-hero-main{
  display:block;
  background:#fff;border:0;border-radius:20px;overflow:hidden;
  /* same soft shadow as the other content cards (reviews/order/tabs) for a
     consistent card look across the page */
  box-shadow:0 4px 36px rgba(0,0,0,.07);
}

/* банер */
.product-hero-v3 .product-hero-banner{
  position:relative;overflow:hidden;
  background:var(--h-banner);
  padding:22px 24px;min-height:128px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.product-hero-v3 .product-hero-watermark{
  position:absolute;right:-12px;bottom:-78px;
  font-size:200px;font-weight:900;letter-spacing:-.05em;line-height:.8;
  color:var(--h-acc-deep);opacity:.10;transform:rotate(-12deg);pointer-events:none;user-select:none;
  /* не статичный: лёгкое «дыхание» */
  animation:heroWatermarkFloat 7s ease-in-out infinite;
}
/* watermark как изображение иконки категории — выглядывает снизу (как в каталоге), крупнее и ниже */
.product-hero-v3 img.product-hero-watermark{
  width:230px;height:230px;font-size:0;object-fit:contain;opacity:.13;top:auto;bottom:-82px;right:-26px;
}
@keyframes heroWatermarkFloat{0%{transform:rotate(-12deg) translateY(0)}50%{transform:rotate(-12deg) translateY(-9px)}100%{transform:rotate(-12deg) translateY(0)}}
@media (prefers-reduced-motion:reduce){.product-hero-v3 .product-hero-watermark{animation:none}}
.product-hero-v3 .product-hero-discount{
  position:absolute;z-index:3;top:14px;left:14px;
  display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;
  background:#ffe4e4;color:var(--h-danger);font-size:12px;font-weight:900;
}

/* tile — белый квадрат слева */
.product-hero-v3 .product-hero-image{position:relative;z-index:2;order:1;flex:0 0 auto;margin:0;max-width:none;display:block}
.product-hero-v3 .product-image-wrapper{
  width:80px;height:80px;border-radius:16px;overflow:hidden;background:#fff;
  display:grid;place-items:center;border:0;box-shadow:0 10px 22px rgba(15,23,42,.14);
}
.product-hero-v3 .product-image-wrapper img{width:100%;height:100%;object-fit:cover;display:block}
.product-hero-v3 .product-image-wrapper .product-image-placeholder,
.product-hero-v3 .product-image-placeholder{
  position:static;width:80px;height:80px;border-radius:16px;display:grid;place-items:center;
  background:#fff;color:var(--h-acc-deep);font-size:28px;font-weight:900;letter-spacing:-.04em;aspect-ratio:auto;
}
.product-hero-v3 .product-image-placeholder i{display:none}
/* tile как иконка категории (img) */
.product-hero-v3 .product-hero-tile-icon{width:80px;height:80px;border-radius:16px;background:#fff;display:grid;place-items:center;box-shadow:0 10px 22px rgba(15,23,42,.14)}
.product-hero-v3 .product-hero-tile-icon img{width:54%;height:54%;object-fit:contain}
.product-hero-v3 .product-hero-tile-icon i{font-size:34px;color:var(--h-acc-deep)}
.product-hero-v3 i.product-hero-watermark{width:auto;height:auto;font-size:150px;display:flex;align-items:center;justify-content:center;color:var(--h-acc-deep);opacity:.12;top:auto;bottom:-34px;right:-10px}

/* действия в баннере (иконки) — тёмные на белых пилюлях */
.product-hero-v3 .product-header-actions{position:absolute;z-index:4;top:14px;right:14px;display:flex;gap:8px;flex-shrink:0}
.product-hero-v3 .product-hero-action{
  width:40px;height:40px;border-radius:11px;
  background:rgba(255,255,255,.92);border:1px solid rgba(15,23,42,.08);
  color:#1f2937;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 8px rgba(15,23,42,.1);opacity:1;position:static;
  transition:transform .16s,background-color .16s,border-color .16s,color .16s;
}
.product-hero-v3 .product-hero-action i{color:#1f2937;transition:transform .16s}
.product-hero-v3 .product-hero-action:hover{background:#fff;transform:translateY(-2px)}
.product-hero-v3 .product-hero-action:active{transform:translateY(0) scale(.94)}
/* состояния */
.product-hero-v3 .product-api-doc-btn:hover{background:var(--h-acc);border-color:var(--h-acc)}
.product-hero-v3 .product-api-doc-btn:hover i{color:#0d1f06}
.product-hero-v3 .product-restock-btn:hover{background:var(--h-acc);border-color:var(--h-acc)}
.product-hero-v3 .product-restock-btn:hover i{color:#0d1f06}
/* Уведомления включены → колокольчик залит зелёным (по аналогии с сердцем:
   solid-фон + белая иконка). Hover остаётся светло-лаймовым (превью). */
.product-hero-v3 .product-restock-btn.is-subscribed{background:var(--h-acc-deep);border-color:var(--h-acc-deep)}
.product-hero-v3 .product-restock-btn.is-subscribed i{color:#fff}
.product-hero-v3 .product-favorite-btn:hover{background:#fdeaea;border-color:rgba(239,68,68,.5)}
.product-hero-v3 .product-favorite-btn:hover i{color:var(--h-danger)}
.product-hero-v3 .product-favorite-btn.active{background:var(--h-danger);border-color:var(--h-danger)}
.product-hero-v3 .product-favorite-btn.active i{color:#fff}
.product-hero-v3 .product-affiliate-share-btn{position:relative;width:40px;padding:0;gap:0}
.product-hero-v3 .product-affiliate-share-btn:hover{background:var(--h-acc);border-color:var(--h-acc)}
.product-hero-v3 .product-affiliate-share-btn:hover i{color:#0d1f06}
.product-hero-v3 .affiliate-rate-badge-small{
  position:absolute;top:-7px;right:-7px;min-width:20px;padding:2px 5px;border-radius:999px;
  background:var(--h-acc);color:#0d1f06;font-size:9px;font-weight:900;line-height:1;text-align:center;border:2px solid #eef7e3;
}

/* Guard: the catalog-card rule `.storefront-autoreg .product-favorite-btn`
   (autoreg-theme.css) loads after this file and turns the hero heart into a 28px
   circle with a heavy shadow. Re-assert the pill look at higher specificity so
   every hero action button stays a 40px rounded square. Position is left alone —
   the affiliate button needs position:relative for its rate badge. */
.product-hero-v3 .product-header-actions .product-hero-action{
  width:40px;height:40px;border-radius:11px;
  background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(15,23,42,.1);
}
/* ROOT CAUSE of the "smaller heart": the catalog rule `.product-favorite-btn`
   (product.css) sets `transform:scale(.8)` for its hover-reveal effect on cards.
   01-hero reset opacity but not transform, so the hero heart rendered at 40px*.8
   = 32px. Reset it here at (0,2,0) — beats the catalog (0,1,0) default but stays
   below the :hover/:active rules (0,3,0) so the hover lift still works. */
.product-hero-v3 .product-favorite-btn{transform:none}
.product-hero-v3 .product-header-actions .product-favorite-btn.active{
  background:var(--h-danger);border-color:var(--h-danger);
}
/* Heart matches the other actions: thin outline (fa-regular) by default,
   filled (solid weight) only when favorited. Works with favorite.js, which
   toggles only the .active class — no icon-class swap needed. */
.product-hero-v3 .product-header-actions .product-favorite-btn i{
  font-weight:400;
  filter:none;
  -webkit-filter:none;
  text-shadow:none;
  box-shadow:none;
}
.product-hero-v3 .product-header-actions .product-favorite-btn.active i{
  color:#fff;
  font-weight:900;
  filter:none;
  -webkit-filter:none;
  text-shadow:none;
  box-shadow:none;
}
/* Колокольчик «уведомления включены» — то же поведение, что у сердца:
   solid-зелёный фон + белая залитая иконка (re-assert на той же
   специфичности, чтобы тема каталога не перебивала). */
.product-hero-v3 .product-header-actions .product-restock-btn.is-subscribed{
  background:var(--h-acc-deep);border-color:var(--h-acc-deep);
}
.product-hero-v3 .product-header-actions .product-restock-btn.is-subscribed i{
  color:#fff;
  font-weight:900;
  filter:none;
  -webkit-filter:none;
  text-shadow:none;
  box-shadow:none;
}

/* чипы категория → подкатегория (стекло на пастели) */
.product-hero-v3 .product-hero-banner .product-hero-meta{
  position:relative;z-index:2;order:2;margin:0;display:flex;flex-wrap:wrap;gap:8px;
}
.product-hero-v3 .product-hero-banner .product-meta-item{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:9px;
  background:rgba(255,255,255,.82);border:0;color:#1f2937;font-size:12.5px;font-weight:700;
  box-shadow:0 2px 8px rgba(15,23,42,.08);
}
.product-hero-v3 .product-hero-banner .product-meta-item i{color:var(--h-acc-deep);font-size:11px}
.product-hero-v3 .product-hero-banner .product-meta-item.subcategory{color:#475467}
.product-hero-v3 .product-hero-banner .product-meta-item.subcategory i{color:#9aa6b6;font-size:9px}
.product-hero-v3 .product-hero-banner .product-meta-item .meta-icon-img{width:16px;height:16px;border-radius:4px;object-fit:contain}

/* инфо (заголовок + статы) на белом низе */
.product-hero-v3 .product-hero-info{color:var(--h-ink);display:block;padding:20px 24px 22px}
.product-hero-v3 .product-hero-title{
  color:var(--h-ink);font-size:clamp(20px,2.3vw,27px);font-weight:800;
  line-height:1.2;letter-spacing:-.015em;margin:0;text-shadow:none;text-wrap:pretty;
}
.product-hero-v3 .product-hero-stats{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:14px;font-size:13.5px;font-weight:600;color:var(--h-muted)}
.product-hero-v3 .product-hero-stats strong{color:var(--h-ink);font-weight:800}

/* рейтинг — тёмная тема */
.product-hero-v3 .product-rating-light{display:inline-flex;align-items:center;gap:8px;margin:0}
.product-hero-v3 .product-rating-light .product-rating-stars i{color:var(--h-star)}
.product-hero-v3 .product-rating-light .product-rating-stars i.fa-regular{color:#d8dee6}
.product-hero-v3 .product-rating-light .product-rating-value{color:var(--h-ink);font-weight:800}
.product-hero-v3 .product-rating-light .product-rating-count{color:var(--h-muted);text-decoration:underline;text-underline-offset:2px}
.product-hero-v3 .product-rating-light .product-rating-count:hover{color:var(--h-ink)}

.product-hero-v3 .product-hero-stat{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;background:none;border:0;padding:0}
.product-hero-v3 .product-hero-stat .stat-stock{color:var(--h-acc-deep)}
.product-hero-v3 .product-hero-stat .stat-fire{color:var(--h-fire)}

/* убрать остаток дубликата короткого описания (если отрендерится) */
.product-hero-v3 .product-hero-short-desc{display:none}

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width:880px){
  .product-hero-v3 .product-hero-banner{min-height:0}
}
@media (max-width:560px){
  .product-hero-v3 .product-header-actions{flex-wrap:wrap}
  .product-hero-v3 .product-hero-watermark{font-size:110px}
}