make entire product card image area clickable

The stretched-link::after overlay (z-index: 0) was blocked by
product-card-image-wrap (z-index: 1), so only the title text was
actually clickable. Wrapping the image area in a <.link> component
directly fixes this — taps/clicks bubble up to the link naturally,
and touch-scroll on the image carousel still works on mobile.

Also corrects the mode check: ThemeHook sets mode: :shop on shop pages,
not :live, so the condition is now mode != :preview (consistent with
how the title link already worked).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

assets/css/shop/components.css

@@ -50,6 +50,7 @@
   }
 
   .product-card-image-wrap {
+    display: block;
     z-index: 1;
     overflow: hidden;
     position: relative;

lib/berrypod_web/components/shop_components/product.ex

@@ -96,14 +96,20 @@ defmodule BerrypodWeb.ShopComponents.Product do
     primary_image = Product.primary_image(product)
     hover_image = Product.hover_image(product)
 
+    product_url =
+      if assigns.clickable && assigns.mode != :preview do
+        "/products/#{Map.get(assigns.product, :slug) || Map.get(assigns.product, :id)}"
+      end
+
     assigns =
       assigns
       |> assign(:primary_image, primary_image)
       |> assign(:hover_image, hover_image)
       |> assign(:has_hover_image, assigns.theme_settings.hover_image && hover_image != nil)
+      |> assign(:product_url, product_url)
 
     ~H"""
-    <div class="product-card-image-wrap">
+    <.product_card_image_wrap href={@product_url}>
       <%= if @show_badges do %>
         <.product_badge product={@product} />
       <% end %>
@@ -142,7 +148,7 @@ defmodule BerrypodWeb.ShopComponents.Product do
           <span class="product-image-dot"></span>
         </div>
       <% end %>
-    </div>
+    </.product_card_image_wrap>
     <div class="product-card-content">
       <%= if @show_category && Map.get(@product, :category) do %>
         <%= if @mode == :preview do %>
@@ -193,6 +199,23 @@ defmodule BerrypodWeb.ShopComponents.Product do
     """
   end
 
+  attr :href, :string, default: nil
+  slot :inner_block, required: true
+
+  defp product_card_image_wrap(assigns) do
+    ~H"""
+    <%= if @href do %>
+      <.link navigate={@href} class="product-card-image-wrap" tabindex="-1" aria-hidden="true">
+        {render_slot(@inner_block)}
+      </.link>
+    <% else %>
+      <div class="product-card-image-wrap">
+        {render_slot(@inner_block)}
+      </div>
+    <% end %>
+    """
+  end
+
   attr :image, :map, default: nil
   attr :alt, :string, required: true
   attr :variant, :atom, required: true