@tokenoftrust/storefront-runner 2.0.41 → 2.0.43

package/apps/storefront/integrations/lifecycle-host-asset.mjs

@@ -25,7 +25,15 @@ import { mkdir, writeFile } from "node:fs/promises";
 import { createRequire } from "node:module";
 import { dirname } from "node:path";
 import { fileURLToPath } from "node:url";
-import { LIFECYCLE_HOST_ASSET_PATH } from "@tot/public-runtime/integration/lifecycle-host-asset";
+import {
+  LIFECYCLE_HOST_ASSET_PATH,
+  LIFECYCLE_HOST_COMPATIBILITY_ASSET_PATHS,
+} from "@tot/public-runtime/integration/lifecycle-host-asset";
+
+const HOST_ASSET_PATHS = Object.freeze([
+  ...LIFECYCLE_HOST_COMPATIBILITY_ASSET_PATHS,
+  LIFECYCLE_HOST_ASSET_PATH,
+]);
 
 const HOST_ENTRY = fileURLToPath(
   new URL(
@@ -100,7 +108,7 @@ export function lifecycleHostAsset() {
       "astro:server:setup": ({ server }) => {
         server.middlewares.use((req, res, next) => {
           const path = (req.url ?? "").split("?")[0];
-          if (path !== `/${LIFECYCLE_HOST_ASSET_PATH}`) return next();
+          if (!HOST_ASSET_PATHS.some((assetPath) => path === `/${assetPath}`)) return next();
           bundleLifecycleHost().then(
             (code) => {
               res.setHeader("content-type", "text/javascript; charset=utf-8");
@@ -114,11 +122,17 @@ export function lifecycleHostAsset() {
 
       "astro:build:done": async ({ logger }) => {
         if (!clientDir) throw new Error("the lifecycle host has no resolved client output dir");
+        const outputDir = clientDir;
         const code = await bundleLifecycleHost();
-        const target = fileURLToPath(new URL(LIFECYCLE_HOST_ASSET_PATH, clientDir));
-        await mkdir(dirname(target), { recursive: true });
-        await writeFile(target, code, "utf8");
-        logger.info(`lifecycle host → /${LIFECYCLE_HOST_ASSET_PATH} (${code.length} bytes)`);
+        await Promise.all(HOST_ASSET_PATHS.map(async (assetPath) => {
+          const target = fileURLToPath(new URL(assetPath, outputDir));
+          await mkdir(dirname(target), { recursive: true });
+          await writeFile(target, code, "utf8");
+        }));
+        logger.info(
+          `lifecycle host → ${HOST_ASSET_PATHS.map((path) => `/${path}`).join(", ")} ` +
+            `(${code.length} bytes each)`,
+        );
       },
     },
   };

package/apps/storefront/package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@astrojs/cloudflare": "^14.0.1",
     "@astrojs/preact": "^6.0.0",
+    "@fontsource/anuphan": "5.3.0",
     "@fontsource/inter": "5.3.0",
     "@fontsource/jetbrains-mono": "5.3.0",
     "@fontsource/montserrat": "5.3.0",

package/apps/storefront/platform-reconcile-tenants.json

@@ -0,0 +1,3 @@
+{
+  "tenants": ["tokenoftrust.com"]
+}

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

@@ -40,6 +40,12 @@
 /* Clip (not hidden) so a closed off-canvas mobile drawer never creates a
    horizontal scrollbar, while position:sticky on the header still works. */
 body { overflow-x: clip; }
+.skip-link {
+  position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 2147483646;
+  transform: translateY(-150%); border-radius: var(--radius-md);
+  background: var(--color-primary); color: var(--color-primary-contrast); padding: .75rem 1rem;
+}
+.skip-link:focus-visible { transform: translateY(0); }
 .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
 .section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
 .section--tight { padding-block: clamp(1.75rem, 4vw, 3rem); }
@@ -68,13 +74,13 @@ body { overflow-x: clip; }
 /* (1) solid brand bar */
 .announce {
   background: var(--color-primary); color: var(--color-primary-contrast); text-align: center;
-  font-size: .85rem; font-weight: 600; letter-spacing: .01em; padding: 9px 16px;
+  font-size: .875rem; font-weight: 600; letter-spacing: .01em; padding: 9px 16px;
 }
 /* (2) scrolling sale marquee */
 .announce-marquee { background: var(--color-sale); color: var(--color-primary-contrast); overflow: hidden; }
 .announce-marquee__track {
   display: flex; gap: 3rem; white-space: nowrap; width: max-content;
-  padding: 8px 0; font-size: .82rem; font-weight: 600;
+  padding: 8px 0; font-size: .875rem; font-weight: 600;
   animation: chrome-marquee 22s linear infinite;
 }
 .announce-marquee__track span { padding-inline: 1.5rem; }
@@ -89,7 +95,7 @@ body { overflow-x: clip; }
 .announce-bar { background: var(--color-accent); color: var(--color-primary-contrast); }
 .announce-bar[hidden] { 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: .84rem; font-weight: 700; letter-spacing: .01em; text-align: center; }
+.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); }
@@ -99,15 +105,21 @@ body { overflow-x: clip; }
   background: var(--color-surface); border-bottom: 1px solid var(--color-border);
   text-align: center; padding: 10px 16px;
 }
-.topbar-warning p { color: var(--color-text); font-weight: 700; font-size: .82rem; letter-spacing: .01em; }
+/* Compliance notices carry a legibility FLOOR, not just a size. `.875rem` resolves to 13.12px
+   wherever the root computes to 15px, under the 14px mobile-text minimum the migration gate
+   enforces (validate-page-browser.mjs, MOBILE_TEXT_MIN) — and on a regulated storefront the age
+   warning is the text that least tolerates being the smallest thing on the page. `max()` keeps the
+   intended relative size wherever the root is large enough, refuses to go below 14px where it is
+   not, and so cannot regress if the root scale changes again. Applies to all three notices. */
+.topbar-warning p { color: var(--color-text); font-weight: 700; font-size: max(.875rem, 14px); letter-spacing: .01em; }
 
 .utility-nav { border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
 .utility-nav .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 8px; }
 .utility-nav ul { display: flex; flex-wrap: wrap; gap: 20px; }
-.utility-nav a { font-size: .82rem; font-weight: 600; color: var(--color-text); }
+.utility-nav a { font-size: .875rem; font-weight: 600; color: var(--color-text); }
 .utility-nav a:hover { color: var(--color-primary); }
 .utility-nav__right { display: flex; align-items: center; gap: 16px; }
-.utility-nav__right .sel { font-size: .8rem; color: var(--color-muted); }
+.utility-nav__right .sel { font-size: .875rem; color: var(--color-muted); }
 .utility-nav__right .social { display: flex; gap: 12px; }
 .utility-nav__right .social a svg { width: 16px; height: 16px; fill: var(--color-text); }
 
@@ -121,8 +133,12 @@ body { overflow-x: clip; }
 .site-header .header-row { gap: clamp(12px, 3vw, 40px); }
 .header-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px, 2.5vw, 32px); padding-block: 14px; }
 /* Logo: image mark (bigd/giant) or text wordmark (PVC) both supported. */
-.brand img { height: 46px; width: auto; }
-.brand { display: inline-flex; align-items: baseline; gap: .3ch; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1rem, 2.2vw, 1.4rem); letter-spacing: .02em; white-space: nowrap; }
+/* object-fit is load-bearing, not polish: with height pinned and width auto, a logo whose
+   box is capped by max-width is otherwise STRETCHED to fill it. Measured 2026-09-21 on a
+   real tenant: a 500x196 logo (ratio 2.55) rendered at 154x34 (ratio 4.53) on mobile.
+   `contain` letterboxes instead, so a capped box never distorts the merchant's mark. */
+.brand img { height: 46px; width: auto; object-fit: contain; }
+.brand { display: inline-flex; align-items: baseline; gap: .3ch; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1rem, 2.2vw, 1.4rem); letter-spacing: .02em; white-space: nowrap; min-height: 44px; }
 .brand .b-prime { color: var(--color-accent); }
 .brand .b-vapor { color: var(--color-text); }
 .brand .b-club { color: var(--color-primary); }
