@gemboss/gem-framework 0.18.16 → 0.19.0

package/dist/section-gate.js

@@ -186,6 +186,11 @@ function gemButtonGradientEndCss(accent = "var(--gem-color-accent)", accentText
 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;";
+var GEM_STROKE_CSS_VARS = [
+  "--gem-stroke: calc(1px * var(--gem-style-border, 1));",
+  "--gem-stroke-thick: calc(2px * var(--gem-style-border, 1));"
+];
+var GEM_UNDERLINE_THICKNESS_CSS_VAR = "--gem-underline-thickness: 2px;";
 var GEM_DERIVED_SPACE_STEPS = { "2xs": 0.125, ms: 0.75, "4xl": 7 };
 var GEM_DERIVED_SPACE_CSS_VARIABLES = Object.keys(GEM_DERIVED_SPACE_STEPS).map((key) => `--gem-space-${slugify(key)}`);
 function gemDerivedSpaceCssVars(spacing) {
@@ -330,15 +335,15 @@ function gemBandScheme(c, band) {
   const away = mixHex(g, hexRelativeLuminance(i) > hexRelativeLuminance(g) ? "#000000" : "#ffffff", 0.08);
   const surface = hexContrastRatio(i, toward) >= MIN_TEXT_CONTRAST ? toward : away;
   const grounds = [g, surface];
-  const text = aaTextColor(i, grounds);
+  const text2 = aaTextColor(i, grounds);
   const accent = aaTextColor(c.accent, grounds);
   return {
     background: g,
     surface,
-    text,
+    text: text2,
     muted: aaTextColor(mixHex(i, g, 0.3), grounds),
     accent,
-    accentText: aaLabelColor(c.accentText, accent, [g, text]),
+    accentText: aaLabelColor(c.accentText, accent, [g, text2]),
     border: mixHex(g, i, 0.22),
     success: aaTextColor(c.success, grounds),
     warning: aaTextColor(c.warning, grounds),
@@ -563,7 +568,7 @@ function createGemTokenCss(tokens, selector = ":root", options = {}) {
     ...phone.layout.section ? [`--gem-layout-section-mobile: ${phone.layout.section};`] : [],
     ...toCssVars("component", tokens.component),
     ...toCssVars("morphology", tokens.morphology),
-    // THE GOVERNED TYPE RAMP — --gem-h1..h6 / --gem-body / --gem-text-sm.
+    // THE GOVERNED TYPE RAMP — --gem-h1..h6 / --gem-body / --gem-text-sm / --gem-text-xs (26/10/2026).
     // gemcapture maps every measured font-size onto these names via `font_token`
     // (clone_kit._type_token), and the gem-framework contract documents them, but nothing in the
     // live framework defined them: a rebuild that followed the contract styled its headings with
@@ -578,7 +583,9 @@ function createGemTokenCss(tokens, selector = ":root", options = {}) {
     // type ramp and registered in validation.ts. Follows the accent, so presets retint it for free.
     GEM_FOCUS_RING_CSS_VAR,
     GEM_TAP_MIN_CSS_VAR,
-    GEM_FOCUS_OFFSET_CSS_VAR
+    GEM_FOCUS_OFFSET_CSS_VAR,
+    ...GEM_STROKE_CSS_VARS,
+    GEM_UNDERLINE_THICKNESS_CSS_VAR
   ];
   const formBlock = gemFormCssBlock(tokens.form);
   const buttonCase = gemButtonCaseCss(tokens, selector);
@@ -626,6 +633,13 @@ function gemTypeRampCssVars(typography) {
   return [
     `--gem-type-base: ${typeRampValue(typography, "base") ?? "1rem"};`,
     `--gem-type-scale: ${typeRampValue(typography, "scale") ?? "1.22"};`,
+    // Chris 26/10/2026: P3 of the GemPages v7 scale (H1–H6, P1–P3 + Custom), one step under text-sm. P1 is body, P2 is
+    // text-sm; P3 had no name, so a caption or a fine-print line could only be a px count that no style pack retunes.
+    // Same pattern as text-sm, off the base rather than off text-sm: base ÷ scale², 10.75px at 16px and 1.22. Declared
+    // FIRST because this list is the ramp's order, small to large, and the seam's `steps` must equal it in order
+    // (check-token-steps-match-framework.ts). At the defaults it sits above gem_font_size's 10px floor; that floor bounds
+    // the px number only, so a plan with a steeper ratio (1.333: 9px) can take this step lower, as it can text-sm.
+    "--gem-text-xs: calc(var(--gem-type-base) / (var(--gem-type-scale) * var(--gem-type-scale)));",
     "--gem-text-sm: calc(var(--gem-type-base) / var(--gem-type-scale));",
     "--gem-body: var(--gem-type-base);",
     "--gem-h6: calc(var(--gem-type-base) * var(--gem-type-scale));",
@@ -735,6 +749,1330 @@ function gemFrameworkEditionCss() {
   return GEM_FRAMEWORK_EDITIONS.flatMap((e) => e.css.map((rule) => rule.replaceAll("&", gemFrameworkEditionScope(e.edition)))).join("\n");
 }
 
+// ../../packages/gem-framework/src/motion/core.js
+var clamp = (v, lo, hi) => v < lo ? lo : v > hi ? hi : v;
+var lerp = (a, b, t) => a + (b - a) * t;
+var mod = (v, n) => (v % n + n) % n;
+function smoothstep(edge0, edge1, v) {
+  const t = clamp((v - edge0) / (edge1 - edge0), 0, 1);
+  return t * t * (3 - 2 * t);
+}
+var follow = (dt, tau) => tau <= 0 ? 1 : 1 - Math.exp(-dt / tau);
+function spring(s, target, dt, stiffness, damping) {
+  const f = dt / 16.67;
+  s.v += (-(s.x - target) * stiffness - s.v * damping) * f;
+  s.x += s.v * f;
+  return s;
+}
+function ringDelta(a, b, n) {
+  let d = mod(b - a, n);
+  if (d > n / 2) d -= n;
+  return d;
+}
+function ringPose(i, n, pos, o) {
+  const theta = ringDelta(pos, i, n) * o.spread;
+  const hidden = Math.abs(theta) > Math.PI;
+  const depth = (1 - Math.cos(theta)) / 2;
+  return {
+    x: o.rx * Math.sin(theta),
+    y: -o.ry * depth,
+    depth,
+    scale: lerp(1, o.back, depth),
+    opacity: hidden ? 0 : lerp(1, o.fade, depth),
+    blur: o.blur * depth,
+    z: Math.round((1 - depth) * 100),
+    lean: Math.sin(theta) * o.lean,
+    hidden
+  };
+}
+var throwTarget = (pos, velocity, carry, maxSlots) => Math.round(pos + clamp(velocity * carry, -maxSlots, maxSlots));
+var written = /* @__PURE__ */ new WeakMap();
+function setStyle(el, prop, value) {
+  let rec = written.get(el);
+  if (!rec) written.set(el, rec = {});
+  if (rec[prop] === value) return;
+  rec[prop] = value;
+  if (value === "") el.style.removeProperty(prop);
+  else el.style.setProperty(prop, value);
+}
+var effects = /* @__PURE__ */ new Map();
+function defineEffect(spec) {
+  const effect = { hook: `[data-gem-${spec.key}]`, load: "viewport", renderer: "dom", tier: "static", fallback: "markup", settings: {}, ...spec, declared: spec };
+  effects.set(effect.key, effect);
+  return effect;
+}
+function frameTask(ctx, el, step, options) {
+  const task = ctx.scheduler.add(step, options);
+  ctx.cleanup(() => task.remove());
+  observeVisibility(ctx, el, (shown) => task.visible(shown));
+  return task;
+}
+function observeVisibility(ctx, el, cb, margin) {
+  const IO = ctx.window.IntersectionObserver;
+  if (typeof IO !== "function") return;
+  new IO((entries) => cb(entries.some((e) => e.isIntersecting)), { rootMargin: margin || "120px" }).observe(el);
+}
+function observeSize(ctx, el, cb) {
+  const RO = ctx.window.ResizeObserver;
+  if (typeof RO === "function") new RO(() => cb()).observe(el);
+  else ctx.on(ctx.window, "resize", () => cb());
+}
+function horizontalDrag(ctx, el, h) {
+  let id = null;
+  let x0 = 0;
+  let y0 = 0;
+  let decided = false;
+  let horizontal = false;
+  let moved = 0;
+  let samples = [];
+  const release = (e, fire) => {
+    if (e.pointerId !== id) return;
+    id = null;
+    const first = samples[0];
+    const last = samples[samples.length - 1];
+    const span = last.t - first.t;
+    const vx = span > 0 && e.timeStamp - last.t < 80 ? (last.x - first.x) / span : 0;
+    if (fire && horizontal) h.end(vx, moved, e);
+    else h.end(0, 0, e);
+  };
+  ctx.on(el, "pointerdown", (e) => {
+    if (e.button !== 0 || id !== null) return;
+    id = e.pointerId;
+    x0 = e.clientX;
+    y0 = e.clientY;
+    decided = horizontal = false;
+    moved = 0;
+    samples = [{ x: e.clientX, t: e.timeStamp }];
+    h.start(e);
+  });
+  ctx.on(el, "pointermove", (e) => {
+    if (e.pointerId !== id) return;
+    const dx = e.clientX - x0;
+    if (!decided && Math.hypot(dx, e.clientY - y0) > 6) {
+      decided = true;
+      horizontal = Math.abs(dx) > Math.abs(e.clientY - y0);
+      if (!horizontal) return release(e, false);
+      try {
+        el.setPointerCapture(e.pointerId);
+      } catch {
+      }
+    }
+    if (!horizontal) return;
+    moved = Math.max(moved, Math.abs(dx));
+    samples.push({ x: e.clientX, t: e.timeStamp });
+    while (samples.length > 2 && e.timeStamp - samples[0].t > 90) samples.shift();
+    h.move(dx, e);
+  });
+  ctx.on(el, "pointerup", (e) => release(e, true));
+  ctx.on(el, "pointercancel", (e) => release(e, true));
+}
+function wheelSteps(ctx, el, onStep) {
+  let acc = 0;
+  let lock = 0;
+  ctx.on(
+    el,
+    "wheel",
+    (e) => {
+      if (Math.abs(e.deltaX) <= Math.abs(e.deltaY) || e.target.closest && e.target.closest("dialog")) return;
+      e.preventDefault();
+      acc += e.deltaX;
+      if (e.timeStamp < lock || Math.abs(acc) < 24) return;
+      onStep(Math.sign(acc));
+      acc = 0;
+      lock = e.timeStamp + 280;
+    },
+    { passive: false }
+  );
+}
+function arrowKeys(ctx, el, { step, activate, accept }) {
+  ctx.on(el, "keydown", (e) => {
+    if (accept && !accept(e)) return;
+    if (e.key === "ArrowRight" || e.key === "ArrowLeft") step(e.key === "ArrowRight" ? 1 : -1);
+    else if (!activate || e.key !== "Enter" && e.key !== " " || activate(e) === false) return;
+    e.preventDefault();
+  });
+}
+function flip(el, from, options) {
+  if (!from || !from.width || typeof el.animate !== "function") return null;
+  const box = el.getBoundingClientRect();
+  if (!box.height) return null;
+  const away = { transform: `translate(${from.left + from.width / 2 - box.left - box.width / 2}px, ${from.top + from.height / 2 - box.top - box.height / 2}px) scale(${from.height / box.height})` };
+  const home = { transform: "none" };
+  return el.animate(options.back ? [home, away] : [away, home], { duration: options.duration, easing: options.easing, fill: "both" });
+}
+function loadImage(doc, image) {
+  const img = doc.createElement("img");
+  if (image.srcset) img.srcset = image.srcset;
+  img.src = image.src;
+  return typeof img.decode === "function" ? img.decode().then(() => img, () => img) : Promise.resolve(img);
+}
+function putImage(img, image) {
+  if (!img || !image || !image.src || img.getAttribute("src") === image.src) return;
+  if (image.srcset) img.setAttribute("srcset", image.srcset);
+  else img.removeAttribute("srcset");
+  img.setAttribute("src", image.src);
+}
+function swapText(el, text2, still) {
+  if (!el || el.textContent === text2) return;
+  if (still || typeof el.animate !== "function") {
+    el.textContent = text2;
+    return;
+  }
+  const out = el.animate([{ opacity: 1 }, { opacity: 0, transform: "translateY(-6px)" }], { duration: 140, fill: "forwards" });
+  out.onfinish = () => {
+    el.textContent = text2;
+    out.cancel();
+    el.animate([{ opacity: 0, transform: "translateY(8px)" }, { opacity: 1, transform: "none" }], { duration: 220, easing: "cubic-bezier(.2,.7,.2,1)" });
+  };
+}
+function readProduct(el) {
+  try {
+    const p = JSON.parse(el.getAttribute("data-gem-product") || "null");
+    return p && p.image && p.image.src ? p : null;
+  } catch {
+    return null;
+  }
+}
+function formatMoney(cents, format) {
+  const value = (Number(cents) || 0) / 100;
+  const group = (str, sep) => str.replace(/\B(?=(\d{3})+(?!\d))/g, sep);
+  const [int, dec] = value.toFixed(2).split(".");
+  return (format || "${{amount}}").replace(/\{\{\s*(\w+)\s*\}\}/, (_, key) => {
+    if (key === "amount_no_decimals") return group(String(Math.round(value)), ",");
+    if (key === "amount_with_comma_separator") return `${group(int, ".")},${dec}`;
+    if (key === "amount_no_decimals_with_comma_separator") return group(String(Math.round(value)), ".");
+    return `${group(int, ",")}.${dec}`;
+  });
+}
+function priceText(p, el, which) {
+  const compare = which === "compare";
+  const words = compare ? p.compare_at_text : p.price_text;
+  if (words != null) return String(words);
+  const cents = compare ? p.compare_at : p.price;
+  if (cents == null || cents === "") return "";
+  if (typeof cents !== "number") return String(cents);
+  const holder = el && el.closest ? el.closest("[data-gem-money-format]") : null;
+  return formatMoney(cents, holder ? holder.getAttribute("data-gem-money-format") : void 0);
+}
+
+// ../../packages/gem-framework/src/motion/orbit.js
+var pad = (v) => String(v).padStart(2, "0");
+function mountOrbit(root, ctx) {
+  const items = [];
+  const products = [];
+  const hits = [];
+  const imgs = [];
+  root.querySelectorAll("[data-gem-orbit-item]").forEach((item) => {
+    const product = readProduct(item);
+    if (!product) return;
+    items.push(item);
+    products.push(product);
+    hits.push(item.querySelector(".gem-orbit__hit") || item);
+    imgs.push(item.querySelector("img"));
+  });
+  const n = items.length;
+  if (!n) return false;
+  const part = (name) => root.querySelector(".gem-orbit__" + name);
+  const stage = part("stage") || root;
+  const track = part("track");
+  const style = ctx.renderer.style;
+  let s = ctx.settings;
+  const start = Math.min(n - 1, s.start);
+  let pos = start;
+  let target = start;
+  let dragFrom = 0;
+  let dragging = false;
+  let rendered = false;
+  let front = -1;
+  let ring = null;
+  let slotPx = 60;
+  const full = () => ctx.tier() === "full";
+  const layout = () => {
+    s = ctx.reread();
+    const w = stage.clientWidth;
+    ring = {
+      rx: w * s.rx,
+      ry: stage.clientHeight * s.tilt,
+      back: s.back,
+      fade: s.fade,
+      blur: full() ? s.blur : 0,
+      lean: s.lean,
+      spread: (s.spread || 360 / n) * Math.PI / 180
+    };
+    slotPx = Math.max(60, ring.rx * ring.spread / 1.2);
+  };
+  const setTint = (tint) => {
+    if (!s.tint) return;
+    if (tint) root.style.setProperty("--gem-motion-tint", tint);
+    else root.style.removeProperty("--gem-motion-tint");
+  };
+  const frontIndex = () => mod(Math.round(pos), n);
+  const indexOf = (el) => items.findIndex((item) => item === el || item.contains(el));
+  const updateFront = (initial) => {
+    const i = frontIndex();
+    if (i === front) return;
+    front = i;
+    const p = products[i];
+    items.forEach((el, k) => {
+      if (k === i) el.setAttribute("aria-current", "true");
+      else el.removeAttribute("aria-current");
+      hits[k].tabIndex = k === i ? 0 : -1;
+    });
+    if (!initial) {
+      const still = ctx.tier() === "static";
+      const price = priceText(p, root);
+      swapText(part("name"), p.title || "", still);
+      swapText(part("price"), price, still);
+      const count = part("count");
+      if (count) count.textContent = pad(i + 1) + " / " + pad(n);
+      const bar = part("bar");
+      if (bar) bar.style.transform = "scaleX(" + (i + 1) / n + ")";
+      const live = part("live");
+      const words = { index: i + 1, count: n, title: p.title || "", price };
+      if (live) live.textContent = s.live.replace(/\{(\w+)\}/g, (m, k) => Object.hasOwn(words, k) ? String(words[k]) : m);
+      setTint(p.tint);
+    }
+    ctx.emit("gem:motion:front", { index: i, product: p });
+  };
+  const frame = (dt, time) => {
+    let moving = dragging;
+    if (!dragging) {
+      const d = target - pos;
+      if (ctx.tier() === "static" || Math.abs(d) < 8e-4) pos = target;
+      else {
+        pos += d * follow(dt, s.ease);
+        moving = true;
+      }
+    }
+    const drift = s.drift && full();
+    for (let i = 0; i < n; i++) {
+      const p = ringPose(i, n, pos, ring);
+      const bob = drift ? Math.sin(time / 1100 + i * 1.9) * 5 * (1 - p.depth) : 0;
+      const el = items[i];
+      style(el, "transform", `translate3d(${p.x.toFixed(1)}px, ${(p.y + bob).toFixed(1)}px, 0) scale(${p.scale.toFixed(3)}) rotate(${p.lean.toFixed(2)}deg)`);
+      style(el, "opacity", p.opacity.toFixed(3));
+      style(el, "z-index", String(p.z));
+      const blur = Math.round(p.blur * 2) / 2;
+      style(el, "filter", blur > 0 ? `blur(${blur}px)` : "none");
+      style(el, "visibility", p.hidden ? "hidden" : "visible");
+    }
+    rendered = true;
+    updateFront(false);
+    return moving || drift;
+  };
+  const refresh = () => {
+    layout();
+    if (rendered) task.kick();
+  };
+  const task = frameTask(ctx, root, frame, { onDegrade: refresh });
+  const goTo = (index) => {
+    const from = Math.round(target);
+    target = from + ringDelta(from, mod(index, n), n);
+    task.kick();
+  };
+  hits.forEach((hit, i) => {
+    ctx.on(hit, "click", (event) => {
+      if (i === frontIndex()) return;
+      event.preventDefault();
+      goTo(i);
+    });
+  });
+  root.querySelectorAll("[data-gem-orbit-step]").forEach((button) => {
+    ctx.on(button, "click", () => goTo(target + (Number(button.getAttribute("data-gem-orbit-step")) || 0)));
+  });
+  if (track) {
+    ctx.on(track, "click", (event) => {
+      const r = track.getBoundingClientRect();
+      if (r.width) goTo(Math.round((event.clientX - r.left) / r.width * (n - 1)));
+    });
+  }
+  horizontalDrag(ctx, stage, {
+    start: () => {
+      dragFrom = pos;
+    },
+    move: (dx) => {
+      dragging = true;
+      root.setAttribute("data-gem-state", "dragging");
+      pos = dragFrom - dx / slotPx;
+      task.kick();
+    },
+    end: (vx, moved) => {
+      if (!dragging) return;
+      dragging = false;
+      root.setAttribute("data-gem-state", "ready");
+      target = moved < 4 ? Math.round(pos) : throwTarget(pos, -vx / slotPx, s.carry, Math.min(3, Math.ceil(n / 2)));
+      task.kick();
+    }
+  });
+  wheelSteps(ctx, root, (d) => goTo(target + d));
+  arrowKeys(ctx, root, {
+    accept: (e) => e.target === root || hits.includes(e.target),
+    step: (d) => goTo(target + d),
+    activate: (e) => e.target === root ? hits[frontIndex()].click() : false
+  });
+  layout();
+  observeSize(ctx, root, refresh);
+  root.gemQuickViewHost = {
+    key: "orbit",
+    products,
+    indexOf,
+    opens: (el) => indexOf(el) === frontIndex(),
+    imageFor: (i) => imgs[i] || null,
+    triggerFor: (i) => hits[i] || null,
+    goTo,
+    setOpen: (open) => root.setAttribute("data-gem-state", open ? "open" : "ready"),
+    setImage: (i, image) => putImage(imgs[i], image),
+    setTint
+  };
+  root.setAttribute("data-gem-quick-view-host", "orbit");
+  root.setAttribute("data-gem-state", "ready");
+  updateFront(true);
+  if (s.drift && full()) task.kick();
+  return () => {
+    delete root.gemQuickViewHost;
+    root.removeAttribute("data-gem-quick-view-host");
+    root.removeAttribute("data-gem-state");
+  };
+}
+var orbitEffect = defineEffect({
+  key: "orbit",
+  hook: "[data-gem-orbit]",
+  load: "viewport",
+  renderer: "dom",
+  tier: "static",
+  fallback: "markup",
+  budget: { gzip: 6144 },
+  settings: {
+    rx: { type: "number", min: 0.1, max: 0.5, step: 0.01, default: 0.36, css: true, label: "Ring width (share of the stage width)" },
+    tilt: { type: "number", min: 0, max: 0.5, step: 0.01, default: 0.3, css: true, label: "Tilt (rise of the back, share of the stage height)" },
+    size: { type: "number", min: 0.2, max: 0.9, step: 0.01, default: 0.62, css: true, label: "Piece size (share of the stage height)" },
+    back: { type: "number", min: 0.1, max: 1, step: 0.01, default: 0.42, css: true, label: "Scale at the back" },
+    fade: { type: "number", min: 0, max: 1, step: 0.01, default: 0.35, css: true, label: "Opacity at the back" },
+    blur: { type: "number", min: 0, max: 8, step: 0.5, default: 2.5, css: true, label: "Blur at the back (px)" },
+    lean: { type: "number", min: 0, max: 20, step: 1, default: 5, css: true, label: "Lean at the sides (degrees)" },
+    spread: { type: "number", min: 0, max: 180, step: 1, default: 0, css: true, label: "Degrees between pieces (0: round the full ring)" },
+    start: { type: "integer", min: 0, default: 0, css: true, label: "Piece in front at first" },
+    ease: { type: "number", min: 40, max: 600, step: 10, default: 140, label: "Settle time (ms)" },
+    carry: { type: "number", min: 0, max: 800, step: 10, default: 240, label: "How far a throw carries (ms)" },
+    tint: { type: "boolean", default: true, label: "Tint the band with the front piece's colour" },
+    drift: { type: "boolean", default: false, label: "Idle float (full tier only)" },
+    live: { type: "text", default: "{index} / {count}: {title}, {price}", label: "What a screen reader hears when the front piece changes" }
+  },
+  mount: mountOrbit
+});
+
+// ../../packages/gem-framework/src/motion/rail.js
+var COMPACT_BELOW = 700;
+var ROD_TOP = 14;
+function createTurn(el) {
+  if (!el) return null;
+  const side = el.querySelector(".gem-turn__side");
+  const front = el.querySelector(".gem-turn__front");
+  const sheets = el.querySelectorAll(".gem-turn__sheet");
+  const frames = Math.floor(Number(el.getAttribute("data-gem-turn-frames"))) || 0;
+  const cols = Math.floor(Number(el.getAttribute("data-gem-turn-cols"))) || 0;
+  const mode = sheets.length > 1 && frames > 1 && cols > 0 ? "sprite" : side && front ? "pair" : front ? "flip" : null;
+  if (!mode) return null;
+  const rows = Math.ceil(frames / Math.max(1, cols)) || 1;
+  const place = (sheet, f) => setStyle(sheet, "transform", `translate(${(-(f % cols) * 100 / cols).toFixed(3)}%, ${(-Math.floor(f / cols) * 100 / rows).toFixed(3)}%)`);
+  let last = -1;
+  return {
+    mode,
+    /** what the quick view flies out of */
+    image: mode === "sprite" ? el : front,
+    set(t) {
+      const q = Math.round(t * 1e3) / 1e3;
+      if (q === last) return;
+      last = q;
+      if (mode === "pair") {
+        setStyle(side, "transform", `perspective(900px) rotateY(${(-82 * q).toFixed(1)}deg)`);
+        setStyle(side, "opacity", (1 - smoothstep(0.42, 0.78, q)).toFixed(3));
+        setStyle(front, "opacity", smoothstep(0.45, 0.82, q).toFixed(3));
+        setStyle(front, "transform", `scale(${lerp(0.9, 1, q).toFixed(3)})`);
+      } else if (mode === "sprite") {
+        const f = q * (frames - 1);
+        const a = Math.floor(f);
+        place(sheets[0], a);
+        place(sheets[1], Math.min(frames - 1, a + 1));
+        setStyle(sheets[1], "opacity", (f - a).toFixed(3));
+      } else {
+        setStyle(front, "transform", `perspective(900px) rotateY(${lerp(-74, 0, q).toFixed(1)}deg) scale(${lerp(0.86, 1, q).toFixed(3)})`);
+      }
+    },
+    /** Another colour of the same piece (picked in the quick view). A sprite keeps its sheet. */
+    setImages(image, sideImage) {
+      if (mode === "sprite") return;
+      putImage(front, image);
+      putImage(side, sideImage);
+    }
+  };
+}
+function mountRail(root, ctx) {
+  const items = [];
+  const products = [];
+  const hits = [];
+  const bodies = [];
+  const turns = [];
+  root.querySelectorAll("[data-gem-rail-item]").forEach((item) => {
+    const product = readProduct(item);
+    if (!product) return;
+    const hit = item.querySelector(".gem-rail__hit") || item;
+    items.push(item);
+    products.push(product);
+    hits.push(hit);
+    bodies.push(item.querySelector(".gem-rail__body") || hit);
+    turns.push(createTurn(item.querySelector(".gem-turn")));
+  });
+  const n = items.length;
+  if (!n) return false;
+  const stage = root.querySelector(".gem-rail__stage") || root;
+  const track = root.querySelector(".gem-rail__track") || stage;
+  const caption = root.querySelector(".gem-rail__caption");
+  const rod = root.querySelector(".gem-rail__rod path");
+  const style = ctx.renderer.style;
+  const turn = items.map(() => 0);
+  const hangers = items.map(() => ({ x: 0, v: 0 }));
+  let s = ctx.settings;
+  let goal = items.map(() => 0);
+  let focused = -1;
+  let compact = false;
+  let scrolled = false;
+  let rendered = false;
+  let w = 0;
+  let h = 0;
+  let lastX = 0;
+  let lastT = 0;
+  let dpx = 0;
+  const still = () => ctx.tier() === "static";
+  const rodPath = () => `M0 ${ROD_TOP} Q50 ${Math.round(ROD_TOP * 10 + s.sag * 2e3) / 10} 100 ${ROD_TOP}`;
+  if (rod && rod.getAttribute("d") !== rodPath()) rod.setAttribute("d", rodPath());
+  const layout = () => {
+    s = ctx.reread();
+    const was = compact;
+    compact = root.clientWidth < COMPACT_BELOW;
+    w = stage.clientWidth;
+    h = stage.clientHeight;
+    if (compact && !was) items.forEach((el) => style(el, "transform", ""));
+  };
+  const rodY = (x) => {
+    const t = clamp(x / Math.max(1, w), 0, 1);
+    return h * ROD_TOP / 100 + 4 * s.sag * h * t * (1 - t);
+  };
+  const slots = () => {
+    const weights = turn.map((t) => 1 + s.grow * t * t);
+    const unit = w * 0.92 / weights.reduce((a, b) => a + b, 0);
+    let acc = w * 0.04;
+    return weights.map((x) => {
+      const c = acc + x * unit / 2;
+      acc += x * unit;
+      return { c, width: x * unit };
+    });
+  };
+  const nearest = (x) => {
+    let best = -1;
+    let bestD = Infinity;
+    slots().forEach(({ c, width }, i) => {
+      const d = Math.abs(c - x);
+      if (d < bestD && d < width * 1.2) {
+        best = i;
+        bestD = d;
+      }
+    });
+    return best;
+  };
+  const setTint = (tint) => {
+    if (!s.tint) return;
+    if (tint) root.style.setProperty("--gem-motion-tint", tint);
+    else root.style.removeProperty("--gem-motion-tint");
+  };
+  const setFocus = (i, initial) => {
+    if (i === focused) return;
+    focused = i;
+    goal = goal.map((_, k) => k === i ? 1 : 0);
+    const p = products[i];
+    if (initial) {
+      turn[i] = 1;
+      if (turns[i]) turns[i].set(1);
+      return;
+    }
+    if (caption) caption.textContent = p ? [p.title, priceText(p, root)].filter(Boolean).join(" \xB7 ") : "";
+    if (p) {
+      setTint(p.tint);
+      ctx.emit("gem:motion:front", { index: i, product: p });
+    }
+    task.kick();
+  };
+  const frame = (dt) => {
+    const k = follow(dt, s.ease);
+    let moving = false;
+    if (compact && scrolled) {
+      const mid = track.scrollLeft + track.clientWidth / 2;
+      let best = 0;
+      items.forEach((el, i) => {
+        if (Math.abs(el.offsetLeft + el.offsetWidth / 2 - mid) < Math.abs(items[best].offsetLeft + items[best].offsetWidth / 2 - mid)) best = i;
+      });
+      if (best !== focused) setFocus(best);
+    }
+    for (let i = 0; i < n; i++) {
+      const d = goal[i] - turn[i];
+      turn[i] = still() || Math.abs(d) < 2e-3 ? goal[i] : turn[i] + d * k;
+      if (turn[i] !== goal[i]) moving = true;
+      const hanger = hangers[i];
+      if (still()) hanger.x = hanger.v = 0;
+      else {
+        spring(hanger, 0, dt, 0.02, 0.09);
+        hanger.x = clamp(hanger.x, -9, 9);
+        if (Math.abs(hanger.x) > 0.02 || Math.abs(hanger.v) > 0.02) moving = true;
+        else hanger.x = hanger.v = 0;
+      }
+      if (turns[i]) turns[i].set(turn[i]);
+      style(bodies[i], "transform", `rotate(${hanger.x.toFixed(2)}deg)`);
+    }
+    if (!compact) {
+      slots().forEach(({ c }, i) => {
+        style(items[i], "transform", `translate3d(${c.toFixed(1)}px, ${rodY(c).toFixed(1)}px, 0)`);
+        style(items[i], "z-index", String(Math.round(10 + turn[i] * 10)));
+      });
+    }
+    rendered = true;
+    return moving;
+  };
+  const refresh = () => {
+    layout();
+    if (rendered) task.kick();
+  };
+  const task = frameTask(ctx, root, frame, { onDegrade: refresh });
+  hits.forEach((hit, i) => ctx.on(hit, "focus", () => setFocus(i)));
+  ctx.on(stage, "click", (event) => {
+    if (compact || hits.some((hit) => hit.contains(event.target))) return;
+    const i = nearest(event.clientX - stage.getBoundingClientRect().left);
+    if (i >= 0) hits[i].click();
+  });
+  ctx.on(stage, "pointermove", (event) => {
+    if (compact || event.pointerType !== "mouse") return;
+    const x = event.clientX - stage.getBoundingClientRect().left;
+    dpx = clamp((x - lastX) / Math.max(1, event.timeStamp - lastT), -3, 3);
+    lastX = x;
+    lastT = event.timeStamp;
+    if (!still() && s.swing) {
+      slots().forEach(({ c, width }, i) => {
+        hangers[i].v += dpx * 0.35 * s.swing * clamp(1 - Math.abs(c - x) / (width * 2.5), 0, 1);
+      });
+    }
+    setFocus(nearest(x));
+    task.kick();
+  });
+  ctx.on(stage, "pointerleave", () => {
+    if (!compact) setFocus(-1);
+  });
+  ctx.on(track, "keydown", (event) => {
+    if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") return;
+    event.preventDefault();
+    hits[clamp(Math.max(0, focused) + (event.key === "ArrowRight" ? 1 : -1), 0, n - 1)].focus();
+  });
+  ctx.on(
+    track,
+    "scroll",
+    () => {
+      if (!compact) return;
+      scrolled = true;
+      task.kick();
+    },
+    { passive: true }
+  );
+  layout();
+  observeSize(ctx, root, refresh);
+  if (compact) setFocus(0, true);
+  const goTo = (index) => {
+    const i = (index % n + n) % n;
+    if (compact && typeof track.scrollTo === "function") {
+      track.scrollTo({ left: items[i].offsetLeft - (track.clientWidth - items[i].offsetWidth) / 2, behavior: still() ? "auto" : "smooth" });
+    }
+    setFocus(i);
+  };
+  root.gemQuickViewHost = {
+    key: "rail",
+    products,
+    indexOf: (el) => items.findIndex((item) => item === el || item.contains(el)),
+    opens: () => true,
+    imageFor: (i) => (turns[i] ? turns[i].image : items[i] && items[i].querySelector("img")) || null,
+    triggerFor: (i) => hits[i] || null,
+    goTo,
+    setOpen: (open) => root.setAttribute("data-gem-state", open ? "open" : "ready"),
+    setImage: (i, image, side) => turns[i] && turns[i].setImages(image, side),
+    setTint
+  };
+  root.setAttribute("data-gem-quick-view-host", "rail");
+  root.setAttribute("data-gem-state", "ready");
+  return () => {
+    delete root.gemQuickViewHost;
+    root.removeAttribute("data-gem-quick-view-host");
+    root.removeAttribute("data-gem-state");
+  };
+}
+var railEffect = defineEffect({
+  key: "rail",
+  hook: "[data-gem-rail]",
+  load: "viewport",
+  renderer: "dom",
+  tier: "static",
+  fallback: "markup",
+  budget: { gzip: 6144 },
+  settings: {
+    sag: { type: "number", min: 0, max: 0.2, step: 0.01, default: 0.07, css: true, label: "How far the rod dips (share of the stage height)" },
+    height: { type: "number", min: 0.3, max: 0.85, step: 0.01, default: 0.7, css: true, label: "Garment height (share of the stage height)" },
+    grow: { type: "number", min: 0, max: 3, step: 0.1, default: 1.5, label: "How much wider a turned piece gets" },
+    swing: { type: "number", min: 0, max: 2, step: 0.1, default: 1, label: "Hanger swing (0: off)" },
+    ease: { type: "number", min: 40, max: 600, step: 10, default: 120, label: "Turn time (ms)" },
+    tint: { type: "boolean", default: true, label: "Tint the band with the turned piece's colour" }
+  },
+  mount: mountRail
+});
+
+// ../../packages/gem-framework/src/motion/quick-view.js
+var EASE_OUT = "cubic-bezier(.2,.75,.15,1)";
+var LABELS = {
+  add: "Add to bag",
+  adding: "Adding\u2026",
+  added: "Added",
+  added_status: "added to bag",
+  failed: "Could not add to bag",
+  choose: "Choose an option",
+  sold_out: "Sold out",
+  details: "Full details",
+  previous: "Previous product",
+  next: "Next product",
+  close: "Close",
+  colour: "Colour",
+  size: "Size"
+};
+var panelCount = 0;
+var pad2 = (v) => String(v).padStart(2, "0");
+var text = (v) => v == null ? "" : String(v);
+function cardHost(trigger) {
+  const own = trigger.closest("[data-gem-product]");
+  const group = trigger.closest("[data-gem-quick-view-group]");
+  const products = [];
+  const sources = [];
+  let index = -1;
+  for (const el of group ? group.querySelectorAll("[data-gem-product]") : own ? [own] : []) {
+    const product = readProduct(el);
+    if (!product) continue;
+    if (el === own) index = products.length;
+    products.push(product);
+    sources.push(el);
+  }
+  return {
+    index,
+    host: {
+      key: "card",
+      products,
+      imageFor: (i) => sources[i] ? sources[i].querySelector("img") : null,
+      triggerFor: (i) => sources[i] ? sources[i].matches("[data-gem-quick-view-trigger]") ? sources[i] : sources[i].querySelector("[data-gem-quick-view-trigger]") : null,
+      goTo: () => {
+      },
+      setOpen: () => {
+      }
+    }
+  };
+}
+function sessionOf(ctx) {
+  if (ctx.session.quickView) return ctx.session.quickView;
+  const shared = { panels: /* @__PURE__ */ new Map(), pending: null };
+  ctx.session.quickView = shared;
+  ctx.on(ctx.window, "gem:cart:added", () => shared.pending && shared.pending(true));
+  ctx.on(ctx.window, "gem:cart:add-failed", () => shared.pending && shared.pending(false));
+  ctx.cleanup(() => {
+    shared.panels.forEach((panel) => panel.destroy());
+    shared.panels.clear();
+  });
+  return shared;
+}
+function createPanel(parent, ctx, shared) {
+  const doc = parent.ownerDocument;
+  const win = ctx.window;
+  const still = () => ctx.tier() === "static";
+  const make = (tag, className, attrs) => {
+    const node = doc.createElement(tag);
+    node.className = className;
+    for (const [k, v] of Object.entries(attrs || {})) node.setAttribute(k, v);
+    return node;
+  };
+  panelCount += 1;
+  const titleId = "gem-quick-view-title-" + panelCount;
+  const shell = make("div", "gem-popup-shell gem-quick-view__shell", {
+    "data-gem-quick-view-panel": "",
+    "data-gem-popup-desktop": "split-left",
+    "data-gem-popup-mobile": "sheet",
+    "data-gem-popup-media": "top",
+    "data-gem-popup-align": "start"
+  });
+  const dialog = make("dialog", "gem-popup-shell__dialog gem-quick-view__dialog", { "aria-labelledby": titleId });
+  const frame = make("div", "gem-popup-shell__frame gem-quick-view__frame");
+  const surface = make("div", "gem-quick-view__surface", { "aria-hidden": "true" });
+  const close = make("button", "gem-popup-shell__close gem-quick-view__close", { type: "button" });
+  const media = make("div", "gem-popup-shell__media gem-quick-view__media");
+  const img = make("img", "gem-quick-view__image", { alt: "" });
+  const imgNext = make("img", "gem-quick-view__image gem-quick-view__image--next", { alt: "", "aria-hidden": "true" });
+  const body = make("div", "gem-popup-shell__panel gem-quick-view__panel");
+  const bar = make("div", "gem-quick-view__bar");
+  const prev = make("button", "gem-quick-view__icon", { type: "button" });
+  const next = make("button", "gem-quick-view__icon", { type: "button" });
+  const counter = make("span", "gem-quick-view__count");
+  const eyebrow = make("p", "gem-quick-view__eyebrow");
+  const heading = make("h2", "gem-quick-view__title", { id: titleId });
+  const price = make("p", "gem-quick-view__price");
+  const compare = make("s", "gem-quick-view__compare");
+  const swatches = make("div", "gem-quick-view__swatches", { role: "radiogroup" });
+  const sizes = make("div", "gem-quick-view__sizes", { role: "radiogroup" });
+  const add = make("button", "gem-button gem-button--primary gem-quick-view__add", { type: "button" });
+  const status = make("p", "gem-quick-view__status", { role: "status" });
+  const desc = make("p", "gem-quick-view__description");
+  const details = make("a", "gem-quick-view__details");
+  close.textContent = "\xD7";
+  prev.textContent = "\u2039";
+  next.textContent = "\u203A";
+  media.append(img, imgNext);
+  bar.append(prev, counter, next);
+  body.append(bar, eyebrow, heading, price, compare, swatches, sizes, add, status, desc, details);
+  frame.append(close, media, body);
+  dialog.append(surface, frame);
+  shell.append(dialog);
+  parent.append(shell);
+  const chosen = /* @__PURE__ */ new Map();
+  let host = null;
+  let list = [];
+  let index = 0;
+  let color = 0;
+  let size = -1;
+  let source = null;
+  let returnTo = null;
+  let priceAt = null;
+  let labels = LABELS;
+  let closing = false;
+  let resetTimer = 0;
+  const product = () => list[index];
+  const animate = (el, frames, options) => typeof el.animate === "function" ? el.animate(frames, options) : null;
+  const cancelAll = (el) => {
+    if (el.getAnimations) el.getAnimations().forEach((a) => a.cancel());
+  };
+  const hideSource = (hide) => {
+    if (!source) return;
+    if (hide) source.setAttribute("data-gem-quick-view-source", "");
+    else source.removeAttribute("data-gem-quick-view-source");
+  };
+  const moveSource = () => {
+    const target = host.imageFor(index);
+    if (target === source) return;
+    hideSource(false);
+    source = target;
+    if (dialog.open) hideSource(true);
+  };
+  const setTint = (tint) => {
+    if (host.setTint) host.setTint(tint);
+    else if (tint) shell.style.setProperty("--gem-motion-tint", tint);
+    else shell.style.removeProperty("--gem-motion-tint");
+  };
+  const showImage = (image, fade) => {
+    img.alt = image.alt || text(product().title);
+    if (!fade || still() || typeof imgNext.animate !== "function") return putImage(img, image);
+    putImage(imgNext, image);
+    const swap = () => {
+      const settle = () => {
+        putImage(img, image);
+        imgNext.removeAttribute("src");
+        imgNext.removeAttribute("srcset");
+      };
+      const run = imgNext.animate([{ opacity: 0, transform: "scale(.97)" }, { opacity: 1, transform: "none" }], { duration: 280, easing: EASE_OUT });
+      if (run && run.finished) run.finished.then(settle, settle);
+      else settle();
+    };
+    if (typeof imgNext.decode === "function") imgNext.decode().then(swap, swap);
+    else swap();
+  };
+  const variant = () => {
+    const p = product();
+    const c = p.colors && p.colors[color];
+    const z = p.sizes && p.sizes[size];
+    if (!Array.isArray(p.variants)) return null;
+    return p.variants.find((v) => (!c || (v.options || []).includes(c.name)) && (!z || (v.options || []).includes(z.name))) || null;
+  };
+  const variantId = () => {
+    const p = product();
+    const match = variant();
+    if (match) return match.available === false ? null : match.id;
+    const c = p.colors && p.colors[color];
+    const z = p.sizes && p.sizes[size];
+    if (z && z.variant_id != null) return z.variant_id;
+    if (c && c.variant_ids && c.variant_ids.length) return c.variant_ids[0];
+    return p.variant_id != null ? p.variant_id : null;
+  };
+  const priced = () => {
+    const v = variant();
+    return v && (v.price_text != null || v.price != null) ? v : product();
+  };
+  const showPrice = (fade) => {
+    const words = priceText(priced(), priceAt);
+    if (fade) swapText(price, words, still());
+    else price.textContent = words;
+    compare.textContent = priceText(priced(), priceAt, "compare");
+    compare.hidden = !compare.textContent;
+  };
+  const updateAdd = () => {
+    const p = product();
+    const z = p.sizes && p.sizes[size];
+    const soldOut = p.sold_out === true || Boolean(p.sizes && p.sizes.length) && size < 0;
+    add.disabled = soldOut;
+    add.textContent = soldOut ? labels.sold_out : [labels.add, z ? z.name : "", priceText(priced(), priceAt)].filter(Boolean).join(" \xB7 ");
+  };
+  const render = (fade) => {
+    const p = product();
+    const colors = Array.isArray(p.colors) ? p.colors : [];
+    color = Math.min(chosen.get(p.id) || 0, Math.max(0, colors.length - 1));
+    size = (p.sizes || []).findIndex((z) => z.available !== false);
+    const c = colors[color];
+    counter.textContent = pad2(index + 1) + " / " + pad2(list.length);
+    bar.hidden = list.length < 2;
+    const put = (el, value) => {
+      if (fade) swapText(el, value, still());
+      else el.textContent = value;
+    };
+    put(eyebrow, text(p.eyebrow));
+    put(heading, text(p.title));
+    showPrice(fade);
+    eyebrow.hidden = !p.eyebrow;
+    desc.textContent = text(p.description);
+    desc.hidden = !p.description;
+    details.textContent = labels.details;
+    if (p.url) details.setAttribute("href", p.url);
+    details.hidden = !p.url;
+    showImage(c && c.image || p.image, fade);
+    setTint(c && c.tint || p.tint);
+    swatches.replaceChildren(
+      ...colors.map((col, i) => {
+        const b = make("button", "gem-quick-view__swatch", { type: "button", role: "radio", "aria-checked": String(i === color), "aria-label": col.name, title: col.name, "data-gem-quick-view-color": String(i) });
+        if (col.hex) b.style.setProperty("--gem-quick-view-swatch", col.hex);
+        return b;
+      })
+    );
+    swatches.hidden = colors.length < 2;
+    sizes.replaceChildren(
+      ...(p.sizes || []).map((z, i) => {
+        const b = make("button", "gem-quick-view__size", { type: "button", role: "radio", "aria-checked": String(i === size), "data-gem-quick-view-size": String(i) });
+        b.textContent = z.name;
+        if (z.available === false) {
+          b.disabled = true;
+          b.setAttribute("aria-label", z.name + ", " + labels.sold_out);
+        }
+        return b;
+      })
+    );
+    sizes.hidden = !(p.sizes && p.sizes.length);
+    status.textContent = "";
+    updateAdd();
+    moveSource();
+    for (const k of [index - 1, index + 1]) if (list.length > 1) loadImage(doc, list[(k + list.length) % list.length].image);
+  };
+  const step = (delta) => {
+    if (list.length < 2) return;
+    index = (index + delta + list.length) % list.length;
+    host.goTo(index);
+    render(true);
+  };
+  const finish = (ok, before) => {
+    shared.pending = null;
+    add.disabled = false;
+    add.textContent = ok ? labels.added : before;
+    status.textContent = ok ? text(product().title) + ": " + labels.added_status : labels.failed;
+    if (resetTimer) win.clearTimeout(resetTimer);
+    resetTimer = ok ? win.setTimeout(updateAdd, 1600) : 0;
+  };
+  const addToCart = () => {
+    const id = variantId();
+    if (id == null || id === "") {
+      status.textContent = labels.choose;
+      return;
+    }
+    const before = add.textContent;
+    add.disabled = true;
+    add.textContent = labels.adding;
+    add.dispatchEvent(new win.CustomEvent("gem:cart:add", { bubbles: true, composed: true, detail: { variantId: String(id), quantity: 1 } }));
+    if (win.__gemCartAddBridge) shared.pending = (ok) => finish(ok, before);
+    else finish(true, before);
+  };
+  const pick = (group, i) => {
+    Array.from(group.children).forEach((el, k) => el.setAttribute("aria-checked", String(k === i)));
+    if (group === sizes) size = i;
+    else {
+      const p = product();
+      const c = p.colors && p.colors[i];
+      if (!c) return;
+      color = i;
+      chosen.set(p.id, i);
+      if (c.image) {
+        showImage(c.image, true);
+        if (host.setImage) host.setImage(index, c.image, c.side);
+      }
+      setTint(c.tint || p.tint);
+    }
+    showPrice(false);
+    updateAdd();
+  };
+  const done = (reason) => {
+    dialog.removeAttribute("data-gem-state");
+    cancelAll(img);
+    if (dialog.open) dialog.close();
+    hideSource(false);
+    host.setOpen(false);
+    closing = false;
+    const back = host.triggerFor(index) || returnTo;
+    if (back && typeof back.focus === "function") back.focus();
+    ctx.api.emit("gem:quick-view:close", { source: "gem-runtime", reason, productId: product().id });
+  };
+  const shut = (reason) => {
+    if (!dialog.open || closing) return;
+    closing = true;
+    moveSource();
+    const to = source && source.getBoundingClientRect ? source.getBoundingClientRect() : null;
+    const flight = still() || !to ? null : flip(img, to, { back: true, duration: 440, easing: "cubic-bezier(.4,0,.2,1)" });
+    if (!flight || !flight.finished) return done(reason);
+    dialog.setAttribute("data-gem-state", "closing");
+    for (const el of [body, surface, close]) animate(el, [{ opacity: 1 }, { opacity: 0 }], { duration: 220, fill: "forwards" });
+    host.setOpen(false);
+    const end = () => {
+      [body, surface, close].forEach(cancelAll);
+      done(reason);
+    };
+    flight.finished.then(end, end);
+  };
+  ctx.on(close, "click", () => shut("close-control"));
+  ctx.on(prev, "click", () => step(-1));
+  ctx.on(next, "click", () => step(1));
+  ctx.on(add, "click", addToCart);
+  for (const [group, attr] of [[swatches, "data-gem-quick-view-color"], [sizes, "data-gem-quick-view-size"]]) {
+    ctx.on(group, "click", (event) => {
+      const b = event.target.closest && event.target.closest(`[${attr}]`);
+      if (b && !b.disabled) pick(group, Number(b.getAttribute(attr)));
+    });
+  }
+  ctx.on(dialog, "cancel", (event) => {
+    event.preventDefault();
+    shut("escape");
+  });
+  ctx.on(dialog, "click", (event) => {
+    if (event.target === dialog) shut("backdrop");
+  });
+  ctx.on(dialog, "keydown", (event) => {
+    if (event.target.closest && event.target.closest(".gem-quick-view__swatches, .gem-quick-view__sizes")) return;
+    if (event.key === "ArrowRight" || event.key === "ArrowLeft") step(event.key === "ArrowRight" ? 1 : -1);
+  });
+  return {
+    shell,
+    open(nextHost, at, trigger, nextLabels) {
+      if (dialog.open) return;
+      cancelAll(img);
+      host = nextHost;
+      list = host.products;
+      index = at;
+      labels = nextLabels;
+      returnTo = trigger;
+      priceAt = trigger;
+      source = null;
+      close.setAttribute("aria-label", labels.close);
+      prev.setAttribute("aria-label", labels.previous);
+      next.setAttribute("aria-label", labels.next);
+      swatches.setAttribute("aria-label", labels.colour);
+      sizes.setAttribute("aria-label", labels.size);
+      render(false);
+      source = host.imageFor(index);
+      const from = source && source.getBoundingClientRect ? source.getBoundingClientRect() : null;
+      dialog.showModal();
+      dialog.setAttribute("data-gem-state", "open");
+      host.setOpen(true);
+      hideSource(true);
+      ctx.api.emit("gem:quick-view:open", { source: "gem-runtime", productId: product().id, productUrl: product().url || null, index, count: list.length, host: host.key });
+      if (still()) return;
+      flip(img, from, { duration: 560, easing: EASE_OUT });
+      animate(surface, [{ opacity: 0, transform: "scale(.97)" }, { opacity: 1, transform: "none" }], { duration: 360, easing: EASE_OUT });
+      Array.from(body.children).forEach(
+        (el, i) => animate(el, [{ opacity: 0, transform: "translateY(12px)" }, { opacity: 1, transform: "none" }], { duration: 380, delay: 120 + i * 40, easing: EASE_OUT, fill: "backwards" })
+      );
+    },
+    /** Unmount: close at once (no flight) and leave the root as the server drew it. */
+    destroy() {
+      if (dialog.open) done("unmount");
+      shell.remove();
+    }
+  };
+}
+function mountQuickView(trigger, ctx) {
+  const shared = sessionOf(ctx);
+  ctx.on(trigger, "click", (event) => {
+    if (event.defaultPrevented) return;
+    const hostEl = trigger.closest("[data-gem-quick-view-host]");
+    const host = hostEl && hostEl.gemQuickViewHost;
+    if (host && !host.opens(trigger)) return;
+    const card = host ? null : cardHost(trigger);
+    const index = host ? host.indexOf(trigger) : card.index;
+    if (index < 0 || !(host || card.host).products[index]) return;
+    event.preventDefault();
+    const parent = host && hostEl || trigger.closest("[data-gem-quick-view-group]") || trigger.closest(".gem-section, [data-gem-section-id]") || trigger.parentElement;
+    let panel = shared.panels.get(parent);
+    if (!panel || !panel.shell.isConnected) shared.panels.set(parent, panel = createPanel(parent, ctx, shared));
+    const own = ctx.reread().labels;
+    panel.open(host || card.host, index, trigger, { ...LABELS, ...own && typeof own === "object" ? own : {} });
+  });
+}
+var quickViewEffect = defineEffect({
+  key: "quick-view",
+  hook: "[data-gem-quick-view-trigger]",
+  load: "interaction",
+  renderer: "dom",
+  tier: "static",
+  fallback: "markup",
+  budget: { gzip: 6144 },
+  settings: {
+    labels: {
+      type: "json",
+      default: {},
+      inherit: true,
+      label: "The panel's words, JSON on the trigger or an ancestor: add, adding, added, added_status, failed, choose, sold_out, details, previous, next, close, colour, size"
+    }
+  },
+  mount: mountQuickView
+});
+
+// ../../packages/gem-framework/src/motion-engine.ts
+var GEM_ORBIT_BASE_CSS_LINES = [
+  ".gem-orbit { display: block; position: relative; background-color: var(--gem-motion-tint, transparent); }",
+  ".gem-orbit:focus-visible { outline: var(--gem-focus-ring); outline-offset: calc(-1 * var(--gem-focus-offset)); }",
+  ".gem-orbit__stage { position: relative; height: var(--gem-orbit-stage-height, clamp(340px, 58vh, 620px)); overflow: hidden; container-type: size; }",
+  ".gem-orbit__ring { list-style: none; margin: 0; padding: 0; position: absolute; left: 50%; top: 66%; width: 0; height: 0; }",
+  ".gem-orbit__item {",
+  "  --gem-orbit-k: calc(mod(var(--gem-orbit-i, 0) - var(--gem-orbit-start, 0) + var(--gem-orbit-n, 1) / 2, var(--gem-orbit-n, 1)) - var(--gem-orbit-n, 1) / 2);",
+  "  --gem-orbit-a: calc(var(--gem-orbit-k) * var(--gem-orbit-spread, calc(360 / var(--gem-orbit-n, 1))) * 1deg);",
+  "  --gem-orbit-d: calc((1 - cos(var(--gem-orbit-a))) / 2);",
+  "  position: absolute; left: calc(var(--gem-orbit-size, 0.62) * -50cqh); top: calc(var(--gem-orbit-size, 0.62) * -50cqh);",
+  "  width: calc(var(--gem-orbit-size, 0.62) * 100cqh); height: calc(var(--gem-orbit-size, 0.62) * 100cqh);",
+  "  transform: translate3d(calc(var(--gem-orbit-rx, 0.36) * 100cqw * sin(var(--gem-orbit-a))), calc(var(--gem-orbit-tilt, 0.3) * -100cqh * var(--gem-orbit-d)), 0)",
+  "    scale(calc(1 + (var(--gem-orbit-back, 0.42) - 1) * var(--gem-orbit-d))) rotate(calc(sin(var(--gem-orbit-a)) * var(--gem-orbit-lean, 5) * 1deg));",
+  "  opacity: calc(1 + (var(--gem-orbit-fade, 0.35) - 1) * var(--gem-orbit-d));",
+  "  z-index: calc((1 - var(--gem-orbit-d)) * 100);",
+  "  filter: blur(calc(var(--gem-orbit-blur, 2.5) * var(--gem-orbit-d) * 1px));",
+  "}",
+  ".gem-orbit__item::after {",
+  "  content: ''; position: absolute; left: 18%; right: 18%; bottom: -2%; height: 7%; z-index: -1; border-radius: var(--gem-radius-pill);",
+  "  background: radial-gradient(closest-side, color-mix(in srgb, var(--gem-color-scrim, #000) 18%, transparent), transparent);",
+  "}",
+  // A hit is a <button> or an <a href> to the product (still a link on a page without the engine).
+  ".gem-orbit__hit { display: block; width: 100%; height: 100%; padding: 0; border: 0; color: inherit; background: transparent; text-decoration: none; cursor: pointer; }",
+  ".gem-orbit__hit:focus-visible { outline: var(--gem-focus-ring); outline-offset: var(--gem-focus-offset); border-radius: var(--gem-radius-md); }",
+  ".gem-orbit__img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }",
+  ".gem-orbit__caption { display: grid; justify-items: center; gap: var(--gem-space-2xs); margin: calc(-1 * var(--gem-space-xs)) 0 0; text-align: center; }",
+  ".gem-orbit__name { margin: 0; font-family: var(--gem-font-heading); font-size: var(--gem-h4); font-weight: 600; line-height: 1.2; }",
+  ".gem-orbit__price { margin: 0; color: var(--gem-color-muted); font-variant-numeric: tabular-nums; }",
+  ".gem-orbit__dock { display: flex; align-items: center; justify-content: center; gap: var(--gem-space-sm); padding: var(--gem-space-md) 0 var(--gem-space-xs); font-size: var(--gem-text-sm); font-variant-numeric: tabular-nums; }",
+  ".gem-orbit__arrow {",
+  "  display: inline-grid; place-items: center; width: var(--gem-tap-min); height: var(--gem-tap-min); padding: 0; cursor: pointer;",
+  "  border: var(--gem-stroke, 1px) solid currentColor; border-radius: var(--gem-radius-pill); color: inherit; background: transparent; font: inherit; line-height: 1;",
+  "}",
+  ".gem-orbit__arrow:hover { color: var(--gem-color-background); background: var(--gem-color-text); border-color: var(--gem-color-text); }",
+  ".gem-orbit__arrow:focus-visible { outline: var(--gem-focus-ring); outline-offset: var(--gem-focus-offset); }",
+  ".gem-orbit__count { min-width: 7ch; text-align: center; font-variant-numeric: tabular-nums; }",
+  ".gem-orbit__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }",
+  ".gem-orbit__track { position: relative; width: min(180px, 30vw); height: var(--gem-stroke-thick, 2px); background: color-mix(in srgb, currentColor 18%, transparent); }",
+  ".gem-orbit__track::before { content: ''; position: absolute; inset: calc(-1 * var(--gem-space-sm)) 0; }",
+  ".gem-orbit__bar { position: absolute; inset: 0; background: currentColor; transform-origin: left; transform: scaleX(calc((var(--gem-orbit-start, 0) + 1) / var(--gem-orbit-n, 1))); }",
+  // The light and static tiers draw no blur (a phone, reduced motion): the first paint already matches what they draw.
+  "@media (pointer: coarse), (prefers-reduced-motion: reduce) { .gem-orbit__item { filter: none; } }"
+];
+var GEM_RAIL_BASE_CSS_LINES = [
+  ".gem-rail { display: block; position: relative; container-type: inline-size; background-color: var(--gem-motion-tint, transparent); }",
+  ".gem-rail__stage { position: relative; height: var(--gem-rail-stage-height, clamp(380px, 62vh, 640px)); overflow: hidden; container-type: size; }",
+  // The rod is drawn in a 0..100 viewBox with preserveAspectRatio="none": it fits any stage without being redrawn.
+  ".gem-rail__rod { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }",
+  ".gem-rail__rod path { fill: none; stroke: var(--gem-rail-rod, currentColor); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.85; }",
+  ".gem-rail__track { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }",
+  // At rest slot i of n is centred at 4% + 92% · (i + ½) / n of the width and hangs from the rod's curve there.
+  ".gem-rail__item {",
+  "  --gem-rail-t: calc(0.04 + 0.92 * (var(--gem-rail-i, 0) + 0.5) / var(--gem-rail-n, 1));",
+  "  position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 10;",
+  "  transform: translate3d(calc(var(--gem-rail-t) * 100cqw), calc((0.14 + 4 * var(--gem-rail-sag, 0.07) * var(--gem-rail-t) * (1 - var(--gem-rail-t))) * 100cqh), 0);",
+  "}",
+  ".gem-rail__hit {",
+  "  position: absolute; left: 0; top: -6px; width: calc(var(--gem-rail-height, 0.7) * 78cqh); height: calc(var(--gem-rail-height, 0.7) * 100cqh + 34px);",
+  "  padding: 0; border: 0; color: inherit; background: transparent; text-decoration: none; cursor: pointer; transform: translateX(-50%);",
+  "}",
+  ".gem-rail__hit:focus-visible { outline: var(--gem-focus-ring); outline-offset: var(--gem-focus-offset); border-radius: var(--gem-radius-md); }",
+  ".gem-rail__body { position: absolute; inset: 0; display: block; transform-origin: 50% 0; }",
+  ".gem-rail__hook {",
+  "  position: absolute; left: calc(50% - 8px); top: 0; width: 16px; height: 22px; opacity: 0.8;",
+  "  border: var(--gem-stroke-thick, 2px) solid var(--gem-rail-rod, currentColor); border-bottom: 0; border-radius: var(--gem-radius-md) var(--gem-radius-md) 0 0;",
+  "}",
+  ".gem-rail__hook::after { content: ''; position: absolute; left: calc(50% - 23px); top: 18px; width: 46px; height: var(--gem-stroke-thick, 2px); background: var(--gem-rail-rod, currentColor); border-radius: var(--gem-radius-sm); }",
+  ".gem-rail__tag {",
+  "  position: absolute; left: calc(50% + 14px); top: 18px; z-index: 2; padding: var(--gem-space-2xs) var(--gem-space-xs); transform: rotate(4deg);",
+  "  font-family: var(--gem-font-mono); font-size: var(--gem-text-xs); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;",
+  "  color: var(--gem-color-text); background: var(--gem-color-background); border-radius: var(--gem-radius-sm); box-shadow: var(--gem-shadow-sm);",
+  "}",
+  ".gem-rail .gem-turn { position: absolute; inset: 26px 0 0; width: auto; height: auto; }",
+  ".gem-rail__caption { margin: var(--gem-space-xs) 0 0; min-height: 1.5em; text-align: center; font-variant-numeric: tabular-nums; }",
+  // Under 700 px (the effect's breakpoint, on the same width): a swipe row with snap points; the centred piece turns.
+  "@container (max-width: 699px) {",
+  "  .gem-rail__stage { height: auto; overflow: visible; container-type: normal; }",
+  "  .gem-rail__rod { display: none; }",
+  "  .gem-rail__track { position: static; display: flex; gap: var(--gem-space-2xs); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20cqw var(--gem-space-xs); scrollbar-width: none; }",
+  "  .gem-rail__track::-webkit-scrollbar { display: none; }",
+  "  .gem-rail__item { position: relative; flex: 0 0 60cqw; width: auto; height: calc(72cqw + 34px); transform: none; scroll-snap-align: center; border-top: var(--gem-stroke-thick, 4px) solid var(--gem-rail-rod, currentColor); }",
+  "  .gem-rail__hit { left: 50%; width: 100%; height: 100%; }",
+  // The row rests with its first piece centred (the track's padding) and facing the shopper; the plugin settles there.
+  "  .gem-rail__item:first-child .gem-turn__side { opacity: 0; transform: perspective(900px) rotateY(-82deg); }",
+  "  .gem-rail__item:first-child .gem-turn:has(> .gem-turn__side) > .gem-turn__front { opacity: 1; transform: scale(1); }",
+  "  .gem-rail__item:first-child .gem-turn:not(:has(> .gem-turn__side)) > .gem-turn__front { transform: perspective(900px) rotateY(0deg) scale(1); }",
+  "  .gem-rail__item:first-child .gem-turn__sheet { transform: translate(calc(-100% / var(--gem-turn-cols, 1) * mod(var(--gem-turn-frames, 1) - 1, var(--gem-turn-cols, 1))), calc(-100% / var(--gem-turn-rows, 1) * round(down, (var(--gem-turn-frames, 1) - 1) / var(--gem-turn-cols, 1)))); }",
+  "}",
+  // The turn rests on its side view: pair (side + front photo), flip (front only), sprite (two copies of a frame sheet).
+  ".gem-turn { position: relative; display: block; width: 100%; height: 100%; }",
+  ".gem-turn[data-gem-turn-frames] { overflow: hidden; }",
+  ".gem-turn__side, .gem-turn__front { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 0; pointer-events: none; }",
+  ".gem-turn__side { transform: perspective(900px) rotateY(0deg); backface-visibility: hidden; }",
+  ".gem-turn:has(> .gem-turn__side) > .gem-turn__front { opacity: 0; transform: scale(0.9); }",
+  ".gem-turn:not(:has(> .gem-turn__side)) > .gem-turn__front { transform: perspective(900px) rotateY(-74deg) scale(0.86); }",
+  ".gem-turn__sheet { position: absolute; left: 0; top: 0; display: block; max-width: none; pointer-events: none; width: calc(var(--gem-turn-cols, 1) * 100%); height: calc(var(--gem-turn-rows, 1) * 100%); }",
+  ".gem-turn__sheet + .gem-turn__sheet { opacity: 0; }"
+];
+var GEM_ORBIT_BASE_CSS = GEM_ORBIT_BASE_CSS_LINES.join("\n") + "\n";
+var GEM_RAIL_BASE_CSS = GEM_RAIL_BASE_CSS_LINES.join("\n") + "\n";
+var GEM_ORBIT_RUNTIME_CSS = [
+  ".gem-orbit { --gem-orbit-css: 1; outline: none; user-select: none; -webkit-user-select: none; transition: background-color var(--gem-motion-slow, 0.6s) var(--gem-ease-soft, ease); }",
+  ".gem-orbit[data-gem-state] .gem-orbit__stage { touch-action: pan-y; cursor: grab; }",
+  ".gem-orbit[data-gem-state='dragging'] .gem-orbit__stage { cursor: grabbing; }",
+  ".gem-orbit[data-gem-state] .gem-orbit__item { will-change: transform; }",
+  ".gem-orbit[data-gem-state] .gem-orbit__hit { transition: opacity var(--gem-motion-base, 0.35s) var(--gem-ease-soft, ease), transform var(--gem-motion-base, 0.35s) var(--gem-ease-soft, ease); }",
+  ".gem-orbit[data-gem-state] .gem-orbit__bar { transition: transform var(--gem-motion-slow, 0.4s) var(--gem-ease-soft, ease); }",
+  ".gem-orbit[data-gem-state] .gem-orbit__arrow { transition: color var(--gem-motion-fast, 0.2s) ease, background-color var(--gem-motion-fast, 0.2s) ease; }",
+  ".gem-orbit[data-gem-state='open'] .gem-orbit__item:not([aria-current='true']) .gem-orbit__hit { opacity: 0; transform: scale(0.92); }",
+  "@media (prefers-reduced-motion: reduce) { .gem-orbit, .gem-orbit[data-gem-state] .gem-orbit__hit, .gem-orbit[data-gem-state] .gem-orbit__bar, .gem-orbit[data-gem-state] .gem-orbit__arrow { transition: none; } }"
+].join("\n") + "\n";
+var GEM_RAIL_RUNTIME_CSS = [
+  ".gem-rail { --gem-rail-css: 1; user-select: none; -webkit-user-select: none; transition: background-color var(--gem-motion-slow, 0.6s) var(--gem-ease-soft, ease); }",
+  ".gem-rail[data-gem-state] .gem-rail__item { will-change: transform; }",
+  // Unturned neighbours' hit boxes overlap on the rail: once bound, a click on the stage goes to the piece whose slot it is in
+  // (motion/rail.js), so the hits take no pointer events; keyboard focus and Enter stay on them. The phone row keeps its own.
+  ".gem-rail[data-gem-state] .gem-rail__stage { cursor: pointer; }",
+  ".gem-rail[data-gem-state] .gem-rail__hit { pointer-events: none; transition: opacity var(--gem-motion-base, 0.35s) var(--gem-ease-soft, ease); }",
+  "@container (max-width: 699px) { .gem-rail[data-gem-state] .gem-rail__hit { pointer-events: auto; } }",
+  ".gem-rail[data-gem-state='open'] .gem-rail__hit { opacity: 0.15; }",
+  "@media (prefers-reduced-motion: reduce) { .gem-rail, .gem-rail[data-gem-state] .gem-rail__hit { transition: none; } }"
+].join("\n") + "\n";
+var GEM_QUICK_VIEW_CSS = [
+  "[data-gem-quick-view-trigger] { --gem-quick-view-css: 1; }",
+  ".gem-quick-view__shell { display: contents; }",
+  ".gem-quick-view__shell .gem-quick-view__dialog { overflow: visible; isolation: isolate; color: var(--gem-color-text); background: transparent; box-shadow: none; user-select: text; -webkit-user-select: text; }",
+  ".gem-quick-view__surface {",
+  "  position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--gem-shadow-md);",
+  "  background: color-mix(in srgb, var(--gem-motion-tint, var(--gem-color-background)) 45%, var(--gem-color-background));",
+  "  transition: background-color var(--gem-motion-slow, 0.5s) var(--gem-ease-soft, ease);",
+  "}",
+  ".gem-quick-view__shell .gem-quick-view__media { overflow: visible; background: transparent; min-height: 0; }",
+  ".gem-quick-view__image { position: absolute; inset: 6% 4%; width: 92%; height: 88%; object-fit: contain; transform-origin: 50% 50%; will-change: transform; }",
+  ".gem-quick-view__image--next { opacity: 0; pointer-events: none; }",
+  ".gem-quick-view__image--next:not([src]) { display: none; }",
+  ".gem-quick-view__shell .gem-quick-view__panel { justify-content: flex-start; gap: var(--gem-space-sm); }",
+  ".gem-quick-view__shell [hidden] { display: none; }",
+  ".gem-quick-view__bar { display: flex; align-items: center; gap: var(--gem-space-xs); font-family: var(--gem-font-mono); font-size: var(--gem-text-xs); font-variant-numeric: tabular-nums; }",
+  ".gem-quick-view__icon {",
+  "  display: inline-grid; place-items: center; width: var(--gem-tap-min); height: var(--gem-tap-min); padding: 0; cursor: pointer;",
+  "  border: var(--gem-stroke, 1px) solid color-mix(in srgb, currentColor 25%, transparent); border-radius: var(--gem-radius-pill);",
+  "  color: inherit; background: transparent; font: inherit; font-size: var(--gem-h5); line-height: 1;",
+  "}",
+  ".gem-quick-view__icon:hover { border-color: currentColor; }",
+  ".gem-quick-view__icon:focus-visible, .gem-quick-view__swatch:focus-visible, .gem-quick-view__size:focus-visible, .gem-quick-view__details:focus-visible { outline: var(--gem-focus-ring); outline-offset: var(--gem-focus-offset); }",
+  ".gem-quick-view__eyebrow { margin: var(--gem-space-md) 0 0; color: var(--gem-color-muted); font-family: var(--gem-font-mono); font-size: var(--gem-text-xs); letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; }",
+  ".gem-quick-view__title { margin: 0; font-family: var(--gem-font-heading); font-size: var(--gem-h2); line-height: 1.05; }",
+  ".gem-quick-view__price { margin: 0; font-size: var(--gem-h5); font-variant-numeric: tabular-nums; }",
+  ".gem-quick-view__compare { margin: calc(-1 * var(--gem-space-xs)) 0 0; color: var(--gem-color-muted); font-size: var(--gem-text-sm); }",
+  ".gem-quick-view__swatches, .gem-quick-view__sizes { display: flex; flex-wrap: wrap; gap: var(--gem-space-xs); }",
+  ".gem-quick-view__swatch { position: relative; width: var(--gem-tap-min); height: var(--gem-tap-min); padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; }",
+  ".gem-quick-view__swatch::before {",
+  "  content: ''; position: absolute; inset: 8px; border-radius: var(--gem-radius-pill); background: var(--gem-quick-view-swatch, var(--gem-color-surface));",
+  "  box-shadow: inset 0 0 0 var(--gem-stroke, 1px) color-mix(in srgb, var(--gem-color-text) 15%, transparent);",
+  "}",
+  ".gem-quick-view__swatch[aria-checked='true']::after { content: ''; position: absolute; inset: 3px; border: var(--gem-stroke-thick, 2px) solid currentColor; border-radius: var(--gem-radius-pill); }",
+  ".gem-quick-view__size {",
+  "  display: inline-grid; place-items: center; min-width: var(--gem-tap-min); height: var(--gem-tap-min); padding: 0 var(--gem-space-sm); cursor: pointer;",
+  "  border: var(--gem-stroke, 1px) solid color-mix(in srgb, currentColor 22%, transparent); border-radius: var(--gem-radius-pill);",
+  "  color: inherit; background: transparent; font: inherit; font-size: var(--gem-text-sm);",
+  "}",
+  ".gem-quick-view__size[aria-checked='true'] { color: var(--gem-color-background); background: var(--gem-color-text); border-color: var(--gem-color-text); }",
+  ".gem-quick-view__size:disabled { opacity: 0.4; text-decoration: line-through; cursor: not-allowed; }",
+  ".gem-quick-view__add { width: 100%; margin: var(--gem-space-xs) 0 0; font-variant-numeric: tabular-nums; }",
+  ".gem-quick-view__status { margin: 0; min-height: 1.2em; color: var(--gem-color-muted); font-size: var(--gem-text-sm); }",
+  ".gem-quick-view__description { margin: 0; max-width: 46ch; font-size: var(--gem-text-sm); line-height: 1.55; }",
+  ".gem-quick-view__details { color: inherit; font-size: var(--gem-text-sm); text-underline-offset: 3px; }",
+  // The photo the panel flew out of stays hidden in the page while the panel shows it.
+  "[data-gem-quick-view-source] { visibility: hidden; }",
+  "@keyframes gem-quick-view-fade { from { opacity: 0; } to { opacity: 1; } }",
+  ".gem-quick-view__dialog[data-gem-state='open']::backdrop { animation: gem-quick-view-fade var(--gem-motion-base, 0.35s) ease both; }",
+  ".gem-quick-view__dialog[data-gem-state='closing']::backdrop { animation: gem-quick-view-fade var(--gem-motion-base, 0.35s) ease reverse both; }",
+  "@media (max-width: 749px) { .gem-quick-view__shell .gem-quick-view__media { height: 34dvh; } }",
+  "@media (prefers-reduced-motion: reduce) { .gem-quick-view__dialog::backdrop { animation: none; } .gem-quick-view__surface { transition: none; } }"
+].join("\n") + "\n";
+var GEM_MOTION_CLASSES = [
+  ...["", "__stage", "__ring", "__item", "__hit", "__img", "__caption", "__name", "__price", "__dock", "__arrow", "__count", "__track", "__bar", "__live"].map((part) => `gem-orbit${part}`),
+  ...["", "__stage", "__rod", "__track", "__item", "__hit", "__body", "__hook", "__tag", "__caption"].map((part) => `gem-rail${part}`),
+  ...["", "__side", "__front", "__sheet"].map((part) => `gem-turn${part}`),
+  ...[
+    "shell",
+    "dialog",
+    "frame",
+    "surface",
+    "close",
+    "media",
+    "image",
+    "image--next",
+    "panel",
+    "bar",
+    "icon",
+    "count",
+    "eyebrow",
+    "title",
+    "price",
+    "compare",
+    "swatches",
+    "swatch",
+    "sizes",
+    "size",
+    "add",
+    "status",
+    "description",
+    "details"
+  ].map((part) => `gem-quick-view__${part}`)
+];
+var gemMotionEffectList = [orbitEffect, railEffect, quickViewEffect];
+var compactCss = (css) => css.replace(/\s+/g, " ").replace(/\s*([{};])\s*/g, "$1").replace(/:\s+/g, ":").replace(/,\s+/g, ",").replace(/;}/g, "}").trim();
+var effectPluginLines = (effect, name, css, before = [], detail = "count") => [
+  `  registerPlugin('${effect.key}', ({ api }) => {`,
+  ...before,
+  "    const on = (el, type, fn, opt) => { if (canListen(el)) el.addEventListener(type, fn, opt); };",
+  `    const count = mountEffects(${name}, { window, document, on, mark, api, css: ${JSON.stringify(compactCss(css))} }, onUnmount);`,
+  `    api.emit('gem:${effect.key}:ready', { source: 'gem-runtime', ${detail} });`,
+  "  });"
+];
+var effectImports = (file, name) => ['import { mountEffects } from "../motion/core.js";', `import { ${name} } from "../motion/${file}.js";`];
+function gemMotionChunks(legacyQuickView) {
+  return {
+    orbit: { hook: orbitEffect.hook, when: orbitEffect.load, imports: effectImports("orbit", "orbitEffect"), body: effectPluginLines(orbitEffect, "orbitEffect", GEM_ORBIT_RUNTIME_CSS) },
+    rail: { hook: railEffect.hook, when: railEffect.load, imports: effectImports("rail", "railEffect"), body: effectPluginLines(railEffect, "railEffect", GEM_RAIL_RUNTIME_CSS) },
+    "quick-view": {
+      hook: `${quickViewEffect.hook}, ${legacyQuickView.hook}`,
+      when: quickViewEffect.load,
+      imports: effectImports("quick-view", "quickViewEffect"),
+      body: effectPluginLines(quickViewEffect, "quickViewEffect", GEM_QUICK_VIEW_CSS, legacyQuickView.lines, legacyQuickView.readyDetail)
+    }
+  };
+}
+
 // ../../packages/gem-framework/src/manifest.ts
 var gemFrameworkPrimitiveGroups = [
   {
@@ -930,6 +2268,12 @@ var gemFrameworkPrimitiveGroups = [
       "gem-popup-shell__teaser"
     ]
   },
+  {
+    // The motion engine (motion-engine.ts, 0.19.0): the orbit, rail and turn markup a section draws, and the quick view panel
+    // the quick-view plugin builds. Styled by their own base / runtime stylesheets, never by gem-framework.css.
+    group: "motion",
+    classes: [...GEM_MOTION_CLASSES]
+  },
   {
     group: "sections",
     classes: [
@@ -1103,6 +2447,24 @@ var GEM_POPUP_SHELL_CSS_LINES = [
   "  .gem-popup-shell[data-gem-popup-media='background']:is([data-gem-popup-desktop='split-left'], [data-gem-popup-desktop='split-right'], [data-gem-popup-desktop='card']) .gem-popup-shell__close { color: var(--gem-color-text); }",
   "  .gem-popup-shell[data-gem-popup-media='background']:is([data-gem-popup-desktop='split-left'], [data-gem-popup-desktop='split-right'], [data-gem-popup-desktop='card']) .gem-popup-shell__media::after { content: none; }",
   "}",
+  // Ngăn bám mép (drawer-end, GemFactory gap #49, 21/10/2026): bảng size mở từ nút cạnh ô chọn size là ngăn cao hết màn ở mép
+  // phải trên desktop (American Tall 640px, Alo 745px), không phải hộp giữa màn. Rộng theo --gem-popup-drawer-width (mặc định
+  // 640px, không quá màn), bám mép CUỐI dòng (margin-inline: auto 0, nên dưới RTL là mép trái) và trượt vào từ đó
+  // (--gem-motion-base / --gem-ease-enter, như ngăn giỏ của framework). Chỉ là bố cục desktop: mobile vẫn takeover / sheet.
+  "@keyframes gem-popup-drawer-in { from { translate: calc(100% * var(--gem-popup-drawer-dir, 1)) 0; } }",
+  ".gem-popup-shell__dialog:dir(rtl) { --gem-popup-drawer-dir: -1; }",
+  "@media (min-width: 750px) {",
+  "  .gem-popup-shell[data-gem-popup-desktop='drawer-end'] .gem-popup-shell__dialog {",
+  "    width: min(var(--gem-popup-drawer-width, 640px), 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;",
+  "    margin-block: 0; margin-inline: auto 0; border-radius: 0;",
+  "    animation: gem-popup-drawer-in var(--gem-motion-base, 180ms) var(--gem-ease-enter, ease-out);",
+  "  }",
+  "  .gem-popup-shell[data-gem-popup-desktop='drawer-end'] .gem-popup-shell__frame { grid-template-columns: 1fr; align-content: start; min-height: 100%; }",
+  "  .gem-popup-shell[data-gem-popup-desktop='drawer-end'] .gem-popup-shell__media { max-height: 240px; }",
+  "  .gem-popup-shell[data-gem-popup-desktop='drawer-end'] .gem-popup-shell__panel { justify-content: flex-start; align-items: stretch; text-align: start; }",
+  "}",
+  // SAU rule animation và cùng độ ưu tiên (bài học ngăn giỏ 02/10/2026: đặt trước hay yếu hơn thì ngăn vẫn trượt).
+  "@media (prefers-reduced-motion: reduce) { .gem-popup-shell[data-gem-popup-desktop='drawer-end'] .gem-popup-shell__dialog { animation: none; } }",
   "@media (max-width: 749px) {",
   // Mobile: takeover is the whole screen; a sheet rises from the bottom to at most 88% of it. The image
   // sits under the text (top when media=top), capped at a third of the screen; with no image or the image
@@ -1138,6 +2500,9 @@ var GEM_POPUP_SHELL_CSS_LINES = [
   "@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; }",
+  // Ngăn trong canvas: cao như khung xem trước của fullscreen, đứng yên (không trượt mỗi lần canvas vẽ lại).
+  "  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-desktop='drawer-end'] { padding-inline: 0; }",
+  "  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-desktop='drawer-end'] .gem-popup-shell__dialog { height: 720px; max-height: none; animation: none; }",
   "}",
   "@media (max-width: 749px) {",
   "  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] { padding: 0; }",
@@ -1333,7 +2698,7 @@ var GEM_INLINE_MARK_CSS_LINES = [
   ":where(.gem-mark--alert) { color: var(--gem-color-danger, #b42318); }",
   ":where(.gem-mark--highlight.gem-mark--accent), :where(.gem-mark--highlight.gem-mark--alert) { color: var(--gem-mark-highlight-ink, #1f1d18); }",
   ".gem-mark-link { color: var(--gem-color-accent); text-decoration-line: underline; text-decoration-thickness: from-font; text-underline-offset: 0.18em; }",
-  ".gem-mark-link:hover { text-decoration-thickness: 2px; }",
+  ".gem-mark-link:hover { text-decoration-thickness: var(--gem-underline-thickness, 2px); }",
   // Bút dạ thắng màu link: chữ trên nền vàng giữ mực đậm, dù span nằm trong link hay link nằm trong span (review #740 đo màu nhấn
   // trên vàng 4,32:1 ở nền trắng, 2,47:1 trên băng tối, 1,05:1 trên băng màu nhấn).
   ".gem-mark-link.gem-mark--highlight, .gem-mark--highlight .gem-mark-link { color: var(--gem-mark-highlight-ink, #1f1d18); }"
@@ -1552,6 +2917,14 @@ function createPrimitiveCss() {
     "  cursor: not-allowed;",
     "  opacity: 0.55;",
     "}",
+    // Button shape of ONE section (GemFactory gap #69, 22/10/2026): matching a source, a section needs square, softly rounded
+    // or pill buttons whatever the preset's button radius is, and writing border-radius on .gem-button takes the button
+    // away from the preset for good (GemFactory's button_token_shadowed). `data-gem-button-shape` on the section root (or on
+    // one button) sets the radius the button already reads; with no attribute the preset decides, as before. Square and
+    // pill are shapes, so they do not scale; soft is a size, so it follows the preset's radius scale (--gem-style-radius).
+    "[data-gem-button-shape='square'] { --gem-radius-button: 0px; }",
+    "[data-gem-button-shape='soft'] { --gem-radius-button: var(--gem-radius-sm); }",
+    "[data-gem-button-shape='pill'] { --gem-radius-button: 999px; }",
     ".gem-input:disabled, .gem-select:disabled, .gem-textarea:disabled, .gem-quantity-input__button:disabled {",
     "  cursor: not-allowed;",
     "  opacity: 0.6;",
@@ -2929,8 +4302,8 @@ function createPrimitiveCss() {
 function createGemSectionRuntimeContractCss(selector = "[data-gem-section-library-id]", options = {}) {
   const background = options.backgroundVar ?? "var(--gem-color-background)";
   const surface = options.surfaceVar ?? "var(--gem-color-surface)";
-  const text = options.textVar ?? "var(--gem-color-text)";
-  const mutedText = options.mutedTextVar ?? `color-mix(in srgb, ${text} 72%, transparent)`;
+  const text2 = options.textVar ?? "var(--gem-color-text)";
+  const mutedText = options.mutedTextVar ?? `color-mix(in srgb, ${text2} 72%, transparent)`;
   const accent = options.accentVar ?? "var(--gem-color-accent)";
   const accentText = options.accentTextVar ?? "var(--gem-color-accent-text, #ffffff)";
   const border = options.borderVar ?? "var(--gem-color-border)";
@@ -2940,7 +4313,7 @@ function createGemSectionRuntimeContractCss(selector = "[data-gem-section-librar
     `${selector} {`,
     "  box-sizing: border-box;",
     `  background: ${background};`,
-    `  color: ${text};`,
+    `  color: ${text2};`,
     "}",
     `${selector} *,`,
     `${selector} *::before,`,
@@ -2999,7 +4372,7 @@ function createGemSectionRuntimeContractCss(selector = "[data-gem-section-librar
     "  border-radius: var(--gem-radius-pill, 999px);",
     "  padding: 6px 10px;",
     `  background: ${surface};`,
-    `  color: ${text};`,
+    `  color: ${text2};`,
     "  font-size: 0.8125rem;",
     "  font-weight: 700;",
     "}",
@@ -5427,6 +6800,760 @@ function bundleEngineRuntimeScript() {
 }
 
 // ../../packages/gem-framework/src/runtime.ts
+var cartDrawerPluginRegistrationLines = [
+  "  registerPlugin('cart-drawer', ({ api }) => {",
+  "    const drawers = document.querySelectorAll('[data-gem-cart-drawer], [data-gem-cart-canvas], .gem-cart-drawer');",
+  `    const cartLinks = document.querySelectorAll('[data-gem-cart-drawer-trigger], [data-gem-cart-toggle], a[href*="/cart"]');`,
+  `    const cartForms = document.querySelectorAll('form[action*="/cart/add"], form[action*="/cart"]');`,
+  "    const drawer = drawers[0];",
+  "    const setDrawerA11y = (isOpen) => {",
+  "      if (!drawer) return;",
+  "      drawer.setAttribute && drawer.setAttribute('aria-expanded', isOpen ? 'true' : 'false');",
+  "      const panel = drawer.querySelector && drawer.querySelector('[data-gem-cart-canvas-panel], .gem-cart-drawer__panel');",
+  "      if (panel && panel.setAttribute) panel.setAttribute('aria-hidden', isOpen ? 'false' : 'true');",
+  "    };",
+  "    const openDrawer = (reason, href) => {",
+  "      if (drawer && drawer.tagName === 'DETAILS') drawer.open = true;",
+  "      if (drawer && drawer.dataset) drawer.dataset.gemCartDrawerState = 'open';",
+  "      setDrawerA11y(true);",
+  "      api.emit('gem:cart:open', { source: 'gem-runtime', reason, href });",
+  "    };",
+  "    const closeDrawer = (reason) => {",
+  "      if (drawer && drawer.tagName === 'DETAILS') drawer.open = false;",
+  "      if (drawer && drawer.dataset) drawer.dataset.gemCartDrawerState = 'closed';",
+  "      setDrawerA11y(false);",
+  "      api.emit('gem:cart:close', { source: 'gem-runtime', reason });",
+  "    };",
+  "    let bound = 0;",
+  "    drawers.forEach((drawer) => {",
+  "      if (!mark(drawer, 'cart-drawer')) return;",
+  "      drawer.dataset.gemCartDrawerState = drawer.hasAttribute('open') ? 'open' : 'ready';",
+  "      setDrawerA11y(drawer.hasAttribute('open'));",
+  "      drawer.querySelectorAll('[data-gem-cart-drawer-close], [data-gem-cart-canvas-close]').forEach((control) => { if (!canListen(control)) return; control.addEventListener('click', (event) => {",
+  "        event.preventDefault && event.preventDefault();",
+  "        closeDrawer('close-control');",
+  "      }); });",
+  "      if (canListen(drawer)) drawer.addEventListener('toggle', () => { drawer.dataset.gemCartDrawerState = drawer.hasAttribute('open') ? 'open' : 'closed'; });",
+  "      bound += 1;",
+  "    });",
+  "    cartLinks.forEach((link) => {",
+  "      if (!mark(link, 'cart-link')) return;",
+  "      if (!canListen(link)) return;",
+  "      link.addEventListener('click', (event) => {",
+  "        if (drawer && (link.hasAttribute('data-gem-cart-drawer-trigger') || link.hasAttribute('data-gem-cart-toggle'))) event.preventDefault && event.preventDefault();",
+  "        openDrawer('cart-link', link.href || undefined);",
+  "      });",
+  "      bound += 1;",
+  "    });",
+  "    if (canListen(document)) document.addEventListener('keydown', (event) => { if (event.key === 'Escape' && drawer && drawer.hasAttribute('open')) closeDrawer('escape'); });",
+  "    cartForms.forEach((form) => {",
+  "      if (!mark(form, 'cart-form')) return;",
+  "      if (!canListen(form)) return;",
+  "      form.addEventListener('submit', () => api.emit('gem:cart:submit', { source: 'gem-runtime', action: form.getAttribute('action') || undefined }));",
+  "      bound += 1;",
+  "    });",
+  "    api.emit('gem:cart:ready', { source: 'gem-runtime', count: bound });",
+  "  });"
+];
+var mobileMenuPluginRegistrationLines = [
+  "  registerPlugin('mobile-menu', ({ api }) => {",
+  "    const menus = document.querySelectorAll('[data-gem-mobile-menu], details.gem-shell-header__drawer');",
+  "    let bound = 0;",
+  "    menus.forEach((menu) => {",
+  "      if (!mark(menu, 'mobile-menu')) return;",
+  "      const setMenuA11y = () => {",
+  "        menu.setAttribute && menu.setAttribute('aria-expanded', menu.open ? 'true' : 'false');",
+  "        const panel = menu.querySelector && menu.querySelector('[data-gem-mobile-menu-panel], .gem-shell-header__drawer-panel');",
+  "        if (panel && panel.setAttribute) panel.setAttribute('aria-hidden', menu.open ? 'false' : 'true');",
+  "      };",
+  "      menu.dataset.gemMenuState = menu.open ? 'open' : 'closed';",
+  "      setMenuA11y();",
+  "      if (!canListen(menu)) return;",
+  "      menu.addEventListener('toggle', () => {",
+  "        menu.dataset.gemMenuState = menu.open ? 'open' : 'closed';",
+  "        setMenuA11y();",
+  "        if (menu.open) {",
+  "          const panel = menu.querySelector && menu.querySelector('[data-gem-mobile-menu-panel], .gem-shell-header__drawer-panel');",
+  `          const firstFocusable = panel && panel.querySelector && panel.querySelector('a[href], button, select, input, textarea, summary, [tabindex]:not([tabindex="-1"])');`,
+  "          if (firstFocusable && firstFocusable.focus) firstFocusable.focus();",
+  "        }",
+  "        api.emit(menu.open ? 'gem:menu:open' : 'gem:menu:close', { source: 'gem-runtime', id: menu.id || undefined });",
+  "      });",
+  "      menu.addEventListener('keydown', (event) => {",
+  "        if (event.key !== 'Escape' || !menu.open) return;",
+  "        menu.open = false;",
+  "        menu.dataset.gemMenuState = 'closed';",
+  "        setMenuA11y();",
+  "        const summary = menu.querySelector && menu.querySelector('summary');",
+  "        if (summary && summary.focus) summary.focus();",
+  "      });",
+  "      bound += 1;",
+  "    });",
+  "    api.emit('gem:menu:ready', { source: 'gem-runtime', count: bound });",
+  "  });"
+];
+var quantityInputPluginRegistrationLines = [
+  "  registerPlugin('quantity-input', ({ api }) => {",
+  "    const controls = document.querySelectorAll('[data-gem-quantity-input], .gem-quantity-input');",
+  "    let bound = 0;",
+  "    const clamp = (value, min, max) => Math.max(min, Math.min(max, value));",
+  "    controls.forEach((control) => {",
+  "      if (!mark(control, 'quantity-input')) return;",
+  `      const input = control.querySelector && control.querySelector('input[type="number"]');`,
+  "      if (!input) return;",
+  "      const setValue = (nextValue, reason) => {",
+  "        const min = Number.isFinite(Number(input.min)) ? Number(input.min) : 0;",
+  "        const max = Number.isFinite(Number(input.max)) && input.max !== '' ? Number(input.max) : Number.MAX_SAFE_INTEGER;",
+  "        const value = clamp(Number(nextValue) || min, min, max);",
+  "        input.value = String(value);",
+  "        api.emit('gem:quantity:change', { source: 'gem-runtime', value, reason, name: input.name || undefined });",
+  "      };",
+  "      if (!canListen(control) || !canListen(input)) return;",
+  "      control.addEventListener('click', (event) => {",
+  "        const button = event.target && event.target.closest ? event.target.closest('[data-gem-quantity-change]') : null;",
+  "        if (!button) return;",
+  "        event.preventDefault && event.preventDefault();",
+  "        const delta = Number(button.getAttribute('data-gem-quantity-change') || '0');",
+  "        setValue(Number(input.value || 0) + delta, delta > 0 ? 'increase' : 'decrease');",
+  "      });",
+  "      input.addEventListener('change', () => setValue(input.value, 'input'));",
+  "      bound += 1;",
+  "    });",
+  "    api.emit('gem:quantity:ready', { source: 'gem-runtime', count: bound });",
+  "  });"
+];
+var variantSelectsPluginRegistrationLines = [
+  "  registerPlugin('variant-selects', ({ api }) => {",
+  `    const selects = document.querySelectorAll('[data-gem-variant-select], select[name="id"]');`,
+  "    let bound = 0;",
+  "    selects.forEach((select) => {",
+  "      if (!mark(select, 'variant-selects')) return;",
+  "      let hasInitialized = false;",
+  "      const update = () => {",
+  "        const option = select.options && select.options[select.selectedIndex];",
+  "        const available = !option || option.getAttribute('data-gem-variant-available') !== 'false';",
+  "        const price = option && option.getAttribute('data-gem-variant-price');",
+  "        const mediaId = option && option.getAttribute('data-gem-variant-media-id');",
+  "        const form = select.closest && select.closest('form');",
+  "        const scope = (form && form.closest && form.closest('[data-gem-section-id], .gem-section, [data-qa-surface]')) || (select.closest && select.closest('[data-gem-section-id], .gem-section, [data-qa-surface]')) || document;",
+  `        const submit = form && form.querySelector && form.querySelector('[type="submit"]');`,
+  "        const status = form && form.querySelector && form.querySelector('[data-gem-variant-status]');",
+  "        const priceOutput = scope && scope.querySelector && scope.querySelector('[data-gem-variant-price-output]');",
+  "        const availabilityOutput = scope && scope.querySelector && scope.querySelector('[data-gem-variant-availability]');",
+  "        if (form && form.dataset) form.dataset.gemSelectedVariantId = String(select.value || '');",
+  "        if (form && form.dataset && price) form.dataset.gemSelectedVariantPrice = price;",
+  "        if (form && form.dataset && mediaId) form.dataset.gemSelectedMediaId = mediaId;",
+  "        if (submit) submit.disabled = !available;",
+  "        if (submit) submit.setAttribute('aria-disabled', available ? 'false' : 'true');",
+  "        if (status) status.textContent = available ? 'Selected variant available' : 'Selected variant unavailable';",
+  "        if (hasInitialized && price && priceOutput) priceOutput.textContent = price;",
+  "        if (availabilityOutput) {",
+  "          availabilityOutput.textContent = available ? 'In stock' : 'Sold out';",
+  "          availabilityOutput.classList && availabilityOutput.classList.toggle('gem-product-main__availability--in-stock', available);",
+  "          availabilityOutput.classList && availabilityOutput.classList.toggle('gem-product-main__availability--sold-out', !available);",
+  "        }",
+  "        if (mediaId) {",
+  `          const escapedMediaId = String(mediaId).replace(/["\\\\]/g, '\\\\$&');`,
+  "          const gallery = (scope && scope.querySelector && scope.querySelector('[data-gem-media-gallery], .gem-product-media-gallery')) || document.querySelector('[data-gem-media-gallery], .gem-product-media-gallery');",
+  `          const thumb = gallery && gallery.querySelector && gallery.querySelector('[data-gem-media-id="' + escapedMediaId + '"]');`,
+  "          const mediaIndex = thumb && thumb.getAttribute && thumb.getAttribute('data-gem-media-index');",
+  "          if (thumb && typeof thumb.click === 'function') thumb.click();",
+  "          if (gallery && mediaIndex !== null && mediaIndex !== undefined) {",
+  "            gallery.dataset && (gallery.dataset.gemMediaActiveIndex = String(mediaIndex));",
+  "            gallery.querySelectorAll && gallery.querySelectorAll('[data-gem-media-thumb]').forEach((control) => {",
+  "              const isActive = control.getAttribute && control.getAttribute('data-gem-media-index') === String(mediaIndex);",
+  "              if (isActive) control.setAttribute('aria-current', 'true'); else control.removeAttribute('aria-current');",
+  "              if (control.dataset) control.dataset.gemMediaActive = isActive ? 'true' : 'false';",
+  "            });",
+  "          }",
+  "        }",
+  "        api.emit('gem:variant:change', { source: 'gem-runtime', variantId: select.value || undefined, available, price, mediaId });",
+  "        hasInitialized = true;",
+  "      };",
+  "      if (!canListen(select)) return;",
+  "      select.addEventListener('change', update);",
+  "      update();",
+  "      bound += 1;",
+  "    });",
+  "    api.emit('gem:variant:ready', { source: 'gem-runtime', count: bound });",
+  "  });"
+];
+var predictiveSearchPluginRegistrationLines = [
+  "  registerPlugin('predictive-search', ({ api }) => {",
+  `    const forms = document.querySelectorAll('[data-gem-predictive-search], [data-gem-search-canvas], form[action*="/search"], form[role="search"]');`,
+  "    const toggles = document.querySelectorAll('[data-gem-search-toggle]');",
+  "    const canvas = document.querySelector('[data-gem-search-canvas]');",
+  "    let bound = 0;",
+  "    const setCanvasState = (state, reason = 'api') => {",
+  "      if (!canvas || !canvas.dataset) return false;",
+  "      canvas.dataset.gemSearchCanvasState = state;",
+  "      canvas.setAttribute && canvas.setAttribute('aria-hidden', state === 'open' ? 'false' : 'true');",
+  "      if (state === 'open') {",
+  `        const input = canvas.querySelector && canvas.querySelector('input[type="search"], input[name="q"]');`,
+  "        if (input && input.focus) input.focus();",
+  "      }",
+  "      api.emit(state === 'open' ? 'gem:search:open' : 'gem:search:close', { source: 'gem-runtime', reason });",
+  "      return true;",
+  "    };",
+  "    forms.forEach((form) => {",
+  "      if (!mark(form, 'predictive-search')) return;",
+  `      const input = form.querySelector && form.querySelector('input[type="search"], input[name="q"]');`,
+  "      const results = form.querySelector && form.querySelector('[data-gem-predictive-search-results]');",
+  "      const setState = (state, value = '') => {",
+  "        if (form.dataset) form.dataset.gemPredictiveSearchState = state;",
+  "        if (results) {",
+  "          results.hidden = state === 'closed';",
+  "          if (results.dataset) results.dataset.gemPredictiveSearchState = state;",
+  "          results.setAttribute && results.setAttribute('aria-hidden', state === 'closed' ? 'true' : 'false');",
+  "          if (state === 'typing') results.textContent = value ? 'Search suggestions for ' + value : 'Start typing to search';",
+  "          if (state === 'empty') results.textContent = 'Start typing to search';",
+  "        }",
+  "      };",
+  "      if (results) {",
+  "        results.hidden = true;",
+  "        results.setAttribute && results.setAttribute('role', 'status');",
+  "        results.setAttribute && results.setAttribute('aria-live', 'polite');",
+  "      }",
+  "      setState('closed');",
+  "      if (canListen(input)) input.addEventListener('focus', () => { setState(input.value ? 'typing' : 'empty', input.value || ''); api.emit('gem:search:open', { source: 'gem-runtime', value: input.value || '' }); });",
+  "      const closeOnEscape = (event) => { if (event.key === 'Escape') { event.preventDefault && event.preventDefault(); event.stopPropagation && event.stopPropagation(); setState('closed'); api.emit('gem:search:close', { source: 'gem-runtime', reason: 'escape' }); } };",
+  "      if (canListen(input)) input.addEventListener('input', () => { setState(input.value ? 'typing' : 'empty', input.value || ''); api.emit('gem:search:input', { source: 'gem-runtime', value: input.value || '' }); });",
+  "      if (canListen(input)) input.addEventListener('keydown', closeOnEscape);",
+  "      if (canListen(form)) form.addEventListener('keydown', closeOnEscape);",
+  "      if (canListen(form)) form.addEventListener('submit', () => { setState('submit', input && input.value || ''); api.emit('gem:search:submit', { source: 'gem-runtime', value: input && input.value || '' }); });",
+  "      bound += 1;",
+  "    });",
+  "    if (canvas) {",
+  "      canvas.dataset && (canvas.dataset.gemSearchCanvasState = 'closed');",
+  "      canvas.setAttribute && canvas.setAttribute('aria-hidden', 'true');",
+  "      if (mark(canvas, 'search-canvas')) bound += 1;",
+  "      if (canListen(canvas)) canvas.addEventListener('keydown', (event) => { if (event.key === 'Escape') setCanvasState('closed', 'escape'); });",
+  "    }",
+  "    toggles.forEach((toggle) => {",
+  "      if (!mark(toggle, 'search-toggle')) return;",
+  "      if (!canListen(toggle)) return;",
+  "      toggle.addEventListener('click', (event) => {",
+  "        if (canvas) event.preventDefault && event.preventDefault();",
+  "        setCanvasState('open', 'toggle');",
+  "      });",
+  "      bound += 1;",
+  "    });",
+  "    api.emit('gem:search:ready', { source: 'gem-runtime', count: bound });",
+  "  });"
+];
+var localizationPluginRegistrationLines = [
+  "  registerPlugin('localization', ({ api }) => {",
+  `    const forms = document.querySelectorAll('form[action*="/localization"], form[action*="localization"], [data-gem-footer-localization], [data-gem-header-localization], .gem-navigation-shell__localization, .gem-shell-footer__localization, .gem-shell-header__localization-form');`,
+  "    let bound = 0;",
+  "    forms.forEach((form) => {",
+  "      if (!mark(form, 'localization')) return;",
+  "      form.dataset && (form.dataset.gemLocalizationState = 'ready');",
+  `      form.querySelectorAll && form.querySelectorAll('select[name="country_code"], select[name="locale_code"]').forEach((select) => {`,
+  "        if (!canListen(select)) return;",
+  "        select.addEventListener('change', () => {",
+  "          form.dataset && (form.dataset.gemLocalizationState = 'changed');",
+  "          api.emit('gem:localization:change', { source: 'gem-runtime', name: select.name || undefined, value: select.value || undefined });",
+  "        });",
+  "      });",
+  "      canListen(form) && form.addEventListener('submit', () => {",
+  "        form.dataset && (form.dataset.gemLocalizationState = 'submit');",
+  "        api.emit('gem:localization:submit', { source: 'gem-runtime' });",
+  "      });",
+  "      bound += 1;",
+  "    });",
+  "    api.emit('gem:localization:ready', { source: 'gem-runtime', count: bound });",
+  "  });"
+];
+var disclosurePluginRegistrationLines = [
+  "  registerPlugin('disclosure', ({ api }) => {",
+  "    const items = document.querySelectorAll('details[data-gem-disclosure], .gem-accordion details, .gem-tabs details, .gem-footer-shell details, [data-gem-footer-shell] details');",
+  "    let bound = 0;",
+  "    items.forEach((item) => {",
+  "      if (!mark(item, 'disclosure')) return;",
+  "      item.dataset.gemDisclosureState = item.open ? 'open' : 'closed';",
+  "      if (!canListen(item)) return;",
+  "      item.addEventListener('toggle', () => {",
+  "        item.dataset.gemDisclosureState = item.open ? 'open' : 'closed';",
+  "        api.emit(item.open ? 'gem:disclosure:open' : 'gem:disclosure:close', { source: 'gem-runtime', id: item.id || undefined });",
+  "      });",
+  "      item.addEventListener('keydown', (event) => {",
+  "        if (event.key !== 'Escape' || !item.open) return;",
+  "        event.preventDefault && event.preventDefault();",
+  "        item.open = false;",
+  "        item.dataset.gemDisclosureState = 'closed';",
+  "        const summary = item.querySelector && item.querySelector('summary');",
+  "        if (summary && summary.focus) summary.focus();",
+  "        api.emit('gem:disclosure:close', { source: 'gem-runtime', id: item.id || undefined, reason: 'escape' });",
+  "      });",
+  "      bound += 1;",
+  "    });",
+  "    api.emit('gem:disclosure:ready', { source: 'gem-runtime', count: bound });",
+  "  });"
+];
+var tabsPluginRegistrationLines = [
+  "  registerPlugin('tabs', ({ api }) => {",
+  // Ported from the Liquid theme's initTabs (gem-framework.js) so BOTH render paths honour the same
+  // contract: [data-gem-tabs] root, [data-gem-tab=key] controls, [data-gem-panel=key] panels. The
+  // headless runtime had no tabs plugin at all, while gemcapture's guidance told rebuilds to fake
+  // tabs with <details data-gem-disclosure> — which is an accordion, not tabs, and binds nothing on
+  // the Liquid side. Now the guidance names one contract and both runtimes implement it.
+  "    const roots = document.querySelectorAll('[data-gem-tabs]');",
+  "    let bound = 0;",
+  "    roots.forEach((root) => {",
+  "      if (!mark(root, 'tabs')) return;",
+  "      const tabs = Array.prototype.slice.call(root.querySelectorAll('[data-gem-tab]'));",
+  "      const panels = Array.prototype.slice.call(root.querySelectorAll('[data-gem-panel]'));",
+  "      if (!tabs.length || !panels.length) return;",
+  "      const select = (key, userInitiated) => {",
+  "        tabs.forEach((t) => t.setAttribute('aria-selected', String(t.getAttribute('data-gem-tab') === key)));",
+  "        let active = null;",
+  "        panels.forEach((p) => {",
+  "          if (p.getAttribute('data-gem-panel') === key) { p.removeAttribute('hidden'); active = p; }",
+  "          else p.setAttribute('hidden', '');",
+  "        });",
+  // Same smart-scroll guard as the Liquid implementation: switching a tab must never jump the page,
+  // and block:'nearest' is a no-op when the panel is already on screen.
+  "        if (userInitiated && active && active.getBoundingClientRect) {",
+  "          const r = active.getBoundingClientRect();",
+  "          const vh = window.innerHeight || document.documentElement.clientHeight;",
+  "          if (!(r.top < vh * 0.85 && r.bottom > vh * 0.15) && active.scrollIntoView) {",
+  "            active.scrollIntoView({ behavior: 'smooth', block: 'nearest' });",
+  "          }",
+  "        }",
+  "        api.emit('gem:tabs:change', { source: 'gem-runtime', key: key });",
+  "      };",
+  "      tabs.forEach((t) => {",
+  "        if (!canListen(t)) return;",
+  "        t.addEventListener('click', () => select(t.getAttribute('data-gem-tab'), true));",
+  "      });",
+  // Seed from aria-selected so a captured `state: \"active\"` tab opens on the correct panel.
+  "      const initial = tabs.filter((t) => t.getAttribute('aria-selected') === 'true')[0] || tabs[0];",
+  "      select(initial.getAttribute('data-gem-tab'), false);",
+  "      bound += 1;",
+  "    });",
+  "    api.emit('gem:tabs:ready', { source: 'gem-runtime', count: bound });",
+  "  });"
+];
+var mediaGalleryPluginRegistrationLines = [
+  "  registerPlugin('media-gallery', ({ api }) => {",
+  "    const galleries = document.querySelectorAll('[data-gem-media-gallery], .gem-media-gallery, .gem-product-media-gallery');",
+  "    let bound = 0;",
+  "    galleries.forEach((gallery) => {",
+  // A wrapper matched only by its class (the thumbnail-stack <section class="gem-product-media-gallery">) around a
+  // [data-gem-media-gallery] hook is not a second gallery: binding both ran every click twice and the outer one
+  // renumbered the thumbnails' data-gem-media-index by counting every <img>, the main image included.
+  "      const hooked = !!(gallery.hasAttribute && gallery.hasAttribute('data-gem-media-gallery'));",
+  "      if (!hooked && gallery.querySelector && gallery.querySelector('[data-gem-media-gallery]')) return;",
+  "      if (!mark(gallery, 'media-gallery')) return;",
+  // Main image + thumbnails (product-media-gallery.thumbnail-stack.v1): a thumbnail click puts its
+  // data-gem-media-src / -alt on [data-gem-media-main], as the section's behavior.js did. Without this the plugin
+  // only moved aria-current and the big image never changed. The markup's data-gem-media-index is kept.
+  "      const main = gallery.querySelector && gallery.querySelector('[data-gem-media-main]');",
+  "      const thumbs = main && gallery.querySelectorAll ? Array.prototype.slice.call(gallery.querySelectorAll('[data-gem-media-item]')) : [];",
+  "      if (main && thumbs.length) {",
+  "        gallery.dataset.gemMediaState = 'ready';",
+  "        const choose = (item, reason) => {",
+  "          const src = item.getAttribute('data-gem-media-src');",
+  "          const alt = item.getAttribute('data-gem-media-alt');",
+  "          if (src) { main.setAttribute('src', src); main.removeAttribute('srcset'); if (alt != null) main.setAttribute('alt', alt); }",
+  "          const index = Number(item.getAttribute('data-gem-media-index') || thumbs.indexOf(item));",
+  "          thumbs.forEach((thumb) => { const on = thumb === item; thumb.setAttribute('aria-current', String(on)); if (thumb.dataset) thumb.dataset.gemMediaActive = on ? 'true' : 'false'; });",
+  "          gallery.dataset.gemMediaActiveIndex = String(index);",
+  "          if (gallery.dispatchEvent && typeof window.CustomEvent === 'function') gallery.dispatchEvent(new window.CustomEvent('gem:media:select', { bubbles: true, detail: { index } }));",
+  "          api.emit('gem:media:change', { source: 'gem-runtime', index, galleryId: gallery.id || undefined, reason });",
+  "        };",
+  "        if (canListen(gallery)) gallery.addEventListener('click', (event) => {",
+  "          const item = event.target && event.target.closest ? event.target.closest('[data-gem-media-item]') : null;",
+  "          if (!item || !gallery.contains(item)) return;",
+  "          if (event.preventDefault) event.preventDefault();",
+  "          choose(item, 'click');",
+  "        });",
+  "        bound += 1;",
+  "        return;",
+  "      }",
+  "      const items = gallery.querySelectorAll('[data-gem-media-item], img, video, model-viewer');",
+  "      const thumbControls = gallery.querySelectorAll('[data-gem-media-thumb]');",
+  "      const controls = thumbControls.length ? thumbControls : items;",
+  "      gallery.dataset.gemMediaState = 'ready';",
+  "      items.forEach((item, index) => {",
+  "        if (!item.dataset) return;",
+  "        item.dataset.gemMediaIndex = String(index);",
+  "      });",
+  "      const activate = (target, reason = 'click') => {",
+  "        if (!target) return;",
+  "        const index = target.dataset && target.dataset.gemMediaIndex ? Number(target.dataset.gemMediaIndex) : undefined;",
+  "        if (!Number.isFinite(index)) return;",
+  "        controls.forEach((control) => {",
+  "          const isActive = control.dataset && Number(control.dataset.gemMediaIndex) === index;",
+  "          if (isActive) control.setAttribute('aria-current', 'true'); else control.removeAttribute('aria-current');",
+  "          if (control.dataset) control.dataset.gemMediaActive = isActive ? 'true' : 'false';",
+  "        });",
+  "        gallery.dataset.gemMediaActiveIndex = String(index);",
+  "        api.emit('gem:media:change', { source: 'gem-runtime', index, galleryId: gallery.id || undefined, reason });",
+  "      };",
+  `      const firstActive = gallery.querySelector('[aria-current="true"], [data-gem-media-thumb]');`,
+  "      if (firstActive) activate(firstActive, 'init');",
+  "      if (canListen(gallery)) gallery.addEventListener('click', (event) => {",
+  "        const target = event.target && event.target.closest ? event.target.closest('[data-gem-media-item], img, video, model-viewer') : null;",
+  "        if (!target) return;",
+  "        activate(target, 'click');",
+  "      });",
+  "      controls.forEach((control) => { if (!canListen(control)) return; control.addEventListener('keydown', (event) => {",
+  "        if (!['Enter', ' '].includes(event.key)) return;",
+  "        event.preventDefault && event.preventDefault();",
+  "        activate(control, 'keyboard');",
+  "      }); });",
+  "      bound += 1;",
+  "    });",
+  "    api.emit('gem:media:ready', { source: 'gem-runtime', count: bound });",
+  "  });"
+];
+var carouselPluginRegistrationLines = [
+  "  registerPlugin('carousel', ({ api }) => {",
+  "    const carousels = document.querySelectorAll('[data-gem-carousel], .gem-carousel');",
+  "    let bound = 0;",
+  "    carousels.forEach((carousel) => {",
+  "      if (!mark(carousel, 'carousel')) return;",
+  "      const viewport = carousel.querySelector && (carousel.querySelector('[data-gem-carousel-viewport]') || carousel.querySelector('.gem-carousel__viewport'));",
+  "      const slides = carousel.querySelectorAll('[data-gem-carousel-slide], .gem-carousel__slide');",
+  "      const previous = carousel.querySelector && carousel.querySelector('[data-gem-carousel-prev]');",
+  "      const next = carousel.querySelector && carousel.querySelector('[data-gem-carousel-next]');",
+  "      const slideCount = slides.length || 0;",
+  "      const currentIndex = () => {",
+  "        if (!viewport || !slideCount) return 0;",
+  "        const width = Number(viewport.clientWidth || viewport.offsetWidth || 1);",
+  "        return Math.max(0, Math.min(slideCount - 1, Math.round(Number(viewport.scrollLeft || 0) / width)));",
+  "      };",
+  "      const setIndex = (index, reason = 'api') => {",
+  "        const nextIndex = Math.max(0, Math.min(slideCount - 1, Number.isFinite(index) ? index : 0));",
+  "        carousel.dataset.gemCarouselIndex = String(nextIndex);",
+  "        carousel.dataset.gemCarouselCount = String(slideCount);",
+  "        if (viewport && viewport.scrollTo) viewport.scrollTo({ left: Number(viewport.clientWidth || viewport.offsetWidth || 0) * nextIndex, behavior: 'smooth' });",
+  "        api.emit('gem:carousel:change', { source: 'gem-runtime', id: carousel.id || undefined, index: nextIndex, count: slideCount, reason });",
+  "      };",
+  "      slides.forEach((slide, index) => { if (slide.dataset) slide.dataset.gemCarouselIndex = String(index); });",
+  "      carousel.dataset.gemCarouselState = slideCount > 1 ? 'ready' : 'single';",
+  "      carousel.dataset.gemCarouselCount = String(slideCount);",
+  "      carousel.dataset.gemCarouselIndex = String(currentIndex());",
+  "      if (canListen(previous)) previous.addEventListener('click', (event) => { event.preventDefault && event.preventDefault(); setIndex(currentIndex() - 1, 'previous'); });",
+  "      if (canListen(next)) next.addEventListener('click', (event) => { event.preventDefault && event.preventDefault(); setIndex(currentIndex() + 1, 'next'); });",
+  "      if (canListen(viewport)) viewport.addEventListener('scroll', () => { carousel.dataset.gemCarouselIndex = String(currentIndex()); }, { passive: true });",
+  "      bound += 1;",
+  "    });",
+  "    api.emit('gem:carousel:ready', { source: 'gem-runtime', count: bound });",
+  "  });"
+];
+var heroSlideshowPluginRegistrationLines = [
+  "  registerPlugin('hero-slideshow', ({ api }) => {",
+  "    const roots = document.querySelectorAll('[data-gem-hero-slideshow]');",
+  "    let bound = 0;",
+  "    roots.forEach((root) => {",
+  "      if (!mark(root, 'hero-slideshow')) return;",
+  "      const slides = Array.prototype.slice.call(root.querySelectorAll('[data-gem-hero-slide]'));",
+  "      if (slides.length < 2) return;",
+  "      const dots = Array.prototype.slice.call(root.querySelectorAll('[data-gem-hero-dot]'));",
+  "      const previous = root.querySelector && root.querySelector('[data-gem-hero-prev]');",
+  "      const next = root.querySelector && root.querySelector('[data-gem-hero-next]');",
+  "      const pause = root.querySelector && root.querySelector('[data-gem-hero-pause]');",
+  "      const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;",
+  "      const autoplay = !!(root.dataset && root.dataset.autoplay === 'true') && !reduce;",
+  "      const interval = Math.max(Number((root.dataset && root.dataset.autoplayInterval) || 6000), 4000);",
+  "      let active = 0;",
+  "      for (let i = 0; i < slides.length; i += 1) { if ((slides[i].className || '').indexOf('gem-hero-slideshow__slide--active') > -1) { active = i; break; } }",
+  "      let timer = null; let paused = false;",
+  "      const show = (index) => {",
+  "        active = (index + slides.length) % slides.length;",
+  "        slides.forEach((s, i) => { const on = i === active; if (s.classList) s.classList.toggle('gem-hero-slideshow__slide--active', on); s.hidden = !on; });",
+  // `tabindex` đi cùng `aria-selected` vì các chấm này khai `role=\"tab\"`: một tablist chỉ được
+  // chiếm MỘT điểm dừng Tab, và mũi tên mới là thứ chạy giữa các tab (xử lý ngay dưới).
+  "        dots.forEach((d, i) => { const on = i === active; if (d.classList) d.classList.toggle('gem-hero-slideshow__dot--active', on); if (d.setAttribute) { d.setAttribute('aria-selected', String(on)); d.setAttribute('tabindex', on ? '0' : '-1'); } });",
+  "        api.emit('gem:hero-slideshow:change', { source: 'gem-runtime', id: root.id || undefined, index: active, count: slides.length });",
+  "      };",
+  "      const stop = () => { if (timer) { window.clearInterval(timer); timer = null; } };",
+  "      const start = () => { stop(); if (autoplay && !paused) timer = window.setInterval(() => { show(active + 1); }, interval); };",
+  "      if (canListen(previous)) previous.addEventListener('click', (e) => { if (e.preventDefault) e.preventDefault(); show(active - 1); start(); });",
+  "      if (canListen(next)) next.addEventListener('click', (e) => { if (e.preventDefault) e.preventDefault(); show(active + 1); start(); });",
+  "      dots.forEach((d, i) => { if (canListen(d)) d.addEventListener('click', () => { show(Number((d.dataset && d.dataset.slideIndex) || i)); start(); }); });",
+  "      const focusDot = (i) => { const n = dots.length; if (!n) return; const k = ((i % n) + n) % n; show(k); start(); if (dots[k].focus) dots[k].focus(); };",
+  "      dots.forEach((d, i) => { if (canListen(d)) d.addEventListener('keydown', (e) => {",
+  "        const k = e.key;",
+  "        if (k === 'ArrowRight' || k === 'ArrowDown') { if (e.preventDefault) e.preventDefault(); focusDot(i + 1); }",
+  "        else if (k === 'ArrowLeft' || k === 'ArrowUp') { if (e.preventDefault) e.preventDefault(); focusDot(i - 1); }",
+  "        else if (k === 'Home') { if (e.preventDefault) e.preventDefault(); focusDot(0); }",
+  "        else if (k === 'End') { if (e.preventDefault) e.preventDefault(); focusDot(dots.length - 1); }",
+  "      }); });",
+  "      // The visible label follows the state like the section's own behavior did: the button's own text while playing",
+  "      // (kept, so a translated label survives), data-gem-hero-play-label (or 'Play') while paused. Only a text-only button.",
+  "      const pauseText = pause && pause.childElementCount === 0 ? pause.textContent : null;",
+  "      const playText = (pause && pause.getAttribute && pause.getAttribute('data-gem-hero-play-label')) || 'Play';",
+  "      if (canListen(pause)) pause.addEventListener('click', () => { paused = !paused; if (pause.setAttribute) pause.setAttribute('aria-pressed', String(paused)); if (pauseText !== null) pause.textContent = paused ? playText : pauseText; start(); });",
+  "      show(active); start(); bound += 1;",
+  "    });",
+  "    api.emit('gem:hero-slideshow:ready', { source: 'gem-runtime', count: bound });",
+  "  });"
+];
+var legacyQuickViewLines = [
+  `    const triggers = document.querySelectorAll('[data-gem-quick-view], [data-gem-action="quick-view"]');`,
+  `    const surface = document.querySelector('[data-gem-quick-view-surface], .gem-quick-view, .gem-modal[data-gem-component="quick-view"]');`,
+  "    let bound = 0;",
+  "    const close = (reason = 'close-control') => {",
+  "      if (surface) {",
+  "        surface.dataset.gemQuickViewState = 'closed';",
+  "        surface.removeAttribute && surface.removeAttribute('open');",
+  "        surface.setAttribute && surface.setAttribute('aria-hidden', 'true');",
+  "      }",
+  "      api.emit('gem:quick-view:close', { source: 'gem-runtime', reason });",
+  "    };",
+  "    const openSurface = (detail) => {",
+  "      if (surface) {",
+  "        surface.dataset.gemQuickViewState = 'open';",
+  "        surface.dataset.gemProductHandle = detail.productHandle || '';",
+  "        surface.dataset.gemProductUrl = detail.productUrl || '';",
+  "        surface.setAttribute && surface.setAttribute('open', '');",
+  "        surface.setAttribute && surface.setAttribute('aria-hidden', 'false');",
+  "        surface.setAttribute && surface.setAttribute('role', 'dialog');",
+  "        surface.setAttribute && surface.setAttribute('aria-modal', 'true');",
+  "        const content = surface.querySelector && surface.querySelector('[data-gem-quick-view-content]');",
+  "        if (content && content.textContent !== undefined) content.textContent = 'Quick view for ' + (detail.productHandle || 'product');",
+  "        else if (surface.textContent !== undefined) surface.textContent = 'Quick view for ' + (detail.productHandle || 'product');",
+  "        const closeButton = surface.querySelector && surface.querySelector('[data-gem-quick-view-close]');",
+  "        if (closeButton && closeButton.focus) closeButton.focus();",
+  "      }",
+  "      api.emit('gem:quick-view:open', { source: 'gem-runtime', ...detail, hasSurface: Boolean(surface) });",
+  "    };",
+  "    triggers.forEach((trigger) => {",
+  "      if (!mark(trigger, 'quick-view')) return;",
+  "      if (!canListen(trigger)) return;",
+  "      trigger.addEventListener('click', (event) => {",
+  "        const productUrl = trigger.getAttribute && (trigger.getAttribute('data-gem-product-url') || trigger.getAttribute('href'));",
+  "        const productHandle = trigger.getAttribute && trigger.getAttribute('data-gem-product-handle');",
+  "        if (!productUrl && !productHandle) return;",
+  "        event.preventDefault && event.preventDefault();",
+  "        openSurface({ productUrl, productHandle });",
+  "      });",
+  "      bound += 1;",
+  "    });",
+  "    if (surface && mark(surface, 'quick-view-surface')) {",
+  "      surface.dataset.gemQuickViewState = 'closed';",
+  "      surface.setAttribute && surface.setAttribute('aria-hidden', 'true');",
+  "      if (canListen(surface)) surface.addEventListener('click', (event) => {",
+  "        const target = event.target;",
+  "        if (target && target.closest && target.closest('[data-gem-quick-view-close]')) close('close-control');",
+  "      });",
+  "      if (canListen(surface)) surface.addEventListener('keydown', (event) => { if (event.key === 'Escape') close('escape'); });",
+  "    }",
+  // A mount on one late trigger (gem-runtime.js binds a section added after boot on its own) finds no surface: it keeps the
+  // page's api.quickView.
+  "    if (surface || !api.quickView) api.quickView = { open: (detail = {}) => openSurface({ ...detail }), close };"
+];
+var runtimeChunks = gemMotionChunks({
+  hook: '[data-gem-quick-view], [data-gem-action="quick-view"]',
+  lines: legacyQuickViewLines,
+  readyDetail: "count: bound + count, hasSurface: Boolean(surface)"
+});
+var promoPopupPluginRegistrationLines = [
+  "  registerPlugin('promo-popup', ({ api }) => {",
+  // Only the explicit hook opts in. Every promo-popup section carries the archetype class .gem-promo-popup, and
+  // binding by class took over variants that run their own behavior.js (GemFactory gap #16, 03/10/2026).
+  // A section that has the hook AND its own behavior.js (promo-popup.email-capture.v1) renders the plugin's bound
+  // mark, data-gem-bound-promo-popup, so mark() below skips it (gem-framework 0.8.3).
+  "    const popups = document.querySelectorAll('[data-gem-promo-popup]');",
+  "    let bound = 0;",
+  "    const shown = [];",
+  "    const storagePrefix = 'gem:promo-popup-dismissed:';",
+  "    const now = () => Date.now ? Date.now() : new Date().getTime();",
+  // ONE storage key, two meanings in the wild (gem-framework 0.8.0). gemsite's port stores WHEN the shopper
+  // dismissed; runtimes up to 0.7 stored when the dismissal ENDS. Read both: a value in the future can only be an
+  // end, so it holds until then (and is rewritten once as a dismissal time); a value in the past is a dismissal time and
+  // the popup's own window applies. Written from now on: the dismissal time (gemsite's meaning), which also lets a
+  // seller who shortens the window shorten it for past dismissals. An end written by 0.7 that has already passed
+  // reads as a dismissal time: that popup stays away one more window at most, never less than the shopper asked.
+  "    const readDismissal = (key) => {",
+  "      try { const value = Number(target.localStorage && target.localStorage.getItem(storagePrefix + key) || '0'); return Number.isFinite(value) && value > 0 ? value : 0; }",
+  "      catch { return 0; }",
+  "    };",
+  "    const writeDismissedAt = (key, timestamp) => {",
+  "      try { if (target.localStorage) target.localStorage.setItem(storagePrefix + key, String(timestamp)); }",
+  "      catch { /* storage can be unavailable in private contexts */ }",
+  "    };",
+  "    const isDismissed = (key, windowMs) => {",
+  "      const stored = readDismissal(key);",
+  "      if (!stored) return false;",
+  "      const at = now();",
+  // Converted ONCE: only when the end minus this window is already past (it is then the dismissal time). An end
+  // further out than one window (the 0.7 window was longer) is left as it is and holds until it passes.
+  "      if (stored > at) { if (stored - windowMs <= at) writeDismissedAt(key, stored - windowMs); return true; }",
+  "      return at - stored < windowMs;",
+  "    };",
+  "    popups.forEach((popup, index) => {",
+  "      if (!mark(popup, 'promo-popup')) return;",
+  "      const key = popup.id || popup.getAttribute && popup.getAttribute('data-gem-section-library-id') || String(index);",
+  "      const delaySeconds = Number(popup.getAttribute && (popup.getAttribute('data-gem-promo-delay') || '0'));",
+  "      const frequencyDays = Number(popup.getAttribute && (popup.getAttribute('data-gem-promo-frequency-days') || '7'));",
+  "      const windowMs = (Number.isFinite(frequencyDays) ? Math.max(1, frequencyDays) : 7) * 86400000;",
+  "      const dialog = popup.querySelector && popup.querySelector('[data-gem-promo-popup-dialog]');",
+  "      const overlay = popup.querySelector && popup.querySelector('[data-gem-promo-popup-overlay]');",
+  "      const show = (reason) => {",
+  "        popup.hidden = false;",
+  "        if (dialog) dialog.hidden = false;",
+  "        if (overlay) overlay.hidden = false;",
+  "        popup.dataset.gemPromoPopupState = 'open';",
+  "        api.emit('gem:promo-popup:open', { source: 'gem-runtime', id: popup.id || undefined, reason });",
+  "      };",
+  "      const open = (reason = 'timer') => {",
+  "        if (isDismissed(key, windowMs)) { popup.dataset.gemPromoPopupState = 'dismissed'; return false; }",
+  "        show(reason);",
+  "        return true;",
+  "      };",
+  "      const close = (reason = 'dismiss') => {",
+  "        writeDismissedAt(key, now());",
+  "        if (dialog) dialog.hidden = true;",
+  "        if (overlay) overlay.hidden = true;",
+  "        popup.dataset.gemPromoPopupState = 'closed';",
+  "        api.emit('gem:promo-popup:close', { source: 'gem-runtime', id: popup.id || undefined, reason });",
+  "      };",
+  "      popup.querySelectorAll && popup.querySelectorAll('[data-gem-promo-popup-dismiss]').forEach((button) => {",
+  "        if (!canListen(button)) return;",
+  "        button.addEventListener('click', (event) => { event.preventDefault && event.preventDefault(); close('dismiss'); });",
+  "      });",
+  "      if (canListen(overlay)) overlay.addEventListener('click', () => close('overlay'));",
+  "      popup.dataset.gemPromoPopupState = 'ready';",
+  "      const delay = Math.max(0, Number.isFinite(delaySeconds) ? delaySeconds : 0) * 1000;",
+  // WHEN it opens, gemsite's contract (components/behaviors/promoPopup.js): data-gem-promo-trigger = "delay"
+  // (default, and any unknown value) | "exit_intent" (the pointer leaves through the top 10px of the window; a
+  // touch screen has no pointer to leave with, so it falls back to the delay) | "scroll" (the shopper has scrolled
+  // data-gem-promo-scroll-percent of the page, 10 to 90, default 50; a page that still cannot scroll at the delay
+  // opens then). It opens once per page view, whichever fires first. data-gem-promo-armed says which one is live.
+  // The delay keeps the runtime's default of 0 seconds (gemsite's port defaults to 6).
+  "      const trigger = String(popup.getAttribute && popup.getAttribute('data-gem-promo-trigger') || 'delay').trim();",
+  "      const rawPercent = String(popup.getAttribute && popup.getAttribute('data-gem-promo-scroll-percent') || '').trim();",
+  "      const parsedPercent = rawPercent ? Number(rawPercent) : NaN;",
+  "      const scrollPercent = Number.isFinite(parsedPercent) ? Math.min(90, Math.max(10, parsedPercent)) : 50;",
+  "      const canHover = () => { try { return Boolean(target.matchMedia && target.matchMedia('(hover: hover) and (pointer: fine)').matches); } catch { return false; } };",
+  "      const armed = trigger === 'exit_intent' && canHover() ? 'exit_intent' : trigger === 'scroll' ? 'scroll' : 'delay';",
+  "      if (popup.setAttribute) popup.setAttribute('data-gem-promo-armed', armed);",
+  "      let opened = false;",
+  "      const disarm = [];",
+  "      const openOnce = (reason) => { if (opened) return; opened = true; disarm.splice(0).forEach((off) => off()); open(reason); };",
+  // An explicit open (api.promoPopup.open) counts as THE open of this page view: it disarms the pending trigger, so the
+  // delay or exit intent does not show the popup a second time (code review of #675), and it does nothing on a popup
+  // that is already open.
+  "      shown.push((reason) => { opened = true; disarm.splice(0).forEach((off) => off()); if (popup.dataset.gemPromoPopupState !== 'open') show(reason); });",
+  "      if (armed === 'exit_intent') {",
+  "        const onMouseOut = (event) => { if (event.relatedTarget || event.clientY >= 10) return; openOnce('exit_intent'); };",
+  "        if (canListen(document)) {",
+  "          document.addEventListener('mouseout', onMouseOut);",
+  "          disarm.push(() => document.removeEventListener && document.removeEventListener('mouseout', onMouseOut));",
+  "        }",
+  "      } else if (armed === 'scroll') {",
+  "        const room = () => Number(document.documentElement && document.documentElement.scrollHeight || 0) - Number(target.innerHeight || 0);",
+  "        const check = () => { const r = room(); if (r > 0 && (Number(target.scrollY || target.pageYOffset || 0) / r) * 100 >= scrollPercent) openOnce('scroll'); };",
+  "        let ticking = false;",
+  "        const onScroll = () => {",
+  "          if (ticking) return;",
+  "          ticking = true;",
+  "          const frame = target.requestAnimationFrame ? (fn) => target.requestAnimationFrame(fn) : (fn) => target.setTimeout && target.setTimeout(fn, 16);",
+  "          frame(() => { ticking = false; check(); });",
+  "        };",
+  "        if (canListen(target)) {",
+  "          target.addEventListener('scroll', onScroll, { passive: true });",
+  "          target.addEventListener('resize', check);",
+  "          target.addEventListener('load', check);",
+  "          disarm.push(() => { if (!target.removeEventListener) return; target.removeEventListener('scroll', onScroll); target.removeEventListener('resize', check); target.removeEventListener('load', check); });",
+  "        }",
+  "        if (target.setTimeout) {",
+  "          const fallback = target.setTimeout(() => { if (room() <= 0) openOnce('timer'); }, delay);",
+  "          disarm.push(() => target.clearTimeout && target.clearTimeout(fallback));",
+  "        }",
+  "        check();",
+  "      } else {",
+  "        target.setTimeout ? target.setTimeout(() => openOnce('timer'), delay) : openOnce('timer');",
+  "      }",
+  "      bound += 1;",
+  "    });",
+  // The popups THIS plugin bound, never every [data-gem-promo-popup]: one a section's own behavior.js drives carries the
+  // bound mark already (email-capture renders data-gem-bound-promo-popup="section") and is not the plugin's to open. An
+  // explicit open (a teaser, a test) shows the dialog itself, not only the root, and ignores the dismissal window,
+  // which is about opening on its own. Before 0.8.3 it unhid the root only, so the dialog stayed hidden.
+  "    api.promoPopup = { open: () => shown.forEach((show) => show('api')) };",
+  "    api.emit('gem:promo-popup:ready', { source: 'gem-runtime', count: bound });",
+  "  });"
+];
+var stickyAtcPluginRegistrationLines = [
+  "  registerPlugin('sticky-atc', ({ api }) => {",
+  "    const bars = document.querySelectorAll('[data-gem-sticky-atc], .gem-sticky-atc');",
+  "    let bound = 0;",
+  "    const setState = (bar, state) => {",
+  "      if (!bar || !bar.dataset) return;",
+  "      if (bar.dataset.gemStickyAtcState === state) return;",
+  "      bar.dataset.gemStickyAtcState = state;",
+  "      api.emit(state === 'visible' ? 'gem:sticky-atc:show' : 'gem:sticky-atc:hide', { source: 'gem-runtime', id: bar.id || undefined });",
+  "    };",
+  "    bars.forEach((bar) => {",
+  "      if (!mark(bar, 'sticky-atc')) return;",
+  // Two attribute names (gem-framework 0.8.0), each with its own default. data-gem-sticky-threshold is the
+  // runtime's (default 240). data-gem-sticky-atc-threshold is gemsite's (StickyAtcCompactBar.tsx): when the bar
+  // carries it, gemsite's rule decides: that number, else the --gem-sticky-atc-threshold CSS variable, else 360.
+  // A bar carrying both follows gemsite's attribute.
+  "      const cssThreshold = () => { try { return target.getComputedStyle ? Number(target.getComputedStyle(bar).getPropertyValue('--gem-sticky-atc-threshold')) : 0; } catch { return 0; } };",
+  "      const threshold = bar.hasAttribute && bar.hasAttribute('data-gem-sticky-atc-threshold')",
+  "        ? (Number(bar.getAttribute('data-gem-sticky-atc-threshold')) || cssThreshold() || 360)",
+  "        : Number(bar.getAttribute && (bar.getAttribute('data-gem-sticky-threshold') || '240'));",
+  "      const update = () => {",
+  "        const scrollY = Number(target.scrollY || target.pageYOffset || 0);",
+  "        setState(bar, scrollY >= threshold ? 'visible' : 'hidden');",
+  "      };",
+  "      update();",
+  "      if (canListen(target)) target.addEventListener('scroll', update, { passive: true });",
+  // The price follows the variant <select> (each <option> carries its own data-gem-variant-price), as the section's
+  // behavior.js did: otherwise the bar shows the first variant's price whatever the shopper picked.
+  "      const priceEl = bar.querySelector && bar.querySelector('[data-gem-sticky-atc-price]');",
+  "      const select = bar.querySelector && bar.querySelector('select');",
+  "      const syncPrice = () => { if (!priceEl || !select) return; const opt = select.options && select.selectedIndex > -1 ? select.options[select.selectedIndex] : null; const price = opt && opt.getAttribute && opt.getAttribute('data-gem-variant-price'); if (price) priceEl.textContent = price; };",
+  "      if (canListen(select)) select.addEventListener('change', syncPrice);",
+  "      syncPrice();",
+  // A form WITHOUT an action (the headless bar) has nowhere to post: the plugin adds to cart by dispatching
+  // gem:cart:add with the SELECTED variant (the button's data-gem-variant-id is only the first one), which the
+  // storefront's cart bridge consumes. A form WITH an action (a Liquid /cart/add form) is left to the browser.
+  "      const form = bar.querySelector && bar.querySelector('form');",
+  "      if (canListen(form)) form.addEventListener('submit', (event) => {",
+  "        if (!(form.hasAttribute && form.hasAttribute('action'))) {",
+  "          if (event && event.preventDefault) event.preventDefault();",
+  "          const choice = form.querySelector && form.querySelector('select');",
+  "          const trigger = bar.querySelector && bar.querySelector('[data-gem-variant-id]');",
+  "          const variantId = (choice && choice.value) || (trigger && trigger.getAttribute('data-gem-variant-id')) || undefined;",
+  "          if (bar.dispatchEvent && typeof window.CustomEvent === 'function') bar.dispatchEvent(new window.CustomEvent('gem:cart:add', { bubbles: true, detail: { variantId, quantity: 1 } }));",
+  "        }",
+  "        api.emit('gem:sticky-atc:submit', { source: 'gem-runtime', id: bar.id || undefined });",
+  "      });",
+  "      bound += 1;",
+  "    });",
+  "    api.emit('gem:sticky-atc:ready', { source: 'gem-runtime', count: bound });",
+  "  });"
+];
+var beforeAfterPluginRegistrationLines = [
+  "  registerPlugin('before_after', ({ api }) => {",
+  "    const frames = document.querySelectorAll('[data-gem-before-after-frame], .gem-before-after__frame');",
+  "    let bound = 0;",
+  "    const clamp = (value) => Math.max(0, Math.min(100, Number.isFinite(value) ? value : 50));",
+  "    frames.forEach((frame) => {",
+  "      if (!mark(frame, 'before_after')) return;",
+  `      const range = frame.querySelector && frame.querySelector('[data-gem-before-after-range], input[type="range"]');`,
+  "      const setPosition = (value, reason = 'init') => {",
+  "        const position = clamp(Number(value));",
+  "        if (frame.style && frame.style.setProperty) frame.style.setProperty('--gem-before-after-position', position + '%');",
+  "        frame.dataset.gemBeforeAfterPosition = String(position);",
+  "        if (range && range.value !== undefined) range.value = String(position);",
+  "        api.emit('gem:before-after:change', { source: 'gem-runtime', position, reason, id: frame.id || undefined });",
+  "      };",
+  "      const initial = range && range.value !== undefined ? range.value : frame.getAttribute && frame.getAttribute('data-gem-before-after-position');",
+  "      setPosition(initial || 50);",
+  "      if (canListen(range)) range.addEventListener('input', () => setPosition(range.value, 'input'));",
+  "      bound += 1;",
+  "    });",
+  "    api.emit('gem:before-after:ready', { source: 'gem-runtime', count: bound });",
+  "  });"
+];
 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;",
   "  const countdownEnd = (value) => {",
@@ -5612,6 +7739,141 @@ var countdownPluginRegistrationLines = [
   "    api.emit('gem:countdown:ready', { source: 'gem-runtime', count: bound });",
   "  });"
 ];
+var revealOnScrollPluginRegistrationLines = [
+  "  registerPlugin('reveal-on-scroll', ({ api }) => {",
+  "    const nodes = document.querySelectorAll('[data-gem-reveal], .gem-reveal');",
+  "    let bound = 0;",
+  "    const reveal = (node) => { node.dataset.gemRevealState = 'in'; };",
+  "    // Reduced motion and no IntersectionObserver land on the same answer: show everything now (from gemsite revealOnScroll.js).",
+  "    const reduce = typeof target.matchMedia === 'function' && target.matchMedia('(prefers-reduced-motion: reduce)').matches;",
+  "    if (reduce || !target.IntersectionObserver) { nodes.forEach(reveal); api.emit('gem:reveal:ready', { source: 'gem-runtime', count: 0 }); return; }",
+  "    // Above the fold the browser has already painted the section: writing 'ready' would blink it out and back in.",
+  '    // `none` and `default` are the knob\'s "apply nothing" values; the attribute is still written, so skip them here.',
+  "    const off = (node) => { const v = node.getAttribute ? node.getAttribute('data-gem-reveal') : null; return v === 'none' || v === 'default'; };",
+  "    const inViewport = (node) => { if (!node.getBoundingClientRect) return true; const r = node.getBoundingClientRect(); const h = target.innerHeight || (document.documentElement && document.documentElement.clientHeight) || 0; return r.top < h && r.bottom > 0; };",
+  "    const observer = new target.IntersectionObserver((entries, obs) => {",
+  "      entries.forEach((entry) => {",
+  "        if (!entry.isIntersecting) return;",
+  "        reveal(entry.target);",
+  "        obs.unobserve(entry.target);",
+  "        api.emit('gem:reveal:in', { source: 'gem-runtime', id: entry.target.id || undefined });",
+  "      });",
+  "    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });",
+  "    nodes.forEach((node) => {",
+  "      if (!mark(node, 'reveal-on-scroll')) return;",
+  "      if (off(node) || inViewport(node)) { reveal(node); bound += 1; return; }",
+  "      if (!node.dataset.gemRevealState) node.dataset.gemRevealState = 'ready';",
+  "      observer.observe(node);",
+  "      bound += 1;",
+  "    });",
+  "    api.emit('gem:reveal:ready', { source: 'gem-runtime', count: bound });",
+  "  });"
+];
+var imgInPluginRegistrationLines = [
+  "  registerPlugin('img-in', ({ api }) => {",
+  "    const STATE = 'data-gem-img-in-state';",
+  "    const BOUND = 'data-gem-bound-img-in';",
+  "    const reduce = typeof target.matchMedia === 'function' && target.matchMedia('(prefers-reduced-motion: reduce)').matches;",
+  "    const style = (img) => (typeof target.getComputedStyle === 'function' ? target.getComputedStyle(img) : null);",
+  "    const owned = (s) => Boolean(s && ((s.opacity && s.opacity !== '1') || (s.filter && s.filter !== 'none') || (s.animationName && s.animationName !== 'none')));",
+  "    const overridden = (s) => Boolean(s && ((s.opacity && s.opacity !== '0.6') || (s.filter && s.filter.indexOf('blur') === -1)));",
+  "    const settle = (event) => {",
+  "      const img = event.target;",
+  "      if (!img || img.tagName !== 'IMG' || !img.hasAttribute(BOUND)) return;",
+  "      const state = img.getAttribute(STATE);",
+  "      if (event.type === 'load' || event.type === 'error') {",
+  "        if (state !== 'loading') return;",
+  "        if (event.type === 'load' && !reduce && !overridden(style(img))) img.setAttribute(STATE, 'in');",
+  "        else img.removeAttribute(STATE);",
+  "        return;",
+  "      }",
+  "      if (state === 'in' && event.animationName === 'gem-img-in') img.removeAttribute(STATE);",
+  "    };",
+  "    ['load', 'error', 'animationend', 'animationcancel'].forEach((type) => document.addEventListener(type, settle, true));",
+  "    const candidates = [];",
+  "    document.querySelectorAll('img').forEach((img) => {",
+  "      if (!img.closest('[data-gem-img-in]')) return;",
+  "      if (img.complete) { if (!img.hasAttribute(BOUND)) img.removeAttribute(STATE); return; }",
+  "      if (mark(img, 'img-in')) candidates.push(img);",
+  "    });",
+  "    const own = candidates.map((img) => owned(style(img)));",
+  "    let bound = 0;",
+  "    candidates.forEach((img, i) => { if (own[i]) return; img.setAttribute(STATE, 'loading'); bound += 1; });",
+  "    api.emit('gem:img-in:ready', { source: 'gem-runtime', count: bound });",
+  "  });"
+];
+var recentlyViewedPluginRegistrationLines = [
+  "  registerPlugin('recently-viewed', ({ api }) => {",
+  "    const storageKey = 'gem:recently-viewed-products';",
+  "    const readItems = () => {",
+  "      try { return JSON.parse(target.localStorage && target.localStorage.getItem(storageKey) || '[]'); }",
+  "      catch { return []; }",
+  "    };",
+  "    const writeItems = (items) => {",
+  "      try { if (target.localStorage) target.localStorage.setItem(storageKey, JSON.stringify(items.slice(0, 12))); }",
+  "      catch { /* storage can be unavailable in private contexts */ }",
+  "    };",
+  `    const escapeHtml = (value) => String(value || '').replace(/[&<>'"]/g, (char) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' }[char]));`,
+  "    const renderItem = (item) => {",
+  "      const url = item && item.url ? String(item.url) : '#';",
+  "      const label = item && (item.title || item.handle || item.url) ? String(item.title || item.handle || item.url) : 'Recently viewed product';",
+  `      return '<a class="gem-card gem-recently-viewed__item" href="' + escapeHtml(url) + '"><strong>' + escapeHtml(label) + '</strong></a>';`,
+  "    };",
+  "    const current = document.querySelector('[data-gem-current-product], [data-gem-product-handle]');",
+  "    if (current) {",
+  "      const handle = current.getAttribute && current.getAttribute('data-gem-product-handle');",
+  "      const url = current.getAttribute && (current.getAttribute('data-gem-product-url') || current.getAttribute('href'));",
+  "      const title = current.getAttribute && current.getAttribute('data-gem-product-title');",
+  "      if (handle || url) {",
+  "        const nextItem = { handle, url, title, recordedAt: new Date().toISOString() };",
+  "        const items = [nextItem, ...readItems().filter((item) => item && item.handle !== handle && item.url !== url)];",
+  "        writeItems(items);",
+  "        api.emit('gem:recently-viewed:record', { source: 'gem-runtime', handle, url });",
+  "      }",
+  "    }",
+  "    const rails = document.querySelectorAll('[data-gem-recently-viewed], .gem-recently-viewed');",
+  "    let bound = 0;",
+  "    rails.forEach((rail) => {",
+  "      if (!mark(rail, 'recently-viewed')) return;",
+  "      const limit = Number(rail.getAttribute && (rail.getAttribute('data-gem-recently-viewed-limit') || '4'));",
+  "      const items = readItems().slice(0, Number.isFinite(limit) ? limit : 4);",
+  "      const list = rail.querySelector && (rail.querySelector('[data-gem-recently-viewed-list]') || rail);",
+  "      const empty = rail.querySelector && rail.querySelector('[data-gem-recently-viewed-empty]');",
+  "      rail.dataset.gemRecentlyViewedCount = String(items.length);",
+  "      if (items.length > 0) {",
+  "        rail.dataset.gemRecentlyViewedState = 'ready';",
+  "        if (list) {",
+  "          list.hidden = false;",
+  "          if (list.dataset) list.dataset.gemRecentlyViewedCount = String(items.length);",
+  "          if ('innerHTML' in list) list.innerHTML = items.map(renderItem).join('');",
+  "          else if ('textContent' in list) list.textContent = items.map((item) => item && (item.title || item.handle || item.url) || 'Recently viewed product').join(', ');",
+  "        }",
+  "        if (empty) empty.hidden = true;",
+  "      } else {",
+  "        rail.dataset.gemRecentlyViewedState = 'empty';",
+  "        if (empty) empty.hidden = false;",
+  "      }",
+  "      bound += 1;",
+  "    });",
+  "    api.recentlyViewed = { list: readItems };",
+  "    api.emit('gem:recently-viewed:ready', { source: 'gem-runtime', count: bound });",
+  "  });"
+];
+var runtimeSlotLoaderPluginRegistrationLines = [
+  "  registerPlugin('runtime-slot-loader', ({ api }) => {",
+  "    const slots = document.querySelectorAll('[data-gem-runtime-slot], [data-gem-footer-block-builder], .gem-navigation-shell__layout');",
+  "    let bound = 0;",
+  "    slots.forEach((slot, index) => {",
+  "      if (!mark(slot, 'runtime-slot-loader')) return;",
+  "      if (slot.dataset) {",
+  "        slot.dataset.gemRuntimeSlotState = 'ready';",
+  "        if (!slot.dataset.gemRuntimeSlotIndex) slot.dataset.gemRuntimeSlotIndex = String(index);",
+  "      }",
+  "      bound += 1;",
+  "    });",
+  "    api.emit('gem:slot:ready', { source: 'gem-runtime', count: bound });",
+  "  });"
+];
 var offerEnginePluginRegistrationLines = [
   "  registerPlugin('offer-engine', ({ api }) => {",
   "    " + offerEngineRuntimeScript(),
@@ -5628,6 +7890,58 @@ var bundlePluginRegistrationLines = [
   "    " + bundleEngineRuntimeScript(),
   "  });"
 ];
+var sizeGuidePluginRegistrationLines = [
+  "  registerPlugin('size-guide', ({ api }) => {",
+  "    const page = document.documentElement && typeof document.documentElement.querySelectorAll === 'function' ? document.documentElement : document;",
+  "    const guides = Array.prototype.slice.call(page.querySelectorAll('[data-gem-size-guide]'));",
+  "    const opens = (target) => guides.some((guide) => !target || guide.getAttribute('data-gem-size-guide') === target || guide.id === target);",
+  "    let bound = 0;",
+  "    document.querySelectorAll('[data-gem-size-guide-trigger]').forEach((trigger) => {",
+  "      const target = trigger.getAttribute('data-gem-size-guide-trigger') || '';",
+  "      if (!opens(target)) { trigger.hidden = true; return; }",
+  "      if (!mark(trigger, 'size-guide')) return;",
+  "      trigger.hidden = false;",
+  "      if (!canListen(trigger)) return;",
+  "      trigger.addEventListener('click', (event) => {",
+  "        event.preventDefault && event.preventDefault();",
+  "        const holder = trigger.closest ? trigger.closest('[data-product-id]') : null;",
+  "        const detail = { source: 'gem-runtime', sectionId: target || null, productId: holder ? holder.getAttribute('data-product-id') : null };",
+  "        if (typeof window.CustomEvent === 'function') window.dispatchEvent(new window.CustomEvent('gem:size-guide:open', { detail }));",
+  "        api.emit('gem:size-guide:open', detail);",
+  "      });",
+  "      bound += 1;",
+  "    });",
+  "    api.emit('gem:size-guide:ready', { source: 'gem-runtime', count: bound, guides: guides.length });",
+  "  });"
+];
+var runtimePluginSourceLines = [
+  ["cart-drawer", cartDrawerPluginRegistrationLines],
+  ["mobile-menu", mobileMenuPluginRegistrationLines],
+  ["quantity-input", quantityInputPluginRegistrationLines],
+  ["variant-selects", variantSelectsPluginRegistrationLines],
+  ["predictive-search", predictiveSearchPluginRegistrationLines],
+  ["localization", localizationPluginRegistrationLines],
+  ["disclosure", disclosurePluginRegistrationLines],
+  ["tabs", tabsPluginRegistrationLines],
+  ["media-gallery", mediaGalleryPluginRegistrationLines],
+  ["carousel", carouselPluginRegistrationLines],
+  ["hero-slideshow", heroSlideshowPluginRegistrationLines],
+  ["quick-view", runtimeChunks["quick-view"].body],
+  ["promo-popup", promoPopupPluginRegistrationLines],
+  ["sticky-atc", stickyAtcPluginRegistrationLines],
+  ["before_after", beforeAfterPluginRegistrationLines],
+  ["countdown", countdownPluginRegistrationLines],
+  ["reveal-on-scroll", revealOnScrollPluginRegistrationLines],
+  ["img-in", imgInPluginRegistrationLines],
+  ["recently-viewed", recentlyViewedPluginRegistrationLines],
+  ["runtime-slot-loader", runtimeSlotLoaderPluginRegistrationLines],
+  ["offer-engine", offerEnginePluginRegistrationLines],
+  ["reviews", reviewsPluginRegistrationLines],
+  ["bundle", bundlePluginRegistrationLines],
+  ["size-guide", sizeGuidePluginRegistrationLines],
+  ["orbit", runtimeChunks.orbit.body],
+  ["rail", runtimeChunks.rail.body]
+];
 
 // ../../packages/gem-framework/src/validation.ts
 var validationRulesByCode = new Map(gemFrameworkValidationRules.map((rule) => [rule.code, rule]));
@@ -5639,7 +7953,7 @@ var canonicalCssVariableNames = /* @__PURE__ */ new Set([
     const namespace = group === "typography" ? "font" : group === "spacing" ? "space" : group;
     return keys.map((key) => `--gem-${namespace}-${slugify(key)}`);
   }),
-  // The governed type ramp (--gem-h1…h6, --gem-body, --gem-text-sm, --gem-type-base/-scale). The
+  // The governed type ramp (--gem-h1…h6, --gem-body, --gem-text-sm, --gem-text-xs, --gem-type-base/-scale). The
   // framework stylesheet declares it on every page, but it is not a token GROUP, so it was missing here
   // and a section sizing its heading with `var(--gem-h2)` got `unknown_gem_css_variable`. Read from the
   // function that emits it, so the ramp and this list cannot drift.
@@ -5658,7 +7972,12 @@ var canonicalCssVariableNames = /* @__PURE__ */ new Set([
   // The row primitive's variables (primitives.ts GEM_ROW_CSS). Sections SET these on their grid.
   ...GEM_ROW_CSS_VARIABLES,
   // The form set's variables (form-set.ts): set from a plan's `tokens.form`, read by fields under [data-gem-form-set].
-  ...GEM_FORM_CSS_VARIABLES
+  ...GEM_FORM_CSS_VARIABLES,
+  // The motion engine's (motion-engine.ts, 0.19.0), all of them: a section copies the base CSS VERBATIM into its own CSS,
+  // internals (--gem-orbit-a, --gem-rail-t) included, and sets --gem-orbit-i / -n, the settings and --gem-motion-tint.
+  ...new Set([GEM_ORBIT_BASE_CSS, GEM_RAIL_BASE_CSS, GEM_ORBIT_RUNTIME_CSS, GEM_RAIL_RUNTIME_CSS, GEM_QUICK_VIEW_CSS].join("\n").match(/--gem-[a-z0-9-]+/g) ?? []),
+  // …and every setting an effect reads from a CSS variable (`css: true`): a section sets it in its stylesheet, per breakpoint.
+  ...gemMotionEffectList.flatMap((effect) => Object.entries(effect.settings).filter(([, setting]) => setting.css).map(([name]) => `--gem-${effect.key}-${name}`))
 ]);
 var TOKENIZED_PROPERTIES = [
   "background",
@@ -5766,14 +8085,22 @@ function validateGemFrameworkMarkup(markup, artifactPath, options = {}) {
   }
   return result(issues);
 }
+var NAMESPACE_URL = String.raw`https?:\/\/www\.w3\.org\/[\w.\/#:~%+-]*`;
+var SHARE_NETWORK = "facebook|twitter|x|pinterest|whatsapp|threads";
+var AS_A_LINK = String.raw`(?<=(?:<a\s[^<>]{0,400}?(?<![\w-])href=\{?|[{,]\s{0,40}["']?(?:${SHARE_NETWORK})["']?\s{0,8}:\s{0,8})["'\x60])`;
+var SHARE_INTENT = String.raw`https?:\/\/(?:(?:www\.)?facebook\.com\/sharer\/sharer\.php|(?:twitter|x)\.com\/intent\/(?:tweet|post)|(?:www\.)?pinterest\.com\/pin\/create\/button\/|wa\.me\/\d*|(?:www\.)?threads\.(?:net|com)\/intent\/post)\?`;
+var NEVER_FETCHED_URL = new RegExp(`${NAMESPACE_URL}|${AS_A_LINK}${SHARE_INTENT}`, "gi");
+var JSON_LD = /<script\b[^>]*type=["']application\/ld\+json["'][^>]*>[\s\S]*?<\/script>/gi;
+function namesExternalDependency(withoutJsonLd) {
+  return /https?:\/\/|\/\/cdn\./i.test(withoutJsonLd.replace(NEVER_FETCHED_URL, ""));
+}
 function validateSharedSafety(content, artifactPath) {
   const issues = [];
-  const contentWithoutJsonLd = content.replace(/<script\b[^>]*type=["']application\/ld\+json["'][^>]*>[\s\S]*?<\/script>/gi, "");
-  const contentWithoutNamespaces = contentWithoutJsonLd.replace(/https?:\/\/www\.w3\.org\/[^\s"'<>]*/gi, "");
-  if (/<script\b/i.test(contentWithoutJsonLd)) {
+  const withoutJsonLd = content.replace(JSON_LD, "");
+  if (/<script\b/i.test(withoutJsonLd)) {
     issues.push(ruleIssue("inline_script", "Gem Framework artifacts must not include inline script tags.", artifactPath));
   }
-  if (/https?:\/\/|\/\/cdn\./i.test(contentWithoutNamespaces)) {
+  if (namesExternalDependency(withoutJsonLd)) {
     issues.push(ruleIssue("external_dependency", "Gem Framework artifacts must not include external runtime or CDN dependencies.", artifactPath));
   }
   return issues;
@@ -5802,6 +8129,9 @@ function gemFrameworkPublicCssVariables() {
       String(createSectionCss()),
       String(createShellCss()),
       String(createGemSectionRuntimeContractCss()),
+      // popup-shell.css (its own file since 0.8.3, so not in createPrimitiveCss): a popup section sets
+      // --gem-popup-drawer-width (0.18.17, drawer-end) and must not be told the framework's own variable is unknown.
+      GEM_POPUP_SHELL_CSS,
       // The button case rule only exists when a token sets it; a section may still read its variables (a CTA rule
       // beats the zero-specificity rule, so opting in means `text-transform: var(--gem-font-button-transform, none)`).
       gemButtonCaseCss({ typography: { buttonTransform: "none", buttonLetterSpacing: "normal" } })
@@ -5812,11 +8142,13 @@ function gemFrameworkPublicCssVariables() {
 }
 var ROOT_SELECTOR = /^\s*(?::root|html|:host)(?:\[[^\]]*\]|:[a-z-]+(?:\([^()]*\))?)*\s*$/;
 var EDITION_ROOT_SELECTOR = /^\s*:where\(\s*\[data-gem-edition=(["'])\d+\1\](?:\s*,\s*\[data-gem-edition=(["'])\d+\2\])*\s*\)\s*$/;
+var KNOB_SCOPE_SELECTOR = /^\s*\[data-gem-[a-z0-9-]+(?:=(["'])[^"']*\1)?\]\s*$/;
 function gemPublicCssVariablesFrom(stylesheet) {
   const css = stylesheet.replace(/\/\*[\s\S]*?\*\//g, " ");
   const declaredOnRoot = /* @__PURE__ */ new Set();
   const declaredElsewhere = /* @__PURE__ */ new Set();
   for (const [, selector, body] of css.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+    if (selector.split(",").every((part) => KNOB_SCOPE_SELECTOR.test(part))) continue;
     const onRoot = EDITION_ROOT_SELECTOR.test(selector) || selector.split(",").every((part) => ROOT_SELECTOR.test(part));
     for (const [, name] of body.matchAll(/(--gem-[a-z0-9-]+)\s*:/g)) (onRoot ? declaredOnRoot : declaredElsewhere).add(name);
   }
@@ -6137,9 +8469,9 @@ var LABEL_LEAD = /^(?:(?:grand\s+|sub\s*)?total|subtotal|price|unless\s+noted|t
 var QUESTION_END = /[?？❓❔][\s\p{Extended_Pictographic}\uFE0F]*$/u;
 var MENTIONS_SHIPPING = /ship|deliver|vận chuyển|giao hàng/iu;
 var SHIPPING_ZERO_ENTRIES = Object.entries(SHIPPING_ZERO_SENTENCES);
-function sentencesOf(text) {
+function sentencesOf(text2) {
   const out = [];
-  for (const line of text.split(/\n+|\s[|•·]\s|\s(?=[✓✔☑]\s)/u)) {
+  for (const line of text2.split(/\n+|\s[|•·]\s|\s(?=[✓✔☑]\s)/u)) {
     let cur = "";
     for (const piece of line.split(/(?<=[.!?;])\s+/u)) {
       cur = cur ? `${cur} ${piece}` : piece;
@@ -6154,8 +8486,8 @@ function sentencesOf(text) {
 }
 function shippingZeroPromiseIn(raw) {
   if (!MENTIONS_SHIPPING.test(raw)) return null;
-  const text = raw.normalize("NFC").replace(/\\n/g, "\n").replace(/\\(['"’])/g, "$1");
-  for (const sentence of sentencesOf(text)) {
+  const text2 = raw.normalize("NFC").replace(/\\n/g, "\n").replace(/\\(['"’])/g, "$1");
+  for (const sentence of sentencesOf(text2)) {
     if (QUESTION_END.test(sentence)) continue;
     const whole = sentence.replace(DECOR_START, "").replace(DECOR_END, "").trim();
     const clauses = LABEL_LEAD.test(whole) ? [whole] : [whole, ...whole.split(/,\s+|\s+[—–]\s+/u)].map((c) => c.replace(DECOR_START, "").replace(DECOR_END, "").trim());
@@ -6209,26 +8541,26 @@ function demoValues(src) {
   return out;
 }
 var PRICE_ANY = new RegExp(`[$\xA3\u20AC]\\s?\\d|\\b\\d[\\d.,]*\\s?(?:USD|EUR|GBP)\\b|${PROMISE_VI_PARTS.price}`, "iu");
-function isQuestion(text) {
-  const t = text.trim();
+function isQuestion(text2) {
+  const t = text2.trim();
   if (!/\?$/.test(t) || /[.!?]\s+\S/.test(t)) return false;
   return /^(?:can|do|does|did|how|what|when|where|why|who|which|is|are|will|would|should|could|may)\b/i.test(t) || /(?:không|chưa|nào|sao|gì|đâu|bao lâu|bao nhiêu|mấy|được không|à|hả|nhỉ)\s*\?$/iu.test(t) || /^(?:làm sao|tại sao|vì sao|khi nào|bao lâu|có)(?![\p{L}])/iu.test(t);
 }
 function claimIn(raw) {
-  const text = raw.normalize("NFC");
-  if (CLAIM_TEXT.test(text) || CLAIM_TEXT_VI.test(text)) return "hardcoded claim";
-  if (INVENTED_PERSON.test(`"${text}"`) || INVENTED_PERSON_VI.test(text)) return "invented person";
-  if (isQuestion(text)) return PRICE_ANY.test(text) || PRICE_K_VI.test(text) ? "promise the merchant never made" : null;
-  if (PRICE_K_VI.test(text) && /^\s*\d[\d.,]*\s?k\s*\+?\s*$/.test(text)) return "hardcoded figure";
-  if (PROMISE.test(text) || PROMISE_VI.test(text) || shippingZeroPromiseIn(text) || PRICE_K_VI.test(text)) return "promise the merchant never made";
+  const text2 = raw.normalize("NFC");
+  if (CLAIM_TEXT.test(text2) || CLAIM_TEXT_VI.test(text2)) return "hardcoded claim";
+  if (INVENTED_PERSON.test(`"${text2}"`) || INVENTED_PERSON_VI.test(text2)) return "invented person";
+  if (isQuestion(text2)) return PRICE_ANY.test(text2) || PRICE_K_VI.test(text2) ? "promise the merchant never made" : null;
+  if (PRICE_K_VI.test(text2) && /^\s*\d[\d.,]*\s?k\s*\+?\s*$/.test(text2)) return "hardcoded figure";
+  if (PROMISE.test(text2) || PROMISE_VI.test(text2) || shippingZeroPromiseIn(text2) || PRICE_K_VI.test(text2)) return "promise the merchant never made";
   return null;
 }
 function demoInvents(value) {
   const v = value.trim();
   if (/^-?\d/.test(v)) return "number";
   if (/^[{[]/.test(v) && /(?:^|[:[,])\s*-?\d/.test(v.slice(1))) return "number";
-  for (const text of stringLiteralsIn(v)) {
-    const kind = claimIn(text);
+  for (const text2 of stringLiteralsIn(v)) {
+    const kind = claimIn(text2);
     if (kind) return kind;
   }
   return null;
@@ -6281,12 +8613,12 @@ function fabricatedProofInSource(raw) {
       caught.add(`${at}\0key\0${key}`);
       out.push({ line: at, why: `plan literal ${key}: ${num}`, text: line.trim() });
     }
-    for (const text of stringLiteralsIn(line)) {
-      if (text.includes("${")) continue;
-      const kind = claimIn(text);
+    for (const text2 of stringLiteralsIn(line)) {
+      if (text2.includes("${")) continue;
+      const kind = claimIn(text2);
       if (!kind) continue;
-      caught.add(`${at}\0str\0${text}`);
-      out.push({ line: at, why: `${kind} ${JSON.stringify(text)}`, text: line.trim() });
+      caught.add(`${at}\0str\0${text2}`);
+      out.push({ line: at, why: `${kind} ${JSON.stringify(text2)}`, text: line.trim() });
     }
   });
   const code = src.replace(/(["'])((?:\\.|(?!\1)[^\\\n])*)\1/g, (_m, q, body) => q + body.replace(/[^\n]/g, " ") + q);
@@ -6295,7 +8627,7 @@ function fabricatedProofInSource(raw) {
     out.push({ line: at, why: `verified by default (${m[0].replace(/\s+/g, " ").trim()}); badge only on verified === true`, text: (lines[at - 1] ?? "").trim() });
   }
   for (const r of demoReads) {
-    const onDemoLine = caught.has(`${r.entry.line}\0key\0${r.key}`) || stringLiteralsIn(r.entry.value).some((text) => caught.has(`${r.entry.line}\0str\0${text}`));
+    const onDemoLine = caught.has(`${r.entry.line}\0key\0${r.key}`) || stringLiteralsIn(r.entry.value).some((text2) => caught.has(`${r.entry.line}\0str\0${text2}`));
     if (!onDemoLine) out.push({ line: r.at, why: r.why, text: r.text });
   }
   return out.sort((a, b) => a.line - b.line);