/**
 * Safari/Mac — Image Rendering, Review & Product Image Fixes
 */

/* Force hardware acceleration for smoother image rendering */
img { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* Fix object-fit in Safari */
img, video { -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; }

/* Safari lazy loading polyfill support */
img[loading="lazy"] { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

/* Prevent image distortion */
img { max-width: 100%; height: auto; display: block; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }

/* High-DPI/Retina display optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { img { image-rendering: auto; } }

/* Review gallery thumbnails */
.gallery-thumb img, [data-gallery-thumb] img, [data-review-media] img {
  -webkit-transform: translateZ(0); transform: translateZ(0);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  will-change: transform; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;
}

/* Image gallery items in admin */
.image-item img, .image-gallery img {
  -webkit-transform: translateZ(0); transform: translateZ(0);
  width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;
}

/* Product card images */
.product-card img, [data-product-image] img, .product-image img {
  -webkit-transform: translateZ(0); transform: translateZ(0);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Product gallery main image */
.product-gallery__main img, #product-image-main img {
  -webkit-transform: translateZ(0); transform: translateZ(0);
  width: 100%; height: auto; -o-object-fit: contain; object-fit: contain;
}

/* Placeholder for loading images */
img:not([src]), img[src=""], img.lazy-loading {
  background: linear-gradient(110deg, rgba(255,255,255,0.05) 8%, rgba(255,255,255,0.1) 18%, rgba(255,255,255,0.05) 33%);
  background-size: 200% 100%; -webkit-animation: shimmer 1.5s infinite; animation: shimmer 1.5s infinite;
}

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

/* Error state for broken images */
img.lazy-error, img[data-error="true"] { opacity: 0.5; filter: grayscale(100%); border: 2px dashed rgba(239, 68, 68, 0.5); }

/* Successfully loaded images */
img.lazy-loaded { -webkit-animation: fadeIn 0.3s ease-out; animation: fadeIn 0.3s ease-out; }
@-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Ensure consistent color rendering */
img { color-interpolation: sRGB; }

/* Hide broken WebP images on unsupported browsers */
.no-webp img[src$=".webp"] { visibility: hidden; }
.no-webp img[src$=".webp"]::after { content: "Image not supported"; visibility: visible; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,0.5); font-size: 0.75rem; }