/**
 * Image Fallback Styles
 * Optional styling for images that have loaded their fallback
 */

/* Base styling for fallback images */
.img-fallback-active {
    opacity: 0.9;
    filter: grayscale(10%);
}

/* Smooth transition when fallback is applied */
img[data-fallback] {
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Optional: Add a subtle border to fallback images */
.img-fallback-active {
    border: 1px solid #e0e0e0;
}

    /* Optional: Different styling for different categories */
    .img-fallback-active.product-image {
        background-color: #f5f5f5;
    }

    .img-fallback-active.banner-image {
        background-color: #fafafa;
    }

/* Ensure fallback images maintain aspect ratio */
img[data-fallback] {
    object-fit: cover;
}

    /* Loading state (optional - if you want to show a loading indicator) */
    img[data-fallback]:not([src]) {
        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;
    }
}