@@ -157,9 +173,26 @@ body { overflow-x: clip; }
 .header-actions .header-cta--primary:hover { color: var(--color-primary-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; }
-.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 6px; }
+.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; }
 
+/* Source-parity compact chrome: one desktop row with navigation on the left,
+   an independently centered brand, and shopper actions on the right. This is
+   selected by chrome.json, never by tenant id. */
+.site-header[data-variant="compact-centered"] { position: static; }
+.site-header[data-variant="compact-centered"] .header-row {
+  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  min-height: 62px; padding-block: 8px;
+}
+.site-header[data-variant="compact-centered"] .primary-nav { min-width: 0; }
+.site-header[data-variant="compact-centered"] .primary-nav > ul { flex-wrap: nowrap; }
+.site-header[data-variant="compact-centered"] .brand { justify-self: center; }
+.site-header[data-variant="compact-centered"] .brand img { height: 38px; }
+.site-header[data-variant="compact-centered"] .header-actions { justify-self: end; }
+.header-search-trigger { display: inline-flex; align-items: center; color: var(--color-text); }
+.header-search-trigger svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
+.mobile-bottom-nav { display: none; }
+
 /* --- Primary nav + mega-menu ---------------------------------------------- */
 .primary-nav { flex: 1; }
 .primary-nav > ul { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(10px, 1.6vw, 22px); }
