Fix out-of-stock CTA: replace button instead of stacking, collapse notify form

Two problems in the previous back-in-stock commit: the disabled
"Ausverkauft" button and NotifyMeForm stacked, making out-of-stock
cards visibly taller than in-stock siblings — and since ProductGrid's
cards rely on plain CSS Grid row-stretch for equal card height, that
extra height stretched sibling cards and pushed their own buttons
down (screenshot: "In den Warenkorb" CTAs misaligned across a row).

NotifyMeForm now replaces the button slot entirely when out of stock
(matching the height of a normal button when collapsed), and only
expands to the email input after a click.

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

app/components/AddToCartInlineButton.tsx

@@ -113,24 +113,35 @@ export function AddToCartInlineButton({
           ))}
         </select>
       )}
-      <button
-        ref={buttonRef}
-        type="button"
-        onClick={handleClick}
-        disabled={disabled}
-        className={`${base} ${stateClasses}`}
-      >
-        <span
-          className={
-            "text-body-sm transition-colors " +
-            (disabled ? "text-text-muted" : added ? "font-semibold text-success" : "text-text-primary")
-          }
+      {currentlyOutOfStock ? (
+        // Replaces the button slot entirely rather than stacking below a
+        // disabled "Ausverkauft" button — this component's collapsed idle
+        // state is a single button, same height as the "In den Warenkorb"
+        // button it replaces, so an out-of-stock card doesn't end up taller
+        // than its in-stock siblings and stretch their own buttons down
+        // (plain CSS Grid rows stretch to the tallest card — see
+        // ProductGrid.tsx's own flex-1-spacer comment on why equal card
+        // height matters here).
+        <NotifyMeForm productId={numericId} variantName={variants.length > 0 ? (selectedVariant ?? "") : ""} />
+      ) : (
+        <button
+          ref={buttonRef}
+          type="button"
+          onClick={handleClick}
+          disabled={disabled}
+          className={`${base} ${stateClasses}`}
         >
-          {currentlyOutOfStock ? "Ausverkauft" : limitReached ? "Maximale Menge im Warenkorb" : added ? "Hinzugefügt ✓" : label}
-        </span>
-        <Image alt="" src="/icon-cart-outline.png" width={32} height={30} className="h-[1.875rem] w-8 object-contain" />
-      </button>
-      {currentlyOutOfStock && <NotifyMeForm productId={numericId} variantName={variants.length > 0 ? (selectedVariant ?? "") : ""} />}
+          <span
+            className={
+              "text-body-sm transition-colors " +
+              (disabled ? "text-text-muted" : added ? "font-semibold text-success" : "text-text-primary")
+            }
+          >
+            {limitReached ? "Maximale Menge im Warenkorb" : added ? "Hinzugefügt ✓" : label}
+          </span>
+          <Image alt="" src="/icon-cart-outline.png" width={32} height={30} className="h-[1.875rem] w-8 object-contain" />
+        </button>
+      )}
     </div>
   );
 }