@gemboss/gem-framework 0.18.11 → 0.18.15

package/dist/index.js

@@ -435,7 +435,7 @@ function gemButtonGradientEndCss(accent = "var(--gem-color-accent)", accentText
 }
 
 // ../../packages/gem-framework/src/tokens.ts
-var gemFrameworkVersion = "0.18.11";
+var gemFrameworkVersion = "0.18.15";
 var GEM_FOCUS_RING_CSS_VAR = "--gem-focus-ring: 2px solid var(--gem-color-accent);";
 var GEM_TAP_MIN_CSS_VAR = "--gem-tap-min: 44px;";
 var GEM_FOCUS_OFFSET_CSS_VAR = "--gem-focus-offset: 3px;";
@@ -685,6 +685,8 @@ function gemMotionScaleCssVars(motion) {
   return toMotionCssVars(scale).filter((line) => !declared.has(cssVarName(line)));
 }
 var optionalGemTokenKeys = {
+  // Lớp phủ tối (GemFactory gap #17): xem GEM_SCRIM_FALLBACK / gemScrim bên dưới.
+  color: ["scrim"],
   typography: [...GEM_TYPE_RAMP_KEYS, ...GEM_LINE_HEIGHT_TOKEN_KEYS, ...GEM_BUTTON_TOKEN_KEYS.typography],
   spacing: [...Object.keys(GEM_DERIVED_SPACE_STEPS), ...GEM_PHONE_TOKEN_TARGETS.spacing.map((k) => `${k}Mobile`)],
   layout: GEM_PHONE_TOKEN_TARGETS.layout.map((k) => `${k}Mobile`),
@@ -692,6 +694,8 @@ var optionalGemTokenKeys = {
   // Khoá motion ngoài duration / easing: nền ambient (đã phát từ trước nhưng chưa khai ở đây) và thang "Gọn" (#32).
   motion: ["easingSoft", "ambientSlow", "ambientMid", "ambientFast", "ambientAmp", ...Object.keys(GEM_MOTION_SCALE_DEFAULTS)]
 };
+var GEM_SCRIM_FALLBACK = "#000";
+var gemScrim = (percent) => `color-mix(in srgb, var(--gem-color-scrim, ${GEM_SCRIM_FALLBACK}) ${percent}%, transparent)`;
 var GEM_HEADING_SIZE_CSS_VARS = [
   "--gem-section-heading-size: calc(var(--gem-h2) * var(--gem-typography-heading-scale, 1));",
   "--gem-hero-heading-size: calc(var(--gem-h1) * var(--gem-typography-heading-scale, 1));",
@@ -715,7 +719,9 @@ var defaultGemTokens = {
     // GemFactory sections set `color: var(--gem-color-warning)` on words; white text on a warning badge was 3.64:1 too.
     // #9a661a keeps the hue at 4.52:1 / 4.90:1. default-colours-meet-aa.test.ts holds every foreground default to 4.5:1.
     warning: "#9a661a",
-    danger: "#d72c0d"
+    danger: "#d72c0d",
+    // Lớp phủ tối ở độ đậm tối đa (gap #17, khoá tuỳ chọn): mỗi lớp phủ lấy N% của nó qua gemScrim.
+    scrim: "#000"
   },
   typography: {
     body: "Inter, system-ui, sans-serif",
@@ -1451,6 +1457,11 @@ var gemFrameworkRuntimePlugins = [
     key: "offer-engine",
     load_strategy: "interaction",
     events: ["gem:offer:ready", "gem:offer:change"]
+  },
+  {
+    key: "reviews",
+    load_strategy: "idle",
+    events: ["gem:reviews:ready", "gem:reviews:render", "gem:review:vote"]
   }
 ];
 var gemFrameworkValidationRules = [
@@ -1493,7 +1504,7 @@ var GEM_POPUP_SHELL_CSS_LINES = [
   "  width: min(880px, 92vw); max-width: none; max-height: min(640px, 92vh); overflow: hidden;",
   "  border-radius: var(--gem-radius-lg); box-shadow: var(--gem-shadow-md);",
   "}",
-  ".gem-popup-shell__dialog::backdrop { background: rgb(0 0 0 / 0.55); }",
+  `.gem-popup-shell__dialog::backdrop { background: ${gemScrim(55)}; }`,
   ".gem-popup-shell__frame { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; height: 100%; }",
   ".gem-popup-shell__media { position: relative; min-width: 0; overflow: hidden; background: var(--gem-color-surface); }",
   ".gem-popup-shell__image { display: block; width: 100%; height: 100%; object-fit: cover; }",
@@ -1520,7 +1531,7 @@ var GEM_POPUP_SHELL_CSS_LINES = [
   "}",
   // Image behind the text: light text over a dark wash, every size. A card over the image has its own
   // background, so on desktop it keeps the preset's text colour.
-  ".gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.6)); }",
+  `.gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(${gemScrim(35)}, ${gemScrim(60)}); }`,
   ".gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__panel,",
   ".gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__close { color: #fff; }",
   ".gem-popup-shell__close {",
@@ -1584,10 +1595,10 @@ var GEM_POPUP_SHELL_CSS_LINES = [
   // Dialog định vị ĐÚNG như modal của trình duyệt (position: fixed; inset: 0; margin: auto), nên mọi bố cục (fullscreen,
   // thẻ, takeover, sheet kéo tới 88dvh) ra cùng khung chữ nhật với popup mở thật; nền chỉ thay ::backdrop (không có ở
   // dialog không-modal).
-  ":root:not(:has([data-gem-canvas])) .gem-popup-shell[data-gem-popup-preview='true'] { position: fixed; inset: 0; z-index: 1000; padding: 0; background: rgb(0 0 0 / 0.55); }",
+  `:root:not(:has([data-gem-canvas])) .gem-popup-shell[data-gem-popup-preview='true'] { position: fixed; inset: 0; z-index: 1000; padding: 0; background: ${gemScrim(55)}; }`,
   ":root:not(:has([data-gem-canvas])) .gem-popup-shell[data-gem-popup-preview='true'] .gem-popup-shell__dialog { position: fixed; inset: 0; display: block; }",
   ":root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] .gem-popup-shell__dialog { position: relative; display: block; inset: auto; }",
-  ":root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] { padding: var(--gem-space-xl) var(--gem-layout-gutter); background: rgb(0 0 0 / 0.55); }",
+  `:root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] { padding: var(--gem-space-xl) var(--gem-layout-gutter); background: ${gemScrim(55)}; }`,
   "@media (min-width: 750px) {",
   "  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-desktop='fullscreen'] { padding: 0; }",
   "  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-desktop='fullscreen'] .gem-popup-shell__dialog { height: 720px; max-height: none; }",
@@ -1721,6 +1732,23 @@ var GEM_FORM_SET_CSS_LINES = [
   "  inline-size: var(--gem-checkbox-size);",
   "  block-size: var(--gem-checkbox-size);",
   "  accent-color: var(--gem-checkbox-accent);",
+  "}",
+  // THE QUANTITY STEPPER IS A FIELD OF THE SET (20/10/2026): its box takes the set's height, edge and corner (capped at
+  // 22px, so a pill set draws a round stepper, not a 999px lozenge), its -/+ and number the set's fill and text size, and
+  // the underline shape paints no cell, as it paints no field. The storefront carried these (gemsite #1001/#1007, with its
+  // own element stepper in the :is() lists); the package did not, so every section the kho previewed drew a square 44px
+  // stepper beside 48px pill fields (GemFactory Framework › Controls, measured 20/10/2026).
+  "[data-gem-form-set] :is(.gem-quantity-input) {",
+  "  min-height: var(--gem-input-height);",
+  "  border: var(--gem-input-border-width) solid var(--gem-input-border-color);",
+  "  border-radius: min(var(--gem-input-radius), 22px);",
+  "}",
+  "[data-gem-form-set] :is(.gem-quantity-input__button, .gem-quantity-input__field) {",
+  "  background: var(--gem-input-bg);",
+  "  font-size: var(--gem-input-font-size);",
+  "}",
+  '[data-gem-form-set][data-gem-field-shape="underline"] :is(.gem-quantity-input__button, .gem-quantity-input__field) {',
+  "  background: transparent;",
   "}"
 ];
 var GEM_FORM_SET_CSS = GEM_FORM_SET_CSS_LINES.join("\n");
@@ -2169,8 +2197,9 @@ function createPrimitiveCss() {
     "  width: auto;",
     "  min-width: min(10rem, 50%);",
     "}",
-    // A wrapped field gets the join's height too: the dawn-parity profile sets .gem-input { min-height: 4.5rem }, and
-    // only the direct-child rule above outranked it, so a wrapped input stood 72px next to a 44px one (02/10/2026).
+    // A wrapped field gets the join's height too: the dawn-parity profile's 4.5rem floor named .gem-input until 0.18.12, and
+    // only the direct-child rule above outranked it, so a wrapped input stood 72px next to a 44px one (02/10/2026). The
+    // floor no longer names it; this keeps a wrapped field at the join's height whatever a profile floors it at.
     ".gem-field-join > .gem-form-field > :is(.gem-input, .gem-select) {",
     "  width: 100%;",
     "  height: 100%;",
@@ -2208,6 +2237,32 @@ function createPrimitiveCss() {
     "  accent-color: var(--gem-color-accent);",
     "}",
     ...GEM_FORM_SET_CSS_LINES,
+    // HOVER AND ERROR (§9.2 state matrix, 20/10/2026): GemFactory Framework › Controls measured both INERT, so a field a
+    // shopper points at, or one a form marked invalid, looked like any other. Written once for every field, with or
+    // without a form set.
+    // HOVER thickens the edge by 1px in the field's own ink, as Dawn does (`box-shadow: 0 0 0 calc(border + .1rem)`): a
+    // colour change alone was invisible under every form set, whose edge is already the ink (measured #1f2224 → #202223).
+    // The ring follows the box and its corner; an underline or filled field has only a bottom rule, so only that thickens.
+    // ERROR (`aria-invalid="true"`, set by the form) takes the danger colour mixed 70/30 with that ink, which keeps the
+    // edge at 3:1 or more on a white field (9.7:1), an underline field on a dark band (4.2:1) and on an accent band
+    // (3.0:1); plain #b42318 there was 2.4:1 and 1.8:1. Only the edge colour changes, so every shape keeps its edges.
+    // Hover skips a disabled or invalid field (an error must not lose its colour under the pointer), a focused one (the
+    // focus halo on a dark or accent band is a box-shadow, and a click focuses a text field as :focus-visible, so the
+    // pointer still on it would wipe the halo: review) and touch screens, where a tap would leave it stuck.
+    // Specificity: hover (0,6,0; 0,8,0 per shape) outranks the set's field rule (0,3,0); error (0,3,0) ties it and wins by
+    // coming later in the sheet.
+    "@media (hover: hover) {",
+    '  :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)):hover:not(:disabled):not([aria-invalid="true"]):not(:focus-visible) {',
+    "    border-color: currentColor;",
+    "    box-shadow: 0 0 0 1px currentColor;",
+    "  }",
+    '  [data-gem-form-set]:is([data-gem-field-shape="underline"], [data-gem-field-shape="filled"]) :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)):hover:not(:disabled):not([aria-invalid="true"]):not(:focus-visible) {',
+    "    box-shadow: 0 1px 0 0 currentColor;",
+    "  }",
+    "}",
+    ':is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input))[aria-invalid="true"] {',
+    "  border-color: color-mix(in srgb, var(--gem-color-danger, #b42318) 70%, currentColor);",
+    "}",
     ".gem-submit {",
     "  cursor: pointer;",
     "}",
@@ -2767,6 +2822,12 @@ function createPrimitiveCss() {
     "  color: var(--gem-color-text);",
     "  text-align: center;",
     "}",
+    // The number in the middle of its cell, as the -/+ beside it (a <button> centres its label; an <output> is inline and
+    // put the digit 8-9px above the middle; Framework › Controls, 20/10/2026).
+    ".gem-quantity-input__field {",
+    "  display: grid;",
+    "  place-items: center;",
+    "}",
     ".gem-quantity-input__button {",
     "  font-weight: 750;",
     "}",
@@ -3065,7 +3126,7 @@ function createPrimitiveCss() {
     ".gem-cart-drawer__overlay {",
     "  position: fixed;",
     "  inset: 0;",
-    "  background: rgba(0, 0, 0, 0.36);",
+    `  background: ${gemScrim(36)};`,
     "}",
     // Opening motion (gemfactory request #13, 01/10/2026): 28 stored drawers each declared their own
     // `@keyframes …-in { from { transform: translateX(24px); opacity: 0 } }`. OPT-IN on the drawer root,
@@ -3857,7 +3918,7 @@ function createDawnParityCss() {
     ".gem-hero-banner--default { position: relative; overflow: hidden; padding: 0; color: white; place-items: stretch; }",
     ".gem-hero-banner--default .gem-hero-banner__inner { position: static; width: 100%; min-height: 720px; height: 100%; display: grid; align-items: end; justify-items: center; padding-bottom: 0; }",
     ".gem-hero-banner--default .gem-hero-banner__media { position: absolute; inset: 0; z-index: 0; }",
-    ".gem-hero-banner--default .gem-hero-banner__media::after { content: ''; position: absolute; inset: 0; background: rgb(0 0 0 / 32%); }",
+    `.gem-hero-banner--default .gem-hero-banner__media::after { content: ''; position: absolute; inset: 0; background: ${gemScrim(32)}; }`,
     ".gem-hero-banner--default .gem-hero-banner__image, .gem-hero-banner--default .gem-hero-banner__placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }",
     ".gem-hero-banner--default .gem-hero-banner__copy { position: absolute; z-index: 1; left: 50%; bottom: 50px; transform: translateX(-50%); width: min(702px, 100%); margin: 0; padding: 40px 0; text-align: center; display: block; }",
     ".gem-hero-banner--default .gem-section__heading { margin: 0; font-size: 52px; line-height: 67.6px; color: currentColor; }",
@@ -4363,7 +4424,10 @@ function createShellCss() {
     ".newsletter-form__field-wrapper, .field {",
     "  position: relative;",
     "}",
-    ".field__input, .field input, .gem-input {",
+    // Dawn's field floor, for Dawn's own field classes. It named .gem-input too, and 4.5rem is Dawn's 45px only on Dawn's
+    // 10px root: on this 16px root a .gem-input stood 72px beside a 44px select and stepper whenever no form set ruled it
+    // (GemFactory Framework › Controls, 20/10/2026). A .gem-input takes the primitive's floor, as every field does.
+    ".field__input, .field input {",
     "  min-height: 4.5rem;",
     "  border-radius: var(--inputs-radius, 0);",
     "}",
@@ -4850,6 +4914,662 @@ function offerEngineRuntimeScript() {
 })();`;
 }
 
+// ../../packages/gem-framework/src/reviews-engine.ts
+function reviewsEngineRuntimeScript() {
+  return `let boundReviews = 0;
+    document.querySelectorAll('[data-rv-root]').forEach((root) => {
+      if (!mark(root, 'reviews')) return;
+      boundReviews += 1;
+      const on = (el, type, fn, opt) => { if (canListen(el)) el.addEventListener(type, fn, opt); };
+      const all = (sel) => Array.from(root.querySelectorAll(sel));
+      const isEl = (t) => t instanceof window.Element;
+      const list = root.querySelector('[data-rv-list]');
+      const items = list ? Array.from(list.querySelectorAll('[data-rv-item]')) : [];
+      let pageSize = Math.max(1, parseInt((list && list.getAttribute('data-rv-page-size')) || '5', 10) || 5);
+      const moreSize = () => Math.max(1, parseInt((list && list.getAttribute('data-rv-more-size')) || '', 10) || pageSize);
+      const collapsedN = Math.max(0, parseInt((list && list.getAttribute('data-rv-collapsed')) || '0', 10) || 0);
+      const st = { sort: '', star: 0, media: false, topic: '', q: '', country: '', page: 1, shown: pageSize, collapsed: collapsedN > 0, staged: 0 };
+      const section = root.getAttribute('data-gem-section-library-id') || undefined;
+      const sectionId = root.getAttribute('data-gem-section-id') || root.id || undefined;
+      const pagesNavs = all('[data-rv-pages]');
+      const pagesMq = pagesNavs.length && window.matchMedia ? window.matchMedia(pagesNavs[0].getAttribute('data-rv-pages-media') || 'all') : null;
+      const usesPagesNow = () => pagesNavs.length > 0 && (!pagesMq || pagesMq.matches);
+      const prevPages = all('[data-rv-prev]');
+      const nextPages = all('[data-rv-next]');
+      const none = root.querySelector('[data-rv-none]');
+      const more = root.querySelector('[data-rv-more]');
+      const expand = root.querySelector('[data-rv-expand]');
+      const num = (el, a) => Number(el.getAttribute(a) || 0);
+      const isOn = (el, a) => el.getAttribute(a) === '1';
+      const byOrder = (a, b) => num(a, 'data-rv-order') - num(b, 'data-rv-order');
+      const newest = (a, b) => (a.hasAttribute('data-rv-recent') ? num(a, 'data-rv-recent') - num(b, 'data-rv-recent') : byOrder(a, b));
+      const leastHelpful = (a, b) => num(a, 'data-rv-helpful') - num(b, 'data-rv-helpful') || byOrder(a, b);
+      const SORTS = {
+        relevant: byOrder,
+        featured: byOrder,
+        recent: newest,
+        oldest: (a, b) => (a.hasAttribute('data-rv-recent') ? num(b, 'data-rv-recent') - num(a, 'data-rv-recent') : byOrder(b, a)),
+        verified: (a, b) => isOn(b, 'data-rv-verified') - isOn(a, 'data-rv-verified') || byOrder(a, b),
+        highest: (a, b) => num(b, 'data-rv-rating') - num(a, 'data-rv-rating') || byOrder(a, b),
+        lowest: (a, b) => num(a, 'data-rv-rating') - num(b, 'data-rv-rating') || byOrder(a, b),
+        helpful: (a, b) => num(b, 'data-rv-helpful') - num(a, 'data-rv-helpful') || byOrder(a, b),
+        leasthelpful: leastHelpful,
+        unhelpful: leastHelpful,
+        media: (a, b) => isOn(b, 'data-rv-media') - isOn(a, 'data-rv-media') || byOrder(a, b),
+        'media-only': newest,
+        videos: (a, b) => isOn(b, 'data-rv-video') - isOn(a, 'data-rv-video') || newest(a, b),
+      };
+      const matches = (it) => {
+        if (st.star && num(it, 'data-rv-rating') !== st.star) return false;
+        if ((st.media || st.sort === 'media-only') && !isOn(it, 'data-rv-media')) return false;
+        if (st.country && it.getAttribute('data-rv-country-code') !== st.country) return false;
+        if (st.topic) {
+          const tags = (it.getAttribute('data-rv-topics') || '').toLowerCase().split('|').filter(Boolean);
+          if (tags.length ? !tags.includes(st.topic) : !(it.textContent || '').toLowerCase().includes(st.topic)) return false;
+        }
+        if (st.q && !(it.textContent || '').toLowerCase().includes(st.q)) return false;
+        return true;
+      };
+      const filterKeys = ['star', 'media', 'topic', 'q', 'country'];
+      const only = (k) => filterKeys.every((x) => x === k || !st[x]);
+      // Counts as written ("5284") unless the list names a locale: data-rv-locale="en-US" \u2192 5,284; "auto" \u2192 the page's lang.
+      const locale = list ? list.getAttribute('data-rv-locale') : null;
+      const fmtCount = (n) => {
+        const v = Number(n) || 0;
+        if (!locale) return String(v);
+        try { return v.toLocaleString(locale === 'auto' ? (document.documentElement && document.documentElement.lang) || undefined : locale); } catch (err) { return String(v); }
+      };
+
+      // Read more: the button opens the body of its scope; short text hides the button. Measured after every draw, on
+      // resize and once the theme's fonts are in, because a review on a later page (or under a filter) measures 0.
+      const moreScope = (b) => b.closest('[data-rv-more-scope]') || b.closest('[data-rv-item], [data-rv-scope]') || root;
+      const syncReadMore = () => all('[data-rv-readmore]').forEach((b) => {
+        const it = b.closest('[data-rv-item]');
+        if ((it && it.hidden) || b.hasAttribute('data-rv-keep')) return;
+        const body = moreScope(b).querySelector('[data-rv-body]');
+        if (!body || !body.getClientRects().length) return;
+        b.hidden = !body.hasAttribute('data-rv-open') && body.scrollHeight <= body.clientHeight + 2;
+      });
+
+      // Search (and, with data-rv-mark-topic, topic) words marked in [data-rv-hl]; the original nodes come back on every draw.
+      const hlOrig = new Map();
+      const markClass = (list && list.getAttribute('data-rv-mark-class')) || '';
+      const highlight = () => {
+        const terms = [st.q, list && list.hasAttribute('data-rv-mark-topic') ? st.topic : ''].filter((x) => x && x.length > 1);
+        const re = terms.length ? new RegExp('(' + terms.map((x) => x.replace(/[.*+?^\${}()|[\\]\\\\]/g, '\\\\$&')).join('|') + ')', 'gi') : null;
+        all('[data-rv-hl]').forEach((el) => {
+          if (!hlOrig.has(el)) { if (!re) return; hlOrig.set(el, Array.from(el.childNodes).map((n) => n.cloneNode(true))); }
+          else el.replaceChildren(...hlOrig.get(el).map((n) => n.cloneNode(true)));
+          if (!re) return;
+          const walker = document.createTreeWalker(el, 4);
+          const nodes = []; while (walker.nextNode()) nodes.push(walker.currentNode);
+          nodes.forEach((n) => {
+            const parts = (n.nodeValue || '').split(re);
+            if (parts.length < 2) return;
+            const frag = document.createDocumentFragment();
+            parts.forEach((p, i) => { if (i % 2 === 0) { if (p) frag.append(p); return; } const m = document.createElement('mark'); m.className = markClass; m.textContent = p; frag.append(m); });
+            n.replaceWith(frag);
+          });
+        });
+      };
+
+      const drawPages = (nav, pages) => {
+        const cur = st.page;
+        const win = Number(nav.getAttribute('data-rv-page-window') || 0);
+        let seq;
+        if (win > 0) {
+          // A window of N numbers around the current page, no \u2026 (Yotpo: 1 2 3 4 5).
+          const start = Math.max(1, Math.min(cur - Math.floor(win / 2), pages - win + 1));
+          seq = Array.from({ length: Math.min(win, pages) }, (_, k) => start + k);
+        } else {
+          // 1 \u2026 n around the current page (Judge.me: 1 2 3 4 \u2026 18).
+          const want = new Set([1, pages, cur - 1, cur, cur + 1].filter((p) => p >= 1 && p <= pages));
+          if (cur <= 3) [2, 3, 4].forEach((p) => { if (p <= pages) want.add(p); });
+          seq = Array.from(want).sort((a, b) => a - b);
+        }
+        const tpl = nav.querySelector('[data-rv-page-tpl]');
+        const anchor = nextPages.find((b) => nav.contains(b)) || null;
+        nav.querySelectorAll('[data-rv-page]:not([data-rv-page-tpl]), [data-rv-gap]').forEach((e) => e.remove());
+        let last = 0;
+        seq.forEach((p) => {
+          if (!win && p - last > 1) {
+            const g = document.createElement('span');
+            g.setAttribute('data-rv-gap', ''); g.setAttribute('aria-hidden', 'true');
+            g.className = (tpl && tpl.getAttribute('data-rv-gap-class')) || ''; g.textContent = '\u2026';
+            nav.insertBefore(g, anchor);
+          }
+          const b = document.createElement('button');
+          b.type = 'button'; b.className = tpl ? tpl.className : ''; b.textContent = String(p);
+          b.setAttribute('data-rv-page', String(p)); b.setAttribute('aria-label', 'Page ' + p);
+          if (p === cur) b.setAttribute('aria-current', 'page');
+          nav.insertBefore(b, anchor);
+          last = p;
+        });
+      };
+
+      // Active-filter chips: one per filter in force, a click removes that filter.
+      const chipsBox = root.querySelector('[data-rv-chips]');
+      const chipTpl = root.querySelector('[data-rv-chip-tpl]');
+      const starText = (v) => { const e = root.querySelector('[data-rv-star="' + v + '"][data-rv-star-text]'); return e ? e.getAttribute('data-rv-star-text') || '' : ''; };
+      const countryText = (c) => { const e = root.querySelector('[data-rv-country="' + c + '"][data-rv-country-text]'); return e ? e.getAttribute('data-rv-country-text') || c : c; };
+      const drawChips = () => {
+        if (!chipsBox || !chipTpl) return;
+        chipsBox.replaceChildren();
+        const add = (kind, label, star) => {
+          const b = chipTpl.cloneNode(true);
+          b.removeAttribute('data-rv-chip-tpl'); b.hidden = false;
+          const t = b.querySelector('[data-rv-chip-text]'); if (t) t.textContent = label;
+          const s = b.querySelector('[data-rv-chip-star]'); if (s) s.hidden = !star;
+          const v = b.querySelector('[data-rv-chip-value]'); if (v) v.textContent = star || '';
+          b.setAttribute('data-rv-chip', kind);
+          b.setAttribute('aria-label', ((b.getAttribute('data-rv-remove') || 'Remove') + ' ' + label + ' ' + (star || '')).trim());
+          chipsBox.appendChild(b);
+        };
+        if (st.star) add('star', chipsBox.getAttribute('data-rv-chip-rating') || '', starText(st.star) || String(st.star));
+        if (st.media) add('media', chipsBox.getAttribute('data-rv-chip-media') || '', '');
+        if (st.country) add('country', countryText(st.country), '');
+        chipsBox.hidden = !chipsBox.childElementCount;
+      };
+
+      const render = (focusFirstNew, scroll) => {
+        if (!list) return;
+        const sorted = st.sort && SORTS[st.sort] ? items.slice().sort(SORTS[st.sort]) : items;
+        if (st.sort) sorted.forEach((it) => list.appendChild(it));
+        const hit = sorted.filter(matches);
+        const hitSet = new Set(hit);
+        const total = hit.length;
+        const usesPages = !st.collapsed && usesPagesNow();
+        const pages = Math.max(1, Math.ceil(total / pageSize));
+        if (st.page > pages) st.page = pages;
+        const from = usesPages ? (st.page - 1) * pageSize : 0;
+        const to = st.collapsed ? collapsedN : usesPages ? from + pageSize : st.shown;
+        let firstNew = null;
+        items.forEach((it) => { if (!hitSet.has(it)) it.hidden = true; });
+        hit.forEach((it, i) => {
+          const show = i >= from && i < to;
+          if (show && it.hidden && !firstNew && focusFirstNew) firstNew = it;
+          it.hidden = !show;
+        });
+        if (none) none.hidden = total > 0;
+        if (more) more.hidden = st.collapsed || usesPages || to >= total;
+        if (expand) expand.hidden = !st.collapsed || total <= collapsedN;
+        if (list.hasAttribute('data-rv-collapsed')) root.toggleAttribute('data-rv-expanded', !st.collapsed);
+        const filtered = filterKeys.some((k) => !!st[k]);
+        // Found: the store's own count when nothing filters; the star row's (or topic chip's) count when only that filters
+        // (the breakdown of the WHOLE store, as review widgets show it); otherwise what matched on the page.
+        const starEl = st.star ? root.querySelector('[data-rv-star="' + st.star + '"][data-rv-star-count]') : null;
+        const topicEl = st.topic ? all('[data-rv-topic][data-rv-topic-count]').find((x) => (x.getAttribute('data-rv-topic') || '').toLowerCase() === st.topic) : null;
+        const found = !filtered ? Number(list.getAttribute('data-rv-total') || total)
+          : starEl && only('star') ? Number(starEl.getAttribute('data-rv-star-count'))
+          : topicEl && only('topic') ? Number(topicEl.getAttribute('data-rv-topic-count'))
+          : total;
+        const shown = Math.max(0, Math.min(to, total) - from);
+        root.toggleAttribute('data-rv-filtered', filtered);
+        root.setAttribute('data-rv-f-star', String(st.star || ''));
+        root.setAttribute('data-rv-f-topic', st.topic);
+        root.setAttribute('data-rv-f-country', st.country);
+        root.toggleAttribute('data-rv-f-media', st.media);
+        all('[data-rv-star-value]').forEach((e) => (e.querySelector('.gem-stars') || e).style.setProperty('--gem-stars-value', String(st.star || 0)));
+        all('[data-rv-star-text]:not([data-rv-star])').forEach((e) => { e.textContent = String(st.star || ''); });
+        all('[data-rv-star-label]').forEach((e) => { e.textContent = st.star ? starText(st.star) : ''; });
+        all('[data-rv-country-label]').forEach((e) => { e.textContent = st.country ? countryText(st.country) : ''; });
+        all('[data-rv-filter-count]').forEach((e) => { const n = (st.star ? 1 : 0) + (st.media ? 1 : 0) + (st.topic ? 1 : 0) + (st.country ? 1 : 0); e.textContent = String(n); e.hidden = n === 0; });
+        all('[data-rv-count-label]').forEach((e) => { e.textContent = ((found === 1 && e.getAttribute('data-rv-count-one')) || e.getAttribute('data-rv-count-label') || '').replace('{count}', fmtCount(found)); });
+        all('[data-rv-status]').forEach((s) => {
+          const tpl = (found === 1 && s.getAttribute('data-rv-status-one')) || s.getAttribute('data-rv-status-template') || '';
+          s.textContent = tpl && filtered ? tpl.replace('{count}', fmtCount(found)).replace('{shown}', String(shown)).replace('{total}', String(total)) : '';
+        });
+        all('[data-rv-hl-topic]').forEach((m) => m.toggleAttribute('data-rv-hl-on', !!st.topic && (m.getAttribute('data-rv-hl-topic') || '').toLowerCase() === st.topic));
+        highlight();
+        drawChips();
+        pagesNavs.forEach((nav) => {
+          if (usesPages && nav.querySelector('[data-rv-page-tpl]')) drawPages(nav, pages);
+          nav.hidden = !usesPages || pages <= 1;
+        });
+        all('[data-rv-page-label]').forEach((l) => { l.textContent = (l.getAttribute('data-rv-page-template') || '{page}').replace('{page}', String(st.page)).replace('{pages}', String(pages)); });
+        prevPages.forEach((b) => { b.toggleAttribute('disabled', st.page <= 1); b.setAttribute('aria-disabled', String(st.page <= 1)); });
+        nextPages.forEach((b) => { b.toggleAttribute('disabled', st.page >= pages); b.setAttribute('aria-disabled', String(st.page >= pages)); });
+        syncReadMore();
+        if (firstNew) {
+          const f = firstNew.querySelector('h3, [tabindex], a, button') || firstNew;
+          if (f === firstNew && !f.hasAttribute('tabindex')) f.setAttribute('tabindex', '-1');
+          f.focus({ preventScroll: false });
+        }
+        if (scroll) { const t = root.querySelector('[data-rv-scroll-to]') || list; if (t.scrollIntoView) t.scrollIntoView({ block: 'start', behavior: 'smooth' }); }
+        const detail = { source: 'gem-runtime', section, sectionId, total, found, shown, page: st.page, pages, filtered, star: st.star, sort: st.sort };
+        if (typeof window.CustomEvent === 'function') root.dispatchEvent(new window.CustomEvent('gem:reviews:render', { detail }));
+        api.emit('gem:reviews:render', detail);
+      };
+      const reset = () => { st.page = 1; st.shown = pageSize; };
+
+      // Menus: one open at a time; Escape, a click outside, or choosing an item closes it.
+      const menus = all('[data-rv-menu]');
+      const panelOf = (b) => root.querySelector('[data-rv-menu-panel="' + b.getAttribute('data-rv-menu') + '"]');
+      const closeMenus = (except) => menus.forEach((b) => {
+        if (b === except) return;
+        b.setAttribute('aria-expanded', 'false');
+        const p = panelOf(b); if (p) p.hidden = true;
+      });
+      // A choice made inside a menu panel closes it, and focus goes back to the menu's button (the section behaviors left
+      // it on a now hidden item, so it fell to <body>). A filter row in a panel with data-rv-menu-keep stays open where
+      // that media query matches; sort and Show N always close.
+      const closeAfterChoice = (el, always) => {
+        const p = el.closest('[data-rv-menu-panel]');
+        if (!p) { if (always) closeMenus(); return; }
+        const keep = p.getAttribute('data-rv-menu-keep');
+        if (!always && keep && window.matchMedia && window.matchMedia(keep).matches) return;
+        const owner = menus.find((b) => panelOf(b) === p);
+        closeMenus();
+        if (owner && p.contains(document.activeElement)) owner.focus({ preventScroll: true });
+      };
+      menus.forEach((b) => on(b, 'click', (e) => {
+        e.preventDefault();
+        const open = b.getAttribute('aria-expanded') !== 'true';
+        closeMenus(b);
+        b.setAttribute('aria-expanded', String(open));
+        const p = panelOf(b);
+        if (p) { p.hidden = !open; if (open) { const f = p.querySelector('[aria-checked=true], [aria-current=true], button, a, input') || p; if (f.focus) f.focus({ preventScroll: true }); } }
+      }));
+      if (menus.length) {
+        on(window, 'keydown', (e) => {
+          if (e.key !== 'Escape') return;
+          const openMenu = menus.find((x) => x.getAttribute('aria-expanded') === 'true');
+          if (openMenu) { closeMenus(); openMenu.focus(); }
+        });
+        on(window, 'click', (e) => {
+          if (!(e.target instanceof window.Node)) return;
+          if (menus.some((b) => b.contains(e.target)) || all('[data-rv-menu-panel]').some((p) => p.contains(e.target))) return;
+          closeMenus();
+        });
+      }
+
+      // Every filter control reads its state from st (buttons, menu items, chips, Clear).
+      const syncStars = () => all('[data-rv-star]').forEach((x) => {
+        const yes = Number(x.getAttribute('data-rv-star')) === st.star;
+        if (x.hasAttribute('aria-checked')) x.setAttribute('aria-checked', String(yes));
+        else if (x.hasAttribute('aria-current')) x.setAttribute('aria-current', String(yes && st.star > 0));
+        else x.setAttribute('aria-pressed', String(yes && st.star > 0));
+      });
+      const syncControls = () => {
+        syncStars();
+        all('[data-rv-media-filter]').forEach((x) => { if (x.matches('input')) x.checked = st.media; else x.setAttribute('aria-pressed', String(st.media)); });
+        all('[data-rv-country]').forEach((x) => x.setAttribute('aria-checked', String((x.getAttribute('data-rv-country') || '') === st.country)));
+        all('[data-rv-topic]').forEach((x) => x.setAttribute('aria-pressed', String(!!st.topic && (x.getAttribute('data-rv-topic') || '').toLowerCase() === st.topic)));
+      };
+
+      // Toggles: an inline panel / region / collapse opened by its button, not closed by a click outside. Closing a region
+      // that has data-rv-region-clear drops the filters inside it (closing the filter row = no star filter; closing the
+      // search box = no search), as Judge.me does.
+      const PANEL_ATTRS = ['data-rv-toggle-panel', 'data-rv-region', 'data-rv-collapse-panel'];
+      const togglePanels = (id) => all('[data-rv-toggle-panel], [data-rv-region], [data-rv-collapse-panel]').filter((p) => PANEL_ATTRS.some((a) => p.hasAttribute(a) && p.getAttribute(a) === id));
+      const toggleId = (t) => (t.hasAttribute('data-rv-toggle') ? t.getAttribute('data-rv-toggle') : t.getAttribute('data-rv-collapse')) || '';
+      const setToggle = (id, open) => {
+        const ps = togglePanels(id);
+        if (!ps.length) return;
+        const was = ps.some((p) => !p.hidden);
+        ps.forEach((p) => { p.hidden = !open; });
+        all('[data-rv-toggle], [data-rv-collapse]').forEach((t) => { if (toggleId(t) === id) t.setAttribute('aria-expanded', String(open)); });
+        const r = !open && was ? ps.find((p) => p.hasAttribute('data-rv-region-clear')) : null;
+        if (!r) return;
+        let changed = false;
+        if (r.querySelector('[data-rv-star]') && st.star) { st.star = 0; changed = true; syncControls(); }
+        r.querySelectorAll('input[data-rv-search]').forEach((x) => { if (x.value || st.q) { x.value = ''; st.q = ''; changed = true; } });
+        if (changed) { reset(); render(); }
+      };
+      all('[data-rv-toggle], [data-rv-collapse]').forEach((t) => on(t, 'click', (e) => {
+        e.preventDefault();
+        const ps = togglePanels(toggleId(t));
+        setToggle(toggleId(t), ps.length ? ps.every((p) => p.hidden) : t.getAttribute('aria-expanded') !== 'true');
+      }));
+
+      const setSort = (key, label) => {
+        st.sort = key; reset();
+        all('[data-rv-sort-option]').forEach((o) => o.setAttribute('aria-checked', String(o.getAttribute('data-rv-sort-option') === key)));
+        all('select[data-rv-sort]').forEach((s) => { if (s.value !== key) s.value = key; });
+        if (label) {
+          all('[data-rv-sort-label]').forEach((l) => { l.textContent = label; });
+          all('[data-rv-menu][data-rv-sort-aria]').forEach((b) => b.setAttribute('aria-label', (b.getAttribute('data-rv-sort-aria') || '').replace('{label}', label)));
+        }
+        render();
+      };
+      all('select[data-rv-sort]').forEach((s) => on(s, 'change', () => setSort(s.value, '')));
+      all('[data-rv-sort-option]').forEach((o) => on(o, 'click', (e) => {
+        e.preventDefault();
+        setSort(o.getAttribute('data-rv-sort-option') || '', (o.getAttribute('data-rv-sort-text') || o.textContent || '').trim());
+        closeAfterChoice(o, true);
+      }));
+      const starKeep = root.getAttribute('data-rv-star-keep');
+      all('[data-rv-star]').forEach((b) => on(b, 'click', (e) => {
+        e.preventDefault();
+        const v = Number(b.getAttribute('data-rv-star')) || 0;
+        const keep = starKeep !== null && (starKeep !== 'menu' || !!b.closest('[data-rv-menu-panel]'));
+        st.star = keep ? v : st.star === v ? 0 : v; reset();
+        syncControls();
+        if (b.hasAttribute('data-rv-open-region')) setToggle(b.getAttribute('data-rv-open-region') || '', true);
+        closeAfterChoice(b);
+        render();
+      }));
+      all('[data-rv-media-filter]').forEach((m) => on(m, m.matches('input') ? 'change' : 'click', (e) => {
+        if (!m.matches('input')) e.preventDefault();
+        st.media = m.matches('input') ? m.checked : !st.media; reset();
+        syncControls();
+        render();
+      }));
+      all('[data-rv-country]').forEach((c) => on(c, 'click', (e) => {
+        e.preventDefault();
+        st.country = c.getAttribute('data-rv-country') || ''; reset();
+        syncControls();
+        closeAfterChoice(c);
+        render();
+      }));
+      all('[data-rv-topic]').forEach((t) => on(t, 'click', (e) => {
+        e.preventDefault();
+        const v = (t.getAttribute('data-rv-topic') || '').toLowerCase();
+        st.topic = st.topic === v ? '' : v; reset();
+        syncControls();
+        render();
+      }));
+      all('input[data-rv-search]').forEach((s) => {
+        let wait = 0;
+        const apply = () => { st.q = s.value.trim().toLowerCase(); reset(); render(); };
+        on(s, 'input', () => { window.clearTimeout(wait); wait = window.setTimeout(apply, 180); });
+        on(s.form || s, 'submit', (e) => { e.preventDefault(); apply(); });
+      });
+      // Clear: data-rv-clear="star" | "topic" drops that filter only (the "\xD7 Clear" beside a label); empty drops them all.
+      all('[data-rv-clear]').forEach((c) => on(c, 'click', (e) => {
+        e.preventDefault();
+        const scope = c.getAttribute('data-rv-clear') || '';
+        if (!scope || scope === 'star') st.star = 0;
+        if (!scope || scope === 'topic') st.topic = '';
+        if (!scope) { st.media = false; st.q = ''; st.country = ''; all('input[data-rv-search]').forEach((x) => { x.value = ''; }); }
+        reset();
+        syncControls();
+        render();
+      }));
+      on(chipsBox, 'click', (e) => {
+        const b = isEl(e.target) ? e.target.closest('[data-rv-chip]') : null;
+        if (!b) return;
+        e.preventDefault();
+        const k = b.getAttribute('data-rv-chip');
+        if (k === 'star') st.star = 0;
+        if (k === 'media') st.media = false;
+        if (k === 'country') st.country = '';
+        reset(); syncControls(); render();
+      });
+      // A filter sheet with Apply: its star chips only stage a choice, Apply filters, Reset un-stages.
+      const syncStage = () => all('[data-rv-stage]').forEach((c) => c.setAttribute('aria-pressed', String(Number(c.getAttribute('data-rv-stage')) === st.staged)));
+      all('[data-rv-stage]').forEach((c) => on(c, 'click', (e) => { e.preventDefault(); st.staged = Number(c.getAttribute('data-rv-stage')) || 0; syncStage(); }));
+      all('[data-rv-reset]').forEach((c) => on(c, 'click', (e) => { e.preventDefault(); st.staged = 0; syncStage(); }));
+      all('[data-rv-apply]').forEach((c) => on(c, 'click', (e) => {
+        e.preventDefault();
+        st.star = st.staged; reset(); syncControls(); render();
+        const d = c.closest('dialog'); if (d && d.open) d.close();
+      }));
+
+      on(more, 'click', (e) => { e.preventDefault(); st.shown += moreSize(); render(true); });
+      on(expand, 'click', (e) => { e.preventDefault(); st.collapsed = false; st.page = 1; render(); });
+      pagesNavs.forEach((nav) => on(nav, 'click', (e) => {
+        const b = isEl(e.target) ? e.target.closest('[data-rv-page]') : null;
+        if (!b || b.hasAttribute('data-rv-page-tpl')) return;
+        e.preventDefault(); st.page = Number(b.getAttribute('data-rv-page')) || 1; render(false, true);
+      }));
+      prevPages.forEach((b) => on(b, 'click', (e) => { e.preventDefault(); if (st.page > 1) { st.page -= 1; render(false, true); } }));
+      nextPages.forEach((b) => on(b, 'click', (e) => { e.preventDefault(); st.page += 1; render(false, true); }));
+      all('[data-rv-per-page-option]').forEach((o) => on(o, 'click', (e) => {
+        e.preventDefault();
+        pageSize = Math.max(1, Number(o.getAttribute('data-rv-per-page-option')) || pageSize); reset();
+        all('[data-rv-per-page-option]').forEach((x) => x.setAttribute('aria-checked', String(x === o)));
+        all('[data-rv-per-page-label]').forEach((l) => { l.textContent = String(pageSize); });
+        closeAfterChoice(o, true);
+        render();
+      }));
+      if (pagesMq) on(pagesMq, 'change', () => { reset(); render(); });
+
+      all('[data-rv-readmore]').forEach((b) => on(b, 'click', (e) => {
+        e.preventDefault();
+        const body = moreScope(b).querySelector('[data-rv-body]');
+        const open = b.getAttribute('aria-expanded') !== 'true';
+        b.setAttribute('aria-expanded', String(open));
+        if (body) body.toggleAttribute('data-rv-open', open);
+        const less = b.getAttribute('data-rv-less'); const moreText = b.getAttribute('data-rv-more-text');
+        if (less && moreText) b.textContent = open ? less : moreText;
+      }));
+      let resizeWait = 0;
+      on(window, 'resize', () => { window.clearTimeout(resizeWait); resizeWait = window.setTimeout(syncReadMore, 150); });
+      if (document.fonts && document.fonts.ready) document.fonts.ready.then(syncReadMore).catch(() => {});
+      on(root, 'gem:reviews:refresh', () => render());
+
+      // Tracks (a strip of photos or cards): back / forward one card; the buttons switch off at either end. A looping
+      // track (data-rv-loop) is the section's own carousel and is left to it.
+      all('[data-rv-track]').forEach((track) => {
+        if (track.hasAttribute('data-rv-loop')) return;
+        const scope = track.closest('[data-rv-carousel]') || root;
+        const prev = scope.querySelector('[data-rv-slide-prev]'); const next = scope.querySelector('[data-rv-slide-next]');
+        const step = () => { const c = track.firstElementChild; const gap = parseFloat(window.getComputedStyle(track).columnGap || '0') || 0; return c ? c.getBoundingClientRect().width + gap : track.clientWidth; };
+        const sync = () => { const max = track.scrollWidth - track.clientWidth - 2; if (prev) prev.toggleAttribute('disabled', track.scrollLeft <= 2); if (next) next.toggleAttribute('disabled', track.scrollLeft >= max); };
+        on(prev, 'click', (e) => { e.preventDefault(); track.scrollBy({ left: -step(), behavior: 'smooth' }); });
+        on(next, 'click', (e) => { e.preventDefault(); track.scrollBy({ left: step(), behavior: 'smooth' }); });
+        on(track, 'scroll', sync, { passive: true });
+        sync();
+      });
+
+      // Filter sheet (phones): a button opens dialog[data-rv-sheet], delegated on the root so copies made after binding
+      // (an inline card a section repeats) open it too; closing returns focus to that button.
+      let sheetFrom = null;
+      on(root, 'click', (e) => {
+        const b = isEl(e.target) ? e.target.closest('[data-rv-sheet-open]') : null;
+        if (!b) return;
+        const d = root.querySelector('dialog[data-rv-sheet="' + b.getAttribute('data-rv-sheet-open') + '"]');
+        if (!d || typeof d.showModal !== 'function') return;
+        e.preventDefault(); sheetFrom = b; st.staged = st.star; syncStage(); closeMenus(); if (!d.open) d.showModal();
+      });
+      all('dialog[data-rv-sheet]').forEach((d) => {
+        d.querySelectorAll('[data-rv-sheet-close]').forEach((c) => on(c, 'click', (e) => {
+          e.preventDefault(); if (d.open) d.close();
+          if (c.hasAttribute('data-rv-scroll-list') && list) { sheetFrom = null; list.scrollIntoView({ block: 'start', behavior: 'smooth' }); }
+        }));
+        on(d, 'click', (e) => {
+          if (e.target !== d || !d.hasAttribute('data-rv-backdrop-close')) return;
+          const r = d.getBoundingClientRect();
+          if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) d.close();
+        });
+        on(d, 'close', () => { const opener = sheetFrom && sheetFrom.isConnected ? sheetFrom : null; sheetFrom = null; if (opener) opener.focus({ preventScroll: true }); });
+      });
+
+      // Helpful: once per review (or per [data-rv-vote-scope]: a question, an answer), counted in place.
+      all('[data-rv-vote]').forEach((b) => on(b, 'click', (e) => {
+        e.preventDefault();
+        const scope = b.closest('[data-rv-item], [data-rv-vote-scope]');
+        if (!scope || scope.hasAttribute('data-rv-voted')) return;
+        scope.setAttribute('data-rv-voted', b.getAttribute('data-rv-vote') || '');
+        b.setAttribute('aria-pressed', 'true');
+        const c = b.querySelector('[data-rv-vote-count]'); if (c) c.textContent = String((Number(c.textContent) || 0) + 1);
+        scope.querySelectorAll('[data-rv-vote]').forEach((x) => x.setAttribute('disabled', ''));
+        const detail = { source: 'gem-runtime', section, sectionId, review: scope.id, value: b.getAttribute('data-rv-vote') };
+        api.emit('gem:review:vote', detail);
+        if (typeof window.CustomEvent === 'function') window.dispatchEvent(new window.CustomEvent('gem:review:vote', { detail }));
+      }));
+
+      // Lightbox. The set it walks: every [data-rv-zoom] of the section in page order (data-rv-lb-dedupe: one entry per
+      // photo), the opener's [data-rv-group], the opener's review (data-rv-lb-scope="review"), or the opener's own
+      // data-rv-media-list. Ends: hide the arrow (default), disable it, or wrap. The review the photo belongs to is copied
+      // beside it from [data-rv-lb-part]; Escape closes (native dialog) and focus returns to the opener.
+      const lb = root.querySelector('dialog[data-rv-lightbox]');
+      const zooms = all('[data-rv-zoom]');
+      const lbScoped = !!lb && lb.getAttribute('data-rv-lb-scope') === 'review';
+      const lbEnds = lb ? lb.getAttribute('data-rv-lb-ends') || (lbScoped ? 'disable' : 'hide') : 'hide';
+      const lbVotes = !lb || lb.getAttribute('data-rv-lb-votes') !== 'off';
+      const entryOf = (z) => {
+        const img = z.querySelector('img');
+        return { el: z, src: z.getAttribute('data-rv-src') || '', kind: z.getAttribute('data-rv-kind') || '', poster: z.getAttribute('data-rv-poster') || '',
+          alt: z.getAttribute('data-rv-alt') || '', thumb: z.getAttribute('data-rv-thumb') || (img && img.getAttribute('src')) || z.getAttribute('data-rv-src') || '',
+          review: z.getAttribute('data-rv-review') || '' };
+      };
+      const lbAll = [];
+      const seenSrc = new Set();
+      zooms.forEach((z) => {
+        const en = entryOf(z);
+        if (lb && lb.hasAttribute('data-rv-lb-dedupe')) { if (seenSrc.has(en.src)) return; seenSrc.add(en.src); }
+        lbAll.push(en);
+      });
+      const setFor = (z) => {
+        const raw = z.getAttribute('data-rv-media-list');
+        if (raw !== null) {
+          let parsed = [];
+          try { parsed = JSON.parse(raw || '[]'); } catch (err) { parsed = []; }
+          return (Array.isArray(parsed) ? parsed : []).filter((m) => m && m.src).map((m) => ({ el: null, src: String(m.src), kind: m.kind || '', poster: m.poster || '', alt: m.alt || '', thumb: m.poster || String(m.src), review: z.getAttribute('data-rv-review') || '' }));
+        }
+        const g = z.getAttribute('data-rv-group');
+        if (g) return lbAll.filter((x) => x.el.getAttribute('data-rv-group') === g);
+        if (lbScoped) {
+          const r = z.getAttribute('data-rv-review') || '';
+          const own = lbAll.filter((x) => x.review === r && !x.el.closest('[data-rv-carousel]'));
+          return own.length ? own : [entryOf(z)];
+        }
+        return lbAll;
+      };
+      const indexIn = (set, z) => {
+        const i = set.findIndex((x) => x.el === z);
+        if (i >= 0) return i;
+        const src = z.getAttribute('data-rv-src');
+        const j = set.findIndex((x) => x.src === src && x.review === (z.getAttribute('data-rv-review') || ''));
+        return Math.max(0, j >= 0 ? j : set.findIndex((x) => x.src === src));
+      };
+      let lbSet = lbAll; let lbAt = 0; let lbFrom = null; let stripFor = null;
+      const strip = lb ? lb.querySelector('[data-rv-lb-thumbs]') : null;
+      const buildStrip = () => {
+        if (!strip || stripFor === lbSet) return;
+        stripFor = lbSet;
+        strip.replaceChildren();
+        if (lbSet.length > 1) lbSet.forEach((x, k) => {
+          const b = document.createElement('button');
+          b.type = 'button'; b.className = strip.getAttribute('data-rv-thumb-class') || ''; b.setAttribute('data-rv-lb-thumb', String(k));
+          b.setAttribute('aria-label', (strip.getAttribute('data-rv-thumb-label') || 'Media {n} of {total}').replace('{n}', String(k + 1)).replace('{total}', String(lbSet.length)));
+          const img = document.createElement('img'); img.src = x.thumb; img.alt = ''; img.loading = 'lazy'; img.decoding = 'async';
+          b.appendChild(img); strip.appendChild(b);
+        });
+        strip.hidden = lbSet.length <= 1;
+      };
+      const lbShow = (i) => {
+        if (!lb) return;
+        const n = lbSet.length;
+        lbAt = lbEnds === 'wrap' && n ? ((i % n) + n) % n : Math.max(0, Math.min(n - 1, i));
+        const x = lbSet[lbAt];
+        lb.toggleAttribute('data-rv-lb-empty', !n);
+        lb.toggleAttribute('data-rv-lb-multi', n > 1);
+        const media = lb.querySelector('[data-rv-lb-media]');
+        if (media) {
+          media.replaceChildren();
+          if (x && x.kind === 'video') { const v = document.createElement('video'); v.src = x.src; if (x.poster) v.setAttribute('poster', x.poster); v.controls = true; v.playsInline = true; v.autoplay = true; media.appendChild(v); }
+          else if (x) { const img = document.createElement('img'); img.src = x.src; img.alt = x.alt; media.appendChild(img); }
+        }
+        const stage = lb.querySelector('[data-rv-lb-stage]');
+        if (stage && x) {
+          const img = x.el && x.el.querySelector('img');
+          let bg = img ? img.currentSrc || img.src : '';
+          if (!bg) { try { bg = new URL(x.src, window.location.href).href; } catch (err) { bg = x.src; } }
+          stage.style.setProperty('--rv-lb-bg', 'url("' + String(bg).replace(/"/g, '%22') + '")');
+        }
+        const panel = lb.querySelector('[data-rv-lb-review]');
+        if (panel) {
+          panel.replaceChildren();
+          // A review with no photos (an empty media list) still shows its review: the opener names it.
+          const rid = x ? x.review : (lbFrom && lbFrom.getAttribute && lbFrom.getAttribute('data-rv-review')) || '';
+          const item = rid ? items.find((it) => it.id === rid) : null;
+          if (item) item.querySelectorAll('[data-rv-lb-part]').forEach((part) => {
+            const copy = part.cloneNode(true);
+            copy.removeAttribute('id'); copy.querySelectorAll('[id]').forEach((el) => el.removeAttribute('id'));
+            copy.querySelectorAll('input, label[for], [data-rv-readmore]').forEach((el) => el.remove());
+            copy.querySelectorAll('[data-rv-zoom]').forEach((t) => { t.removeAttribute('data-rv-zoom'); t.setAttribute('tabindex', '-1'); if (t.getAttribute('data-rv-src') === x.src) t.setAttribute('aria-current', 'true'); });
+            copy.querySelectorAll('[data-rv-zoom-alias]').forEach((t) => { if (lbSet === lbAll && t.getAttribute('data-rv-zoom-alias') === String(lbAt)) t.setAttribute('aria-current', 'true'); });
+            if (!lbVotes) copy.querySelectorAll('button').forEach((el) => { el.setAttribute('tabindex', '-1'); el.setAttribute('disabled', ''); });
+            panel.appendChild(copy);
+          });
+          panel.hidden = !item;
+          lb.toggleAttribute('data-rv-lb-has-review', !!item);
+        }
+        const peek = lb.querySelector('[data-rv-lb-peek]');
+        if (peek) {
+          peek.replaceChildren();
+          const nx = lbSet[lbAt + 1];
+          const url = nx ? nx.poster || (nx.kind === 'video' ? '' : nx.src) : '';
+          if (url) { const img = document.createElement('img'); img.src = url; img.alt = ''; peek.appendChild(img); }
+          peek.hidden = !nx;
+        }
+        const count = lb.querySelector('[data-rv-lb-count]'); if (count) count.textContent = n ? (lbAt + 1) + ' / ' + n : '';
+        const pv = lb.querySelector('[data-rv-lb-prev]'); const nxb = lb.querySelector('[data-rv-lb-next]');
+        [[pv, lbAt <= 0], [nxb, lbAt >= n - 1]].forEach(([b, atEnd]) => {
+          if (!b) return;
+          if (lbEnds === 'wrap') { b.hidden = n < 2; b.disabled = false; }
+          else if (lbEnds === 'disable') { b.hidden = n < 2; b.disabled = atEnd; }
+          else { b.hidden = atEnd; b.disabled = false; }
+        });
+        if (strip) Array.from(strip.children).forEach((t, k) => {
+          if (k !== lbAt) { t.removeAttribute('aria-current'); return; }
+          t.setAttribute('aria-current', 'true');
+          if (strip.scrollTo) strip.scrollTo({ left: t.offsetLeft - (strip.clientWidth - t.offsetWidth) / 2, behavior: lb.open ? 'smooth' : 'auto' });
+        });
+      };
+      const lbOpen = (e, set, at, opener) => {
+        if (!lb || typeof lb.showModal !== 'function') return;
+        e.preventDefault();
+        closeMenus();
+        lbFrom = opener; lbSet = set; buildStrip();
+        lb.querySelectorAll('[data-rv-toggle]').forEach((t) => setToggle(toggleId(t), false));
+        lbShow(at);
+        if (!lb.open) lb.showModal();
+      };
+      zooms.forEach((z) => {
+        const open = (e) => { const set = setFor(z); lbOpen(e, set, z.hasAttribute('data-rv-media-list') ? 0 : indexIn(set, z), z); };
+        on(z, 'click', open);
+        on(z, 'keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') open(e); });
+      });
+      all('[data-rv-zoom-alias]').forEach((z) => on(z, 'click', (e) => {
+        if (!lb || !lbAll.length) return;
+        e.stopPropagation();
+        lbOpen(e, lbAll, Number(z.getAttribute('data-rv-zoom-alias')) || 0, z);
+      }));
+      if (lb) {
+        on(lb.querySelector('[data-rv-lb-prev]'), 'click', (e) => { e.preventDefault(); lbShow(lbAt - 1); });
+        on(lb.querySelector('[data-rv-lb-next]'), 'click', (e) => { e.preventDefault(); lbShow(lbAt + 1); });
+        on(lb.querySelector('[data-rv-lb-close]'), 'click', (e) => { e.preventDefault(); lb.close(); });
+        on(lb.querySelector('[data-rv-lb-peek]'), 'click', (e) => { e.preventDefault(); lbShow(lbAt + 1); });
+        on(strip, 'click', (e) => {
+          const t = isEl(e.target) ? e.target.closest('[data-rv-lb-thumb]') : null;
+          if (!t) return;
+          e.preventDefault(); lbShow(Number(t.getAttribute('data-rv-lb-thumb')) || 0);
+        });
+        on(lb, 'keydown', (e) => { if (e.key === 'ArrowLeft') lbShow(lbAt - 1); if (e.key === 'ArrowRight') lbShow(lbAt + 1); });
+        on(lb, 'click', (e) => { if (e.target === lb) lb.close(); });
+        // Swipe on the photo (some widgets show no arrows on phones).
+        const swipe = lb.querySelector('[data-rv-lb-stage]') || lb.querySelector('[data-rv-lb-media]');
+        let sx = 0; let sy = 0; let tracking = false;
+        on(swipe, 'touchstart', (e) => { const t = e.touches[0]; if (!t) return; sx = t.clientX; sy = t.clientY; tracking = true; }, { passive: true });
+        on(swipe, 'touchend', (e) => {
+          if (!tracking) return; tracking = false;
+          const t = e.changedTouches[0]; if (!t) return;
+          const dx = t.clientX - sx; const dy = t.clientY - sy;
+          if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy)) lbShow(lbAt + (dx < 0 ? 1 : -1));
+        });
+        // Helpful from inside the lightbox: the copy's button presses the real one, then the copy redraws with the count.
+        on(lb.querySelector('[data-rv-lb-review]'), 'click', (e) => {
+          const v = lbVotes && isEl(e.target) ? e.target.closest('[data-rv-vote]') : null;
+          if (!v) return;
+          e.preventDefault();
+          const x = lbSet[lbAt];
+          const item = x && x.review ? items.find((it) => it.id === x.review) : null;
+          const real = item && item.querySelector('[data-rv-vote="' + v.getAttribute('data-rv-vote') + '"]');
+          if (real) real.click();
+          lbShow(lbAt);
+        });
+        on(lb, 'close', () => { const vid = lb.querySelector('video'); if (vid) vid.pause(); if (lbFrom && lbFrom.focus) lbFrom.focus({ preventScroll: true }); });
+      }
+
+      render();
+    });
+    api.emit('gem:reviews:ready', { source: 'gem-runtime', count: boundReviews });`;
+}
+
 // ../../packages/gem-framework/src/runtime.ts
 var runtimePluginReadyEvents = {
   "cart-drawer": "gem:cart:ready",
@@ -4873,7 +5593,8 @@ var runtimePluginReadyEvents = {
   "img-in": "gem:img-in:ready",
   "seasonal-effects": "gem:seasonal:ready",
   "context-adapter": "gem:context:ready",
-  "offer-engine": "gem:offer:ready"
+  "offer-engine": "gem:offer:ready",
+  reviews: "gem:reviews:ready"
 };
 var cartDrawerPluginRegistrationLines = [
   "  registerPlugin('cart-drawer', ({ api }) => {",
@@ -5951,6 +6672,11 @@ var offerEnginePluginRegistrationLines = [
   "    api.emit('gem:offer:ready', { source: 'gem-runtime' });",
   "  });"
 ];
+var reviewsPluginRegistrationLines = [
+  "  registerPlugin('reviews', ({ api }) => {",
+  "    " + reviewsEngineRuntimeScript(),
+  "  });"
+];
 var runtimePluginSourceLines = [
   ["cart-drawer", cartDrawerPluginRegistrationLines],
   ["mobile-menu", mobileMenuPluginRegistrationLines],
@@ -5972,7 +6698,8 @@ var runtimePluginSourceLines = [
   ["img-in", imgInPluginRegistrationLines],
   ["recently-viewed", recentlyViewedPluginRegistrationLines],
   ["runtime-slot-loader", runtimeSlotLoaderPluginRegistrationLines],
-  ["offer-engine", offerEnginePluginRegistrationLines]
+  ["offer-engine", offerEnginePluginRegistrationLines],
+  ["reviews", reviewsPluginRegistrationLines]
 ];
 var noopPluginRegistrationLine = (key, readyEvent) => `  registerNoopPlugin(${JSON.stringify(key)}, ${JSON.stringify(readyEvent)});`;
 function gemRuntimePluginSources() {
@@ -6352,7 +7079,7 @@ function validateGemFrameworkCss(css, artifactPath, options = {}) {
     if (!TOKENIZED_PROPERTIES.includes(property)) continue;
     if (isAllowedUntokenizedValue(property, value)) continue;
     if (!value.includes("var(--gem-") && hasRawVisualValue(value)) {
-      issues.push(ruleIssue("untokenized_visual_value", `${property}: ${value.trim()} should prefer semantic --gem-* tokens.`, artifactPath, {
+      issues.push(ruleIssue("untokenized_visual_value", `${property}: ${value.trim()} should prefer semantic --gem-* tokens.${scrimHint(value)}`, artifactPath, {
         property,
         value: value.trim()
       }));
@@ -6360,6 +7087,12 @@ function validateGemFrameworkCss(css, artifactPath, options = {}) {
   }
   return result(issues);
 }
+function scrimHint(value) {
+  const m = value.match(/rgba?\(\s*0[\s,]+0[\s,]+0\s*(?:,|\/)\s*([0-9.]+)(%?)\s*\)/i);
+  if (!m) return "";
+  const pct = Math.round(m[2] ? Number(m[1]) : Number(m[1]) * 100);
+  return ` A dark overlay reads the scrim token: color-mix(in srgb, var(--gem-color-scrim, #000) ${pct}%, transparent).`;
+}
 function validateGemFrameworkMarkup(markup, artifactPath, options = {}) {
   const issues = validateSharedSafety(markup, artifactPath);
   if (/\bgs-/.test(markup)) {
@@ -7717,6 +8450,7 @@ export {
   requiredGemTokenKeys,
   resolveGift,
   resolveOffer,
+  reviewsEngineRuntimeScript,
   slugify,
   toCssVars,
   toMotionCssVars,