@blamejs/blamejs-shop 0.3.54 → 0.3.55

package/CHANGELOG.md

@@ -8,6 +8,8 @@ upgrading across more than a few patches at a time.
 
 ## v0.3.x
 
+- v0.3.55 (2026-06-02) — **Accessibility: field-level form-error messages and horizontally scrollable admin tables.** Two accessibility improvements. When a storefront form is rejected, the specific field at fault is now marked for assistive technology with an inline error message tied to that input, in addition to the existing summary at the top of the form. And wide tables in the admin console now scroll horizontally inside their own container instead of overflowing the page on a narrow or zoomed viewport. **Fixed:** *Field-level error messages on storefront forms* — When the address, review, product-question, or support-ticket form is rejected, the offending field is now marked aria-invalid with an inline error message associated to it (aria-describedby), so a screen-reader user is taken to the exact field to fix rather than only hearing a top-of-form summary. The server remains the only validator; this only changes how a rejected field is presented. Forms that fail on a whole-form condition continue to show the summary message. · *Admin tables reflow on narrow screens* — Wide data tables in the admin console (orders, products, inventory, and the rest) are now wrapped in a horizontal-scroll container, so columns stay reachable on a smaller laptop window, a split screen, or at high zoom instead of overflowing the layout. Column header semantics are preserved.
+
 - v0.3.54 (2026-06-02) — **In-store pickup, saved payment methods, and gift wrapping at checkout.** Three more built-but-unreachable capabilities are now wired end to end. Operators can offer in-store pickup with managed pickup locations and a fulfilment queue; signed-in customers can save a card and reuse it at checkout; and operators can offer gift wrapping with a per-order gift message. The gift-wrap fee is added as a real cart line so it is included in the charged total. **Added:** *In-store pickup (click and collect)* — Operators can define pickup locations and work a pickup queue in the admin console (filtered by location), and shoppers can choose 'Pick up in store' at checkout. The order page and a new account pickups view show the pickup status. A not-found pickup or location returns a clear not-found rather than a generic error. · *Saved payment methods* — When Stripe is configured, a signed-in customer can save a card via a secure setup flow (loaded through a route-scoped policy and a same-origin script, with no inline script), manage their saved cards under their account, set a default, and reuse a saved card at checkout. A customer can only ever see or change their own saved cards. · *Gift wrapping at checkout* — Operators can define gift-wrap options (with a fee) in the admin console, and shoppers can add a wrap plus a gift message and recipient at checkout. The wrap fee is added as a real cart line, so it is included in the order total and the amount charged — never applied after the charge.
 
 - v0.3.53 (2026-06-02) — **Back-in-stock notifications, operator-tunable search ranking, and trust badges.** Three capabilities that were built into the framework but reachable from no route are now wired end to end. A shopper looking at an out-of-stock variant can ask to be emailed when it returns; operators can tune how search results are ordered and pin products for specific queries; and operators can author trust badges that render at checkout and on the order-confirmation page. **Added:** *Back-in-stock notifications* — When a variant is out of stock, the product page now shows a 'Notify me when it's back' form. The shopper confirms by email (double opt-in), and a scheduled sweep emails everyone waiting when stock returns, with a one-click unsubscribe. The notify form is served on the cached product page and is protected by same-site and fetch-metadata checks. · *Operator-tunable search ranking* — A new Search ranking screen in the admin console lets an operator define weighted ranking signals, activate a weight set, and pin specific products to the top for a given query. Ranking is applied to the search results; if a ranking configuration is missing or invalid, search falls back to its default order rather than erroring. · *Trust badges* — A new Trust badges screen lets an operator author badges (with scheduling windows) that render at checkout and on the order-confirmation page, with impression tracking. Badge content — including any SVG — is sanitized when saved.

package/lib/admin.js

@@ -181,6 +181,16 @@ function _htmlEscape(s) {
   return b.template.escapeHtml(String(s));
 }
 
+// Wrap a built data-table string in a horizontal-scroll container so a
+// narrow viewport scrolls the table rather than the whole page (.table-wrap
+// is defined in admin.css — WCAG 1.4.10 reflow). Layout-only tables
+// (order-totals) are NOT wrapped — they never overflow. `tableHtml` is
+// already-escaped markup assembled by the caller; this helper interpolates
+// no untrusted data, so it is XSS-neutral.
+function _tableWrap(tableHtml) {
+  return "<div class=\"table-wrap\">" + tableHtml + "</div>";
+}
+
 // Strict integer coercion for money / count form fields. Refuses
 // "50abc" / "" / floats, unlike parseInt's loose prefix match (which
 // silently turns "50abc" into 50). Accepts an already-numeric value
@@ -10508,7 +10518,7 @@ function renderDashboard(opts) {
     }).join("");
     otherCurrencies =
       "<section><h2>Other currencies in window</h2><div class=\"panel\">" +
-      "<table><thead><tr><th scope=\"col\">Currency</th><th scope=\"col\" class=\"num\">Orders</th><th scope=\"col\" class=\"num\">Revenue</th></tr></thead><tbody>" + rows + "</tbody></table>" +
+      _tableWrap("<table><thead><tr><th scope=\"col\">Currency</th><th scope=\"col\" class=\"num\">Orders</th><th scope=\"col\" class=\"num\">Revenue</th></tr></thead><tbody>" + rows + "</tbody></table>") +
       "</div></section>";
   }
 
@@ -10542,11 +10552,11 @@ function renderDashboard(opts) {
     "<section><h2>Catalog + activity</h2><div class=\"two-col\">" +
     "  <div class=\"panel\">" +
     "    <h3 class=\"subhead\">Top SKUs by units sold</h3>" +
-    "    <table><thead><tr><th scope=\"col\">SKU</th><th scope=\"col\" class=\"num\">Units</th><th scope=\"col\" class=\"num\">Revenue</th></tr></thead><tbody>" + topRows + "</tbody></table>" +
+    "    " + _tableWrap("<table><thead><tr><th scope=\"col\">SKU</th><th scope=\"col\" class=\"num\">Units</th><th scope=\"col\" class=\"num\">Revenue</th></tr></thead><tbody>" + topRows + "</tbody></table>") +
     "  </div>" +
     "  <div class=\"panel\">" +
     "    <h3 class=\"subhead\">Recent orders</h3>" +
-    "    <table><thead><tr><th scope=\"col\">Order</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"num\">Total</th></tr></thead><tbody>" + recentRows + "</tbody></table>" +
+    "    " + _tableWrap("<table><thead><tr><th scope=\"col\">Order</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"num\">Total</th></tr></thead><tbody>" + recentRows + "</tbody></table>") +
     "  </div>" +
     "</div></section>";
 
@@ -10807,10 +10817,10 @@ function renderAdminIntegrations(opts) {
     "<section>" +
       "<h2>Integrations</h2>" +
       "<p class=\"meta\">Every integration is off until you supply its credentials — set them as deployment secrets, then redeploy. Nothing is enabled without your keys.</p>" +
-      "<div class=\"panel\"><table>" +
+      "<div class=\"panel\">" + _tableWrap("<table>" +
         "<thead><tr><th scope=\"col\">Integration</th><th scope=\"col\">Status</th><th scope=\"col\">To enable</th></tr></thead>" +
         "<tbody>" + rows + "</tbody>" +
-      "</table></div>" +
+      "</table>") + "</div>" +
       "<p class=\"meta mt-125\">Sign in with Apple and PayPal are planned. “Sign in with Shop” / Shop Pay isn't available to a self-hosted store. See the README “Optional integrations” section for full setup steps.</p>" +
       "<div class=\"actions-row\"><a class=\"btn btn--ghost\" href=\"/admin\">Back</a></div>" +
     "</section>";
@@ -10836,7 +10846,7 @@ function renderAdminProducts(opts) {
       "</div></td></tr>";
   }).join("");
   var table = products.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Title</th><th scope=\"col\">Slug</th><th scope=\"col\">Status</th><th scope=\"col\">Action</th></tr></thead><tbody>" + rows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Title</th><th scope=\"col\">Slug</th><th scope=\"col\">Status</th><th scope=\"col\">Action</th></tr></thead><tbody>" + rows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No products yet — create your first one below.</p>";
   var body =
     "<section><h2>Products</h2>" + created + notice + table +
@@ -10892,7 +10902,7 @@ function renderAdminOrders(opts) {
   }).join("");
 
   var table = orders.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Order</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"num\">Items</th><th scope=\"col\" class=\"num\">Total</th><th scope=\"col\">Placed</th></tr></thead><tbody>" + rows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Order</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"num\">Items</th><th scope=\"col\" class=\"num\">Total</th><th scope=\"col\">Placed</th></tr></thead><tbody>" + rows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No orders" + (active ? " with status “" + _htmlEscape(active) + "”" : " yet") + ".</p>";
 
   var body = "<section><h2>Orders</h2>" + notice + chips + table + "</section>";
@@ -10964,7 +10974,7 @@ function renderAdminAudit(opts) {
   }).join("");
 
   var table = rows.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Time</th><th scope=\"col\">Action</th><th scope=\"col\">Outcome</th><th scope=\"col\">Actor</th><th scope=\"col\">Resource</th><th scope=\"col\">Details</th></tr></thead><tbody>" + bodyRows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Time</th><th scope=\"col\">Action</th><th scope=\"col\">Outcome</th><th scope=\"col\">Actor</th><th scope=\"col\">Resource</th><th scope=\"col\">Details</th></tr></thead><tbody>" + bodyRows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No audit events match.</p>";
 
   // Pager: Newer steps back one page (disabled at offset 0); Older steps
@@ -11055,7 +11065,7 @@ function renderAdminReports(opts) {
   }).join("");
   var funnelBlock =
     "<section><h2>Order status</h2><div class=\"panel\">" +
-      "<table><thead><tr><th scope=\"col\">Stage</th><th scope=\"col\" class=\"num\">Orders</th></tr></thead><tbody>" + funnelRows + "</tbody></table>" +
+      _tableWrap("<table><thead><tr><th scope=\"col\">Stage</th><th scope=\"col\" class=\"num\">Orders</th></tr></thead><tbody>" + funnelRows + "</tbody></table>") +
     "</div></section>";
 
   // Top products by gross revenue across the window.
