/* =====================================================================
   CHUM HERO / BANNER SLIDER
   CLEAN COMMERCE HERO + LIQUID GLASS CONTROLS
   ===================================================================== */


/* =====================================================================
   MAIN
   ===================================================================== */

.chum-banner-slider {
    position:
        relative;

    width:
        100%;

    margin:
        0;

    padding:
        0;

    overflow:
        hidden;

    background:
        #eef4f8;

    isolation:
        isolate;
}


/* =====================================================================
   VIEWPORT
   ===================================================================== */

.chum-slider-viewport {
    position:
        relative;

    width:
        100%;

    overflow:
        hidden;

    background:
        #eef4f8;
}


/* =====================================================================
   TRACK
   ===================================================================== */

.chum-slider-track {
    width:
        100%;

    display:
        flex;

    transition:
        transform
        650ms
        cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        );

    will-change:
        transform;
}


/* =====================================================================
   SLIDE
   ===================================================================== */

.chum-slider-slide {
    position:
        relative;

    flex:
        0
        0
        100%;

    width:
        100%;

    overflow:
        hidden;

    background:
        #eef4f8;
}


/* subtle lower fade for controls/readability */

.chum-slider-slide::after {
    content: "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        70px;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(10, 18, 31, 0.025)
        );
}


/* =====================================================================
   IMAGE
   ===================================================================== */

.chum-slider-slide img {
    display:
        block;

    width:
        100%;

    height:
        clamp(
            330px,
            24vw,
            470px
        );

    object-fit:
        cover;

    object-position:
        center;

    user-select:
        none;

    -webkit-user-drag:
        none;
}


/* =====================================================================
   BAZAAR
   ===================================================================== */

.chum-banner-slider[data-section="bazaar"]
.chum-slider-slide img {
    height:
        clamp(
            335px,
            24vw,
            465px
        );

    object-position:
        center;
}


/* =====================================================================
   SUPERMARKET
   ===================================================================== */

.chum-banner-slider[data-section="supermarket"]
.chum-slider-slide img {
    height:
        clamp(
            335px,
            24vw,
            465px
        );

    object-position:
        center;
}


/* =====================================================================
   DEALS
   ===================================================================== */

.chum-banner-slider[data-section="deals"]
.chum-slider-slide img {
    height:
        clamp(
            320px,
            23vw,
            450px
        );

    object-position:
        center;
}


/* =====================================================================
   ARROWS
   ===================================================================== */

.chum-slider-arrow {
    position:
        absolute;

    top:
        50%;

    z-index:
        20;

    width:
        48px;

    height:
        58px;

    display:
        grid;

    place-items:
        center;

    padding:
        0;

    border:
        1px solid
        rgba(255, 255, 255, 0.58);

    background:
        rgba(255, 255, 255, 0.34);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(180%);

    backdrop-filter:
        blur(18px)
        saturate(180%);

    color:
        #1b1c64;

    cursor:
        pointer;

    opacity:
        0;

    transform:
        translateY(-50%);

    box-shadow:
        inset
        0
        1px
        0
        rgba(255, 255, 255, 0.76),

        0
        10px
        26px
        rgba(17, 24, 40, 0.11);

    transition:
        opacity 180ms ease,
        background 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}


.chum-slider-arrow svg {
    width:
        23px;

    height:
        23px;
}


/* =====================================================================
   PREVIOUS
   ===================================================================== */

.chum-slider-prev {
    left:
        12px;

    border-radius:
        17px;
}


/* =====================================================================
   NEXT
   ===================================================================== */

.chum-slider-next {
    right:
        12px;

    border-radius:
        17px;
}


/* =====================================================================
   SHOW ARROWS
   ===================================================================== */

.chum-banner-slider:hover
.chum-slider-arrow,
.chum-slider-arrow:focus-visible {
    opacity:
        1;
}


.chum-slider-arrow:hover {
    background:
        rgba(255, 255, 255, 0.76);

    color:
        #e84164;
}


