@tokenoftrust/storefront-runner 2.2.126 → 2.3.0

package/apps/storefront/package.json

@@ -14,7 +14,7 @@
     "preview": "wrangler dev",
     "typecheck": "astro check && tsc --noEmit",
     "astro": "astro",
-    "test": "NODE_OPTIONS=--experimental-sqlite vitest run"
+    "test": "NODE_OPTIONS=--experimental-sqlite vitest run && pnpm run test:pipeline"
   },
   "dependencies": {
     "@astrojs/cloudflare": "^14.0.1",
@@ -40,11 +40,13 @@
   "devDependencies": {
     "@astrojs/check": "^0.9.4",
     "@axe-core/playwright": "^4.12.1",
+    "@cloudflare/vitest-pool-workers": "0.12.21",
     "@playwright/test": "^1.61.1",
     "axe-core": "^4.12.1",
     "dependency-cruiser": "^18.0.0",
     "drizzle-kit": "^0.31.10",
     "drizzle-orm": "^0.45.2",
+    "esbuild": "0.28.1",
     "tsx": "^4.22.4",
     "typescript": "^5.6.3",
     "vitest": "2.1.8",

package/apps/storefront/public/shared/commerce-chrome.css

@@ -6,6 +6,22 @@
    This linked platform asset is served at /shared/commerce-chrome.css.
    rawMarketingHtml.prefixTenantLinks leaves /shared/ paths unprefixed. */
 
+/* Accent-derived token defaults for pages that load this sheet without the
+   app's global.css (raw pages). Same definitions as global.css; layered, so a
+   tenant theme's unlayered value always wins. */
+@layer tot-token-defaults {
+  :root {
+    --color-accent-ink: color-mix(in srgb, var(--color-accent) 84%, black);
+    --color-accent-contrast: var(--color-primary-contrast);
+  }
+  @supports (color: oklch(from red l c h)) {
+    :root {
+      --color-accent-ink: oklch(from var(--color-accent) min(l, 0.5) c h);
+      --color-accent-contrast: oklch(from var(--color-accent) clamp(0, (0.58 - l) * 1000, 1) 0 0);
+    }
+  }
+}
+
 /* --- Layout --------------------------------------------------------------- */
 /* Clip (not hidden) so a closed off-canvas mobile drawer never creates a
    horizontal scrollbar, while position:sticky on the header still works. */
@@ -31,13 +47,13 @@ body { overflow-x: clip; }
 .btn:hover { transform: translateY(-1px); }
 .btn-primary { background: var(--color-primary); color: var(--color-primary-contrast); }
 .btn-primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-md); }
-.btn-secondary { background: var(--color-accent); color: var(--color-primary-contrast); }
+.btn-secondary { background: var(--color-accent); color: var(--color-accent-contrast); }
 .btn-secondary:hover { background: var(--color-accent-hover); }
 .btn-line { border-color: var(--color-primary-contrast); color: var(--color-primary-contrast); }
 .btn-line:hover { background: var(--color-primary-contrast); color: var(--color-primary); }
 .btn-ghost { border-color: var(--color-border); color: var(--color-primary); background: var(--color-surface); }
 .btn-ghost:hover { border-color: var(--color-primary); }
-.btn-outline { background: transparent; color: var(--color-accent); border-color: var(--color-border); }
+.btn-outline { background: transparent; color: var(--color-accent-ink); border-color: var(--color-border); }
 .btn-outline:hover { border-color: var(--color-accent); }
 
 /* --- Announcement variants ------------------------------------------------ */
@@ -58,11 +74,9 @@ body { overflow-x: clip; }
 @media (prefers-reduced-motion: reduce) {
   .announce-marquee__track { animation: none; justify-content: center; width: 100%; }
 }
