From 44d938953bb03fb5cb5431af9b35da017e37a34b Mon Sep 17 00:00:00 2001
From: Unchained <unchained@nodecrew.me>
Date: Sun, 22 Mar 2026 11:00:44 +0200
Subject: [PATCH] Center related products using flexbox instead of grid

---
 src/components/product/ProductDetail.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/product/ProductDetail.tsx b/src/components/product/ProductDetail.tsx
index 7a212b6..9ed5aab 100644
--- a/src/components/product/ProductDetail.tsx
+++ b/src/components/product/ProductDetail.tsx
@@ -414,17 +414,16 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
                 {locale === "EN" ? "Similar Products" : "Slični proizvodi"}
               </h2>
             </div>
-            <div className="flex justify-center">
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
-                {relatedProducts.filter(p => p && p.id).slice(0, 4).map((relatedProduct, index) => (
+            <div className="flex flex-wrap justify-center gap-6 lg:gap-8">
+              {relatedProducts.filter(p => p && p.id).slice(0, 4).map((relatedProduct, index) => (
+                <div key={relatedProduct.id} className="w-full sm:w-[calc(50%-12px)] lg:w-[calc(25%-18px)]">
                   <ProductCard 
-                    key={relatedProduct.id} 
                     product={relatedProduct} 
                     index={index}
                     locale={locale}
                   />
-                ))}
-              </div>
+                </div>
+              ))}
             </div>
           </div>
         </section>