@tokenoftrust/storefront-runner 1.3.2

package/apps/storefront/public/js/dashboard-vendor-search.js

@@ -0,0 +1,115 @@
+/**
+ * Client behavior for the ToT-STAFF vendor search + enter on /dashboard (#8425).
+ *
+ * Served as a STATIC same-origin file (public/) and referenced via
+ * <script src="/js/dashboard-vendor-search.js">, so the strict production CSP
+ * allows it via `script-src 'self'` — no nonce, no per-build hash. (An inline
+ * <script> is blocked: Astro's `is:inline` drops the templated nonce, and a
+ * processed inline script needs its content-hash pinned in cspStaticHashes on
+ * every change. An external 'self' file avoids both — mirrors dashboard-team.js.)
+ *
+ * Two session-authed, staff-gated endpoints (no server-injected values, so this
+ * file is fully static):
+ *   GET  /api/dashboard/vendor-search?q=<prefix>  → { vendors: [{appDomain, displayName}] }
+ *   POST /api/dashboard/enter-vendor {vendorAppDomain} → { ok, redirect } (writes audit)
+ */
+(function () {
+  const $ = (id) => document.getElementById(id);
+  const input = $("vendorSearch");
+  if (!input) return; // non-staff page — nothing to wire.
+  const results = $("vendorResults");
+  const msg = $("vendorSearchMsg");
+
+  let seq = 0; // guards against out-of-order responses (last query wins).
+  let timer = null;
+
+  function showMsg(text, isErr) {
+    msg.textContent = text || "";
+    msg.className = isErr ? "err" : "";
+  }
+
+  function clearResults() {
+    results.replaceChildren();
+  }
+
+  function renderResults(vendors) {
+    clearResults();
+    if (!vendors || !vendors.length) {
+      showMsg("No matching vendors.");
+      return;
+    }
+    showMsg("");
+    for (const v of vendors) {
+      const li = document.createElement("li");
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.dataset.appdomain = v.appDomain;
+      const dn = document.createElement("span");
+      dn.className = "dn";
+      dn.textContent = v.displayName || v.appDomain;
+      const ad = document.createElement("span");
+      ad.className = "ad";
+      ad.textContent = v.appDomain;
+      btn.appendChild(dn);
+      btn.appendChild(ad);
+      btn.addEventListener("click", () => enter(v.appDomain, btn));
+      li.appendChild(btn);
+      results.appendChild(li);
+    }
+  }
+
+  async function search(q) {
+    const mine = ++seq;
+    try {
+      const res = await fetch("/api/dashboard/vendor-search?q=" + encodeURIComponent(q), {
+        headers: { accept: "application/json" },
+      });
+      if (mine !== seq) return; // a newer query superseded this one.
+      const body = await res.json().catch(() => ({}));
+      if (res.ok) {
+        renderResults(body.vendors);
+      } else {
+        clearResults();
+        showMsg(body.error || "Search failed (HTTP " + res.status + ").", true);
+      }
+    } catch (e) {
+      if (mine !== seq) return;
+      clearResults();
+      showMsg("Search failed: " + (e && e.message ? e.message : e), true);
+    }
+  }
+
+  async function enter(appDomain, btn) {
+    if (btn) btn.disabled = true;
+    showMsg("Entering " + appDomain + "…");
+    try {
+      const res = await fetch("/api/dashboard/enter-vendor", {
+        method: "POST",
+        headers: { "content-type": "application/json", accept: "application/json" },
+        body: JSON.stringify({ vendorAppDomain: appDomain }),
+      });
+      const body = await res.json().catch(() => ({}));
+      if (res.ok && body.redirect) {
+        window.location.assign(body.redirect);
+        return;
+      }
+      showMsg(body.error || "Couldn't enter that vendor (HTTP " + res.status + ").", true);
+    } catch (e) {
+      showMsg("Couldn't enter: " + (e && e.message ? e.message : e), true);
+    } finally {
+      if (btn) btn.disabled = false;
+    }
+  }
+
+  input.addEventListener("input", () => {
+    const q = input.value.trim();
+    if (timer) clearTimeout(timer);
+    if (!q) {
+      seq++; // cancel any in-flight render.
+      clearResults();
+      showMsg("");
+      return;
+    }
+    timer = setTimeout(() => search(q), 200); // debounce keystrokes.
+  });
+})();

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

