/*
 * Banner slideshow (v0.10.69, simplified v0.10.119, hardened v0.10.121).
 *
 * Two size classes:
 *   .lmgf-banner-main   1200x400 recommended (main shop top banner)
 *   .lmgf-banner-other  1200x200 recommended (category/brand/product top)
 *
 * v0.10.121: switched from `aspect-ratio` to the padding-bottom hack
 * for slot height. aspect-ratio was being silently overridden by
 * something on production (theme's universal `[class*="banner"]`
 * rule, possibly) so the carousel collapsed to its block-flow
 * content height — which made all slides appear stacked vertically
 * because they were laying out as block elements rather than
 * stacking absolutely.
 *
 * The padding-bottom hack creates the slot height via a known
 * CSS trick: a 0-height element with `padding-bottom: 33.33%` is
 * 33.33% as tall as it is wide (aspect 3:1). Children positioned
 * absolutely fill the resulting box. This trick has been used since
 * IE6 and survives even the most aggressive theme universals.
 *
 * We also moved the size class from the outer div to a `--lmgf-aspect`
 * custom property so we can use a single padding-bottom rule and
 * vary the value per size class.
 */

.lmgf-banner-carousel {
    position: relative !important;
    width: 100%;
    margin: 0 auto 24px;
    overflow: hidden;
    background: var(--lmgf-bg, #f5f5f5);
    border-radius: var(--lmgf-radius, 8px);
    /* Reset any block-level layout pressure from theme universals */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    /* Default aspect; overridden by size class below */
    --lmgf-aspect-pct: 33.3333%;
}

.lmgf-banner-main {
    /* 1200 × 400 → 400/1200 = 33.33% */
    --lmgf-aspect-pct: 33.3333%;
}
.lmgf-banner-other {
    /* 1200 × 200 → 200/1200 = 16.67% */
    --lmgf-aspect-pct: 16.6667%;
}

/*
 * Slot height via padding-bottom hack. The ::before pseudo expands
 * the carousel to the right aspect ratio without depending on
 * `aspect-ratio` (which a theme universal can clobber). The track
 * lays over it absolutely.
 */
.lmgf-banner-carousel::before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: var(--lmgf-aspect-pct, 33.3333%);
}

.lmgf-banner-track {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.lmgf-banner-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    pointer-events: none;
}
.lmgf-banner-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}
.lmgf-banner-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
}

/*
 * Arrows / dots / pause-on-hover removed in v0.10.119.
 * Banners are a passive slideshow.
 */