-/* (3) dismissible promo bar (accent fill + contrast text — accent is a FILL
-   token like --color-primary, so its text follows the same on-primary
-   contrast token; --color-text assumed accent was always light, which axe
-   caught as a real color-contrast failure once accent is a deep brand hue). */
-.announce-bar { background: var(--color-accent); color: var(--color-primary-contrast); }
+/* (3) dismissible promo bar: accent fill with --color-accent-contrast text, the
+   token that reads on the accent whether the accent is light or deep. */
+.announce-bar { background: var(--color-accent); color: var(--color-accent-contrast); }
 .announce-bar[hidden] { display: none; }
 /* A returning visitor who already dismissed the bar gets `.announce-dismissed`
    stamped on <html> pre-paint (see rawChrome.ts's head script) so it never
@@ -70,9 +84,9 @@ body { overflow-x: clip; }
 .announce-dismissed .announce-bar { display: none; }
 .announce-bar .container { display: flex; align-items: center; justify-content: center; gap: 14px; padding-block: 9px; position: relative; }
 .announce-bar__msg { font-size: .875rem; font-weight: 700; letter-spacing: .01em; text-align: center; }
-.announce-bar__msg a { color: var(--color-primary-contrast); text-decoration: underline; }
-.announce-bar__close { position: absolute; right: clamp(16px, 4vw, 40px); background: none; border: 0; color: var(--color-primary-contrast); font-size: 1.1rem; line-height: 1; padding: 4px 6px; border-radius: var(--radius-sm); }
-.announce-bar__close:hover { background: color-mix(in srgb, var(--color-primary-contrast) 12%, transparent); }
+.announce-bar__msg a { color: var(--color-accent-contrast); text-decoration: underline; }
+.announce-bar__close { position: absolute; right: clamp(16px, 4vw, 40px); background: none; border: 0; color: var(--color-accent-contrast); font-size: 1.1rem; line-height: 1; padding: 4px 6px; border-radius: var(--radius-sm); }
+.announce-bar__close:hover { background: color-mix(in srgb, var(--color-accent-contrast) 12%, transparent); }
 
 /* --- Top utility bar (FDA warning + utility nav) -------------------------- */
 .topbar-warning {
@@ -98,9 +112,9 @@ body { overflow-x: clip; }
 .utility-nav__right .social a svg { width: 16px; height: 16px; fill: var(--color-text); }
 
 /* Member-price affordance (persistent, guests) */
-.member-cue { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 700; color: var(--color-accent); }
+.member-cue { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 700; color: var(--color-accent-ink); }
 .member-cue::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-accent); }
-.member-cue:hover { color: var(--color-accent-hover); text-decoration: underline; }
+.member-cue:hover { color: var(--color-accent-ink); text-decoration: underline; }
 
 /* --- Header / nav --------------------------------------------------------- */
 .site-header { position: sticky; top: 0; z-index: 100; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
@@ -142,11 +156,25 @@ body { overflow-x: clip; }
   white-space: nowrap; transition: transform .15s ease, opacity .15s ease;
 }
 .header-cta--primary {
-  background: var(--color-accent); color: var(--color-primary-contrast);
+  background: var(--color-accent); color: var(--color-accent-contrast);
 }
-.header-actions .header-cta--primary:hover { color: var(--color-primary-contrast); transform: translateY(-1px); }
+.header-actions .header-cta--primary:hover { color: var(--color-accent-contrast); transform: translateY(-1px); }
 .header-cta--secondary, .header-cta--ghost { border: 1px solid currentColor; }
 .header-actions .header-cta--secondary:hover, .header-actions .header-cta--ghost:hover { opacity: .8; }
+/* Labelled action links (chrome header.actionLinks): text with an optional leading icon. */
+.header-action { gap: 6px; font-size: .875rem; font-weight: 600; white-space: nowrap; }
+.header-actions .header-action svg { width: 20px; height: 20px; }
+.header-actions .header-action.cart .count { position: static; margin-left: 2px; }
+/* A search form with a visible text submit (header.search.buttonLabel). */
+.header-search--labelled { display: flex; }
+.header-search--labelled input { padding-right: 18px; border-radius: var(--radius-full) 0 0 var(--radius-full); }
+.header-search--labelled button {
+  position: static; transform: none; flex: none; padding: 0 18px;
+  border: 1px solid var(--color-border); border-left: 0; border-radius: 0 var(--radius-full) var(--radius-full) 0;
+  background: var(--color-surface-2); color: var(--color-text); font-size: .8rem; font-weight: 700; letter-spacing: .04em;
+}
+/* The menu-drawer copy of search (header.mobile.search "menu") shows only at narrow widths. */
+.header-search--menu { display: none; }
 .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 6px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
 .hamburger span { width: 26px; height: 2px; background: var(--color-text); border-radius: 2px; }
 
@@ -372,6 +400,9 @@ a.article-card__tag:hover { text-decoration: underline; }
 .footer-warning { margin-top: 30px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--color-primary-contrast) 22%, transparent); border-radius: var(--radius-md); }
 .footer-warning strong { color: var(--color-primary-contrast); }
 .footer-warning p { color: color-mix(in srgb, var(--color-primary-contrast) 78%, transparent); font-size: max(.875rem, 14px); }
