/* ─────────────────────────────────────────────────────────────
   Magnna Brands — Hero Product Carousel (Style B · Editorial)
   Scoped under .magnna-hero-carousel. Uses theme design tokens
   when present (tokens.css), with brand-bible fallbacks so the
   file also works standalone. Source of truth: Brand Bible v1.3.0.
   ───────────────────────────────────────────────────────────── */

.magnna-hero-carousel {
  /* local aliases → theme tokens, else brand fallbacks */
  --mg-ink:         var(--color-brand-primary, #1F4E6F);
  --mg-ink-deep:    var(--color-brand-ink,     #163A53);
  --mg-ink-darker:  var(--color-brand-deep,    #0E2A3D);
  --mg-paper:       var(--color-neutral-paper,  #F0F2F5);
  --mg-paper-light: var(--color-neutral-light,  #F7F8FA);
  --mg-paper-bright:var(--color-neutral-bright, #FCFCFD);
  --mg-rule:        var(--color-rule,        rgba(22,58,83,.10));
  --mg-rule-medium: var(--color-rule-medium, rgba(22,58,83,.20));
  --mg-ink-mute:    var(--color-text-muted,  rgba(22,58,83,.55));
  --mg-success:     var(--color-success, #1F6F3F);
  --mg-warning:     var(--color-warning, #B5841F);
  --mg-error:       var(--color-error,   #C13B3B);
  --mg-display:     var(--font-display, 'Space Grotesk', sans-serif);
  --mg-mono:        var(--font-mono,    'JetBrains Mono', monospace);
  --mg-ease: cubic-bezier(.4, 0, .2, 1);

  /* neutralise any inherited surface styling */
  background: none;
  border: 0;
  padding: 0;
  min-height: 0;
  height: auto;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Box ── */
.mghc__box {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;            /* ≈ the 570×713 original panel */
  background: var(--mg-paper-bright);
  border: 1px solid var(--mg-rule-medium);
  overflow: hidden;
}
.mghc__box::before {
  content: "";
  position: absolute; top: 0; left: 0;
  height: 2px; width: 48px;
  background: var(--mg-ink);
  z-index: 6;
  transition: width .3s var(--mg-ease);
}
.mghc__box:hover::before { width: 100%; }

/* ── Slides ── */
.mghc__slide {
  position: absolute; inset: 0;
  display: block;
  text-decoration: none;
  color: inherit;
  opacity: 0; visibility: hidden;
  transition: opacity .55s var(--mg-ease);
}
.mghc__slide.is-active { opacity: 1; visibility: visible; }

.mghc__plate {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--mg-paper-light);
  overflow: hidden;
}
.mghc__plate img {
  width: 100%; height: 100%;
  object-fit: cover;
/*   padding: 7% 9% 33%;          clears the caption overlay */ 
}

/* ── Badges (top-right) ── */
.mghc__badges {
  position: absolute; top: 14px; right: 14px;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
  z-index: 3;
}
.mghc__badge {
  font-family: var(--mg-mono);
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500;
  padding: 5px 10px;
  border: 1px solid var(--mg-rule-medium);
  background: var(--mg-paper-bright);
  color: var(--mg-ink-mute);
}
.mghc__badge--in  { color: var(--mg-success); border-color: rgba(31,111,63,.3);  background: rgba(31,111,63,.06); }
.mghc__badge--low { color: var(--mg-warning); border-color: rgba(181,132,31,.35); background: rgba(181,132,31,.08); }
.mghc__badge--out { color: var(--mg-error);   border-color: rgba(193,59,59,.3);  background: rgba(193,59,59,.06); }
.mghc__badge--new { color: #fff; background: var(--mg-ink); border-color: var(--mg-ink); }

/* ── Info overlay (bottom) ── */
.mghc__info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: 30px 26px 26px;
  display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(to top,
              var(--mg-ink-darker) 0%,
              rgba(14,42,61,.92) 55%,
              rgba(14,42,61,0) 100%);
}
.mghc__brand {
  font-family: var(--mg-mono);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500;
  color: #fff;
}
.mghc__name {
  font-family: var(--mg-display);
  font-size: 20px; font-weight: 500; line-height: 1.22; letter-spacing: -.015em;
  color: #fff;
  margin: 0;
}
.mghc__sku {
  font-family: var(--mg-mono);
  font-size: 10px; letter-spacing: .1em;
  color: rgba(240,242,245,.6);
}
.mghc__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 14px; margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.mghc__price {
  font-family: var(--mg-display);
  font-size: 22px; font-weight: 500; letter-spacing: -.02em;
  color: #fff;
}
.mghc__price .woocommerce-Price-amount,
.mghc__price .amount,
.mghc__price bdi { color: #fff; }
.mghc__price--gate { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.mghc__price--gate svg { width: 15px; height: 15px; color: rgba(255,255,255,.7); }
.mghc__more {
  font-family: var(--mg-mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(240,242,245,.7);
  white-space: nowrap;
}

/* ── Controls (below the box) ── */
.mghc__controls { display: flex; align-items: center; gap: 16px; }
.mghc__arrows { display: flex; gap: 8px; }
.mghc__arrow {
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--mg-rule-medium);
  background: var(--mg-paper-bright);
  color: var(--mg-ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .2s var(--mg-ease);
}
.mghc__arrow:hover { border-color: var(--mg-ink); background: var(--mg-ink); color: #fff; }
.mghc__arrow svg { width: 16px; height: 16px; }
.mghc__counter {
  font-family: var(--mg-mono);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mg-ink-mute);
}
.mghc__dots { display: flex; gap: 7px; margin-left: auto; }
.mghc__dots button {
  width: 22px; height: 2px; padding: 0; border: 0;
  background: var(--mg-rule-medium);
  cursor: pointer;
  transition: all .3s var(--mg-ease);
}
.mghc__dots button.is-active { background: var(--mg-ink); width: 34px; }

/* ── Defensive: lock the small label spans' typography even against aggressive
   theme rules (e.g. `.magnna-home-hero span { font-size: … }`). Higher
   specificity (.magnna-hero-carousel + class) wins over class+element rules. ── */
.magnna-hero-carousel .mghc__badge,
.magnna-hero-carousel .mghc__more,
.magnna-hero-carousel .mghc__counter {
  font-family: var(--mg-mono);
  text-transform: uppercase;
  line-height: 1;
}
.magnna-hero-carousel .mghc__badge { font-size: 9px; letter-spacing: .22em; }
.magnna-hero-carousel .mghc__more {
  font-size: 10px; letter-spacing: .12em; line-height: 1.5;
  color: rgba(240, 242, 245, .7);
}
.magnna-hero-carousel .mghc__counter {
  font-size: 10px; letter-spacing: .18em; line-height: 1.5;
  color: var(--mg-ink-mute);
}
.magnna-hero-carousel .mghc__badge--in  { color: var(--mg-success); }
.magnna-hero-carousel .mghc__badge--low  { color: var(--mg-warning); }
.magnna-hero-carousel .mghc__badge--out  { color: var(--mg-error); }
.magnna-hero-carousel .mghc__badge--new  { color: #fff; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .mghc__box { aspect-ratio: 1 / 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mghc__slide,
  .mghc__box::before,
  .mghc__arrow,
  .mghc__dots button { transition: none; }
}