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 ? (