@@ -0,0 +1,369 @@
+/* ============================================================================
+   Shared commerce-chrome stylesheet — ONE platform-shipped, token-driven layer
+   (workstream shared-ecommerce-widgets, unit F2 `shared-chrome-css`).
+
+   Generalizes the divergent per-tenant `public/pages/mkt.css` files (some tenants
+   shared a byte-identical base sheet; others carried a richer variant with .mega /
+   .member-cue / .announce-bar / .age-gate / .trust-marks) into a SINGLE stylesheet
+   every storefront links and themes via
+   tokens only. Per decisions raw-chrome-single-stylesheet + materialization-compat.
+
+   CONTRACT-TOKEN-ONLY (docs/architecture/token-contract.md, unit F1). Every value
+   here reads the shared `--color-*` / `--font-*` / `--radius-*` / `--shadow-*` /
+   `--container-max` vocabulary and NO tenant-private brand var (never `--navy`,
+   `--brand-red`, unprefixed `--sale`/`--ink`/`--surface`), and no hard-coded brand
+   hex. On-dark surfaces (footer, age-gate overlay, cat cards) derive from
+   `--color-text` (the deep ink surface) + `--color-primary-contrast` via
+   `color-mix`, so a tenant reskins the whole chrome by supplying tokens/aliases.
+
+   Token mapping from the old per-tenant vars (applied by the integration units
+   that alias each tenant's brand vocabulary onto the contract):
+     --navy / --brand-red  -> --color-primary        (nav active, cart, CTA fill)
+     --navy-dark           -> --color-primary-hover
+     --sale                -> --color-sale           (flag / NEW / marquee emphasis)
+     --surface / --surface-2 / --border / --muted -> --color-{surface,surface-2,border,muted}
+     --ink / --ink-2       -> --color-text
+     --brand-blue          -> --color-accent         (member cue, promo/trust spark)
+     --container           -> --container-max
+     footer / age-gate ink surfaces -> --color-text (+ --color-primary-contrast)
+
+   DELIVERY: platform static asset, served at /shared/commerce-chrome.css (root,
+   global — like /brand, /js). It is a LINKED sheet, not inline: commerce routes
+   (/products, /collections) carry linked <link> sheets but strip inline <style>,
+   which is exactly the PVC breakage this closes. The canonical chrome partial (F3)
+   links it; per-tenant chrome retires its copied mkt.css at integration (I1/I2/I3).
+   rawMarketingHtml.prefixTenantLinks exempts /shared/ so the link survives
+   path-prefix tenant routing (as it already does for /tenants/).
+   ========================================================================== */
+
+/* --- Layout --------------------------------------------------------------- */
+/* 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; }
+.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); }
+.section--surface { background: var(--color-surface); }
+
+/* --- Buttons -------------------------------------------------------------- */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
+  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
+  padding: .8em 1.6em; border-radius: var(--radius-full); border: 2px solid transparent;
+  transition: transform .12s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
+}
+.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: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:hover { border-color: var(--color-accent); }
+
+/* --- Announcement variants ------------------------------------------------ */
+/* (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;
+}
+/* (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;
+  animation: chrome-marquee 22s linear infinite;
+}
+.announce-marquee__track span { padding-inline: 1.5rem; }
+@keyframes chrome-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+@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); }
+.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 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); }
+
+/* --- Top utility bar (FDA warning + utility nav) -------------------------- */
+.topbar-warning {
+  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; }
+
+.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: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 .social { display: flex; gap: 12px; }
+.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::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; }
+
+/* --- Header / nav --------------------------------------------------------- */
+.site-header { position: sticky; top: 0; z-index: 100; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
+.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; }
+.brand .b-prime { color: var(--color-accent); }
+.brand .b-vapor { color: var(--color-text); }
+.brand .b-club { color: var(--color-primary); }
+
+.header-search { flex: 1; max-width: 560px; position: relative; }
+.header-search input {
+  width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-full);
+  padding: 11px 46px 11px 18px; font-size: .9rem; background: var(--color-surface); color: var(--color-text);
+}
+.header-search input::placeholder { color: var(--color-muted); }
+.header-search button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 6px; }
+.header-search svg { width: 20px; height: 20px; stroke: var(--color-primary); fill: none; stroke-width: 2; }
+
+.header-actions { display: flex; align-items: center; gap: 16px; }
+.header-actions a { display: inline-flex; align-items: center; color: var(--color-text); }
+.header-actions a:hover { color: var(--color-primary); }
+.header-actions svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; }
+.header-actions .cart { position: relative; }
+.header-actions .cart .count {
+  position: absolute; top: -6px; right: -8px; background: var(--color-primary); color: var(--color-primary-contrast);
+  font-size: .62rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: var(--radius-full);
+  display: grid; place-items: center; padding: 0 4px;
+}
+.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 6px; }
+.hamburger span { width: 26px; height: 2px; background: var(--color-text); border-radius: 2px; }
+
+/* --- 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); }
+/* Flat links (bigd/giant) */
+.primary-nav a { font-weight: 600; font-size: .92rem; color: var(--color-text); padding: 6px 2px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
+.primary-nav a:hover { color: var(--color-primary); border-color: var(--color-primary); }
+.primary-nav a.is-flag { color: var(--color-sale); }
+/* Nav items with dropdowns (PVC mega) */
+.primary-nav .nav-item { position: relative; }
+.primary-nav .nav-item > a { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: .92rem; color: var(--color-text); padding: 14px 2px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
+.primary-nav .nav-item > a:hover, .primary-nav .nav-item:focus-within > a { color: var(--color-primary); border-color: var(--color-primary); }
+.primary-nav .nav-item > a.is-flag { color: var(--color-sale); }
+.primary-nav .nav-item > a.is-flag:hover, .primary-nav .nav-item.is-flag:focus-within > a { border-color: var(--color-sale); }
+.primary-nav .caret, .primary-nav a .caret { font-size: .7em; margin-left: 4px; opacity: .7; }
+.primary-nav a .new-badge, .primary-nav .new-badge {
+  display: inline-block; background: var(--color-sale); color: var(--color-primary-contrast); font-size: .58rem; font-weight: 800;
+  letter-spacing: .06em; padding: 2px 5px; border-radius: var(--radius-sm); margin-left: 6px; vertical-align: middle;
+}
+/* Second-row nav bar (bigd) + nav-bar container (PVC) */
+.primary-nav-bar { border-top: 1px solid var(--color-border); background: var(--color-surface); }
+.primary-nav-bar .container { padding-block: 4px; }
+.primary-nav-bar .primary-nav > ul { gap: clamp(10px, 1.4vw, 20px); }
+.primary-nav-bar .primary-nav a { padding-block: 10px; }
+
+.mega { position: absolute; top: 100%; left: 0; z-index: 90; min-width: 260px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-md); padding: 14px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .14s ease, transform .14s ease, visibility .14s; }
+.mega--wide { min-width: 460px; }
+.nav-item:hover > .mega, .nav-item:focus-within > .mega { opacity: 1; visibility: visible; transform: none; }
+.mega__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 22px; }
+.mega__col h4 { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); margin: 6px 8px 4px; }
+.mega a { display: block; padding: 8px; border-radius: var(--radius-sm); font-size: .9rem; color: var(--color-text); font-weight: 500; }
+.mega a:hover { background: var(--color-surface-2); color: var(--color-primary); text-decoration: none; }
+/* Keyboard parity: tabbing a nav trigger opens its panel (:focus-within above);
+   give every keyboard-focused nav + mega link a visible token-tinted ring. */
+.primary-nav a:focus-visible,
+.primary-nav .nav-item > a:focus-visible,
+.mega a:focus-visible {
+  outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm);
+}
+
+/* --- Section headers ------------------------------------------------------ */
+.sec-head { text-align: center; max-width: 62ch; margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); }
+.sec-head .eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary); margin-bottom: .55rem; }
+.sec-head p { margin-top: .7rem; font-size: 1.02rem; }
+.sec-head--between { display: flex; align-items: baseline; justify-content: space-between; text-align: left; max-width: none; gap: 16px; }
+.link-more { font-family: var(--font-display); font-weight: 600; color: var(--color-primary); white-space: nowrap; }
+.link-more:hover { text-decoration: underline; }
+
+/* --- Brand / category tile grid ------------------------------------------- */
+.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 20px); }
+.tile {
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
+  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
+  padding: 26px 18px; min-height: 148px; text-align: center; transition: transform .14s, box-shadow .14s, border-color .14s;
+}
+.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-surface-2); }
+.tile img { max-height: 66px; width: auto; object-fit: contain; }
+.tile span { font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--color-text); }
+
+/* --- Brand grid / logo wall (Shop by Brands) ------------------------------ */
+/* Denser than .tile-grid: auto-fills many brand logos, with a text wordmark
+   fallback (.brand-tile__text or bare anchor text) when a logo isn't rehosted.
+   Raw-chrome parity for the shared <BrandGrid> component (unit W1). Covers both
+   image-logo walls (~dozens of logos) and text-wordmark tiles. */
+.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: clamp(10px, 1.4vw, 16px); }
+.brand-tile {
+  display: flex; align-items: center; justify-content: center;
+  min-height: 92px; padding: 18px 16px; text-align: center;
+  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
+  font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: .01em; color: var(--color-text);
+  transition: transform .14s, box-shadow .14s, border-color .14s, color .14s;
+}
+.brand-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-primary); color: var(--color-primary); }
+.brand-tile img { max-height: 46px; max-width: 100%; width: auto; object-fit: contain; }
+.brand-tile__text { display: inline-block; }
+
+/* --- Blog / article cards + tag-filter cloud (W4) -------------------------- */
+/* Raw-chrome parity for the shared <ArticleCard> + <TagFilterCloud> components.
+   Presentational over imported/source-copied blog data — never fabricated. */
+.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 28px); }
+.article-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
+.article-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-surface-2); }
+.article-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-surface-2); }
+.article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
+.article-card:hover .article-card__media img { transform: scale(1.04); }
+.article-card__ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--color-surface-2), color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-2))); }
+.article-card__body { display: flex; flex-direction: column; gap: .5rem; padding: clamp(16px, 2vw, 22px); }
+.article-card__tag { align-self: flex-start; position: relative; z-index: 1; font-family: var(--font-display); font-weight: 700; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); }
+a.article-card__tag:hover { text-decoration: underline; }
+.article-card__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.25; color: var(--color-text); }
+.article-card__title a { color: inherit; }
+.article-card__title a::after { content: ""; position: absolute; inset: 0; }
+.article-card__title a:hover { color: var(--color-primary); }
+.article-card__excerpt { font-size: .92rem; line-height: 1.5; color: var(--color-muted); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.article-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin-top: .15rem; font-size: .78rem; color: var(--color-muted); }
+.article-card__meta > * + *::before { content: "\00b7"; margin-right: .75rem; color: var(--color-border); }
+.article-card__author { font-weight: 600; color: var(--color-text); }
+
+.tag-cloud__title { font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); margin-bottom: .6rem; }
+.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
+.tag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text); font-size: .85rem; font-weight: 600; transition: background .15s ease, color .15s ease, border-color .15s ease; }
+.tag-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
+.tag-chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-contrast); }
+.tag-chip__count { font-size: .72rem; font-weight: 700; color: var(--color-muted); }
+.tag-chip.is-active .tag-chip__count { color: color-mix(in srgb, var(--color-primary-contrast) 78%, transparent); }
+.tag-chip:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
+
+/* --- Category cards (shop by category) ------------------------------------ */
+.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
+.cat-card {
+  position: relative; display: flex; align-items: flex-end; overflow: hidden;
+  min-height: 190px; border-radius: var(--radius-lg); color: var(--color-primary-contrast);
+  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
+  padding: 22px; transition: transform .14s, box-shadow .14s;
+}
+.cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
+.cat-card::after { content: "→"; position: absolute; top: 20px; right: 22px; font-size: 1.3rem; opacity: .85; }
+.cat-card h3 { color: var(--color-primary-contrast); font-size: 1.35rem; }
+.cat-card p { color: color-mix(in srgb, var(--color-primary-contrast) 82%, transparent); margin-top: 4px; font-size: .9rem; }
+
+/* --- 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; }
+
+/* --- Age gate (21+ interstitial; remembered per device) ------------------- */
+/* Overlay + on-dark surfaces derive from --color-text (deep ink) so no brand hex. */
+.age-gate { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; background: color-mix(in srgb, var(--color-text) 78%, transparent); }
+.age-gate.is-open { display: flex; }
+.age-gate__panel { width: min(30rem, 100%); background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(24px, 4vw, 40px); text-align: center; }
+.age-gate__mark { font-family: var(--font-display); font-weight: 800; letter-spacing: .04em; font-size: 1.05rem; color: var(--color-text); }
+.age-gate__mark .is-red { color: var(--color-primary); }
+.age-gate h2 { margin-top: 14px; font-size: clamp(1.4rem, 3vw, 1.85rem); }
+.age-gate p { margin-top: 10px; color: var(--color-text); }
+.age-gate__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
+.age-gate__actions .btn { min-width: 9rem; }
+.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); }
+
+/* --- 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 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
+   background every segment needs the on-dark contrast token, not just
+   .b-vapor — .b-prime/.b-club fell through to the header colors uncorrected,
+   which axe caught as color-contrast failures. */
+.footer-brand .brand .b-prime,
+.footer-brand .brand .b-vapor,
+.footer-brand .brand .b-club { color: var(--color-primary-contrast); }
+.footer-col h4 { color: var(--color-primary-contrast); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
+.footer-col ul { display: flex; flex-direction: column; gap: 9px; }
+.footer-col a { color: color-mix(in srgb, var(--color-primary-contrast) 78%, transparent); font-size: .92rem; }
+.footer-col a:hover { color: var(--color-primary-contrast); text-decoration: underline; }
+/* Newsletter signup (PVC) */
+.footer-news { margin-top: 14px; }
+.footer-news__row { display: flex; gap: 8px; }
+.footer-news input[type="email"] { flex: 1; min-width: 0; border: 1px solid color-mix(in srgb, var(--color-primary-contrast) 22%, transparent); border-radius: var(--radius-md); padding: 10px 12px; font-size: .88rem; background: color-mix(in srgb, var(--color-text) 88%, var(--color-primary-contrast)); color: var(--color-primary-contrast); }
+.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; }
+.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) */
+.trust-marks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 30px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--color-primary-contrast) 12%, transparent); }
+.trust-marks span { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; color: color-mix(in srgb, var(--color-primary-contrast) 82%, transparent); }
+.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-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; }
+
+/* --- 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; }
+@media (prefers-reduced-motion: reduce) {
+  .reveal { opacity: 1; transform: none; transition: none; }
+}
+
+/* --- Responsive ----------------------------------------------------------- */
+@media (max-width: 960px) {
+  .header-search { order: 3; flex-basis: 100%; max-width: none; }
+  .utility-nav ul { gap: 12px; }
+  .footer-grid { grid-template-columns: 1fr 1fr; }
+}
+@media (max-width: 1000px) {
+  .tile-grid { grid-template-columns: repeat(3, 1fr); }
+}
+@media (max-width: 860px) {
+  .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; }
+  .primary-nav.open { transform: none; }
+  .primary-nav > ul { flex-direction: column; align-items: stretch; gap: 4px; }
+  .primary-nav a, .primary-nav .nav-item > a { display: block; padding: 12px 4px; border-bottom: 1px solid var(--color-border); }
+  .hamburger { 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; }
+  .mega__cols { grid-template-columns: 1fr; }
+  .cat-grid { grid-template-columns: 1fr 1fr; }
+  .article-grid { grid-template-columns: 1fr 1fr; }
+  .footer-grid { grid-template-columns: 1fr 1fr; }
+}
+@media (max-width: 560px) {
+  .tile-grid { grid-template-columns: repeat(2, 1fr); }
+  .brand-grid { grid-template-columns: repeat(auto-fill, minmax(44%, 1fr)); }
+  .cat-grid { grid-template-columns: 1fr; }
+  .article-grid { grid-template-columns: 1fr; }
+  .footer-grid { grid-template-columns: 1fr; }
+  .utility-nav .container { flex-wrap: wrap; }
+}

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

