@gemboss/gem-framework 0.6.0 → 0.9.2

package/dist/index.js

@@ -19,6 +19,118 @@ function gemPartClass(part) {
   return GEM_PART_CLASS[part] ?? null;
 }
 
+// ../../packages/gem-framework/src/form-set.ts
+var GEM_FORM_TOKEN_KEYS = [
+  "radius",
+  "borderWidth",
+  "borderColor",
+  "fill",
+  "height",
+  "paddingInline",
+  "fontSize",
+  "focusRing",
+  "checkboxAccent",
+  "checkboxSize",
+  "shape",
+  "join"
+];
+var FORM_CSS_VAR = {
+  radius: "--gem-input-radius",
+  borderWidth: "--gem-input-border-width",
+  borderColor: "--gem-input-border-color",
+  fill: "--gem-input-bg",
+  height: "--gem-input-height",
+  paddingInline: "--gem-input-padding-inline",
+  fontSize: "--gem-input-font-size",
+  focusRing: "--gem-input-focus-ring",
+  checkboxAccent: "--gem-checkbox-accent",
+  checkboxSize: "--gem-checkbox-size"
+};
+var GEM_FORM_CSS_VARIABLES = Object.values(FORM_CSS_VAR);
+var GEM_FIELD_SHAPES = ["outline", "filled", "underline"];
+var GEM_FIELD_JOINS = ["separate", "joined"];
+var safe = (v) => {
+  if (typeof v !== "string" || v.trim() === "" || v.length > 200 || /[;{}<>\\"'`]|\/\*/.test(v)) return false;
+  const open = [];
+  for (const ch of v) {
+    if (ch === "(" || ch === "[") open.push(ch);
+    else if (ch === ")" || ch === "]") {
+      if (open.pop() !== (ch === ")" ? "(" : "[")) return false;
+    }
+  }
+  return open.length === 0;
+};
+var FIELD_SHAPE_SET = /* @__PURE__ */ new Set(["outline", "filled", "underline"]);
+var FIELD_JOIN_SET = /* @__PURE__ */ new Set(["separate", "joined"]);
+var hasForm = (form) => !!form && typeof form === "object" && Object.keys(form).some((k) => GEM_FORM_TOKEN_KEYS.includes(k));
+var GEM_FORM_DEFAULTS = {
+  shape: "outline",
+  join: "separate",
+  radius: "4px",
+  borderWidth: "1px",
+  borderColor: "color-mix(in srgb, currentColor 70%, transparent)",
+  fill: "var(--gem-color-surface)",
+  height: "44px",
+  paddingInline: "12px",
+  fontSize: "16px",
+  checkboxAccent: "var(--gem-color-accent)",
+  checkboxSize: "24px"
+};
+var GEM_FORM_VAR_SCOPE = "[data-gem-form-set], [data-gem-form-set] :is(input, select, textarea, button, form)";
+function gemFormCssBlock(form) {
+  const vars = gemFormCssVars(form);
+  return vars.length ? `${GEM_FORM_VAR_SCOPE} {
+${vars.map((d) => `  ${d}`).join("\n")}
+}` : "";
+}
+function gemFormCssVars(form) {
+  if (!hasForm(form)) return [];
+  const out = [];
+  for (const [key, cssVar] of Object.entries(FORM_CSS_VAR)) {
+    const v = form[key];
+    const fallback = GEM_FORM_DEFAULTS[key];
+    if (safe(v)) out.push(`${cssVar}: ${v.trim()};`);
+    else if (fallback) out.push(`${cssVar}: ${fallback};`);
+  }
+  return out;
+}
+function gemFormAttributes(form) {
+  if (!hasForm(form)) return {};
+  const id = typeof form.id === "string" && /^[a-z0-9-]{1,40}$/.test(form.id) ? form.id : "custom";
+  return {
+    "data-gem-form-set": id,
+    "data-gem-field-shape": typeof form.shape === "string" && FIELD_SHAPE_SET.has(form.shape) ? form.shape : GEM_FORM_DEFAULTS.shape,
+    "data-gem-field-join": typeof form.join === "string" && FIELD_JOIN_SET.has(form.join) ? form.join : GEM_FORM_DEFAULTS.join
+  };
+}
+var GEM_FORM_SETS = [
+  {
+    id: "crisp-outline",
+    label: "Crisp outline",
+    postures: ["clinical", "technical", "utility"],
+    form: { id: "crisp-outline", shape: "outline", join: "separate", radius: "4px", borderWidth: "1px", borderColor: "color-mix(in srgb, currentColor 70%, transparent)", fill: "var(--gem-color-surface)", height: "44px", paddingInline: "12px", fontSize: "16px", checkboxSize: "24px" }
+  },
+  {
+    id: "hairline-underline",
+    label: "Hairline underline",
+    postures: ["premium", "editorial"],
+    form: { id: "hairline-underline", shape: "underline", join: "separate", radius: "0px", borderWidth: "1px", borderColor: "color-mix(in srgb, currentColor 70%, transparent)", fill: "transparent", height: "48px", paddingInline: "2px", fontSize: "16px", checkboxSize: "24px" }
+  },
+  {
+    id: "soft-filled",
+    label: "Soft filled",
+    postures: ["natural"],
+    form: { id: "soft-filled", shape: "filled", join: "separate", radius: "10px", borderWidth: "2px", borderColor: "color-mix(in srgb, currentColor 55%, transparent)", fill: "color-mix(in srgb, var(--gem-color-text) 6%, var(--gem-color-surface))", height: "48px", paddingInline: "14px", fontSize: "16px", checkboxSize: "24px" }
+  },
+  {
+    id: "pill-joined",
+    label: "Pill joined",
+    postures: ["playful"],
+    form: { id: "pill-joined", shape: "outline", join: "joined", radius: "999px", borderWidth: "2px", borderColor: "currentColor", fill: "var(--gem-color-surface)", height: "48px", paddingInline: "20px", fontSize: "16px", checkboxSize: "24px" }
+  }
+];
+var gemFormSetsFor = (posture) => GEM_FORM_SETS.filter((s) => s.postures.includes(posture));
+
 // ../../packages/gem-framework/src/plan-shape.ts
 function gemStyleSpaceFor(plan) {
   switch (plan.design_system?.spacing_density) {
@@ -130,7 +242,10 @@ var defaultGemTokens = {
     background: "#f6f6f3",
     surface: "#ffffff",
     text: "#202223",
-    muted: "#6b7280",
+    // AA on THIS background (#f6f6f3), not only on white: #6b7280 measures 4.47:1 there, under 4.5, and muted styles
+    // every secondary line. #656c79 measures 4.88:1 (5.28 on white). Upstreamed from gemsite app/globals.css (#212,
+    // found by axe) in gem-framework 0.8.0.
+    muted: "#656c79",
     accent: "#008060",
     accentText: "#ffffff",
     border: "#d2d5d8",
@@ -270,12 +385,14 @@ function createGemTokenCss(tokens, selector = ":root") {
     GEM_TAP_MIN_CSS_VAR,
     GEM_FOCUS_OFFSET_CSS_VAR
   ];
+  const formBlock = gemFormCssBlock(tokens.form);
   const baseMobile = typeRampValue(tokens.typography, "baseMobile");
   return [
     `${selector} {`,
     ...declarations.map((line) => `  ${line}`),
     "}",
-    ...baseMobile ? [`@media (max-width: ${GEM_TYPE_MOBILE_MAX}) {`, `  ${selector} {`, `    --gem-type-base: ${baseMobile};`, "  }", "}"] : []
+    ...baseMobile ? [`@media (max-width: ${GEM_TYPE_MOBILE_MAX}) {`, `  ${selector} {`, `    --gem-type-base: ${baseMobile};`, "  }", "}"] : [],
+    ...formBlock ? [formBlock] : []
   ].join("\n");
 }
 var GEM_TYPE_RAMP_KEYS = ["base", "scale", "baseMobile"];
@@ -496,15 +613,6 @@ var gemFrameworkPrimitiveGroups = [
       "gem-delivery-date",
       "gem-stock-indicator",
       "gem-popup",
-      // Popup shell (primitives.ts GEM_POPUP_SHELL_CSS): the dialog frame popup sections draw their content in.
-      "gem-popup-shell",
-      "gem-popup-shell__dialog",
-      "gem-popup-shell__frame",
-      "gem-popup-shell__media",
-      "gem-popup-shell__image",
-      "gem-popup-shell__panel",
-      "gem-popup-shell__close",
-      "gem-popup-shell__teaser",
       "gem-back-to-top",
       // measured commerce atoms mapped by parts.ts (GEM_PART_CLASS) alongside gem-price/gem-badge.
       "gem-discount",
@@ -531,6 +639,22 @@ var gemFrameworkPrimitiveGroups = [
       "gem-cart-line-item__price"
     ]
   },
+  {
+    // The popup shell: the dialog frame popup sections draw their content in. Styled by popup-shell.ts
+    // (GEM_POPUP_SHELL_CSS), which ships as its own popup-shell.css since 0.8.3, not in primitives.css: a page that
+    // draws one of these loads that file (gem-framework.css, the whole file, carries it too).
+    group: "popup-shell",
+    classes: [
+      "gem-popup-shell",
+      "gem-popup-shell__dialog",
+      "gem-popup-shell__frame",
+      "gem-popup-shell__media",
+      "gem-popup-shell__image",
+      "gem-popup-shell__panel",
+      "gem-popup-shell__close",
+      "gem-popup-shell__teaser"
+    ]
+  },
   {
     group: "sections",
     classes: [
@@ -772,58 +896,7 @@ function createGemFrameworkManifest() {
   };
 }
 
-// ../../packages/gem-framework/src/primitives.ts
-var dividerMask = (path) => `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='${path}'/%3E%3C/svg%3E")`;
-var spikePath = (() => {
-  const teeth = [];
-  for (let x = 95; x > 0; x -= 5) teeth.push(`L${x} ${teeth.length % 2 === 0 ? 10 : 3}`);
-  return `M0 0 H100 V3 ${teeth.join(" ")} L0 ${teeth.length % 2 === 0 ? 10 : 3} Z`;
-})();
-var DIVIDER_SHAPES = {
-  wave: "M0 0 H100 V3 C80 9 70 -1 50 4 C30 9 20 1 0 4 Z",
-  slope: "M0 0 H100 V10 Z",
-  spikes: spikePath,
-  arch: "M0 0 H100 V2 Q50 12 0 2 Z",
-  blob: "M0 0 H100 V4 C85 11 72 0 58 5 C44 10 30 2 16 6 C10 8 5 5 0 6 Z"
-};
-var GEM_DIVIDER_CSS_LINES = [
-  // The clip is WIDENED, not removed. `.gem-section` sets `overflow: clip` and the wedge is drawn
-  // at `top: 100%` / `bottom: 100%` — entirely outside the box — so the parent deleted every
-  // divider on every track. Measured on the live storefront 2026-08-25: a band with the documented
-  // `data-gem-section-background="dark"` + `data-gem-divider-bottom="wave"` rendered a FLAT edge,
-  // while the attribute, the rule and the fallback colour were all present and correct.
-  // NOT `overflow: visible`: `.gem-hero` uses the clip to hold its own border-radius, so releasing
-  // it entirely would paint square corners over that radius. A browser without
-  // `overflow-clip-margin` keeps plain `clip` — the divider stays hidden, which is today's
-  // behaviour rather than a broken layout.
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-top], :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-bottom] { position: relative; overflow: clip; overflow-clip-margin: var(--gem-divider-height, 48px); }",
-  // Shared geometry. `top: 100%` / `bottom: 100%` put it outside the box; z-index 1 keeps it above the
-  // neighbouring band's background. pointer-events: none so it never eats a click near the seam.
-  // Qualified by SHAPE. Unqualified, any value paints a solid 48px slab — including the literal
-  // "none", which the attribute writer forwards unchanged. The clip used to hide that; widening
-  // it above makes a stray value visible.
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-bottom='wave']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-bottom='slope']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-bottom='spikes']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-bottom='arch']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-bottom='blob']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-top='wave']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-top='slope']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-top='spikes']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-top='arch']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-top='blob']::before { content: ''; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; height: var(--gem-divider-height, 48px); background: var(--gem-section-bg, var(--gem-color-background)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }",
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-bottom]::after { top: 100%; }",
-  // The top edge reuses the same masks, mirrored, so five shapes cover both edges.
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-top]::before { bottom: 100%; transform: scaleY(-1); }",
-  ...Object.entries(DIVIDER_SHAPES).flatMap(([name, path]) => {
-    const mask = dividerMask(path);
-    return [
-      `:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-bottom='${name}']::after { -webkit-mask-image: ${mask}; mask-image: ${mask}; }`,
-      `:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-divider-top='${name}']::before { -webkit-mask-image: ${mask}; mask-image: ${mask}; }`
-    ];
-  })
-];
-var GEM_DIVIDER_CSS = GEM_DIVIDER_CSS_LINES.join("\n");
-var GEM_CARD_CSS_LINES = [
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-card] :is(.gem-section__inner, [class*='__inner']) { border-radius: var(--gem-radius-md); padding: var(--gem-space-xl); }",
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-card='outline'] :is(.gem-section__inner, [class*='__inner']) { border: 1px solid var(--gem-color-border); }",
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-card='shadow'] :is(.gem-section__inner, [class*='__inner']) { background: var(--gem-color-surface); box-shadow: var(--gem-shadow-md); }",
-  // `filled` tints the section's own ground rather than reaching for a fixed colour, so it stays
-  // legible on an accent or dark band instead of punching a light panel into it.
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-card='filled'] :is(.gem-section__inner, [class*='__inner']) { background: color-mix(in srgb, currentColor 6%, transparent); }"
-];
-var GEM_CARD_CSS = GEM_CARD_CSS_LINES.join("\n");
+// ../../packages/gem-framework/src/popup-shell.ts
 var GEM_POPUP_SHELL_CSS_LINES = [
   ".gem-popup-shell { padding: 0; }",
   ".gem-popup-shell__dialog {",
@@ -843,8 +916,12 @@ var GEM_POPUP_SHELL_CSS_LINES = [
   ".gem-popup-shell[data-gem-popup-desktop='split-right'] .gem-popup-shell__media { order: 2; }",
   ".gem-popup-shell[data-gem-popup-media='none'] .gem-popup-shell__frame,",
   ".gem-popup-shell[data-gem-popup-desktop='card'] .gem-popup-shell__frame { grid-template-columns: 1fr; }",
-  ".gem-popup-shell[data-gem-popup-media='none'] .gem-popup-shell__dialog,",
-  ".gem-popup-shell[data-gem-popup-desktop='card'] .gem-popup-shell__dialog { width: min(480px, 92vw); }",
+  // Thẻ hẹp chỉ là bố cục DESKTOP. Viết ngoài media query thì nó (độ ưu tiên 0,3,0) thắng rule takeover 100vw của mobile
+  // (0,1,0): đo 04/10/2026, popup chọn desktop "card" hay không ảnh chỉ rộng 92vw trên điện thoại, không phủ kín.
+  "@media (min-width: 750px) {",
+  "  .gem-popup-shell[data-gem-popup-media='none'] .gem-popup-shell__dialog,",
+  "  .gem-popup-shell[data-gem-popup-desktop='card'] .gem-popup-shell__dialog { width: min(480px, 92vw); }",
+  "}",
   ".gem-popup-shell[data-gem-popup-media='none'] .gem-popup-shell__media { display: none; }",
   ".gem-popup-shell[data-gem-popup-desktop='card'] .gem-popup-shell__media { max-height: 200px; }",
   ".gem-popup-shell[data-gem-popup-desktop='card-over-image'] .gem-popup-shell__frame { grid-template-columns: 1fr; place-items: center; }",
@@ -883,6 +960,12 @@ var GEM_POPUP_SHELL_CSS_LINES = [
   "  .gem-popup-shell[data-gem-popup-desktop='fullscreen'][data-gem-popup-media='background'] .gem-popup-shell__media { position: absolute; inset: 0; }",
   "  .gem-popup-shell[data-gem-popup-desktop='fullscreen'][data-gem-popup-media='background'] .gem-popup-shell__panel { position: relative; z-index: 1; }",
   "  .gem-popup-shell[data-gem-popup-desktop='card-over-image'][data-gem-popup-media='background'] .gem-popup-shell__panel { color: var(--gem-color-text); }",
+  // Ở split-left / split-right / card ảnh nằm CẠNH chữ trên desktop, không nằm sau (chỉ mobile, fullscreen, card-over-image
+  // đặt ảnh ra sau): chữ sáng và lớp tối của ảnh nền ở đây là chữ trắng trên nền sáng. Quét tương phản 629 bản ghép
+  // 04/10/2026: 1,04:1 ở mọi bản ghép như vậy.
+  "  .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__panel,",
+  "  .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; }",
   "}",
   "@media (max-width: 749px) {",
   // Mobile: takeover is the whole screen; a sheet rises from the bottom to at most 88% of it. The image
@@ -894,7 +977,9 @@ var GEM_POPUP_SHELL_CSS_LINES = [
   "  .gem-popup-shell__panel { justify-content: flex-start; padding: var(--gem-space-3xl) var(--gem-space-lg) var(--gem-space-xl); }",
   "  .gem-popup-shell[data-gem-popup-media='none'] .gem-popup-shell__panel,",
   "  .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__panel { justify-content: center; }",
-  "  .gem-popup-shell[data-gem-popup-desktop='card-over-image'] .gem-popup-shell__panel { width: 100%; margin: 0; border-radius: 0; box-shadow: none; }",
+  // Mobile không có thẻ nổi: panel thôi nền riêng. Giữ nền thẻ (--gem-color-background) mà ảnh làm nền thì chữ sáng của
+  // ảnh nền nằm trên nền nhạt của thẻ: đo 04/10/2026, preset soft-pastel ra chữ trắng trên hồng nhạt, không đọc được.
+  "  .gem-popup-shell[data-gem-popup-desktop='card-over-image'] .gem-popup-shell__panel { width: 100%; margin: 0; border-radius: 0; box-shadow: none; background: transparent; }",
   "  .gem-popup-shell[data-gem-popup-desktop='card-over-image'] .gem-popup-shell__media { position: relative; }",
   "  .gem-popup-shell__media { order: 2; max-height: 34dvh; }",
   "  .gem-popup-shell[data-gem-popup-media='top'] .gem-popup-shell__media { order: 0; }",
@@ -903,20 +988,160 @@ var GEM_POPUP_SHELL_CSS_LINES = [
   "  .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__frame { grid-template-rows: 1fr; }",
   "  .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__media { position: absolute; inset: 0; max-height: none; }",
   "}",
-  ".gem-popup-shell[data-gem-popup-preview='true'] { padding: var(--gem-space-xl) var(--gem-layout-gutter); background: rgb(0 0 0 / 0.55); }",
-  ".gem-popup-shell[data-gem-popup-preview='true'] .gem-popup-shell__dialog { position: relative; display: block; inset: auto; }",
+  // Bản xem trước (thẻ thư viện, trang ghép, lab). Ngoài canvas editor nó PHỦ CẢ KHUNG NHÌN như popup thật mở bằng
+  // showModal (top layer, che cả header và thanh thông báo): Chris 04/10/2026 thấy popup của trang ghép nằm dưới header,
+  // trong luồng trang, không giống store. Trong canvas editor nó vẫn nằm trong luồng trang trên một nền mờ giả, để chọn
+  // và sửa được như mọi band khác.
+  // Dialog định vị ĐÚNG như modal của trình duyệt (position: fixed; inset: 0; margin: auto), nên mọi bố cục (fullscreen,
+  // thẻ, takeover, sheet kéo tới 88dvh) ra cùng khung chữ nhật với popup mở thật; nền chỉ thay ::backdrop (không có ở
+  // dialog không-modal).
+  ":root:not(:has([data-gem-canvas])) .gem-popup-shell[data-gem-popup-preview='true'] { position: fixed; inset: 0; z-index: 1000; padding: 0; background: rgb(0 0 0 / 0.55); }",
+  ":root:not(:has([data-gem-canvas])) .gem-popup-shell[data-gem-popup-preview='true'] .gem-popup-shell__dialog { position: fixed; inset: 0; display: block; }",
+  ":root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] .gem-popup-shell__dialog { position: relative; display: block; inset: auto; }",
+  ":root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] { padding: var(--gem-space-xl) var(--gem-layout-gutter); background: rgb(0 0 0 / 0.55); }",
   "@media (min-width: 750px) {",
-  "  .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-desktop='fullscreen'] { padding: 0; }",
-  "  .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-desktop='fullscreen'] .gem-popup-shell__dialog { height: 720px; max-height: none; }",
+  "  :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; }",
   "}",
   "@media (max-width: 749px) {",
-  "  .gem-popup-shell[data-gem-popup-preview='true'] { padding: 0; }",
-  "  .gem-popup-shell[data-gem-popup-preview='true'] .gem-popup-shell__dialog { height: 844px; max-height: none; width: 100%; max-width: 100%; }",
-  "  .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-mobile='sheet'] { padding-top: 160px; }",
-  "  .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-mobile='sheet'] .gem-popup-shell__dialog { min-height: 0; }",
+  "  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] { padding: 0; }",
+  "  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] .gem-popup-shell__dialog { height: 844px; max-height: none; width: 100%; max-width: 100%; }",
+  "  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-mobile='sheet'] { padding-top: 160px; }",
+  "  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-mobile='sheet'] .gem-popup-shell__dialog { min-height: 0; }",
   "}"
 ];
 var GEM_POPUP_SHELL_CSS = GEM_POPUP_SHELL_CSS_LINES.join("\n");
+
+// ../../packages/gem-framework/src/primitives.ts
+var dividerMask = (path) => `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='${path}'/%3E%3C/svg%3E")`;
+var spikePath = (() => {
+  const teeth = [];
+  for (let x = 95; x > 0; x -= 5) teeth.push(`L${x} ${teeth.length % 2 === 0 ? 10 : 3}`);
+  return `M0 0 H100 V3 ${teeth.join(" ")} L0 ${teeth.length % 2 === 0 ? 10 : 3} Z`;
+})();
+var DIVIDER_SHAPES = {
+  wave: "M0 0 H100 V3 C80 9 70 -1 50 4 C30 9 20 1 0 4 Z",
+  slope: "M0 0 H100 V10 Z",
+  spikes: spikePath,
+  arch: "M0 0 H100 V2 Q50 12 0 2 Z",
+  blob: "M0 0 H100 V4 C85 11 72 0 58 5 C44 10 30 2 16 6 C10 8 5 5 0 6 Z"
+};
+var GEM_DIVIDER_CSS_LINES = [
+  // The clip is WIDENED, not removed. `.gem-section` sets `overflow: clip` and the wedge is drawn
+  // at `top: 100%` / `bottom: 100%` — entirely outside the box — so the parent deleted every
+  // divider on every track. Measured on the live storefront 2026-08-25: a band with the documented
+  // `data-gem-section-background="dark"` + `data-gem-divider-bottom="wave"` rendered a FLAT edge,
+  // while the attribute, the rule and the fallback colour were all present and correct.
+  // NOT `overflow: visible`: `.gem-hero` uses the clip to hold its own border-radius, so releasing
+  // it entirely would paint square corners over that radius. A browser without
+  // `overflow-clip-margin` keeps plain `clip` — the divider stays hidden, which is today's
+  // behaviour rather than a broken layout.
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top], :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom] { position: relative; overflow: clip; overflow-clip-margin: var(--gem-divider-height, 48px); }",
+  // Shared geometry. `top: 100%` / `bottom: 100%` put it outside the box; z-index 1 keeps it above the
+  // neighbouring band's background. pointer-events: none so it never eats a click near the seam.
+  // Qualified by SHAPE. Unqualified, any value paints a solid 48px slab — including the literal
+  // "none", which the attribute writer forwards unchanged. The clip used to hide that; widening
+  // it above makes a stray value visible.
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='wave']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='slope']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='spikes']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='arch']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='blob']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='wave']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='slope']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='spikes']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='arch']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='blob']::before { content: ''; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; height: var(--gem-divider-height, 48px); background: var(--gem-section-bg, var(--gem-color-background)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }",
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom]::after { top: 100%; }",
+  // The top edge reuses the same masks, mirrored, so five shapes cover both edges.
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top]::before { bottom: 100%; transform: scaleY(-1); }",
+  ...Object.entries(DIVIDER_SHAPES).flatMap(([name, path]) => {
+    const mask = dividerMask(path);
+    return [
+      `:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='${name}']::after { -webkit-mask-image: ${mask}; mask-image: ${mask}; }`,
+      `:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='${name}']::before { -webkit-mask-image: ${mask}; mask-image: ${mask}; }`
+    ];
+  })
+];
+var GEM_DIVIDER_CSS = GEM_DIVIDER_CSS_LINES.join("\n");
+var GEM_CARD_CSS_LINES = [
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card] :is(.gem-section__inner, [class*='__inner']) { border-radius: var(--gem-radius-md); padding: var(--gem-space-xl); }",
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card='outline'] :is(.gem-section__inner, [class*='__inner']) { border: 1px solid var(--gem-color-border); }",
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card='shadow'] :is(.gem-section__inner, [class*='__inner']) { background: var(--gem-color-surface); box-shadow: var(--gem-shadow-md); }",
+  // `filled` tints the section's own ground rather than reaching for a fixed colour, so it stays
+  // legible on an accent or dark band instead of punching a light panel into it.
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card='filled'] :is(.gem-section__inner, [class*='__inner']) { background: color-mix(in srgb, currentColor 6%, transparent); }"
+];
+var GEM_CARD_CSS = GEM_CARD_CSS_LINES.join("\n");
+var GEM_FORM_SET_CSS_LINES = [
+  // FORM SET (form-set.ts). Every rule is scoped under [data-gem-form-set], which <body> carries only when the plan
+  // sets `tokens.form`: a store without one renders as before. The variables are always COMPLETE (missing keys take
+  // GEM_FORM_DEFAULTS) and are declared on the controls themselves (GEM_FORM_VAR_SCOPE), so these rules never fall back
+  // to a value nobody chose and a band that redefines its palette recolours its fields.
+  // THE FIELD LIST names the dawn-parity footer field (0,2,0, later in the sheet) so :is() — which takes its most
+  // specific argument — outranks it: before, that field ignored every form set (review of #665). The main search is
+  // LEFT OUT (`:where(:not(…))`, no specificity): it is a field and a button drawn as one block whose button belongs to
+  // the profile, and restyling only the field half left it open on one side.
+  // .gem-field-join is joined by construction (the seller chose the join element), so `data-gem-field-join` does not
+  // open it; gemsite's own field + button pairs read that attribute.
+  "[data-gem-form-set] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)) {",
+  "  min-height: var(--gem-input-height);",
+  "  height: auto;",
+  "  border: var(--gem-input-border-width) solid var(--gem-input-border-color);",
+  "  border-radius: var(--gem-input-radius);",
+  "  background: var(--gem-input-bg);",
+  "  padding-inline: var(--gem-input-padding-inline);",
+  "  font-size: var(--gem-input-font-size);",
+  "}",
+  // A textarea is two rows tall and never a pill: a 999px radius grows with the box as the shopper drags it. Keyed on
+  // the ELEMENT, not .gem-textarea, so a copy whose list adds its own fields (gemsite's cart note) reaches them too.
+  "[data-gem-form-set] textarea:is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)) {",
+  "  min-height: calc(var(--gem-input-height) * 2);",
+  "  border-radius: min(var(--gem-input-radius), 12px);",
+  "  padding-block: var(--gem-space-sm);",
+  "}",
+  "[data-gem-form-set] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)):focus-visible {",
+  "  outline: var(--gem-input-focus-ring, var(--gem-focus-ring, 2px solid var(--gem-color-accent)));",
+  "  outline-offset: var(--gem-focus-offset, 2px);",
+  "}",
+  // underline: only the bottom rule, no box. filled: the tinted field keeps its top corners and a bottom rule.
+  '[data-gem-form-set][data-gem-field-shape="underline"] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)) {',
+  "  border-width: 0 0 var(--gem-input-border-width);",
+  "  border-radius: 0;",
+  "  background: transparent;",
+  // Transparent, so it reads on whatever is behind it: the ink of the band it sits on, not the page's. A dark section
+  // changes `color` and leaves --gem-color-text dark (review of #665: dark text on #202223, 1:1).
+  "  color: inherit;",
+  "}",
+  // On a band its placeholder must follow that ink too (the UA grey does not: 3.47:1 on a dark band, the footer field's
+  // only visible label), and a select's options keep the system's own pair: the popup on Windows/Linux takes the
+  // select's colours, so inherited light ink on a transparent field drew light options on a light list.
+  '[data-gem-form-set][data-gem-field-shape="underline"] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input))::placeholder {',
+  "  color: color-mix(in srgb, currentColor 70%, transparent);",
+  "}",
+  '[data-gem-form-set][data-gem-field-shape="underline"] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)) option {',
+  "  color: CanvasText;",
+  "  background: Canvas;",
+  "}",
+  '[data-gem-form-set][data-gem-field-shape="filled"] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)) {',
+  "  border-width: 0 0 var(--gem-input-border-width);",
+  "  border-end-start-radius: 0;",
+  "  border-end-end-radius: 0;",
+  "}",
+  // The main search stays the profile's: the variables are declared on (and inherited by) every input, and the
+  // profile's base .gem-input rule reads two of them as hooks, so set those back to "unset" here (morph: 1 → 2px).
+  // DISABLED keeps a tinted fill (the base :disabled rule is 0,2,0 and the field rule above outranks it): the tint goes
+  // OVER the field's own fill, so a white field on a dark band stays white under its dark text (review of #665: a
+  // transparent tint there was 1:1). §9.2 state matrix: a disabled field must still look disabled, not only fainter.
+  "[data-gem-form-set] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)):disabled {",
+  "  background: color-mix(in srgb, currentColor 6%, var(--gem-input-bg));",
+  "}",
+  // An underline field has no fill of its own (its ink is the band's): tint the band, not a fill it does not draw.
+  '[data-gem-form-set][data-gem-field-shape="underline"] :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)):disabled {',
+  "  background: color-mix(in srgb, currentColor 6%, transparent);",
+  "}",
+  "[data-gem-form-set] .gem-search-form .gem-input {",
+  "  --gem-input-border-width: initial;",
+  "  --gem-input-radius: initial;",
+  "}",
+  "[data-gem-form-set] .gem-checkbox {",
+  "  inline-size: var(--gem-checkbox-size);",
+  "  block-size: var(--gem-checkbox-size);",
+  "  accent-color: var(--gem-checkbox-accent);",
+  "}"
+];
+var GEM_FORM_SET_CSS = GEM_FORM_SET_CSS_LINES.join("\n");
 var GEM_COUNTDOWN_ENDED_CSS_LINES = [
   ":root:not(:has([data-gem-canvas])) [data-gem-section-id][data-gem-countdown-ended='true'] { display: none; }",
   ":root:has([data-gem-canvas]) [data-gem-section-id][data-gem-countdown-ended='true'] { opacity: .55; }",
@@ -979,12 +1204,12 @@ var GEM_ROW_CSS_LINES = [
 var GEM_ROW_GAP_CSS = GEM_ROW_GAP_CSS_LINES.join("\n");
 var GEM_ROW_CSS = GEM_ROW_CSS_LINES.join("\n");
 var GEM_GRID_COLUMNS_KNOB_CSS_LINES = [
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-grid-columns='2'] :is(.gem-section__grid, [class*='__grid']):not(.gem-row) { grid-template-columns: repeat(2, minmax(0, 1fr)); }",
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-grid-columns='2'] .gem-row:is(.gem-section__grid, [class*='__grid']):not(.gem-row .gem-row) { --gem-row-cols: 2; --gem-row-cols-md: 2; --gem-row-tracks: initial; --gem-row-tracks-md: initial; }",
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-grid-columns='3'] :is(.gem-section__grid, [class*='__grid']):not(.gem-row) { grid-template-columns: repeat(3, minmax(0, 1fr)); }",
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-grid-columns='3'] .gem-row:is(.gem-section__grid, [class*='__grid']):not(.gem-row .gem-row) { --gem-row-cols: 3; --gem-row-cols-md: 3; --gem-row-tracks: initial; --gem-row-tracks-md: initial; }",
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-grid-columns='4'] :is(.gem-section__grid, [class*='__grid']):not(.gem-row) { grid-template-columns: repeat(4, minmax(0, 1fr)); }",
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-grid-columns='4'] .gem-row:is(.gem-section__grid, [class*='__grid']):not(.gem-row .gem-row) { --gem-row-cols: 4; --gem-row-cols-md: 4; --gem-row-tracks: initial; --gem-row-tracks-md: initial; }"
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-grid-columns='2'] :is(.gem-section__grid, [class*='__grid']):not(.gem-row) { grid-template-columns: repeat(2, minmax(0, 1fr)); }",
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-grid-columns='2'] .gem-row:is(.gem-section__grid, [class*='__grid']):not(.gem-row .gem-row) { --gem-row-cols: 2; --gem-row-cols-md: 2; --gem-row-tracks: initial; --gem-row-tracks-md: initial; }",
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-grid-columns='3'] :is(.gem-section__grid, [class*='__grid']):not(.gem-row) { grid-template-columns: repeat(3, minmax(0, 1fr)); }",
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-grid-columns='3'] .gem-row:is(.gem-section__grid, [class*='__grid']):not(.gem-row .gem-row) { --gem-row-cols: 3; --gem-row-cols-md: 3; --gem-row-tracks: initial; --gem-row-tracks-md: initial; }",
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-grid-columns='4'] :is(.gem-section__grid, [class*='__grid']):not(.gem-row) { grid-template-columns: repeat(4, minmax(0, 1fr)); }",
+  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-grid-columns='4'] .gem-row:is(.gem-section__grid, [class*='__grid']):not(.gem-row .gem-row) { --gem-row-cols: 4; --gem-row-cols-md: 4; --gem-row-tracks: initial; --gem-row-tracks-md: initial; }"
 ];
 var GEM_GRID_COLUMNS_ROW_KNOB_CSS = GEM_GRID_COLUMNS_KNOB_CSS_LINES.filter((line) => line.includes(" .gem-row:is(")).join("\n");
 function createGemStyleKnobCss(options = {}, selector = ":root") {
@@ -1001,20 +1226,34 @@ function createGemStyleKnobCss(options = {}, selector = ":root") {
   });
 }
 function createGemThemeCss(tokens, selector = ":root", options = {}) {
-  return [
-    createGemTokenCss(tokens, selector),
-    // Set the knobs the space / radius / border / type ramps read (only when they differ from the
-    // default 1, so a standard-shaped storefront emits nothing extra).
-    ...createGemStyleKnobCss(options, selector),
-    "",
-    createGemBaseCss(options.profile ?? "dawn-parity")
-  ].join("\n");
+  const parts = createGemThemeCssParts(tokens, selector, options);
+  return parts.tokens + parts.primitives + parts.popupShell + parts.sections;
+}
+function createGemThemeCssParts(tokens, selector = ":root", options = {}) {
+  const base = createGemBaseCssParts(options.profile ?? "dawn-parity");
+  return {
+    tokens: [
+      createGemTokenCss(tokens, selector),
+      // Set the knobs the space / radius / border / type ramps read (only when they differ from the
+      // default 1, so a standard-shaped storefront emits nothing extra).
+      ...createGemStyleKnobCss(options, selector),
+      "",
+      ""
+    ].join("\n"),
+    primitives: base.primitives,
+    popupShell: [GEM_POPUP_SHELL_CSS, "", ""].join("\n"),
+    sections: base.sections
+  };
 }
 function createSectionClassName(section) {
   return `gem-section gem-${slugify(section.archetype)} gem-${slugify(section.archetype)}--${slugify(section.variant)}`;
 }
 function createGemBaseCss(profile = "dawn-parity") {
-  return [
+  const parts = createGemBaseCssParts(profile);
+  return parts.primitives + parts.sections;
+}
+function createGemBaseCssParts(profile) {
+  const reset = [
     "*, *::before, *::after {",
     "  box-sizing: border-box;",
     "}",
@@ -1089,16 +1328,12 @@ function createGemBaseCss(profile = "dawn-parity") {
     "  overflow: hidden !important;",
     "  clip: rect(0, 0, 0, 0) !important;",
     "  white-space: nowrap !important;",
-    "}",
-    "",
-    createPrimitiveCss(),
-    "",
-    createShellCss(),
-    "",
-    createSectionCss(),
-    "",
-    createThemeProfileCss(profile)
+    "}"
   ].join("\n");
+  return {
+    primitives: [reset, "", createPrimitiveCss(), "", ""].join("\n"),
+    sections: [createShellCss(), "", createSectionCss(), "", createThemeProfileCss(profile)].join("\n")
+  };
 }
 function createThemeProfileCss(profile = "dawn-parity") {
   return profile === "dawn-parity" ? createDawnParityCss() : createMorphProfileCss();
@@ -1338,6 +1573,7 @@ function createPrimitiveCss() {
     "  block-size: var(--gem-space-lg);",
     "  accent-color: var(--gem-color-accent);",
     "}",
+    ...GEM_FORM_SET_CSS_LINES,
     ".gem-submit {",
     "  cursor: pointer;",
     "}",
@@ -2092,7 +2328,6 @@ function createPrimitiveCss() {
     ...GEM_DIVIDER_CSS_LINES,
     ...GEM_CARD_CSS_LINES,
     ...GEM_COUNTDOWN_ENDED_CSS_LINES,
-    ...GEM_POPUP_SHELL_CSS_LINES,
     ".gem-promo-banner, .gem-promo-tile {",
     "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
     "  border-radius: var(--gem-radius-md);",
@@ -2634,17 +2869,17 @@ function createSectionCss() {
     // theme + published) and on the sim-preview markup. Grid items justify; text aligns. The text
     // rule also reaches hero copy + section content so heroes honor it (their absolute-positioned
     // copy box keeps its tuned position; only the text inside re-aligns).
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-content-alignment='left'] .gem-section__inner { justify-items: start; }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-content-alignment='left'] :is(.gem-section__inner, .gem-hero-banner__copy, [class*='__content']) { text-align: left; }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-content-alignment='center'] .gem-section__inner { justify-items: center; }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-content-alignment='center'] :is(.gem-section__inner, .gem-hero-banner__copy, [class*='__content']) { text-align: center; }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-content-alignment='right'] .gem-section__inner { justify-items: end; }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-content-alignment='right'] :is(.gem-section__inner, .gem-hero-banner__copy, [class*='__content']) { text-align: right; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-alignment='left'] .gem-section__inner { justify-items: start; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-alignment='left'] :is(.gem-section__inner, .gem-hero-banner__copy, [class*='__content']) { text-align: left; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-alignment='center'] .gem-section__inner { justify-items: center; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-alignment='center'] :is(.gem-section__inner, .gem-hero-banner__copy, [class*='__content']) { text-align: center; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-alignment='right'] .gem-section__inner { justify-items: end; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-alignment='right'] :is(.gem-section__inner, .gem-hero-banner__copy, [class*='__content']) { text-align: right; }",
     // SAFETY: justify-items above content-sizes the inner grid's items, which would COLLAPSE a
     // full-bleed grid child (a mosaic/collage/product grid that must span the row) to min-content —
     // i.e. the section visually disappears. Re-stretch any grid/media/mosaic direct child so alignment
     // only ever moves TEXT, never breaks a section's own layout (fix: collage vanished in wf_0102).
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-content-alignment] .gem-section__inner > :is([class*='__grid'], [class*='__media'], [class*='__mosaic'], [class*='__masonry'], [class*='__frame'], [class*='__collage'], [class*='__row']) { justify-self: stretch; width: 100%; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-alignment] .gem-section__inner > :is([class*='__grid'], [class*='__media'], [class*='__mosaic'], [class*='__masonry'], [class*='__frame'], [class*='__collage'], [class*='__row']) { justify-self: stretch; width: 100%; }",
     // Text-position knob (the VERTICAL sibling of content_alignment) — set by set_layout text_position
     // (gemboss override key gem_text_position), emitted as data-gem-text-position by the lean-hero
     // renderer (shopify-adapter leanHeroLayoutKeys). It had NO CSS anywhere: the agent could pick it,
