.image-placeholder-container {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    background-color: #f0f0f0;
}

/* The shimmer effect */
.shimmer-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
        -90deg,
        #f0f0f0 0%,
        #e8e8e8 50%,
        #f0f0f0 100%
    );
    background-size: 400% 100%;
    animation: shimmer 1.2s ease-in-out infinite;
    transition: opacity 0.5s ease-in-out;
}

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

/* Image styling */
.product-main-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    opacity: 0; /* Image starts transparent */
    transition: opacity 0.5s ease-in-out;
}

/* A simple class to show the image */
.product-main-image.loaded {
    opacity: 1; /* Image becomes visible */
}

/* Hide the placeholder once the image loads (optional, but good practice) */
.product-main-image.loaded + .shimmer-placeholder {
    opacity: 0;
    visibility: hidden;
}