.chum-slider-prev:hover {
    transform:
        translateY(-50%)
        translateX(2px);
}


.chum-slider-next:hover {
    transform:
        translateY(-50%)
        translateX(-2px);
}


/* =====================================================================
   DOT CONTAINER
   ===================================================================== */

.chum-slider-dots {
    position:
        absolute;

    z-index:
        20;

    left:
        50%;

    bottom:
        17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    transform:
        translateX(-50%);

    padding:
        7px
        10px;

    border:
        1px solid
        rgba(255, 255, 255, 0.43);

    border-radius:
        999px;

    background:
        rgba(35, 41, 55, 0.15);

    -webkit-backdrop-filter:
        blur(14px)
        saturate(160%);

    backdrop-filter:
        blur(14px)
        saturate(160%);

    box-shadow:
        inset
        0
        1px
        0
        rgba(255, 255, 255, 0.17),

        0
        5px
        16px
        rgba(0, 0, 0, 0.055);
}


/* =====================================================================
   DOT
   ===================================================================== */

.chum-slider-dot {
    width:
        7px;

    height:
        7px;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, 0.62);

    cursor:
        pointer;

    transition:
        width 220ms ease,
        background 220ms ease,
        transform 220ms ease;
}


.chum-slider-dot:hover {
    background:
        #ffffff;

    transform:
        scale(1.10);
}


.chum-slider-dot.is-active {
    width:
        25px;

    border-radius:
        999px;

    background:
        #ffffff;
}


/* =====================================================================
   TABLET
   ===================================================================== */

@media (max-width: 991px) {

    .chum-slider-slide img,
    .chum-banner-slider[data-section="bazaar"]
    .chum-slider-slide img,
    .chum-banner-slider[data-section="supermarket"]
    .chum-slider-slide img,
    .chum-banner-slider[data-section="deals"]
    .chum-slider-slide img {

        height:
            clamp(
                250px,
                36vw,
                380px
            );
    }


    .chum-slider-arrow {
        width:
            42px;

        height:
            52px;

        opacity:
            0.88;
    }


    .chum-slider-prev {
        left:
            8px;
    }


    .chum-slider-next {
        right:
            8px;
    }

}


/* =====================================================================
   MOBILE
   ===================================================================== */

@media (max-width: 767px) {

    .chum-slider-slide img,
    .chum-banner-slider[data-section="bazaar"]
    .chum-slider-slide img,
    .chum-banner-slider[data-section="supermarket"]
    .chum-slider-slide img,
    .chum-banner-slider[data-section="deals"]
    .chum-slider-slide img {

        height:
            clamp(
                190px,
                47vw,
                290px
            );
    }


    .chum-slider-arrow {
        width:
            36px;

        height:
            44px;

        border-radius:
            13px;
    }


    .chum-slider-prev {
        left:
            5px;
    }


    .chum-slider-next {
        right:
            5px;
    }


    .chum-slider-arrow svg {
        width:
            19px;

        height:
            19px;
    }


    .chum-slider-dots {
        bottom:
            10px;

        gap:
            6px;

        padding:
            5px
            8px;
    }


    .chum-slider-dot {
        width:
            6px;

        height:
            6px;
    }


    .chum-slider-dot.is-active {
        width:
            19px;
    }

}


/* =====================================================================
   SMALL MOBILE
   ===================================================================== */

@media (max-width: 480px) {

    .chum-slider-slide img,
    .chum-banner-slider[data-section="bazaar"]
    .chum-slider-slide img,
    .chum-banner-slider[data-section="supermarket"]
    .chum-slider-slide img,
    .chum-banner-slider[data-section="deals"]
    .chum-slider-slide img {

        height:
            clamp(
                165px,
                50vw,
                225px
            );
    }

}


/* =====================================================================
   REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {

    .chum-slider-track,
    .chum-slider-arrow,
    .chum-slider-dot {
        transition:
            none;
    }

}