@@ -2656,16 +2891,16 @@ function createSectionCss() {
     // (0,3,0) beats the component's own `.gem-hero-banner--default .gem-hero-banner__copy` (0,2,0),
     // so this wins only when the operator sets the knob; unset, the tuned default position stands.
     // `bottom`/`top: auto` is required on each: leaving both insets set pins the box to BOTH edges.
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-text-position='top'] .gem-hero-banner__copy { top: 50px; bottom: auto; }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-text-position='center'] .gem-hero-banner__copy { top: 50%; bottom: auto; transform: translate(-50%, -50%); }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-text-position='bottom'] .gem-hero-banner__copy { bottom: 50px; top: auto; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-text-position='top'] .gem-hero-banner__copy { top: 50px; bottom: auto; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-text-position='center'] .gem-hero-banner__copy { top: 50%; bottom: auto; transform: translate(-50%, -50%); }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-text-position='bottom'] .gem-hero-banner__copy { bottom: 50px; top: auto; }",
     // Non-hero sections: move the content stack within whatever spare height the section has (a
     // `section_height: tall` section, say). `align-content` is a no-op when the grid has no spare
     // space, so this never disturbs a normally-sized section — it only answers the same vertical
     // question on the sections where the question can even be asked.
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-text-position='top'] .gem-section__inner { align-content: start; }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-text-position='center'] .gem-section__inner { align-content: center; }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-text-position='bottom'] .gem-section__inner { align-content: end; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-text-position='top'] .gem-section__inner { align-content: start; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-text-position='center'] .gem-section__inner { align-content: center; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-text-position='bottom'] .gem-section__inner { align-content: end; }",
     // Media-position knob (section LAYOUT axis) — set by set_layout media_position (gemboss override key
     // gem_media_position). On a genuine two-column section it swaps the image column to the chosen side
     // by re-ordering the media child. TWO shapes qualify: (a) `__media` is a DIRECT child of the inner
