/* Fix WooCommerce Product Image Display Issues */

/* Hide placeholder images and force real images to show */
.woocommerce-product-gallery img[src*="placeholder.webp"] {
    display: none !important;
}

/* Show actual product images immediately */
.woocommerce-product-gallery img[data-src] {
    opacity: 1 !important;
    background-image: attr(data-src) !important;
}

/* Force immediate loading for product gallery */
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
    opacity: 1 !important;
    transition: none !important;
}

/* Fix broken image display on single product pages */
.single-product .woocommerce-product-gallery__image img {
    content: attr(data-src) !important;
}

/* Ensure product thumbnails load immediately */
.woocommerce-product-gallery {
    opacity: 1 !important;
}

/* Alternative: Use data-src as background image if src is placeholder */
.woocommerce-product-gallery img[src*="placeholder"]:not([data-src=""]) {
    background-image: attr(data-src) !important;
    background-size: cover !important;
    background-position: center !important;
    width: 100% !important;
    height: 100% !important;
}