@@ -11069,7 +11079,7 @@ function renderAdminReports(opts) {
     : "<tr><td colspan=\"3\" class=\"empty\">No sales in this window.</td></tr>";
   var topBlock =
     "<section><h2>Top products</h2><div class=\"panel\">" +
-      "<table><thead><tr><th scope=\"col\">SKU</th><th scope=\"col\" class=\"num\">Units</th><th scope=\"col\" class=\"num\">Revenue</th></tr></thead><tbody>" + topRows + "</tbody></table>" +
+      _tableWrap("<table><thead><tr><th scope=\"col\">SKU</th><th scope=\"col\" class=\"num\">Units</th><th scope=\"col\" class=\"num\">Revenue</th></tr></thead><tbody>" + topRows + "</tbody></table>") +
     "</div></section>";
 
   // By-day revenue series — one row per (day, currency) bucket.
@@ -11088,7 +11098,7 @@ function renderAdminReports(opts) {
     : "<tr><td colspan=\"6\" class=\"empty\">No sales in this window.</td></tr>";
   var dayBlock =
     "<section><h2>By day</h2><div class=\"panel\">" +
-      "<table><thead><tr><th scope=\"col\">Date</th><th scope=\"col\">Currency</th><th scope=\"col\" class=\"num\">Orders</th><th scope=\"col\" class=\"num\">Gross</th><th scope=\"col\" class=\"num\">Net</th><th scope=\"col\" class=\"num\">Refunds</th></tr></thead><tbody>" + dayRows + "</tbody></table>" +
+      _tableWrap("<table><thead><tr><th scope=\"col\">Date</th><th scope=\"col\">Currency</th><th scope=\"col\" class=\"num\">Orders</th><th scope=\"col\" class=\"num\">Gross</th><th scope=\"col\" class=\"num\">Net</th><th scope=\"col\" class=\"num\">Refunds</th></tr></thead><tbody>" + dayRows + "</tbody></table>") +
     "</div></section>";
 
   var body =
@@ -11180,7 +11190,7 @@ function renderAdminExports(opts) {
     "</tr>";
   }).join("");
   var jobTable = exportsRows.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Format</th><th scope=\"col\">Window</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"num\">Rows</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + jobRows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Format</th><th scope=\"col\">Window</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"num\">Rows</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + jobRows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No scheduled exports yet.</p>";
 
   var scheduleFmtOptions = formats.map(function (f) {
@@ -11283,7 +11293,7 @@ function renderAdminShippingLabels(opts) {
 
   var rows = labels.map(_shippingLabelRow).join("");
   var table = labels.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Carrier</th><th scope=\"col\">Tracking</th><th scope=\"col\" class=\"num\">Cost</th><th scope=\"col\">Broker</th><th scope=\"col\">Status</th><th scope=\"col\">Label</th><th scope=\"col\">Created</th></tr></thead><tbody>" + rows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Carrier</th><th scope=\"col\">Tracking</th><th scope=\"col\" class=\"num\">Cost</th><th scope=\"col\">Broker</th><th scope=\"col\">Status</th><th scope=\"col\">Label</th><th scope=\"col\">Created</th></tr></thead><tbody>" + rows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No " + _htmlEscape(status) + " labels" + (status === "voided" ? " in this window" : "") + ".</p>";
 
   var body =
@@ -11305,7 +11315,7 @@ function renderAdminShippingLabelsPending(opts) {
   var notice = opts.notice ? "<div class=\"banner banner--warn\">" + _htmlEscape(opts.notice) + "</div>" : "";
   var rows = labels.map(_shippingLabelRow).join("");
   var table = labels.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Carrier</th><th scope=\"col\">Tracking</th><th scope=\"col\" class=\"num\">Cost</th><th scope=\"col\">Broker</th><th scope=\"col\">Status</th><th scope=\"col\">Label</th><th scope=\"col\">Created</th></tr></thead><tbody>" + rows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Carrier</th><th scope=\"col\">Tracking</th><th scope=\"col\" class=\"num\">Cost</th><th scope=\"col\">Broker</th><th scope=\"col\">Status</th><th scope=\"col\">Label</th><th scope=\"col\">Created</th></tr></thead><tbody>" + rows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No labels awaiting a broker mint.</p>";
   var body =
     "<section><h2>Shipping labels</h2>" + notice +
@@ -11361,7 +11371,7 @@ function renderAdminShippingLabelCosts(opts) {
     : "<tr><td colspan=\"4\" class=\"empty\">No labels purchased in this window.</td></tr>";
   var brokerBlock =
     "<section><h2>By broker</h2><div class=\"panel\">" +
-      "<table><thead><tr><th scope=\"col\">Broker</th><th scope=\"col\">Currency</th><th scope=\"col\" class=\"num\">Labels</th><th scope=\"col\" class=\"num\">Spend</th></tr></thead><tbody>" + brokerRows + "</tbody></table>" +
+      _tableWrap("<table><thead><tr><th scope=\"col\">Broker</th><th scope=\"col\">Currency</th><th scope=\"col\" class=\"num\">Labels</th><th scope=\"col\" class=\"num\">Spend</th></tr></thead><tbody>" + brokerRows + "</tbody></table>") +
     "</div></section>";
 
   var body =
@@ -11394,7 +11404,7 @@ function renderAdminOrder(opts) {
       "</tr>";
   }).join("");
   var linesTable = (o.lines && o.lines.length)
-    ? "<table><thead><tr><th scope=\"col\">SKU</th><th scope=\"col\" class=\"num\">Qty</th><th scope=\"col\" class=\"num\">Unit</th><th scope=\"col\" class=\"num\">Line</th></tr></thead><tbody>" + lineRows + "</tbody></table>"
+    ? _tableWrap("<table><thead><tr><th scope=\"col\">SKU</th><th scope=\"col\" class=\"num\">Qty</th><th scope=\"col\" class=\"num\">Unit</th><th scope=\"col\" class=\"num\">Line</th></tr></thead><tbody>" + lineRows + "</tbody></table>")
     : "<p class=\"empty\">No line items recorded.</p>";
 
   function _total(label, minor, strong) {
@@ -11482,7 +11492,7 @@ function renderAdminOrder(opts) {
           "<td>" + _htmlEscape(_fmtDate(e.occurred_at)) + "</td></tr>";
       }).join("");
       var eventsTable = (s.events && s.events.length)
-        ? "<table><thead><tr><th scope=\"col\">Status</th><th scope=\"col\">Location</th><th scope=\"col\">When</th></tr></thead><tbody>" + eventRows + "</tbody></table>"
+        ? _tableWrap("<table><thead><tr><th scope=\"col\">Status</th><th scope=\"col\">Location</th><th scope=\"col\">When</th></tr></thead><tbody>" + eventRows + "</tbody></table>")
         : "<p class=\"empty\">No carrier events yet.</p>";
       var statusOpts = statuses.map(function (st) {
         return "<option value=\"" + _htmlEscape(st) + "\">" + _htmlEscape(st) + "</option>";
@@ -11608,7 +11618,7 @@ function _orderLabelPanel(orderId, shipment, carriers, packageTypes, purchasedVi
     "</tr>";
   }).join("");
   var labelsTable = labels.length
-    ? "<table><thead><tr><th scope=\"col\">Carrier</th><th scope=\"col\">Tracking</th><th scope=\"col\" class=\"num\">Cost</th><th scope=\"col\">Status</th><th scope=\"col\">Label</th><th scope=\"col\"></th></tr></thead><tbody>" + labelRows + "</tbody></table>"
+    ? _tableWrap("<table><thead><tr><th scope=\"col\">Carrier</th><th scope=\"col\">Tracking</th><th scope=\"col\" class=\"num\">Cost</th><th scope=\"col\">Status</th><th scope=\"col\">Label</th><th scope=\"col\"></th></tr></thead><tbody>" + labelRows + "</tbody></table>")
     : "<p class=\"empty\">No labels recorded for this shipment.</p>";
   var carrierOpts = carriers.map(function (c) {
     return "<option value=\"" + _htmlEscape(c) + "\">" + _htmlEscape(c) + "</option>";
@@ -11687,7 +11697,7 @@ function _orderSplitPanel(o, plans) {
     ? "<form method=\"post\" action=\"/admin/orders/" + _htmlEscape(o.id) + "/split/plan\" class=\"return-action\">" +
         "<h4>Plan a manual split</h4>" +
         "<p class=\"meta\">Assign each line to a parcel number (lines sharing a number ship together). Every unit must land in a parcel.</p>" +
-        "<table><thead><tr><th scope=\"col\">Line (order qty)</th><th scope=\"col\">Parcel</th><th scope=\"col\">Qty</th></tr></thead><tbody>" + lineRows + "</tbody></table>" +
+        _tableWrap("<table><thead><tr><th scope=\"col\">Line (order qty)</th><th scope=\"col\">Parcel</th><th scope=\"col\">Qty</th></tr></thead><tbody>" + lineRows + "</tbody></table>") +
         "<button class=\"btn\" type=\"submit\">Propose split</button>" +
       "</form>"
     : "<p class=\"empty\">No order lines to split.</p>";
@@ -11720,7 +11730,7 @@ function renderAdminPickLists(opts) {
     "</tr>";
   }).join("");
   var table = lists.length
-    ? "<table><thead><tr><th scope=\"col\">List</th><th scope=\"col\">Location</th><th scope=\"col\">Status</th><th scope=\"col\">Sort</th><th scope=\"col\">Generated</th></tr></thead><tbody>" + rows + "</tbody></table>"
+    ? _tableWrap("<table><thead><tr><th scope=\"col\">List</th><th scope=\"col\">Location</th><th scope=\"col\">Status</th><th scope=\"col\">Sort</th><th scope=\"col\">Generated</th></tr></thead><tbody>" + rows + "</tbody></table>")
     : "<p class=\"empty\">No pick lists yet. Generate one from the open orders at a location.</p>";
 
   var statusFilter = "<form method=\"get\" action=\"/admin/pick-lists\" class=\"form-inline\">" +
@@ -11807,7 +11817,7 @@ function renderAdminPickList(opts) {
     "</tr>";
   }).join("");
   var linesTable = (l.lines && l.lines.length)
-    ? "<table><thead><tr><th scope=\"col\">Aisle/bin</th><th scope=\"col\">SKU</th><th scope=\"col\">Order</th><th scope=\"col\" class=\"num\">Expected</th><th scope=\"col\">Picked</th><th scope=\"col\"></th></tr></thead><tbody>" + lineRows + "</tbody></table>"
+    ? _tableWrap("<table><thead><tr><th scope=\"col\">Aisle/bin</th><th scope=\"col\">SKU</th><th scope=\"col\">Order</th><th scope=\"col\" class=\"num\">Expected</th><th scope=\"col\">Picked</th><th scope=\"col\"></th></tr></thead><tbody>" + lineRows + "</tbody></table>")
     : "<p class=\"empty\">This worksheet has no lines.</p>";
 
   // Variance summary — short / over picks only (the discrepancies feed
@@ -11822,7 +11832,7 @@ function renderAdminPickList(opts) {
   }).join("");
   var variancePanel = discRows
     ? "<div class=\"panel mt\"><h3 class=\"subhead\">Variances</h3>" +
-        "<table><thead><tr><th scope=\"col\">SKU</th><th scope=\"col\" class=\"num\">Expected</th><th scope=\"col\" class=\"num\">Picked</th><th scope=\"col\" class=\"num\">Diff</th></tr></thead><tbody>" + discRows + "</tbody></table></div>"
+        _tableWrap("<table><thead><tr><th scope=\"col\">SKU</th><th scope=\"col\" class=\"num\">Expected</th><th scope=\"col\" class=\"num\">Picked</th><th scope=\"col\" class=\"num\">Diff</th></tr></thead><tbody>" + discRows + "</tbody></table>") + "</div>"
     : "";
 
   // Complete / cancel actions — only on a non-terminal worksheet.
@@ -11946,7 +11956,7 @@ function renderAdminCustomers(opts) {
   var notice = opts.notice ? "<div class=\"banner banner--warn\">" + _htmlEscape(opts.notice) + "</div>" : "";
 
   var table = customers.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Name</th><th scope=\"col\">ID</th><th scope=\"col\">Joined</th><th scope=\"col\">Sign-in method</th><th scope=\"col\" class=\"num\">Orders</th><th scope=\"col\"><span class=\"sr-only\">Manage</span></th></tr></thead><tbody>" + rows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Name</th><th scope=\"col\">ID</th><th scope=\"col\">Joined</th><th scope=\"col\">Sign-in method</th><th scope=\"col\" class=\"num\">Orders</th><th scope=\"col\"><span class=\"sr-only\">Manage</span></th></tr></thead><tbody>" + rows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No customers yet.</p>";
 
   // Cursor pager — a Next link when the page filled and more rows remain.
@@ -11997,7 +12007,7 @@ function renderAdminCustomerDetail(opts) {
   }).join("");
   var ordersPanel = "<div class=\"panel\"><h3 class=\"subhead\">Recent orders</h3>" +
     ((opts.recent_orders || []).length
-      ? "<table><thead><tr><th scope=\"col\">Order</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"num\">Total</th><th scope=\"col\">Placed</th></tr></thead><tbody>" + orderRows + "</tbody></table>"
+      ? _tableWrap("<table><thead><tr><th scope=\"col\">Order</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"num\">Total</th><th scope=\"col\">Placed</th></tr></thead><tbody>" + orderRows + "</tbody></table>")
       : "<p class=\"empty\">No orders yet.</p>") +
   "</div>";
 
@@ -12021,7 +12031,7 @@ function renderAdminCustomerDetail(opts) {
       "</tr>";
     }).join("");
     var histTable = (opts.store_credit_history || []).length
-      ? "<table><thead><tr><th scope=\"col\">Kind</th><th scope=\"col\" class=\"num\">Amount</th><th scope=\"col\" class=\"num\">Balance after</th><th scope=\"col\">Reason</th><th scope=\"col\">When</th></tr></thead><tbody>" + histRows + "</tbody></table>"
+      ? _tableWrap("<table><thead><tr><th scope=\"col\">Kind</th><th scope=\"col\" class=\"num\">Amount</th><th scope=\"col\" class=\"num\">Balance after</th><th scope=\"col\">Reason</th><th scope=\"col\">When</th></tr></thead><tbody>" + histRows + "</tbody></table>")
       : "<p class=\"empty\">No store-credit activity yet.</p>";
     creditPanel = "<div class=\"panel\"><h3 class=\"subhead\">Store credit</h3>" +
       creditNotice +
@@ -12321,7 +12331,7 @@ function renderAdminReturns(opts) {
   }).join("");
 
   var table = rmas.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">RMA</th><th scope=\"col\">Order</th><th scope=\"col\">Reason</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"num\">Items</th><th scope=\"col\" class=\"num\">Refund</th><th scope=\"col\">Requested</th></tr></thead><tbody>" + rows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">RMA</th><th scope=\"col\">Order</th><th scope=\"col\">Reason</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"num\">Items</th><th scope=\"col\" class=\"num\">Refund</th><th scope=\"col\">Requested</th></tr></thead><tbody>" + rows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No “" + _htmlEscape(active) + "” returns.</p>";
 
   var body = "<section><h2>Returns</h2>" + notice + chips + table + "</section>";
@@ -12341,7 +12351,7 @@ function renderAdminReturn(opts) {
       "<td>" + _htmlEscape(l.reason || "—") + "</td></tr>";
   }).join("");
   var linesTable = (r.lines && r.lines.length)
-    ? "<table><thead><tr><th scope=\"col\">SKU</th><th scope=\"col\" class=\"num\">Qty</th><th scope=\"col\">Reason</th></tr></thead><tbody>" + lineRows + "</tbody></table>"
+    ? _tableWrap("<table><thead><tr><th scope=\"col\">SKU</th><th scope=\"col\" class=\"num\">Qty</th><th scope=\"col\">Reason</th></tr></thead><tbody>" + lineRows + "</tbody></table>")
     : "<p class=\"empty\">No line items recorded.</p>";
 
   function _field(label, value) {
@@ -12483,7 +12493,7 @@ function renderAdminSupport(opts) {
   }).join("");
 
   var table = tickets.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Subject</th><th scope=\"col\">Category</th><th scope=\"col\">Status</th><th scope=\"col\">Priority</th><th scope=\"col\">Assignee</th><th scope=\"col\">Opened</th></tr></thead><tbody>" + rows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Subject</th><th scope=\"col\">Category</th><th scope=\"col\">Status</th><th scope=\"col\">Priority</th><th scope=\"col\">Assignee</th><th scope=\"col\">Opened</th></tr></thead><tbody>" + rows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No “" + _htmlEscape(active) + "” tickets.</p>";
 
   var body = "<section><h2>Support</h2>" + notice + chips + table + "</section>";
@@ -12641,7 +12651,7 @@ function renderAdminDsr(opts) {
   }).join("");
 
   var table = requests.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Customer</th><th scope=\"col\">Kind</th><th scope=\"col\">Jurisdiction</th><th scope=\"col\">Scope</th><th scope=\"col\">Status</th><th scope=\"col\">Requested</th></tr></thead><tbody>" + rows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Customer</th><th scope=\"col\">Kind</th><th scope=\"col\">Jurisdiction</th><th scope=\"col\">Scope</th><th scope=\"col\">Status</th><th scope=\"col\">Requested</th></tr></thead><tbody>" + rows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No “" + _htmlEscape(active) + "” privacy requests.</p>";
 
   var body = "<section><h2>Privacy requests</h2>" +
@@ -12724,7 +12734,7 @@ function renderAdminDsrDetail(opts) {
     previewHtml =
       "<div class=\"panel mt\"><h3 class=\"subhead\">Erasure preview (dry run — nothing was changed)</h3>" +
         (dRows
-          ? "<table><thead><tr><th scope=\"col\">Table</th><th scope=\"col\">Affected</th></tr></thead><tbody>" + dRows + "</tbody></table>"
+          ? _tableWrap("<table><thead><tr><th scope=\"col\">Table</th><th scope=\"col\">Affected</th></tr></thead><tbody>" + dRows + "</tbody></table>")
           : "<p class=\"empty\">No per-domain handlers wired.</p>") +
         (absent ? "<p class=\"meta\">Domains without a deletion handler: " + absent + "</p>" : "") +
         "<p class=\"meta\">Total affected: " + _htmlEscape(String(preview.total_affected)) + "</p>" +
@@ -12740,7 +12750,7 @@ function renderAdminDsrDetail(opts) {
       "</tr>";
   }).join("");
   var historyHtml = history.length
-    ? "<table><thead><tr><th scope=\"col\">Request</th><th scope=\"col\">Kind</th><th scope=\"col\">Status</th><th scope=\"col\">Requested</th></tr></thead><tbody>" + histRows + "</tbody></table>"
+    ? _tableWrap("<table><thead><tr><th scope=\"col\">Request</th><th scope=\"col\">Kind</th><th scope=\"col\">Status</th><th scope=\"col\">Requested</th></tr></thead><tbody>" + histRows + "</tbody></table>")
     : "<p class=\"empty\">No prior requests.</p>";
 
   var body =
@@ -12814,7 +12824,7 @@ function renderAdminExchanges(opts) {
   }).join("");
 
   var table = list.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Exchange</th><th scope=\"col\">Order</th><th scope=\"col\">Swap</th><th scope=\"col\">Reason</th><th scope=\"col\">Status</th><th scope=\"col\">Requested</th></tr></thead><tbody>" + rows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Exchange</th><th scope=\"col\">Order</th><th scope=\"col\">Swap</th><th scope=\"col\">Reason</th><th scope=\"col\">Status</th><th scope=\"col\">Requested</th></tr></thead><tbody>" + rows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No “" + _htmlEscape(active) + "” exchanges.</p>";
 
   var body = "<section><h2>Exchanges</h2>" + notice + chips + table + "</section>";
@@ -12962,7 +12972,7 @@ function renderAdminPickupLocations(opts) {
   }).join("");
 
   var table = list.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Code</th><th scope=\"col\">Name</th><th scope=\"col\">Address</th><th scope=\"col\">Capacity</th><th scope=\"col\">Lead time</th><th scope=\"col\">Action</th></tr></thead><tbody>" + rows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Code</th><th scope=\"col\">Name</th><th scope=\"col\">Address</th><th scope=\"col\">Capacity</th><th scope=\"col\">Lead time</th><th scope=\"col\">Action</th></tr></thead><tbody>" + rows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No active pickup locations yet. Add one below.</p>";
 
   var form =
