/* Shared carousel geometry. Product/campaign CSS must not override these slots. */
.hero[data-hero-layout="stable"] > .hero-inner {
  box-sizing: border-box;
  height: var(--hero-layout-height) !important;
  min-height: 0 !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: var(--s-12) !important;
  padding: var(--s-16) var(--s-8) var(--s-20) !important;
  align-items: center;
}
.hero[data-hero-layout="stable"] .hero-left {
  min-width: 0;
  min-height: 0;
  height: max-content;
  align-self: start;
  margin-top: var(--hero-layout-copy-offset);
}
.hero[data-hero-layout="stable"] .hero-left > * { flex-shrink: 0; }
.hero[data-hero-layout="stable"] .hero-visual {
  aspect-ratio: auto !important;
  width: var(--hero-layout-visual-width) !important;
  height: var(--hero-layout-visual-height) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 auto !important;
  pointer-events: none;
}
.hero[data-hero-layout="stable"] .hero-visual-frame { background: none; border-radius: 0; }
.hero[data-hero-layout="stable"] :is(.hv-stamp, .hv-card, .hero-ticker),
.hero[data-hero-layout="stable"] .hero-visual-frame::after { display: none; }
.hero[data-hero-layout="stable"]:not(.hero--offer) .hero-visual-frame { overflow: hidden; }
.hero[data-hero-layout="stable"]:not(.hero--offer) .hero-visual-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
@media (max-width: 900px) {
  .hero[data-hero-layout="stable"] > .hero-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: var(--hero-layout-copy-height) var(--hero-layout-visual-height) !important;
    padding: var(--s-12) var(--s-5) var(--s-16) !important;
  }
}