+/* The merchant's own legal copy (footer.disclaimer): rendered as written, no label. */
+.footer-disclaimer { margin-top: 30px; }
+.footer-disclaimer p { color: color-mix(in srgb, var(--color-primary-contrast) 78%, transparent); font-size: max(.875rem, 14px); }
 .footer-bottom { margin-top: 28px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--color-primary-contrast) 16%, transparent); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; }
 .footer-bottom p, .footer-bottom a { color: color-mix(in srgb, var(--color-primary-contrast) 60%, transparent); font-size: .875rem; }
 /* The Legal link row (a "Legal"-titled footer column, moved here — see
@@ -410,7 +441,8 @@ a.article-card__tag:hover { text-decoration: underline; }
 }
 .site-footer[data-variant="light-collapsible"] .footer-warning { border-color: var(--color-border); }
 .site-footer[data-variant="light-collapsible"] .footer-warning strong,
-.site-footer[data-variant="light-collapsible"] .footer-warning p { color: var(--color-text); }
+.site-footer[data-variant="light-collapsible"] .footer-warning p,
+.site-footer[data-variant="light-collapsible"] .footer-disclaimer p { color: var(--color-text); }
 
 /* --- Reveal-on-scroll (raw-chrome markup uses .reveal/.in) ---------------- */
 .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
@@ -441,6 +473,16 @@ a.article-card__tag:hover { text-decoration: underline; }
      PRESENTATION, never its reachability. */
   .js-nav .primary-nav { position: fixed; inset: 0 0 0 auto; width: min(84vw, 340px); background: var(--color-surface); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .25s ease; padding: 78px 20px 24px; overflow-y: auto; z-index: 120; }
   .js-nav .primary-nav.open { transform: none; }
+  /* header.mobile — menu button side, brand alignment, search placement. */
+  .js-nav .site-header[data-mobile-menu="left"] .primary-nav { inset: 0 auto 0 0; transform: translateX(-100%); }
+  .js-nav .site-header[data-mobile-menu="left"] .primary-nav.open { transform: none; }
+  .site-header[data-mobile-menu="left"] .header-actions,
+  .site-header[data-mobile-brand="center"] .header-actions { margin-left: auto; }
+  .site-header[data-mobile-brand="center"] .header-row { position: relative; }
+  .site-header[data-mobile-brand="center"] .brand { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); }
+  .site-header[data-mobile-search="menu"] .header-search:not(.header-search--menu) { display: none; }
+  .site-header[data-mobile-search="menu"] .header-search--menu { display: block; max-width: none; margin-bottom: 12px; }
+  .site-header[data-mobile-search="menu"] .header-search--menu.header-search--labelled { display: flex; }
   /* Mega panels: inline accordion on mobile */
   .mega { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-radius: 0; padding: 4px 4px 8px 14px; min-width: 0; }
   .mega--wide { min-width: 0; }

package/apps/storefront/public/shared/commerce-marketing.css

@@ -40,7 +40,7 @@
      --border               -> --color-border
      --ink / --ink-2        -> --color-text   (contract has ONE body/heading ink)
      --muted                -> --color-muted
-     --brand-blue           -> --color-accent  (PVC secondary brand / links)
+     --brand-blue           -> --color-accent (fills) / --color-accent-ink (small text, links)
      --accent (amber fill)  -> semantic tint: --color-info (illustrative note) /
                                --color-warning (compliance + needs-review flag) mixed
                                over --color-surface, so the callout is token-driven
@@ -76,8 +76,8 @@
 
 /* --- Breadcrumbs + eyebrow ------------------------------------------------ */
 .crumbs { font-size: .82rem; color: var(--color-muted); margin-bottom: 14px; }
-.crumbs a { color: var(--color-accent); }
-.eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: .5rem; }
+.crumbs a { color: var(--color-accent-ink); }
+.eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-ink); margin-bottom: .5rem; }
 
 /* --- Section heads (marketing-page variant) -------------------------------
    Distinct from chrome's centered home-section .sec-head: left by default, with a
@@ -88,7 +88,7 @@
 .sec-head--center { max-width: 62ch; margin-inline: auto; text-align: center; }
 .sec-head h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); }
 .sec-head p { margin-top: .5rem; color: var(--color-muted); }
-.sec-head .eyebrow { color: var(--color-accent); }
+.sec-head .eyebrow { color: var(--color-accent-ink); }
 
 /* --- Prose (policy / long-form copy) -------------------------------------- */
 .prose { max-width: 76ch; }
