From 6b8ba44d461ed0f430ac17523911adbbe5fc6868 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Thu, 30 Jul 2026 21:36:57 +0000
Subject: [PATCH] Shop overview: 2 products per row through tablet, 4 only from
 lg
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Was 4-up from sm (640px) — too narrow a card through the 640-1023px
tablet range. True mobile (below sm) unchanged.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/shop/components/ProductGrid.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/shop/components/ProductGrid.tsx b/app/shop/components/ProductGrid.tsx
index e3bb959..dc24e31 100644
--- a/app/shop/components/ProductGrid.tsx
+++ b/app/shop/components/ProductGrid.tsx
@@ -31,7 +31,11 @@ export async function ProductGrid() {
 
   return (
     <section className="w-full bg-bg-base flex flex-col pb-16 md:pb-20 px-[var(--layout-padding-x)]">
-      <RevealGroup className="grid grid-cols-1 sm:grid-cols-12 gap-6 sm:gap-[var(--layout-grid-gap)] w-full">
+      {/* 2-up from the mobile breakpoint (sm, 640px) through 1023px — was
+          sm:grid-cols-12 with each card sm:col-span-3 (4-up), too narrow a
+          card through that tablet range. 4-up now only kicks in at lg
+          (1024px), true mobile (below sm) unchanged. */}
+      <RevealGroup className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-6 sm:gap-[var(--layout-grid-gap)] w-full">
         {products.map((product) => {
           const discount = discountPercent(product.price, product.compareAtPrice);
           const taxRate = effectiveTaxRate(product, defaultTaxRate);
@@ -48,14 +52,14 @@ export async function ProductGrid() {
           return (
           <RevealItem
             key={product.id}
-            className="group sm:col-span-3 bg-bg-base border border-border rounded-md overflow-hidden flex flex-col h-full transition-transform duration-300 hover:-translate-y-1"
+            className="group lg:col-span-3 bg-bg-base border border-border rounded-md overflow-hidden flex flex-col h-full transition-transform duration-300 hover:-translate-y-1"
           >
             <div className="relative w-full aspect-[276/210] overflow-hidden">
               <Image
                 src={product.image}
                 alt={product.name}
                 fill
-                sizes="(min-width: 640px) 25vw, 100vw"
+                sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw"
                 className={`object-cover transition-transform duration-500 group-hover:scale-105 ${fullyOutOfStock ? "opacity-60" : ""}`}
               />
               {fullyOutOfStock ? (