From 7ecd9c2e222fcc62c7cce17dd0b3986d23c4e5c4 Mon Sep 17 00:00:00 2001
From: Unchained <unchained@nodecrew.me>
Date: Sun, 22 Mar 2026 21:27:38 +0200
Subject: [PATCH] Fix product images on mobile: use explicit width/height
 instead of fill

---
 src/components/product/ProductCard.tsx   | 5 +++--
 src/components/product/ProductDetail.tsx | 8 ++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/product/ProductCard.tsx b/src/components/product/ProductCard.tsx
index ce3a9da..50dd239 100644
--- a/src/components/product/ProductCard.tsx
+++ b/src/components/product/ProductCard.tsx
@@ -33,8 +33,9 @@ export default function ProductCard({ product, index = 0, locale = "SR" }: Produ
               src={image}
               alt={localized.name}
               fill
-              className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
-              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
+              className="object-cover object-center transition-transform duration-700 ease-out group-hover:scale-105"
+              sizes="100vw"
+              loading="lazy"
             />
           ) : (
             <div className="absolute inset-0 flex items-center justify-center text-[#999999]">
diff --git a/src/components/product/ProductDetail.tsx b/src/components/product/ProductDetail.tsx
index 1085db5..ed788fb 100644
--- a/src/components/product/ProductDetail.tsx
+++ b/src/components/product/ProductDetail.tsx
@@ -180,15 +180,15 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
               )}
 
 {/* Main Image */}
-              <div className="relative aspect-square bg-[#f8f9fa] overflow-hidden">
+              <div className="relative bg-[#f8f9fa] overflow-hidden">
                 {images[selectedImage] && (
                   <Image
                     src={images[selectedImage].url}
                     alt={images[selectedImage].alt || localized.name}
-                    fill
-                    className="object-cover"
+                    width={600}
+                    height={600}
+                    className="w-full h-auto object-cover"
                     priority
-                    sizes="(max-width: 1024px) 100vw, 50vw"
                   />
                 )}
               </div>