/* ===== GLOBAL LAZY LOADING STYLES ===== */

/* Shimmer animation keyframes */
@keyframes lazy-shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* Image containers - add shimmer background while images load */
.product-image,
.image-carousel,
.main-image,
.thumbnail {
    position: relative;
    background: linear-gradient(
        90deg,
        #f0f0f0 0%,
        #f8f8f8 20%,
        #f0f0f0 40%,
        #f0f0f0 100%
    );
    background-size: 200% 100%;
    animation: lazy-shimmer 1.5s ease-in-out infinite;
}

/* Stop shimmer animation when image is loaded */
.product-image.image-loaded,
.image-carousel.image-loaded,
.main-image.image-loaded,
.thumbnail.image-loaded {
    animation: none;
    background: #F8F6F0;
}

/* All images with data-src start completely hidden */
img[data-src] {
    opacity: 0 !important;
    transition: opacity 0.4s ease-in-out;
}

/* Images in loading state stay hidden */
img.lazy-loading {
    opacity: 0 !important;
}

/* Loaded images fade in smoothly */
img.lazy-loaded {
    opacity: 1 !important;
}

/* Images with real src (first image, no lazy loading) */
img[src*="firebasestorage"]:not([data-src]),
img[src*="http"]:not([data-src]) {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

/* Loaded class for non-lazy images */
img.loaded {
    opacity: 1 !important;
}

/* Error state */
img.lazy-error {
    opacity: 0.3;
    filter: grayscale(100%);
    background: #f5f5f5;
}

/* Product card carousel images - opacity controlled by JavaScript */
/* Don't apply opacity rules here - let JS handle visibility */