@@ -96,7 +96,7 @@
 .prose p { margin-top: .7rem; color: var(--color-text); }
 .prose ul { margin-top: .7rem; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .45rem; }
 .prose li { list-style: disc; color: var(--color-text); }
-.prose a { color: var(--color-accent); }
+.prose a { color: var(--color-accent-ink); }
 
 /* --- Callouts ------------------------------------------------------------- */
 /* Illustrative / informational note (e.g. "illustrative demo — figures unconfirmed").
@@ -116,7 +116,7 @@
 
 /* --- Table-of-contents chips (long policy pages) -------------------------- */
 .toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
-.toc a { font-size: .82rem; font-weight: 600; color: var(--color-accent); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 6px 12px; background: var(--color-surface); }
+.toc a { font-size: .82rem; font-weight: 600; color: var(--color-accent-ink); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 6px 12px; background: var(--color-surface); }
 .toc a:hover { border-color: var(--color-accent); text-decoration: none; }
 
 /* --- Value / feature card grid (about) ------------------------------------ */
@@ -130,7 +130,7 @@
 .contact-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 14px; }
 .contact-card h3 { font-size: 1.05rem; }
 .contact-card p { margin-top: .4rem; color: var(--color-text); font-size: .92rem; }
-.contact-card a { color: var(--color-accent); }
+.contact-card a { color: var(--color-accent-ink); }
 .contact-form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
 .contact-form h2 { font-size: 1.25rem; margin-bottom: 4px; }
 .contact-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

package/apps/storefront/src/components/Badge.astro

@@ -17,7 +17,7 @@ const { variant, label, class: className } = Astro.props;
 const variants: Record<Props["variant"], string> = {
   sale: "bg-sale text-white",
   new: "bg-primary text-primary-contrast",
-  "low-stock": "bg-accent text-white",
+  "low-stock": "bg-accent text-accent-contrast",
   soldout: "bg-surface text-muted border border-border",
   compliant: "bg-[var(--color-success)] text-white",
 };

package/apps/storefront/src/components/Breadcrumbs.astro

@@ -9,18 +9,23 @@
  * no surrounding sentence that growing the link would break. Measured 2026-09-21 at 118x20,
  * failing even 2.5.8's 24px floor on every page that renders a trail. The extra height centres
  * around the text, so the crumb does not move.
+ *
+ * Build `crumbs` with `siteTrail` (lib/breadcrumbs.ts) and pass the SAME array to `breadcrumbLd`.
+ * `class` adds a hook for the page's own styles (`breadcrumbs` on the blog templates).
  */
 import { withBase } from "@/lib/basePath";
+import type { Crumb } from "@/lib/breadcrumbs";
 
 interface Props {
-  crumbs: { label: string; href: string }[];
+  crumbs: Crumb[];
+  class?: string;
 }
 
-const { crumbs } = Astro.props;
+const { crumbs, class: className } = Astro.props;
 const { basePath } = Astro.locals;
 ---
 
