Rebrand store as Pulse with athletic theme and shared typography

- Pulse theme tokens in app.schema.json: Archivo Black headings (weight 400)
  + Inter body, white bg / black pill buttons, xl radius, AI-generated
  athletic imagery
- Add headerFontWeight theme prop so single-weight fonts (Archivo Black)
  load and render correctly; ThemeProvider applies font-family + weight
  inline so Typography works regardless of `as` element
- New shared Heading component (tagline / title / subtitle with size +
  align + tone variants) and Typography caption variant for taglines;
  refactor features, faq, cta, testimonials, products-carousel,
  products-grid, collection-grid, recommended-products, image-gallery,
  newsletter-cta to use them
- Hero accepts a `buttons` array (label / href / variant) replacing
  primaryCta/secondaryCta; cover-image component removed and existing
  cover blocks migrated to Hero blocks with `buttons: []`
- Newsletter CTA uses shadcn Button + Input so it inherits theme radius;
  stacked layout fixed to keep the image
- Product/collection card titles use Typography subtitle variants
  (font-body), heading font weight is theme-controlled
- Remove orphan commerce/shop-header.tsx and commerce/shop-footer.tsx;
  the editor-driven navigation/footer are the live chrome

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

components/Typography.tsx

@@ -15,17 +15,17 @@ export type TypographyVariant =
   | "caption";
 
 const sizeClasses: Record<TypographyVariant, string> = {
-  h1: "text-5xl md:text-6xl lg:text-7xl font-semibold tracking-tight leading-[1.05]",
-  h2: "text-4xl md:text-5xl font-semibold tracking-tight leading-[1.1]",
-  h3: "text-3xl md:text-4xl font-semibold tracking-tight leading-tight",
-  h4: "text-2xl md:text-3xl font-semibold tracking-tight leading-snug",
-  h5: "text-xl md:text-2xl font-semibold leading-snug",
-  h6: "text-lg md:text-xl font-semibold leading-snug",
+  h1: "text-5xl md:text-6xl lg:text-7xl tracking-tight leading-[1.05]",
+  h2: "text-4xl md:text-5xl tracking-tight leading-[1.1]",
+  h3: "text-3xl md:text-4xl tracking-tight leading-tight",
+  h4: "text-2xl md:text-3xl tracking-tight leading-snug",
+  h5: "text-xl md:text-2xl leading-snug",
+  h6: "text-lg md:text-xl leading-snug",
   subtitle1: "text-lg md:text-xl leading-relaxed text-muted-foreground",
   subtitle2: "text-base md:text-lg leading-relaxed text-muted-foreground",
   body1: "text-lg leading-relaxed",
   body2: "text-base leading-relaxed",
-  caption: "text-sm leading-relaxed text-muted-foreground",
+  caption: "text-xs font-bold uppercase tracking-[0.2em] text-muted-foreground",
 };
 
 // Inline-style fallbacks so headings size correctly even when Tailwind
@@ -33,17 +33,17 @@ const sizeClasses: Record<TypographyVariant, string> = {
 // hasn't compiled utility classes yet. The Tailwind classes above still
 // apply on top once available (responsive breakpoints, leading, etc.).
 const sizeStyles: Record<TypographyVariant, React.CSSProperties> = {
-  h1: { fontSize: "clamp(2.5rem, 6vw, 4.5rem)", lineHeight: 1.05, fontWeight: 600, letterSpacing: "-0.02em" },
-  h2: { fontSize: "clamp(2rem, 4vw, 3rem)",     lineHeight: 1.1,  fontWeight: 600, letterSpacing: "-0.02em" },
-  h3: { fontSize: "clamp(1.75rem, 3.5vw, 2.25rem)", lineHeight: 1.15, fontWeight: 600, letterSpacing: "-0.015em" },
-  h4: { fontSize: "clamp(1.5rem, 3vw, 1.875rem)",   lineHeight: 1.2,  fontWeight: 600, letterSpacing: "-0.01em" },
-  h5: { fontSize: "1.5rem",   lineHeight: 1.25, fontWeight: 600 },
-  h6: { fontSize: "1.25rem",  lineHeight: 1.3,  fontWeight: 600 },
+  h1: { fontSize: "clamp(2.5rem, 6vw, 4.5rem)", lineHeight: 1.05, letterSpacing: "-0.02em" },
+  h2: { fontSize: "clamp(2rem, 4vw, 3rem)",     lineHeight: 1.1,  letterSpacing: "-0.02em" },
+  h3: { fontSize: "clamp(1.75rem, 3.5vw, 2.25rem)", lineHeight: 1.15, letterSpacing: "-0.015em" },
+  h4: { fontSize: "clamp(1.5rem, 3vw, 1.875rem)",   lineHeight: 1.2,  letterSpacing: "-0.01em" },
+  h5: { fontSize: "1.5rem",   lineHeight: 1.25 },
+  h6: { fontSize: "1.25rem",  lineHeight: 1.3 },
   subtitle1: { fontSize: "1.125rem", lineHeight: 1.6 },
   subtitle2: { fontSize: "1rem",     lineHeight: 1.6 },
   body1: { fontSize: "1.125rem", lineHeight: 1.6 },
   body2: { fontSize: "1rem",     lineHeight: 1.6 },
-  caption: { fontSize: "0.875rem", lineHeight: 1.5 },
+  caption: { fontSize: "0.75rem", lineHeight: 1.5, fontWeight: 700, letterSpacing: "0.2em", textTransform: "uppercase" },
 };
 
 const defaultTag: Record<TypographyVariant, keyof JSX.IntrinsicElements> = {
@@ -80,11 +80,22 @@ export function Typography<C extends keyof JSX.IntrinsicElements = "p">({
   const isHeading = variant.startsWith("h");
   const fontClass = isHeading ? "font-heading" : "font-body";
 
+  // Apply the heading font + weight inline so the styling holds even when
+  // the rendered element isn't h1–h6 (e.g. <span> via the `as` prop). The
+  // ThemeProvider's element-scoped CSS rule only matches real h-tags, and
+  // the `font-heading` Tailwind utility can't be relied on in CDN mode.
+  const fontStyles: React.CSSProperties = isHeading
+    ? {
+        fontFamily: "var(--font-header), system-ui, sans-serif",
+        fontWeight: "var(--font-weight-header, 600)",
+      }
+    : {};
+
   return React.createElement(
     Tag,
     {
       className: cn(fontClass, sizeClasses[variant], className),
-      style: { ...sizeStyles[variant], ...style },
+      style: { ...fontStyles, ...sizeStyles[variant], ...style },
       ...rest,
     },
     children,