@@ -0,0 +1,34 @@
+---
+/**
+ * <Badge> — tiny mono-uppercase pill used over product imagery and inline.
+ * Theme-agnostic: colors map to CSS-var-backed Tailwind utilities.
+ */
+interface Props {
+  /** `soldout` is the out-of-stock state; `compliant` marks a
+   *  compliance-verified item (age/lab/regulatory). */
+  variant: "sale" | "new" | "low-stock" | "soldout" | "compliant";
+  /** Visible text. May also be supplied via the default slot. */
+  label?: string;
+  class?: string;
+}
+
+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",
+  soldout: "bg-surface text-muted border border-border",
+  compliant: "bg-[var(--color-success)] text-white",
+};
+---
+
+<span
+  class:list={[
+    "inline-flex items-center rounded-full px-2 py-0.5 font-mono text-[0.62rem] uppercase tracking-[0.12em] leading-none whitespace-nowrap",
+    variants[variant],
+    className,
+  ]}
+>
+  {label}<slot />
+</span>

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

@@ -0,0 +1,45 @@
+---
+/**
+ * <Breadcrumbs> — semantic breadcrumb trail. The last crumb is the current
+ * page (aria-current, not a link). No own container — inherits parent width.
+ */
+import { withBase } from "@/lib/basePath";
+
+interface Props {
+  crumbs: { label: string; href: string }[];
+}
+
+const { crumbs } = Astro.props;
+const { basePath } = Astro.locals;
+---
+
+<nav aria-label="Breadcrumb" class="text-sm text-muted">
+  <ol class="flex flex-wrap items-center gap-x-1 gap-y-0.5">
+    {
+      crumbs.map((crumb, i) => {
+        const isLast = i === crumbs.length - 1;
+        return (
+          <li class="flex items-center gap-x-1">
+            {i > 0 && (
+              <span aria-hidden="true" class="select-none text-border">
+                /
+              </span>
+            )}
+            {isLast ? (
+              <span aria-current="page" class="text-text">
+                {crumb.label}
+              </span>
+            ) : (
+              <a
+                href={withBase(basePath, crumb.href)}
+                class="transition-colors hover:text-primary"
+              >
+                {crumb.label}
+              </a>
+            )}
+          </li>
+        );
+      })
+    }
+  </ol>
+</nav>

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