@@ -2677,16 +2912,16 @@ function createSectionCss() {
     // __media), so `grid > __media` never matches a card's image → we swap real 2-col layouts and never
     // reorder cards. A full-bleed background-image hero has its `__media` absolutely positioned, so
     // `order` is a natural no-op there — exactly right.
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-media-position='left'] .gem-section__inner > [class*='__media'], :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-media-position='left'] .gem-section__inner > [class*='__grid'] > [class*='__media'] { order: -1; }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-media-position='right'] .gem-section__inner > [class*='__media'], :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-media-position='right'] .gem-section__inner > [class*='__grid'] > [class*='__media'] { order: 1; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-media-position='left'] .gem-section__inner > [class*='__media'], :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-media-position='left'] .gem-section__inner > [class*='__grid'] > [class*='__media'] { order: -1; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-media-position='right'] .gem-section__inner > [class*='__media'], :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-media-position='right'] .gem-section__inner > [class*='__grid'] > [class*='__media'] { order: 1; }",
     // Spacing/density knob — set by set_layout content_spacing. Scales the inner grid gap (the gap
     // between columns + stacked rows), the direct answer to wf_0101's 'khoảng cách giữa 2 cột'.
     // Density knob — set by set_layout content_spacing. Scales the gap of the inner content stack.
     // (Per-card GRID spacing is governed by the tuned card-mode/variant rules — changed via
     // swap_variant, not this knob — so we don't fight their specificity here.)
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-content-spacing='tight'] .gem-section__inner { gap: var(--gem-space-sm); }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-content-spacing='normal'] .gem-section__inner { gap: var(--gem-space-lg); }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-content-spacing='roomy'] .gem-section__inner { gap: var(--gem-space-3xl); }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-spacing='tight'] .gem-section__inner { gap: var(--gem-space-sm); }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-spacing='normal'] .gem-section__inner { gap: var(--gem-space-lg); }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-spacing='roomy'] .gem-section__inner { gap: var(--gem-space-3xl); }",
     // HERO COPY STACK — same rules as gemsite app/globals.css (gemsite #609), kept in sync by hand.
     // On a full-bleed hero the inner grid has ONE in-flow child (the media is absolutely positioned), so the
     // inner `gap` above spaces nothing and the knob was MUTE: probed on the live storefront (gemboss acceptance
