Show product subline on cards/cart/PDP hero; brand-color trailing period

Follows Products.subline (docker/payload commit ad7156e). Cards and cart
line items showed nothing but the bare name — added the subline under it.
der-eine and todo-cards' hero taglines were hardcoded copy nearly
identical to this new field — switched both to read subline instead, so
future edits go through the CMS.

Also adds a shared ProductName component: every hand-written PDP headline
already styled a trailing "." in brand color, but the few places that
render product.name as plain text (cards, cart, the Payload-driven
tasse-die-pause hero) had silently lost that styling. Centralizes it so
it can't drift per call site again.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01J1Hu5bZ1kZUgKhab6yNwCt

app/components/ProductCard.tsx

@@ -5,6 +5,7 @@ import { formatPrice, discountPercent } from "../lib/format";
 import { effectiveTaxRate } from "../lib/cartTotals";
 import { AddToCartInlineButton } from "./AddToCartInlineButton";
 import { WishlistButton } from "./WishlistButton";
+import { ProductName } from "./ProductName";
 import type { Product } from "../lib/payload";
 
 // Single shared card markup for every product grid (ProductGrid,
@@ -108,13 +109,14 @@ export function ProductCard({
               className="font-semibold text-h4 text-text-primary w-full hover:text-brand transition-colors"
               style={{ fontFamily: "var(--font-lora)" }}
             >
-              {product.name}
+              <ProductName name={product.name} />
             </Link>
           ) : (
             <p className="font-semibold text-h4 text-text-primary w-full" style={{ fontFamily: "var(--font-lora)" }}>
-              {product.name}
+              <ProductName name={product.name} />
             </p>
           )}
+          {product.subline && <p className="text-body-sm text-text-muted">{product.subline}</p>}
         </div>
         <p className="flex items-baseline gap-1.5">
           {discount !== null && (

app/components/ProductName.tsx

@@ -0,0 +1,16 @@
+// Every hand-written PDP headline styles a trailing "." in brand color
+// (e.g. der-eine/Pricing.tsx's "Der Eine<span className="text-brand">.</span>"),
+// matching how every product's own Payload `name` is actually written
+// ("Der Eine.", "Die Pause.", "Einfach anfangen."). Anywhere `product.name`
+// is rendered as plain text instead (cards, cart line items, the one
+// Payload-driven PDP hero) silently lost that styling — this centralizes
+// the same trailing-period split so it can't drift per call site again.
+export function ProductName({ name }: { name: string }) {
+  if (!name.endsWith(".")) return <>{name}</>;
+  return (
+    <>
+      {name.slice(0, -1)}
+      <span className="text-brand">.</span>
+    </>
+  );
+}