@tokenoftrust/storefront-runner 1.3.2

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

@@ -0,0 +1,1280 @@
+---
+/**
+ * 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 ReviewSummary from "@/components/commerce/ReviewSummary.astro";
+import ReviewList from "@/components/commerce/ReviewList.astro";
+import type { Review } from "@tot/public-runtime";
+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 BrandGrid from "@/components/commerce/BrandGrid.astro";
+import type { Brand } from "@/components/commerce/BrandGrid.astro";
+import ArticleCard from "@/components/commerce/ArticleCard.astro";
+import type { Article } from "@/components/commerce/ArticleCard.astro";
+import TagFilterCloud from "@/components/commerce/TagFilterCloud.astro";
+import type { TagItem } from "@/components/commerce/TagFilterCloud.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 NavDropdown from "@/components/chrome/NavDropdown.astro";
+import SiteFooter from "@/components/chrome/SiteFooter.astro";
+import NicotineWarning from "@/components/compliance/NicotineWarning.astro";
+import PactActNotice from "@/components/compliance/PactActNotice.astro";
+import AdultSignatureNotice from "@/components/compliance/AdultSignatureNotice.astro";
+import Prop65Warning from "@/components/compliance/Prop65Warning.astro";
+import PurchaseLimitNotice from "@/components/compliance/PurchaseLimitNotice.astro";
+import StateEligibilityNotice from "@/components/compliance/StateEligibilityNotice.astro";
+import ShippingRestrictionNotice from "@/components/compliance/ShippingRestrictionNotice.astro";
+import ExciseTaxNotice from "@/components/compliance/ExciseTaxNotice.astro";
+import TierCards from "@/components/membership/TierCards.astro";
+import TierComparisonTable from "@/components/membership/TierComparisonTable.astro";
+import HowItWorksSteps from "@/components/subscription/HowItWorksSteps.astro";
+import SavingsExplainer from "@/components/subscription/SavingsExplainer.astro";
+import ManageSubscriptionEntry from "@/components/subscription/ManageSubscriptionEntry.astro";
+import AgeGate from "@/components/islands/AgeGate.tsx";
+import VariantSelector from "@/components/islands/VariantSelector.tsx";
+import QuickView from "@/components/islands/QuickView.tsx";
+import SearchTypeahead from "@/components/islands/SearchTypeahead.tsx";
+import MobileNav from "@/components/islands/MobileNav.tsx";
+import RecentlyViewed from "@/components/islands/RecentlyViewed.tsx";
+import type { RVItem } from "@/components/islands/RecentlyViewed.tsx";
+import SavedList from "@/components/islands/SavedList.tsx";
+import FacetSidebar from "@/components/plp/FacetSidebar.astro";
+import ActiveFilters from "@/components/plp/ActiveFilters.astro";
+import SortSelect from "@/components/plp/SortSelect.astro";
+import Pagination from "@/components/plp/Pagination.astro";
+import Hero from "@/components/home/Hero.astro";
+import MarketingBlocks from "@/components/marketing/MarketingBlocks.astro";
+import { sampleProducts, sampleRatings } from "@/lib/fixtures/sampleProducts";
+import type { ChromeNavItem } from "@/lib/chrome/model";
+import type { Tier, ComparisonRow } from "@/lib/membership/model";
+import type { SubscriptionStep, SubscriptionManageEntry } from "@/lib/subscription/model";
+import type { Facet, ListProductsQuery } from "@tot/public-runtime";
+import type { HeroBlock, MarketingBlock } from "@/lib/storyblok/content-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: "#" }] },
+];
+// BrandGrid samples: text-wordmark tiles and logo-image tiles (Img renders
+// deterministic placeholders offline so the image code path is exercised
+// without live assets). Fictional sample brands only.
+const sampleBrandsText: Brand[] = [
+  { label: "Aurora Labs", href: "#" }, { label: "Five Rivers", href: "#" },
+  { label: "Coastal Air", href: "#" }, { label: "Twist Works", href: "#" },
+  { label: "Nightshade", href: "#" }, { label: "Orbit Vapor", href: "#" },
+  { label: "Peakline", href: "#" }, { label: "Vantage", href: "#" },
+];
+const sampleBrandsLogo: Brand[] = [
+  { label: "Northwind", href: "#", logoSrc: "#", logoWidth: 200, logoHeight: 100 },
+  { label: "Summit Co.", href: "#", logoSrc: "#", logoWidth: 200, logoHeight: 100 },
+  { label: "Cyclone", href: "#", logoSrc: "#", logoWidth: 200, logoHeight: 100 },
+  { label: "Pod King", href: "#", logoSrc: "#", logoWidth: 200, logoHeight: 100 },
+  { label: "Flavor Beast", href: "#", logoSrc: "#", logoWidth: 200, logoHeight: 100 },
+];
+// Review/UGC samples (P3 reviews-ugc-widgets): illustrative fixture reviews
+// ONLY, for previewing ReviewSummary/ReviewList token styling in isolation —
+// never sourced from or rendered on a live product page (see
+// docs/architecture/review-markup-policy.md; real callers pass tot.getReviews()
+// output, never fixtures like these).
+const sampleReviews: Review[] = [
+  { author: "J. Alvarez", rating: 5, title: "Exactly what I needed", body: "Smooth draw, great flavor, arrived fast. Will reorder.", date: "2026-06-02", verifiedBuyer: true },
+  { author: "Priya K.", rating: 4, body: "Good overall, battery life could be a bit longer.", date: "2026-05-18", verifiedBuyer: true },
+  { author: "T. Nguyen", rating: 3, title: "Decent, not amazing", body: "Does the job but nothing stands out versus similar devices.", date: "2026-04-30" },
+];
+// Blog/article samples (W4): featured-image cards (Img renders deterministic
+// placeholders offline so the image path is exercised) + one image-less card
+// (token-tinted placeholder band). Meta is illustrative example copy only.
+const sampleArticles: Article[] = [
+  {
+    title: "How to choose your first pod system",
+    href: "#",
+    excerpt: "A no-nonsense guide to airflow, coil resistance, and nicotine strength for newcomers.",
+    image: { src: "#", width: 640, height: 400 },
+    tag: "Guides",
+    tagHref: "#",
+    author: "Jordan Ellis",
+    date: "May 12, 2026",
+    dateTime: "2026-05-12",
+    readMinutes: 5,
+  },
+  {
+    title: "Salt nic vs. freebase: what actually changes",
+    href: "#",
+    excerpt: "The chemistry behind the two most common e-liquid formulations, minus the marketing.",
+    image: { src: "#", width: 640, height: 400 },
+    tag: "Explainers",
+    tagHref: "#",
+    author: "Priya N.",
+    date: "Apr 30, 2026",
+    dateTime: "2026-04-30",
+    readMinutes: 8,
+  },
+  {
+    title: "Store update: new brands landing this month",
+    href: "#",
+    excerpt: "A quick roundup of the labels joining the shelf, with links to each collection.",
+    tag: "News",
+    tagHref: "#",
+    date: "Apr 18, 2026",
+    dateTime: "2026-04-18",
+    readMinutes: 3,
+  },
+];
+const sampleTags: TagItem[] = [
+  { label: "Guides", href: "#", count: 12, active: true },
+  { label: "Explainers", href: "#", count: 8 },
+  { label: "News", href: "#", count: 21 },
+  { label: "Reviews", href: "#", count: 15 },
+  { label: "Compliance", href: "#", count: 4 },
+];
+
+// --- Sample membership tiers (preview-only; illustrative example figures) ------
+// The Guest/Member/Autopilot pattern. "Guest" asserts real:true (a genuine $0);
+// Member/Autopilot leave figures illustrative so the guide exercises BOTH the
+// illustrative affordance and the opt-out.
+const sampleTiers: Tier[] = [
+  {
+    name: "Guest",
+    tagline: "No account — shop as you go.",
+    figure: { value: "$0", caption: "always" },
+    real: true,
+    features: [
+      { label: "Full catalog access", included: true },
+      { label: "Standard shipping rates", included: true },
+      { label: "Member-only pricing", included: false },
+      { label: "Auto-reorder", included: false },
+    ],
+    cta: { label: "Keep browsing", href: "#" },
+  },
+  {
+    name: "Member",
+    tagline: "Free to join — unlock member pricing.",
+    figure: { value: "$19/mo", caption: "billed monthly" },
+    featured: true,
+    badge: "Most popular",
+    features: [
+      { label: "Everything in Guest", included: true },
+      { label: "Member-only pricing", included: true },
+      { label: "Free shipping over $50", included: true },
+      { label: "Early access to drops", included: true },
+    ],
+    cta: { label: "Learn about Member", href: "#" },
+  },
+  {
+    name: "Autopilot",
+    tagline: "Set it and forget it — recurring delivery.",
+    figure: { value: "Save 15%", caption: "vs. Member" },
+    features: [
+      { label: "Everything in Member", included: true },
+      { label: "Recurring delivery", included: true },
+      { label: "Best per-unit value", included: true },
+      { label: "Pause or cancel anytime", included: true },
+    ],
+    cta: { label: "How Autopilot works", href: "#" },
+  },
+];
+const sampleComparisonRows: ComparisonRow[] = [
+  { label: "Member-only pricing", cells: [false, true, true] },
+  { label: "Free shipping", cells: ["Over $75", "Over $50", true] },
+  { label: "Early access to drops", cells: [false, true, true] },
+  { label: "Recurring delivery", cells: [false, false, true] },
+  { label: "Per-order limit", cells: ["2 units", "5 units", "5 units"] },
+  { label: "Cancel anytime", cells: [null, true, true] },
+];
+
+// --- Sample subscription/Autopilot education content (preview-only) -----------
+const sampleSubscriptionSteps: SubscriptionStep[] = [
+  { title: "Choose your products", description: "Pick anything in the catalog to add to your Autopilot." },
+  { title: "Set your schedule", description: "Weekly, biweekly, or monthly — you choose the cadence." },
+  { title: "We ship on autopilot", description: "Your order goes out automatically, right on schedule." },
+  { title: "Pause or cancel anytime", description: "Manage every upcoming order from your account." },
+];
+const sampleManageEntries: SubscriptionManageEntry[] = [
+  { label: "Update delivery date", description: "Move your next order earlier or later.", href: "#" },
+  { label: "Swap products", description: "Change what ships next time.", href: "#" },
+  { label: "Pause or cancel", description: "Take a break or stop anytime, no fees.", href: "#" },
+];
+
+// --- Sample islands data (preview-only) ----------------------------------
+const sampleMobileNav = [
+  {
+    label: "Shop",
+    href: "#",
+    children: [{ label: "Disposables", href: "#" }, { label: "E-Liquid", href: "#" }],
+  },
+  { label: "Coils & Parts", href: "#" },
+  { label: "On Sale", href: "#" },
+];
+const sampleFromProduct = sampleProducts.find((p) => p.handle === "sample-from")!;
+const sampleRecentlyViewed: RVItem[] = [
+  { handle: "sample-sale", title: "Merino Zip Hoodie", price: 64, currency: "USD", vendor: "Northwind", seed: "sample-sale" },
+  { handle: "sample-compliant", title: "Age-Verified Reserve", price: 89, currency: "USD", vendor: "Cellar 21", seed: "sample-compliant" },
+  { handle: "sample-new", title: "Just-Dropped Utility Cap", price: 24, currency: "USD", vendor: "Northwind", seed: "sample-new" },
+];
+
+// --- Sample PLP facet/sort/pagination data (preview-only) -----------------
+const sampleFacets: Facet[] = [
+  { name: "Size", values: [{ value: "S", count: 8 }, { value: "M", count: 14 }, { value: "L", count: 6 }] },
+  { name: "tags", values: [{ value: "bestseller", count: 12 }, { value: "new", count: 5 }] },
+  { name: "availability", values: [{ value: "in-stock", count: 22 }, { value: "all", count: 28 }] },
+];
+const samplePlpQuery: ListProductsQuery = {
+  sort: "featured",
+  filters: { Size: ["M"], tags: ["bestseller"] },
+  availability: "in-stock",
+  page: 2,
+  pageSize: 12,
+};
+
+// --- Sample home Hero content (preview-only) -------------------------------
+const sampleHeroBlock: HeroBlock = {
+  component: "hero",
+  eyebrow: "New arrivals",
+  headline: "Gear built for",
+  headlineAccent: "every trail.",
+  subhead: "Hand-picked essentials, rethemed live from this theme's tokens.",
+  ctaLabel: "Shop new arrivals",
+  ctaHref: "#",
+};
+const sampleHeroFeatureProduct = {
+  ...sampleProducts[0]!,
+  images: [{ id: "hero-sample", url: "#", rehosted: false, position: 1, width: 1000, height: 1250 }],
+};
+// Hero reads its bold/light variant from Astro.locals.tenant (not a prop), so
+// the guide fakes locals right before each render to preview both.
+function setHeroVariant(variant: "bold" | "light") {
+  (Astro.locals as any).tenant = { theme_tokens: { brand: { heroVariant: variant } } };
+  return null;
+}
+
+// --- Sample marketing blocks (preview-only; one of each block type) -------
+const sampleMarketingBlocks: MarketingBlock[] = [
+  {
+    component: "marketing_hero",
+    eyebrow: "For builders",
+    headline: "Age & identity verification, done right.",
+    subhead: "Embed one SDK and ship compliant checkout in an afternoon.",
+    trust: ["200+ countries", "GDPR · CCPA · PIPEDA"],
+    ctas: [
+      { label: "Start for free", href: "#", variant: "primary" },
+      { label: "Talk to sales", href: "#", variant: "ghost" },
+    ],
+    panel: {
+      title: "verify.log",
+      lines: ["✓ document scan passed", "✓ liveness check passed", "✓ sanctions screen clear"],
+    },
+  },
+  { component: "trust_bar", items: ["200+ countries", "GDPR · CCPA · PIPEDA", "256-bit SSL", "SOC 2 Type II"] },
+  {
+    component: "split_compare",
+    eyebrow: "Why Token of Trust",
+    title: "One platform vs. a patchwork",
+    before: { title: "Patchwork", items: ["Three vendors to reconcile", "Inconsistent age checks", "Manual compliance review"] },
+    after: { title: "Token of Trust", items: ["One SDK, every jurisdiction", "Consistent age + identity checks", "Automated compliance evidence"] },
+  },
+  {
+    component: "steps",
+    eyebrow: "How it works",
+    title: "Live in three steps",
+    steps: [
+      { icon: "①", label: "Select", detail: "Choose the verification level." },
+      { icon: "②", label: "Integrate", detail: "Embed the SDK or API." },
+      { icon: "③", label: "Verify", detail: "Customers clear in seconds." },
+    ],
+  },
+  {
+    component: "card_grid",
+    eyebrow: "Platform",
+    title: "Built for regulated commerce",
+    variant: "capability",
+    cards: [
+      { icon: "◈", title: "Age verification", body: "Soft affirmation through hard identity checks." },
+      { icon: "◇", title: "Document + database", body: "Global coverage across ID types and registries." },
+      { icon: "▣", title: "Sanctions screening", body: "Real-time watchlist checks at checkout." },
+    ],
+  },
+  {
+    component: "integrations",
+    eyebrow: "Integrations",
+    title: "Drop into your stack",
+    platforms: [{ label: "Shopify" }, { label: "BigCommerce" }, { label: "WooCommerce" }, { label: "Custom API" }],
+    points: ["No PII touches your servers", "Webhook-driven status updates"],
+    code: {
+      language: "js",
+      caption: "Client-side embed",
+      code: "import { verify } from '@tot/sdk';\n\nawait verify({ minAge: 21 });",
+    },
+  },
+  {
+    component: "proof_strip",
+    eyebrow: "Trust",
+    title: "Built for compliance teams",
+    items: ["We will never sell your data", "Encrypted in transit and at rest"],
+  },
+  {
+    component: "testimonials",
+    eyebrow: "Customers",
+    quotes: [
+      { stat: "40%", quote: "Fewer failed age checks since switching to Token of Trust.", attribution: "VP Compliance, Northwind" },
+    ],
+  },
+  {
+    component: "faq",
+    title: "Frequently asked",
+    items: [
+      { q: "Which platforms are supported?", a: "Shopify, BigCommerce, WooCommerce, and more." },
+      { q: "How fast is verification?", a: "Most customers clear in under 30 seconds." },
+    ],
+  },
+  {
+    component: "cta_band",
+    title: "Build trust into every transaction",
+    subhead: "Start for free — no credit card required.",
+    ctas: [{ label: "Start for free", href: "#", variant: "primary" }],
+  },
+];
+
+// 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 });
+
+// Has this tenant adopted the canonical shared chrome (unit F3)? If so it no
+// longer ships its own mkt.css (retired at integration, I1/I2/I3) — link the
+// platform /shared/commerce-chrome.css instead so the marketing-component
+// samples below still render in-brand.
+const chromeModules = import.meta.glob<Record<string, any>>(
+  "../../../../../../tenants/*/content/chrome.json",
+  { eager: true, import: "default" },
+);
+const chromeSeg = `/tenants/${tenant}/content/chrome.json`;
+const chromeConfig = Object.entries(chromeModules).find(([path]) => path.includes(chromeSeg))?.[1];
+const usesSharedChrome = chromeConfig?.sharedChrome === true;
+
+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} />
+    {usesSharedChrome ? (
+      <link rel="stylesheet" href="/shared/commerce-chrome.css" />
+    ) : (
+      <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}/chrome/${t.id}/`} style="margin-left:auto">shared chrome →</a>
+      <a href={`/_style-guide/${tenant}/guide/${t.id}/`}>widget library guide →</a>
+      <a href={`/_style-guide/${tenant}/`}>← 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">ReviewSummary / ReviewList — reviews &amp; UGC (fixture data, see docs/architecture/review-markup-policy.md)</p>
+        <div class="mb-5">
+          <ReviewSummary average={4.3} count={sampleReviews.length} href="#" />
+        </div>
+        <ReviewList reviews={sampleReviews} />
+      </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">BrandGrid — text wordmarks (Shop by Brands)</p>
+        <BrandGrid
+          title="Shop by Brands"
+          eyebrow="Find your fav"
+          brands={sampleBrandsText}
+          viewAllHref="#"
+          tone="surface"
+        />
+      </section>
+
+      <section class="sg-block">
+        <p class="sg-h">BrandGrid — logo tiles (image path; placeholders offline)</p>
+        <BrandGrid title="Our Brands" brands={sampleBrandsLogo} />
+      </section>
+
+      <section class="sg-block">
+        <p class="sg-h">TagFilterCloud — blog/article tag filter (URL-addressable, zero-JS)</p>
+        <TagFilterCloud
+          title="Browse by topic"
+          tags={sampleTags}
+          allHref="#"
+          allActive={false}
+        />
+        <p class="form-help" style="margin-top:8px;color:var(--color-muted)">Active chip is filled + <code>aria-current</code>; each chip is a plain link so filtering works server-side.</p>
+      </section>
+
+      <section class="sg-block">
+        <p class="sg-h">ArticleCard — blog cards (featured image + excerpt + meta; last card image-less)</p>
+        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {sampleArticles.map((article) => <ArticleCard article={article} />)}
+        </div>
+      </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 — NavDropdown accordion (mobile mega parity, zero-JS)</p>
+        <div style="max-width:18rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:8px 12px">
+          <ul class="grid">
+            {sampleNav.map((item) => <NavDropdown item={item} mode="accordion" />)}
+          </ul>
+        </div>
+        <p class="form-help" style="margin-top:8px;color:var(--color-muted)">Same nav items in the mobile menu: mega columns become inline <code>&lt;details&gt;</code> accordions (keyboard + touch operable). Toggle a caret item to expand.</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>
+
+      {/* ── Compliance notice widgets (components/compliance/) ───────────────
+          Platform-owned, data-driven regulated-commerce notices. Each renders
+          ONLY from tenant.compliance data and NEVER fabricates legal copy —
+          here they are fed illustrative sample config so the guide exercises
+          every widget + variant under the theme. In production a tenant opts in
+          via its compliance block; absent data renders nothing. See decision
+          compliance-widgets-platform-owned. */}
+      <section class="sg-block">
+        <p class="sg-h">Compliance notices — <code>components/compliance/</code></p>
+        <p class="lede" style="font-size:.95rem;color:var(--color-muted)">Data-driven regulated-commerce notices with fixed/mandated legal wording. Rendered here from sample config; each is invisible when its tenant.compliance field is absent.</p>
+
+        <p class="form-help" style="margin:18px 0 8px">NicotineWarning — <code>data-compliance="nicotine-warning"</code> (FDA 21 CFR 1143.3, fixed)</p>
+        <NicotineWarning variant="bar" />
+        <div class="mt-3"><NicotineWarning variant="block" /></div>
+
+        <p class="form-help" style="margin:22px 0 8px">PactActNotice — <code>data-compliance="pact-act"</code> (bar / block / footer)</p>
+        <PactActNotice enabled minAge={21} variant="bar" />
+        <div class="mt-3"><PactActNotice enabled minAge={21} variant="block" /></div>
+        <div class="mt-3"><PactActNotice enabled minAge={21} variant="footer" /></div>
+
+        <p class="form-help" style="margin:22px 0 8px">AdultSignatureNotice — <code>data-compliance="adult-signature"</code> (inline / block)</p>
+        <AdultSignatureNotice enabled minAge={21} variant="inline" />
+        <div class="mt-3"><AdultSignatureNotice enabled minAge={21} variant="block" /></div>
+
+        <p class="form-help" style="margin:22px 0 8px">Prop65Warning — <code>data-compliance="prop65"</code> (short + long form, mandated skeleton)</p>
+        <Prop65Warning config={true} variant="block" />
+        <div class="mt-3">
+          <Prop65Warning
+            config={{ harm: "reproductive", chemicals: ["nicotine"] }}
+            variant="block"
+          />
+        </div>
+        <div class="mt-3"><Prop65Warning config={true} variant="bar" /></div>
+
+        <p class="form-help" style="margin:22px 0 8px">PurchaseLimitNotice — <code>data-compliance="purchase-limit"</code> (display only; enforcement is product-owned)</p>
+        <PurchaseLimitNotice
+          config={{ text: "2 units per order", reason: "per state law" }}
+          variant="inline"
+        />
+        <div class="mt-3">
+          <PurchaseLimitNotice
+            config={{ text: "6 bottles per order" }}
+            variant="block"
+          />
+        </div>
+
+        <p class="form-help" style="margin:22px 0 8px">StateEligibilityNotice — <code>data-compliance="state-eligibility"</code> (display only; the eligibility decision is product-owned)</p>
+        <StateEligibilityNotice
+          config={{ restrictedStates: ["UT", "AR", "VT"] }}
+          variant="block"
+        />
+        <div class="mt-3">
+          <StateEligibilityNotice
+            config={{ eligibleStates: ["CA", "TX", "FL", "NY"], note: "This product ships to select states only." }}
+            variant="bar"
+          />
+        </div>
+
+        <p class="form-help" style="margin:22px 0 8px">ShippingRestrictionNotice — <code>data-compliance="shipping-restriction"</code> (the platform footer band; display only)</p>
+        <ShippingRestrictionNotice
+          text="Adult signature (21+) required on delivery. Not shipped via USPS."
+          variant="footer"
+        />
+        <div class="mt-3">
+          <ShippingRestrictionNotice
+            text="No shipping to PO boxes for age-restricted products."
+            variant="block"
+          />
+        </div>
+
+        <p class="form-help" style="margin:22px 0 8px">ExciseTaxNotice — <code>data-compliance="excise-tax"</code> (display cue only; the tax calculation is product-owned)</p>
+        <ExciseTaxNotice
+          config={{ note: "Applicable state vapor excise taxes are calculated at checkout." }}
+          variant="inline"
+        />
+        <div class="mt-3">
+          <ExciseTaxNotice
+            config={{
+              note: "State excise taxes apply:",
+              jurisdictions: [
+                { label: "CA", detail: "$0.05/ml" },
+                { label: "NY", detail: "20% wholesale" },
+              ],
+            }}
+            variant="block"
+          />
+        </div>
+      </section>
+
+      {/* ── Membership / pricing tier widgets (components/membership/) ───────
+          Education-only tier comparison (Guest/Member/Autopilot). Presentational
+          — no pricing/checkout/subscription mechanics. Figures are ILLUSTRATIVE
+          by default: unless a tier asserts real:true the widget renders a
+          first-class "Illustrative figures" affordance (badge + "e.g." + note)
+          so an example number is never shown as a live offer (decision
+          compliance-widgets-platform-owned). Fed sample tiers here; a tenant
+          supplies its own on a membership page. */}
+      <section class="sg-block">
+        <p class="sg-h">Membership tiers — <code>components/membership/</code></p>
+        <p class="lede" style="font-size:.95rem;color:var(--color-muted)">Education-only tier comparison with a first-class illustrative-figures affordance. Guest shows a real $0; Member/Autopilot figures are illustrative examples, so the guide exercises both the affordance and the opt-out.</p>
+
+        <p class="form-help" style="margin:18px 0 8px">TierCards — <code>data-widget="tier-cards"</code> (illustrative badge + "e.g." + footnote; featured ribbon)</p>
+        <TierCards
+          eyebrow="Membership"
+          heading="Choose how you shop"
+          subhead="Compare guest checkout with our membership tiers."
+          tiers={sampleTiers}
+        />
+
+        <p class="form-help" style="margin:28px 0 8px">TierComparisonTable — <code>data-widget="tier-comparison-table"</code> (feature matrix; check/dash/text/em-dash cells)</p>
+        <TierComparisonTable
+          eyebrow="Compare"
+          heading="What each tier includes"
+          tiers={sampleTiers}
+          rows={sampleComparisonRows}
+        />
+      </section>
+
+      {/* ── Subscription/Autopilot education widgets (components/subscription/)
+          Education-only: explains the Autopilot concept and hands off to the
+          tenant's product-owned subscribe/manage flow — no scheduling,
+          billing, or cancellation mechanics of its own. The savings figure is
+          ILLUSTRATIVE by default (same affordance as membership tiers; decision
+          compliance-widgets-platform-owned). Fed sample content here; a tenant
+          supplies its own on an Autopilot/subscription page. */}
+      <section class="sg-block">
+        <p class="sg-h">Subscription/Autopilot education — <code>components/subscription/</code></p>
+        <p class="lede" style="font-size:.95rem;color:var(--color-muted)">Education-only widgets that explain recurring/Autopilot ordering and hand off to the tenant's own manage-subscription flow. No subscription, billing, or scheduling mechanics of their own.</p>
+
+        <p class="form-help" style="margin:18px 0 8px">HowItWorksSteps — <code>data-widget="subscription-how-it-works"</code></p>
+        <HowItWorksSteps
+          eyebrow="Autopilot"
+          heading="How Autopilot works"
+          subhead="Set it up once — we handle the rest."
+          steps={sampleSubscriptionSteps}
+        />
+
+        <p class="form-help" style="margin:28px 0 8px">SavingsExplainer — <code>data-widget="subscription-savings-explainer"</code> (illustrative badge + "e.g." + footnote)</p>
+        <SavingsExplainer
+          eyebrow="Autopilot savings"
+          heading="Save on every order"
+          figure={{ value: "Save 15%", caption: "vs. one-time purchase" }}
+          bullets={["Free shipping on every Autopilot order", "Best per-unit pricing", "Pause or cancel anytime"]}
+          cta={{ label: "How Autopilot works", href: "#" }}
+        />
+
+        <p class="form-help" style="margin:28px 0 8px">ManageSubscriptionEntry — <code>data-widget="subscription-manage-entry"</code></p>
+        <ManageSubscriptionEntry
+          eyebrow="Manage"
+          heading="Manage your Autopilot"
+          entries={sampleManageEntries}
+        />
+      </section>
+
+      {/* ── Interactive islands (components/islands/) ─────────────────────
+          Client-hydrated Preact islands. Each is tenant-agnostic and reads
+          only fixture/localStorage data here — no live catalog, cart, or ToT
+          calls (unit style-guide-full-coverage). */}
+      <section class="sg-block">
+        <p class="sg-h">Islands — <code>components/islands/</code></p>
+        <p class="lede" style="font-size:.95rem;color:var(--color-muted)">Client-hydrated Preact islands exercised with fixture data — no live catalog, cart, or ToT calls.</p>
+
+        <p class="form-help" style="margin:18px 0 8px">AgeGate — full-viewport 21+ affirmation (real overlay; dismiss it once to keep browsing the guide, same as a real visitor)</p>
+        <AgeGate client:load minAge={21} brand={t.name} />
+
+        <p class="form-help" style="margin:22px 0 8px">VariantSelector — PDP option picker (radiogroup + live price/SKU/stock region)</p>
+        <VariantSelector
+          client:load
+          variants={sampleFromProduct.variants}
+          options={sampleFromProduct.options}
+          currency={sampleFromProduct.price_range.currency}
+          locale="en-US"
+        />
+
+        <p class="form-help" style="margin:22px 0 8px">QuickView — global peek dialog (opens from any <code>[data-quickview]</code> button, e.g. a ProductCard above)</p>
+        <QuickView client:idle locale="en-US" />
+
+        <p class="form-help" style="margin:22px 0 8px">SearchTypeahead — header search combobox (debounced, ARIA listbox)</p>
+        <div style="max-width:22rem">
+          <SearchTypeahead client:idle />
+        </div>
+
+        <p class="form-help" style="margin:22px 0 8px">MobileNav — hamburger + slide-in drawer (mobile-only chrome, hidden ≥768px by design; resize below 768px or use responsive dev tools to preview the drawer)</p>
+        <div style="max-width:20rem">
+          <MobileNav client:idle nav={sampleMobileNav} announcement="Free US shipping on orders over $100" />
+        </div>
+
+        <p class="form-help" style="margin:22px 0 8px">RecentlyViewed — localStorage discovery rail, seeded here for preview (renders empty on a real first visit until a product is viewed)</p>
+        <script is:inline nonce={cspNonce} set:html={`localStorage.setItem("tot:recently-viewed", ${JSON.stringify(JSON.stringify(sampleRecentlyViewed))}); localStorage.setItem("tot:wishlist", ${JSON.stringify(JSON.stringify(sampleRecentlyViewed.slice(0, 2)))});`} />
+        <RecentlyViewed client:idle locale="en-US" />
+
+        <p class="form-help" style="margin:22px 0 8px">SavedList — the <code>/saved</code> wishlist, seeded here for preview (empty state shown until an item is saved)</p>
+        <SavedList client:only="preact" locale="en-US" />
+      </section>
+
+      {/* ── PLP controls (components/plp/) ─────────────────────────────────
+          URL-addressable faceted search chrome — every link/form carries the
+          query as a real href/param, so filtering needs no JS. */}
+      <section class="sg-block">
+        <p class="sg-h">PLP controls — <code>components/plp/</code></p>
+        <p class="lede" style="font-size:.95rem;color:var(--color-muted)">Faceted search chrome for a collection page. URL-addressable: every control is a real link or GET form carrying the query, never a JS-only filter.</p>
+
+        <div class="grid gap-8 lg:grid-cols-[240px_1fr]" style="margin-top:18px">
+          <FacetSidebar facets={sampleFacets} query={samplePlpQuery} basePath="#" />
+          <div>
+            <div class="sg-row" style="justify-content:space-between;margin-bottom:14px">
+              <p class="form-help" style="margin:0">SortSelect</p>
+              <SortSelect query={samplePlpQuery} basePath="#" />
+            </div>
+            <p class="form-help" style="margin:0 0 8px">ActiveFilters</p>
+            <ActiveFilters query={samplePlpQuery} basePath="#" />
+            <p class="form-help" style="margin:22px 0 8px">Pagination</p>
+            <Pagination query={samplePlpQuery} basePath="#" page={2} pageSize={12} total={58} />
+          </div>
+        </div>
+      </section>
+
+      {/* ── Home hero (components/home/Hero.astro) ─────────────────────────
+          The signature homepage moment — bold (default) vs. light, set by
+          the tenant's brand.heroVariant (not a prop; the guide fakes locals
+          to preview both). */}
+      <section class="sg-block">
+        <p class="sg-h">Home hero — <code>components/home/Hero.astro</code></p>
+        <p class="lede" style="font-size:.95rem;color:var(--color-muted)">The homepage "thesis" moment. Bold is the default; light matches merchants whose own site favors a light page with brand-color accents.</p>
+
+        <p class="form-help" style="margin:18px 0 8px">Bold (default)</p>
+        {setHeroVariant("bold")}
+        <Hero block={sampleHeroBlock} featureProduct={sampleHeroFeatureProduct} />
+
+        <p class="form-help" style="margin:22px 0 8px">Light</p>
+        {setHeroVariant("light")}
+        <Hero block={sampleHeroBlock} featureProduct={sampleHeroFeatureProduct} />
+      </section>
+
+      {/* ── Marketing blocks (components/marketing/) ────────────────────────
+          The block library a marketing-siteType tenant composes pages from —
+          token-driven, distinct from the ported mkt.css composition layer
+          above. One of every block type, dispatched through the real
+          MarketingBlocks renderer (Integrations nests CodeSample). */}
+      <section class="sg-block">
+        <p class="sg-h">Marketing blocks — <code>components/marketing/</code></p>
+        <p class="lede" style="font-size:.95rem;color:var(--color-muted)">The block-based marketing page renderer (siteType:"marketing" tenants). One instance of every block type, including the nested CodeSample inside Integrations.</p>
+        <MarketingBlocks blocks={sampleMarketingBlocks} basePath="" />
+      </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>