Fix product images on mobile: use explicit width/height instead of fill

src/components/home/HeroVideo.tsx

@@ -13,26 +13,8 @@ export default function HeroVideo() {
   };
 
   return (
-    <section className="relative h-screen w-full overflow-hidden">
-      {/* Video Background */}
-      <div className="absolute inset-0">
-        <video
-          autoPlay
-          muted
-          loop
-          playsInline
-          poster="/images/hero-poster.jpg"
-          className="w-full h-full object-cover"
-        >
-          {/* Placeholder - Add actual video files when available */}
-          {/* <source src="/videos/hero.webm" type="video/webm" /> */}
-          {/* <source src="/videos/hero.mp4" type="video/mp4" /> */}
-        </video>
-        {/* Gradient Overlay */}
-        <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-black/30 to-black/60" />
-      </div>
-
-      {/* Fallback Background (shown when video isn't loaded) */}
+    <section className="relative min-h-screen w-full overflow-hidden">
+      {/* Background Image with Overlay */}
       <div 
         className="absolute inset-0 bg-cover bg-center bg-no-repeat"
         style={{
@@ -43,7 +25,7 @@ export default function HeroVideo() {
       </div>
 
       {/* Content */}
-      <div className="relative z-10 h-full flex flex-col items-center justify-center text-center text-white px-4">
+      <div className="relative z-10 min-h-screen flex flex-col items-center justify-center text-center text-white px-4 py-20">
         <motion.div
           initial={{ opacity: 0, y: 30 }}
           animate={{ opacity: 1, y: 0 }}

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]">

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>