From 207f33724b8e52ec509c6e5f8f43636c740fa17c Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Sat, 29 Aug 2026 23:12:42 +0000
Subject: [PATCH] ProductHero: match der-eine's gallery sizing, CTA label, icon
 color
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

der-eine is the reference the whole PDP block system is meant to look
like — three concrete deviations fixed:
- Gallery was full-bleed across the whole lg:col-span-7 column; der-eine
  caps it at max-w-[28rem], centered, vertically centered at lg: — same
  treatment now, same reasoning (der-eine's own Hero.tsx comment on why).
- Hero CTA was a generic "In den Warenkorb" instead of "${product.name}
  bestellen" like der-eine's/todo-cards' own buttons (the closing
  ProductPricingPanel button already said the generic label correctly —
  matches der-eine's own two-CTA pattern, hero named, pricing-panel
  generic).
- stepRow icons render brand-yellow (STEP_ICONS, shared with Pages.layout
  content pages that want that) instead of der-eine's black
  (Focus.tsx's #231f20). Recolored via a CSS descendant-selector override
  scoped to ProductBlocks.tsx's own stepRow case, not touching the shared
  icon set or PageBlocks.tsx.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013Eg6h91yngXmSnM51wxXM8
---
 app/components/ProductBlocks.tsx | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/app/components/ProductBlocks.tsx b/app/components/ProductBlocks.tsx
index 8c4860e..72841fe 100644
--- a/app/components/ProductBlocks.tsx
+++ b/app/components/ProductBlocks.tsx
@@ -141,6 +141,20 @@ function renderProductBlock(block: ProductBlock, ctx: ProductBlockContext): Reac
     // from there since both return their own JSX before calling this.
     case "crossSell":
       return null;
+    // Black, not brand-yellow — matching der-eine's own hand-coded Focus.tsx
+    // icons (#231f20 stroke), which this whole PDP system is meant to look
+    // like. STEP_ICONS' SVGs hardcode stroke="#f6a701" per-element (shared
+    // with Pages.layout's /lebensuhr, /3x3-system, /7-tage-klarheits-check,
+    // which DO want brand-yellow) — overriding via a CSS descendant
+    // selector here (SVG presentation attributes lose to any stylesheet
+    // rule) scopes the recolor to PDPs only, without touching the shared
+    // icon set or PageBlocks.tsx's own rendering.
+    case "stepRow":
+      return (
+        <div key={block.id} className="[&_svg_*]:!stroke-[#231f20]">
+          {renderPageBlockSync(block as PageBlock)}
+        </div>
+      );
     // A PDP-specific full-bleed treatment for this one block type only —
     // not editing the shared Quote.tsx/renderPageBlockSync, which would
     // also restyle every Pages.layout quote (e.g. /ueber-mich's).
@@ -262,7 +276,7 @@ function ProductHero({ product, shipping, taxRate, kleinunternehmer, body }: Pro
             </div>
 
             <AddToCartButton
-              label="In den Warenkorb"
+              label={`${product.name} bestellen`}
               className="w-full sm:w-auto inline-flex items-center justify-center px-8 py-[0.8125rem] rounded-sm bg-brand hover:bg-brand-hover active:scale-[0.97] transition-all font-bold text-body text-text-primary text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base"
               numericId={product.numericId}
               outOfStock={fullyOutOfStock}
@@ -273,8 +287,15 @@ function ProductHero({ product, shipping, taxRate, kleinunternehmer, body }: Pro
           </div>
         </Reveal>
 
-        <Reveal className="order-2 lg:order-none lg:col-span-7" delay={0.15}>
-          <ProductGallery image={product.image} gallery={product.gallery} alt={product.name} badge={<ProductBadge product={product} />} />
+        {/* max-w-[28rem] + centered, not a full-bleed col-span-7 image —
+            matches der-eine's own Hero.tsx exactly (that file's own
+            comment: capping display width keeps a modest source photo
+            from blowing up). This system is meant to look like der-eine,
+            not the other way round. */}
+        <Reveal className="order-2 lg:order-none lg:col-span-7 flex lg:items-center px-[var(--layout-padding-x)] lg:px-0" delay={0.15}>
+          <div className="w-full max-w-[28rem] mx-auto lg:mx-0">
+            <ProductGallery image={product.image} gallery={product.gallery} alt={product.name} badge={<ProductBadge product={product} />} />
+          </div>
         </Reveal>
       </div>
     </section>