@@ -0,0 +1,56 @@
+---
+/**
+ * <CollectionCard> — editorial collection tile with a dark gradient scrim so
+ * the overlaid title reads on any image. Theme-agnostic (CSS-var-backed
+ * utilities only).
+ */
+import type { CatalogCollection } from "@tot/public-runtime";
+import Img from "@/components/Img.astro";
+import { withBase } from "@/lib/basePath";
+
+interface Props {
+  collection: CatalogCollection;
+  productCount?: number;
+}
+
+const { collection, productCount } = Astro.props;
+const { basePath } = Astro.locals;
+const image = collection.image;
+---
+
+<a
+  href={withBase(basePath, `/collections/${collection.handle}`)}
+  class="group relative block aspect-[3/2] overflow-hidden rounded-md bg-border"
+  data-reveal
+>
+  <Img
+    src={image?.url}
+    rehosted={image?.rehosted}
+    seed={image?.id ?? collection.handle}
+    label={collection.title}
+    alt={image?.alt ?? collection.title}
+    width={image?.width ?? 800}
+    height={image?.height ?? 600}
+    sizes="(min-width:1024px) 33vw, (min-width:640px) 50vw, 100vw"
+    class="h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-[1.03]"
+  />
+  <!-- Scrim: deep enough at the foot that white text passes AA over any image
+       (incl. the lighter placeholder pairs). -->
+  <div
+    class="absolute inset-0 bg-gradient-to-t from-black/75 via-black/20 to-transparent"
+    aria-hidden="true"
+  >
+  </div>
+  <div class="absolute inset-x-0 bottom-0 p-4 sm:p-5">
+    <h3 class="font-display text-xl font-semibold text-white drop-shadow-sm sm:text-2xl">
+      {collection.title}
+    </h3>
+    {
+      productCount != null && (
+        <p class="mt-0.5 font-mono text-[0.68rem] uppercase tracking-[0.12em] text-white/80">
+          {productCount} {productCount === 1 ? "piece" : "pieces"}
+        </p>
+      )
+    }
+  </div>
+</a>