@@ -13058,7 +13068,7 @@ function renderAdminPickups(opts) {
   var table = !selected
     ? "<p class=\"empty\">Add a pickup location first.</p>"
     : (list.length
-      ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Order</th><th scope=\"col\">Status</th><th scope=\"col\">Window</th><th scope=\"col\">Picked up</th><th scope=\"col\">Action</th></tr></thead><tbody>" + rows + "</tbody></table></div>"
+      ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Order</th><th scope=\"col\">Status</th><th scope=\"col\">Window</th><th scope=\"col\">Picked up</th><th scope=\"col\">Action</th></tr></thead><tbody>" + rows + "</tbody></table>") + "</div>"
       : "<p class=\"empty\">No pickups in this window for this location.</p>");
 
   var body = "<section><h2>Pickups</h2>" + moved + notice + selector + chips + table + "</section>";
@@ -13104,7 +13114,7 @@ function renderAdminGiftWraps(opts) {
   }).join("");
 
   var table = list.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">SKU</th><th scope=\"col\">Image</th><th scope=\"col\">Title</th><th scope=\"col\">Fee</th><th scope=\"col\">State</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + rows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">SKU</th><th scope=\"col\">Image</th><th scope=\"col\">Title</th><th scope=\"col\">Fee</th><th scope=\"col\">State</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + rows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No gift wraps yet. Define one below — the SKU must be a real catalog variant.</p>";
 
   var form =