@@ -282,7 +315,7 @@ a.article-card__tag:hover { text-decoration: underline; }
 /* --- Compliance strip (source-copied legal text; not fabricated) ---------- */
 .compliance-strip { background: var(--color-surface-2); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
 .compliance-strip .container { padding-block: 14px; }
-.compliance-strip p { color: var(--color-text); font-size: .82rem; font-weight: 600; text-align: center; letter-spacing: .01em; }
+.compliance-strip p { color: var(--color-text); font-size: max(.875rem, 14px); font-weight: 600; text-align: center; letter-spacing: .01em; }
 
 /* --- Age gate (21+ interstitial; remembered per device) ------------------- */
 /* Overlay + on-dark surfaces derive from --color-text (deep ink) so no brand hex. */
@@ -298,14 +331,14 @@ a.article-card__tag:hover { text-decoration: underline; }
 .age-gate__deny { display: none; }
 .age-gate.is-denied .age-gate__enter, .age-gate.is-denied .age-gate__lede { display: none; }
 .age-gate.is-denied .age-gate__deny { display: block; margin-top: 18px; color: var(--color-error); font-weight: 600; }
-.age-gate__fine { margin-top: 18px; font-size: .78rem; color: var(--color-muted); }
+.age-gate__fine { margin-top: 18px; font-size: .875rem; color: var(--color-muted); }
 
 /* --- Footer --------------------------------------------------------------- */
 /* Deep-ink surface (= --color-text) with light contrast text; dimmer tiers and
    hairlines derive from --color-primary-contrast via color-mix. */
 .site-footer { background: var(--color-text); color: color-mix(in srgb, var(--color-primary-contrast) 82%, transparent); padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem; }
 .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
-.footer-brand img { height: 40px; filter: brightness(0) invert(1); opacity: .95; }
+.footer-brand img { height: 40px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
 .footer-brand p { color: color-mix(in srgb, var(--color-primary-contrast) 66%, transparent); margin-top: 14px; font-size: .9rem; max-width: 34ch; }
 /* The header .brand .b-prime/.b-vapor/.b-club rule set (line ~123) is tuned
    for the light --color-surface header; on the dark --color-text footer
@@ -326,8 +359,36 @@ a.article-card__tag:hover { text-decoration: underline; }
 .footer-news input[type="email"]::placeholder { color: color-mix(in srgb, var(--color-primary-contrast) 55%, transparent); }
 .footer-news button { flex: none; background: var(--color-primary); color: var(--color-primary-contrast); border: 0; border-radius: var(--radius-md); padding: 0 16px; font-weight: 700; }
 .footer-news button:hover { background: var(--color-primary-hover); }
-.footer-attest { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: .76rem; color: color-mix(in srgb, var(--color-primary-contrast) 66%, transparent); }
-.footer-attest input { margin-top: 3px; }
+.footer-attest { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: .875rem; color: color-mix(in srgb, var(--color-primary-contrast) 66%, transparent); }
+/* Age attestation is a required consent control, so it carries the full
+   --tap-target box. The negative margins hand the extra space straight back, so
+   the control still occupies the same 13px slot beside the label text, and the
+   glyph is drawn at 13px through a mask that follows the footer's own colors —
+   a native checkbox scales its whole glyph to the box and would swallow the
+   line. */
+.footer-attest input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  flex: none;
+  inline-size: var(--tap-target, 44px);
+  block-size: var(--tap-target, 44px);
+  margin-inline: calc((13px - var(--tap-target, 44px)) / 2);
+  margin-block: calc(3px + (13px - var(--tap-target, 44px)) / 2) calc((13px - var(--tap-target, 44px)) / 2);
+  border: 0;
+  background-color: currentColor;
+  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><rect x='.5' y='.5' width='12' height='12' rx='2.5' fill='none' stroke='black' stroke-width='1'/></svg>") center / 13px 13px no-repeat;
+  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><rect x='.5' y='.5' width='12' height='12' rx='2.5' fill='none' stroke='black' stroke-width='1'/></svg>") center / 13px 13px no-repeat;
+}
+.footer-attest input[type="checkbox"]:checked {
+  background-color: var(--color-accent);
+  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><rect x='.5' y='.5' width='12' height='12' rx='2.5' fill='none' stroke='black' stroke-width='1'/><path d='M3.2 6.7 5.4 8.9 9.8 4.2' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><rect x='.5' y='.5' width='12' height='12' rx='2.5' fill='none' stroke='black' stroke-width='1'/><path d='M3.2 6.7 5.4 8.9 9.8 4.2' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+}
+.footer-attest input[type="checkbox"]:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: calc((13px - var(--tap-target, 44px)) / 2 + 1px);
+  border-radius: 50%;
+}
 .pay-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
 .pay-badges span { font-size: .62rem; font-weight: 700; letter-spacing: .04em; color: color-mix(in srgb, var(--color-primary-contrast) 82%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary-contrast) 22%, transparent); border-radius: var(--radius-sm); padding: 4px 7px; }
 /* Trust marks strip (PVC) */
