/* =================== hc-pdp-m3.css =================== */
/* hc-pdp-m3 — Chapters + Sticky-Buy variant.
 *
 * Все HTML-классы остаются `.hc-pdp-m1__*`. Различия M3 включаются через
 * body-class `pdp-variant-m3`. Главные акценты:
 *   • hero 1.25fr / 1fr — gallery визуально шире
 *   • buy aside остаётся sticky-внутри-hero (как M1), но кейс card-стилем
 *   • tabs-bar становится горизонтальной jump-nav под hero
 *   • заголовок крупнее, eyebrow выделяется
 *
 * Strict isolation: все селекторы начинаются с `body.pdp-variant-m3`. */

/* ─── HERO ─── gallery wider, buy aside narrower ─── */
body.pdp-variant-m3 .hc-pdp-m1__hero {
  grid-template-columns: minmax(0, 1.25fr) minmax(380px, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
}

/* ─── ASIDE ─── more visible separation, lighter sticky-top ─── */
body.pdp-variant-m3 .hc-pdp-m1__aside {
  position: sticky;
  top: 88px;
  align-self: start;
}

/* ─── EYEBROW ─── premium accent with monospace + uppercase ─── */
body.pdp-variant-m3 .hc-pdp-m1__eyebrow {
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hc-accent-dark, #7a6548);
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(212, 184, 150, 0.22), rgba(184, 154, 111, 0.10));
  border: 0.5px solid var(--hc-gold-border, rgba(212, 184, 150, 0.45));
  border-radius: 999px;
}

/* ─── TITLE ─── largest serif emphasis ─── */
body.pdp-variant-m3 .hc-pdp-m1__title {
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(32px, 2.8vw, 42px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* ─── BUY CARD ─── solid card with deep shadow ─── */
body.pdp-variant-m3 .hc-pdp-m1__buy {
  background: linear-gradient(180deg, var(--hc-paper, #ffffff), #fbf7ed);
  border: 1px solid var(--hc-gold-border, rgba(212, 184, 150, 0.55));
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 24px 60px -30px rgba(40, 30, 15, 0.30);
}

/* ─── PRICE ─── serif-large ─── */
body.pdp-variant-m3 .hc-pdp-m1__price {
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: 46px;
  font-weight: 500;
  letter-spacing: -0.012em;
}

/* ─── TABS BAR ─── jump-nav style, sticky-top with blur ─── */
body.pdp-variant-m3 .hc-pdp-m1__tabs-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 12px 0;
  margin: 0 0 14px;
  background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(255, 255, 255, 0.94) 80%, transparent 100%);
  border-bottom: 0.5px solid rgba(141, 109, 71, 0.20);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.pdp-variant-m3 .hc-pdp-m1__panel {
  padding-top: 24px;
}
body.pdp-variant-m3 .hc-pdp-m1__tab {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12.5px;
}

/* ─── ACTIONS ─── менее агрессивный grid ─── */
body.pdp-variant-m3 .hc-pdp-m1__acts {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
body.pdp-variant-m3 .hc-pdp-m1__act {
  padding: 10px 12px;
  border-radius: 12px;
}

/* ─── MOBILE collapse ─── */
@media (max-width: 1024px) {
  body.pdp-variant-m3 .hc-pdp-m1__hero {
    grid-template-columns: 1fr;
  }
  body.pdp-variant-m3 .hc-pdp-m1__aside {
    position: static;
  }
}