/*
 * Equifruit Banana Slider CSS Styles
 * Overrides the horizontal pinned carousel (.Why) specifically for product cards.
 */

.Why.BananaSlider,
.Why.ImageSlider,
.Why.CertificationSlider,
.Why.BananaSlider .Why__stickers,
.Why.ImageSlider .Why__stickers,
.Why.CertificationSlider .Why__stickers {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Also strip top margin/padding from Elementor widget wrappers if present */
.elementor-widget-equifruit_banana_slider,
.elementor-widget-equifruit_banana_slider .elementor-widget-container,
.elementor-widget-equifruit_image_slider,
.elementor-widget-equifruit_image_slider .elementor-widget-container,
.elementor-widget-shortcode:has(.Why.ImageSlider),
.elementor-widget-shortcode:has(.Why.ImageSlider) .elementor-widget-container,
.elementor-widget-shortcode:has(.Why.ImageSlider) .elementor-shortcode,
.elementor-widget-shortcode:has(.Why.CertificationSlider),
.elementor-widget-shortcode:has(.Why.CertificationSlider) .elementor-widget-container,
.elementor-widget-shortcode:has(.Why.CertificationSlider) .elementor-shortcode,
.elementor-section:has(.Why.ImageSlider),
.elementor-section:has(.Why.CertificationSlider),
.e-con:has(.Why.ImageSlider),
.e-con:has(.Why.CertificationSlider) {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Card layout overrides for the product slides */
.Why__stickers-block.is-banana-slide {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: calc((100vw - calc(136 / 1440 * 100vw)) / 2) !important; /* Exactly 2 slides fit desktop width */
    margin-right: calc(20 / 1440 * 100vw) !important; /* Gap between slides */
    height: calc(480 / 1440 * 100vw) !important; /* Uniform height */
    padding: 0 !important; /* Remove card padding */
    border: none !important; /* Remove borders */
    border-radius: 0px !important;
    box-shadow: none !important; /* Remove card shadow */
    background: transparent !important; /* Transparent background */
    text-align: center !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    transform: none !important; /* No rotations */
}

/* Overwrite notes-carousel 85vw left margin to align first slide immediately on load */
.Why.BananaSlider .Why__stickers-block.is-banana-slide:first-child {
    margin-left: calc(48 / 1440 * 100vw) !important; /* Aligns with left content edge */
}

/* Show 3 items on load for ImageSlider on Desktop */
/* Excludes CertificationSlider (it shares the ImageSlider class); max() keeps the
   first slide from going off-screen on narrower desktop windows */
.Why.ImageSlider:not(.CertificationSlider) .Why__stickers-block.is-banana-slide:first-child {
    margin-left: max(40px, calc((100vw - 3 * 420px - 2 * 40px) / 2 + 60px)) !important;
}

.Why.BananaSlider .Why__stickers-block.is-banana-slide:last-child {
    margin-right: 0 !important;
}

/* Straighten cards in the Banana Slider (no rotations) */
.Why.BananaSlider .Why__stickers-block:nth-child(odd) {
    transform: none !important;
}
.Why.BananaSlider .Why__stickers-block:nth-child(even) {
    transform: none !important;
}

.Why__stickers-inner {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Slide image container with absolute limits */
.Why__stickers-block.is-banana-slide .BananaSlider__image-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: calc(345 / 1440 * 100vw) !important;
    width: 100% !important;
    margin-bottom: calc(20 / 1440 * 100vw) !important;
    box-sizing: border-box !important;
}

/* ImageSlider: let image-wrap shrink to image height */
.Why.ImageSlider .Why__stickers-block.is-banana-slide .BananaSlider__image-wrap {
    height: auto !important;
    max-height: clamp(100px, 32vh, 180px) !important;
    margin-bottom: 8px !important;
}

.Why__stickers-block.is-banana-slide .BananaSlider__image-wrap a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
}

.Why__stickers-block.is-banana-slide .BananaSlider__image-wrap img {
    max-width: 80% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    transition: transform 0.3s ease !important;
}

.Why__stickers-block.is-banana-slide .BananaSlider__image-wrap a:hover img {
    transform: scale(1.04) !important;
}

/* Captions underneath image: Claudia Bold, uppercase */
.Why__stickers-block.is-banana-slide h3.BananaSlider__caption {
    font-family: 'ClaudiaShouter', sans-serif !important;
    font-weight: 900 !important;
    font-size: calc(24 / 1440 * 100vw) !important;
    line-height: 1.2 !important;
    color: #302624 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

/* Mobile responsive layout */
@media (max-width: 768px) {
    .Why__stickers-block.is-banana-slide {
        width: calc(100vw - calc(40 / 320 * 100vw)) !important; /* Exactly 1 slide fits mobile width */
        margin-right: calc(10 / 320 * 100vw) !important;
        height: calc(360 / 320 * 100vw) !important;
        padding: 0 !important;
    }
    
    .Why.BananaSlider .Why__stickers-block.is-banana-slide:first-child {
        margin-left: calc(20 / 320 * 100vw) !important; /* Mobile starting position */
    }

    /* Center first quote slide for ImageSlider on Mobile */
    .Why.ImageSlider:not(.CertificationSlider) .Why__stickers-block.is-banana-slide:first-child {
        margin-left: calc(20 / 320 * 100vw) !important;
    }

    .Why__stickers-block.is-banana-slide .BananaSlider__image-wrap {
        height: calc(270 / 320 * 100vw) !important;
        margin-bottom: calc(15 / 320 * 100vw) !important;
    }

    .Why.ImageSlider .Why__stickers-block.is-banana-slide .BananaSlider__image-wrap {
        height: auto !important;
        max-height: clamp(100px, 22vh, 160px) !important;
        margin-bottom: 6px !important;
    }
    
    .Why__stickers-block.is-banana-slide .BananaSlider__image-wrap img {
        max-width: 85% !important;
        max-height: 100% !important;
    }
    
    .Why__stickers-block.is-banana-slide h3.BananaSlider__caption {
        font-size: calc(16 / 320 * 100vw) !important;
    }
    .Why.BananaSlider,
    .Why.ImageSlider,
    .Why.CertificationSlider,
    .Why.BananaSlider .Why__stickers,
    .Why.ImageSlider .Why__stickers,
    .Why.CertificationSlider .Why__stickers {
        height: auto !important;
        min-height: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}