@@ -336,15 +397,47 @@ a.article-card__tag:hover { text-decoration: underline; }
 .trust-marks svg { width: 17px; height: 17px; stroke: var(--color-accent); fill: none; stroke-width: 1.8; }
 .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: .82rem; }
+.footer-warning 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: .82rem; }
+.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
    lib/chrome/footerLegal.ts). Wraps under the copyright at narrow widths
    rather than overflowing the bar. */
 .footer-bottom nav ul { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0; padding: 0; }
 .footer-bottom nav a:hover { color: var(--color-primary-contrast); text-decoration: underline; }
 
+/* Source-parity light footer. Native details provide real zero-JS disclosure
+   semantics on mobile; desktop CSS presents the same content as open columns. */
+.site-footer[data-variant="light-collapsible"] {
+  background: var(--color-surface); color: var(--color-text);
+  border-top: 1px solid var(--color-border);
+}
+.site-footer[data-variant="light-collapsible"] .footer-brand img { filter: none; opacity: 1; }
+.site-footer[data-variant="light-collapsible"] .footer-brand p,
+.site-footer[data-variant="light-collapsible"] .footer-col a,
+.site-footer[data-variant="light-collapsible"] .footer-bottom p,
+.site-footer[data-variant="light-collapsible"] .footer-bottom a { color: var(--color-muted); }
+.site-footer[data-variant="light-collapsible"] .footer-col summary {
+  list-style: none; color: var(--color-text); font-size: .875rem; font-weight: 700;
+  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; cursor: default;
+}
+.site-footer[data-variant="light-collapsible"] .footer-col summary::-webkit-details-marker { display: none; }
+.site-footer[data-variant="light-collapsible"] .footer-col details > ul { display: flex; }
+.site-footer[data-variant="light-collapsible"] .footer-news input[type="email"] {
+  background: var(--color-surface); color: var(--color-text); border-color: var(--color-border);
+}
+.site-footer[data-variant="light-collapsible"] .footer-news input[type="email"]::placeholder,
+.site-footer[data-variant="light-collapsible"] .footer-attest { color: var(--color-muted); }
+.site-footer[data-variant="light-collapsible"] .trust-marks,
+.site-footer[data-variant="light-collapsible"] .footer-bottom { border-color: var(--color-border); }
+.site-footer[data-variant="light-collapsible"] .trust-marks span { color: var(--color-muted); }
+.site-footer[data-variant="light-collapsible"] .pay-badges span {
+  color: var(--color-muted); border-color: var(--color-border);
+}
+.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); }
+
 /* --- Reveal-on-scroll (raw-chrome markup uses .reveal/.in) ---------------- */
 .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
 .reveal.in { opacity: 1; transform: none; }