@@ -13443,7 +13453,7 @@ function renderAdminInventory(opts) {
   }).join("");
 
   var table = rows.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">SKU</th><th scope=\"col\" class=\"num\">On hand</th><th scope=\"col\" class=\"num\">Held</th><th scope=\"col\" class=\"num\">Available</th><th scope=\"col\">Restock / threshold</th></tr></thead><tbody>" + body + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">SKU</th><th scope=\"col\" class=\"num\">On hand</th><th scope=\"col\" class=\"num\">Held</th><th scope=\"col\" class=\"num\">Available</th><th scope=\"col\">Restock / threshold</th></tr></thead><tbody>" + body + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No inventory rows" + (opts.low ? " below threshold" : " yet") + ".</p>";
 
   var createForm =
@@ -13550,7 +13560,7 @@ function renderAdminSubscriptionPlans(opts) {
   }).join("");
 
   var table = rows.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Price / interval</th><th scope=\"col\">Stripe price</th><th scope=\"col\">Variant</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Price / interval</th><th scope=\"col\">Stripe price</th><th scope=\"col\">Variant</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No subscription plans" + (af === "0" ? " archived" : af === "1" ? " active" : " yet") + ".</p>";
 
   var intervalOpts = ["month", "year", "week", "day"].map(function (iv) {
@@ -13651,7 +13661,7 @@ function renderAdminTaxRates(opts) {
       "</tr>";
     }).join("");
     table = rows.length
-      ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Category</th><th scope=\"col\" class=\"num\">Rate</th><th scope=\"col\">From</th><th scope=\"col\">Until</th><th scope=\"col\">Source</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table></div>"
+      ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Category</th><th scope=\"col\" class=\"num\">Rate</th><th scope=\"col\">From</th><th scope=\"col\">Until</th><th scope=\"col\">Source</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table>") + "</div>"
       : "<p class=\"empty\">No rates for " + _htmlEscape(jurisdiction) + " yet.</p>";
   }
 
@@ -13734,7 +13744,7 @@ function renderAdminTaxFilings(opts) {
   }).join("");
   var dueBlock = upcoming.length
     ? "<section><h2>Due soon or overdue</h2><div class=\"panel\">" +
-        "<table><thead><tr><th scope=\"col\">Jurisdiction</th><th scope=\"col\">Period</th><th scope=\"col\">Status</th><th scope=\"col\">Due</th></tr></thead><tbody>" + dueRows + "</tbody></table>" +
+        _tableWrap("<table><thead><tr><th scope=\"col\">Jurisdiction</th><th scope=\"col\">Period</th><th scope=\"col\">Status</th><th scope=\"col\">Due</th></tr></thead><tbody>" + dueRows + "</tbody></table>") +
       "</div></section>"
     : "";
 
@@ -13751,7 +13761,7 @@ function renderAdminTaxFilings(opts) {
       "</tr>";
   }).join("");
   var table = filings.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Jurisdiction</th><th scope=\"col\">Kind</th><th scope=\"col\">Period</th><th scope=\"col\">Due</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"num\">Collected</th><th scope=\"col\" class=\"num\">Owed</th></tr></thead><tbody>" + rows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Jurisdiction</th><th scope=\"col\">Kind</th><th scope=\"col\">Period</th><th scope=\"col\">Due</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"num\">Collected</th><th scope=\"col\" class=\"num\">Owed</th></tr></thead><tbody>" + rows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No filings" + (jurisdiction ? " for " + _htmlEscape(jurisdiction) : "") + " yet. Open a period below.</p>";
 
   // Open-a-period form.
@@ -13841,7 +13851,7 @@ function renderAdminTaxFiling(opts) {
       "</tr>";
   }).join("");
   var breakdownBlock = bkeys.length
-    ? "<section><h2>By rate</h2><div class=\"panel\"><table><thead><tr><th scope=\"col\">Rate</th><th scope=\"col\" class=\"num\">Orders</th><th scope=\"col\" class=\"num\">Taxable</th><th scope=\"col\" class=\"num\">Tax</th></tr></thead><tbody>" + breakdownRows + "</tbody></table></div></section>"
+    ? "<section><h2>By rate</h2><div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Rate</th><th scope=\"col\" class=\"num\">Orders</th><th scope=\"col\" class=\"num\">Taxable</th><th scope=\"col\" class=\"num\">Tax</th></tr></thead><tbody>" + breakdownRows + "</tbody></table>") + "</div></section>"
     : "";
 
   // Audit trail — submission + payment + amendment columns once recorded.
@@ -13862,7 +13872,7 @@ function renderAdminTaxFiling(opts) {
       trailRows += "<tr><td>Amended</td><td>" + _htmlEscape(f.amended_reason) +
         (f.amended_at != null ? " <span class=\"meta\">" + _htmlEscape(_fmtDate(f.amended_at)) + "</span>" : "") + "</td></tr>";
     }
-    trail = "<section><h2>Audit trail</h2><div class=\"panel\"><table><tbody>" + trailRows + "</tbody></table></div></section>";
+    trail = "<section><h2>Audit trail</h2><div class=\"panel\">" + _tableWrap("<table><tbody>" + trailRows + "</tbody></table>") + "</div></section>";
   }
 
   // Lifecycle actions — gated on the FSM. draft → compute; computed →
@@ -13937,7 +13947,7 @@ function renderAdminTaxFilingReport(opts) {
       "</tr>";
   }).join("");
   var table = (report.filings || []).length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Period</th><th scope=\"col\">Window</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"num\">Collected</th><th scope=\"col\" class=\"num\">Owed</th></tr></thead><tbody>" + rows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Period</th><th scope=\"col\">Window</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"num\">Collected</th><th scope=\"col\" class=\"num\">Owed</th></tr></thead><tbody>" + rows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No filings intersect this window.</p>";
 
   var body =
@@ -13981,7 +13991,7 @@ function renderAdminShipping(opts) {
   }).join("");
 
   var table = rows.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Title</th><th scope=\"col\">Slug</th><th scope=\"col\">Regions</th><th scope=\"col\" class=\"num\">Rates</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Title</th><th scope=\"col\">Slug</th><th scope=\"col\">Regions</th><th scope=\"col\" class=\"num\">Rates</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No shipping zones yet.</p>";
 
   var createForm =
@@ -14031,7 +14041,7 @@ function renderAdminShippingZone(opts) {
     "</tr>";
   }).join("");
   var rateTable = (z.rates || []).length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Service</th><th scope=\"col\" class=\"num\">Rate</th><th scope=\"col\">Bucket</th></tr></thead><tbody>" + rateRows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Service</th><th scope=\"col\" class=\"num\">Rate</th><th scope=\"col\">Bucket</th></tr></thead><tbody>" + rateRows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No rate rows.</p>";
 
   var head = "<p class=\"meta\"><a href=\"/admin/shipping\">&larr; Shipping</a> · <code class=\"order-id\">" + _htmlEscape(z.slug) + "</code> · " +
@@ -14193,7 +14203,7 @@ function renderAdminDiscounts(opts) {
     "</tr>";
   }).join("");
   var ruleTable = rules.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Rule</th><th scope=\"col\">Trigger</th><th scope=\"col\">Value</th><th scope=\"col\" class=\"num\">Priority</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + ruleRows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Rule</th><th scope=\"col\">Trigger</th><th scope=\"col\">Value</th><th scope=\"col\" class=\"num\">Priority</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + ruleRows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No automatic discount rules yet.</p>";
 
   var TRIGGERS = [
@@ -14256,7 +14266,7 @@ function renderAdminDiscounts(opts) {
       "</tr>";
     }).join("");
     var polTable = policies.length
-      ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Policy</th><th scope=\"col\" class=\"num\">Max codes</th><th scope=\"col\">Combines with</th><th scope=\"col\" class=\"num\">Order min</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + polRows + "</tbody></table></div>"
+      ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Policy</th><th scope=\"col\" class=\"num\">Max codes</th><th scope=\"col\">Combines with</th><th scope=\"col\" class=\"num\">Order min</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + polRows + "</tbody></table>") + "</div>"
       : "<p class=\"empty\">No stacking policies yet — without one, only one code applies per order.</p>";
     var polForm =
       "<div class=\"panel mt mw-40\">" +
@@ -14362,7 +14372,7 @@ function renderAdminSegments(opts) {
   }).join("");
 
   var table = segments.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Segment</th><th scope=\"col\">Rules</th><th scope=\"col\" class=\"num\">Members</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + rows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Segment</th><th scope=\"col\">Rules</th><th scope=\"col\" class=\"num\">Members</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + rows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No " + (filter === "archived" ? "archived " : (filter === "all" ? "" : "active ")) + "segments yet. Define one to start grouping customers for campaigns.</p>";
 
   var body = "<section><h2>Customer segments</h2>" + created + updated + archived + unarchived + recomputed + notice +
@@ -14504,7 +14514,7 @@ function renderAdminGiftCards(opts) {
   }).join("");
 
   var table = rows.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Code</th><th scope=\"col\" class=\"num\">Issued</th><th scope=\"col\" class=\"num\">Remaining</th><th scope=\"col\">Status</th><th scope=\"col\">Issued on</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Code</th><th scope=\"col\" class=\"num\">Issued</th><th scope=\"col\" class=\"num\">Remaining</th><th scope=\"col\">Status</th><th scope=\"col\">Issued on</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No gift cards" + (sf ? " " + _htmlEscape(sf) : " yet") + ".</p>";
 
   // The issue form composes the giftcards primitive's issue() — the
@@ -14571,7 +14581,7 @@ function renderAdminGiftCard(opts) {
     "</tr>";
   }).join("");
   var ledgerTable = ledger.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Type</th><th scope=\"col\" class=\"num\">Amount</th><th scope=\"col\" class=\"num\">Balance after</th><th scope=\"col\">Detail</th><th scope=\"col\">When</th></tr></thead><tbody>" + ledgerRows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Type</th><th scope=\"col\" class=\"num\">Amount</th><th scope=\"col\" class=\"num\">Balance after</th><th scope=\"col\">Detail</th><th scope=\"col\">When</th></tr></thead><tbody>" + ledgerRows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No ledger transactions recorded for this card yet.</p>";
 
   // Void is offered only while the card is active — a redeemed card has
