/* CSS is the single owner of card dimensions; Swiper only owns movement. */
.mz-swiper-carousel .swiper-slide {
    width: auto;
    height: auto;
    flex-shrink: 0;
}

/* Card rails are gesture surfaces, not selectable reading content. Apply this
 * before Swiper initializes too, so a slow mobile load cannot start a native
 * text/image selection while the user is trying to swipe. */
.carousel-draggable,
.carousel-draggable *,
.mz-swiper-carousel,
.mz-swiper-carousel * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.carousel-draggable,
.mz-swiper-carousel {
    touch-action: pan-y pinch-zoom;
}

.carousel-draggable img,
.mz-swiper-carousel img {
    -webkit-user-drag: none;
    user-drag: none;
}

/* Swiper's base stylesheet assigns slides a content-derived width with
 * slidesPerView:auto. Lock the utility-based card widths here instead of
 * writing inline styles from JavaScript. */
.mz-swiper-carousel .swiper-slide[class~="w-[160px]"] {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    flex: 0 0 160px !important;
}

.mz-swiper-carousel .swiper-slide[class~="min-w-[200px]"] {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    flex: 0 0 200px !important;
}

/* A desktop mouse/pointer gets the larger cards. Touch devices retain the
 * compact mobile card size even when they expose a tablet-sized viewport. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .mz-swiper-carousel .swiper-slide[class~="md:w-[190px]"] {
        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
        flex-basis: 190px !important;
    }
}

/* The discount rail has an explicit native-scroll fallback while Swiper is
 * loading (or unavailable). Give that fallback the same dimensions as the
 * enhanced rail so cover images can never choose their own intrinsic widths. */
.mz-market-carousel.carousel-draggable > [class~="w-[160px]"],
.mz-market-carousel.mz-swiper-carousel .swiper-slide {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    flex: 0 0 160px !important;
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .mz-market-carousel.carousel-draggable > [class~="w-[160px]"],
    .mz-market-carousel.mz-swiper-carousel .swiper-slide {
        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
        flex-basis: 190px !important;
    }
}

@media (hover: hover) {
    .mz-swiper-carousel {
        cursor: grab;
    }

    .mz-swiper-carousel:active {
        cursor: grabbing;
    }
}

/* ---- Edge fades --------------------------------------------------------
 * A rail that continues past its edge should say so. These are painted
 * overlays rather than a mask-image on the rail: opacity is compositor-only,
 * so the fade can transition smoothly without re-rasterising the rail while
 * cards are moving underneath it.
 *
 * Only the Swiper-enhanced rail gets them. Before Swiper initialises, the rail
 * is still a native scroll container, where an absolutely positioned child
 * scrolls away with the content instead of staying pinned to the edge.
 *
 * --mz-rail-fade is the colour the cards dissolve into, read with a fallback
 * so an ancestor can override it. The four card sections sit on #050505–#0a0a0a
 * — close enough that one default covers them — while the discount panel sets
 * its own because it is a distinct raised surface. */
.mz-swiper-carousel {
    --mz-rail-fade-width: 56px;
}

.mz-swiper-carousel::before,
.mz-swiper-carousel::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--mz-rail-fade-width);
    /* Swiper's container is a stacking context, so this competes directly with
     * the cards' own z-20 badges rather than being layered above them. */
    z-index: 30;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.28s ease;
}

.mz-swiper-carousel::before {
    left: 0;
    background: linear-gradient(to right, var(--mz-rail-fade, #080808), transparent);
}

.mz-swiper-carousel::after {
    right: 0;
    background: linear-gradient(to left, var(--mz-rail-fade, #080808), transparent);
}

.mz-swiper-carousel.is-fade-left::before,
.mz-swiper-carousel.is-fade-right::after {
    opacity: 1;
}

@media (max-width: 767px) {
    .mz-swiper-carousel {
        --mz-rail-fade-width: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mz-swiper-carousel::before,
    .mz-swiper-carousel::after {
        transition: none;
    }
}