Make product card row alignment fully dynamic via CSS Grid subgrid

Replaces the fixed line-clamp-2 subline cap with real subgrid alignment:
each grid (ProductGrid/RelatedProducts/MerklisteGrid) declares 6 explicit
row-tracks (image/header/price/belowPrice/lowstock/button, last one
minmax(0,1fr)), and every card spans those same 6 tracks via
grid-template-rows: subgrid — so row heights are genuinely shared across
a row of cards. A subline can now wrap to any number of lines (3, 4, ...)
without being truncated, and the price row still starts at the same Y on
every card in that row.

ProductCard.tsx is flattened from nested flex divs into 6 direct grid-row
children so each one can be its own subgrid track; the old flex-1 spacer
is replaced by self-end on the button's row.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01J1Hu5bZ1kZUgKhab6yNwCt

app/cart/components/RelatedProducts.tsx

@@ -129,9 +129,13 @@ export function RelatedProducts({
           (opacity: 0) — invisible. Not worth chasing a fix for a
           scroll-reveal nicety on a list that mutates; a static grid
           renders correctly with no animation risk. */}
-      {/* No items-start — see ProductGrid.tsx's own comment on why that
-          silently defeats ProductCard's h-full equal-height design. */}
-      <div className="grid grid-cols-1 sm:grid-cols-12 gap-6 sm:gap-[var(--layout-grid-gap)] w-full max-w-[75rem]">
+      {/* No items-start, and grid-auto-rows + subgrid on each card — see
+          ProductGrid.tsx's own comment on why both are needed for
+          ProductCard's internal rows (price, etc.) to actually line up
+          across cards, not just overall card height. No RevealItem
+          wrapper here (see comment above), so the subgrid classes go
+          straight onto ProductCard's own className prop instead. */}
+      <div className="grid grid-cols-1 sm:grid-cols-12 gap-6 sm:gap-[var(--layout-grid-gap)] [grid-auto-rows:auto_auto_auto_auto_auto_minmax(0,1fr)] w-full max-w-[75rem]">
         {displayProducts.map((product, i) => (
           <ProductCard
             key={product.id}
@@ -141,7 +145,7 @@ export function RelatedProducts({
             wishlistEnabled={wishlistEnabled}
             wishlistRevealOnHover
             className={
-              "sm:col-span-4 " +
+              "sm:col-span-4 [grid-row:span_6] " +
               // Center the row when there are fewer than 3 cards to show
               // (e.g. only 1 active product left once the others are
               // already in the cart) — only the first card needs an