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/cart/components/CartContent.tsx

@@ -14,6 +14,7 @@ import { Reveal } from "../../components/Reveal";
 import { VersandModal } from "../../components/VersandModal";
 import { VatBreakdown } from "../../components/VatBreakdown";
 import { ArrowLeftIcon } from "../../components/ArrowLeftIcon";
+import { ProductName } from "../../components/ProductName";
 import { FreeShippingBanner } from "./FreeShippingBanner";
 import type { TrustBadge, ShippingSettings } from "../../lib/payload";
 
@@ -260,7 +261,7 @@ export function CartContent({
                         className="font-semibold text-h-small text-text-primary hover:text-brand transition-colors"
                         style={{ fontFamily: "var(--font-lora)" }}
                       >
-                        {product.name}
+                        <ProductName name={product.name} />
                         {entry.variant ? ` (${entry.variant})` : ""}
                       </Link>
                     ) : (
@@ -268,10 +269,11 @@ export function CartContent({
                         className="font-semibold text-h-small text-text-primary"
                         style={{ fontFamily: "var(--font-lora)" }}
                       >
-                        {product.name}
+                        <ProductName name={product.name} />
                         {entry.variant ? ` (${entry.variant})` : ""}
                       </p>
                     )}
+                    {product.subline && <p className="text-body-sm text-text-muted">{product.subline}</p>}
                     {/* Independent stacked rows, not grid siblings — no
                         equal-height pressure from neighboring lines, so a
                         plain conditional line is enough here. */}