Show product category as an eyebrow label on product cards

Same treatment as the blog cards' category line (Blog.tsx) — small
uppercase text-muted line above the product name, applied
consistently across all three card grids (shop, Merkliste, cart's
related products). Omitted entirely for an uncategorized product
rather than showing an empty line.

app/cart/components/RelatedProducts.tsx

@@ -177,12 +177,19 @@ export function RelatedProducts({ defaultTaxRate, kleinunternehmer }: { defaultT
               )}
             </div>
             <div className="flex flex-col gap-4 items-start px-5 pb-5 pt-2 w-full flex-1">
-              <p
-                className="font-semibold text-h4 text-text-primary w-full"
-                style={{ fontFamily: "var(--font-lora)" }}
-              >
-                {product.name}
-              </p>
+              <div className="flex flex-col gap-1 items-start w-full">
+                {/* Same eyebrow treatment as ProductGrid.tsx/Blog.tsx's
+                    category line — omitted for an uncategorized product. */}
+                {product.categories.length > 0 && (
+                  <p className="text-label font-semibold text-text-muted uppercase tracking-wide">{product.categories.join(", ")}</p>
+                )}
+                <p
+                  className="font-semibold text-h4 text-text-primary w-full"
+                  style={{ fontFamily: "var(--font-lora)" }}
+                >
+                  {product.name}
+                </p>
+              </div>
               <p className="flex items-baseline gap-1.5">
                 {discount !== null && (
                   <span className="text-label text-text-muted line-through">{formatPrice(product.compareAtPrice!)}</span>