@gemboss/gem-framework 0.18.13 → 0.18.16

package/dist/section-gate.js

@@ -432,6 +432,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`),
@@ -439,6 +441,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));",
@@ -462,7 +466,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",
@@ -1034,7 +1040,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; }",
@@ -1061,7 +1067,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 {",
@@ -1125,10 +1131,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; }",
@@ -2649,7 +2655,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,
@@ -3441,7 +3447,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; }",
@@ -4384,6 +4390,1042 @@ 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.loading = 'lazy'; img.decoding = 'async'; img.alt = ''; img.src = x.thumb;
+          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/bundle-engine.ts
+function bundleEngineRuntimeScript() {
+  return `let boundBundles = 0;
+    const BB_WORDS = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
+    document.querySelectorAll('[data-bb-root]').forEach((root) => {
+      if (!mark(root, 'bundle')) return;
+      boundBundles += 1;
+      const on = (el, type, fn, opt) => { if (canListen(el)) el.addEventListener(type, fn, opt); };
+      const isEl = (t) => t instanceof window.Element;
+      const parse = (attr, fallback) => { try { const v = JSON.parse(root.getAttribute(attr) || 'null'); return v == null ? fallback : v; } catch (e) { return fallback; } };
+      let rules = parse('data-bb-rules', {});
+      const text = root.hasAttribute('data-bb-messages') ? parse('data-bb-messages', {}) : parse('data-bb-labels', {});
+      const viMoney = root.getAttribute('data-bb-money') === 'vi';
+      const currency = root.getAttribute('data-bb-currency') || (viMoney ? 'VND' : 'USD');
+      let nf = null;
+      if (!viMoney) { try { nf = new Intl.NumberFormat('en-US', { style: 'currency', currency, maximumFractionDigits: currency === 'VND' ? 0 : 2 }); } catch (e) { nf = null; } }
+      const money = (n) => (viMoney ? String(Math.round(n)).replace(/\\B(?=(\\d{3})+(?!\\d))/g, '.') + '\u0111' : nf ? nf.format(Math.round(n * 100) / 100) : (Math.round(n * 100) / 100).toFixed(2));
+      // A strike price as stores show it: a whole number drops its cents ("$42", not "$42.00").
+      const moneyShort = (n) => { const s = money(n); return Math.abs(n - Math.round(n)) < 0.005 ? s.replace(/[.,]00(?=\\D*$)/, '') : s; };
+      const fill = (tpl, vars) => String(tpl || '').replace(/\\{(\\w+)\\}/g, (m, k) => (Object.hasOwn(vars, k) ? String(vars[k]) : m));
+      // A sentence with {reward}: the reward is a <strong>, the rest plain text. Never innerHTML.
+      const say = (el, tpl, vars) => {
+        if (!el) return;
+        const parts = String(tpl || '').split('{reward}');
+        el.replaceChildren();
+        parts.forEach((part, i) => {
+          if (part) el.append(document.createTextNode(fill(part, vars)));
+          if (i < parts.length - 1 && vars.reward) { const s = document.createElement('strong'); s.textContent = vars.reward; el.append(s); }
+        });
+      };
+      let min = Math.max(1, Number(rules.min) || 1);
+      let cap = Number(rules.max) > 0 ? Number(rules.max) : Infinity;
+      const per = Number(rules.per) > 0 ? Number(rules.per) : Infinity;
+      let tiers = Array.isArray(rules.tiers) ? rules.tiers : [];
+      let goal = tiers.length ? tiers[tiers.length - 1] : null;
+      // The catalog: one entry per item, plus one per extra variant of a card (<key>~<index>).
+      const catalog = new Map();
+      const cards = new Map();
+      root.querySelectorAll('[data-bb-item]').forEach((el) => {
+        const key = el.getAttribute('data-bb-item');
+        const base = {
+          el,
+          variantId: el.getAttribute('data-bb-variant') || '',
+          price: Number(el.getAttribute('data-bb-price')) || 0,
+          compare: Number(el.getAttribute('data-bb-compare')) || 0,
+          title: el.getAttribute('data-bb-title') || '',
+          subtitle: el.getAttribute('data-bb-subtitle') || '',
+          image: el.getAttribute('data-bb-image') || '',
+          group: el.getAttribute('data-bb-group') || '',
+          step: el.getAttribute('data-bb-step') || '',
+          short: el.getAttribute('data-bb-short') || '',
+          available: el.getAttribute('data-available') !== 'false',
+        };
+        catalog.set(key, base);
+        let vs = [];
+        try { vs = JSON.parse(el.getAttribute('data-bb-variants') || '[]'); } catch (e) { vs = []; }
+        if (!Array.isArray(vs)) vs = [];
+        vs.forEach((v, i) => {
+          if (!i) return;
+          catalog.set(key + '~' + i, { ...base, variantId: String(v.id || ''), price: Number(v.price) || 0, compare: Number(v.compare) || 0, image: v.image || base.image, variantTitle: v.title || '' });
+        });
+        if (vs[0]) base.variantTitle = vs[0].title || '';
+        cards.set(key, { el, variants: vs, gift: el.hasAttribute('data-bb-gift') });
+      });
+      const gifts = Array.from(cards.entries()).filter(([, c]) => c.gift).map(([k]) => k);
+      // The variant a card shows now (data-bb-current), as the key an action picks.
+      const currentKey = (key) => { const c = cards.get(key); const i = c ? Number(c.el.getAttribute('data-bb-current')) || 0 : 0; return i ? key + '~' + i : key; };
+      let picks = [];
+      let plan = 'one_time';
+      const planOf = (el) => (el.type === 'checkbox' ? (el.checked ? 'subscribe' : 'one_time') : el.getAttribute('data-bb-plan') || 'one_time');
+      const planInputs = Array.from(root.querySelectorAll('input[data-bb-plan]'));
+      const checkedPlan = planInputs.find((el) => el.checked);
+      if (checkedPlan) plan = planOf(checkedPlan);
+      const tierFor = (n) => tiers.filter((t) => n >= t.min).pop() || null;
+      const pctOf = (t, p) => (!t ? 0 : p === 'subscribe' ? Number(t.sub) || Number(t.pct) || 0 : Number(t.pct) || 0);
+      // The reward in a progress sentence is always "N% off" for the plan in force; a tier's label is the text on its milestone.
+      const rewardOf = (t, p) => (!t ? '' : pctOf(t, p) + '% off');
+      const qtyOf = (key) => picks.filter((p) => p === key).length;
+      const canAdd = (key) => picks.length < cap && (rules.repeat !== false || !picks.includes(key)) && qtyOf(key) < per;
+
+      // Box sizes, when the root declares them (data-bb-sizes): choosing a size sets floor = ceiling = its item count. "trim":
+      // a smaller box drops the LAST picks; "queue": they wait, in order, and come back when there is room again.
+      const sizeMode = root.getAttribute('data-bb-sizes');
+      const sizes = Array.isArray(rules.sizes) ? rules.sizes : [];
+      let size = null;
+      const waiting = [];
+      const refill = () => { while (sizeMode === 'queue' && picks.length < cap && waiting.length) picks.push(waiting.shift()); };
+      const applySize = (n) => {
+        const s = sizes.find((x) => Number(x.items) === n);
+        if (!s) return false;
+        size = s; min = Number(s.items); cap = Number(s.items);
+        goal = tierFor(min) || (tiers.length ? tiers[tiers.length - 1] : null);
+        if (picks.length > cap) { const out = picks.splice(cap); if (sizeMode === 'queue') waiting.unshift(...out); }
+        refill();
+        return true;
+      };
+      if (sizeMode) { const s0 = sizes.find((s) => Number(s.items) === Number(rules.size)) || sizes[0] || null; if (s0) applySize(Number(s0.items)); }
+
+      // Kits (rules.kits): each keeps its own picks and steps; a kit's own rules replace the bundle's while it is chosen.
+      // A kit with steps fills each step's slots in order and moves on by itself; optional steps open after the required ones.
+      const kits = Array.isArray(rules.kits) && rules.kits.length ? rules.kits : null;
+      const stateOf = new Map();
+      (kits || []).forEach((k) => {
+        const steps = Array.isArray(k.steps) ? k.steps : [];
+        const slots = {};
+        steps.forEach((s) => { slots[s.id] = Array.from({ length: Math.max(1, Number(s.pick) || 1) }, () => null); });
+        stateOf.set(k.id, { kit: k, steps, fill: slots, picks: [], current: steps.length ? steps[0].id : null });
+      });
+      let st = kits ? stateOf.get(kits[0].id) : { kit: null, steps: [], fill: {}, picks, current: null };
+      const useKit = (id) => {
+        if (!kits) return;
+        st = stateOf.get(id) || stateOf.get(kits[0].id);
+        const k = st.kit;
+        rules = { ...rules, min: k.min, max: k.max, tiers: k.tiers, repeat: k.repeat, price_mode: k.price_mode, fixed_price: k.fixed_price };
+        min = Math.max(1, Number(k.min) || 1);
+        cap = Number(k.max) > 0 ? Number(k.max) : Infinity;
+        tiers = Array.isArray(k.tiers) ? k.tiers : [];
+        goal = tiers.length ? tiers[tiers.length - 1] : null;
+        picks = st.picks;
+      };
+      if (kits) useKit(kits[0].id);
+      const stepsMode = () => st.steps.length > 0;
+      const required = () => st.steps.filter((s) => !s.optional);
+      const isFull = (s) => st.fill[s.id].every(Boolean);
+      // picks (in step order) are rebuilt from the slots after every change: price and cart read picks.
+      const syncPicks = () => { picks.length = 0; st.steps.forEach((s) => st.fill[s.id].forEach((k) => { if (k) picks.push(k); })); };
+      const openRequired = () => required().find((s) => !isFull(s)) || null;
+      const nextOpen = () => openRequired() || st.steps.find((s) => s.optional && !isFull(s)) || null;
+      const doneCount = () => required().filter(isFull).length;
+      const isComplete = () => (stepsMode() ? doneCount() === required().length : picks.length >= min);
+      const reachable = (s) => { const open = openRequired(); return !open || st.steps.indexOf(s) <= st.steps.indexOf(open); };
+      const slotRef = (idx) => {
+        let n = 0;
+        for (const s of st.steps) for (let j = 0; j < st.fill[s.id].length; j++) { if (n === idx) return [s, j]; n++; }
+        return null;
+      };
+      // Into the card's step: its first empty slot; a full step swaps its last pick (a full optional step refuses).
+      const addToStep = (key) => {
+        const it = catalog.get(key);
+        const step = (it && st.steps.find((s) => s.id === it.step)) || st.steps.find((s) => s.id === st.current);
+        if (!step || (rules.repeat === false && picks.includes(key))) return false;
+        const row = st.fill[step.id];
+        let i = row.indexOf(null);
+        if (i < 0) { if (step.optional) return false; i = row.length - 1; }
+        row[i] = key;
+        syncPicks();
+        if (isFull(step)) { const n = nextOpen(); if (n) st.current = n.id; }
+        return true;
+      };
+      // "Edit" on a required step empties the slot, closes the gap and goes back to that step; on an optional step it only removes.
+      const editSlot = (idx) => {
+        const ref = slotRef(idx);
+        if (!ref) return;
+        const [s, j] = ref;
+        const row = st.fill[s.id];
+        row.splice(j, 1); row.push(null);
+        syncPicks();
+        if (!s.optional) st.current = s.id;
+      };
+      const clearAll = () => {
+        st.steps.forEach((s) => { st.fill[s.id] = st.fill[s.id].map(() => null); });
+        picks.length = 0; waiting.length = 0;
+        st.current = st.steps.length ? st.steps[0].id : null;
+      };
+
+      // Prices. totals(): the bundle price at the tier the bundle WILL reach once it has its minimum (stores show the bundle
+      // price from the first pick), plus a container's base price. totalsNow(): at the tier reached now, rounded to the cent
+      // first so total + saved add up.
+      let basePrice = 0;
+      let cartHead = null;
+      const sumOf = () => {
+        let sum = 0; let compare = 0;
+        picks.forEach((k) => { const it = catalog.get(k); if (!it) return; sum += it.price; compare += Math.max(it.compare, it.price); });
+        return { sum, compare };
+      };
+      const totals = (p) => {
+        const { sum, compare } = sumOf();
+        if (rules.price_mode === 'fixed' && !basePrice) {
+          // A box size with a fixed one-time price; or a kit with one price whatever is picked (no strike price then).
+          if (size && Number(size.fixed) > 0) { if (p !== 'subscribe') return { sum, compare, total: Number(size.fixed) }; }
+          else if (Number(rules.fixed_price) > 0) return { sum, compare: 0, total: Number(rules.fixed_price) };
+        }
+        const t = tierFor(Math.max(picks.length, min)) || goal;
+        return { sum, compare, total: basePrice + sum * (1 - pctOf(t, p) / 100) };
+      };
+      const totalsNow = (p) => {
+        const { sum, compare } = sumOf();
+        return { sum, compare, total: Math.round(sum * (1 - pctOf(tierFor(picks.length), p) / 100) * 100 + 1e-6) / 100 };
+      };
+      // One item's price on its card at the bundle's current tier, counting at least one item.
+      const unitNow = (it, p) => it.price * (1 - pctOf(tierFor(Math.max(picks.length, 1)), p) / 100);
+
+      const frequency = () => root.querySelector('[data-bb-frequency]');
+      const planId = () => {
+        if (plan !== 'subscribe') return '';
+        const f = frequency();
+        if (!f) return '';
+        if (f.matches('select')) return f.value;
+        const c = f.querySelector('input:checked');
+        return c ? c.value : '';
+      };
+      const bundleName = () => {
+        const n = (st.kit && st.kit.label) || (root.querySelector('[data-bb-name]') || {}).textContent || 'Bundle';
+        return String(n).trim();
+      };
+      const toCart = () => {
+        const counts = new Map();
+        picks.concat(gifts).forEach((k) => { const it = catalog.get(k); if (it && it.variantId) counts.set(it.variantId, (counts.get(it.variantId) || 0) + 1); });
+        const ruleKey = root.getAttribute('data-bb-discount-key') || '';
+        const id = (root.getAttribute('data-gem-section-id') || 'bundle') + '-' + Date.now().toString(36);
+        const props = [{ key: '_bundle_id', value: id }, { key: '_bundle', value: bundleName() }].concat(ruleKey ? [{ key: '_bundle_rule', value: ruleKey }] : []);
+        const pid = planId();
+        const lines = Array.from(counts.entries()).map(([variantId, quantity]) => ({ variantId, quantity, properties: props.slice(), ...(pid ? { sellingPlanId: pid } : {}) }));
+        // A container line (a gift box) goes first and carries the section's own properties (lid, gift message).
+        const head = cartHead ? cartHead() : null;
+        if (head) {
+          const hp = props.concat(Array.isArray(head.properties) ? head.properties : []);
+          if (head.variantId) lines.unshift({ variantId: head.variantId, quantity: 1, properties: hp, ...(pid ? { sellingPlanId: pid } : {}) });
+          else if (lines[0]) lines[0].properties = hp;
+        }
+        if (lines.length && typeof window.CustomEvent === 'function') window.dispatchEvent(new window.CustomEvent('gem:cart:add-many', { detail: { lines, after: 'drawer' } }));
+        return lines.length;
+      };
+
+      let busy = false;
+      let wasComplete = false;
+      const state = () => {
+        const n = picks.length;
+        const counts = {};
+        picks.forEach((k) => { counts[k] = (counts[k] || 0) + 1; });
+        return {
+          picks, count: n, counts, min, cap, max: cap === Infinity ? null : cap, per, rules, text, tiers, goal, plan, size, sizes, waiting,
+          catalog, cards, gifts, reached: tierFor(n), next: tiers.find((t) => n < t.min) || null, left: Math.max(0, min - n),
+          kit: st.kit, kits, steps: st.steps, fill: st.fill, current: st.current, stepsMode: stepsMode(), done: doneCount(),
+          required: required(), complete: isComplete(), busy, base: basePrice,
+        };
+      };
+      const outs = () => root.querySelectorAll('[data-bb-out]');
+      const emit = (action, extra) => {
+        const n = picks.length;
+        const complete = isComplete();
+        root.setAttribute('data-bb-count', String(n));
+        root.setAttribute('data-bb-state', n === 0 ? 'empty' : n >= cap ? 'full' : complete ? 'complete' : 'partial');
+        if (outs().length) {
+          const t = totals(plan); const reached = tierFor(n);
+          const v = { count: String(n), left: String(Math.max(0, min - n)), total: money(t.total), compare: money(t.compare), saved: money(Math.max(0, t.compare - t.total)), reward: reached ? rewardOf(reached, plan) : '' };
+          outs().forEach((el) => { const k = el.getAttribute('data-bb-out'); if (Object.hasOwn(v, k)) el.textContent = v[k]; });
+        }
+        const detail = { source: 'gem-runtime', action, ...(extra || {}), count: n, min, max: cap === Infinity ? null : cap, plan, size: size ? Number(size.items) : null, kit: st.kit ? st.kit.id : null, step: st.current, complete, reward: tierFor(n) ? rewardOf(tierFor(n), plan) : '', total: totals(plan).total };
+        if (typeof window.CustomEvent === 'function') {
+          root.dispatchEvent(new window.CustomEvent('gem:bundle:change', { bubbles: true, detail }));
+          if (complete && !wasComplete) root.dispatchEvent(new window.CustomEvent('gem:bundle:complete', { bubbles: true, detail }));
+        }
+        wasComplete = complete;
+      };
+
+      // Actions: the handlers below call these, and so may a section's own controls (root.gemBundle.add(key)\u2026).
+      const add = (key) => {
+        const before = st.current;
+        if (root.hasAttribute('data-bb-add-toggle') && picks.includes(key)) { picks.splice(picks.indexOf(key), 1); emit('remove', { key }); return true; }
+        if (stepsMode()) { if (!addToStep(key)) return false; }
+        else { if (!canAdd(key)) return false; picks.push(key); }
+        emit('add', { key, from: before });
+        return true;
+      };
+      const removeAt = (idx) => { if (stepsMode()) editSlot(idx); else { picks.splice(idx, 1); refill(); } emit('remove', { index: idx }); };
+      const dec = (key) => { const at = picks.lastIndexOf(key); if (at < 0) return false; picks.splice(at, 1); refill(); emit('dec', { key }); return true; };
+      const uncheck = (key) => { for (let i = picks.length - 1; i >= 0; i -= 1) if (picks[i] === key) picks.splice(i, 1); refill(); emit('uncheck', { key }); };
+      const clear = () => { clearAll(); emit('clear'); };
+      // A typed quantity: exactly k picks of that item, within the bundle's ceiling, the item's own and no-repeat.
+      const setQty = (key, want) => {
+        if (!catalog.has(key)) return;
+        const has = qtyOf(key);
+        const room = cap === Infinity ? Infinity : cap - (picks.length - has);
+        const k = Math.max(0, Math.min(Math.floor(Number(want)) || 0, room, per, rules.repeat === false ? 1 : Infinity));
+        for (let i = picks.length - 1; i >= 0; i--) if (picks[i] === key) picks.splice(i, 1);
+        for (let i = 0; i < k; i++) picks.push(key);
+        emit('qty', { key });
+      };
+      const setPlan = (p) => { plan = p === 'subscribe' ? 'subscribe' : 'one_time'; emit('plan'); };
+      const setSize = (n) => {
+        if (!sizeMode || !applySize(Number(n))) return false;
+        // A box size may name its default selling plan.
+        const f = frequency();
+        if (f && f.matches('select') && size && size.plan && Array.from(f.options).some((o) => o.value === size.plan)) f.value = size.plan;
+        emit('size');
+        return true;
+      };
+      // An item's variant radio (a pack size): the whole row changes variant and price, its count stays.
+      const applyVariant = (radio) => {
+        const it = catalog.get(radio.getAttribute('data-bb-size'));
+        if (!it) return false;
+        it.variantId = radio.getAttribute('data-bb-variant') || '';
+        it.price = Number(radio.getAttribute('data-bb-price')) || 0;
+        it.compare = Number(radio.getAttribute('data-bb-compare')) || 0;
+        it.el.setAttribute('data-bb-variant', it.variantId);
+        it.el.setAttribute('data-bb-price', String(it.price));
+        it.el.setAttribute('data-bb-compare', it.compare ? String(it.compare) : '');
+        return true;
+      };
+      const selectKit = (id) => { if (!kits) return; useKit(id); emit('kit'); };
+      const goStep = (id) => { const s = st.steps.find((x) => x.id === id); if (!s || !reachable(s)) return false; st.current = id; emit('step'); return true; };
+      const finish = (ok) => {
+        busy = false;
+        root.querySelectorAll('[data-bb-cta]').forEach((c) => { c.removeAttribute('data-state'); c.removeAttribute('aria-busy'); });
+        if (ok) clearAll();
+        emit(ok ? 'added' : 'add-failed');
+      };
+      const checkout = () => {
+        if (!isComplete() || busy || !picks.length) return false;
+        if (!toCart()) return false;
+        // With gemsite's cart bridge: wait for its answer before clearing (a failure keeps the bundle to try again).
+        if (window.__gemCartAddBridge) {
+          busy = true;
+          const box = st.kit ? root.querySelector('[data-bb-kit-box="' + st.kit.id + '"]') : null;
+          (box || root).querySelectorAll('[data-bb-cta]').forEach((c) => { c.setAttribute('data-state', 'loading'); c.setAttribute('aria-busy', 'true'); });
+          emit('checkout');
+        } else finish(true);
+        return true;
+      };
+
+      on(root, 'click', (event) => {
+        const t = isEl(event.target) ? event.target : null;
+        if (!t) return;
+        const addEl = t.closest('[data-bb-add], [data-bb-inc]');
+        if (addEl) { add(currentKey(addEl.getAttribute('data-bb-add') || addEl.getAttribute('data-bb-inc'))); return; }
+        const decEl = t.closest('[data-bb-dec], [data-bb-minus]');
+        if (decEl) { dec(currentKey(decEl.getAttribute('data-bb-dec') || decEl.getAttribute('data-bb-minus'))); return; }
+        const un = t.closest('[data-bb-uncheck]');
+        if (un) { uncheck(currentKey(un.getAttribute('data-bb-uncheck'))); return; }
+        const rm = t.closest('[data-bb-remove]');
+        if (rm) { removeAt(Number(rm.getAttribute('data-bb-remove')) || 0); return; }
+        if (t.closest('[data-bb-clear]')) { clear(); return; }
+        const nav = t.closest('[data-bb-step-nav]');
+        if (nav) { if (!nav.disabled) goStep(nav.getAttribute('data-bb-step-nav')); return; }
+        const tab = t.closest('[data-bb-kit-tab]');
+        if (tab) { selectKit(tab.getAttribute('data-bb-kit-tab')); return; }
+        if (t.closest('[data-bb-skip]')) { checkout(); return; }
+        const cta = t.closest('[data-bb-cta]');
+        if (cta) { event.preventDefault(); if (cta.getAttribute('aria-disabled') !== 'true') checkout(); }
+      });
+      on(root, 'change', (event) => {
+        const t = isEl(event.target) ? event.target : null;
+        if (!t) return;
+        const p = t.closest('input[data-bb-plan]');
+        if (p) { if (p.type === 'checkbox' || p.checked) setPlan(planOf(p)); return; }
+        const s = t.closest('input[data-bb-size]');
+        if (s && s.checked) { if (s.hasAttribute('data-bb-variant')) { if (applyVariant(s)) emit('variant', { key: s.getAttribute('data-bb-size') }); } else setSize(Number(s.value)); return; }
+        const q = t.closest('input[data-bb-count]');
+        if (q) setQty(q.getAttribute('data-bb-count'), q.value);
+      });
+      // A typed quantity applies as soon as it is a number (an emptied box waits for "change" to go back to 0).
+      on(root, 'input', (event) => {
+        const q = isEl(event.target) ? event.target.closest('input[data-bb-count]') : null;
+        if (q && q.value !== '' && Number.isFinite(Number(q.value))) setQty(q.getAttribute('data-bb-count'), q.value);
+      });
+      on(window, 'gem:cart:added', () => { if (busy) finish(true); });
+      on(window, 'gem:cart:add-failed', () => { if (busy) finish(false); });
+
+      // A page brought back from history restores its form: read back the variant radios and typed quantities in view.
+      root.querySelectorAll('input[data-bb-size][data-bb-variant]').forEach((r) => { if (r.checked) applyVariant(r); });
+      root.querySelectorAll('input[data-bb-count]').forEach((inp) => {
+        const v = Math.floor(Number(inp.value)) || 0;
+        const key = inp.getAttribute('data-bb-count');
+        if (v > 0 && catalog.has(key)) { const k = Math.min(v, per, rules.repeat === false ? 1 : Infinity, cap === Infinity ? Infinity : cap - picks.length); for (let i = 0; i < k; i++) picks.push(key); }
+      });
+
+      root.gemBundle = {
+        state, money, moneyShort, fill, say, words: BB_WORDS, tierFor, pctOf, rewardOf, canAdd, qtyOf, currentKey, totals, totalsNow, unitNow,
+        reachable, isFull, slotRef, required, add, removeAt, dec, uncheck, clear, setQty, setPlan, setSize, selectKit, goStep, checkout,
+        setBase: (n) => { basePrice = Number(n) || 0; emit('base'); },
+        setCartHead: (fn) => { cartHead = typeof fn === 'function' ? fn : null; },
+        refresh: () => emit('refresh'),
+      };
+      root.setAttribute('data-bb-ready', '');
+      emit('init');
+    });
+    api.emit('gem:bundle:ready', { source: 'gem-runtime', count: boundBundles });`;
+}
+
 // ../../packages/gem-framework/src/runtime.ts
 var COUNTDOWN_END_RUNTIME_LINES = [
   "  const COUNTDOWN_ISO = /^(\\d{4})-(\\d{2})-(\\d{2})(?:[T ](\\d{2}):(\\d{2})(?::(\\d{2})(?:\\.\\d+)?)?(Z|[+-]\\d{2}:?\\d{2})?)?$/i;",
@@ -4576,6 +5618,16 @@ var offerEnginePluginRegistrationLines = [
   "    api.emit('gem:offer:ready', { source: 'gem-runtime' });",
   "  });"
 ];
+var reviewsPluginRegistrationLines = [
+  "  registerPlugin('reviews', ({ api }) => {",
+  "    " + reviewsEngineRuntimeScript(),
+  "  });"
+];
+var bundlePluginRegistrationLines = [
+  "  registerPlugin('bundle', ({ api }) => {",
+  "    " + bundleEngineRuntimeScript(),
+  "  });"
+];
 
 // ../../packages/gem-framework/src/validation.ts
 var validationRulesByCode = new Map(gemFrameworkValidationRules.map((rule) => [rule.code, rule]));
@@ -4673,7 +5725,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()
       }));
@@ -4681,6 +5733,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)) {