@@ -2709,18 +2944,18 @@ function createSectionCss() {
     ":is(.gem-hero-banner--default, .gem-hero-banner--dawn-image-banner)[data-gem-content-spacing='roomy'] .gem-hero-banner__copy > :not(:last-child), .gem-hero-banner[data-gem-content-spacing='roomy'] .gem-hero-slideshow__copy > :not(:last-child) { margin-bottom: 0; }",
     // Width knob — set by set_layout content_width. Overrides the inner container width: full-bleed
     // edge-to-edge, the default contained width, or a narrow reading measure.
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-content-width='full'] .gem-section__inner { width: 100%; max-width: none; }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-content-width='contained'] .gem-section__inner { width: min(var(--gem-layout-page, 1180px), calc(100% - var(--gem-layout-gutter, 32px))); max-width: none; }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-content-width='narrow'] .gem-section__inner { width: min(56rem, calc(100% - var(--gem-layout-gutter, 32px))); }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-width='full'] .gem-section__inner { width: 100%; max-width: none; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-width='contained'] .gem-section__inner { width: min(var(--gem-layout-page, 1180px), calc(100% - var(--gem-layout-gutter, 32px))); max-width: none; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-content-width='narrow'] .gem-section__inner { width: min(56rem, calc(100% - var(--gem-layout-gutter, 32px))); }",
     // Height knob — set by set_layout section_height. Sets min-height on BOTH the section element
     // and its inner: the section-level rule (attr+class = (0,2,0)) beats a component's single-class
     // floor like `.gem-hero-banner--default { min-height: 720px }` (0,1,0), so "make the hero
     // shorter/taller" actually re-sizes the section (the inner-only rule alone left the section floored).
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-section-height='short'] { min-height: 420px; }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-section-height='tall'] { min-height: 760px; }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-section-height='short'] .gem-section__inner { min-height: 420px; }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-section-height='normal'] .gem-section__inner { min-height: auto; }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-section-height='tall'] .gem-section__inner { min-height: 760px; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-height='short'] { min-height: 420px; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-height='tall'] { min-height: 760px; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-height='short'] .gem-section__inner { min-height: 420px; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-height='normal'] .gem-section__inner { min-height: auto; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-height='tall'] .gem-section__inner { min-height: 760px; }",
     // Columns knob — set by set_layout grid_columns. Overrides the grid container's column count. The
     // contract advertises grid_columns for any section with a `columns` setting (layoutCapabilitiesOf),
     // but MOST gem sections name their grid `{section}__grid` (gem-multicolumn__grid, gem-stats__grid,
