@gemboss/gem-framework 0.18.16 → 0.19.0

package/dist/index.js

@@ -121,11 +121,11 @@ function color(value) {
 function gemSectionDividerStyle(props, bandBackground) {
   if (!gemSectionDividers(props).length) return {};
   const value = props?.divider_flip;
-  const flip = value === true || value === "true" || value === 1 || value === "1";
+  const flip2 = value === true || value === "true" || value === 1 || value === "1";
   return {
     "--gem-element-divider-height": `${height(props?.divider_height) ?? 48}px`,
     "--gem-element-divider-color": color(props?.divider_color) ?? color(bandBackground) ?? "var(--gem-section-bg, var(--gem-color-background))",
-    "--gem-element-divider-scale-x": flip ? "-1" : "1"
+    "--gem-element-divider-scale-x": flip2 ? "-1" : "1"
   };
 }
 function gemSectionDividerResponsiveStyle(props) {
@@ -435,10 +435,15 @@ function gemButtonGradientEndCss(accent = "var(--gem-color-accent)", accentText
 }
 
 // ../../packages/gem-framework/src/tokens.ts
-var gemFrameworkVersion = "0.18.16";
+var gemFrameworkVersion = "0.19.0";
 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) {
@@ -583,15 +588,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),
@@ -859,7 +864,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
@@ -874,7 +879,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);
@@ -922,6 +929,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));",
@@ -1050,6 +1064,1398 @@ 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, target2, dt, stiffness, damping) {
+  const f = dt / 16.67;
+  s.v += (-(s.x - target2) * 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 scrollProgress = (rect, height2) => clamp((height2 - rect.top) / (height2 + rect.height), 0, 1);
+var TIERS = ["static", "light", "full"];
+var query = (win, q) => Boolean(win && typeof win.matchMedia === "function" && win.matchMedia(q).matches);
+var reducedMotion = (win) => query(win, "(prefers-reduced-motion: reduce)");
+function capabilityTier(win) {
+  if (reducedMotion(win)) return "static";
+  const nav = win && win.navigator || {};
+  const lean = nav.connection && nav.connection.saveData || nav.deviceMemory && nav.deviceMemory <= 2 || query(win, "(pointer: coarse)");
+  return lean ? "light" : "full";
+}
+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();
+var SETTING_TYPES = ["number", "integer", "boolean", "enum", "text", "json"];
+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 checkEffect(effect) {
+  const spec = effect.declared || effect;
+  const key = String(spec.key);
+  const problems = [];
+  if (!/^[a-z][a-z0-9-]*$/.test(key)) problems.push(`key "${key}" is not kebab-case`);
+  if (typeof spec.mount !== "function") problems.push(`${key} has no mount()`);
+  if (spec.tier && !TIERS.includes(spec.tier)) problems.push(`${key}: tier must be one of ${TIERS.join(", ")}`);
+  if ((spec.tier && spec.tier !== "static" || spec.renderer && spec.renderer !== "dom") && !["markup", "poster"].includes(spec.fallback)) {
+    problems.push(`${key} is heavy and must declare a static fallback (markup or poster)`);
+  }
+  for (const [name, s] of Object.entries(spec.settings || {})) {
+    if (!SETTING_TYPES.includes(s.type) || !("default" in s) || !s.label) problems.push(`${key}.${name} needs a type, a default and a label`);
+    else if ((s.type === "number" || s.type === "integer") && (s.min != null && s.default < s.min || s.max != null && s.default > s.max)) problems.push(`${key}.${name}: default out of range`);
+    else if (s.type === "enum" && !(s.options || []).includes(s.default)) problems.push(`${key}.${name}: default is not an option`);
+  }
+  return problems;
+}
+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 target2 = 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 = target2 - pos;
+      if (ctx.tier() === "static" || Math.abs(d) < 8e-4) pos = target2;
+      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(target2);
+    target2 = 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(target2 + (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");
+      target2 = 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(target2 + d));
+  arrowKeys(ctx, root, {
+    accept: (e) => e.target === root || hits.includes(e.target),
+    step: (d) => goTo(target2 + 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 color2 = 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 target2 = host.imageFor(index);
+    if (target2 === source) return;
+    hideSource(false);
+    source = target2;
+    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[color2];
+    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[color2];
+    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 : [];
+    color2 = Math.min(chosen.get(p.id) || 0, Math.max(0, colors.length - 1));
+    size = (p.sizes || []).findIndex((z) => z.available !== false);
+    const c = colors[color2];
+    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 === color2), "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;
+      color2 = 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; }"
+];
+function scopeMotionCss(css, scope) {
+  const roots = /^\.gem-(?:orbit|rail)(?![\w-])/;
+  const prefix = (list) => list.split(/,(?![^(]*\))/).map((one) => one.trim()).flatMap((one) => roots.test(one) ? [`${scope} ${one}`, `${scope}${one}`] : [`${scope} ${one}`]).join(", ");
+  let out = "";
+  let prelude = "";
+  const stack = [];
+  for (const ch of css) {
+    if (ch === "{") {
+      const head = prelude.trim();
+      const atRule = head.startsWith("@");
+      out += prelude.slice(0, prelude.length - prelude.trimStart().length) + (atRule ? head : prefix(head)) + " {";
+      stack.push(atRule);
+      prelude = "";
+    } else if (ch === "}") {
+      out += prelude + "}";
+      prelude = "";
+      stack.pop();
+    } else if (stack.length && stack[stack.length - 1] === false) {
+      out += ch;
+    } else {
+      prelude += ch;
+    }
+  }
+  return out + prelude;
+}
+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 gemOrbitBaseCss = (scope) => scopeMotionCss(GEM_ORBIT_BASE_CSS, scope);
+var gemRailBaseCss = (scope) => scopeMotionCss(GEM_RAIL_BASE_CSS, scope);
+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 GEM_MOTION_RUNTIME_FILES = ["motion/core.js", "motion/orbit.js", "motion/rail.js", "motion/quick-view.js"];
+var gemMotionEffectList = [orbitEffect, railEffect, quickViewEffect];
+function gemMotionEffectManifest() {
+  return gemMotionEffectList.map(({ key, hook, load, renderer, tier, fallback, budget, settings }) => ({
+    key,
+    hook,
+    load,
+    renderer,
+    tier,
+    fallback,
+    budget,
+    settings: Object.fromEntries(Object.entries(settings).map(([name, setting]) => [name, { ...setting, attribute: `data-gem-${key}-${name}`, ...setting.css ? { variable: `--gem-${key}-${name}` } : {} }]))
+  }));
+}
+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 = [
   {
@@ -1245,6 +2651,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: [
@@ -1399,9 +2811,11 @@ var gemFrameworkRuntimePlugins = [
     events: ["gem:hero-slideshow:ready", "gem:hero-slideshow:change"]
   },
   {
+    // 0.19.0: a lazy chunk with the motion engine's quick view; idle schedules only gem-runtime.js's stub, which imports
+    // the chunk on the first interaction with a trigger (or at idle), never on a page without one.
     key: "quick-view",
-    load_strategy: "interaction",
-    events: ["gem:quick-view:open", "gem:quick-view:close"]
+    load_strategy: "idle",
+    events: ["gem:quick-view:ready", "gem:quick-view:open", "gem:quick-view:close", "gem:cart:add"]
   },
   {
     key: "promo-popup",
@@ -1467,6 +2881,24 @@ var gemFrameworkRuntimePlugins = [
     key: "bundle",
     load_strategy: "idle",
     events: ["gem:bundle:ready", "gem:bundle:change", "gem:bundle:complete"]
+  },
+  {
+    // idle, not interaction: the button it shows has to be there before anyone interacts.
+    key: "size-guide",
+    load_strategy: "idle",
+    events: ["gem:size-guide:ready", "gem:size-guide:open"]
+  },
+  // The motion engine's effects (0.19.0): lazy chunks. idle schedules gem-runtime.js's stub, which imports the chunk when a
+  // hook comes near the viewport and never on a page without one.
+  {
+    key: "orbit",
+    load_strategy: "idle",
+    events: ["gem:orbit:ready", "gem:motion:front", "gem:motion:fallback"]
+  },
+  {
+    key: "rail",
+    load_strategy: "idle",
+    events: ["gem:rail:ready", "gem:motion:front", "gem:motion:fallback"]
   }
 ];
 var gemFrameworkValidationRules = [
@@ -1572,6 +3004,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
@@ -1607,6 +3057,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; }",
@@ -1802,7 +3255,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); }"
@@ -2028,6 +3481,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;",
@@ -3405,8 +4866,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)";
@@ -3416,7 +4877,7 @@ function createGemSectionRuntimeContractCss(selector = "[data-gem-section-librar
     `${selector} {`,
     "  box-sizing: border-box;",
     `  background: ${background};`,
-    `  color: ${text};`,
+    `  color: ${text2};`,
     "}",
     `${selector} *,`,
     `${selector} *::before,`,
@@ -3475,7 +4936,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;",
     "}",
@@ -4833,8 +6294,8 @@ function resolveGift(gift, totalAmount) {
   const remaining = `${symbol}${remainingAmount.toFixed(2)}`;
   const percent = gift.threshold > 0 ? Math.max(0, Math.min(100, Math.round(totalAmount / gift.threshold * 100))) : 100;
   const template = unlocked ? gift.unlocked_text ?? "\u{1F381} {label} unlocked!" : gift.locked_text ?? "Add {remaining} more to unlock {label}";
-  const text = template.replace("{remaining}", remaining).replace("{label}", gift.label);
-  return { unlocked, remaining, remaining_amount: remainingAmount, percent, text };
+  const text2 = template.replace("{remaining}", remaining).replace("{label}", gift.label);
+  return { unlocked, remaining, remaining_amount: remainingAmount, percent, text: text2 };
 }
 function matches(when, sel) {
   return Object.keys(when).every((k) => sel[k] === when[k]);
@@ -5980,7 +7441,10 @@ var runtimePluginReadyEvents = {
   "context-adapter": "gem:context:ready",
   "offer-engine": "gem:offer:ready",
   reviews: "gem:reviews:ready",
-  bundle: "gem:bundle:ready"
+  bundle: "gem:bundle:ready",
+  "size-guide": "gem:size-guide:ready",
+  orbit: "gem:orbit:ready",
+  rail: "gem:rail:ready"
 };
 var cartDrawerPluginRegistrationLines = [
   "  registerPlugin('cart-drawer', ({ api }) => {",
@@ -6474,8 +7938,7 @@ var heroSlideshowPluginRegistrationLines = [
   "    api.emit('gem:hero-slideshow:ready', { source: 'gem-runtime', count: bound });",
   "  });"
 ];
-var quickViewPluginRegistrationLines = [
-  "  registerPlugin('quick-view', ({ api }) => {",
+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;",
@@ -6525,10 +7988,15 @@ var quickViewPluginRegistrationLines = [
   "      });",
   "      if (canListen(surface)) surface.addEventListener('keydown', (event) => { if (event.key === 'Escape') close('escape'); });",
   "    }",
-  "    api.quickView = { open: (detail = {}) => openSurface({ ...detail }), close };",
-  "    api.emit('gem:quick-view:ready', { source: 'gem-runtime', count: bound, hasSurface: Boolean(surface) });",
-  "  });"
+  // 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
@@ -7068,6 +8536,30 @@ 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],
@@ -7080,7 +8572,7 @@ var runtimePluginSourceLines = [
   ["media-gallery", mediaGalleryPluginRegistrationLines],
   ["carousel", carouselPluginRegistrationLines],
   ["hero-slideshow", heroSlideshowPluginRegistrationLines],
-  ["quick-view", quickViewPluginRegistrationLines],
+  ["quick-view", runtimeChunks["quick-view"].body],
   ["promo-popup", promoPopupPluginRegistrationLines],
   ["sticky-atc", stickyAtcPluginRegistrationLines],
   ["before_after", beforeAfterPluginRegistrationLines],
@@ -7091,16 +8583,94 @@ var runtimePluginSourceLines = [
   ["runtime-slot-loader", runtimeSlotLoaderPluginRegistrationLines],
   ["offer-engine", offerEnginePluginRegistrationLines],
   ["reviews", reviewsPluginRegistrationLines],
-  ["bundle", bundlePluginRegistrationLines]
+  ["bundle", bundlePluginRegistrationLines],
+  ["size-guide", sizeGuidePluginRegistrationLines],
+  ["orbit", runtimeChunks.orbit.body],
+  ["rail", runtimeChunks.rail.body]
 ];
 var noopPluginRegistrationLine = (key, readyEvent) => `  registerNoopPlugin(${JSON.stringify(key)}, ${JSON.stringify(readyEvent)});`;
+var chunkStubLine = (key, chunk) => `  registerPlugin(${JSON.stringify(key)}, ({ api }) => loadChunk(${JSON.stringify(key)}, ${JSON.stringify(chunk.hook)}, ${JSON.stringify(chunk.when)}, api));`;
+var chunkLoaderLines = [
+  "  const chunkBase = (document.currentScript && document.currentScript.src) || '';",
+  "  const chunks = {};",
+  "  let chunkWatch = null;",
+  "  const loadChunkModule = (chunk) => {",
+  "    if (chunk.state) return;",
+  "    chunk.state = 1;",
+  "    Promise.resolve().then(() => {",
+  "      const url = new URL('plugins/' + chunk.key + '.js', chunk.api.pluginBase || chunkBase || document.baseURI).href;",
+  "      return chunk.api.importChunk ? chunk.api.importChunk(url) : import(url);",
+  "    }).then((module) => {",
+  "      chunk.module = module;",
+  "      module.mount(document, { api: chunk.api, window: target });",
+  "      chunk.state = 2;",
+  "      if (chunk.replay) chunk.replay.click();",
+  "      chunk.replay = null;",
+  "    }, (error) => { chunk.state = 0; chunk.replay = null; chunk.api.emit('gem:plugin:error', { key: chunk.key, error: String(error) }); });",
+  "  };",
+  "  const armChunk = (chunk, hooks) => {",
+  "    const load = () => loadChunkModule(chunk);",
+  "    if (chunk.when === 'viewport') {",
+  "      if (!target.IntersectionObserver) { load(); return; }",
+  "      chunk.io = chunk.io || new target.IntersectionObserver((entries) => { if (entries.some((entry) => entry.isIntersecting)) { chunk.io.disconnect(); load(); } }, { rootMargin: '200px' });",
+  "      hooks.forEach((hookEl) => chunk.io.observe(hookEl));",
+  "      return;",
+  "    }",
+  "    hooks.forEach((hookEl) => {",
+  "      ['pointerover', 'focusin', 'touchstart'].forEach((type) => hookEl.addEventListener(type, load, { once: true, passive: true }));",
+  "      hookEl.addEventListener('click', (event) => {",
+  "        if (chunk.state === 2 || event.defaultPrevented) return;",
+  "        const host = hookEl.closest && hookEl.closest('[data-gem-quick-view-host]');",
+  "        if (host && host.gemQuickViewHost && !host.gemQuickViewHost.opens(hookEl)) return;",
+  "        event.preventDefault();",
+  "        chunk.replay = hookEl;",
+  "        load();",
+  "      });",
+  "    });",
+  "    if (!chunk.idle) { chunk.idle = true; onIdle(load); }",
+  "  };",
+  "  const scanChunk = (chunk, scope) => {",
+  "    const hooks = Array.prototype.slice.call(scope.querySelectorAll ? scope.querySelectorAll(chunk.hook) : []);",
+  "    if (scope !== document && scope.matches && scope.matches(chunk.hook)) hooks.unshift(scope);",
+  "    if (!hooks.length) return false;",
+  "    if (chunk.state === 2) hooks.forEach((hookEl) => chunk.module.mount(hookEl, { api: chunk.api, window: target }));",
+  "    else armChunk(chunk, hooks);",
+  "    return true;",
+  "  };",
+  "  const watchChunks = () => {",
+  "    if (chunkWatch || !target.MutationObserver) return;",
+  "    let added = [];",
+  "    let timer = 0;",
+  "    const flush = () => {",
+  "      timer = 0;",
+  "      const nodes = added;",
+  "      added = [];",
+  "      nodes.forEach((node) => { if (node.isConnected) Object.keys(chunks).forEach((key) => scanChunk(chunks[key], node)); });",
+  "    };",
+  "    chunkWatch = new target.MutationObserver((records) => {",
+  "      records.forEach((record) => record.addedNodes.forEach((node) => { if (node.nodeType === 1) added.push(node); }));",
+  "      if (added.length && !timer) timer = setTimeout(flush, 50);",
+  "    });",
+  "    chunkWatch.observe(document.documentElement, { childList: true, subtree: true });",
+  "    if (canListen(document)) document.addEventListener('shopify:section:load', (event) => { if (event.target && event.target.nodeType === 1) Object.keys(chunks).forEach((key) => scanChunk(chunks[key], event.target)); });",
+  "  };",
+  "  const loadChunk = (key, hook, when, api) => {",
+  "    const chunk = (chunks[key] = { key, hook, when, api, state: 0, module: null, replay: null });",
+  "    watchChunks();",
+  "    if (!scanChunk(chunk, document)) api.emit('gem:' + key + ':ready', { source: 'gem-runtime', count: 0 });",
+  "  };"
+];
 function gemRuntimePluginSources() {
-  const withBody = runtimePluginSourceLines.map(([key, lines]) => ({
-    key,
-    readyEvent: runtimePluginReadyEvents[key] ?? `gem:${key}:ready`,
-    hasBody: true,
-    lines
-  }));
+  const withBody = runtimePluginSourceLines.map(([key, lines]) => {
+    const chunk = runtimeChunks[key];
+    return {
+      key,
+      readyEvent: runtimePluginReadyEvents[key] ?? `gem:${key}:ready`,
+      hasBody: true,
+      lines: chunk ? [chunkStubLine(key, chunk)] : lines,
+      ...chunk ? { chunk } : {}
+    };
+  });
   const noop = Object.entries(runtimePluginReadyEvents).filter(([key]) => !runtimePluginSourceLines.some(([sourceKey]) => sourceKey === key)).map(([key, readyEvent]) => ({ key, readyEvent, hasBody: false, lines: [noopPluginRegistrationLine(key, readyEvent)] }));
   return [...withBody, ...noop];
 }
@@ -7235,7 +8805,12 @@ function createGemRuntimeBootstrap(configArg) {
     "      if (readyEvent) api.emit(readyEvent, { source: 'gem-runtime' });",
     "    });",
     "  };",
-    ...runtimePluginSourceLines.flatMap(([key, lines]) => enabledPluginKeys.has(key) ? lines : []),
+    ...runtimePluginSourceLines.some(([key]) => runtimeChunks[key] && enabledPluginKeys.has(key)) ? chunkLoaderLines : [],
+    ...runtimePluginSourceLines.flatMap(([key, lines]) => {
+      if (!enabledPluginKeys.has(key)) return [];
+      const chunk = runtimeChunks[key];
+      return chunk ? [chunkStubLine(key, chunk)] : lines;
+    }),
     ...pluginRegistrationLines,
     // `data-gem-bound-<key>` is a CONTRACT, not private bookkeeping: markup may carry it to claim an element for its
     // own behavior (promo-popup.email-capture.v1 renders data-gem-bound-promo-popup="section"). Any value counts as
@@ -7331,17 +8906,18 @@ function gemRuntimePluginModuleKeys() {
 function createGemRuntimePluginModule(key) {
   const source = gemRuntimePluginSources().find((candidate) => candidate.key === key);
   if (!source) throw new Error(`gem-framework: no runtime plugin "${key}"`);
-  const body = routeListenersThroughLedger(source.lines.join("\n"), key);
+  const body = routeListenersThroughLedger((source.chunk ? source.chunk.body : source.lines).join("\n"), key);
   const guard = PLUGIN_GUARDS[key];
   return [
     `// @gemboss/gem-framework/plugins/${key}: the gem-runtime plugin "${key}" as an ES module. Generated from`,
-    "// packages/gem-framework/src/runtime.ts, the same lines gem-runtime.js carries; do not edit here.",
+    source.chunk ? "// packages/gem-framework/src/runtime.ts (a lazy chunk: gem-runtime.js carries only its stub); do not edit here." : "// packages/gem-framework/src/runtime.ts, the same lines gem-runtime.js carries; do not edit here.",
     'import { mountPlugin } from "../runtime-core.js";',
+    ...source.chunk ? source.chunk.imports : [],
     "",
     `export const key = ${JSON.stringify(key)};`,
     `export const readyEvent = ${JSON.stringify(source.readyEvent)};`,
     "",
-    "function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin }) {",
+    "function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin, onUnmount }) {",
     body,
     "}",
     "",
@@ -7381,7 +8957,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.
@@ -7400,7 +8976,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",
@@ -7512,14 +9093,25 @@ 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 hasExternalDependency(content) {
+  return namesExternalDependency(content.replace(JSON_LD, ""));
+}
 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;
@@ -7548,6 +9140,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" } })
@@ -7558,11 +9153,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);
   }
@@ -7761,9 +9358,9 @@ function renderGemShellHeader(plan) {
     header.show_cart ? `<a class="gem-shell-header__action gem-shell-header__action--cart" href="#" aria-label="Cart">${ICON_CART}<span class="gem-shell-header__cart-count cart-count-bubble">0</span></a>` : ""
   ].filter(Boolean).join("");
   const bars = Array.isArray(header.bars) ? header.bars.filter((b) => (b?.text ?? "").trim()) : [];
-  const barMarkup = (text, bg, fg, segments) => {
+  const barMarkup = (text2, bg, fg, segments) => {
     const style = [bg ? `background:${bg}` : "", fg ? `color:${fg}` : ""].filter(Boolean).join(";");
-    const body = (segments ?? []).length > 1 ? `<span class="gem-announcement-bar__segments">${(segments ?? []).map((x) => `<span>${escapeHtml(x)}</span>`).join("")}</span>` : `<span>${escapeHtml(text)}</span>`;
+    const body = (segments ?? []).length > 1 ? `<span class="gem-announcement-bar__segments">${(segments ?? []).map((x) => `<span>${escapeHtml(x)}</span>`).join("")}</span>` : `<span>${escapeHtml(text2)}</span>`;
     return `<div class="announcement-bar" role="region" aria-label="Announcement"${style ? ` style="${escapeAttribute(style)}"` : ""}><p class="announcement-bar__message">${body}</p></div>`;
   };
   const announcement = bars.length ? bars.map((b) => barMarkup(b.text ?? "", b.bg, b.fg, b.segments)).join("") : header.announcement_text?.trim() ? barMarkup(header.announcement_text.trim(), header.announcement_bg, header.announcement_fg) : "";
@@ -8748,10 +10345,18 @@ export {
   GEM_IMG_IN_CSS,
   GEM_INLINE_MARK_CSS,
   GEM_LINE_HEIGHT_TOKEN_KEYS,
+  GEM_MOTION_CLASSES,
   GEM_MOTION_REDUCED,
+  GEM_MOTION_RUNTIME_FILES,
   GEM_MOTION_SCALE_DEFAULTS,
+  TIERS as GEM_MOTION_TIERS,
+  GEM_ORBIT_BASE_CSS,
+  GEM_ORBIT_RUNTIME_CSS,
   GEM_PART_CLASS,
   GEM_POPUP_SHELL_CSS,
+  GEM_QUICK_VIEW_CSS,
+  GEM_RAIL_BASE_CSS,
+  GEM_RAIL_RUNTIME_CSS,
   GEM_REVEAL_CSS,
   GEM_ROW_CSS,
   GEM_ROW_CSS_VARIABLES,
@@ -8769,6 +10374,9 @@ export {
   aaTextColor,
   auditGemFrameworkClassName,
   bundleEngineRuntimeScript,
+  capabilityTier,
+  checkEffect,
+  compactCss,
   createGemBaseCss,
   createGemFrameworkManifest,
   createGemRuntimeBootstrap,
@@ -8788,7 +10396,9 @@ export {
   createThemeProfileCss,
   defaultGemTokens,
   defaultSelection,
+  defineEffect,
   deriveFormSetId,
+  follow,
   gemBandSchemeColors,
   gemBandSchemeCssVars,
   gemBandSchemeDeclarations,
@@ -8809,17 +10419,23 @@ export {
   gemFrameworkValidationRules,
   gemFrameworkVersion,
   gemMobileTokenCssVars,
+  gemMotionChunks,
+  gemMotionEffectList,
+  gemMotionEffectManifest,
   gemMotionScaleCssVars,
+  gemOrbitBaseCss,
   gemPartClass,
   gemPhoneTokenTarget,
   gemPlanFormSet,
   gemPlanShapeKnobs,
+  gemRailBaseCss,
   gemRuntimePluginModuleKeys,
   gemRuntimePluginSources,
   gemSectionDividerResponsiveStyle,
   gemSectionDividerStyle,
   gemSectionDividers,
   getGemFrameworkValidationRule,
+  hasExternalDependency,
   hexContrastRatio,
   hexRelativeLuminance,
   isModernMineralFamilyLineagePlan,
@@ -8832,7 +10448,10 @@ export {
   normalizeHex,
   offerEngineRuntimeScript,
   optionalGemTokenKeys,
+  orbitEffect,
   planToRuntimeBootstrapConfig,
+  quickViewEffect,
+  railEffect,
   renderGemFrameworkManifest,
   renderGemPreviewDocument,
   renderGemSectionMarkup,
@@ -8844,7 +10463,13 @@ export {
   resolveGift,
   resolveOffer,
   reviewsEngineRuntimeScript,
+  ringDelta,
+  ringPose,
+  scopeMotionCss,
+  scrollProgress,
   slugify,
+  spring,
+  throwTarget,
   toCssVars,
   toMotionCssVars,
   validateGemFrameworkArtifact,