@@ -381,6 +474,44 @@ a.article-card__tag:hover { text-decoration: underline; }
   .cat-grid { grid-template-columns: 1fr 1fr; }
   .article-grid { grid-template-columns: 1fr 1fr; }
   .footer-grid { grid-template-columns: 1fr 1fr; }
+  .site-header[data-variant="compact-centered"] .header-row {
+    display: flex; position: relative; min-height: 58px; justify-content: space-between;
+  }
+  .site-header[data-variant="compact-centered"] .brand {
+    position: absolute; left: 50%; transform: translateX(-50%); z-index: 1;
+  }
+  .site-header[data-variant="compact-centered"] .brand img { height: 34px; max-width: 154px; }
+  .site-header[data-variant="compact-centered"] .header-actions { width: 100%; justify-content: flex-end; }
+  .site-header[data-variant="compact-centered"] .hamburger {
+    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
+  }
+  .site-header[data-variant="compact-centered"] .header-search-trigger,
+  .site-header[data-variant="compact-centered"] .header-actions > a[aria-label="Account"],
+  .site-header[data-variant="compact-centered"] .member-cue { display: none; }
+  .mobile-bottom-nav {
+    position: fixed; inset: auto 0 0; z-index: 130; min-height: 62px;
+    display: flex; align-items: stretch; justify-content: space-around;
+    background: var(--color-surface); border-top: 1px solid var(--color-border);
+    box-shadow: 0 -3px 14px color-mix(in srgb, var(--color-text) 10%, transparent);
+  }
+  .mobile-bottom-nav a {
+    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center;
+    justify-content: center; gap: 2px; color: var(--color-text); font-size: 1.2rem;
+  }
+  .mobile-bottom-nav svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
+  .mobile-bottom-nav small { font-size: .875rem; line-height: 1; }
+  .site-footer[data-variant="light-collapsible"] { padding-bottom: calc(1.5rem + 62px); }
+  .site-footer[data-variant="light-collapsible"] .footer-grid { display: block; }
+  .site-footer[data-variant="light-collapsible"] .footer-brand { margin-bottom: 20px; }
+  .site-footer[data-variant="light-collapsible"] .footer-col { border-top: 1px solid var(--color-border); }
+  .site-footer[data-variant="light-collapsible"] .footer-col summary {
+    display: flex; align-items: center; justify-content: space-between;
+    margin: 0; padding: 16px 0; cursor: pointer;
+  }
+  .site-footer[data-variant="light-collapsible"] .footer-col summary::after { content: "+"; font-size: 1rem; }
+  .site-footer[data-variant="light-collapsible"] .footer-col details[open] summary::after { content: "−"; }
+  .site-footer[data-variant="light-collapsible"] .footer-col details:not([open]) > ul { display: none; }
+  .site-footer[data-variant="light-collapsible"] .footer-col details > ul { padding-bottom: 16px; }
 }
 @media (max-width: 560px) {
   .tile-grid { grid-template-columns: repeat(2, 1fr); }

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

@@ -0,0 +1,26 @@
+---
+/**
+ * <AsyncStylesheet> — loads a non-critical stylesheet without blocking render,
+ * and without FOUC, under the storefront's strict CSP (see lib/asyncCss.ts for
+ * why this can't be the usual `onload="this.rel='stylesheet'"` attribute
+ * trick). Use for CSS a page doesn't need for first paint — e.g. a below-fold
+ * section, an optional widget, a print stylesheet's screen equivalent. Do NOT
+ * use it for chrome/header/nav CSS that must be present before paint to avoid
+ * a visible flash.
+ *
+ * Renders a `<link rel="preload">` tagged for the shared swap script
+ * (Layout.astro renders `ASYNC_CSS_SWAP_JS` once per page — it flips every
+ * such link to `rel="stylesheet"` after it's fetched) plus a `<noscript>`
+ * fallback so the styles still apply with JS disabled.
+ */
+import { ASYNC_CSS_ATTR } from "@/lib/asyncCss";
+
+interface Props {
+  href: string;
+}
+const { href } = Astro.props;
+const swapAttr = { [ASYNC_CSS_ATTR]: true };
+---
+
+<link rel="preload" as="style" href={href} {...swapAttr} />
+<noscript><link rel="stylesheet" href={href} /></noscript>

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

@@ -2,6 +2,13 @@
 /**
  * <Breadcrumbs> — semantic breadcrumb trail. The last crumb is the current
  * page (aria-current, not a link). No own container — inherits parent width.
+ *
+ * Crumb links carry `min-h-11` (44px) because a breadcrumb is a TAP TARGET, not prose. It reads
+ * as inline text, but it sits in a flex row so its computed display is `block`, which means the
+ * inline-in-a-sentence exemption to WCAG 2.5.8 does not apply — and should not, since there is
+ * 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.
  */
 import { withBase } from "@/lib/basePath";
 
@@ -32,7 +39,7 @@ const { basePath } = Astro.locals;
             ) : (
               <a
                 href={withBase(basePath, crumb.href)}
-                class="transition-colors hover:text-primary"
+                class="inline-flex min-h-11 items-center transition-colors hover:text-primary"
               >
                 {crumb.label}
               </a>

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

@@ -7,11 +7,12 @@
  * by a stable seed so the site looks polished offline AND stays CLS-free
  * (explicit width/height always set). When real rehosted URLs land
  * (CatalogImage.rehosted === true), the same component serves them with
- * responsive srcset/sizes.
+ * directly from the shared asset CDN.
  *
- * Responsive srcset is emitted for any URL whose CDN accepts `?width=`: the
- * rehost target AND Shopify's image CDN (so referenced Shopify URLs from a live
- * migration are responsive without rehosting).
+ * Responsive srcset is emitted for Shopify URLs whose CDN accepts `?width=`.
+ * Rehost URLs are provider-neutral originals: they must render identically when
+ * the storefront is served by Cloudflare or CloudFront, so this component never
+ * routes them through a provider-specific transformation path.
  */
 import { resolveImage } from "@/lib/imageAttrs";
 
