/* LetsCo homepage carousel category-height fix
   Purpose: make the homepage carousel banner the same visible height as category banners.
   Category banners use h-48 on mobile and md:h-64 on desktop/tablet.
   This file targets only #hero-carousel-track and does not alter category banners. */

#main-content-scroll #hero-carousel-track,
#main-content-scroll #hero-carousel-track > div,
#main-content-scroll #hero-carousel-track picture,
#main-content-scroll #hero-carousel-track img {
    height: 12rem !important;
    min-height: 12rem !important;
    max-height: 12rem !important;
}

#main-content-scroll #hero-carousel-track {
    display: flex !important;
    width: 100% !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
}

#main-content-scroll #hero-carousel-track > div {
    flex: 0 0 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    align-items: center !important;
}

#main-content-scroll #hero-carousel-track picture {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

#main-content-scroll #hero-carousel-track img {
    display: block !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

#main-content-scroll [data-letsco-carousel-viewport="true"] {
    height: 12rem !important;
    min-height: 12rem !important;
    max-height: 12rem !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
}

@supports selector(:has(*)) {
    #main-content-scroll .group:has(> #hero-carousel-track),
    #main-content-scroll .relative.overflow-hidden:has(> #hero-carousel-track) {
        height: 12rem !important;
        min-height: 12rem !important;
        max-height: 12rem !important;
        overflow: hidden !important;
        flex: 0 0 auto !important;
    }
}

@media (min-width: 700px) {
    #main-content-scroll #hero-carousel-track,
    #main-content-scroll #hero-carousel-track > div,
    #main-content-scroll #hero-carousel-track picture,
    #main-content-scroll #hero-carousel-track img,
    #main-content-scroll [data-letsco-carousel-viewport="true"] {
        height: 16rem !important;
        min-height: 16rem !important;
        max-height: 16rem !important;
    }

    @supports selector(:has(*)) {
        #main-content-scroll .group:has(> #hero-carousel-track),
        #main-content-scroll .relative.overflow-hidden:has(> #hero-carousel-track) {
            height: 16rem !important;
            min-height: 16rem !important;
            max-height: 16rem !important;
        }
    }
}