body {
    background: unset;
}

.slick-slide {
    width: auto;
    /* Adjust width based on content */
    max-width: 400px;
    /* Set a max-width if needed */
}

.slick-slide .slide_product_image {
    height: 50px !important;
}

/*.slick-track  video{
				max-height: 332px !important;
			}*/
#VideoModal {
    background: rgba(0, 0, 0, 0.5);
}

/* Mobile responsive font size adjustments */
@media (max-width: 768px) {
    /* Product name font size increased by 20% from previous 0.7em */
    .slick-slide .product_name,
    .slick-slide .product_name h5 {
        font-size: 0.84em !important;
    }
    
    /* Keep selling price and regular price at same size */
    .slick-slide .selling_price,
    .slick-slide .regular_price {
        font-size: 0.7em !important;
    }
    
    /* Reduce discount percentage and views count font size by 20% on mobile */
    .slick-slide .off,
    .slick-slide .view {
        font-size: 0.8em !important;
    }
    
    /* Hide navigation dots from product image carousel in mobile popup */
    #productDetail_modal .product_slider .slick-dots {
        display: none !important;
    }
}

/* Reel Slider Heading Styles */
.reelUpSlider div h5 {
    margin-top: 22px !important;
    margin-bottom: 0px !important;
}

/* Reel Slider Price Section */
.reelUpSlider div .sel_org_price {
    margin-top: 5px;
}

/* Lazy Loading Video Styles */
.reel-video-container {
    position: relative;
    width: 100%;
    height: 500px; /* Fixed height for desktop slider */
    max-height: 500px; /* Prevent container from growing beyond this */
    background: #1a1a1a url('https://cosanostraa.com/wp-content/uploads/2025/09/CN-Slideshow-BG.jpg') center center !important;
    background-size: cover !important;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.reel-video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.4); /* Semi-transparent overlay over background image */
    z-index: 2; /* Above background, below product image */
}

.reel-video-spinner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.6); /* Slight dark background for better visibility */
    border-radius: 50%;
    position: relative;
    z-index: 3; /* Above overlay, below product image */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}

.reel-video-spinner .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3); /* Light white border */
    border-top: 4px solid rgba(255, 255, 255, 1); /* Solid white top for spinning effect */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.reel-video-container video {
    width: 100%;
    height: 100%; /* Take full container height */
    max-width: 100%;
    max-height: 100%; /* Don't exceed container height */
    border-radius: 10px 10px 0 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    display: block;
    object-fit: cover; /* Fit video within container without overflow */
    position: relative;
    z-index: 1; /* Lowest z-index - stays behind everything */
}

.reel-video-container video.loaded,
.reel-video-container.loaded video {
    opacity: 1 !important;
}

.reel-video-container.loading .reel-video-placeholder {
    display: flex !important;
}

.reel-video-container.loaded .reel-video-placeholder {
    display: none !important;
}

.reel-video-container .reel-video-placeholder.hidden {
    display: none !important;
}

/* Single product page video container */
.videoDiv.reel-video-container {
    height: 270px; /* Fixed height to match max-height from inline style */
    max-height: 270px; /* Prevent overflow */
    max-width: 200px;
    background: #1a1a1a url('https://cosanostraa.com/wp-content/uploads/2025/09/CN-Slideshow-BG.jpg') center center !important;
    background-size: cover !important;
    overflow: hidden; /* Ensure content stays within bounds */
}

/* Ensure background image appears on all reel containers */
.reelUpSlider .reel-video-container,
.singlePagereelUpSlider .reel-video-container {
    background: #1a1a1a url('https://cosanostraa.com/wp-content/uploads/2025/09/CN-Slideshow-BG.jpg') center center !important;
    background-size: cover !important;
}

/* Add space at bottom for absolutely positioned product image */
.reelUpSlider .reel_product_image {
    position: relative; /* Ensure it can contain absolutely positioned children */
    padding-bottom: 20px; /* Space for the product image that extends below */
}

/* Ensure off_views (percentage off and views count) appear above video */
.reelUpSlider .reel_product .off_views,
.singlePagereelUpSlider .reel_product .off_views {
    z-index: 50 !important; /* Above video but below product image */
}

.reelUpSlider .off_views .off,
.reelUpSlider .off_views .view,
.singlePagereelUpSlider .off_views .off,
.singlePagereelUpSlider .off_views .view {
    z-index: 51 !important; /* Above parent container */
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .reel-video-container {
        height: 300px; /* Fixed height for mobile slider */
        max-height: 300px; /* Prevent overflow */
        background: #1a1a1a url('https://cosanostraa.com/wp-content/uploads/2025/09/CN-Slideshow-BG.jpg') center center !important;
        background-size: cover !important;
        overflow: hidden; /* Ensure content stays within bounds */
    }
    
    .videoDiv.reel-video-container {
        height: 220px; /* Smaller height for single product page on mobile */
        max-height: 220px; /* Prevent overflow */
        background: #1a1a1a url('https://cosanostraa.com/wp-content/uploads/2025/09/CN-Slideshow-BG.jpg') center center !important;
        background-size: cover !important;
        overflow: hidden; /* Ensure content stays within bounds */
    }
}