.video-container video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



@media (min-width: 960px) {
.product-slider-section {
    background: radial-gradient(41.38% 62.75% at 50% 50%, rgba(217, 217, 217, 0.00) 0%, #C1C1C1 100%);
}
}

.product-slider-section .white{
  background: none;
}
  
@media (min-width: 961px) {
.product-slider-item:hover .sl-product-category {
    max-height: 32px;
    opacity: 1;
    padding-top: 4px;
    padding-bottom: 12px;

}
}


@media (max-width: 960px) {
    .product-slider-item {
        transition: none;
    }

    /* Disable all hover effects on mobile */
    .product-slider-item:hover {
        transform: none;
    }

    /* Override container styles for product slider items on mobile */
    .product-slider-section .container.product-slider-item {
        display: flex;
        max-width: none;
        min-width: 220px;
        width: auto;
        flex: 1 1 calc(50% - 21.5px);
        gap: 0;
        flex-direction: column;
        overflow: hidden;
        border-radius: 8px;
    }
}




/* Product Image */

.sl-product-image {
    position: absolute;

    width: clamp(350px, calc((350px) + (800 - 350) * ((100vw - 960px) / (1440 - 960))), 800px);
    height: clamp(350px, calc((350px) + (800 - 350) * ((100vw - 960px) / (1440 - 960))), 800px);
    right: 10%;
    top: 50%;
    transform: translate(240px, calc(-50%)) scale(0.9);
    opacity: 0;
    filter: blur(70px);
    pointer-events: none;
    overflow: hidden;
    transition: none;
}


@media (min-width: 961px) {


/* Force reset state (used when switching slides) */
.sl-product-image.is-resetting {
    transform: translate(200px, calc(-50%)) scale(0.95);
    opacity: 0;
    filter: blur(70px);
    transition: none;
}

/* Visible state on hover (but not when resetting or hiding) */
.product-slider-item:hover .sl-product-image:not(.is-hiding):not(.is-resetting) {
    opacity: 1;
    transform: translate(0, -50%) scale(1);
    filter: blur(0);
    transition: opacity 200ms ease,
                transform 1500ms ease,
                filter 500ms ease;
}

/* Hide state (when switching between slides) */
.sl-product-image.is-hiding {
    opacity: 0;
    transform: translate(calc(-1 * 16px), calc(-50%)) scale(1.01);
    filter: blur(4px);
    transition: opacity 200ms ease,
                transform 300ms ease,
                filter 300ms ease;
}

}

.sl-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 960px) {
    .product-slider-item:hover .sl-product-image {
        opacity: 1;
        transform: none;
        filter: none;
    }

    .product-slider-item:hover .sl-product-image:not(.is-hiding) {
        opacity: 1;
        transform: none;
        filter: none;
    }

    /* Product Image - visible on mobile, positioned at top */
    .product-slider-section .product-slider-item .sl-product-image {
        /* --image-size-min: 350; */
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        right: auto;
        top: auto;
        transform: none;
        opacity: 1;
        filter: none;
        pointer-events: auto;
        order: -1;
        background: rgb(255 255 255 / 0%);
        border-radius: 0;
        background-size: contain;
        background-position: center;
    }
}

/* Frame sequence variant */
.sl-product-image-sequence {
    overflow: hidden;
    will-change: background-position;
}

/* Sprite animation using CSS steps() for smooth performance */
.sl-product-image-sequence.is-animating {
    animation: sprite-backward 1000ms steps(25) 0ms forwards;
}

/* Keep animation paused while hiding to preserve current frame */
.sl-product-image-sequence.is-animating.is-hiding {
    animation-play-state: paused;
}

@keyframes sprite-backward {
    to {
        background-position: 0 center;
    }
}