From c065a3223f2782608bb61c082b492c43f7bccec1 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Sun, 2 Aug 2026 08:19:42 +0000
Subject: [PATCH] Link product images to detail pages, not just titles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Image sits as a sibling to the badge/WishlistButton overlays, not
wrapping them — nested interactive elements would be invalid HTML and
would fire navigation on a wishlist click.

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

diff --git a/app/components/ProductCard.tsx b/app/components/ProductCard.tsx
index 466323d..f2839a3 100644
--- a/app/components/ProductCard.tsx
+++ b/app/components/ProductCard.tsx
@@ -57,13 +57,29 @@ export function ProductCard({
       className={`group bg-bg-base border border-border rounded-md overflow-hidden flex flex-col h-full transition-transform duration-300 hover:-translate-y-1 ${className}`}
     >
       <div className="relative w-full aspect-[276/210] overflow-hidden">
-        <Image
-          src={product.image}
-          alt={product.name}
-          fill
-          sizes="(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw"
-          className={`object-cover transition-transform duration-500 group-hover:scale-105 ${fullyOutOfStock ? "opacity-60" : ""}`}
-        />
+        {/* Link wraps only the image, not the whole header — WishlistButton
+            below is its own interactive element and sits as a sibling, not
+            nested inside this Link (nested interactive elements are both
+            invalid HTML and would fire navigation on a wishlist click). */}
+        {product.href ? (
+          <Link href={product.href} aria-label={product.name} className="absolute inset-0 z-0">
+            <Image
+              src={product.image}
+              alt={product.name}
+              fill
+              sizes="(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw"
+              className={`object-cover transition-transform duration-500 group-hover:scale-105 ${fullyOutOfStock ? "opacity-60" : ""}`}
+            />
+          </Link>
+        ) : (
+          <Image
+            src={product.image}
+            alt={product.name}
+            fill
+            sizes="(min-width: 1024px) 30vw, (min-width: 640px) 50vw, 100vw"
+            className={`object-cover transition-transform duration-500 group-hover:scale-105 ${fullyOutOfStock ? "opacity-60" : ""}`}
+          />
+        )}
         {topLeftBadge !== undefined ? (
           topLeftBadge
         ) : fullyOutOfStock ? (