From cc17311d031ad99434f34da1b216f4b99f80f1d0 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Sat, 1 Aug 2026 08:36:53 +0000
Subject: [PATCH] Show product category as an eyebrow label on product cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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       | 19 ++++++++++++------
 .../merkliste/components/MerklisteGrid.tsx    | 13 +++++++++---
 app/shop/components/ProductGrid.tsx           | 20 +++++++++++++------
 3 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/app/cart/components/RelatedProducts.tsx b/app/cart/components/RelatedProducts.tsx
index 517fbaf..39d72cb 100644
--- a/app/cart/components/RelatedProducts.tsx
+++ b/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>
diff --git a/app/konto/merkliste/components/MerklisteGrid.tsx b/app/konto/merkliste/components/MerklisteGrid.tsx
index 2df9a14..15f3003 100644
--- a/app/konto/merkliste/components/MerklisteGrid.tsx
+++ b/app/konto/merkliste/components/MerklisteGrid.tsx
@@ -76,9 +76,16 @@ export function MerklisteGrid({
               <WishlistButton productId={product.numericId} className="absolute top-3 right-3" />
             </div>
             <div className="flex flex-col gap-4 items-start px-5 pb-5 pt-4 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>
               <div className="flex flex-col gap-1 items-start">
                 <p className="flex items-baseline gap-1.5">
                   {discount !== null && (
diff --git a/app/shop/components/ProductGrid.tsx b/app/shop/components/ProductGrid.tsx
index 1aef969..cd71d78 100644
--- a/app/shop/components/ProductGrid.tsx
+++ b/app/shop/components/ProductGrid.tsx
@@ -166,12 +166,20 @@ export async function ProductGrid({
               )}
             </div>
             <div className="flex flex-col gap-4 items-start px-5 pb-5 pt-4 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 the blog cards' category line
+                    (Blog.tsx) — omitted entirely for an uncategorized
+                    product rather than showing an empty line. */}
+                {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>
               <div className="flex flex-col gap-1 items-start">
                 <p className="flex items-baseline gap-1.5">
                   {discount !== null && (