/* ============================================
   Image Optimizations
   تحسينات الصور
   ============================================ */

/* Lazy Loading Placeholder */
img[loading="lazy"] {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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

/* Image Quality */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Product Images */
.product-image img,
.product-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

/* WebP Support */
.webp img {
    image-rendering: auto;
}

/* Blur-up technique */
.blur-up {
    filter: blur(5px);
    transition: filter 0.3s;
}

.blur-up.loaded {
    filter: blur(0);
}