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

Cart line items had their own separate markup from ProductCard.tsx and
never got the title-link treatment — same product.href check, only
rendered as a link when the product actually has a detail page.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/cart/components/CartContent.tsx | 51 +++++++++++++++++++++--------
 1 file changed, 37 insertions(+), 14 deletions(-)

diff --git a/app/cart/components/CartContent.tsx b/app/cart/components/CartContent.tsx
index f182d81..d088039 100644
--- a/app/cart/components/CartContent.tsx
+++ b/app/cart/components/CartContent.tsx
@@ -228,13 +228,25 @@ export function CartContent({
                       sm: once the row layout kicks in and the image sits
                       beside the text instead. */}
                   <div className="relative w-full aspect-square sm:size-[9.375rem] sm:shrink-0 rounded-sm overflow-hidden">
-                    <Image
-                      src={product.image}
-                      alt={product.name}
-                      fill
-                      sizes="(min-width: 640px) 150px, 100vw"
-                      className="object-cover"
-                    />
+                    {product.href ? (
+                      <Link href={product.href} aria-label={product.name} className="block w-full h-full">
+                        <Image
+                          src={product.image}
+                          alt={product.name}
+                          fill
+                          sizes="(min-width: 640px) 150px, 100vw"
+                          className="object-cover"
+                        />
+                      </Link>
+                    ) : (
+                      <Image
+                        src={product.image}
+                        alt={product.name}
+                        fill
+                        sizes="(min-width: 640px) 150px, 100vw"
+                        className="object-cover"
+                      />
+                    )}
                     {discount !== null && (
                       <span className="absolute top-2 left-2 rounded-full bg-brand px-2 py-0.5 text-label font-bold text-text-primary">
                         -{discount}%
@@ -242,13 +254,24 @@ export function CartContent({
                     )}
                   </div>
                   <div className="flex flex-col gap-[0.625rem] items-start flex-1 min-w-0 w-full">
-                    <p
-                      className="font-semibold text-h-small text-text-primary"
-                      style={{ fontFamily: "var(--font-lora)" }}
-                    >
-                      {product.name}
-                      {entry.variant ? ` (${entry.variant})` : ""}
-                    </p>
+                    {product.href ? (
+                      <Link
+                        href={product.href}
+                        className="font-semibold text-h-small text-text-primary hover:text-brand transition-colors"
+                        style={{ fontFamily: "var(--font-lora)" }}
+                      >
+                        {product.name}
+                        {entry.variant ? ` (${entry.variant})` : ""}
+                      </Link>
+                    ) : (
+                      <p
+                        className="font-semibold text-h-small text-text-primary"
+                        style={{ fontFamily: "var(--font-lora)" }}
+                      >
+                        {product.name}
+                        {entry.variant ? ` (${entry.variant})` : ""}
+                      </p>
+                    )}
                     {/* Independent stacked rows, not grid siblings — no
                         equal-height pressure from neighboring lines, so a
                         plain conditional line is enough here. */}