@@ -14613,7 +14623,7 @@ function renderAdminWebhooks(opts) {
   }).join("");
 
   var table = rows.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">URL</th><th scope=\"col\">Events</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"num\">Rate</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">URL</th><th scope=\"col\">Events</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"num\">Rate</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No webhook endpoints yet.</p>";
 
   var eventChecks = known.map(function (ev) {
@@ -14690,7 +14700,7 @@ function renderAdminWebhookDeliveries(opts) {
   }).join("");
 
   var table = rows.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Event</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"num\">Code</th><th scope=\"col\" class=\"num\">Attempts</th><th scope=\"col\">Last error</th><th scope=\"col\">Created</th><th scope=\"col\"></th></tr></thead><tbody>" + bodyRows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Event</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"num\">Code</th><th scope=\"col\" class=\"num\">Attempts</th><th scope=\"col\">Last error</th><th scope=\"col\">Created</th><th scope=\"col\"></th></tr></thead><tbody>" + bodyRows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No deliveries recorded for this endpoint yet.</p>";
 
   var head = "<p class=\"meta\">Endpoint <code class=\"order-id\">" + _htmlEscape(e.url) + "</code></p>";
@@ -14734,7 +14744,7 @@ function renderAdminCollections(opts) {
   }).join("");
 
   var table = rows.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Title</th><th scope=\"col\">Slug</th><th scope=\"col\">Type</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"num\">Products</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Title</th><th scope=\"col\">Slug</th><th scope=\"col\">Type</th><th scope=\"col\">Status</th><th scope=\"col\" class=\"num\">Products</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No collections" + (af === "0" ? " archived" : af === "1" ? " active" : " yet") + ".</p>";
 
   // The create form toggles between a manual and a smart shape. Manual
@@ -14813,7 +14823,7 @@ function renderAdminDiscountAllocation(opts) {
         "</tr>";
       }).join("");
       var lineTable = breakdown.length
-        ? "<table><thead><tr><th scope=\"col\">Line</th><th scope=\"col\" class=\"num\">Allocated (minor)</th><th scope=\"col\" class=\"num\">Remaining (minor)</th></tr></thead><tbody>" + lineRows + "</tbody></table>"
+        ? _tableWrap("<table><thead><tr><th scope=\"col\">Line</th><th scope=\"col\" class=\"num\">Allocated (minor)</th><th scope=\"col\" class=\"num\">Remaining (minor)</th></tr></thead><tbody>" + lineRows + "</tbody></table>")
         : "<p class=\"empty\">This allocation has no recorded lines.</p>";
       return "<div class=\"panel mt\">" +
         "<h3 class=\"subhead\">" + _htmlEscape(a.source || "—") + "</h3>" +
@@ -15125,7 +15135,7 @@ function renderAdminAnnouncements(opts) {
   }).join("");
 
   var table = rows.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Slug</th><th scope=\"col\">Message</th><th scope=\"col\">Theme</th><th scope=\"col\">Audience</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Slug</th><th scope=\"col\">Message</th><th scope=\"col\">Theme</th><th scope=\"col\">Audience</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No announcements" + (af === "1" ? " active right now" : " yet") + ".</p>";
 
   var themeOpts = ["urgency", "promo", "info", "success"].map(function (t) {
@@ -15199,7 +15209,7 @@ function renderAdminSearchRanking(opts) {
     "</tr>";
   }).join("");
   var table = weights.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Slug</th><th scope=\"col\">Name</th><th scope=\"col\">Weights</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + rows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Slug</th><th scope=\"col\">Name</th><th scope=\"col\">Weights</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + rows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No weight sets yet. Create one below and make it active to rerank storefront search.</p>";
 
   var createForm =
@@ -15234,7 +15244,7 @@ function renderAdminSearchRanking(opts) {
     "</form>";
   var pinTable = pinsQuery
     ? (pins.length
-        ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Product id</th><th scope=\"col\">Position</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + pinRows + "</tbody></table></div>"
+        ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Product id</th><th scope=\"col\">Position</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + pinRows + "</tbody></table>") + "</div>"
         : "<p class=\"empty\">No pins for &ldquo;" + _htmlEscape(pinsQuery) + "&rdquo; yet.</p>")
     : "";
   var pinCreateForm = pinsQuery
@@ -15309,7 +15319,7 @@ function renderAdminTrustBadges(opts) {
     "</tr>";
   }).join("");
   var table = badges.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Slug</th><th scope=\"col\">Title</th><th scope=\"col\">Kind</th><th scope=\"col\">Placements</th><th scope=\"col\">Priority</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + rows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Slug</th><th scope=\"col\">Title</th><th scope=\"col\">Kind</th><th scope=\"col\">Placements</th><th scope=\"col\">Priority</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + rows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No trust badges yet. Create one below.</p>";
 
   var placementChecks = trustBadgesModule.ALLOWED_PLACEMENTS.map(function (pl) {
@@ -15449,11 +15459,11 @@ function renderAdminPreorders(opts) {
   }).join("");
 
   var table = rows.length
-    ? "<div class=\"panel\"><table><thead><tr>" +
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr>" +
         "<th scope=\"col\">Slug</th><th scope=\"col\">SKU</th><th scope=\"col\">Ships</th>" +
         "<th scope=\"col\">Price</th><th scope=\"col\">Reserved / cap</th><th scope=\"col\">Remaining</th>" +
         "<th scope=\"col\">Status</th><th scope=\"col\">Actions</th>" +
-      "</tr></thead><tbody>" + bodyRows + "</tbody></table></div>"
+      "</tr></thead><tbody>" + bodyRows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No pre-order campaigns yet.</p>";
 
   var createForm =
@@ -15622,7 +15632,7 @@ function renderAdminHelp(opts) {
   }).join("");
 
   var table = rows.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Title</th><th scope=\"col\">Slug</th><th scope=\"col\">Category</th><th scope=\"col\">Status</th><th scope=\"col\">Views</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Title</th><th scope=\"col\">Slug</th><th scope=\"col\">Category</th><th scope=\"col\">Status</th><th scope=\"col\">Views</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No articles" + (sf ? " " + _htmlEscape(sf) : " yet") + ". Write your first one.</p>";
 
   var newBtn = "<div class=\"actions-row\"><a class=\"btn\" href=\"/admin/help/new\">New article</a></div>";
@@ -15774,7 +15784,7 @@ function renderAdminBlog(opts) {
   }).join("");
 
   var table = rows.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Title</th><th scope=\"col\">Slug</th><th scope=\"col\">Status</th><th scope=\"col\">Published</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Title</th><th scope=\"col\">Slug</th><th scope=\"col\">Status</th><th scope=\"col\">Published</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No posts" + (sf ? " " + _htmlEscape(sf) : " yet") + ". Write your first one.</p>";
 
   var newBtn = "<div class=\"actions-row\"><a class=\"btn\" href=\"/admin/blog/new\">New post</a></div>";
@@ -15975,7 +15985,7 @@ function renderAdminPages(opts) {
   }).join("");
 
   var table = rows.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Title</th><th scope=\"col\">Slug</th><th scope=\"col\">Status</th><th scope=\"col\">Published</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Title</th><th scope=\"col\">Slug</th><th scope=\"col\">Status</th><th scope=\"col\">Published</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No pages" + (sf ? " " + _htmlEscape(sf) : " yet") + ". Write your first one.</p>";
 
   var newBtn = "<div class=\"actions-row\"><a class=\"btn\" href=\"/admin/pages/new\">New page</a></div>";
@@ -16129,7 +16139,7 @@ function renderAdminSurveys(opts) {
   }).join("");
 
   var table = rows.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Title</th><th scope=\"col\">Slug</th><th scope=\"col\">Kind</th><th scope=\"col\">Trigger</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Title</th><th scope=\"col\">Slug</th><th scope=\"col\">Kind</th><th scope=\"col\">Trigger</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No surveys" + (af === "1" ? " active" : " yet") + ".</p>";
 
   var kindOpts = [["nps", "NPS — recommend score"], ["csat", "CSAT — satisfaction"], ["ces", "CES — ease of effort"], ["custom", "Custom — open feedback"]]
@@ -16192,7 +16202,7 @@ function renderAdminSurveyDetail(opts) {
   var rollupPanel =
     "<div class=\"panel\">" +
       "<p class=\"meta\">" + _htmlEscape(String(roll.response_count)) + " response(s)." + (headline ? " " + headline : "") + "</p>" +
-      (qRows ? "<table><thead><tr><th scope=\"col\">Question</th><th scope=\"col\">Kind</th><th scope=\"col\">Result</th></tr></thead><tbody>" + qRows + "</tbody></table>" : "") +
+      (qRows ? _tableWrap("<table><thead><tr><th scope=\"col\">Question</th><th scope=\"col\">Kind</th><th scope=\"col\">Result</th></tr></thead><tbody>" + qRows + "</tbody></table>") : "") +
     "</div>";
 
   var enc = _htmlEscape(encodeURIComponent(survey.slug));
@@ -16258,7 +16268,7 @@ function renderAdminHours(opts) {
   }).join("");
 
   var table = rows.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Schedule</th><th scope=\"col\">Timezone</th><th scope=\"col\" class=\"num\">Days</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Schedule</th><th scope=\"col\">Timezone</th><th scope=\"col\" class=\"num\">Days</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No schedules yet.</p>";
 
   var dayFields = DOW.map(function (label, d) {
@@ -16358,7 +16368,7 @@ function renderAdminCollection(opts) {
       "</tr>";
     }).join("");
     var memberTable = members.length
-      ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\" class=\"num\">#</th><th scope=\"col\">Product id</th><th scope=\"col\"></th></tr></thead><tbody>" + memberRows + "</tbody></table></div>"
+      ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\" class=\"num\">#</th><th scope=\"col\">Product id</th><th scope=\"col\"></th></tr></thead><tbody>" + memberRows + "</tbody></table>") + "</div>"
       : "<p class=\"empty\">No members yet — add a product below.</p>";
 
     // Reorder: a single field of the current ids, comma-joined, that the
@@ -16398,7 +16408,7 @@ function renderAdminCollection(opts) {
       "</tr>";
     }).join("");
     var previewTable = preview.length
-      ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Title</th><th scope=\"col\">Slug</th><th scope=\"col\">Status</th></tr></thead><tbody>" + previewCards + "</tbody></table></div>"
+      ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Title</th><th scope=\"col\">Slug</th><th scope=\"col\">Status</th></tr></thead><tbody>" + previewCards + "</tbody></table>") + "</div>"
       : "<p class=\"empty\">No products match these rules yet.</p>";
     detailBody = "<section class=\"mt\"><h3 class=\"fs-105\">Matched products (live preview)</h3>" +
       "<p class=\"meta\">The first " + _htmlEscape(String(preview.length)) + " products the rules match right now.</p>" +
