/* Product item container */
.owl-carousel .item {
    position: relative;
}

/* Cover container */
.owl-carousel .cover {
    position: relative;
    overflow: hidden;
}

/* Ensure the cover images are also positioned */
.owl-carousel .cover img {
    transition: opacity 0.3s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

/* Preview video styling */
.owl-carousel .preview-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

/* Loading spinner */
.owl-carousel .cover::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 3;
    pointer-events: none;
}

/* Show spinner when loading */
.owl-carousel .cover.loading::before {
    opacity: 1;
    visibility: visible;
    animation: spin 0.8s linear infinite;
}

/* Hide spinner when video is ready */
.owl-carousel .cover.video-ready::before {
    display: none;
}

/* Show video when ready */
.owl-carousel .cover.video-ready .preview-video {
    opacity: 1;
}

/* Hide image when video is ready */
.owl-carousel .cover.video-ready img {
    opacity: 0;
}

/* Animation for spinner */
@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Optional: Add a subtle overlay for better spinner visibility on light images */
.owl-carousel .cover.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.owl-carousel .cover.loading::after {
    opacity: 1;
}

.owl-carousel .cover.video-ready::after {
    display: none;
}

/* Add spacing between carousel items */
.owl-carousel .item {
    margin: 10px;
    /* This adds space around each item */
}

/* If you want specific left/right spacing */
.owl-carousel .owl-stage {
    display: flex;
    padding: 10px 0;
    /* Adds vertical padding to prevent clipping */
}

.owl-carousel .owl-item {
    padding: 0 10px;
    /* Alternative: add padding to each slide */
}