@@ -2743,25 +2978,25 @@ function createSectionCss() {
     // The shape-divider below paints the section's OWN
     // colour into the neighbouring section, so it needs a single name for "whatever this band is",
     // rather than re-deriving the swatch in every divider rule.
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-section-background='default'] { --gem-section-bg: var(--gem-color-background); background: transparent; }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-section-background='surface'] { --gem-section-bg: var(--gem-color-surface); background: var(--gem-section-bg); padding-block: var(--gem-space-xl); }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-section-background='accent'] { --gem-section-bg: var(--gem-color-accent); background: var(--gem-section-bg); color: var(--gem-color-accent-text); --gem-band-bg: var(--gem-color-accent); --gem-focus-ring: 2px solid var(--gem-color-accent-text); padding-block: var(--gem-space-xl); }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-section-background='dark'] { --gem-section-bg: var(--gem-color-text); background: var(--gem-section-bg); color: var(--gem-color-background); --gem-band-bg: var(--gem-color-text); --gem-focus-ring: 2px solid var(--gem-color-background); padding-block: var(--gem-space-xl); }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-section-background='light'] { --gem-section-bg: var(--gem-color-background); background: var(--gem-section-bg); color: var(--gem-color-text); padding-block: var(--gem-space-xl); }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='default'] { --gem-section-bg: var(--gem-color-background); background: transparent; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='surface'] { --gem-section-bg: var(--gem-color-surface); background: var(--gem-section-bg); padding-block: var(--gem-space-xl); }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='accent'] { --gem-section-bg: var(--gem-color-accent); background: var(--gem-section-bg); color: var(--gem-color-accent-text); --gem-band-bg: var(--gem-color-accent); --gem-focus-ring: 2px solid var(--gem-color-accent-text); padding-block: var(--gem-space-xl); }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='dark'] { --gem-section-bg: var(--gem-color-text); background: var(--gem-section-bg); color: var(--gem-color-background); --gem-band-bg: var(--gem-color-text); --gem-focus-ring: 2px solid var(--gem-color-background); padding-block: var(--gem-space-xl); }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='light'] { --gem-section-bg: var(--gem-color-background); background: var(--gem-section-bg); color: var(--gem-color-text); padding-block: var(--gem-space-xl); }",
     // On accent/dark bands, keep muted sub-copy + headings legible against the inverted ground.
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-section-background='accent'] :is(.gem-section__heading, .gem-section__body, .gem-section__eyebrow), :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-section-background='dark'] :is(.gem-section__heading, .gem-section__body, .gem-section__eyebrow) { color: inherit; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='accent'] :is(.gem-section__heading, .gem-section__body, .gem-section__eyebrow), :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-section-background='dark'] :is(.gem-section__heading, .gem-section__body, .gem-section__eyebrow) { color: inherit; }",
     // Price-colour knob (set by set_style price_color) — recolours the PRICE text on a product/collection
     // section. red/green are literal sale/savings semantics; accent uses the brand token; default inherits.
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-price-color='accent'] :is(.gem-price, .gem-price__regular, [class*='__price']) { color: var(--gem-color-accent); }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-price-color='red'] :is(.gem-price, .gem-price__regular, [class*='__price']) { color: #d61f1f; }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-price-color='green'] :is(.gem-price, .gem-price__regular, [class*='__price']) { color: #1a7f37; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-price-color='accent'] :is(.gem-price, .gem-price__regular, [class*='__price']) { color: var(--gem-color-accent); }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-price-color='red'] :is(.gem-price, .gem-price__regular, [class*='__price']) { color: #d61f1f; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-price-color='green'] :is(.gem-price, .gem-price__regular, [class*='__price']) { color: #1a7f37; }",
     // Text-weight knob (set by set_layout text_weight) — scales the section's --gem-style-weight ramp
     // (which weight-bearing type multiplies) AND sets the heading font-weight directly, so 'bold'
     // emboldens the headings on any section. default/normal inherit.
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-text-weight='bold'] { --gem-style-weight: 1.25; }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-text-weight='bold'] :is(.gem-section__heading, .gem-hero-banner__copy h1, .gem-hero-banner__copy h2) { font-weight: 800; }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-text-weight='light'] { --gem-style-weight: 0.8; }",
-    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow, .gem-footer)[data-gem-text-weight='light'] :is(.gem-section__heading, .gem-hero-banner__copy h1, .gem-hero-banner__copy h2) { font-weight: 350; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-text-weight='bold'] { --gem-style-weight: 1.25; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-text-weight='bold'] :is(.gem-section__heading, .gem-hero-banner__copy h1, .gem-hero-banner__copy h2) { font-weight: 800; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-text-weight='light'] { --gem-style-weight: 0.8; }",
+    ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-text-weight='light'] :is(.gem-section__heading, .gem-hero-banner__copy h1, .gem-hero-banner__copy h2) { font-weight: 350; }",
     // G4 — per-element colour (set by set_style element_color {target, colour}). One mechanism colours
     // the heading / eyebrow / badge in a section; swatches map to brand token or literal sale/dark.
     // (price uses data-gem-price-color above.) accent=brand, red/green=sale/savings, dark=text token.
