Link cart line-item titles/images to product detail pages

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

@@ -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. */}