@tokenoftrust/storefront-runner 0.1.0

package/apps/storefront/src/pages/style-guide/[tenant]/[theme].astro

@@ -0,0 +1,646 @@
+---
+/**
+ * Preview/dev-only STANDALONE THEME STYLE GUIDE —
+ * `/_style-guide/<tenant>/<theme-id>/`.
+ *
+ * Independently viewable reference for ONE theme: links that theme's stylesheet
+ * and renders its tokens (color/type/space/shape) plus live component samples
+ * (buttons, eyebrow, proof strip, footer, card) using the theme's real classes.
+ * noindex, never in the sitemap, never production marketing publishing. It does
+ * NOT reskin the live marketing pages — it only previews the theme in isolation.
+ */
+// Commerce + chrome component library preview. global.css brings the Tailwind
+// utilities + reference theme-token fallbacks so the (token-styled) components
+// render here without the app Layout. The `.sg-commerce` wrapper pins the
+// reference palette so they look coherent regardless of the marketing theme CSS.
+import "@/styles/global.css";
+import PriceDisplay from "@/components/commerce/PriceDisplay.astro";
+import RatingStars from "@/components/commerce/RatingStars.astro";
+import Badge from "@/components/Badge.astro";
+import ProductCard from "@/components/ProductCard.astro";
+import ProductCarousel from "@/components/commerce/ProductCarousel.astro";
+import ProductGrid from "@/components/commerce/ProductGrid.astro";
+import AnnouncementBar from "@/components/chrome/AnnouncementBar.astro";
+import UtilityNav from "@/components/chrome/UtilityNav.astro";
+import SiteHeader from "@/components/chrome/SiteHeader.astro";
+import MegaMenu from "@/components/chrome/MegaMenu.astro";
+import SiteFooter from "@/components/chrome/SiteFooter.astro";
+import { sampleProducts, sampleRatings } from "@/lib/fixtures/sampleProducts";
+import type { ChromeNavItem } from "@/lib/chrome/model";
+
+const { tenant, theme } = Astro.params;
+const cspNonce = Astro.locals.cspNonce;
+
+// --- Sample chrome data (preview-only; no live tenant content) ----------------
+const sampleNav: ChromeNavItem[] = [
+  { label: "New", href: "#", flag: true, badge: "NEW" },
+  {
+    label: "Shop",
+    href: "#",
+    columns: [
+      { title: "Category", links: [{ label: "Disposables", href: "#" }, { label: "E-Liquid", href: "#" }, { label: "Devices", href: "#" }] },
+      { title: "Featured", links: [{ label: "Best Sellers", href: "#" }, { label: "On Sale", href: "#", badge: "%" }] },
+      { title: "Brands", links: [{ label: "Northwind", href: "#" }, { label: "Summit Co.", href: "#" }] },
+    ],
+  },
+  { label: "Coils & Parts", href: "#", children: [{ label: "Coils", href: "#" }, { label: "Pods", href: "#" }, { label: "Batteries", href: "#" }] },
+  { label: "On Sale", href: "#" },
+];
+const sampleSocial = [
+  { label: "X", href: "#", iconPath: "M18.9 2H22l-7.1 8.1L23 22h-6.6l-5-6.6L5.7 22H2.6l7.6-8.7L1.5 2h6.8l4.5 6 5.1-6z" },
+];
+const sampleFooterCols = [
+  { title: "Shop", links: [{ label: "Disposables", href: "#" }, { label: "E-Liquid", href: "#" }, { label: "Devices", href: "#" }] },
+  { title: "Support", links: [{ label: "Contact", href: "#" }, { label: "Shipping", href: "#" }, { label: "Returns", href: "#" }] },
+  { title: "Company", links: [{ label: "About", href: "#" }, { label: "Blog", href: "#" }] },
+];
+
+// Colocated repo-root layout: from src/pages/style-guide/[tenant]/ the repo
+// root is six levels up.
+const themeModules = import.meta.glob<Record<string, any>>(
+  "../../../../../../tenants/*/content/themes/*.json",
+  { eager: true, import: "default" },
+);
+const seg = `/tenants/${tenant}/content/themes/`;
+const t = Object.entries(themeModules)
+  .filter(([path]) => path.includes(seg))
+  .map(([, mod]) => mod)
+  .find((m) => m.id === theme);
+
+if (!t) return new Response(null, { status: 404 });
+
+const tk = t.tokens ?? {};
+const storyboard = t.storyboard ?? null;
+
+// Reference component tokens (the "Northwind" pilot identity from
+// src/themes/reference.ts). Used only as the FALLBACK when a theme descriptor
+// declares no preview.componentVars — never to pin the guide to a fixed palette.
+const REFERENCE_COMPONENT_VARS: Record<string, string> = {
+  "--color-bg": "#f4f1ea", "--color-surface": "#fcfaf5", "--color-text": "#1c2624",
+  "--color-muted": "#5c6663", "--color-primary": "#1f3a34", "--color-primary-contrast": "#f4f1ea",
+  "--color-accent": "#b5612f", "--color-border": "#dcd6c9", "--color-success": "#3f6b4f",
+  "--color-sale": "#9e3b2e",
+  "--radius-sm": "3px", "--radius-md": "6px", "--radius-lg": "12px", "--radius-full": "999px",
+  "--shadow-sm": "0 1px 2px rgba(28,38,36,.06)", "--shadow-md": "0 6px 24px -8px rgba(28,38,36,.14)",
+  "--shadow-lg": "0 24px 60px -20px rgba(28,38,36,.22)", "--container-max": "1240px",
+};
+
+// The reskin mechanism: emit the SELECTED theme's component tokens onto the
+// preview root so the token-styled commerce/chrome components (and the page-
+// section samples) render under THIS theme, not a fixed reference palette.
+// Descriptors override the reference subset via preview.componentVars.
+const componentVars: Record<string, string> = {
+  ...REFERENCE_COMPONENT_VARS,
+  ...((t.preview?.componentVars ?? {}) as Record<string, string>),
+};
+const componentVarsInline = Object.entries(componentVars)
+  .map(([k, v]) => `${k}:${v}`)
+  .join(";");
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex, nofollow" />
+    <link rel="icon" type="image/png" href={`/tenants/${tenant}/favicon.png`} />
+    <title>{t.name} — style guide (preview)</title>
+    {/* The tenant's OWN CSS (external, CSP-clean 'self'): the theme token/base
+        layer under review PLUS the shared marketing composition layer (mkt.css).
+        Linked for every tenant so the tenant's component classes render in-brand
+        and the preview visibly re-skins with the theme. */}
+    <link rel="stylesheet" href={t.stylesheet} />
+    <link rel="stylesheet" href={`/tenants/${tenant}/pages/mkt.css`} />
+    {/* Guide-only chrome; distinct .sg-* names so it never collides with the theme. */}
+    <style nonce={cspNonce}>
+      .sg-bar { position: sticky; top: 0; z-index: 200; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: #0f1729; color: #e6edf6; padding: 12px 20px; font: 600 .95rem -apple-system, sans-serif; }
+      .sg-bar a { color: #bfe0ff; display: inline-flex; align-items: center; min-height: 44px; }
+      .sg-bar .flag { font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; background: #f59e0b; color: #221600; font-weight: 800; padding: 4px 8px; border-radius: 5px; }
+      .sg-bar .role { font-size: .875rem; text-transform: uppercase; letter-spacing: .08em; background: #0e9f8e; color: #00201b; font-weight: 800; padding: 4px 8px; border-radius: 999px; }
+      .sg-bar .status { margin-left: auto; font-family: ui-monospace, Menlo, monospace; font-size: .875rem; color: #cdd8e8; }
+      /* Guide-chrome tokens fall back to a neutral palette so the frame renders
+         under ANY tenant theme (the linked theme CSS may not define these vars). */
+      .sg-h { font: 800 .9rem/1.3 -apple-system, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-ink, #0b6360); margin: 0 0 14px; }
+      .sg-block { padding: 40px 0; border-top: 1px solid var(--line, #e2e2e2); }
+      .sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
+      .sg-sw { border: 1px solid var(--line, #e2e2e2); border-radius: 12px; overflow: hidden; background: var(--card, #fff); }
+      .sg-sw .chip { height: 62px; }
+      .sg-sw .meta { padding: 10px 12px; font-size: .9rem; }
+      .sg-sw .meta b { display: block; font-size: .95rem; }
+      .sg-sw .meta code { color: var(--muted, #5c6663); font-family: ui-monospace, Menlo, monospace; font-size: .875rem; }
+      .sg-sw .meta .role { color: var(--muted, #5c6663); display: block; margin-top: 4px; }
+      .sg-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
+      .sg-space { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
+      .sg-space .bar { background: var(--teal-ink, #0b6360); border-radius: 4px 4px 0 0; }
+      .sg-space .lab { font-size: .875rem; color: var(--muted, #5c6663); text-align: center; margin-top: 6px; font-family: ui-monospace, Menlo, monospace; }
+      .sg-shape { display: flex; gap: 18px; flex-wrap: wrap; }
+      .sg-shape .box { width: 120px; height: 84px; background: var(--card, #fff); display: grid; place-items: center; font-size: .875rem; color: var(--muted, #5c6663); }
+      .sg-card { max-width: 320px; background: var(--card, #fff); border: 1px solid var(--line, #e2e2e2); border-radius: var(--r, 12px); box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.08)); padding: 22px; }
+
+      /* Storyboard / inspiration header — "the storyboard opens the guide"
+         (playbook/site-migration/style-concept.md). Rendered per style concept
+         when the descriptor carries t.storyboard. */
+      .sg-story { background: #101b30; color: #e6edf6; padding: 24px 20px 28px; }
+      .sg-story .inner { max-width: 1080px; margin: 0 auto; }
+      .sg-story h2 { font: 800 .78rem/1.2 -apple-system, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #7fe3d4; margin: 0 0 8px; }
+      .sg-story p.summary { margin: 0 0 18px; max-width: 76ch; color: #c6d2e4; font-size: .96rem; }
+      .sg-story .insp { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
+      .sg-story .insp .card { background: #16223c; border: 1px solid #26365a; border-radius: 12px; padding: 14px 16px; }
+      .sg-story .insp .role { display: inline-block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: #0a1a12; background: #7fe3d4; padding: 3px 8px; border-radius: 999px; margin-bottom: 8px; }
+      .sg-story .insp .slug { font-family: ui-monospace, Menlo, monospace; font-size: .82rem; color: #9fb0c8; margin-bottom: 8px; }
+      .sg-story .insp ul { margin: 0; padding-left: 16px; }
+      .sg-story .insp li { font-size: .84rem; color: #c6d2e4; margin-bottom: 3px; }
+
+      /* Page-section samples — a representative slice of the storefront rethemed:
+         hero, promo-card row, category tiles. Token-styled (no per-tenant CSS) so
+         they re-skin from the emitted component vars. */
+      .sg-hero { display: grid; gap: 24px; grid-template-columns: 1.15fr .85fr; align-items: stretch; }
+      .sg-hero .copy { background: var(--color-primary); color: var(--color-primary-contrast); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; }
+      .sg-hero .copy .kick { font: 800 .72rem/1 -apple-system, sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .82; }
+      .sg-hero .copy h3 { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.08; margin: 12px 0 10px; color: inherit; }
+      .sg-hero .copy p { color: inherit; opacity: .9; margin: 0 0 20px; max-width: 40ch; }
+      .sg-hero .promo { border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); display: flex; align-items: flex-end; min-height: 220px; padding: 22px; color: var(--color-text); box-shadow: var(--shadow-md); }
+      .sg-btn { display: inline-flex; align-items: center; gap: .5em; align-self: flex-start; min-height: 44px; padding: .7em 1.5em; border-radius: var(--radius-full); font-weight: 700; background: var(--color-accent); color: #fff; border: 2px solid transparent; }
+      .sg-btn.ghost { background: transparent; color: inherit; border-color: currentColor; }
+      .sg-promos { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
+      .sg-promo { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); }
+      .sg-promo .tag { display: inline-block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: #fff; background: var(--color-sale); padding: 3px 8px; border-radius: 999px; margin-bottom: 10px; }
+      .sg-promo h4 { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 6px; color: var(--color-text); }
+      .sg-promo p { margin: 0; color: var(--color-muted); font-size: .9rem; }
+      .sg-tiles { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); }
+      .sg-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 132px; text-align: center; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(135deg, var(--color-primary), var(--color-primary) 60%, color-mix(in srgb, var(--color-primary) 70%, #000)); padding: 18px; }
+      .sg-tile .ico { width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,.16); display: grid; place-items: center; font-size: 1.1rem; }
+      .sg-tile span { font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
+      @media (max-width: 900px) { .sg-hero { grid-template-columns: 1fr; } .sg-promos { grid-template-columns: 1fr; } .sg-tiles { grid-template-columns: 1fr 1fr; } }
+
+      /* Commerce + chrome component library scope. The theme's component tokens
+         are supplied at runtime via an inline style attr (componentVarsInline)
+         from the SELECTED theme descriptor — so the standard components re-skin
+         with the theme. Swap the theme, and every sample below re-skins; the
+         components never fork. */
+      .sg-commerce {
+        background: var(--color-bg); color: var(--color-text);
+        max-width: 1240px; margin: 40px auto; padding: 0 20px 60px;
+      }
+      .sg-commerce .sg-h { color: var(--color-primary); }
+      .sg-commerce .sg-block { border-top-color: var(--color-border); }
+    </style>
+  </head>
+  <body>
+    <header class="sg-bar">
+      <span class="flag">Preview</span>
+      <span class="role">{t.role}</span>
+      <b>{t.name}</b>
+      <span class="status">{t.status} · concept {t.concept?.id}@{t.concept?.version}</span>
+      <a href={`/_style-guide/${tenant}/`} style="margin-left:auto">← all guides</a>
+    </header>
+
+    {storyboard && (
+      <section class="sg-story">
+        <div class="inner">
+          <h2>Storyboard · where this look comes from</h2>
+          {storyboard.summary && <p class="summary">{storyboard.summary}</p>}
+          {Array.isArray(storyboard.inspirationPages) && storyboard.inspirationPages.length > 0 && (
+            <div class="insp">
+              {storyboard.inspirationPages.map((p: any) => (
+                <div class="card">
+                  {p.role && <span class="role">{p.role}</span>}
+                  {p.slug && <div class="slug">{p.slug}</div>}
+                  {Array.isArray(p.captures) && (
+                    <ul>{p.captures.slice(0, 5).map((c: string) => <li>{c}</li>)}</ul>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </section>
+    )}
+
+    <main>
+    <div class="container">
+      <section class="sg-block">
+        <p class="sg-h">Color tokens</p>
+        <div class="sg-swatches">
+          {(tk.color ?? []).map((c: any) => (
+            <div class="sg-sw">
+              <div class="chip" style={`background:${c.value}`}></div>
+              <div class="meta">
+                <b>{c.name}</b>
+                <code>{c.var} · {c.value}</code>
+                <span class="role">{c.role}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+        {tk.gradient && (
+          <div class="sg-sw" style="margin-top:14px;max-width:320px">
+            <div class="chip" style={`background:${tk.gradient.value}`}></div>
+            <div class="meta"><b>gradient</b><code>{tk.gradient.var}</code><span class="role">{tk.gradient.role}</span></div>
+          </div>
+        )}
+      </section>
+
+      {(tk.semantic ?? []).length > 0 && (
+        <section class="sg-block">
+          <p class="sg-h">Semantic tokens (v1.1)</p>
+          <div class="sg-swatches">
+            {(tk.semantic ?? []).map((c: any) => (
+              <div class="sg-sw">
+                <div class="chip" style={`background:${c.value}`}></div>
+                <div class="meta">
+                  <b>{c.name}</b>
+                  <code>{c.var} · {c.value}</code>
+                  <span class="role">{c.role}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
+      <section class="sg-block">
+        <p class="sg-h">Typography</p>
+        <h1>Heading one with a <span class="grad">gradient</span> accent</h1>
+        <h2>Heading two — section title</h2>
+        <p class="lede">Lede paragraph — the larger intro copy that sets up a section in muted tone.</p>
+        <p>Body copy. {tk.type?.sans}</p>
+        <p class="kicker">Kicker label</p>
+        <p class="support-line">Support line — warm emphasis (coral), AA on cream.</p>
+      </section>
+
+      <section class="sg-block">
+        <p class="sg-h">Buttons — CTA hierarchy & states</p>
+        <div class="cta-row" style="margin-bottom:16px">
+          <a class="btn btn-primary" href="#">Primary CTA</a>
+          <a class="btn btn-secondary" href="#">Secondary</a>
+          <a class="btn btn-tertiary" href="#">Tertiary / outline</a>
+        </div>
+        <div class="cta-row">
+          <button class="btn btn-primary" type="button">Default</button>
+          <button class="btn btn-primary" type="button" style="transform:translateY(-2px)">Hover</button>
+          <button class="btn btn-primary is-loading" type="button" aria-busy="true">Loading</button>
+          <button class="btn btn-primary" type="button" disabled>Disabled</button>
+        </div>
+        <p class="form-help" style="margin-top:12px">All targets ≥44px. Tab to any control to see the <code>:focus-visible</code> ring.</p>
+      </section>
+
+      <section class="sg-block">
+        <p class="sg-h">Accessible form</p>
+        <form action="#" style="max-width:420px">
+          <div class="form-field">
+            <label class="form-label" for="sg-email">Work email <span class="req" aria-hidden="true">*</span></label>
+            <input class="form-control" id="sg-email" type="email" required aria-describedby="sg-email-help" placeholder="you@company.com" />
+            <span class="form-help" id="sg-email-help">We only use this to send your demo link.</span>
+          </div>
+          <div class="form-field">
+            <label class="form-label" for="sg-co">Company <span class="opt">(optional)</span></label>
+            <input class="form-control" id="sg-co" type="text" placeholder="Acme Co." />
+          </div>
+          <div class="form-field">
+            <label class="form-label" for="sg-err">Invalid example</label>
+            <input class="form-control is-error" id="sg-err" type="text" aria-invalid="true" aria-describedby="sg-err-msg" value="not-an-email" />
+            <span class="field-error" id="sg-err-msg">Enter a valid email address.</span>
+          </div>
+          <span class="field-success">Looks good — success state.</span>
+        </form>
+      </section>
+
+      <section class="sg-block">
+        <p class="sg-h">Trust & social proof <span class="opt" style="text-transform:none;letter-spacing:0">(placeholder — source before use)</span></p>
+        <div class="sg-row" style="margin-bottom:16px;flex-wrap:wrap;gap:14px">
+          <span class="rating"><span class="stars" aria-hidden="true">★★★★★</span> <span>4.9 / 5 — needs-review</span></span>
+          <span class="trust-badge">🔒 Security / compliance badge — needs-review</span>
+          <span class="reassurance">✓ Guarantee / risk-free reassurance — needs-review</span>
+        </div>
+        <div class="testimonial" style="max-width:520px;margin-bottom:16px">
+          <blockquote class="quote">“Testimonial / customer quote placeholder — do not ship until sourced.”</blockquote>
+          <p class="cite">— Role, Company · <b class="opt">needs-review</b></p>
+        </div>
+        <p class="form-help" style="margin-bottom:8px">Logo strip — "as seen in" / customer &amp; partner logos (placeholder):</p>
+        <div class="logo-strip">
+          <span class="logo">LOGO</span><span class="logo">LOGO</span><span class="logo">LOGO</span><span class="logo">LOGO</span>
+        </div>
+      </section>
+
+      <section class="sg-block">
+        <p class="sg-h">Components</p>
+        <div class="sg-row" style="margin-bottom:20px">
+          <span class="eyebrow"><span class="dot"></span> Eyebrow / status chip</span>
+        </div>
+        <div class="sg-card">
+          <p class="kicker">Card</p>
+          <h2 style="font-size:1.15rem">Card surface</h2>
+          <p class="lede" style="font-size:.95rem">Uses <code>--surface-card</code>, <code>--r</code>, <code>--shadow</code>.</p>
+        </div>
+      </section>
+
+      <section class="sg-block">
+        <p class="sg-h">Proof strip</p>
+      </section>
+    </div>
+
+    <div class="proof">
+      <div class="container">
+        <span><b>200+</b> countries</span><span class="sep">·</span>
+        <span>GDPR · CCPA · PIPEDA</span><span class="sep">·</span>
+        <span><b>256-bit</b> SSL</span>
+      </div>
+    </div>
+
+    <div class="container">
+      <section class="sg-block">
+        <p class="sg-h">Spacing scale</p>
+        <div class="sg-space">
+          {(tk.space ?? []).map((s: any) => (
+            <div>
+              <div class="bar" style={`width:${s.value};height:${s.value}`}></div>
+              <div class="lab">{s.name}<br />{s.value}</div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section class="sg-block">
+        <p class="sg-h">Shape</p>
+        <div class="sg-shape">
+          {(tk.shape ?? []).map((s: any) => (
+            <div class="box" style={`border:1px solid var(--line);border-radius:${(s.var === '--r' || s.var === '--r-sm') ? s.value : '12px'};box-shadow:${s.name.includes('shadow') ? s.value : 'none'}`}>
+              {s.name}
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* ── Marketing page components (mkt.css) ──────────────────────────
+          The shared composition palette every ported marketing page draws
+          from. Keep this in sync with mkt.css: when a port harvests a new
+          reusable pattern into mkt.css, add a sample here (see
+          playbook/site-migration/style-concept.md §Harvesting components). */}
+      {theme === "tot-navy" && (
+        <>
+          <section class="sg-block">
+            <p class="sg-h">Marketing components — <code>mkt.css</code></p>
+            <p class="lede" style="font-size:.95rem">The reusable page-composition layer shared by every ported marketing page. One palette; refine here, and every page inherits it.</p>
+          </section>
+
+          <section class="sg-block">
+            <p class="sg-h">Breadcrumb — <code>.crumbs</code></p>
+            <nav class="crumbs" aria-label="Breadcrumb sample"><a href="#">Home</a><span class="sep">›</span><a href="#">Platform</a><span class="sep">›</span>This page</nav>
+          </section>
+
+          <section class="sg-block">
+            <p class="sg-h">Hero — <code>.hero</code> (centred)</p>
+            <div class="hero" style="padding:24px 0 0">
+              <span class="eyebrow"><span class="dot"></span> Section kicker</span>
+              <h1 style="margin-top:14px">Headline with a <span class="grad">gradient accent</span>.</h1>
+              <p class="lede">The lede sets up the page in one muted sentence.</p>
+              <div class="cta-row"><a class="btn btn-green" href="#">Primary</a><a class="btn btn-line" href="#">Secondary</a></div>
+            </div>
+          </section>
+
+          <section class="sg-block">
+            <p class="sg-h">Feature grid — <code>.feature-grid</code> / <code>.feat-card</code></p>
+            <div class="feature-grid three">
+              <article class="feat-card accent"><h3>Card with accent</h3><p>Top-accent variant for category cards.</p><a class="card-link" href="#">Explore &rarr;</a></article>
+              <article class="feat-card"><h3>Plain card</h3><p>Default surface card with hover lift.</p><a class="card-link" href="#">Explore &rarr;</a></article>
+              <article class="feat-card"><h3>Third card</h3><p>Grid collapses 3→2→1 responsively.</p><a class="card-link" href="#">Explore &rarr;</a></article>
+            </div>
+          </section>
+
+          <section class="sg-block">
+            <p class="sg-h">Media split — <code>.split</code> + <code>.check-list</code></p>
+            <div class="split">
+              <div class="split-copy">
+                <span class="kicker">Split section</span>
+                <h2>Copy beside a proof list</h2>
+                <p>Use for “what you get” sections: narrative on one side, a scannable check-list on the other.</p>
+                <a class="btn btn-navy" href="#">Learn more</a>
+              </div>
+              <ul class="check-list">
+                <li>International coverage in 200+ countries</li>
+                <li>Document + database verification</li>
+                <li>Sanction &amp; watchlist screening</li>
+              </ul>
+            </div>
+          </section>
+
+          <section class="sg-block">
+            <p class="sg-h">Steps — <code>.steps</code> (numbered how-it-works)</p>
+            <div class="steps three">
+              <div class="step"><span class="num">01</span><h3>Select</h3><p>Choose the verification level.</p></div>
+              <div class="step"><span class="num">02</span><h3>Integrate</h3><p>Embed the SDK or API.</p></div>
+              <div class="step"><span class="num">03</span><h3>Verify</h3><p>Customers clear in seconds.</p></div>
+            </div>
+          </section>
+
+          <section class="sg-block">
+            <p class="sg-h">Stat row — <code>.stat-row</code></p>
+            <div class="stat-row three">
+              <div class="stat"><b>200+</b><span>countries — needs-review</span></div>
+              <div class="stat"><b>&lt;30s</b><span>typical verification — needs-review</span></div>
+              <div class="stat"><b>24/7</b><span>compliance evidence</span></div>
+            </div>
+          </section>
+
+          <section class="sg-block">
+            <p class="sg-h">Reassurance row — <code>.reassure-row</code></p>
+            <div class="reassure-row">
+              <div class="reassurance">256-bit SSL encryption on every device.</div>
+              <div class="reassurance">We will <b>never</b> sell your data.</div>
+              <div class="reassurance">Compliant with GDPR &amp; global privacy laws.</div>
+            </div>
+          </section>
+
+          <section class="sg-block">
+            <p class="sg-h">FAQ — <code>.faq</code> (details/summary)</p>
+            <div class="faq">
+              <details open><summary>How does verification work?</summary><p>A concise, source-copied answer goes here.</p></details>
+              <details><summary>Which platforms are supported?</summary><p>Shopify, BigCommerce, WooCommerce, and more.</p></details>
+            </div>
+          </section>
+
+          <section class="sg-block">
+            <p class="sg-h">CTA band — <code>.cta-band</code></p>
+            <div class="cta-band">
+              <span class="kicker">Get started</span>
+              <h2>Build trust into every transaction</h2>
+              <p>Closing conversion band used at the foot of every marketing page.</p>
+              <div class="cta-row"><a class="btn btn-ent" href="#">Start For Free</a><a class="btn btn-line" href="#">Contact Sales</a></div>
+            </div>
+          </section>
+        </>
+      )}
+    </div>
+
+    {/* ── Commerce + chrome component library ─────────────────────────────
+        The reusable, tenant-agnostic ecommerce components (product cards +
+        merchandising sections) and site chrome. Rendered from hard-coded FIXTURE
+        products so this works with no live catalog. These are STANDARD components:
+        fidelity comes from theme tokens + variant props, never a per-tenant fork.
+        See playbook/site-migration/shared-chrome.md. */}
+    <div class="sg-commerce" style={componentVarsInline}>
+      <section class="sg-block">
+        <p class="sg-h">Page sections — the site rethemed</p>
+        <p class="lede" style="font-size:.95rem;color:var(--color-muted)">Representative storefront sections rendered from theme tokens only. Swap the theme and this whole slice re-skins — hero, promos, category tiles, carousels, and chrome — with no per-tenant component fork.</p>
+        <div class="sg-hero" style="margin-top:18px">
+          <div class="copy">
+            <span class="kick">New this week</span>
+            <h3>The look, rethemed end to end.</h3>
+            <p>Hero, promos, and tiles inherit the selected theme's color, type, and shape tokens.</p>
+            <a class="sg-btn" href="#">Shop new arrivals →</a>
+          </div>
+          <div class="promo">
+            <div>
+              <span class="kick" style="color:var(--color-accent);font:800 .72rem/1 -apple-system,sans-serif;letter-spacing:.14em;text-transform:uppercase">Featured</span>
+              <h4 style="font-family:var(--font-display);font-size:1.25rem;margin:8px 0 4px">Right-rail promo tile</h4>
+              <p style="margin:0;color:var(--color-muted);font-size:.9rem">Two-up hero: banner + promo.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="sg-block">
+        <p class="sg-h">Promo cards</p>
+        <div class="sg-promos">
+          <div class="sg-promo"><span class="tag">Sale</span><h4>Clearance event</h4><p>Discount accent uses <code>--color-sale</code>.</p></div>
+          <div class="sg-promo"><span class="tag" style="background:var(--color-primary)">Compliant</span><h4>Texas-compliant picks</h4><p>Primary brand color on the badge.</p></div>
+          <div class="sg-promo"><span class="tag" style="background:var(--color-success)">In stock</span><h4>Ships today</h4><p>Availability accent from <code>--color-success</code>.</p></div>
+        </div>
+      </section>
+
+      <section class="sg-block">
+        <p class="sg-h">Category tiles</p>
+        <div class="sg-tiles">
+          <a class="sg-tile" href="#"><span class="ico" aria-hidden="true">◈</span><span>Disposables</span></a>
+          <a class="sg-tile" href="#"><span class="ico" aria-hidden="true">◇</span><span>E-Liquid</span></a>
+          <a class="sg-tile" href="#"><span class="ico" aria-hidden="true">▣</span><span>Devices</span></a>
+          <a class="sg-tile" href="#"><span class="ico" aria-hidden="true">◉</span><span>Coils &amp; Pods</span></a>
+        </div>
+      </section>
+
+      <section class="sg-block">
+        <p class="sg-h">Commerce atoms — PriceDisplay / Badge / RatingStars</p>
+        <div class="sg-row" style="gap:28px;align-items:flex-start">
+          <div>
+            <PriceDisplay amount={28} currency="USD" />
+            <PriceDisplay amount={64} compareAt={96} currency="USD" showBadge class="mt-2" />
+            <PriceDisplay amount={42} from currency="USD" class="mt-2" />
+          </div>
+          <div class="sg-row" style="gap:8px">
+            <Badge variant="new" label="New" />
+            <Badge variant="sale" label="-33%" />
+            <Badge variant="compliant" label="Compliant" />
+            <Badge variant="soldout" label="Sold out" />
+            <Badge variant="low-stock" label="Low stock" />
+          </div>
+          <div>
+            <RatingStars rating={4.5} count={128} />
+            <div class="mt-2"><RatingStars rating={3} count={12} /></div>
+            <div class="mt-2"><RatingStars rating={5} count={4} /></div>
+          </div>
+        </div>
+      </section>
+
+      <section class="sg-block">
+        <p class="sg-h">ProductCard — state permutations</p>
+        <div class="grid grid-cols-2 gap-5 lg:grid-cols-4">
+          {sampleProducts.map((p) => (
+            <ProductCard
+              product={p}
+              rating={sampleRatings[p.handle]?.rating}
+              reviewCount={sampleRatings[p.handle]?.count}
+            />
+          ))}
+        </div>
+      </section>
+
+      <section class="sg-block">
+        <p class="sg-h">ProductCarousel — horizontal scroll (fixtures)</p>
+        <ProductCarousel title="Best Sellers" eyebrow="Shop" products={sampleProducts} tone="surface" />
+      </section>
+
+      <section class="sg-block">
+        <p class="sg-h">ProductCarousel — tabbed (each tab its own source)</p>
+        <ProductCarousel
+          title="Featured"
+          tabs={[
+            { label: "New", products: sampleProducts.slice(0, 4) },
+            { label: "On Sale", products: sampleProducts.slice(1, 5) },
+            { label: "Best Sellers", products: sampleProducts.slice(2, 6) },
+          ]}
+        />
+      </section>
+
+      <section class="sg-block">
+        <p class="sg-h">ProductGrid — paginated-look grid (fixtures)</p>
+        <ProductGrid title="All Products" products={sampleProducts} columns={3} />
+      </section>
+
+      <section class="sg-block">
+        <p class="sg-h">Chrome — AnnouncementBar (static + marquee)</p>
+        <AnnouncementBar text="Free US shipping on orders over $100" variant="static" />
+        <div class="mt-3">
+          <AnnouncementBar text="Free US shipping on orders over $100!" variant="marquee" tone="sale" />
+        </div>
+      </section>
+
+      <section class="sg-block">
+        <p class="sg-h">Chrome — UtilityNav</p>
+        <UtilityNav
+          links={[{ label: "News", href: "#" }, { label: "About", href: "#" }, { label: "Contact", href: "#" }]}
+          locale="English"
+          currency="United States (USD $)"
+          social={sampleSocial}
+        />
+      </section>
+
+      <section class="sg-block">
+        <p class="sg-h">Chrome — SiteHeader (logo + search + account + cart link + nav)</p>
+        <SiteHeader
+          wordmark="Sample Store"
+          nav={sampleNav}
+          searchAction="/search"
+          accountHref="/account"
+          cartHref="/cart"
+          cartCount={2}
+          sticky={false}
+        />
+      </section>
+
+      <section class="sg-block">
+        <p class="sg-h">Chrome — MegaMenu / NavDropdown (multi-column + caret + NEW badge)</p>
+        <div style="background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:8px 16px">
+          <MegaMenu items={sampleNav} class="!block" />
+        </div>
+        <p class="form-help" style="margin-top:8px;color:var(--color-muted)">Hover/focus a caret item to reveal its dropdown (CSS-only).</p>
+      </section>
+
+      <section class="sg-block">
+        <p class="sg-h">Chrome — SiteFooter (columns + newsletter + payments + compliance)</p>
+        <SiteFooter
+          brand={{ wordmark: "Sample Store", contact: ["hello@example.com", "1 (800) 555-0100"] }}
+          columns={sampleFooterCols}
+          newsletter={{ title: "Join the community", body: "New arrivals and exclusive offers.", placeholder: "Email" }}
+          payments={["Visa", "Mastercard", "Amex", "Discover", "PayPal", "Apple Pay"]}
+          social={sampleSocial}
+          compliance="Must be 21+ to purchase. Products intended for adults of legal age only."
+          legal="© Sample Store. All rights reserved."
+        />
+      </section>
+    </div>
+    </main>
+
+    <footer class="site">
+      <div class="container">
+        <div class="foot-grid">
+          <div><b>{t.name}</b><p class="copyright">Footer chrome sample · theme preview only.</p></div>
+          <div><h3>Platform</h3><ul><li><a href="#">Identity Verification</a></li><li><a href="#">Age Assurance</a></li></ul></div>
+          <div><h3>Industries</h3><ul><li><a href="#">Alcohol &amp; Tobacco</a></li><li><a href="#">Marketplaces</a></li></ul></div>
+          <div><h3>Company</h3><ul><li><a href="#">Pricing</a></li><li><a href="#">Contact Sales</a></li></ul></div>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>