/* Loaded in the head: the carousel frame exists before images and UIkit load. */
/* Tenant rules (including their mobile media queries) own the displayed ratio
   or height. Keep this fallback below their specificity, even when loaded later. */
.storefront-banner { container-type: inline-size; }
:where(.storefront-banner > .uk-slideshow-items) {
    position: relative;
    width: 100%;
    aspect-ratio: auto;
    height: auto;
    /* UIkit applies ratio/min/max as a minimum height, not a maximum crop.
       Existing CSS can still make the frame taller or change its aspect ratio. */
    /* Keep custom min/max values numeric: full-page CSS minification changes
       0px to 0, which is not a length when substituted directly into clamp(). */
    min-height: clamp(calc(var(--banner-min, 0) * 1px), calc((100cqw - var(--banner-list-inset, 0px)) * var(--banner-scale, .333333)), calc(var(--banner-max, 100000) * 1px));
}
.storefront-banner > .uk-slideshow-items:not(:has(> .uk-active)) > :first-child { display: block; }
.storefront-banner-media,
.storefront-banner-picture:where(:not(.storefront-banner-picture--flow)) {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.storefront-banner-picture:where(:not(.storefront-banner-picture--flow)) > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Old uk-cover rules sometimes set auto width or a mobile pixel height. The
   responsive picture fills its frame; tenant object-position/fit still apply. */
.storefront-banner .storefront-banner-picture:where(:not(.storefront-banner-picture--flow)) > img { width: 100%; height: 100%; }
/* Static page banners share responsive delivery and reserve their template's ratio. */
.storefront-page-banner { position: relative; aspect-ratio: var(--page-banner-ratio, 3 / 1); overflow: hidden; }