/**
 * Lazy Image Loading Styles
 * Provides smooth loading experience for product/series images
 */

/* Base lazy image container */
.lazy-image {
    background-color: #f5f5f5;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Loading state - hide background image until loaded */
.lazy-image.loading {
    background-image: none !important;
}

/* Loaded state - smooth fade in */
.lazy-image.loaded {
    animation: lazyFadeIn 0.3s ease-out;
}

/* Error state */
.lazy-image.error {
    background-color: #f0f0f0;
}

/* Fade in animation */
@keyframes lazyFadeIn {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1;
    }
}