@@ -4493,37 +4728,58 @@ var promoPopupPluginRegistrationLines = [
   "  registerPlugin('promo-popup', ({ api }) => {",
   // Only the explicit hook opts in. Every promo-popup section carries the archetype class .gem-promo-popup, and
   // binding by class took over variants that run their own behavior.js (GemFactory gap #16, 03/10/2026).
+  // A section that has the hook AND its own behavior.js (promo-popup.email-capture.v1) renders the plugin's bound
+  // mark, data-gem-bound-promo-popup, so mark() below skips it (gem-framework 0.8.3).
   "    const popups = document.querySelectorAll('[data-gem-promo-popup]');",
   "    let bound = 0;",
+  "    const shown = [];",
   "    const storagePrefix = 'gem:promo-popup-dismissed:';",
   "    const now = () => Date.now ? Date.now() : new Date().getTime();",
-  "    const readDismissedUntil = (key) => {",
-  "      try { return Number(target.localStorage && target.localStorage.getItem(storagePrefix + key) || '0'); }",
+  // ONE storage key, two meanings in the wild (gem-framework 0.8.0). gemsite's port stores WHEN the shopper
+  // dismissed; runtimes up to 0.7 stored when the dismissal ENDS. Read both: a value in the future can only be an
+  // end, so it holds until then (and is rewritten once as a dismissal time); a value in the past is a dismissal time and
+  // the popup's own window applies. Written from now on: the dismissal time (gemsite's meaning), which also lets a
+  // seller who shortens the window shorten it for past dismissals. An end written by 0.7 that has already passed
+  // reads as a dismissal time: that popup stays away one more window at most, never less than the shopper asked.
+  "    const readDismissal = (key) => {",
+  "      try { const value = Number(target.localStorage && target.localStorage.getItem(storagePrefix + key) || '0'); return Number.isFinite(value) && value > 0 ? value : 0; }",
   "      catch { return 0; }",
   "    };",
-  "    const writeDismissedUntil = (key, timestamp) => {",
+  "    const writeDismissedAt = (key, timestamp) => {",
   "      try { if (target.localStorage) target.localStorage.setItem(storagePrefix + key, String(timestamp)); }",
   "      catch { /* storage can be unavailable in private contexts */ }",
   "    };",
+  "    const isDismissed = (key, windowMs) => {",
+  "      const stored = readDismissal(key);",
+  "      if (!stored) return false;",
+  "      const at = now();",
+  // Converted ONCE: only when the end minus this window is already past (it is then the dismissal time). An end
+  // further out than one window (the 0.7 window was longer) is left as it is and holds until it passes.
+  "      if (stored > at) { if (stored - windowMs <= at) writeDismissedAt(key, stored - windowMs); return true; }",
+  "      return at - stored < windowMs;",
+  "    };",
   "    popups.forEach((popup, index) => {",
   "      if (!mark(popup, 'promo-popup')) return;",
   "      const key = popup.id || popup.getAttribute && popup.getAttribute('data-gem-section-library-id') || String(index);",
   "      const delaySeconds = Number(popup.getAttribute && (popup.getAttribute('data-gem-promo-delay') || '0'));",
   "      const frequencyDays = Number(popup.getAttribute && (popup.getAttribute('data-gem-promo-frequency-days') || '7'));",
+  "      const windowMs = (Number.isFinite(frequencyDays) ? Math.max(1, frequencyDays) : 7) * 86400000;",
   "      const dialog = popup.querySelector && popup.querySelector('[data-gem-promo-popup-dialog]');",
   "      const overlay = popup.querySelector && popup.querySelector('[data-gem-promo-popup-overlay]');",
-  "      const open = (reason = 'timer') => {",
-  "        if (readDismissedUntil(key) > now()) { popup.dataset.gemPromoPopupState = 'dismissed'; return false; }",
+  "      const show = (reason) => {",
   "        popup.hidden = false;",
   "        if (dialog) dialog.hidden = false;",
   "        if (overlay) overlay.hidden = false;",
   "        popup.dataset.gemPromoPopupState = 'open';",
   "        api.emit('gem:promo-popup:open', { source: 'gem-runtime', id: popup.id || undefined, reason });",
+  "      };",
+  "      const open = (reason = 'timer') => {",
+  "        if (isDismissed(key, windowMs)) { popup.dataset.gemPromoPopupState = 'dismissed'; return false; }",
+  "        show(reason);",
   "        return true;",
   "      };",
   "      const close = (reason = 'dismiss') => {",
-  "        const days = Number.isFinite(frequencyDays) ? Math.max(1, frequencyDays) : 7;",
-  "        writeDismissedUntil(key, now() + days * 86400000);",
+  "        writeDismissedAt(key, now());",
   "        if (dialog) dialog.hidden = true;",
   "        if (overlay) overlay.hidden = true;",
   "        popup.dataset.gemPromoPopupState = 'closed';",
@@ -4536,10 +4792,63 @@ var promoPopupPluginRegistrationLines = [
   "      if (canListen(overlay)) overlay.addEventListener('click', () => close('overlay'));",
   "      popup.dataset.gemPromoPopupState = 'ready';",
   "      const delay = Math.max(0, Number.isFinite(delaySeconds) ? delaySeconds : 0) * 1000;",
-  "      target.setTimeout ? target.setTimeout(() => open('timer'), delay) : open('timer');",
+  // WHEN it opens, gemsite's contract (components/behaviors/promoPopup.js): data-gem-promo-trigger = "delay"
+  // (default, and any unknown value) | "exit_intent" (the pointer leaves through the top 10px of the window; a
+  // touch screen has no pointer to leave with, so it falls back to the delay) | "scroll" (the shopper has scrolled
+  // data-gem-promo-scroll-percent of the page, 10 to 90, default 50; a page that still cannot scroll at the delay
+  // opens then). It opens once per page view, whichever fires first. data-gem-promo-armed says which one is live.
+  // The delay keeps the runtime's default of 0 seconds (gemsite's port defaults to 6).
+  "      const trigger = String(popup.getAttribute && popup.getAttribute('data-gem-promo-trigger') || 'delay').trim();",
+  "      const rawPercent = String(popup.getAttribute && popup.getAttribute('data-gem-promo-scroll-percent') || '').trim();",
+  "      const parsedPercent = rawPercent ? Number(rawPercent) : NaN;",
+  "      const scrollPercent = Number.isFinite(parsedPercent) ? Math.min(90, Math.max(10, parsedPercent)) : 50;",
+  "      const canHover = () => { try { return Boolean(target.matchMedia && target.matchMedia('(hover: hover) and (pointer: fine)').matches); } catch { return false; } };",
+  "      const armed = trigger === 'exit_intent' && canHover() ? 'exit_intent' : trigger === 'scroll' ? 'scroll' : 'delay';",
+  "      if (popup.setAttribute) popup.setAttribute('data-gem-promo-armed', armed);",
+  "      let opened = false;",
+  "      const disarm = [];",
+  "      const openOnce = (reason) => { if (opened) return; opened = true; disarm.splice(0).forEach((off) => off()); open(reason); };",
+  // An explicit open (api.promoPopup.open) counts as THE open of this page view: it disarms the pending trigger, so the
+  // delay or exit intent does not show the popup a second time (code review of #675), and it does nothing on a popup
+  // that is already open.
+  "      shown.push((reason) => { opened = true; disarm.splice(0).forEach((off) => off()); if (popup.dataset.gemPromoPopupState !== 'open') show(reason); });",
+  "      if (armed === 'exit_intent') {",
+  "        const onMouseOut = (event) => { if (event.relatedTarget || event.clientY >= 10) return; openOnce('exit_intent'); };",
+  "        if (canListen(document)) {",
+  "          document.addEventListener('mouseout', onMouseOut);",
+  "          disarm.push(() => document.removeEventListener && document.removeEventListener('mouseout', onMouseOut));",
+  "        }",
+  "      } else if (armed === 'scroll') {",
+  "        const room = () => Number(document.documentElement && document.documentElement.scrollHeight || 0) - Number(target.innerHeight || 0);",
+  "        const check = () => { const r = room(); if (r > 0 && (Number(target.scrollY || target.pageYOffset || 0) / r) * 100 >= scrollPercent) openOnce('scroll'); };",
+  "        let ticking = false;",
+  "        const onScroll = () => {",
+  "          if (ticking) return;",
+  "          ticking = true;",
+  "          const frame = target.requestAnimationFrame ? (fn) => target.requestAnimationFrame(fn) : (fn) => target.setTimeout && target.setTimeout(fn, 16);",
+  "          frame(() => { ticking = false; check(); });",
+  "        };",
+  "        if (canListen(target)) {",
+  "          target.addEventListener('scroll', onScroll, { passive: true });",
+  "          target.addEventListener('resize', check);",
+  "          target.addEventListener('load', check);",
+  "          disarm.push(() => { if (!target.removeEventListener) return; target.removeEventListener('scroll', onScroll); target.removeEventListener('resize', check); target.removeEventListener('load', check); });",
+  "        }",
+  "        if (target.setTimeout) {",
+  "          const fallback = target.setTimeout(() => { if (room() <= 0) openOnce('timer'); }, delay);",
+  "          disarm.push(() => target.clearTimeout && target.clearTimeout(fallback));",
+  "        }",
+  "        check();",
+  "      } else {",
+  "        target.setTimeout ? target.setTimeout(() => openOnce('timer'), delay) : openOnce('timer');",
+  "      }",
   "      bound += 1;",
   "    });",
-  "    api.promoPopup = { open: () => popups.forEach((popup) => { popup.hidden = false; popup.dataset.gemPromoPopupState = 'open'; }) };",
+  // The popups THIS plugin bound, never every [data-gem-promo-popup]: one a section's own behavior.js drives carries the
+  // bound mark already (email-capture renders data-gem-bound-promo-popup="section") and is not the plugin's to open. An
+  // explicit open (a teaser, a test) shows the dialog itself, not only the root, and ignores the dismissal window,
+  // which is about opening on its own. Before 0.8.3 it unhid the root only, so the dialog stayed hidden.
+  "    api.promoPopup = { open: () => shown.forEach((show) => show('api')) };",
   "    api.emit('gem:promo-popup:ready', { source: 'gem-runtime', count: bound });",
   "  });"
 ];
@@ -4555,7 +4864,14 @@ var stickyAtcPluginRegistrationLines = [
   "    };",
   "    bars.forEach((bar) => {",
   "      if (!mark(bar, 'sticky-atc')) return;",
-  "      const threshold = Number(bar.getAttribute && (bar.getAttribute('data-gem-sticky-threshold') || '240'));",
+  // Two attribute names (gem-framework 0.8.0), each with its own default. data-gem-sticky-threshold is the
+  // runtime's (default 240). data-gem-sticky-atc-threshold is gemsite's (StickyAtcCompactBar.tsx): when the bar
+  // carries it, gemsite's rule decides: that number, else the --gem-sticky-atc-threshold CSS variable, else 360.
+  // A bar carrying both follows gemsite's attribute.
+  "      const cssThreshold = () => { try { return target.getComputedStyle ? Number(target.getComputedStyle(bar).getPropertyValue('--gem-sticky-atc-threshold')) : 0; } catch { return 0; } };",
+  "      const threshold = bar.hasAttribute && bar.hasAttribute('data-gem-sticky-atc-threshold')",
+  "        ? (Number(bar.getAttribute('data-gem-sticky-atc-threshold')) || cssThreshold() || 360)",
+  "        : Number(bar.getAttribute && (bar.getAttribute('data-gem-sticky-threshold') || '240'));",
   "      const update = () => {",
   "        const scrollY = Number(target.scrollY || target.pageYOffset || 0);",
   "        setState(bar, scrollY >= threshold ? 'visible' : 'hidden');",
@@ -4639,6 +4955,13 @@ var countdownPluginRegistrationLines = [
   "      let endAt = 0;",
   "      let handle = null;",
   "      let state = 'idle';",
+  // gem:countdown:start means the N seconds began: once. A visible-mode timer pauses and resumes as it leaves and
+  // re-enters the screen, and each resume used to announce a new start (gemboss PR #3758 review, item 7).
+  "      let started = false;",
+  // The visible-mode observer, released as soon as the timer can no longer run (complete or stopped), not at the
+  // next intersection change after it.
+  "      let observer = null;",
+  "      const release = () => { if (observer) { observer.disconnect(); observer = null; } };",
   "      const detail = () => ({ source: 'gem-runtime', id: timer.id || undefined, mode: 'duration', duration: total, remainingSeconds: Math.max(0, Math.ceil(left / 1000)) });",
   "      const render = () => {",
   "        const s = Math.max(0, Math.ceil(left / 1000));",
@@ -4654,6 +4977,7 @@ var countdownPluginRegistrationLines = [
   "      const halt = () => { if (handle !== null && target.clearInterval) target.clearInterval(handle); handle = null; };",
   "      const finish = () => {",
   "        halt();",
+  "        release();",
   "        left = 0;",
   "        state = 'complete';",
   "        render();",
@@ -4672,20 +4996,20 @@ var countdownPluginRegistrationLines = [
   "        endAt = Date.now() + left;",
   "        render();",
   "        if (target.setInterval) handle = target.setInterval(tick, 250);",
-  "        api.emit('gem:countdown:start', detail());",
+  "        if (!started) { started = true; api.emit('gem:countdown:start', detail()); }",
   "      };",
   "      const pause = (next) => {",
   "        if (state === 'running') { left = Math.max(0, endAt - Date.now()); halt(); }",
   "        if (state === 'complete' || state === 'stopped') return;",
   "        state = next;",
+  "        if (next === 'stopped') release();",
   "        render();",
   "      };",
   "      render();",
   "      if (stopEvent && canListen(scope)) scope.addEventListener(stopEvent, () => pause('stopped'));",
   "      if (mode === 'visible' && target.IntersectionObserver) {",
-  "        const observer = new target.IntersectionObserver((entries) => {",
+  "        observer = new target.IntersectionObserver((entries) => {",
   "          for (const entry of entries) entry.isIntersecting ? run() : pause('paused');",
-  "          if (state === 'complete' || state === 'stopped') observer.disconnect();",
   "        });",
   "        observer.observe(timer);",
   "      } else if (mode === 'mount' || mode === 'visible') run();",
@@ -4702,7 +5026,18 @@ var countdownPluginRegistrationLines = [
   "      const targetTime = countdownEnd(timer.getAttribute && timer.getAttribute('data-gem-countdown-target'));",
   "      const section = timer.closest ? timer.closest('[data-gem-section-id]') : null;",
   "      const band = section && section.hasAttribute && section.hasAttribute('data-gem-countdown-end') ? section : null;",
+  // Two readout schemes, one countdown (gem-framework 0.8.0). The runtime's own cells are
+  // [data-gem-countdown-days|hours|minutes|seconds]; the Liquid theme's initCountdown and gemsite write
+  // [data-gem-cd-days|hours|mins|secs] (gemsite CountdownBannerOfferBar.tsx). Both are written; a cell the markup
+  // does not carry is skipped. The readout ticks every second only when it shows seconds, else once a minute ON the
+  // minute of the remaining time (0.8.2): the next update is set for the instant the minute digit changes,
+  // (remaining % 60000) + a few ms, and re-aimed from the clock each time, so the digit is never a minute late.
+  // In the last minute the next change IS the end, so the chain aims at the end itself and stops there: nothing is
+  // left scheduled after it, and a deadline too far off for the one-shot end timer below still ends on time.
+  // A once-a-minute interval from mount time (0.8.0, 0.8.1) let it lag the true remaining time by up to 59 s.
+  "      const hasSecondsCell = Boolean(timer.querySelector && (timer.querySelector('[data-gem-cd-secs]') || timer.querySelector('[data-gem-countdown-seconds]')));",
   "      let handle = null;",
+  "      let announced = '';",
   "      const update = () => {",
   "        if (!Number.isFinite(targetTime)) {",
   "          timer.dataset.gemCountdownState = 'invalid';",
@@ -4713,20 +5048,43 @@ var countdownPluginRegistrationLines = [
   "        const days = Math.floor(remainingSeconds / 86400);",
   "        const hours = Math.floor((remainingSeconds % 86400) / 3600);",
   "        const minutes = Math.floor((remainingSeconds % 3600) / 60);",
+  "        const seconds = remainingSeconds % 60;",
+  // ONE end state: data-gem-countdown-state="complete" (the runtime's word, same as the event
+  // gem:countdown:complete and the duration timer). gemsite's port wrote "ended"; its meaning travels as the
+  // attribute data-gem-countdown-ended="true" on the timer, the same mark a duration timer gets at zero. A timer
+  // that is itself a section root is left to the band rule above, so it never hides a band that does not own a deadline.
   "        timer.dataset.gemCountdownState = ms > 0 ? 'running' : 'complete';",
   "        timer.dataset.gemCountdownRemainingSeconds = String(remainingSeconds);",
   "        write(timer, '[data-gem-countdown-days]', days);",
   "        write(timer, '[data-gem-countdown-hours]', hours);",
   "        write(timer, '[data-gem-countdown-minutes]', minutes);",
+  "        write(timer, '[data-gem-countdown-seconds]', seconds);",
+  "        write(timer, '[data-gem-cd-days]', days);",
+  "        write(timer, '[data-gem-cd-hours]', hours);",
+  "        write(timer, '[data-gem-cd-mins]', minutes);",
+  "        write(timer, '[data-gem-cd-secs]', seconds);",
   "        if (ms <= 0) {",
   "          if (band) band.setAttribute('data-gem-countdown-ended', 'true');",
+  "          if (timer.setAttribute && !(timer.hasAttribute && timer.hasAttribute('data-gem-section-id'))) timer.setAttribute('data-gem-countdown-ended', 'true');",
   "          if (handle !== null && target.clearInterval) { target.clearInterval(handle); handle = null; }",
   "        }",
-  "        api.emit(ms > 0 ? 'gem:countdown:start' : 'gem:countdown:complete', { source: 'gem-runtime', id: timer.id || undefined, remainingSeconds });",
+  // start: once a minute as before, but a per-second readout announces it once; complete: once.
+  "        const event = ms > 0 ? 'gem:countdown:start' : 'gem:countdown:complete';",
+  "        if (event === announced && (event === 'gem:countdown:complete' || hasSecondsCell)) return;",
+  "        announced = event;",
+  "        api.emit(event, { source: 'gem-runtime', id: timer.id || undefined, remainingSeconds });",
+  "      };",
+  "      const onTheMinute = () => {",
+  "        const ms = targetTime - Date.now();",
+  "        if (!(ms > 0) || !target.setTimeout) return;",
+  "        target.setTimeout(() => { update(); onTheMinute(); }, Math.min((ms % 60000) + 5, ms));",
   "      };",
   "      update();",
-  "      if (target.setInterval && Number.isFinite(targetTime) && targetTime - Date.now() > 0) handle = target.setInterval(update, 60000);",
-  // The readout moves once a minute, but the END is not allowed to wait for the next minute: one timer
+  "      if (Number.isFinite(targetTime) && targetTime - Date.now() > 0) {",
+  "        if (!hasSecondsCell) onTheMinute();",
+  "        else if (target.setInterval) handle = target.setInterval(update, 1000);",
+  "      }",
+  // A minute readout moves once a minute, but the END is not allowed to wait for the next minute: one timer
   // for the exact instant (while it fits a setTimeout, ~24.8 days; past that the minute tick gets there).
   "      const left = targetTime - Date.now();",
   "      if (target.setTimeout && Number.isFinite(left) && left > 0 && left < 2147483647) target.setTimeout(update, left);",
@@ -4740,7 +5098,13 @@ var revealOnScrollPluginRegistrationLines = [
   "    const nodes = document.querySelectorAll('[data-gem-reveal], .gem-reveal');",
   "    let bound = 0;",
   "    const reveal = (node) => { node.dataset.gemRevealState = 'in'; };",
-  "    if (!target.IntersectionObserver) { nodes.forEach(reveal); api.emit('gem:reveal:ready', { source: 'gem-runtime', count: 0 }); return; }",
+  "    // Reduced motion and no IntersectionObserver land on the same answer: show everything now (from gemsite revealOnScroll.js).",
+  "    const reduce = typeof target.matchMedia === 'function' && target.matchMedia('(prefers-reduced-motion: reduce)').matches;",
+  "    if (reduce || !target.IntersectionObserver) { nodes.forEach(reveal); api.emit('gem:reveal:ready', { source: 'gem-runtime', count: 0 }); return; }",
+  "    // Above the fold the browser has already painted the section: writing 'ready' would blink it out and back in.",
+  '    // `none` and `default` are the knob\'s "apply nothing" values; the attribute is still written, so skip them here.',
+  "    const off = (node) => { const v = node.getAttribute ? node.getAttribute('data-gem-reveal') : null; return v === 'none' || v === 'default'; };",
+  "    const inViewport = (node) => { if (!node.getBoundingClientRect) return true; const r = node.getBoundingClientRect(); const h = target.innerHeight || (document.documentElement && document.documentElement.clientHeight) || 0; return r.top < h && r.bottom > 0; };",
   "    const observer = new target.IntersectionObserver((entries, obs) => {",
   "      entries.forEach((entry) => {",
   "        if (!entry.isIntersecting) return;",
@@ -4751,6 +5115,7 @@ var revealOnScrollPluginRegistrationLines = [
   "    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });",
   "    nodes.forEach((node) => {",
   "      if (!mark(node, 'reveal-on-scroll')) return;",
+  "      if (off(node) || inViewport(node)) { reveal(node); bound += 1; return; }",
   "      if (!node.dataset.gemRevealState) node.dataset.gemRevealState = 'ready';",
   "      observer.observe(node);",
   "      bound += 1;",
@@ -4836,6 +5201,39 @@ var offerEnginePluginRegistrationLines = [
   "    api.emit('gem:offer:ready', { source: 'gem-runtime' });",
   "  });"
 ];
+var runtimePluginSourceLines = [
+  ["cart-drawer", cartDrawerPluginRegistrationLines],
+  ["mobile-menu", mobileMenuPluginRegistrationLines],
+  ["quantity-input", quantityInputPluginRegistrationLines],
+  ["variant-selects", variantSelectsPluginRegistrationLines],
+  ["predictive-search", predictiveSearchPluginRegistrationLines],
+  ["localization", localizationPluginRegistrationLines],
+  ["disclosure", disclosurePluginRegistrationLines],
+  ["tabs", tabsPluginRegistrationLines],
+  ["media-gallery", mediaGalleryPluginRegistrationLines],
+  ["carousel", carouselPluginRegistrationLines],
+  ["hero-slideshow", heroSlideshowPluginRegistrationLines],
+  ["quick-view", quickViewPluginRegistrationLines],
+  ["promo-popup", promoPopupPluginRegistrationLines],
+  ["sticky-atc", stickyAtcPluginRegistrationLines],
+  ["before_after", beforeAfterPluginRegistrationLines],
+  ["countdown", countdownPluginRegistrationLines],
+  ["reveal-on-scroll", revealOnScrollPluginRegistrationLines],
+  ["recently-viewed", recentlyViewedPluginRegistrationLines],
+  ["runtime-slot-loader", runtimeSlotLoaderPluginRegistrationLines],
+  ["offer-engine", offerEnginePluginRegistrationLines]
+];
+var noopPluginRegistrationLine = (key, readyEvent) => `  registerNoopPlugin(${JSON.stringify(key)}, ${JSON.stringify(readyEvent)});`;
+function gemRuntimePluginSources() {
+  const withBody = runtimePluginSourceLines.map(([key, lines]) => ({
+    key,
+    readyEvent: runtimePluginReadyEvents[key] ?? `gem:${key}:ready`,
+    hasBody: true,
+    lines
+  }));
+  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];
+}
 function pushPlugin(plugins, spec) {
   if (plugins.some((plugin) => plugin.key === spec.key)) return;
   plugins.push(spec);
@@ -4894,7 +5292,7 @@ function createHeaderRuntimeGrammar(header) {
 }
 function createGemRuntimeBootstrap(configArg) {
   const config = configArg.plugins.some((plugin) => plugin.key === "hero-slideshow") ? configArg : { ...configArg, plugins: [...configArg.plugins, { key: "hero-slideshow", loadStrategy: "idle" }] };
-  const pluginRegistrationLines = [...new Set(config.plugins.map((plugin) => plugin.key))].filter((key) => key !== "cart-drawer").filter((key) => key !== "mobile-menu").filter((key) => key !== "quantity-input").filter((key) => key !== "variant-selects").filter((key) => key !== "predictive-search").filter((key) => key !== "localization").filter((key) => key !== "disclosure" && key !== "tabs" && key !== "media-gallery" && key !== "carousel" && key !== "quick-view" && key !== "sticky-atc").filter((key) => key !== "promo-popup").filter((key) => key !== "before_after").filter((key) => key !== "countdown").filter((key) => key !== "reveal-on-scroll").filter((key) => key !== "recently-viewed").filter((key) => key !== "runtime-slot-loader").filter((key) => key !== "offer-engine").filter((key) => runtimePluginReadyEvents[key]).map((key) => `  registerNoopPlugin(${JSON.stringify(key)}, ${JSON.stringify(runtimePluginReadyEvents[key])});`);
+  const pluginRegistrationLines = [...new Set(config.plugins.map((plugin) => plugin.key))].filter((key) => !runtimePluginSourceLines.some(([sourceKey]) => sourceKey === key)).filter((key) => runtimePluginReadyEvents[key]).map((key) => noopPluginRegistrationLine(key, runtimePluginReadyEvents[key]));
   const enabledPluginKeys = new Set(config.plugins.map((plugin) => plugin.key));
   return [
     "(() => {",
@@ -4967,28 +5365,11 @@ function createGemRuntimeBootstrap(configArg) {
     "      if (readyEvent) api.emit(readyEvent, { source: 'gem-runtime' });",
     "    });",
     "  };",
-    ...enabledPluginKeys.has("cart-drawer") ? cartDrawerPluginRegistrationLines : [],
-    ...enabledPluginKeys.has("mobile-menu") ? mobileMenuPluginRegistrationLines : [],
-    ...enabledPluginKeys.has("quantity-input") ? quantityInputPluginRegistrationLines : [],
-    ...enabledPluginKeys.has("variant-selects") ? variantSelectsPluginRegistrationLines : [],
-    ...enabledPluginKeys.has("predictive-search") ? predictiveSearchPluginRegistrationLines : [],
-    ...enabledPluginKeys.has("localization") ? localizationPluginRegistrationLines : [],
-    ...enabledPluginKeys.has("disclosure") ? disclosurePluginRegistrationLines : [],
-    ...enabledPluginKeys.has("tabs") ? tabsPluginRegistrationLines : [],
-    ...enabledPluginKeys.has("media-gallery") ? mediaGalleryPluginRegistrationLines : [],
-    ...enabledPluginKeys.has("carousel") ? carouselPluginRegistrationLines : [],
-    // hero-slideshow is always scheduled (added to config above) + self-guards, so always register it.
-    ...enabledPluginKeys.has("hero-slideshow") ? heroSlideshowPluginRegistrationLines : [],
-    ...enabledPluginKeys.has("quick-view") ? quickViewPluginRegistrationLines : [],
-    ...enabledPluginKeys.has("promo-popup") ? promoPopupPluginRegistrationLines : [],
-    ...enabledPluginKeys.has("sticky-atc") ? stickyAtcPluginRegistrationLines : [],
-    ...enabledPluginKeys.has("before_after") ? beforeAfterPluginRegistrationLines : [],
-    ...enabledPluginKeys.has("countdown") ? countdownPluginRegistrationLines : [],
-    ...enabledPluginKeys.has("reveal-on-scroll") ? revealOnScrollPluginRegistrationLines : [],
-    ...enabledPluginKeys.has("recently-viewed") ? recentlyViewedPluginRegistrationLines : [],
-    ...enabledPluginKeys.has("runtime-slot-loader") ? runtimeSlotLoaderPluginRegistrationLines : [],
-    ...enabledPluginKeys.has("offer-engine") ? offerEnginePluginRegistrationLines : [],
+    ...runtimePluginSourceLines.flatMap(([key, lines]) => enabledPluginKeys.has(key) ? 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
+    // bound; runtime-core.js mark() keeps the same rule, and its unmount removes only the marks it set.
     "  const mark = (element, key) => {",
     "    const attr = 'data-gem-bound-' + key;",
     "    if (!element || element.hasAttribute(attr)) return false;",
@@ -5063,6 +5444,63 @@ function createGemRuntimeBootstrap(configArg) {
   ].join("\n");
 }
 
+// ../../packages/gem-framework/src/runtime-modules.ts
+var LISTEN_CALL = /(?<![\w$.\])?])([A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*)\.addEventListener\(/g;
+function routeListenersThroughLedger(body, key = "plugin") {
+  const routed = body.replace(LISTEN_CALL, "__gemListen($1, ");
+  const unseen = routed.match(/.{0,40}\.addEventListener\(/);
+  if (unseen) throw new Error(`gem-framework: plugin "${key}" adds a listener the module cannot track: ${unseen[0]}`);
+  return routed;
+}
+var PLUGIN_GUARDS = {
+  "offer-engine": { selector: "[data-gem-offer-engine]", prop: "__gemOffer" }
+};
+function gemRuntimePluginModuleKeys() {
+  return gemRuntimePluginSources().map((source) => source.key);
+}
+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 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.",
+    'import { mountPlugin } from "../runtime-core.js";',
+    "",
+    `export const key = ${JSON.stringify(key)};`,
+    `export const readyEvent = ${JSON.stringify(source.readyEvent)};`,
+    "",
+    "function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin }) {",
+    body,
+    "}",
+    "",
+    `/** Bind every "${key}" hook inside root (default: the whole document). Returns unmount(). Mounting the same root twice binds once. */`,
+    "export function mount(root, options) {",
+    `  return mountPlugin(key, install, root, options${guard ? `, ${JSON.stringify(guard)}` : ""});`,
+    "}",
+    "",
+    "export default mount;",
+    ""
+  ].join("\n");
+}
+function createGemRuntimePluginModuleTypes(key) {
+  const source = gemRuntimePluginSources().find((candidate) => candidate.key === key);
+  if (!source) throw new Error(`gem-framework: no runtime plugin "${key}"`);
+  return [
+    `// @gemboss/gem-framework/plugins/${key}: types of the ES module next to this file. Generated; do not edit here.`,
+    'import type { MountOptions, Unmount } from "../runtime-core.js";',
+    "",
+    "export type { MountOptions, Unmount };",
+    `export declare const key: ${JSON.stringify(key)};`,
+    `export declare const readyEvent: ${JSON.stringify(source.readyEvent)};`,
+    `/** Bind every "${key}" hook inside root (default: the whole document). Returns unmount(). Mounting the same root twice binds once. */`,
+    "export declare function mount(root?: ParentNode | null, options?: MountOptions): Unmount;",
+    "export default mount;",
+    ""
+  ].join("\n");
+}
+
 // ../../packages/gem-framework/src/validation.ts
 var validationRulesByCode = new Map(gemFrameworkValidationRules.map((rule) => [rule.code, rule]));
 var primitiveClassNames = new Set(
@@ -5088,7 +5526,9 @@ var canonicalCssVariableNames = /* @__PURE__ */ new Set([
   "--gem-icon-size",
   "--gem-drawer-offset",
   // The row primitive's variables (primitives.ts GEM_ROW_CSS). Sections SET these on their grid.
-  ...GEM_ROW_CSS_VARIABLES
+  ...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
 ]);
 var TOKENIZED_PROPERTIES = [
   "background",
@@ -5310,6 +5750,7 @@ function renderGemPreviewDocument(plan, options = {}) {
   const footer = renderGemShellFooter(plan);
   const sectionsHtml = renderGemPageSections(plan, page, options.sectionMarkup ?? {});
   const title = options.title ?? `${plan.name} preview`;
+  const formAttrs = Object.entries(gemFormAttributes(plan.tokens.form)).map(([k, v]) => ` ${k}="${escapeAttribute(v)}"`).join("");
   const bodyClass = ["gem-theme", `gem-theme--${slugify(profile)}`, options.bodyClassName].filter(Boolean).join(" ");
   return [
     "<!doctype html>",
@@ -5320,7 +5761,7 @@ function renderGemPreviewDocument(plan, options = {}) {
     `  <title>${escapeHtml(title)}</title>`,
     `  <style>${css}</style>`,
     "</head>",
-    `<body class="${escapeAttribute(bodyClass)}" data-gem-plan-id="${escapeAttribute(plan.id)}" data-gem-style-pack-id="${escapeAttribute(plan.style_pack?.id ?? "none")}" data-gem-button-style="${escapeAttribute(plan.global_settings?.button_style ?? "solid")}" data-gem-preview-page="${escapeAttribute(page)}">`,
+    `<body class="${escapeAttribute(bodyClass)}" data-gem-plan-id="${escapeAttribute(plan.id)}" data-gem-style-pack-id="${escapeAttribute(plan.style_pack?.id ?? "none")}" data-gem-button-style="${escapeAttribute(plan.global_settings?.button_style ?? "solid")}" data-gem-preview-page="${escapeAttribute(page)}"${formAttrs}>`,
     '  <a class="gem-skip-to-content-link gem-u-visually-hidden" href="#MainContent">Skip to content</a>',
     header,
     `  <main id="MainContent" class="gem-main" data-gem-page="${escapeAttribute(page)}">`,
@@ -6370,6 +6811,14 @@ export {
   COUNTDOWN_END_RUNTIME_LINES,
   GEM_AMBIENT_CSS,
   GEM_COUNTDOWN_ENDED_CSS,
+  GEM_FIELD_JOINS,
+  GEM_FIELD_SHAPES,
+  GEM_FORM_CSS_VARIABLES,
+  GEM_FORM_DEFAULTS,
+  GEM_FORM_SETS,
+  GEM_FORM_SET_CSS,
+  GEM_FORM_TOKEN_KEYS,
+  GEM_FORM_VAR_SCOPE,
   GEM_GRID_COLUMNS_ROW_KNOB_CSS,
   GEM_PART_CLASS,
   GEM_POPUP_SHELL_CSS,
@@ -6386,9 +6835,12 @@ export {
   createGemBaseCss,
   createGemFrameworkManifest,
   createGemRuntimeBootstrap,
+  createGemRuntimePluginModule,
+  createGemRuntimePluginModuleTypes,
   createGemSectionRuntimeContractCss,
   createGemStyleKnobCss,
   createGemThemeCss,
+  createGemThemeCssParts,
   createGemTokenCss as createGemTokenVariablesCss,
   createHeaderRuntimeGrammar,
   createMorphProfileCss,
@@ -6399,12 +6851,18 @@ export {
   createThemeProfileCss,
   defaultGemTokens,
   defaultSelection,
+  gemFormAttributes,
+  gemFormCssBlock,
+  gemFormCssVars,
+  gemFormSetsFor,
   gemFrameworkPrimitiveGroups,
   gemFrameworkRuntimePlugins,
   gemFrameworkValidationRules,
   gemFrameworkVersion,
   gemPartClass,
   gemPlanShapeKnobs,
+  gemRuntimePluginModuleKeys,
+  gemRuntimePluginSources,
   getGemFrameworkValidationRule,
   isModernMineralFamilyLineagePlan,
   modernMineralFamilyLineage,