@@ -16490,7 +16500,7 @@ function renderAdminQuantityDiscounts(opts) {
   }).join("");
 
   var table = rows.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Scope</th><th scope=\"col\">Scope id</th><th scope=\"col\" class=\"num\">Tiers</th><th scope=\"col\">Stacking</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Scope</th><th scope=\"col\">Scope id</th><th scope=\"col\" class=\"num\">Tiers</th><th scope=\"col\">Stacking</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No quantity breaks" + (af === "1" ? " archived" : af === "0" ? " active" : " yet") + ".</p>";
 
   var scopeOpts = scopes.map(function (sc) {
@@ -16581,7 +16591,7 @@ function renderAdminQuantityDiscount(opts) {
     "</tr>";
   }).join("");
   var previewTable = previewRows
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\" class=\"num\">Min qty</th><th scope=\"col\">Kind</th><th scope=\"col\" class=\"num\">Value</th><th scope=\"col\" class=\"num\">Unit @ min</th><th scope=\"col\" class=\"num\">Line saved</th><th scope=\"col\" class=\"num\">Line total</th></tr></thead><tbody>" + previewRows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\" class=\"num\">Min qty</th><th scope=\"col\">Kind</th><th scope=\"col\" class=\"num\">Value</th><th scope=\"col\" class=\"num\">Unit @ min</th><th scope=\"col\" class=\"num\">Line saved</th><th scope=\"col\" class=\"num\">Line total</th></tr></thead><tbody>" + previewRows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No active rules to preview for this scope.</p>";
   var previewForm =
     "<form method=\"get\" action=\"/admin/quantity-discounts/" + _htmlEscape(enc) + "\" class=\"actions-row m-04\">" +
@@ -16664,8 +16674,8 @@ function renderAdminLoyalty(opts) {
       "<p class=\"meta\">Lifetime points (never decremented) place a customer in a tier. " +
         "Earning $1 grants " + _htmlEscape(String(opts.points_per_usd)) + " points; " +
         _htmlEscape(String(opts.redemption_points_per_usd)) + " points redeem for $1 of value.</p>" +
-      "<table><thead><tr><th scope=\"col\">Tier</th><th scope=\"col\" class=\"num\">Lifetime points to reach</th></tr></thead>" +
-      "<tbody>" + tierRows + "</tbody></table></div>";
+      _tableWrap("<table><thead><tr><th scope=\"col\">Tier</th><th scope=\"col\" class=\"num\">Lifetime points to reach</th></tr></thead>" +
+      "<tbody>" + tierRows + "</tbody></table>") + "</div>";
 
   // Earn-rule summary.
   var earnSummary;
@@ -16686,7 +16696,7 @@ function renderAdminLoyalty(opts) {
     earnSummary = "<div class=\"panel\"><div class=\"actions-row\"><h3 class=\"subhead\">Earn rules</h3>" +
       "<a class=\"btn btn--ghost\" href=\"/admin/loyalty/earn-rules\">Manage earn rules</a></div>" +
       (earnRules.length
-        ? "<table><thead><tr><th scope=\"col\">Slug</th><th scope=\"col\">Trigger</th><th scope=\"col\" class=\"num\">Points/unit</th><th scope=\"col\">Status</th></tr></thead><tbody>" + earnRows + "</tbody></table>"
+        ? _tableWrap("<table><thead><tr><th scope=\"col\">Slug</th><th scope=\"col\">Trigger</th><th scope=\"col\" class=\"num\">Points/unit</th><th scope=\"col\">Status</th></tr></thead><tbody>" + earnRows + "</tbody></table>")
         : "<p class=\"empty\">No earn rules yet. Customers only earn points from active rules.</p>") +
       "</div>";
   }
@@ -16710,7 +16720,7 @@ function renderAdminLoyalty(opts) {
     rewardSummary = "<div class=\"panel\"><div class=\"actions-row\"><h3 class=\"subhead\">Rewards catalog</h3>" +
       "<a class=\"btn btn--ghost\" href=\"/admin/loyalty/rewards\">Manage rewards</a></div>" +
       (rewards.length
-        ? "<table><thead><tr><th scope=\"col\">Slug</th><th scope=\"col\">Title</th><th scope=\"col\" class=\"num\">Point cost</th><th scope=\"col\">Status</th></tr></thead><tbody>" + rewardRows + "</tbody></table>"
+        ? _tableWrap("<table><thead><tr><th scope=\"col\">Slug</th><th scope=\"col\">Title</th><th scope=\"col\" class=\"num\">Point cost</th><th scope=\"col\">Status</th></tr></thead><tbody>" + rewardRows + "</tbody></table>")
         : "<p class=\"empty\">No rewards yet. Customers only see active rewards in their catalog.</p>") +
       "</div>";
   }
@@ -16778,7 +16788,7 @@ function renderAdminLoyaltyEarnRules(opts) {
     "</tr>";
   }).join("");
   var table = rules.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Slug</th><th scope=\"col\">Trigger</th><th scope=\"col\" class=\"num\">Points/unit</th><th scope=\"col\" class=\"num\">Max/event</th><th scope=\"col\">Statuses</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Slug</th><th scope=\"col\">Trigger</th><th scope=\"col\" class=\"num\">Points/unit</th><th scope=\"col\" class=\"num\">Max/event</th><th scope=\"col\">Statuses</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No earn rules yet.</p>";
 
   var triggerOpts = triggers.map(function (t) {
@@ -16881,7 +16891,7 @@ function renderAdminLoyaltyRewards(opts) {
     "</tr>";
   }).join("");
   var table = rewards.length
-    ? "<div class=\"panel\"><table><thead><tr><th scope=\"col\">Slug</th><th scope=\"col\">Title</th><th scope=\"col\">Kind</th><th scope=\"col\">Value</th><th scope=\"col\" class=\"num\">Point cost</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table></div>"
+    ? "<div class=\"panel\">" + _tableWrap("<table><thead><tr><th scope=\"col\">Slug</th><th scope=\"col\">Title</th><th scope=\"col\">Kind</th><th scope=\"col\">Value</th><th scope=\"col\" class=\"num\">Point cost</th><th scope=\"col\">Status</th><th scope=\"col\">Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table>") + "</div>"
     : "<p class=\"empty\">No rewards yet.</p>";
 
   var kindOpts = kinds.map(function (k) {
@@ -17039,7 +17049,7 @@ function renderAdminProduct(opts) {
         "</tr>";
       }).join("");
       var histTable = (pc.history && pc.history.length)
-        ? "<table><thead><tr><th scope=\"col\" class=\"num\">Amount</th><th scope=\"col\">From</th><th scope=\"col\">Until</th></tr></thead><tbody>" + histRows + "</tbody></table>"
+        ? _tableWrap("<table><thead><tr><th scope=\"col\" class=\"num\">Amount</th><th scope=\"col\">From</th><th scope=\"col\">Until</th></tr></thead><tbody>" + histRows + "</tbody></table>")
         : "";
       return "<div class=\"m-04\">" +
         "<span class=\"u-mute\">" + _htmlEscape(pc.currency) + "</span> · " + current +

package/lib/asset-manifest.json

@@ -1,13 +1,13 @@
 {
-  "version": "0.3.54",
+  "version": "0.3.55",
   "assets": {
     "css/admin.css": {
-      "integrity": "sha384-/NizdENQkTc96romD0kmnl8220NAvW32QI0aSFuGiPbWE5lYbRxLXU5shsjlx5Ek",
-      "fingerprinted": "css/admin.f028b2e410387546.css"
+      "integrity": "sha384-6k53cvkRrxMgmeStLIoLjVXZQHqIJgTmv1Izd8TYhh1HOC4POgE6GCvx1bsalyEP",
+      "fingerprinted": "css/admin.44eb97700c660798.css"
     },
     "css/main.css": {
-      "integrity": "sha384-9rtEz2wKJbpfALccIipRdo/BWVQZi5O4IufqaLO/7jFyLK1xxCaDc/65Apjy8dbs",
-      "fingerprinted": "css/main.1a1a379d6f58e2c0.css"
+      "integrity": "sha384-2nlE5YDlOjcnP/l1EY5kcYwvbV/TboHx+Hi6fAaDNyaau3nzQppJnNyXoLiFE8w1",
+      "fingerprinted": "css/main.59afbe779336867a.css"
     },
     "js/announcement.js": {
       "integrity": "sha384-z4zcEMn+tScoVnYRE4nEf8N/oyvpxdpaxTNrT4QO/jURChid4+qjAvWkzatCaAPq",

package/lib/storefront.js

@@ -2192,6 +2192,49 @@ function _buildPreorderNotice(marker) {
   return "<p class=\"" + cls + "\" role=\"" + role + "\">" + b.template.escapeHtml(n.copy) + "</p>\n      ";
 }
 
+// Map a thrown validator TypeError to the single form field it rejected, so a
+// re-render can mark exactly that input with aria-invalid + a per-field error
+// span (WCAG 3.3.1 Error Identification / 3.3.3 Error Suggestion) — IN ADDITION
+// to the page-top role="alert" summary banner the routes already render.
+//
+// The shop's validators throw "<module>: <field> <reason>" (or
+// "<module>.<method>: <field> <reason>") where the leading token after the
+// prefix IS the form `name`. This reads that already-thrown error; it does NOT
+// re-validate (the backend stays the single validator). `modulePrefix` is the
+// thrower's prefix (e.g. "addresses", "reviews", "productQA", "supportTickets")
+// and `formFields` is the set of `name`s the form actually renders, so an error
+// on a non-form internal (e.g. customer_id) returns null — the page-top banner
+// still shows, but no input is falsely marked.
+//
+// Returns { field, message } with the module prefix stripped from `message`
+// (so the per-field span carries just the human reason), or null when the
+// rejected token isn't one of this form's fields.
+function _fieldFromValidatorError(e, modulePrefix, formFields) {
+  var raw = (e && e.message) || "";
+  var prefixRe = new RegExp("^" + modulePrefix + "(?:\\.\\w+)?:\\s+");
+  var m = new RegExp("^" + modulePrefix + "(?:\\.\\w+)?:\\s+([a-z_]+)\\b").exec(raw);
+  var field = m && m[1];
+  if (!field || !formFields || !Object.prototype.hasOwnProperty.call(formFields, field)) return null;
+  return { field: field, message: raw.replace(prefixRe, "") };
+}
+
+// Build the aria-invalid + aria-describedby attribute fragment for an input
+// when `inv` (a { field, message } from _fieldFromValidatorError) names this
+// field. Empty string otherwise. `idPrefix` + field is the static, escaped id.
+function _fieldAriaAttr(idPrefix, name, inv) {
+  if (!inv || inv.field !== name) return "";
+  return " aria-invalid=\"true\" aria-describedby=\"" + b.template.escapeHtml(idPrefix + name) + "\"";
+}
+
+// Build the adjacent per-field error span (role="alert") for the rejected
+// field; empty string otherwise. The reason is escaped operator-validator
+// prose; the id is the static, escaped `idPrefix + name`.
+function _fieldErrorSpan(idPrefix, name, inv) {
+  if (!inv || inv.field !== name) return "";
+  return "<span class=\"form-field__error\" id=\"" + b.template.escapeHtml(idPrefix + name) +
+    "\" role=\"alert\">" + b.template.escapeHtml(inv.message == null ? "" : String(inv.message)) + "</span>";
+}
+
 var PRODUCT_PAGE =
   "<section class=\"pdp\">\n" +
   "  <nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n" +
@@ -2486,17 +2529,20 @@ var REVIEW_FORM_PAGE =
   "  <h1 class=\"review-form-page__title\">Review {{title}}</h1>\n" +
   "  RAW_NOTICE_PLACEHOLDER\n" +
   "  <form class=\"review-form\" method=\"post\" action=\"/products/{{slug}}/review\">\n" +
-  "    <fieldset class=\"review-form__rating\">\n" +
+  "    <fieldset class=\"review-form__rating\"RAW_RATING_ARIA_PLACEHOLDER>\n" +
   "      <legend>Your rating</legend>\n" +
   "      RAW_STARS_PLACEHOLDER\n" +
+  "      RAW_RATING_ERROR_PLACEHOLDER\n" +
   "    </fieldset>\n" +
   "    <label class=\"form-field\">\n" +
   "      <span class=\"form-field__label\">Title</span>\n" +
-  "      <input type=\"text\" name=\"title\" maxlength=\"120\" required autocomplete=\"off\">\n" +
+  "      <input type=\"text\" name=\"title\" maxlength=\"120\" required autocomplete=\"off\"RAW_TITLE_ARIA_PLACEHOLDER>\n" +
+  "      RAW_TITLE_ERROR_PLACEHOLDER\n" +
   "    </label>\n" +
   "    <label class=\"form-field\">\n" +
   "      <span class=\"form-field__label\">Your review</span>\n" +
-  "      <textarea name=\"body\" maxlength=\"4000\" rows=\"6\"></textarea>\n" +
+  "      <textarea name=\"body\" maxlength=\"4000\" rows=\"6\"RAW_BODY_ARIA_PLACEHOLDER></textarea>\n" +
+  "      RAW_BODY_ERROR_PLACEHOLDER\n" +
   "    </label>\n" +
   "    <button type=\"submit\" class=\"btn-primary\">Submit review</button>\n" +
   "  </form>\n" +
@@ -2519,12 +2565,17 @@ function renderReviewForm(opts) {
   var notice = opts.notice
     ? "<p class=\"form-notice form-notice--error\" role=\"alert\">" + esc(String(opts.notice)) + "</p>"
     : "";
-  var body = _render(REVIEW_FORM_PAGE, {
-    title: opts.product.title,
-    slug:  slug,
-  })
+  // On a validation re-render, mark the one rejected control. The rating is a
+  // <fieldset> (the aria goes on the group, per the existing fieldset/legend
+  // shape); title/body are ordinary inputs. ids are static "review-err-<name>".
+  var inv = opts.invalid_field || null;
+  var body = _render(REVIEW_FORM_PAGE, { title: opts.product.title, slug: slug })
     .replace("RAW_NOTICE_PLACEHOLDER", notice)
     .replace("RAW_STARS_PLACEHOLDER", stars);
+  ["rating", "title", "body"].forEach(function (name) {
+    body = _spliceRaw(body, "RAW_" + name.toUpperCase() + "_ARIA_PLACEHOLDER", _fieldAriaAttr("review-err-", name, inv));
+    body = _spliceRaw(body, "RAW_" + name.toUpperCase() + "_ERROR_PLACEHOLDER", _fieldErrorSpan("review-err-", name, inv));
+  });
   return _wrap({
     title:      "Review " + opts.product.title,
     shop_name:  opts.shop_name || "blamejs.shop",
@@ -2631,7 +2682,8 @@ var QA_FORM_PAGE =
   "  <form class=\"review-form\" method=\"post\" action=\"/products/{{slug}}/question\">\n" +
   "    <label class=\"form-field\">\n" +
   "      <span class=\"form-field__label\">Your question</span>\n" +
-  "      <textarea name=\"body\" maxlength=\"4000\" rows=\"6\" required></textarea>\n" +
+  "      <textarea name=\"body\" maxlength=\"4000\" rows=\"6\" requiredRAW_BODY_ARIA_PLACEHOLDER></textarea>\n" +
+  "      RAW_BODY_ERROR_PLACEHOLDER\n" +
   "    </label>\n" +
   "    <button type=\"submit\" class=\"btn-primary\">Submit question</button>\n" +
   "  </form>\n" +
@@ -2645,11 +2697,16 @@ function renderQuestionForm(opts) {
   var notice = opts.notice
     ? "<p class=\"form-notice form-notice--error\" role=\"alert\">" + esc(String(opts.notice)) + "</p>"
     : "";
+  // Single field (`body`); on a re-render, mark it with aria-invalid + an
+  // adjacent error span. id is the static "qa-err-body".
+  var inv = opts.invalid_field || null;
   var body = _render(QA_FORM_PAGE, {
     title: opts.product.title,
     slug:  opts.product.slug,
   })
     .replace("RAW_NOTICE_PLACEHOLDER", notice);
+  body = _spliceRaw(body, "RAW_BODY_ARIA_PLACEHOLDER", _fieldAriaAttr("qa-err-", "body", inv));
+  body = _spliceRaw(body, "RAW_BODY_ERROR_PLACEHOLDER", _fieldErrorSpan("qa-err-", "body", inv));
   return _wrap({
     title:      "Ask about " + opts.product.title,
     shop_name:  opts.shop_name || "blamejs.shop",
@@ -3545,32 +3602,59 @@ function _addrField(name, labelText, value, opts) {
   // The `*` is a color-only visual cue; pair it with a visually-hidden
   // "(required)" so a screen reader announces the field's requiredness.
   var req = opts.required ? " <span class=\"form-field__req\" aria-hidden=\"true\">*</span><span class=\"sr-only\">(required)</span>" : "";
+  // On a validation re-render, the rejected field carries aria-invalid +
+  // aria-describedby pointing at an adjacent error span (WCAG 3.3.1/3.3.3).
+  // The id is a static prefix + field name (attacker-uncontrolled) but is
+  // still escaped for defense-in-depth; the reason is operator-validator
+  // prose, escaped via esc().
+  var errSpan = "";
+  if (opts.invalid) {
+    attrs += " aria-invalid=\"true\" aria-describedby=\"" + esc(opts.error_id) + "\"";
+    errSpan = "<span class=\"form-field__error\" id=\"" + esc(opts.error_id) +
+      "\" role=\"alert\">" + esc(opts.error_msg == null ? "" : String(opts.error_msg)) + "</span>";
+  }
   return "<label class=\"form-field\">" +
            "<span class=\"form-field__label\">" + esc(labelText) + req + "</span>" +
            "<input type=\"text\" name=\"" + esc(name) + "\" value=\"" + esc(value == null ? "" : String(value)) + "\"" + attrs + ">" +
+           errSpan +
          "</label>";
 }
 
 // Shared add/edit address form. `addr` pre-fills for edit (null = add).
-function _addressForm(action, addr, submitLabel) {
+// `invalidField` (optional) is a { field, message } picked off the
+// backend-thrown validator error so the one rejected input renders with
+// aria-invalid + a per-field error span (WCAG 3.3.1/3.3.3). When null, every
+// field renders byte-identically to the no-error path.
+function _addressForm(action, addr, submitLabel, invalidField) {
   var esc = b.template.escapeHtml;
   addr = addr || {};
   function _checked(v) { return Number(v) === 1 ? " checked" : ""; }
+  // Merge the per-field invalid marker into a field's opts when it is the one
+  // the validator rejected. The id is a static "addr-err-<name>" so it is
+  // attacker-uncontrolled.
+  function _mark(name, opts) {
+    if (invalidField && invalidField.field === name) {
+      opts.invalid = true;
+      opts.error_id = "addr-err-" + name;
+      opts.error_msg = invalidField.message;
+    }
+    return opts;
+  }
   return "<form class=\"address-form form-stack\" method=\"post\" action=\"" + esc(action) + "\">" +
-    _addrField("recipient_name", "Recipient name", addr.recipient_name, { required: true, maxlength: 120, autocomplete: "name" }) +
-    _addrField("label", "Label (e.g. Home, Work)", addr.label, { maxlength: 60 }) +
-    _addrField("company", "Company", addr.company, { maxlength: 120, autocomplete: "organization" }) +
-    _addrField("street_line1", "Street address", addr.street_line1, { required: true, maxlength: 200, autocomplete: "address-line1" }) +
-    _addrField("street_line2", "Apt / suite / unit", addr.street_line2, { maxlength: 200, autocomplete: "address-line2" }) +
+    _addrField("recipient_name", "Recipient name", addr.recipient_name, _mark("recipient_name", { required: true, maxlength: 120, autocomplete: "name" })) +
+    _addrField("label", "Label (e.g. Home, Work)", addr.label, _mark("label", { maxlength: 60 })) +
+    _addrField("company", "Company", addr.company, _mark("company", { maxlength: 120, autocomplete: "organization" })) +
+    _addrField("street_line1", "Street address", addr.street_line1, _mark("street_line1", { required: true, maxlength: 200, autocomplete: "address-line1" })) +
+    _addrField("street_line2", "Apt / suite / unit", addr.street_line2, _mark("street_line2", { maxlength: 200, autocomplete: "address-line2" })) +
     "<div class=\"form-row form-row--inline\">" +
-      _addrField("city", "City", addr.city, { required: true, maxlength: 120, autocomplete: "address-level2" }) +
-      _addrField("region", "State / region", addr.region, { maxlength: 120, autocomplete: "address-level1" }) +
+      _addrField("city", "City", addr.city, _mark("city", { required: true, maxlength: 120, autocomplete: "address-level2" })) +
+      _addrField("region", "State / region", addr.region, _mark("region", { maxlength: 120, autocomplete: "address-level1" })) +
     "</div>" +
     "<div class=\"form-row form-row--inline\">" +
-      _addrField("postal_code", "Postal code", addr.postal_code, { required: true, maxlength: 32, autocomplete: "postal-code" }) +
-      _addrField("country", "Country (ISO 3166-1)", addr.country || "US", { required: true, maxlength: 2, pattern: "[A-Za-z]{2}", autocomplete: "country" }) +
+      _addrField("postal_code", "Postal code", addr.postal_code, _mark("postal_code", { required: true, maxlength: 32, autocomplete: "postal-code" })) +
+      _addrField("country", "Country (ISO 3166-1)", addr.country || "US", _mark("country", { required: true, maxlength: 2, pattern: "[A-Za-z]{2}", autocomplete: "country" })) +
     "</div>" +
-    _addrField("phone", "Phone", addr.phone, { maxlength: 40, autocomplete: "tel" }) +
+    _addrField("phone", "Phone", addr.phone, _mark("phone", { maxlength: 40, autocomplete: "tel" })) +
     "<label class=\"address-form__check\"><input type=\"checkbox\" name=\"is_default_shipping\" value=\"1\"" + _checked(addr.is_default_shipping) + "> Default shipping address</label>" +
     "<label class=\"address-form__check\"><input type=\"checkbox\" name=\"is_default_billing\" value=\"1\"" + _checked(addr.is_default_billing) + "> Default billing address</label>" +
     "<button type=\"submit\" class=\"btn-primary\">" + esc(submitLabel) + "</button>" +
@@ -3642,7 +3726,7 @@ function renderAddresses(opts) {
       listHtml +
       "<h2 class=\"account-addresses__form-title\">" + esc(formHeading) + "</h2>" +
       notice +
-      _addressForm(formAction, editing, editing ? "Save changes" : "Add address") +
+      _addressForm(formAction, editing, editing ? "Save changes" : "Add address", opts.invalid_field || null) +
     "</section>";
   return _wrap({
     title:      "Addresses",
@@ -4615,6 +4699,13 @@ function renderSupportNew(opts) {
   var notice = opts.notice
     ? "<p class=\"form-notice form-notice--error\" role=\"alert\">" + esc(String(opts.notice)) + "</p>"
     : "";
+  // On a validation re-render, mark the one rejected field with aria-invalid +
+  // an adjacent error span (WCAG 3.3.1/3.3.3) via the shared field helpers.
+  // `opts.invalid_field` is the { field, message } the route picked off the
+  // backend-thrown error; ids are static "support-err-<name>".
+  var inv = opts.invalid_field || null;
+  function _supAria(name) { return _fieldAriaAttr("support-err-", name, inv); }
+  function _supErr(name) { return _fieldErrorSpan("support-err-", name, inv); }
   var body =
     "<section class=\"return-form-page\">" +
       "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\"><ol>" +
@@ -4626,14 +4717,14 @@ function renderSupportNew(opts) {
       notice +
       "<form class=\"return-form form-stack\" method=\"post\" action=\"/account/support\">" +
         "<label class=\"form-field\"><span class=\"form-field__label\">Email for our reply</span>" +
-          "<input type=\"email\" name=\"customer_email\" value=\"" + esc(v.customer_email == null ? "" : String(v.customer_email)) + "\" required autocomplete=\"email\" maxlength=\"254\"></label>" +
+          "<input type=\"email\" name=\"customer_email\" value=\"" + esc(v.customer_email == null ? "" : String(v.customer_email)) + "\" required autocomplete=\"email\" maxlength=\"254\"" + _supAria("customer_email") + ">" + _supErr("customer_email") + "</label>" +
         "<label class=\"form-field\"><span class=\"form-field__label\">Category</span>" +
-          "<select name=\"category\" required>" + categoryOpts + "</select></label>" +
+          "<select name=\"category\" required" + _supAria("category") + ">" + categoryOpts + "</select>" + _supErr("category") + "</label>" +
         orderField +
         "<label class=\"form-field\"><span class=\"form-field__label\">Subject</span>" +
-          "<input type=\"text\" name=\"subject\" value=\"" + esc(v.subject == null ? "" : String(v.subject)) + "\" required maxlength=\"200\"></label>" +
+          "<input type=\"text\" name=\"subject\" value=\"" + esc(v.subject == null ? "" : String(v.subject)) + "\" required maxlength=\"200\"" + _supAria("subject") + ">" + _supErr("subject") + "</label>" +
         "<label class=\"form-field\"><span class=\"form-field__label\">How can we help?</span>" +
-          "<textarea name=\"body\" required maxlength=\"8000\" rows=\"6\">" + esc(v.body == null ? "" : String(v.body)) + "</textarea></label>" +
+          "<textarea name=\"body\" required maxlength=\"8000\" rows=\"6\"" + _supAria("body") + ">" + esc(v.body == null ? "" : String(v.body)) + "</textarea>" + _supErr("body") + "</label>" +
         "<button type=\"submit\" class=\"btn-primary\">Send</button>" +
       "</form>" +
     "</section>";
@@ -14567,7 +14658,7 @@ function mount(router, deps) {
         if (kind === "default-billing")  return "Default billing address updated.";
         return null;
       }
-      async function _renderAddrPage(req, res, auth, editAddr, notice, code) {
+      async function _renderAddrPage(req, res, auth, editAddr, notice, code, invalidField) {
         var rows = await deps.addresses.listForCustomer(auth.customer_id, { limit: 50 });
         var cartCount = await _cartCountForReq(req);
         var url = req.url ? new URL(req.url, "http://localhost") : null;
@@ -14577,15 +14668,24 @@ function mount(router, deps) {
         // when the ?undo=<id> marker round-trips a real owned address id.
         var undoId = (okKind === "removed" && url) ? url.searchParams.get("undo") : null;
         _send(res, code || 200, renderAddresses({
-          addresses:  rows,
-          edit:       editAddr || null,
-          notice:     notice || null,
-          success:    success,
-          undo_id:    undoId || null,
-          shop_name:  shopName,
-          cart_count: cartCount,
+          addresses:     rows,
+          edit:          editAddr || null,
+          notice:        notice || null,
+          success:       success,
+          undo_id:       undoId || null,
+          invalid_field: invalidField || null,
+          shop_name:     shopName,
+          cart_count:    cartCount,
         }));
       }
+      // The address form's renderable fields, by `name`. An error on a
+      // non-form internal (customer_id, address_id) returns null from the
+      // shared extractor, so the page-top banner still shows but no input is
+      // falsely marked.
+      var _ADDR_FORM_FIELDS = {
+        recipient_name: 1, label: 1, company: 1, street_line1: 1, street_line2: 1,
+        city: 1, region: 1, postal_code: 1, country: 1, phone: 1,
+      };
       function _addrInput(body, customerId) {
         return {
           customer_id:         customerId,
@@ -14622,7 +14722,10 @@ function mount(router, deps) {
         try {
           await deps.addresses.add(_addrInput(req.body || {}, auth.customer_id));
         } catch (e) {
-          if (e instanceof TypeError) return _renderAddrPage(req, res, auth, null, (e && e.message) || "Please check the address.", 400);
+          if (e instanceof TypeError) {
+            var inv = _fieldFromValidatorError(e, "addresses", _ADDR_FORM_FIELDS);
+            return _renderAddrPage(req, res, auth, null, (e && e.message) || "Please check the address.", 400, inv);
+          }
           throw e;
         }
         res.status(303); res.setHeader && res.setHeader("location", "/account/addresses?ok=added");
@@ -14637,7 +14740,8 @@ function mount(router, deps) {
         } catch (e) {
           if (e instanceof TypeError) {
             var merged = Object.assign({}, addr, _addrInput(req.body || {}, auth.customer_id));
-            return _renderAddrPage(req, res, auth, merged, (e && e.message) || "Please check the address.", 400);
+            var inv = _fieldFromValidatorError(e, "addresses", _ADDR_FORM_FIELDS);
+            return _renderAddrPage(req, res, auth, merged, (e && e.message) || "Please check the address.", 400, inv);
           }
           throw e;
         }
@@ -15730,11 +15834,12 @@ function mount(router, deps) {
         } catch (e) {
           if (e instanceof TypeError) {
             return _send(res, 400, renderSupportNew({
-              orders:     await _orders(),
-              values:     body,
-              notice:     (e && e.message || "").replace(/^supportTickets[.:]\s*/, "") || "Please check your ticket and try again.",
-              shop_name:  shopName,
-              cart_count: cartCount,
+              orders:        await _orders(),
+              values:        body,
+              notice:        (e && e.message || "").replace(/^supportTickets[.:]\s*/, "") || "Please check your ticket and try again.",
+              invalid_field: _fieldFromValidatorError(e, "supportTickets", { customer_email: 1, category: 1, subject: 1, body: 1 }),
+              shop_name:     shopName,
+              cart_count:    cartCount,
             }));
           }
           throw e;
@@ -16418,10 +16523,11 @@ function mount(router, deps) {
           // anything else is a real 500.
           if (e instanceof TypeError) {
             return _send(res, 400, renderReviewForm({
-              product:    { title: ctx.product.title, slug: ctx.product.slug },
-              notice:     (e && e.message) || "Please check your review and try again.",
-              shop_name:  shopName,
-              cart_count: ctx.cartCount,
+              product:       { title: ctx.product.title, slug: ctx.product.slug },
+              notice:        (e && e.message) || "Please check your review and try again.",
+              invalid_field: _fieldFromValidatorError(e, "reviews", { rating: 1, title: 1, body: 1 }),
+              shop_name:     shopName,
+              cart_count:    ctx.cartCount,
             }));
           }
           throw e;
@@ -16489,10 +16595,11 @@ function mount(router, deps) {
           // anything else is a real 500.
           if (e instanceof TypeError) {
             return _send(res, 400, renderQuestionForm({
-              product:    { title: ctx.product.title, slug: ctx.product.slug },
-              notice:     (e && e.message) || "Please check your question and try again.",
-              shop_name:  shopName,
-              cart_count: ctx.cartCount,
+              product:       { title: ctx.product.title, slug: ctx.product.slug },
+              notice:        (e && e.message) || "Please check your question and try again.",
+              invalid_field: _fieldFromValidatorError(e, "productQA", { body: 1 }),
+              shop_name:     shopName,
+              cart_count:    ctx.cartCount,
             }));
           }
           throw e;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blamejs/blamejs-shop",
-  "version": "0.3.54",
+  "version": "0.3.55",
   "description": "Open-source framework built on blamejs. Vendored stack, zero npm runtime deps, PQC-first crypto, security-on by default.",
   "main": "lib/index.js",
   "scripts": {