-<nav aria-label="Breadcrumb" class="text-sm text-muted">
+<nav aria-label="Breadcrumb" class:list={["text-sm text-muted", className]}>
   <ol class="flex flex-wrap items-center gap-x-1 gap-y-0.5">
     {
       crumbs.map((crumb, i) => {

package/apps/storefront/src/components/Section.astro

@@ -11,13 +11,16 @@ interface Props {
   tone?: "bg" | "surface";
   class?: string;
   id?: string;
+  /** Stable `data-widget` name, so the rendered page says which block this is. */
+  widget?: string;
 }
-const { title, eyebrow, tone = "bg", class: className, id } = Astro.props;
+const { title, eyebrow, tone = "bg", class: className, id, widget } = Astro.props;
 const bg = tone === "surface" ? "bg-[var(--color-surface)]" : "bg-[var(--color-bg)]";
 ---
 
 <section
   id={id}
+  data-widget={widget}
   class:list={[bg, "py-[clamp(3rem,7vw,6rem)]", className]}
 >
   <div class="container-prose">

package/apps/storefront/src/components/Seo.astro

@@ -6,6 +6,7 @@
 import { articleSeoMetaTags, resolveOgImage, type ArticleMeta } from "@/lib/seo/meta.js";
 import { withXDefault, type Alternate } from "@/lib/seo/alternates.js";
 import { safeJsonScriptContent } from "@/lib/jsonScript";
+import { documentTitle } from "@/lib/seo/documentTitle";
 
 interface JsonLd {
   [key: string]: unknown;
@@ -13,6 +14,10 @@ interface JsonLd {
 
 interface Props {
   title: string;
+  /** The page's own complete `<title>` (a page/post `seoTitle`). Rendered verbatim —
+   *  no store-name suffix — so a migrated page keeps its source title exactly.
+   *  Absent ⇒ `title`, suffixed with the store's display name. */
+  seoTitle?: string;
   description?: string;
   /** Path-only canonical, e.g. /products/foo. Joined to tenant canonical base. */
   path: string;
@@ -47,6 +52,7 @@ interface Props {
 
 const {
   title,
+  seoTitle,
   description,
   path,
   ogType = "website",
@@ -68,11 +74,7 @@ const {
 const { tenant, canonicalBase } = Astro.locals;
 const canonical =
   canonicalOverride ?? new URL(path, canonicalBase + "/").toString();
-// Don't double-append the brand: merchant SEO titles (title_tag) often already
-// end with the store name.
-const fullTitle = title.includes(tenant.displayName)
-  ? title
-  : `${title} — ${tenant.displayName}`;
+const fullTitle = documentTitle(title, seoTitle, tenant.displayName);
 const image = resolveOgImage({
   ogImage, themeOgImage: tenant.theme_tokens?.brand?.ogImage ?? null, canonicalBase,
 });

package/apps/storefront/src/components/blog/BlogIndexView.astro

@@ -8,18 +8,22 @@ import PostAccessBadge from "@/components/blog/PostAccessBadge.astro";
 import type { BlogPostSummary } from "@/lib/blog/types.js";
 import type { BlogIndexCopy } from "@/lib/blog/pagination.js";
 import { blogPagePath } from "@/lib/blog/pagination.js";
+import type { BlogPresentation } from "@/lib/blog/presentation.js";
+import { categorySlug } from "@/lib/blog/collection.js";
 
 interface Props {
   basePath: string;
   canonicalBase: string;
   copy: BlogIndexCopy;
+  presentation: BlogPresentation;
   tags: string[];
   pagePosts: BlogPostSummary[];
   page: number;
   totalPages: number;
 }
 
-const { basePath, canonicalBase, copy, tags, pagePosts, page, totalPages } = Astro.props;
+const { basePath, canonicalBase, copy, presentation, tags, pagePosts, page, totalPages } = Astro.props;
+const showTopics = presentation.topics && tags.length > 0;
 
 const href = (path: string) => `${basePath}${path}` || "/";
 const path = blogPagePath(page);
@@ -53,21 +57,23 @@ const itemList = {
   jsonLd={itemList}
   pagination={pagination}
 >
-  <header class="blog-hero">
+  <header class:list={["blog-hero", { "blog-hero--plain": !presentation.hero }]}>
     <div class="blog-shell">
-      <p class="eyebrow eyebrow--tick">{copy.eyebrow}</p>
+      {copy.eyebrow && <p class="eyebrow eyebrow--tick">{copy.eyebrow}</p>}
       <h1>{copy.title}</h1>
-      <p>{copy.tagline}</p>
+      {copy.tagline && <p class="blog-hero__tagline">{copy.tagline}</p>}
     </div>
   </header>
 
-  <div class="blog-shell blog-layout">
-    <aside aria-label="Blog topics">
-      <p class="filter-label">Explore topics</p>
-      <div class="tag-list">
-        {tags.map((tag) => <span>{tag}</span>)}
-      </div>
-    </aside>
+  <div class:list={["blog-shell blog-layout", { "blog-layout--single": !showTopics }]}>
+    {showTopics && (
+      <aside aria-label="Blog topics">
+        <p class="filter-label">Explore topics</p>
+        <div class="tag-list">
+          {tags.map((tag) => <a href={href(`/blog/tag/${categorySlug(tag)}/`)}>{tag}</a>)}
+        </div>
+      </aside>
+    )}
 
     <section class="post-grid" aria-label="Blog posts" id="blog-posts">
       {pagePosts.map((post, index) => (
@@ -113,13 +119,16 @@ const itemList = {
   .blog-shell { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
   .blog-hero { padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem); background: linear-gradient(145deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 82%, var(--color-accent))); color: var(--color-primary-contrast); }
   .blog-hero h1 { max-width: 12ch; margin-top: .75rem; color: inherit; font-size: clamp(2.9rem, 7vw, 5.6rem); }
-  .blog-hero p:last-child { max-width: 58ch; margin-top: 1.25rem; color: color-mix(in srgb, var(--color-primary-contrast) 82%, transparent); font-size: 1.12rem; }
+  .blog-hero__tagline { max-width: 58ch; margin-top: 1.25rem; color: color-mix(in srgb, var(--color-primary-contrast) 82%, transparent); font-size: 1.12rem; }
   .blog-hero .eyebrow { color: color-mix(in srgb, var(--color-primary-contrast) 75%, transparent); }
+  .blog-hero--plain { padding: clamp(2rem, 5vw, 3.5rem) 0 0; background: none; color: inherit; }
+  .blog-hero--plain .blog-hero__tagline, .blog-hero--plain .eyebrow { color: var(--color-muted); }
   .blog-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(3rem, 7vw, 6rem); }
+  .blog-layout--single { grid-template-columns: minmax(0, 1fr); }
   aside { align-self: start; position: sticky; top: 7rem; }
   .filter-label { margin-bottom: .85rem; font: 700 .76rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
   .tag-list { display: flex; flex-direction: column; align-items: stretch; gap: .3rem; }
-  .tag-list span { padding: .45rem .7rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-muted); font-size: .76rem; }
+  .tag-list a { text-decoration: none; padding: .45rem .7rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-muted); font-size: .76rem; }
   .post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.35rem; align-items: start; }
   .post-card { height: 100%; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
   .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

package/apps/storefront/src/components/blog/ShareRow.astro

@@ -0,0 +1,43 @@
+---
+/**
+ * Share row after a post's tags, in the order the collection's `settings.json` `share` declares.
+ * Share actions are plain links; Print is a button a nonce'd script wires to `window.print()`, so it
+ * works under the strict CSP (no inline handler, no `javascript:` URL) on every serving plane.
+ * Each item carries `share-row__item--<target>` so tenant CSS can give it the source theme's icon.
+ */
+import type { ShareLink } from "@/lib/blog/presentation.js";
+
+interface Props {
+  links: ShareLink[];
+}
+
+const { links } = Astro.props;
+const { cspNonce } = Astro.locals;
+---
+
+{links.length > 0 && (
+  <ul class="share-row" aria-label="Share this article">
+    {links.map((link) => (
+      <li class={`share-row__item share-row__item--${link.target}`}>
+        {link.href === null
+          ? <button type="button" class="share-row__action" data-share-print aria-label={link.label}><span class="share-row__label">{link.text}</span></button>
+          : <a class="share-row__action" href={link.href} aria-label={link.label} rel="noopener nofollow" target={link.target === "email" ? undefined : "_blank"}><span class="share-row__label">{link.text}</span></a>}
+      </li>
+    ))}
+  </ul>
+)}
+
+<style>
+  .share-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
+  .share-row__action { display: inline-flex; min-height: 2.75rem; align-items: center; padding: .4rem .85rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-muted); font: inherit; font-size: .82rem; font-weight: 700; text-decoration: none; cursor: pointer; }
+  .share-row__action:hover { color: var(--color-accent-ink); border-color: var(--color-accent); }
+  @media print { .share-row { display: none; } }
+</style>
+
+{links.some((link) => link.href === null) && (
+  <script is:inline nonce={cspNonce}>
+    for (const button of document.querySelectorAll("[data-share-print]")) {
+      button.addEventListener("click", () => window.print());
+    }
+  </script>
+)}

package/apps/storefront/src/components/chrome/AnnouncementBar.astro

@@ -31,7 +31,7 @@ const {
 const toneClass: Record<NonNullable<Props["tone"]>, string> = {
   primary: "bg-primary text-primary-contrast",
   sale: "bg-[var(--color-sale)] text-white",
-  accent: "bg-accent text-white",
+  accent: "bg-accent text-accent-contrast",
 };
 const copies = Array.from({ length: Math.max(2, repeat) });
 ---

package/apps/storefront/src/components/chrome/NavDropdown.astro

@@ -94,7 +94,7 @@ const childStamp = (link: ChromeLink, childIndex: number) =>
       <li>
         <details class="group border-b border-border last:border-b-0">
           <summary class="flex cursor-pointer list-none items-center justify-between gap-2 py-2.5 text-sm font-medium text-text [&::-webkit-details-marker]:hidden">
-            <span class:list={["inline-flex items-center gap-1.5", item.flag && "text-accent"]}>
+            <span class:list={["inline-flex items-center gap-1.5", item.flag && "text-accent-ink"]}>
               {item.label}
               {item.badge && (
                 <span class="rounded-full bg-[var(--color-sale)] px-1.5 py-0.5 font-mono text-[0.55rem] uppercase leading-none tracking-[0.08em] text-white">
@@ -146,8 +146,8 @@ const childStamp = (link: ChromeLink, childIndex: number) =>
           data-astro-prefetch
           aria-current={itemCurrent ? "page" : undefined}
           class:list={[
-            "flex items-center gap-1.5 border-b border-border py-2.5 text-sm font-medium text-text transition-colors last:border-b-0 hover:text-accent",
-            item.flag && "text-accent",
+            "flex items-center gap-1.5 border-b border-border py-2.5 text-sm font-medium text-text transition-colors last:border-b-0 hover:text-accent-ink",
+            item.flag && "text-accent-ink",
           ]}
           {...itemStamp}
         >
@@ -167,8 +167,8 @@ const childStamp = (link: ChromeLink, childIndex: number) =>
         data-astro-prefetch
         aria-current={itemCurrent ? "page" : undefined}
         class:list={[
-          "inline-flex items-center gap-1 py-2 text-sm transition-colors hover:text-accent group-focus-within:text-accent",
-          item.flag && "font-semibold text-accent",
+          "inline-flex items-center gap-1 py-2 text-sm transition-colors hover:text-accent-ink group-focus-within:text-accent-ink",
+          item.flag && "font-semibold text-accent-ink",
         ]}
         aria-haspopup="true"
         {...itemStamp}
@@ -241,8 +241,8 @@ const childStamp = (link: ChromeLink, childIndex: number) =>
         data-astro-prefetch
         aria-current={itemCurrent ? "page" : undefined}
         class:list={[
-          "inline-flex items-center gap-1 py-2 text-sm transition-colors hover:text-accent",
-          item.flag && "font-semibold text-accent",
+          "inline-flex items-center gap-1 py-2 text-sm transition-colors hover:text-accent-ink",
+          item.flag && "font-semibold text-accent-ink",
         ]}
         {...itemStamp}
       >

package/apps/storefront/src/components/chrome/SiteFooter.astro

@@ -22,6 +22,8 @@ interface Props {
   /** Payment method labels rendered as chips (e.g. "Visa", "PayPal"). */
   payments?: string[];
   social?: SocialLink[];
+  /** The merchant's own legal/disclaimer copy, rendered verbatim (line breaks kept). */
+  disclaimer?: string;
   /** Trust / compliance line (plain text, e.g. an age/nicotine notice). */
   compliance?: string;
   /** Legal bottom-bar line (e.g. a composed "© 2026 Acme · some legal note" string). */
@@ -41,6 +43,7 @@ const {
   newsletter,
   payments = [],
   social = [],
+  disclaimer,
   compliance,
   legal,
   bottomLinks = [],
@@ -233,6 +236,20 @@ const collapsible = variant === "light-collapsible";
       )
     }
 
+    <!-- Merchant legal copy (verbatim) -->
+    {
+      disclaimer?.trim() && (
+        <p class="mt-8 border-t border-border pt-6 text-xs text-muted" data-footer-disclaimer>
+          {disclaimer.trim().split(/\r?\n/).map((line, i) => (
+            <>
+              {i > 0 && <br />}
+              {line}
+            </>
+          ))}
+        </p>
+      )
+    }
+
     <!-- Compliance / trust line -->
     {
       compliance && (

package/apps/storefront/src/components/chrome/SiteHeader.astro

@@ -98,7 +98,7 @@ const compact = layout === "compact-centered";
 const ctaClass = (v?: string) =>
   v === "secondary" || v === "ghost"
     ? "inline-flex items-center rounded-full border border-current px-4 py-2 font-display text-sm font-medium transition-opacity hover:opacity-80"
-    : "inline-flex items-center rounded-full bg-accent px-4 py-2 font-display text-sm font-medium text-[var(--color-primary-contrast)] transition-transform hover:-translate-y-0.5";
+    : "inline-flex items-center rounded-full bg-accent px-4 py-2 font-display text-sm font-medium text-accent-contrast transition-transform hover:-translate-y-0.5";
 
 // Nav handed to the (client-rendered) MobileNav island with hrefs pre-prefixed,
 // so it doesn't depend on the runtime base path inside the island. MobileNav's
@@ -224,7 +224,7 @@ const currentPath = Astro.url.pathname;
             <a
               href={withBase(basePath, searchAction)}
               aria-label={searchLabel ?? "Search"}
-              class="hidden h-9 w-9 place-items-center rounded-full text-text transition-colors hover:text-accent md:grid"
+              class="hidden h-9 w-9 place-items-center rounded-full text-text transition-colors hover:text-accent-ink md:grid"
             >
               <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
                 <circle cx="11" cy="11" r="7" />
@@ -238,7 +238,7 @@ const currentPath = Astro.url.pathname;
             <a
               href={withBase(basePath, savedItemsHref)}
               aria-label="Saved items"
-              class="relative grid h-9 w-9 shrink-0 place-items-center rounded-full text-text transition-colors hover:text-accent"
+              class="relative grid h-9 w-9 shrink-0 place-items-center rounded-full text-text transition-colors hover:text-accent-ink"
             >
               <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
                 <path d="M12 21s-7.5-4.6-10-9.2C.4 8.6 2 5 5.5 5 8 5 9.4 6.6 12 9c2.6-2.4 4-4 6.5-4C22 5 23.6 8.6 22 11.8 19.5 16.4 12 21 12 21z" />
@@ -293,7 +293,7 @@ const currentPath = Astro.url.pathname;
             <a
               href={withBase(basePath, accountHref)}
               aria-label="Account"
-              class="grid h-9 w-9 place-items-center rounded-full text-text transition-colors hover:text-accent"
+              class="grid h-9 w-9 place-items-center rounded-full text-text transition-colors hover:text-accent-ink"
             >
               <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
                 <circle cx="12" cy="8" r="4" />
@@ -307,7 +307,7 @@ const currentPath = Astro.url.pathname;
             <a
               href={withBase(basePath, cartHref)}
               aria-label={`Cart, ${cartCount} ${cartCount === 1 ? "item" : "items"}`}
-              class="relative grid h-9 w-9 place-items-center rounded-full text-text transition-colors hover:text-accent"
+              class="relative grid h-9 w-9 place-items-center rounded-full text-text transition-colors hover:text-accent-ink"
             >
               <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
                 <path d="M6 6h15l-1.5 9h-12z" />

package/apps/storefront/src/components/commerce/TagFilterCloud.astro

@@ -135,7 +135,7 @@ const chip = (t: TagItem) => ({
     color: var(--color-muted);
   }
   .tag-chip.is-active .tag-chip__count {
-    color: color-mix(in srgb, var(--color-primary-contrast) 78%, transparent);
+    color: var(--color-primary-contrast);
   }
   .tag-chip:focus-visible {
     outline: 2px solid var(--color-primary);

package/apps/storefront/src/components/compliance/NicotineWarning.astro

@@ -1,33 +1,23 @@
 ---
 /**
  * FDA-mandated nicotine warning (21 CFR 1143.3). The wording is fixed by law and
- * must be conspicuous — do not paraphrase. Two presentations:
- *   - "bar": a persistent high-contrast strip at the very top of every page.
+ * must be conspicuous — do not paraphrase. Two placements:
+ *   - "bar": a persistent strip at the very top of every page.
  *   - "block": a reinforced box on the PDP (regulation also requires it on the
  *     product's own page/ads).
- * Rendered only when the tenant's compliance.nicotineWarning is set.
+ * Rendered only when the tenant's compliance.nicotineWarning is set. Its colours,
+ * case, weight and size come from that declaration (a validated preset, or an
+ * owner-reviewed custom style), never below the conspicuity floor and never
+ * hideable. The markup is nicotineWarningHtml's, shared with the raw-HTML serve path.
  */
+import { nicotineWarningHtml } from "../../../../../packages/cli/src/declared-config.mjs";
+
 interface Props {
   variant?: "bar" | "block";
+  /** The tenant's `compliance.nicotineWarning` declaration. */
+  declaration: unknown;
 }
-const { variant = "bar" } = Astro.props;
-
-const TEXT =
-  "WARNING: This product contains nicotine. Nicotine is an addictive chemical.";
+const { variant = "bar", declaration } = Astro.props;
 ---
 
-{
-  variant === "bar" ? (
-    <div class="border-b-2 border-[var(--color-text)] bg-[var(--color-text)] text-[var(--color-bg)]" role="note" aria-label="Health warning" data-compliance="nicotine-warning">
-      <p class="container-prose py-2 text-center text-[0.72rem] font-semibold uppercase tracking-[0.06em] sm:text-xs">
-        {TEXT}
-      </p>
-    </div>
-  ) : (
-    <div class="rounded-[var(--radius-md)] border-2 border-[var(--color-text)] px-4 py-3" role="note" aria-label="Health warning" data-compliance="nicotine-warning">
-      <p class="text-sm font-semibold uppercase tracking-[0.04em] text-[var(--color-text)]">
-        {TEXT}
-      </p>
-    </div>
-  )
-}
+<Fragment set:html={nicotineWarningHtml(declaration, variant)} />