@@ -46,7 +47,7 @@ const {
   loading,
 } = Astro.props;
 
-// Render decision (placeholder / Cloudflare resizing / Shopify ?width=) lives in
+// Render decision (placeholder / direct rehost / Shopify ?width=) lives in
 // lib/imageAttrs.ts so it's unit-testable without rendering this component.
 const { src: resolvedSrc, srcset } = resolveImage({ src, rehosted, width, height, seed, label });
 

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

@@ -157,7 +157,7 @@ const quickview = {
         global wishlist script; aria-pressed reflects saved state. */}
     <button
       type="button"
-      class="wishlist-toggle absolute right-2 top-2 z-10 grid h-9 w-9 place-items-center rounded-full bg-[color-mix(in_srgb,var(--color-surface)_88%,transparent)] text-[var(--color-text)] backdrop-blur transition-colors hover:text-[var(--color-sale)] focus-visible:text-[var(--color-sale)] aria-pressed:text-[var(--color-sale)]"
+      class="wishlist-toggle absolute right-2 top-2 z-10 grid h-11 w-11 place-items-center rounded-full bg-[color-mix(in_srgb,var(--color-surface)_88%,transparent)] text-[var(--color-text)] backdrop-blur transition-colors hover:text-[var(--color-sale)] focus-visible:text-[var(--color-sale)] aria-pressed:text-[var(--color-sale)]"
       aria-pressed="false"
       aria-label={`Save ${product.title}`}
       data-wishlist={JSON.stringify(snapshot)}
