/* The placeholder and loaded carousel share a single responsive body height.
   Override --cs-promo-body-height in dedicated shop CSS when card sizes change. */
.promo-carousel-slot {
    --cs-promo-body-height: 28rem;
    --cs-promo-visible-items: 2;
    position: relative;
}
.promo-carousel-slot .products-roll {
    height: var(--cs-promo-body-height);
}
.promo-carousel-slot__content {
    inset: 0;
    position: absolute;
    visibility: hidden;
}
.promo-carousel-slot.is-loaded > .promo-carousel-slot__content {
    position: static;
    visibility: visible;
}
.promo-carousel-placeholder__track {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(var(--cs-promo-visible-items), minmax(0, 1fr));
    height: calc(var(--cs-promo-body-height) - 1.5rem);
    overflow: hidden;
}
.promo-carousel-placeholder__card {
    background: var(--cs-catalog-product-bg, #fff);
    border: 1px solid var(--cs-catalog-product-border, #eee);
    border-radius: inherit;
    padding: 0.75rem;
}
.promo-carousel-placeholder__image,
.promo-carousel-placeholder__line {
    background: #f1f3f4;
    border-radius: 0.3rem;
    display: block;
}
.promo-carousel-placeholder__image {
    height: 200px;
    margin-bottom: 1rem;
}
.promo-carousel-placeholder__line {
    height: 0.9rem;
    margin-bottom: 0.7rem;
}
.promo-carousel-placeholder__line--short { width: 60%; }
@media (max-width: 800px) {
    .promo-carousel-slot { --cs-promo-body-height: 27rem; }
}
@media (min-width: 800px) { .promo-carousel-slot { --cs-promo-visible-items: 3; } }
@media (min-width: 1000px) { .promo-carousel-slot { --cs-promo-visible-items: 4; } }
@media (min-width: 1200px) { .promo-carousel-slot { --cs-promo-visible-items: 5; } }
@media (min-width: 1400px) { .promo-carousel-slot { --cs-promo-visible-items: 6; } }

/* Legacy banner bodies may omit intrinsic image dimensions. Reserve their
   standard proportions before the first image is downloaded. Explicit image
   dimensions and store-specific aspect ratios remain authoritative. */
#shop-hero-banner img:not([width]):not([height]) {
    width: 100%;
    aspect-ratio: auto var(--cs-hero-desktop-ratio, 4 / 1);
}
#shop-hero-banner-mobile img:not([width]):not([height]) {
    width: 100%;
    aspect-ratio: auto var(--cs-hero-mobile-ratio, 1 / 1);
}

/* Reserve the hero before either SSI content or the first image arrives. */
.hero-banner-slot {
    position: relative;
    width: 100%;
    aspect-ratio: var(--cs-hero-desktop-ratio, 4 / 1);
    background: var(--cs-hero-placeholder-bg, #eceff1);
    border-radius: var(--cs-main-banner-radius, .5rem);
    overflow: hidden;
}
.hero-banner-slot #shop-hero-banner-container,
.hero-banner-slot #shop-hero-banner-mobile-container {
    position: absolute;
    inset: 0;
    opacity: 0;
}
.hero-banner-slot #shop-hero-banner-container { display: block; }
.hero-banner-slot #shop-hero-banner-mobile-container { display: none; }
.hero-banner-slot #shop-hero-banner-container.hero-image-ready,
.hero-banner-slot #shop-hero-banner-mobile-container.hero-image-ready { opacity: 1; }
.hero-banner-slot .carousel,
.hero-banner-slot .carousel-inner,
.hero-banner-slot .carousel-item,
.hero-banner-slot .carousel-item > a { height: 100%; }
.hero-banner-slot .carousel-item > a { display: block; }
.hero-banner-slot .carousel-item img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: contain;
}
.hero-banner-slot.hero-banner-empty { display: none; }
@media (max-width: 600px) {
    .hero-banner-slot { aspect-ratio: var(--cs-hero-mobile-ratio, 1 / 1); }
    .hero-banner-slot #shop-hero-banner-container { display: none; }
    .hero-banner-slot #shop-hero-banner-mobile-container { display: block; }
}