Move low-stock warning from image badge to a text hint, add it to the cart

The image-overlaid pill made the low-stock message read as clutter on
product photos and had no equivalent in the cart at all. It's now a text
line next to the price (ProductGrid/ProductSpotlight/RelatedProducts/
Pricing) and under the product name in cart line items (variant-specific,
not "any variant low"). The line's height is always reserved, not
conditionally rendered, so cards in the same row stay equal-height
regardless of low-stock state — the exact regression an earlier text-based
version of this hint caused before it was replaced by the image badge.

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

app/cart/components/CartContent.tsx

@@ -184,6 +184,13 @@ export function CartContent({
               // when the quantity or remove control is used, same "full
               // key" reasoning as cart.ts's own sameLine().
               const lineKey = entry.variant ? `${product.id}::${entry.variant}` : product.id;
+              // The exact variant this line is for, not "any variant low"
+              // like the product-grid cards use — a cart line already has
+              // its variant chosen, so it should only warn when that
+              // specific variant (not some other one) is running low.
+              const lowStock = entry.variant
+                ? (product.variants.find((v) => v.name === entry.variant)?.lowStock ?? false)
+                : product.lowStock;
               return (
               <div key={lineKey} className="w-full">
                 {i > 0 && <div className="h-px bg-border w-full mb-6" />}
@@ -204,6 +211,10 @@ export function CartContent({
                       {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. */}
+                    {lowStock && <p className="text-label font-bold text-warning">Nur noch wenige verfügbar</p>}
                     <p className="font-bold text-body-sm text-text-muted">{product.description}</p>
                     <div className="flex flex-col gap-0.5 items-start">
                       <p className="text-label text-text-muted">Einzelpreis</p>

app/cart/components/RelatedProducts.tsx

@@ -159,28 +159,20 @@ export function RelatedProducts({ defaultTaxRate }: { defaultTaxRate: number })
               />
               {/* Same top-left pill pattern as ProductGrid.tsx/
                   ProductSpotlight.tsx — position: absolute, so it never
-                  affects this card's height the way the old inline
-                  low-stock text hint under the button used to (that
-                  variability was exactly what broke equal card heights
-                  in this grid). */}
+                  affects this card's height. Only the discount/Ausverkauft
+                  pill lives here now; the low-stock hint moved to a
+                  reserved-height text line below (see the min-h paragraph
+                  under the price) — plain conditional text here is what
+                  broke equal card heights in this grid before. */}
               {fullyOutOfStock ? (
                 <span className="absolute top-3 left-3 rounded-full bg-text-muted px-2.5 py-1 text-label font-bold text-bg-base">
                   Ausverkauft
                 </span>
               ) : (
-                (discount !== null || anyLowStock) && (
-                  <div className="absolute top-3 left-3 flex flex-col items-start gap-1">
-                    {discount !== null && (
-                      <span className="rounded-full bg-brand px-2.5 py-1 text-label font-bold text-text-primary">
-                        -{discount}%
-                      </span>
-                    )}
-                    {anyLowStock && (
-                      <span className="rounded-full bg-warning px-2.5 py-1 text-label font-bold text-text-on-dark">
-                        Nur noch wenige verfügbar
-                      </span>
-                    )}
-                  </div>
+                discount !== null && (
+                  <span className="absolute top-3 left-3 rounded-full bg-brand px-2.5 py-1 text-label font-bold text-text-primary">
+                    -{discount}%
+                  </span>
                 )
               )}
             </div>
@@ -198,6 +190,14 @@ export function RelatedProducts({ defaultTaxRate }: { defaultTaxRate: number })
                 <span className="font-bold text-h4 text-text-primary">{formatPrice(product.price)}</span>
                 <span className="text-label text-text-muted">inkl. {taxRate}% MwSt.</span>
               </p>
+              {/* Always rendered, text conditional — min-h reserves this
+                  line's height in both states so cards in the same row
+                  stay equal height regardless of low-stock status; this
+                  component has no h-full/flex-1 spacer trick like
+                  ProductGrid.tsx to absorb a variable-height line instead. */}
+              <p className="min-h-[1.05rem] text-label font-bold text-warning">
+                {anyLowStock ? "Nur noch wenige verfügbar" : null}
+              </p>
               <AddToCartInlineButton id={product.id} outOfStock={product.outOfStock} variants={product.variants} />
             </div>
           </div>