/* Image optimization styles for better performance */

/* Product detail images */
.product-details-container img {
    /* Optimize image rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;

    /* Prevent layout shift */
    width: auto;
    height: auto;

    /* Smooth transitions */
    transition: opacity 0.3s ease;
}

/* Mobile image rendering optimization */
@media (max-width: 768px) {
    .product-details-container img,
    .product-card img,
    .mobile-carousel img {
        image-rendering: auto;
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Thumbnail images optimization */
.thumbnail img {
    /* Fixed size for thumbnails to prevent layout shift */
    width: 80px;
    height: 80px;
    object-fit: cover;
    
    /* Optimize for small images */
    image-rendering: -webkit-optimize-contrast;
    
    /* Loading state */
    background-color: #f5f5f5;
    border-radius: 4px;
}

/* Main product image optimization */
.main-image img {
    /* Responsive image */
    max-width: 100%;
    height: auto;
    
    /* Prevent layout shift */
    min-height: 400px;
    background-color: #f5f5f5;
    
    /* Smooth loading */
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Loading state for images */
.main-image img[loading="lazy"] {
    opacity: 0;
}

.main-image img[loading="lazy"].loaded {
    opacity: 1;
}

/* Mobile carousel optimization */
.mobile-carousel img {
    max-width: 100%;
    height: auto;
    min-height: 300px;
    background-color: white;
    object-fit: contain;
}

/* Image modal optimization */
.image-modal-content img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    background-color: #f5f5f5;
}

/* Product card images optimization */
.product-card img {
    width: 100%;
    height: 250px;
    object-fit: contain;
    background-color: white;

    /* Lazy loading optimization */
    transition: opacity 0.3s ease;
}

/* Image loading skeleton */
.image-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Preload critical images */
.preload-image {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Optimize for different screen sizes */
@media (max-width: 768px) {
    .thumbnail img {
        width: 60px;
        height: 60px;
    }

    .main-image img {
        min-height: 300px;
    }

    /* Mobile product card image optimization */
    .product-card img {
        object-fit: contain;
        background-color: white;
        height: 180px;
    }

    /* Mobile carousel specific optimization */
    .mobile-carousel img {
        min-height: 300px;
        object-fit: contain;
        background-color: white;
    }
}

@media (max-width: 480px) {
    .thumbnail img {
        width: 50px;
        height: 50px;
    }

    .main-image img {
        min-height: 250px;
    }

    /* Mobile product card image optimization */
    .product-card img {
        object-fit: contain;
        background-color: white;
        height: 160px;
    }

    /* Mobile carousel specific optimization */
    .mobile-carousel img {
        min-height: 250px;
        object-fit: contain;
        background-color: white;
    }
}