@@ -170,7 +170,7 @@ const quickview = {
     {/* Quick view — reveals on hover/focus-within; opens the global dialog. */}
     <button
       type="button"
-      class="quickview-trigger absolute inset-x-2 bottom-2 z-10 rounded-[var(--radius-sm)] bg-[color-mix(in_srgb,var(--color-surface)_92%,transparent)] py-2 text-center font-display text-xs font-medium text-[var(--color-text)] opacity-0 backdrop-blur transition-opacity duration-200 hover:bg-[var(--color-surface)] focus-visible:opacity-100 motion-safe:group-hover:opacity-100 md:opacity-0"
+      class="quickview-trigger absolute inset-x-2 bottom-2 z-10 min-h-11 rounded-[var(--radius-sm)] bg-[color-mix(in_srgb,var(--color-surface)_92%,transparent)] py-3 text-center font-display text-sm font-medium text-[var(--color-text)] opacity-0 backdrop-blur transition-opacity duration-200 hover:bg-[var(--color-surface)] focus-visible:opacity-100 motion-safe:group-hover:opacity-100 md:opacity-0"
       data-quickview={JSON.stringify(quickview)}
     >
       Quick view
@@ -180,16 +180,18 @@ const quickview = {
   <div class="mt-3.5">
     {
       product.vendor && (
-        <p class="font-mono text-[0.62rem] uppercase tracking-[0.14em] text-muted">
+        <p class="font-mono text-[0.875rem] uppercase tracking-[0.14em] text-muted">
           {product.vendor}
         </p>
       )
     }
     <h3 class="mt-1 font-display text-[0.95rem] font-medium leading-snug">
+      {/* `py-3` on an inline box raises the tap target to the 44px minimum
+          without changing the line box, so the card layout is untouched. */}
       <a
         href={withBase(basePath, `/products/${product.handle}`)}
         data-astro-prefetch
-        class="after:absolute after:inset-0 after:z-0 transition-colors motion-safe:group-hover:text-primary"
+        class="py-3 after:absolute after:inset-0 after:z-0 transition-colors motion-safe:group-hover:text-primary"
       >
         {product.title}
       </a>

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

@@ -5,6 +5,7 @@
  */
 import { articleSeoMetaTags, type ArticleMeta } from "@/lib/seo/meta.js";
 import { withXDefault, type Alternate } from "@/lib/seo/alternates.js";
+import { safeJsonScriptContent } from "@/lib/jsonScript";
 
 interface JsonLd {
   [key: string]: unknown;
@@ -128,7 +129,7 @@ const alternateLinks = withXDefault(alternates);
   graphs.map((g) => (
     <script
       type="application/ld+json"
-      set:html={JSON.stringify(g)}
+      set:html={safeJsonScriptContent(g)}
     />
   ))
 }

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

@@ -10,14 +10,13 @@
 import type { ChromeLink, FooterColumn, FooterNewsletter, SocialLink, ChromeLogo, FooterVariant } from "@/lib/chrome/model";
 import { withBase } from "@/lib/basePath";
 import { CHROME_PLACEMENT } from "@/lib/chrome/trackingPlacements";
+import { resolveNewsletterAgeAttestation } from "@/lib/chrome/newsletterAgeAttestation";
 import { trackingAttributes } from "@tot/public-runtime";
 
 interface Props {
   columns: FooterColumn[];
   brand?: { logo?: ChromeLogo; wordmark?: string; contact?: string[] };
-  /** Content-shape variant (lib/chrome/model.ts FooterVariant). Defaults to
-   * "default" — the only member today; threaded through so a future variant
-   * is a drop-in without touching every caller. */
+  /** Content-shape variant (lib/chrome/model.ts FooterVariant). */
   variant?: FooterVariant;
   newsletter?: FooterNewsletter;
   /** Payment method labels rendered as chips (e.g. "Visa", "PayPal"). */
@@ -69,9 +68,11 @@ const bottomLinkStamp = (l: ChromeLink, index: number) =>
     scope: "footer-bottom",
     index,
   });
+const newsletterAgeAttestation = resolveNewsletterAgeAttestation(newsletter?.ageAttestation);
+const collapsible = variant === "light-collapsible";
 ---
 
-<footer class:list={["border-t border-border bg-surface text-text", className]} data-variant={variant}>
+<footer class:list={["border-t border-border bg-surface text-text", collapsible && "footer-collapsible pb-[62px] md:pb-0", className]} data-variant={variant}>
   <div class="container-prose py-12">
     <div class="grid gap-10 md:grid-cols-[1.4fr_repeat(3,1fr)]">
       <!-- Brand -->
@@ -139,10 +140,9 @@ const bottomLinkStamp = (l: ChromeLink, index: number) =>
 
       <!-- Link columns -->
       {
-        columns.map((col, colIndex) => (
-          <div>
-            <h3 class="font-display text-sm font-semibold">{col.title}</h3>
-            <ul class="mt-3 grid gap-2">
+        columns.map((col, colIndex) => {
+          const links = (
+            <ul class="mt-3 grid gap-2 pb-4 md:pb-0">
               {col.links.map((l, i) => (
                 <li>
                   <a
@@ -156,8 +156,21 @@ const bottomLinkStamp = (l: ChromeLink, index: number) =>
                 </li>
               ))}
             </ul>
-          </div>
-        ))
+          );
+          return collapsible ? (
+            <details class="border-t border-border md:border-0">
+              <summary class="flex cursor-pointer list-none items-center justify-between py-4 font-display text-sm font-semibold md:cursor-default md:py-0">
+                {col.title}<span class="disclosure-mark md:hidden" aria-hidden="true">+</span>
+              </summary>
+              {links}
+            </details>
+          ) : (
+            <div>
+              <h3 class="font-display text-sm font-semibold">{col.title}</h3>
+              {links}
+            </div>
+          );
+        })
       }
     </div>
 
@@ -170,7 +183,7 @@ const bottomLinkStamp = (l: ChromeLink, index: number) =>
           <form
             action={withBase(basePath, newsletter.action ?? "/api/newsletter")}
             method="post"
-            class="mt-4 flex max-w-md flex-col gap-3 sm:flex-row"
+            class="mt-4 flex max-w-md flex-col gap-3 sm:flex-row sm:flex-wrap"
           >
             <input type="hidden" name="source" value={newsletter.source ?? "footer"} />
             <label class="sr-only" for="chrome-news-email">Email address</label>
@@ -188,6 +201,20 @@ const bottomLinkStamp = (l: ChromeLink, index: number) =>
             >
               Subscribe
             </button>
+            {
+              newsletterAgeAttestation && (
+                <label class="flex items-start gap-2 text-xs text-muted sm:basis-full">
+                  <input
+                    type="checkbox"
+                    name={newsletterAgeAttestation.name}
+                    value={newsletterAgeAttestation.value}
+                    required
+                    class="mt-0.5 h-4 w-4 shrink-0"
+                  />
+                  <span>{newsletterAgeAttestation.label}</span>
+                </label>
+              )
+            }
           </form>
         </div>
       )
@@ -242,3 +269,10 @@ const bottomLinkStamp = (l: ChromeLink, index: number) =>
     }
   </div>
 </footer>
+
+<style>
+  @media (min-width: 768px) {
+    .footer-collapsible details:not([open]) > :not(summary) { display: grid; }
+  }
+  .footer-collapsible details[open] .disclosure-mark { transform: rotate(45deg); }
+</style>