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: 93px;
    width: 93px;
    flex-shrink: 0;
}

/*.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 image back to original small size on mobile */
    .slick-slide .slide_product_image {
        height: 50px;
        width: 50px;
    }

    .reelUpSlider .slide_product_image {
        height: 50px !important;
        width: 50px !important;
        margin-top: -10px !important;
        border-radius: 8px !important;
    }

    /* 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;
    }
}

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

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

/* Product info row: photo + name/price side by side, vertically centered */
.reelUpSlider .reel_product_info,
.singlePagereelUpSlider .reel_product_info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.reelUpSlider .reel_product_text,
.singlePagereelUpSlider .reel_product_text {
    min-width: 0; /* allow text truncation */
    flex: 1;
}

/* Lazy Loading Video Styles */
.reel-video-container {
    position: relative;
    width: 100%;
    height: 600px; /* 20% taller than previous 500px */
    max-height: 600px;
    background: #1a1a1a center center;
    background-size: cover;
    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 center center;
    background-size: cover;
    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 center center;
    background-size: cover;
}

/* Ensure reel_product_image contains the video */
.reelUpSlider .reel_product_image {
    position: relative;
}

/* 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; /* Original mobile height */
        max-height: 300px;
        background: #1a1a1a center center;
        background-size: cover;
        overflow: hidden;
    }
    
    .videoDiv.reel-video-container {
        height: 220px; /* Smaller height for single product page on mobile */
        max-height: 220px; /* Prevent overflow */
        background: #1a1a1a center center;
        background-size: cover;
        overflow: hidden; /* Ensure content stays within bounds */
    }
}