@gemboss/gem-framework 0.9.3 → 0.9.8

package/dist/section-gate.js

@@ -1,4 +1,18 @@
 // ../../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",
@@ -12,6 +26,49 @@ var FORM_CSS_VAR = {
   checkboxSize: "--gem-checkbox-size"
 };
 var GEM_FORM_CSS_VARIABLES = Object.values(FORM_CSS_VAR);
+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 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;
+}
 
 // ../../packages/gem-framework/src/tokens.ts
 var GEM_FOCUS_RING_CSS_VAR = "--gem-focus-ring: 2px solid var(--gem-color-accent);";
@@ -19,6 +76,24 @@ var GEM_TAP_MIN_CSS_VAR = "--gem-tap-min: 44px;";
 var GEM_FOCUS_OFFSET_CSS_VAR = "--gem-focus-offset: 3px;";
 var GEM_DERIVED_SPACE_STEPS = { "2xs": 0.125, ms: 0.75, "4xl": 7 };
 var GEM_DERIVED_SPACE_CSS_VARIABLES = Object.keys(GEM_DERIVED_SPACE_STEPS).map((key) => `--gem-space-${slugify(key)}`);
+function gemDerivedSpaceCssVars(spacing) {
+  const named = new Set(Object.entries(spacing ?? {}).filter(([, v]) => String(v ?? "").trim()).map(([k]) => slugify(k)));
+  const md = gemSpaceMdKind(spacing?.md);
+  return Object.entries(GEM_DERIVED_SPACE_STEPS).filter(([key]) => !named.has(slugify(key))).map(([key, factor]) => `--gem-space-${slugify(key)}: ${derivedSpaceValue(md, factor)};`);
+}
+function gemSpaceMdKind(raw) {
+  const md = stripImportant(String(raw ?? "")).trim();
+  if (md === "") return "absent";
+  if (/^[+-]?(\d+\.?\d*|\.\d+)$/.test(md)) return Number(md) === 0 ? "zero" : "invalid";
+  if (/^[+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?[a-z%]+$/i.test(md)) return "length";
+  if (/^(var|calc|clamp|min|max|env)\(.*\)$/i.test(md)) return "length";
+  return "invalid";
+}
+function derivedSpaceValue(md, factor) {
+  if (md === "zero") return "0";
+  if (md === "invalid") return `calc(${parseFloat(defaultGemTokens.spacing.md) * factor}px * var(--gem-style-space, 1))`;
+  return `calc(var(--gem-space-md) * ${factor})`;
+}
 var GEM_ROW_CSS_VARIABLES = [
   "--gem-row-cols",
   "--gem-row-cols-md",
@@ -41,7 +116,134 @@ var requiredGemTokenKeys = {
   component: ["headerHeight", "cardPadding", "buttonPaddingInline", "buttonPaddingBlock", "inputHeight"],
   morphology: ["campaignDensity", "mediaRhythm", "proofIntensity", "commerceEmphasis", "policyTone"]
 };
+var defaultGemTokens = {
+  color: {
+    background: "#f6f6f3",
+    surface: "#ffffff",
+    text: "#202223",
+    // 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",
+    success: "#008060",
+    warning: "#b7791f",
+    danger: "#d72c0d"
+  },
+  typography: {
+    body: "Inter, system-ui, sans-serif",
+    heading: "Inter, system-ui, sans-serif",
+    mono: "ui-monospace, SFMono-Regular, Menlo, monospace"
+  },
+  spacing: {
+    xs: "4px",
+    sm: "8px",
+    md: "16px",
+    lg: "24px",
+    xl: "32px",
+    "2xl": "48px",
+    "3xl": "64px"
+  },
+  radius: {
+    sm: "4px",
+    md: "8px",
+    lg: "16px",
+    pill: "999px"
+  },
+  border: {
+    subtle: "1px solid var(--gem-color-border)",
+    strong: "1px solid color-mix(in srgb, var(--gem-color-text) 28%, transparent)"
+  },
+  shadow: {
+    sm: "0 1px 2px rgb(0 0 0 / 0.08)",
+    md: "0 8px 24px rgb(0 0 0 / 0.10)"
+  },
+  motion: {
+    // Back-compat interaction motion (buttons, hovers) — emitted as --gem-motion-duration/easing.
+    duration: "160ms",
+    easing: "ease",
+    // Soft display easing for ambient/entrance motion — emitted as --gem-ease-soft.
+    easingSoft: "cubic-bezier(.45,0,.25,1)",
+    // Ambient duration ramp (background float/sheen/marquee) — emitted as --gem-ambient-slow|mid|fast.
+    ambientSlow: "9s",
+    ambientMid: "7s",
+    ambientFast: "5.5s",
+    // Ambient float amplitude — emitted as --gem-ambient-amp; gentled under reduce-motion.
+    ambientAmp: "7px"
+  },
+  layout: {
+    page: "1180px",
+    gutter: "32px",
+    section: "64px"
+  },
+  component: {
+    headerHeight: "72px",
+    cardPadding: "16px",
+    buttonPaddingInline: "18px",
+    buttonPaddingBlock: "12px",
+    inputHeight: "44px"
+  },
+  morphology: {
+    campaignDensity: "balanced",
+    mediaRhythm: "standard",
+    proofIntensity: "standard",
+    commerceEmphasis: "balanced",
+    policyTone: "standard"
+  }
+};
+function createGemTokenCss(tokens, selector = ":root") {
+  const declarations = [
+    ...toCssVars("color", tokens.color),
+    ...toCssVars("font", Object.fromEntries(Object.entries(tokens.typography ?? {}).filter(([k]) => !isRampKey(k)))),
+    // Space ramp is scaled by the global density knob --gem-style-space (default 1),
+    // so a style pack can make the WHOLE storefront airier or denser without touching
+    // any section — every section already consumes --gem-space-*. Knob unset → identical.
+    ...toScaledCssVars("space", tokens.spacing, "--gem-style-space"),
+    ...gemDerivedSpaceCssVars(tokens.spacing),
+    // Radius ramp scaled by --gem-style-radius (default 1): a 'sharp' style sets it to
+    // 0 (square everything), 'pill' rounds further — across every section, no edits.
+    ...toScaledCssVars("radius", tokens.radius, "--gem-style-radius"),
+    // Border widths get the --gem-style-border knob injected into their leading length,
+    // whatever value the plan provides (e.g. "1px solid …" → "calc(1px * var(...)) solid …").
+    ...toBorderCssVars("border", tokens.border, "--gem-style-border"),
+    ...toCssVars("shadow", tokens.shadow),
+    // Motion keys map to ergonomic var names (--gem-ease-soft, --gem-ambient-*) that the ambient
+    // and marquee primitives consume; unrecognised keys fall back to the --gem-motion-* namespace,
+    // so duration/easing keep emitting --gem-motion-duration/easing exactly as before (back-compat).
+    ...toMotionCssVars(tokens.motion),
+    ...toCssVars("layout", tokens.layout),
+    ...toCssVars("component", tokens.component),
+    ...toCssVars("morphology", tokens.morphology),
+    // THE GOVERNED TYPE RAMP — --gem-h1..h6 / --gem-body / --gem-text-sm.
+    // gemcapture maps every measured font-size onto these names via `font_token`
+    // (clone_kit._type_token), and the gem-framework contract documents them, but nothing in the
+    // live framework defined them: a rebuild that followed the contract styled its headings with
+    // variables that resolved to nothing. One modular scale, retuned by overriding --gem-type-base
+    // or --gem-type-scale (see gemTypeRampCssVars).
+    ...gemTypeRampCssVars(tokens.typography),
+    // Focus ring (gemfactory request #3, 28/09/2026): 11 sections wrote `outline: 2px solid
+    // var(--gem-color-accent)` by hand. Not a token GROUP (a group would name it --gem-border-focus-ring
+    // and a required key would fail every stored plan/preset without it), so it is emitted here like the
+    // type ramp and registered in validation.ts. Follows the accent, so presets retint it for free.
+    GEM_FOCUS_RING_CSS_VAR,
+    GEM_TAP_MIN_CSS_VAR,
+    GEM_FOCUS_OFFSET_CSS_VAR
+  ];
+  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};`, "  }", "}"] : [],
+    ...formBlock ? [formBlock] : []
+  ].join("\n");
+}
+var GEM_TYPE_RAMP_KEYS = ["base", "scale", "baseMobile"];
 var rampKey = (k) => k.toLowerCase().replace(/[^a-z0-9]/g, "");
+var isRampKey = (k) => GEM_TYPE_RAMP_KEYS.some((r) => rampKey(r) === rampKey(k));
 var LENGTH = /^\d*\.?\d+(px|rem|em)$/;
 var NUMBER = /^\d*\.?\d+$/;
 var typeRampValue = (typography, key) => {
@@ -50,6 +252,7 @@ var typeRampValue = (typography, key) => {
   if (!v) return null;
   return (key === "scale" ? NUMBER.test(v) && Number(v) > 0 : LENGTH.test(v)) ? v : null;
 };
+var GEM_TYPE_MOBILE_MAX = "749px";
 function gemTypeRampCssVars(typography) {
   return [
     `--gem-type-base: ${typeRampValue(typography, "base") ?? "1rem"};`,
@@ -69,6 +272,41 @@ function stripImportant(value) {
   if (!/!\s*important/i.test(s)) return s;
   return s.replace(/!\s*important/gi, " ").replace(/\s+/g, " ").replace(/\s+,/g, ",").trim();
 }
+function toCssVars(namespace, values) {
+  if (!values) return [];
+  return Object.entries(values).map(([key, value]) => `--gem-${namespace}-${slugify(key)}: ${stripImportant(value)};`);
+}
+var motionCssVarAliases = {
+  easingSoft: "--gem-ease-soft",
+  ambientSlow: "--gem-ambient-slow",
+  ambientMid: "--gem-ambient-mid",
+  ambientFast: "--gem-ambient-fast",
+  ambientAmp: "--gem-ambient-amp"
+};
+function toMotionCssVars(values) {
+  return Object.entries(values).map(([key, value]) => {
+    const name = motionCssVarAliases[key] ?? `--gem-motion-${slugify(key)}`;
+    return `${name}: ${value};`;
+  });
+}
+function toScaledCssVars(namespace, values, knob) {
+  if (!values) return [];
+  return Object.entries(values).map(
+    // stripImportant Ở ĐÂY mới là chỗ dễ vỡ, không phải toCssVars. Một giá trị trần mang cờ ở
+    // CUỐI khai báo thì trình duyệt nuốt nó như importance và khai báo vẫn hợp lệ; nhưng calc()
+    // bọc nó vào GIỮA giá trị — `calc(16px !important * var(...))` — nên custom property lưu
+    // nguyên xi, rồi mọi `padding: var(--gem-space-md)` thành invalid ở computed-value và SẬP VỀ 0
+    // trên toàn bộ .gem-* section.
+    ([key, value]) => `--gem-${namespace}-${slugify(key)}: calc(${stripImportant(value)} * var(${knob}, 1));`
+  );
+}
+function toBorderCssVars(namespace, values, knob) {
+  if (!values) return [];
+  return Object.entries(values).map(([key, value]) => {
+    const scaled = stripImportant(value).replace(/(\d*\.?\d+)px/, `calc($1px * var(${knob}, 1))`);
+    return `--gem-${namespace}-${slugify(key)}: ${scaled};`;
+  });
+}
 function slugify(value) {
   return value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 }
@@ -678,6 +916,2883 @@ var GEM_GRID_COLUMNS_KNOB_CSS_LINES = [
   ":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") {
+  const knobs = [
+    ["styleSpace", "--gem-style-space"],
+    ["styleWeight", "--gem-style-weight"],
+    ["styleRadius", "--gem-style-radius"],
+    ["styleBorder", "--gem-style-border"],
+    ["styleHeadingScale", "--gem-typography-heading-scale"]
+  ];
+  return knobs.flatMap(([key, property]) => {
+    const value = options[key];
+    return typeof value === "number" && value !== 1 ? [`${selector} { ${property}: ${value}; }`] : [];
+  });
+}
+function createGemThemeCss(tokens, selector = ":root", options = {}) {
+  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 createGemBaseCssParts(profile) {
+  const reset = [
+    "*, *::before, *::after {",
+    "  box-sizing: border-box;",
+    "}",
+    "html {",
+    "  scroll-behavior: smooth;",
+    "  text-size-adjust: 100%;",
+    "}",
+    "body {",
+    "  margin: 0;",
+    "  font-family: var(--gem-font-body);",
+    "  font-size: calc(1rem * var(--gem-typography-body-scale, 1));",
+    "  color: var(--gem-color-text);",
+    "  background: var(--gem-color-background);",
+    "  line-height: 1.5;",
+    "  -webkit-font-smoothing: antialiased;",
+    "}",
+    "main {",
+    "  display: block;",
+    "}",
+    "img, picture, video, canvas, svg {",
+    "  display: block;",
+    "  max-width: 100%;",
+    "}",
+    "button, input, textarea, select {",
+    "  font: inherit;",
+    "}",
+    "button, [type='button'], [type='submit'] {",
+    "  cursor: pointer;",
+    "}",
+    "a {",
+    "  color: inherit;",
+    "}",
+    // Vòng focus theo NỀN (gemsite #761, review #655; đo Chromium 03/10/2026).
+    // 1. --gem-focus-ring khai ở :root là "2px solid var(--gem-color-accent)" và var() bị thay MỘT LẦN ở :root: section
+    //    đặt lại accent (bảng màu) vẫn nhận accent của trang. Khai lại trên chính section để var() tính theo section.
+    // 2. Núm nền accent / dark tô nền mà KHÔNG đổi accent: vòng accent trên nền accent là không thấy (1:1). Trong băng đó
+    //    vòng HAI MÀU (WCAG C40): nét màu chữ của băng + quầng màu nền của băng bao quanh. Hai màu tương phản nhau nên
+    //    trên nền nào cũng có một màu nổi: băng tối thì nét sáng, ô sáng lồng trong băng tối thì quầng tối. Màu chữ của
+    //    khối chứa KHÔNG lấy được bằng CSS: currentColor giữ nguyên từ khoá tới phần tử dùng nó (kể cả biến có kiểu
+    //    @property), nên nút / ô nhập ra vòng màu chữ của chính mặt nút (đen trên băng tối, đo).
+    // Đặt --gem-focus-ring ở :root không tới được trong section.
+    ":where(.gem-section, [data-gem-section-id]) {",
+    "  --gem-focus-ring: 2px solid var(--gem-color-accent);",
+    "}",
+    ":focus-visible {",
+    "  outline: var(--gem-focus-ring, 2px solid var(--gem-color-accent));",
+    "  outline-offset: var(--gem-focus-offset, 3px);",
+    "}",
+    // :focus-visible hai lần = độ ưu tiên (0,2,0): thắng `.gem-button { box-shadow: none }` của profile Dawn (0,1,0, nằm
+    // sau) đã xoá quầng của nút trên ô sáng lồng trong băng (đo); luật focus riêng của section (≥ 0,3,0) vẫn thắng nó.
+    ":where([data-gem-section-background='accent'], [data-gem-section-background='dark']) :focus-visible:focus-visible {",
+    "  box-shadow: 0 0 0 calc(var(--gem-focus-offset, 3px) + 4px) var(--gem-band-bg);",
+    "}",
+    ".gem-skip-to-content-link:focus {",
+    "  position: fixed;",
+    "  inset-block-start: var(--gem-space-sm);",
+    "  inset-inline-start: var(--gem-space-sm);",
+    "  z-index: 100;",
+    "  width: auto !important;",
+    "  height: auto !important;",
+    "  clip: auto !important;",
+    "  white-space: normal !important;",
+    "  padding: var(--gem-space-sm) var(--gem-space-md);",
+    "  border-radius: var(--gem-radius-md);",
+    "  background: var(--gem-color-accent);",
+    "  color: var(--gem-color-accent-text);",
+    "}",
+    ".gem-u-visually-hidden {",
+    "  position: absolute !important;",
+    "  width: 1px !important;",
+    "  height: 1px !important;",
+    "  overflow: hidden !important;",
+    "  clip: rect(0, 0, 0, 0) !important;",
+    "  white-space: nowrap !important;",
+    "}"
+  ].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();
+}
+function createMorphProfileCss() {
+  return [
+    "/* Gem morph profile: style packs and section presets provide visual transformation above core primitives. */",
+    ":root { --gem-profile-mode: morph; }"
+  ].join("\n");
+}
+function createPrimitiveCss() {
+  return [
+    ".gem-container {",
+    "  width: min(var(--gem-layout-page, 1180px), calc(100% - var(--gem-layout-gutter, 32px)));",
+    "  margin-inline: auto;",
+    "}",
+    ".gem-stack {",
+    "  display: grid;",
+    "  gap: var(--gem-space-md);",
+    "}",
+    ".gem-cluster {",
+    "  display: flex;",
+    "  flex-wrap: wrap;",
+    "  align-items: center;",
+    "  gap: var(--gem-space-sm);",
+    "}",
+    ".gem-grid {",
+    "  display: grid;",
+    "  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));",
+    "  column-gap: var(--gem-grid-column-gap, var(--gem-space-md));",
+    "  row-gap: var(--gem-grid-row-gap, var(--gem-space-md));",
+    "}",
+    ...GEM_ROW_GAP_CSS_LINES,
+    ".gem-button {",
+    "  border: 0;",
+    "  appearance: none;",
+    "  cursor: pointer;",
+    "  display: inline-flex;",
+    "  align-items: center;",
+    "  justify-content: center;",
+    "  min-height: var(--gem-component-input-height, 44px);",
+    "  border: var(--gem-button-border-width, 1px) solid var(--gem-color-border);",
+    "  border-radius: var(--gem-radius-md);",
+    "  padding: var(--gem-component-button-padding-block, 12px) var(--gem-component-button-padding-inline, 18px);",
+    "  font-weight: 700;",
+    "  text-decoration: none;",
+    "  transition: background var(--gem-motion-duration, 160ms) var(--gem-motion-easing, ease), color var(--gem-motion-duration, 160ms) var(--gem-motion-easing, ease);",
+    "}",
+    ".gem-button:disabled, .gem-button[aria-disabled='true'] {",
+    "  cursor: not-allowed;",
+    "  opacity: 0.55;",
+    "}",
+    ".gem-input:disabled, .gem-select:disabled, .gem-textarea:disabled, .gem-quantity-input__button:disabled {",
+    "  cursor: not-allowed;",
+    "  opacity: 0.6;",
+    "  background: color-mix(in srgb, var(--gem-color-text) 6%, var(--gem-color-surface));",
+    "}",
+    ".gem-button--primary {",
+    "  border-color: var(--gem-color-accent);",
+    "  background: var(--gem-color-accent);",
+    "  color: var(--gem-color-accent-text, var(--gem-color-surface));",
+    "}",
+    ".gem-button--secondary {",
+    "  background: var(--gem-color-surface);",
+    "  color: var(--gem-color-text);",
+    "}",
+    ".gem-button--soft {",
+    "  background: color-mix(in srgb, var(--gem-color-accent) 12%, var(--gem-color-surface));",
+    "  color: var(--gem-color-text);",
+    "}",
+    // `--link` is the variant the element seam has always offered and no stylesheet ever defined.
+    // gemsite added a rule for it in its own hand-written globals.css; without the same rule HERE the
+    // identical element tree paints a solid accent button on every surface this CSS serves (preview
+    // document, headless globals) — the two-renderer drift this file exists to prevent. A cloned nav
+    // or footer is made of these, so the divergence would show up on the first store that used one.
+    ".gem-button--link {",
+    "  min-height: 0;",
+    "  min-width: 0;",
+    "  padding: 0;",
+    "  border: 0;",
+    "  background: transparent;",
+    "  color: inherit;",
+    "  text-decoration: underline;",
+    "  text-underline-offset: 0.2em;",
+    "  font-weight: inherit;",
+    "}",
+    // Global `button_style` follow rules. preview-document.ts sets [data-gem-button-style] on the
+    // <body> from plan.global_settings.button_style, and the headless adapter emits the same pair
+    // (index.ts createGlobalsCss) — but the PREVIEW CSS never shipped them, so every preview drew
+    // solid primaries no matter what the plan said. `solid` stays ruleless: it IS the base style.
+    //
+    // The selector deliberately matches the headless adapter's — `.gem-button` MINUS the secondary,
+    // not `.gem-button--primary` alone. Scoping it to the primary modifier left bare `.gem-button`
+    // and `.gem-button--soft` following button_style on the published storefront but NOT in the
+    // preview, which is the drift this rule exists to remove. `--primary` is named too so the
+    // modifier keeps winning where both could apply.
+    "[data-gem-button-style='outline'] .gem-button:not(.gem-button--secondary),",
+    "[data-gem-button-style='outline'] .gem-button--primary {",
+    "  background: transparent;",
+    "  color: var(--gem-color-accent);",
+    "}",
+    "[data-gem-button-style='soft'] .gem-button:not(.gem-button--secondary),",
+    "[data-gem-button-style='soft'] .gem-button--primary {",
+    "  background: color-mix(in srgb, var(--gem-color-accent) 12%, var(--gem-color-surface));",
+    "  border-color: transparent;",
+    "  color: var(--gem-color-text);",
+    "}",
+    ".gem-card {",
+    "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  border-radius: var(--gem-card-radius, var(--gem-radius-md));",
+    "  background: var(--gem-card-background, var(--gem-color-surface));",
+    "  padding: var(--gem-component-card-padding, var(--gem-space-md));",
+    "  box-shadow: var(--gem-shadow-sm, none);",
+    "  text-align: var(--gem-card-text-alignment, left);",
+    "}",
+    ".gem-card > :first-child { margin-top: 0; }",
+    ".gem-card > :last-child { margin-bottom: 0; }",
+    ".gem-media {",
+    "  display: block;",
+    // A media box must be its own CONTAINING BLOCK. The `> img` rule below fills the box with
+    // `position: absolute; inset: 0`, and without this the image resolves against the nearest
+    // positioned ancestor instead — which is the page. A 351x351 multicolumn tile rendered its
+    // image at 1440x1000, floating full-bleed over the hero. Caught by looking at the render;
+    // no test in the repo asserts anything about where an image lands.
+    "  position: relative;",
+    "  overflow: hidden;",
+    "  border: var(--gem-media-border-width, 0) solid color-mix(in srgb, var(--gem-color-text) 12%, transparent);",
+    "  border-radius: var(--gem-media-radius, var(--gem-radius-md));",
+    "  background: color-mix(in srgb, var(--gem-color-text) 8%, var(--gem-color-background));",
+    "  box-shadow: 0 8px 24px rgb(0 0 0 / var(--gem-media-shadow-opacity, 0));",
+    "}",
+    ".gem-media > img, .gem-media > video {",
+    "  display: block;",
+    "  width: 100%;",
+    "  height: 100%;",
+    "  object-fit: cover;",
+    "}",
+    ".gem-badge {",
+    "  display: inline-flex;",
+    "  align-items: center;",
+    "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  border-radius: var(--gem-radius-pill, 999px);",
+    "  padding: var(--gem-space-xs) var(--gem-space-sm);",
+    "  font-size: 0.8125rem;",
+    "  font-weight: 650;",
+    "}",
+    ".gem-accordion {",
+    "  display: grid;",
+    "  gap: var(--gem-space-sm);",
+    "}",
+    ".gem-accordion details {",
+    "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  border-radius: var(--gem-radius-md);",
+    "  background: var(--gem-color-surface);",
+    "  overflow: hidden;",
+    "}",
+    ".gem-accordion summary {",
+    "  cursor: pointer;",
+    "  padding: var(--gem-space-md);",
+    "  font-weight: 650;",
+    "}",
+    ".gem-divider {",
+    "  border: 0;",
+    "  border-top: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  margin-block: var(--gem-space-lg);",
+    "}",
+    ".gem-form-field {",
+    "  display: grid;",
+    "  gap: var(--gem-space-xs);",
+    "}",
+    ".gem-input, .gem-select, .gem-textarea {",
+    "  width: 100%;",
+    "  min-height: var(--gem-component-input-height, 44px);",
+    "  border: var(--gem-input-border-width, 1px) solid var(--gem-color-border);",
+    "  border-radius: var(--gem-input-radius, var(--gem-radius-md));",
+    "  background: var(--gem-color-surface);",
+    "  color: var(--gem-color-text);",
+    "  padding: 0 var(--gem-space-md);",
+    "}",
+    // .gem-field-join (gemfactory request #8, 01/10/2026; 16 stored footers trimmed the touching corners by hand): an
+    // input/select and its button as one block (newsletter, discount code). Only VISIBLE children count: Shopify forms carry hidden inputs (form_type, utf8) and a sr-only
+    // label, and with plain :first-child those would square the visible outer corners and take a 44px slot. A field
+    // may be wrapped in .gem-form-field. The field grows with a floor of min(10rem, 50%); the button sizes to its
+    // label (dropping dawn-parity's 12rem minimum, which at 320px left the field 80px wide) and wraps a long label
+    // instead of squeezing the field or overflowing. Only the corners where two children meet are squared, in logical
+    // properties so it mirrors under RTL, and the seam overlaps by one border width so it is not drawn twice. A child
+    // holding focus is lifted so its ring is not painted under the neighbour. Stays one row at every width.
+    ".gem-field-join {",
+    "  display: flex;",
+    "  align-items: stretch;",
+    "  min-width: 0;",
+    "}",
+    '.gem-field-join > :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden) {',
+    "  min-height: var(--gem-component-input-height, 44px);",
+    "  margin: 0;",
+    "}",
+    ".gem-field-join > :is(.gem-input, .gem-select, .gem-form-field) {",
+    "  flex: 1 1 10rem;",
+    "  width: auto;",
+    "  min-width: min(10rem, 50%);",
+    "}",
+    // A wrapped field gets the join's height too: the dawn-parity profile sets .gem-input { min-height: 4.5rem }, and
+    // only the direct-child rule above outranked it, so a wrapped input stood 72px next to a 44px one (02/10/2026).
+    ".gem-field-join > .gem-form-field > :is(.gem-input, .gem-select) {",
+    "  width: 100%;",
+    "  height: 100%;",
+    "  min-height: var(--gem-component-input-height, 44px);",
+    "}",
+    '.gem-field-join > :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden):not(.gem-input, .gem-select, .gem-form-field) {',
+    "  flex: 0 1 auto;",
+    "  min-width: var(--gem-component-input-height, 44px);",
+    "  white-space: normal;",
+    "  overflow-wrap: anywhere;",
+    "}",
+    '.gem-field-join > :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden):not(:nth-child(1 of :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden))), .gem-field-join > .gem-form-field:not(:nth-child(1 of :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden))) > :is(.gem-input, .gem-select) {',
+    "  border-start-start-radius: 0;",
+    "  border-end-start-radius: 0;",
+    "}",
+    '.gem-field-join > :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden):not(:nth-child(1 of :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden))) {',
+    "  margin-inline-start: calc(-1 * var(--gem-input-border-width, 1px));",
+    "}",
+    '.gem-field-join > :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden):not(:nth-last-child(1 of :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden))), .gem-field-join > .gem-form-field:not(:nth-last-child(1 of :not([type="hidden"]):not([hidden]):not(.gem-u-visually-hidden))) > :is(.gem-input, .gem-select) {',
+    "  border-start-end-radius: 0;",
+    "  border-end-end-radius: 0;",
+    "}",
+    ".gem-field-join > :focus-within {",
+    "  position: relative;",
+    "  z-index: 1;",
+    "}",
+    ".gem-textarea {",
+    "  min-height: calc(var(--gem-component-input-height, 44px) * 2);",
+    "  padding-block: var(--gem-space-sm);",
+    "  resize: vertical;",
+    "}",
+    ".gem-checkbox {",
+    "  inline-size: var(--gem-space-lg);",
+    "  block-size: var(--gem-space-lg);",
+    "  accent-color: var(--gem-color-accent);",
+    "}",
+    ...GEM_FORM_SET_CSS_LINES,
+    ".gem-submit {",
+    "  cursor: pointer;",
+    "}",
+    ".gem-newsletter-form {",
+    "  display: flex;",
+    "  flex-wrap: wrap;",
+    "  gap: var(--gem-space-sm);",
+    "  align-items: end;",
+    "}",
+    ".gem-newsletter-form .gem-form-field {",
+    "  flex: 1 1 16rem;",
+    "}",
+    ".gem-heading {",
+    "  margin: 0;",
+    "  font-family: var(--gem-font-heading);",
+    "  color: var(--gem-color-text);",
+    "}",
+    ".gem-text {",
+    "  margin: 0;",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 72%, transparent));",
+    "  line-height: 1.6;",
+    "}",
+    ".gem-richtext {",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 72%, transparent));",
+    "  line-height: 1.6;",
+    "}",
+    // Icon size and colour hooks (gemfactory request #11, 01/10/2026: 33 sections reset colour to inherit and wrote
+    // 22/14/16/20px by hand). Additive only: with no modifier and no --gem-icon-size an icon renders exactly as before
+    // (the spacing step, the accent). Changing those DEFAULTS is a design decision left open on #11.
+    ".gem-icon {",
+    "  display: inline-flex;",
+    "  align-items: center;",
+    "  justify-content: center;",
+    "  inline-size: var(--gem-icon-size, var(--gem-space-lg));",
+    "  block-size: var(--gem-icon-size, var(--gem-space-lg));",
+    "  color: var(--gem-color-accent);",
+    "}",
+    ".gem-icon--sm { --gem-icon-size: 16px; }",
+    ".gem-icon--md { --gem-icon-size: 20px; }",
+    ".gem-icon--lg { --gem-icon-size: 24px; }",
+    ".gem-icon--current { color: currentColor; }",
+    ".gem-icon--chevron { transition: rotate var(--gem-motion-duration, 160ms) var(--gem-motion-easing, ease); }",
+    // Only the TOGGLE's own state: the runtime also sets aria-expanded on containers (the open cart drawer, the
+    // header drawer), and a descendant match would flip every chevron inside them (review #650).
+    ":is(button, summary, [role='button'])[aria-expanded='true'] > .gem-icon--chevron, details[open] > summary > .gem-icon--chevron { rotate: 180deg; }",
+    "@media (prefers-reduced-motion: reduce) { .gem-icon--chevron { transition: none; } }",
+    ".gem-icon-list {",
+    "  display: grid;",
+    "  gap: var(--gem-space-sm);",
+    "  list-style: none;",
+    "  margin: 0;",
+    "  padding: 0;",
+    "}",
+    ".gem-icon-list__item {",
+    "  display: grid;",
+    "  grid-template-columns: auto minmax(0, 1fr);",
+    "  gap: var(--gem-space-sm);",
+    "  align-items: start;",
+    "}",
+    ".gem-video {",
+    "  display: block;",
+    "  inline-size: 100%;",
+    "  aspect-ratio: 16 / 9;",
+    "  border: 0;",
+    "  border-radius: var(--gem-radius-md);",
+    "  background: color-mix(in srgb, var(--gem-color-text) 8%, var(--gem-color-background));",
+    "}",
+    ".gem-marquee {",
+    "  overflow: hidden;",
+    "  border-block: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "}",
+    // Consumer contract: render the track's children TWICE (like the site's `.mq-row`) so the
+    // -50% translate lands on an identical second copy and the loop is seamless with no visible jump.
+    // The animation reuses the gem-marquee-scroll keyframe defined with the ambient primitive.
+    ".gem-marquee__track {",
+    "  display: flex;",
+    "  gap: var(--gem-space-lg);",
+    "  min-width: max-content;",
+    "  animation: gem-marquee-scroll var(--gem-marquee-duration, 40s) linear infinite;",
+    "  will-change: transform;",
+    "}",
+    // Pause-on-hover lets a shopper read a badge/logo they want to inspect.
+    ".gem-marquee:hover .gem-marquee__track {",
+    "  animation-play-state: paused;",
+    "}",
+    // Opt-in reverse direction (e.g. a second row scrolling the other way).
+    ".gem-marquee[data-gem-marquee-reverse] .gem-marquee__track {",
+    "  animation-direction: reverse;",
+    "}",
+    ".gem-carousel {",
+    "  display: grid;",
+    "  gap: var(--gem-space-md);",
+    "}",
+    ".gem-carousel__viewport {",
+    "  overflow-x: auto;",
+    "  scroll-snap-type: x mandatory;",
+    "  scrollbar-width: none;",
+    "}",
+    ".gem-carousel__viewport::-webkit-scrollbar {",
+    "  display: none;",
+    "}",
+    ".gem-carousel__track {",
+    "  display: grid;",
+    "  grid-auto-flow: column;",
+    "  grid-auto-columns: minmax(min(20rem, 84vw), 1fr);",
+    "  gap: var(--gem-space-md);",
+    "}",
+    ".gem-carousel__slide {",
+    "  scroll-snap-align: start;",
+    "}",
+    ".gem-carousel__controls {",
+    "  display: flex;",
+    "  flex-wrap: wrap;",
+    "  gap: var(--gem-space-sm);",
+    "  align-items: center;",
+    "  justify-content: flex-end;",
+    "}",
+    ".gem-price {",
+    "  display: flex;",
+    "  flex-wrap: wrap;",
+    "  gap: var(--gem-space-xs);",
+    "  align-items: baseline;",
+    "  font-weight: 750;",
+    "  color: var(--gem-color-text);",
+    "}",
+    ".gem-price--on-sale .gem-price__regular {",
+    "  color: var(--gem-color-accent);",
+    "}",
+    ".gem-price__compare {",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 60%, transparent));",
+    "  font-weight: 500;",
+    "}",
+    ".gem-price__unit {",
+    "  flex-basis: 100%;",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 60%, transparent));",
+    "  font-size: 0.8125rem;",
+    "  font-weight: 500;",
+    "}",
+    // The commerce atoms that had NO primitive. gemcapture types every one of these on the element
+    // (`part`), and half of them had a class to land on — price, compare-at, badge, sold-out — while
+    // the other half had none, so a rebuild styled them ad hoc or dropped them. GEM_PART_CLASS (see
+    // ./parts) is the mechanical part→class binding; these are the rules behind it.
+    ".gem-review-count {",
+    "  font-size: var(--gem-text-sm, 0.8125rem);",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 72%, transparent));",
+    "}",
+    ".gem-discount {",
+    "  font-size: var(--gem-text-sm, 0.8125rem);",
+    "  font-weight: 700;",
+    "  color: var(--gem-color-accent);",
+    "}",
+    ".gem-pull-quote {",
+    "  font-family: var(--gem-font-heading);",
+    "  font-size: var(--gem-h5, 1.25rem);",
+    "  line-height: 1.4;",
+    "  border-inline-start: 2px solid var(--gem-color-accent);",
+    "  padding-inline-start: var(--gem-space-md);",
+    "  margin: var(--gem-space-md) 0;",
+    "}",
+    ".gem-byline {",
+    "  font-size: var(--gem-text-sm, 0.8125rem);",
+    "  font-weight: 600;",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 72%, transparent));",
+    "}",
+    ".gem-disclaimer {",
+    "  font-size: 0.6875rem;",
+    "  line-height: 1.5;",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 60%, transparent));",
+    "}",
+    // Bullets had no primitive either, which is why a captured benefit list rebuilt as bare lines of
+    // text: gemcapture types every <li> as part "bullet", and there was nothing to bind it to.
+    ".gem-list {",
+    "  list-style: none;",
+    "  margin: 0;",
+    "  padding: 0;",
+    "  display: grid;",
+    "  gap: var(--gem-space-xs);",
+    "}",
+    ".gem-list__item {",
+    "  position: relative;",
+    "  padding-inline-start: 1.4em;",
+    "  line-height: 1.5;",
+    "}",
+    ".gem-list__item::before {",
+    "  content: '';",
+    "  position: absolute;",
+    "  inset-inline-start: 0;",
+    "  top: 0.55em;",
+    "  width: 0.42em;",
+    "  height: 0.42em;",
+    "  border-radius: var(--gem-radius-pill, 999px);",
+    "  background: var(--gem-color-accent);",
+    "}",
+    ".gem-subhead {",
+    "  font-family: var(--gem-font-heading);",
+    "  font-size: var(--gem-h6, 1.0625rem);",
+    "  font-weight: 700;",
+    "  margin-block: var(--gem-space-sm) var(--gem-space-xs);",
+    "}",
+    ".gem-rating, .gem-proof {",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 72%, transparent));",
+    "}",
+    // Star ROW primitive, driven by the two numbers gemcapture recovers (`rating: {stars, filled}`).
+    // .gem-rating above is a type rule for a text label; every actual star row in the theme was a
+    // hardcoded five-glyph literal, so a captured 4-of-5 (or a half star) had nowhere to land. The
+    // fill is a percentage-width overlay, so fractional values render exactly instead of rounding.
+    ".gem-stars {",
+    "  --gem-stars-total: 5;",
+    "  --gem-stars-value: 5;",
+    "  position: relative;",
+    "  display: inline-block;",
+    "  line-height: 1;",
+    "  font-size: var(--gem-text-sm, 0.8125rem);",
+    "  letter-spacing: 0.1em;",
+    "  color: var(--gem-color-border);",
+    "}",
+    ".gem-stars__base, .gem-stars__fill { display: block; white-space: nowrap; }",
+    ".gem-stars__fill {",
+    "  position: absolute;",
+    "  inset: 0;",
+    "  width: calc(var(--gem-stars-value) / var(--gem-stars-total) * 100%);",
+    "  overflow: hidden;",
+    "  color: var(--gem-color-accent);",
+    "}",
+    // Marquee primitive — CSS-only and deliberately so (no JS to init, works on every render path).
+    // The one requirement is a DUPLICATED track: a single track scrolls off and leaves a gap.
+    ".gem-marquee { overflow: hidden; }",
+    ".gem-marquee__viewport { display: flex; overflow: hidden; }",
+    ".gem-marquee__track {",
+    "  flex: 0 0 auto;",
+    "  min-width: 100%;",
+    "  display: flex;",
+    "  align-items: center;",
+    "  justify-content: space-around;",
+    "  gap: var(--gem-space-lg);",
+    "  white-space: nowrap;",
+    "  animation: gem-marquee var(--gem-marquee-duration, 24s) linear infinite;",
+    "}",
+    ".gem-marquee__viewport:hover .gem-marquee__track { animation-play-state: paused; }",
+    ".gem-marquee--reverse .gem-marquee__track { animation-direction: reverse; }",
+    "@keyframes gem-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }",
+    "@media (prefers-reduced-motion: reduce) {",
+    "  .gem-marquee__track { animation: none; }",
+    "  .gem-marquee__viewport { overflow-x: auto; }",
+    "}",
+    ".gem-product-card {",
+    "  display: grid;",
+    "  grid-template-rows: auto minmax(0, 1fr);",
+    "  gap: var(--gem-space-sm);",
+    "  color: var(--gem-color-text);",
+    "}",
+    ".gem-product-card--sold-out {",
+    "  opacity: 0.78;",
+    "}",
+    // A REAL image inside the card media box. The box is a fixed-ratio frame
+    // (padding-bottom: 100%; height: 0; overflow: hidden) designed around a placeholder background,
+    // so an <img> child laid out in flow rendered at its natural size and broke the grid — every
+    // card became one full-width picture. Captured cards always carry a real <img>.
+    ".gem-product-card__media > img, .gem-media > img {",
+    "  position: absolute;",
+    "  inset: 0;",
+    "  display: block;",
+    "  width: 100%;",
+    "  height: 100%;",
+    "  object-fit: cover;",
+    "}",
+    ".gem-product-card__media {",
+    "  position: relative;",
+    "  aspect-ratio: 1 / 1;",
+    "}",
+    // The gem card media link also carries Dawn's `card__media` class, and Dawn's
+    // `.card__media { position: absolute }` (same specificity, loaded later) WINS — turning the gem
+    // media box absolute, so the inner `position:absolute` image lost its anchor and rendered offset
+    // (a ~17px inset bleed). Re-assert relative for the both-classes case at higher specificity so
+    // the gem aspect-ratio box holds and the image stays put.
+    ".gem-product-card__media.card__media {",
+    "  position: relative;",
+    "  inset: auto;",
+    "}",
+    ".gem-product-card__media .gem-product-card__badges {",
+    "  position: absolute;",
+    "  inset-block-start: var(--gem-space-sm);",
+    "  inset-inline-start: var(--gem-space-sm);",
+    "  z-index: 1;",
+    "}",
+    ".gem-product-card__placeholder {",
+    "  display: grid;",
+    "  min-height: 100%;",
+    "  place-items: center;",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 64%, transparent));",
+    "}",
+    ".gem-product-card__content {",
+    "  display: grid;",
+    "  grid-template-rows: auto auto minmax(0, 1fr) auto;",
+    "  gap: var(--gem-space-xs);",
+    "}",
+    ".gem-product-card__title {",
+    "  margin: 0;",
+    "  font-family: var(--gem-font-heading);",
+    "  font-weight: 650;",
+    "}",
+    ".gem-product-card__title a {",
+    "  color: inherit;",
+    "  text-decoration: none;",
+    "}",
+    ".gem-product-card__title a:hover {",
+    "  text-decoration: underline;",
+    "  text-underline-offset: 0.18em;",
+    "}",
+    ".gem-product-card__price {",
+    "  display: flex;",
+    "  flex-wrap: wrap;",
+    "  gap: var(--gem-space-xs);",
+    "  align-items: baseline;",
+    "}",
+    ".gem-product-card__badges, .gem-product-card__quick-actions {",
+    "  display: flex;",
+    "  flex-wrap: wrap;",
+    "  gap: var(--gem-space-xs);",
+    "  align-items: center;",
+    "}",
+    ".gem-product-card__quick-actions {",
+    "  align-self: end;",
+    "}",
+    ".gem-product-card__quick-actions .gem-button {",
+    "  min-width: min(100%, 8rem);",
+    "}",
+    ".gem-product-card__secondary-image {",
+    "  position: absolute;",
+    "  inset: 0;",
+    "  opacity: 0;",
+    "  transition: opacity var(--gem-motion-duration, 160ms) var(--gem-motion-easing, ease);",
+    "}",
+    ".gem-product-card:hover .gem-product-card__secondary-image {",
+    "  opacity: 1;",
+    "}",
+    ".gem-product-card__vendor, .gem-product-card__rating {",
+    "  margin: 0;",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 72%, transparent));",
+    "  font-size: 0.8125rem;",
+    "}",
+    ".gem-product-card__swatches {",
+    "  display: flex;",
+    "  flex-wrap: wrap;",
+    "  gap: var(--gem-space-xs);",
+    "}",
+    ".gem-product-media-gallery__thumb[aria-current='true'], .gem-product-media-gallery__thumb[data-gem-media-active='true'] {",
+    "  border-color: var(--gem-color-accent);",
+    "  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gem-color-accent) 28%, transparent);",
+    "}",
+    ".gem-product-media-gallery__thumb {",
+    "  cursor: pointer;",
+    "}",
+    ".gem-product-meta {",
+    "  display: flex;",
+    "  flex-wrap: wrap;",
+    "  gap: var(--gem-space-xs) var(--gem-space-md);",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 72%, transparent));",
+    "  font-size: 0.875rem;",
+    "}",
+    ".gem-product-meta__item {",
+    "  display: inline-flex;",
+    "  gap: var(--gem-space-xs);",
+    "  align-items: baseline;",
+    "}",
+    ".gem-product-meta__label {",
+    "  font-weight: 650;",
+    "  color: var(--gem-color-text);",
+    "}",
+    ".gem-product-meta__value {",
+    "  color: inherit;",
+    "}",
+    ".gem-product-main__summary {",
+    "  display: grid;",
+    "  gap: var(--gem-space-md);",
+    "  max-width: 48rem;",
+    "}",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__inner {",
+    "  display: grid;",
+    "  grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.72fr);",
+    "  align-items: start;",
+    "  gap: var(--gem-space-xl);",
+    "}",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__summary {",
+    "  position: sticky;",
+    "  top: calc(var(--gem-component-header-height, 72px) + var(--gem-space-md));",
+    "}",
+    ".gem-product-main__media {",
+    "  min-width: 0;",
+    "}",
+    ".gem-product-main__caption {",
+    "  margin: 0;",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 72%, transparent));",
+    "}",
+    ".gem-product-main__collapsible {",
+    "  border-block-start: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  padding-block: var(--gem-space-md);",
+    "}",
+    ".gem-product-main__collapsible:last-of-type {",
+    "  border-block-end: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "}",
+    ".gem-product-main__collapsible summary {",
+    "  cursor: pointer;",
+    "  font-weight: 650;",
+    "}",
+    ".gem-product-main__price {",
+    "  display: flex;",
+    "  flex-wrap: wrap;",
+    "  gap: var(--gem-space-sm);",
+    "  align-items: baseline;",
+    "  font-size: 1.25rem;",
+    "}",
+    ".gem-product-main__price s {",
+    "  color: var(--gem-color-muted);",
+    "  font-weight: 500;",
+    "}",
+    ".gem-product-main__availability {",
+    "  margin: 0;",
+    "  font-weight: 650;",
+    "}",
+    ".gem-product-main__availability--in-stock {",
+    "  color: var(--gem-color-success);",
+    "}",
+    ".gem-product-main__availability--sold-out {",
+    // --gem-color-danger, not --gem-color-error. The token pack has always emitted the former
+    // (`requiredGemTokenKeys.color` lists `danger`); nothing in the fleet ever emitted the latter, so
+    // every error surface fell through to this hardcoded hex. Measured on a plan carrying
+    // `color.danger: #ff00aa`: the stylesheet declared `--gem-color-danger: #ff00aa` and the error
+    // text still rendered rgb(180,35,24). A fallback that always wins is a token that is not governed.
+    "  color: var(--gem-color-danger, #b42318);",
+    "}",
+    ".gem-product-main__variant-fallback {",
+    "  max-width: 36rem;",
+    "  margin: 0;",
+    "  padding: 0;",
+    "  border: 0;",
+    "  display: flex;",
+    "  flex-wrap: wrap;",
+    "  gap: 0.8rem;",
+    "}",
+    ".gem-product-main__variant-fallback legend {",
+    "  width: 100%;",
+    "  padding: 0;",
+    "  margin: 0 0 0.3rem;",
+    "  font-size: 1.4rem;",
+    "  line-height: 1.8;",
+    "}",
+    ".gem-product-main__variant-pill {",
+    "  display: inline-flex;",
+    "  align-items: center;",
+    "  justify-content: center;",
+    "  min-height: 3.6rem;",
+    "  min-width: 9.2rem;",
+    "  border: 1px solid rgb(18 18 18 / 75%);",
+    "  border-radius: 999px;",
+    "  padding: 0.8rem 1.8rem;",
+    "  font-size: 1.3rem;",
+    "  line-height: 1;",
+    "}",
+    ".gem-product-main__variant-pill--selected {",
+    "  background: rgb(18 18 18);",
+    "  border-color: rgb(18 18 18);",
+    "  color: white;",
+    "}",
+    ".gem-product-main__variant-pill--disabled {",
+    "  color: rgb(18 18 18 / 55%);",
+    "  text-decoration: line-through;",
+    "}",
+    ".gem-product-main__form {",
+    "  display: grid;",
+    "  gap: var(--gem-space-md);",
+    "  max-width: 32rem;",
+    "}",
+    ".gem-buy-buttons {",
+    "  display: grid;",
+    "  gap: var(--gem-space-md);",
+    "  max-width: 32rem;",
+    "}",
+    ".gem-buy-buttons__variant, .gem-buy-buttons__quantity {",
+    "  display: grid;",
+    "  gap: var(--gem-space-xs);",
+    "}",
+    ".gem-buy-buttons__submit {",
+    "  width: 100%;",
+    "}",
+    ".gem-buy-buttons__variant-status {",
+    "  margin: 0;",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 72%, transparent));",
+    "  font-size: 0.875rem;",
+    "}",
+    ".gem-buy-buttons__error { color: var(--gem-color-danger, #b42318); }",
+    ".gem-product-main__assurance {",
+    "  display: grid;",
+    "  gap: var(--gem-space-xs);",
+    "  max-width: 32rem;",
+    "  padding: var(--gem-space-md);",
+    "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  border-radius: var(--gem-radius-md);",
+    "  background: var(--gem-color-surface);",
+    "}",
+    ".gem-product-main__assurance-item {",
+    "  display: grid;",
+    "  gap: 0.125rem;",
+    "  margin: 0;",
+    "}",
+    ".gem-product-main__assurance-item strong {",
+    "  font-size: 0.9375rem;",
+    "}",
+    ".gem-product-main__assurance-item span {",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 70%, transparent));",
+    "  font-size: 0.875rem;",
+    "}",
+    ".gem-product-main__share {",
+    "  justify-self: start;",
+    "  color: var(--gem-color-text);",
+    "  font-weight: 650;",
+    "  text-underline-offset: 0.25em;",
+    "}",
+    ".gem-product-main__quantity {",
+    "  max-width: 10rem;",
+    "}",
+    ".gem-product-main__submit {",
+    "  width: 100%;",
+    "}",
+    ".gem-variant-picker {",
+    "  display: grid;",
+    "  gap: var(--gem-space-sm);",
+    "}",
+    ".gem-swatch {",
+    "  inline-size: 2rem;",
+    "  block-size: 2rem;",
+    "  border: var(--gem-variant-pill-border-width, 1px) solid var(--gem-color-border);",
+    "  border-radius: var(--gem-variant-pill-radius, var(--gem-radius-pill, 999px));",
+    "  background: var(--gem-color-surface);",
+    "}",
+    ".gem-quantity-selector {",
+    "  display: inline-grid;",
+    "  grid-template-columns: var(--gem-component-input-height, 44px) minmax(3rem, 1fr) var(--gem-component-input-height, 44px);",
+    "  min-height: var(--gem-component-input-height, 44px);",
+    "  border: var(--gem-input-border-width, 1px) solid var(--gem-color-border);",
+    "  border-radius: var(--gem-radius-md);",
+    "  overflow: hidden;",
+    "}",
+    ".gem-quantity-input {",
+    "  display: inline-grid;",
+    "  grid-template-columns: var(--gem-component-input-height, 44px) minmax(3rem, 1fr) var(--gem-component-input-height, 44px);",
+    "  width: min(100%, 10rem);",
+    "  min-height: var(--gem-component-input-height, 44px);",
+    "  border: var(--gem-input-border-width, 1px) solid var(--gem-color-border);",
+    "  border-radius: var(--gem-radius-md);",
+    "  overflow: hidden;",
+    "}",
+    ".gem-quantity-input__button, .gem-quantity-input__field {",
+    "  min-width: 0;",
+    "  border: 0;",
+    "  background: var(--gem-color-surface);",
+    "  color: var(--gem-color-text);",
+    "  text-align: center;",
+    "}",
+    ".gem-quantity-input__button {",
+    "  font-weight: 750;",
+    "}",
+    ".gem-cart-main__form, .gem-cart-main__items, .gem-cart-footer__inner, .gem-cart-footer__blocks {",
+    "  display: grid;",
+    "  gap: var(--gem-space-md);",
+    "}",
+    ".gem-cart-footer__inner {",
+    "  justify-items: end;",
+    "}",
+    ".gem-cart-footer__note, .gem-cart-footer__blocks {",
+    "  inline-size: min(100%, 36rem);",
+    "}",
+    ".gem-cart-footer__subtotal, .gem-cart-footer__buttons {",
+    "  display: grid;",
+    "  gap: var(--gem-space-sm);",
+    "  justify-items: stretch;",
+    "}",
+    ".gem-cart-footer__total-label, .gem-cart-footer__total-value {",
+    "  margin: 0;",
+    "}",
+    ".gem-cart-footer__total-value {",
+    "  font-size: 1.25rem;",
+    "  font-weight: 760;",
+    "}",
+    ".gem-cart-footer__tax-note {",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 64%, transparent));",
+    "}",
+    ".gem-cart-line-item {",
+    "  display: grid;",
+    "  grid-template-columns: minmax(5rem, 7rem) minmax(0, 1fr) auto auto;",
+    "  gap: var(--gem-space-md);",
+    "  align-items: start;",
+    "}",
+    ".gem-cart-line-item__title, .gem-cart-line-item__remove {",
+    "  color: inherit;",
+    "}",
+    ".gem-cart-line-item__details {",
+    "  display: grid;",
+    "  gap: var(--gem-space-xs);",
+    "}",
+    ".gem-cart-line-item__media {",
+    "  aspect-ratio: 1 / 1;",
+    "  min-block-size: 5rem;",
+    "}",
+    ".gem-cart-line-item__meta, .gem-cart-line-item__price {",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 68%, transparent));",
+    "}",
+    ".gem-main-login .gem-section__inner, .gem-main-register .gem-section__inner, .gem-main-activate-account .gem-section__inner, .gem-main-reset-password .gem-section__inner {",
+    "  max-width: min(100%, 44rem);",
+    "}",
+    ".gem-main-login form, .gem-main-register form, .gem-main-activate-account form, .gem-main-reset-password form {",
+    "  gap: var(--gem-space-md);",
+    "}",
+    ".gem-main-addresses form {",
+    "  align-self: start;",
+    "}",
+    ".gem-rich-text__content {",
+    "  display: grid;",
+    "  justify-items: center;",
+    "  gap: var(--gem-space-md);",
+    "  max-width: 72rem;",
+    "  margin-inline: auto;",
+    "  text-align: center;",
+    "}",
+    ".gem-rich-text[data-gem-rich-text-alignment='left'] .gem-rich-text__content {",
+    "  justify-items: start;",
+    "  text-align: left;",
+    "}",
+    ".gem-rich-text[data-gem-rich-text-alignment='right'] .gem-rich-text__content {",
+    "  justify-items: end;",
+    "  text-align: right;",
+    "}",
+    ".gem-rich-text__blocks {",
+    "  display: grid;",
+    "  gap: var(--gem-space-md);",
+    "  width: 100%;",
+    "}",
+    ".gem-customer-card, .gem-customer-address, .gem-customer-order-status, .gem-customer-order-address {",
+    "  display: grid;",
+    "  gap: var(--gem-space-xs);",
+    "}",
+    ".gem-customer-card a, .gem-customer-address a {",
+    "  color: inherit;",
+    "  text-underline-offset: 0.18em;",
+    "}",
+    ".gem-customer-order-history {",
+    "  display: grid;",
+    "  gap: var(--gem-space-sm);",
+    "}",
+    ".gem-customer-order-history h2 {",
+    "  margin: 0;",
+    "  font-family: var(--gem-font-heading);",
+    "  font-size: clamp(1.25rem, 2vw, 1.75rem);",
+    "}",
+    ".gem-customer-order-link {",
+    "  display: grid;",
+    "  grid-template-columns: minmax(0, 1fr) auto;",
+    "  gap: var(--gem-space-sm);",
+    "  align-items: center;",
+    "  color: inherit;",
+    "  text-decoration: none;",
+    "}",
+    ".gem-customer-order-link:hover strong {",
+    "  text-decoration: underline;",
+    "  text-underline-offset: 0.18em;",
+    "}",
+    ".gem-customer-order-line {",
+    "  grid-template-columns: minmax(0, 1fr) auto;",
+    "}",
+    ".gem-customer-order-total {",
+    "  margin: 0;",
+    "  justify-self: end;",
+    "  font-weight: 750;",
+    "}",
+    ".gem-pagination {",
+    "  display: flex;",
+    "  flex-wrap: wrap;",
+    "  gap: var(--gem-space-sm);",
+    "  align-items: center;",
+    "  justify-content: center;",
+    "}",
+    ".gem-pagination a, .gem-pagination span {",
+    "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  border-radius: var(--gem-radius-md);",
+    "  padding: var(--gem-space-sm) var(--gem-space-md);",
+    "  text-decoration: none;",
+    "}",
+    ".gem-pagination [aria-current='page'], .gem-state-active {",
+    "  border-color: var(--gem-color-accent);",
+    "  background: var(--gem-color-accent);",
+    "  color: var(--gem-color-accent-text, var(--gem-color-surface));",
+    "}",
+    ".gem-state-empty, .gem-state-loading, .gem-state-error, .gem-state-success {",
+    "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  border-radius: var(--gem-radius-md);",
+    "  background: var(--gem-color-surface);",
+    "  padding: var(--gem-space-md);",
+    "}",
+    ".gem-state-empty, .gem-state-loading {",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 68%, transparent));",
+    "}",
+    ".gem-state-error {",
+    "  border-color: color-mix(in srgb, var(--gem-color-danger, #b42318) 42%, var(--gem-color-border));",
+    "  color: var(--gem-color-danger, #b42318);",
+    "  background: color-mix(in srgb, var(--gem-color-danger, #b42318) 7%, var(--gem-color-surface));",
+    "}",
+    ".gem-state-success {",
+    "  border-color: color-mix(in srgb, var(--gem-color-success, #027a48) 42%, var(--gem-color-border));",
+    "  color: var(--gem-color-success, #027a48);",
+    "  background: color-mix(in srgb, var(--gem-color-success, #027a48) 7%, var(--gem-color-surface));",
+    "}",
+    ".gem-state-loading {",
+    "  display: inline-flex;",
+    "  align-items: center;",
+    "  gap: var(--gem-space-sm);",
+    "}",
+    ".gem-state-loading::before {",
+    "  content: '';",
+    "  inline-size: 1rem;",
+    "  block-size: 1rem;",
+    "  border: 2px solid currentColor;",
+    "  border-right-color: transparent;",
+    "  border-radius: 999px;",
+    "  animation: gem-spin 0.8s linear infinite;",
+    "}",
+    "@keyframes gem-spin {",
+    "  to { transform: rotate(360deg); }",
+    "}",
+    "@media (prefers-reduced-motion: reduce) {",
+    "  .gem-state-loading::before { animation: none; }",
+    "}",
+    ".gem-sticky-atc {",
+    "  position: sticky;",
+    "  inset-block-end: 0;",
+    "  z-index: 30;",
+    "  border-top: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  background: var(--gem-color-surface);",
+    "  padding: var(--gem-space-sm) var(--gem-space-md);",
+    "  transition: transform 160ms ease, opacity 160ms ease;",
+    "}",
+    ".gem-sticky-atc[data-gem-sticky-atc-state='hidden'] {",
+    "  transform: translateY(100%);",
+    "  opacity: 0;",
+    "  pointer-events: none;",
+    "}",
+    ".gem-sticky-atc[data-gem-sticky-atc-state='visible'] {",
+    "  transform: translateY(0);",
+    "  opacity: 1;",
+    "}",
+    ...GEM_REVEAL_CSS_LINES,
+    ...GEM_AMBIENT_CSS_LINES,
+    ...GEM_DIVIDER_CSS_LINES,
+    ...GEM_CARD_CSS_LINES,
+    ...GEM_COUNTDOWN_ENDED_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);",
+    "  background: var(--gem-color-surface);",
+    "  padding: var(--gem-space-md);",
+    "}",
+    ".gem-promo-banner {",
+    "  display: flex;",
+    "  flex-wrap: wrap;",
+    "  justify-content: space-between;",
+    "  gap: var(--gem-space-sm);",
+    "}",
+    ".gem-trust-list, .gem-breadcrumbs, .gem-filter-bar {",
+    "  display: flex;",
+    "  flex-wrap: wrap;",
+    "  gap: var(--gem-space-sm);",
+    "  align-items: center;",
+    "}",
+    ".gem-filter-bar .gem-select {",
+    "  width: auto;",
+    "  min-width: min(18rem, 100%);",
+    "  margin-left: auto;",
+    "}",
+    ".gem-collection-filter-toolbar__form {",
+    "  display: flex;",
+    "  flex-wrap: wrap;",
+    "  align-items: end;",
+    "  gap: var(--gem-space-sm);",
+    "}",
+    ".gem-collection-filter-toolbar__filters, .gem-collection-filter-toolbar__sort, .gem-collection-filter-toolbar__filter {",
+    "  display: grid;",
+    "  gap: var(--gem-space-xs);",
+    "}",
+    ".gem-collection-filter-toolbar__filters {",
+    "  align-content: start;",
+    "}",
+    ".gem-collection-filter-toolbar__filters > summary {",
+    "  list-style: none;",
+    "}",
+    ".gem-collection-filter-toolbar__filters > summary::-webkit-details-marker {",
+    "  display: none;",
+    "}",
+    ".gem-collection-filter-toolbar__filters[open] {",
+    "  gap: var(--gem-space-sm);",
+    "}",
+    ".gem-collection-filter-toolbar__sort {",
+    "  margin-left: auto;",
+    "}",
+    ".gem-collection-filter-toolbar__select {",
+    "  min-height: var(--gem-component-input-height, 44px);",
+    "  min-width: min(16rem, 100%);",
+    "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  border-radius: var(--gem-radius-md);",
+    "  background: var(--gem-color-surface);",
+    "  color: var(--gem-color-text);",
+    "  padding-inline: var(--gem-space-md);",
+    "}",
+    ".gem-collection-filter-toolbar__active {",
+    "  display: flex;",
+    "  flex-wrap: wrap;",
+    "  align-items: center;",
+    "  gap: var(--gem-space-xs);",
+    "}",
+    ".gem-collection-filter-toolbar__active:empty {",
+    "  display: none;",
+    "}",
+    ".gem-collection-filter-toolbar__active-filter {",
+    "  text-decoration: none;",
+    "}",
+    ".gem-collection-filter-toolbar__clear {",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 72%, transparent));",
+    "  font-size: 0.875rem;",
+    "}",
+    ".gem-tabs {",
+    "  display: grid;",
+    "  gap: var(--gem-space-md);",
+    "}",
+    ".gem-drawer, .gem-modal {",
+    "  background: var(--gem-color-surface);",
+    "  color: var(--gem-color-text);",
+    "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  box-shadow: var(--gem-shadow-md, none);",
+    "}",
+    ".gem-modal[aria-hidden='true'] {",
+    "  display: none;",
+    "}",
+    ".gem-modal[open] {",
+    "  display: grid;",
+    "  gap: var(--gem-space-sm);",
+    "  padding: var(--gem-space-md);",
+    "}",
+    ".gem-cart-drawer {",
+    "  position: relative;",
+    "  z-index: 80;",
+    "}",
+    ".gem-cart-drawer:not([open]) .gem-cart-drawer__overlay, .gem-cart-drawer:not([open]) .gem-cart-drawer__panel {",
+    "  display: none;",
+    "}",
+    ".gem-cart-drawer__overlay {",
+    "  position: fixed;",
+    "  inset: 0;",
+    "  background: rgba(0, 0, 0, 0.36);",
+    "}",
+    // Opening motion (gemfactory request #13, 01/10/2026): 28 stored drawers each declared their own
+    // `@keyframes …-in { from { transform: translateX(24px); opacity: 0 } }`. OPT-IN on the drawer root,
+    // data-gem-drawer-motion="slide", so no existing drawer changes (review #650: as a default the overlay fade
+    // reached all 28): the panel slides in by --gem-drawer-offset (24px) and the overlay fades. A drawer drops its own
+    // keyframes by adding the attribute. The panel sits at inline-end, so under RTL it comes from the left.
+    // :dir(rtl) follows the HTML dir attribute through inheritance, so a dir="ltr" island inside an rtl page stays
+    // ltr (a `[dir='rtl'] .x` descendant rule got that wrong). CSS `direction` alone is invisible to selectors. Off under prefers-reduced-motion.
+    "@keyframes gem-cart-drawer-panel-in { from { translate: calc(var(--gem-drawer-offset, 24px) * var(--gem-drawer-dir, 1)) 0; opacity: 0; } }",
+    "@keyframes gem-cart-drawer-overlay-in { from { opacity: 0; } }",
+    ".gem-cart-drawer__panel:dir(rtl) { --gem-drawer-dir: -1; }",
+    ".gem-cart-drawer[data-gem-drawer-motion='slide'] .gem-cart-drawer__overlay { animation: gem-cart-drawer-overlay-in var(--gem-motion-duration, 160ms) var(--gem-motion-easing, ease); }",
+    ".gem-cart-drawer[data-gem-drawer-motion='slide'] .gem-cart-drawer__panel { animation: gem-cart-drawer-panel-in var(--gem-motion-duration, 160ms) var(--gem-motion-easing, ease); }",
+    ".gem-cart-drawer__panel {",
+    "  position: fixed;",
+    "  inset-block: 0;",
+    "  inset-inline-end: 0;",
+    "  width: min(100%, 28rem);",
+    "  overflow: auto;",
+    "  background: var(--gem-color-surface);",
+    "  color: var(--gem-color-text);",
+    "  border-inline-start: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  box-shadow: var(--gem-shadow-md, none);",
+    "  padding: var(--gem-space-lg);",
+    "}",
+    // AFTER the opt-in rules and at THEIR specificity: measured 02/10/2026, a reduced-motion rule placed before the
+    // animation rule (or weaker than it) left the panel animating.
+    "@media (prefers-reduced-motion: reduce) { .gem-cart-drawer[data-gem-drawer-motion] :is(.gem-cart-drawer__panel, .gem-cart-drawer__overlay) { animation: none; } }",
+    ".gem-cart-drawer__header, .gem-cart-drawer__footer {",
+    "  display: flex;",
+    "  flex-wrap: wrap;",
+    "  align-items: center;",
+    "  justify-content: space-between;",
+    "  gap: var(--gem-space-sm);",
+    "}",
+    ".gem-cart-drawer__header {",
+    "  margin-bottom: var(--gem-space-lg);",
+    "}",
+    ".gem-cart-drawer__header h2 {",
+    "  margin: 0;",
+    "  font-family: var(--gem-font-heading);",
+    "}",
+    ".gem-cart-drawer__form, .gem-cart-drawer__items, .gem-cart-drawer__empty {",
+    "  display: grid;",
+    "  gap: var(--gem-space-md);",
+    "}",
+    ".gem-cart-drawer .gem-cart-line-item {",
+    "  grid-template-columns: minmax(4.5rem, 5.5rem) minmax(0, 1fr);",
+    "  gap: var(--gem-space-sm);",
+    "}",
+    ".gem-cart-drawer .gem-cart-line-item__quantity, .gem-cart-drawer .gem-cart-line-item__price {",
+    "  grid-column: 2;",
+    "}",
+    ".gem-cart-drawer .gem-cart-line-item__price {",
+    "  justify-self: start;",
+    "}",
+    ".gem-cart-drawer__footer {",
+    "  margin-top: var(--gem-space-lg);",
+    "  padding-top: var(--gem-space-md);",
+    "  border-top: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "}",
+    ".gem-cart-drawer__footer p {",
+    "  flex-basis: 100%;",
+    "  margin: 0;",
+    "  font-weight: 750;",
+    "}",
+    ".gem-copy-code, .gem-delivery-date, .gem-stock-indicator, .gem-popup {",
+    "  color: var(--gem-color-text);",
+    "  background: var(--gem-color-surface);",
+    "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  border-radius: var(--gem-radius-md);",
+    "}",
+    ".gem-copy-code, .gem-delivery-date, .gem-stock-indicator {",
+    "  display: inline-flex;",
+    "  align-items: center;",
+    "  gap: var(--gem-space-sm);",
+    "  padding: var(--gem-space-sm) var(--gem-space-md);",
+    "}",
+    ".gem-popup {",
+    "  box-shadow: var(--gem-shadow-md, none);",
+    "  padding: var(--gem-space-lg);",
+    "}",
+    ".gem-back-to-top {",
+    "  position: fixed;",
+    "  inset-block-end: var(--gem-space-lg);",
+    "  inset-inline-end: var(--gem-space-lg);",
+    "  z-index: 20;",
+    "}",
+    ".gem-content-shell {",
+    "  max-width: 72ch;",
+    "}",
+    ".gem-content-shell .gem-section__heading {",
+    "  max-width: 12ch;",
+    "}",
+    ".gem-content-header {",
+    "  display: grid;",
+    "  gap: var(--gem-space-sm);",
+    "}",
+    ".gem-content-body {",
+    "  max-width: 72ch;",
+    "}",
+    ".gem-content-body > * + * {",
+    "  margin-top: var(--gem-space-md);",
+    "}",
+    ".gem-content-body h2, .gem-content-body h3 {",
+    "  margin-bottom: 0;",
+    "  font-family: var(--gem-font-heading);",
+    "  line-height: 1.15;",
+    "}",
+    ".gem-content-body ul, .gem-content-body ol {",
+    "  padding-inline-start: var(--gem-space-lg);",
+    "}",
+    ".gem-content-body a {",
+    "  color: var(--gem-color-accent);",
+    "  text-underline-offset: 0.18em;",
+    "}",
+    ".gem-main-page .gem-content-shell {",
+    "  display: grid;",
+    "  gap: var(--gem-space-lg);",
+    "}",
+    ".gem-contact-form {",
+    "  display: grid;",
+    "  gap: var(--gem-space-lg);",
+    "}",
+    ".gem-contact-form__form {",
+    "  gap: var(--gem-space-md);",
+    "}",
+    ".gem-contact-form__form .gem-button {",
+    "  justify-self: start;",
+    "}",
+    ".gem-email-signup-banner .gem-content-shell {",
+    "  display: grid;",
+    "  justify-items: center;",
+    "  gap: var(--gem-space-md);",
+    "  margin-inline: auto;",
+    "  text-align: center;",
+    "}",
+    ".gem-email-signup-banner .gem-newsletter-form {",
+    "  justify-content: center;",
+    "  width: min(100%, 44rem);",
+    "}",
+    ".gem-gift-card {",
+    "  min-block-size: 100vh;",
+    "  display: grid;",
+    "  place-items: center;",
+    "  padding: var(--gem-space-lg);",
+    "}",
+    ".gem-gift-card__main {",
+    "  display: grid;",
+    "  justify-items: center;",
+    "  gap: var(--gem-space-md);",
+    "  text-align: center;",
+    "}",
+    ".gem-gift-card__code {",
+    "  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;",
+    "  font-size: clamp(1.25rem, 4vw, 2rem);",
+    "  letter-spacing: 0.08em;",
+    "}",
+    ".gem-gift-card__actions {",
+    "  display: flex;",
+    "  flex-wrap: wrap;",
+    "  justify-content: center;",
+    "  gap: var(--gem-space-sm);",
+    "}",
+    ".gem-blog-grid {",
+    "  display: grid;",
+    "  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));",
+    "  gap: var(--gem-space-md);",
+    "}",
+    ".gem-article-card {",
+    "  display: grid;",
+    "  grid-template-rows: auto minmax(0, 1fr);",
+    "  gap: var(--gem-space-sm);",
+    "  color: var(--gem-color-text);",
+    "}",
+    ".gem-article-card > a {",
+    "  color: inherit;",
+    "  text-decoration: none;",
+    "}",
+    ".gem-article-card__media {",
+    "  aspect-ratio: 16 / 10;",
+    "}",
+    ".gem-article-card__content {",
+    "  display: grid;",
+    "  gap: var(--gem-space-xs);",
+    "}",
+    ".gem-article-card__meta {",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 72%, transparent));",
+    "  font-size: 0.875rem;",
+    "}",
+    ".gem-article-card__title {",
+    "  margin: 0;",
+    "  font-family: var(--gem-font-heading);",
+    "}",
+    ".gem-article-card__title a {",
+    "  color: inherit;",
+    "  text-decoration: none;",
+    "}",
+    ".gem-article-card__title a:hover {",
+    "  text-decoration: underline;",
+    "  text-underline-offset: 0.18em;",
+    "}",
+    ".gem-search-form {",
+    "  display: grid;",
+    "  grid-template-columns: minmax(0, 1fr) auto;",
+    "  gap: var(--gem-space-sm);",
+    "  align-items: end;",
+    "  max-width: 48rem;",
+    "}",
+    ".gem-search-form [data-gem-predictive-search-results] {",
+    "  grid-column: 1 / -1;",
+    "}",
+    ".gem-search-results-meta {",
+    "  margin: 0;",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 72%, transparent));",
+    "}",
+    ".gem-search-result-card {",
+    "  display: grid;",
+    "  gap: var(--gem-space-xs);",
+    "  color: var(--gem-color-text);",
+    "  text-decoration: none;",
+    "}",
+    ".gem-search-result-card span {",
+    "  display: block;",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 72%, transparent));",
+    "  font-size: 0.875rem;",
+    "}",
+    ".gem-search-result-card:hover strong {",
+    "  text-decoration: underline;",
+    "  text-underline-offset: 0.18em;",
+    "}",
+    ".gem-article-card__excerpt {",
+    "  margin: 0;",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 72%, transparent));",
+    "}",
+    ".gem-not-found {",
+    "  max-width: 42rem;",
+    "}",
+    ".gem-u-hidden { display: none !important; }",
+    ".gem-u-visually-hidden {",
+    "  position: absolute !important;",
+    "  width: 1px !important;",
+    "  height: 1px !important;",
+    "  overflow: hidden !important;",
+    "  clip: rect(0, 0, 0, 0) !important;",
+    "  white-space: nowrap !important;",
+    "}",
+    ".gem-u-center { text-align: center; }",
+    ".gem-u-muted { color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 72%, transparent)); }",
+    ".gem-u-surface { background: var(--gem-color-surface); color: var(--gem-color-text); }",
+    ".gem-u-accent { color: var(--gem-color-accent); }",
+    ".gem-u-stack-sm { gap: var(--gem-space-sm); }",
+    ".gem-u-stack-md { gap: var(--gem-space-md); }",
+    ".gem-u-stack-lg { gap: var(--gem-space-lg); }",
+    "@media (max-width: 760px) {",
+    "  .gem-cart-line-item { grid-template-columns: minmax(4rem, 5rem) minmax(0, 1fr); }",
+    "  .gem-cart-line-item__quantity, .gem-cart-line-item__price { grid-column: 2; }",
+    "  .gem-customer-order-link, .gem-customer-order-line { grid-template-columns: minmax(0, 1fr); }",
+    "  .gem-customer-order-total { justify-self: start; }",
+    "  .gem-search-form { grid-template-columns: minmax(0, 1fr); }",
+    "  .gem-filter-bar, .gem-collection-filter-toolbar__form { display: grid; align-items: stretch; }",
+    "  .gem-filter-bar .gem-select, .gem-collection-filter-toolbar__sort, .gem-collection-filter-toolbar__select, .gem-collection-filter-toolbar__submit { width: 100%; margin-left: 0; }",
+    "  .gem-collection-filter-toolbar__filters { border: var(--gem-border-subtle, 1px solid var(--gem-color-border)); border-radius: var(--gem-radius-md); background: var(--gem-color-surface); padding: var(--gem-space-sm); }",
+    "  .gem-collection-filter-toolbar__filters > summary { width: 100%; }",
+    "  .gem-collection-filter-toolbar__filters[open] { padding-bottom: var(--gem-space-md); }",
+    "  .gem-collection-filter-toolbar__active { align-items: stretch; }",
+    "  .gem-collection-filter-toolbar__active-filter, .gem-collection-filter-toolbar__clear { min-height: 2.25rem; align-items: center; }",
+    "}"
+  ].join("\n");
+}
+function createGemSectionRuntimeContractCss(selector = "[data-gem-section-library-id]", options = {}) {
+  const background = options.backgroundVar ?? "var(--gem-color-background)";
+  const surface = options.surfaceVar ?? "var(--gem-color-surface)";
+  const text = options.textVar ?? "var(--gem-color-text)";
+  const mutedText = options.mutedTextVar ?? `color-mix(in srgb, ${text} 72%, transparent)`;
+  const accent = options.accentVar ?? "var(--gem-color-accent)";
+  const accentText = options.accentTextVar ?? "var(--gem-color-accent-text, #ffffff)";
+  const border = options.borderVar ?? "var(--gem-color-border)";
+  const page = options.pageVar ?? "var(--gem-layout-page, 1180px)";
+  const gutter = options.gutterVar ?? "var(--gem-layout-gutter, 32px)";
+  return [
+    `${selector} {`,
+    "  box-sizing: border-box;",
+    `  background: ${background};`,
+    `  color: ${text};`,
+    "}",
+    `${selector} *,`,
+    `${selector} *::before,`,
+    `${selector} *::after {`,
+    "  box-sizing: border-box;",
+    "}",
+    `${selector} .gem-stack {`,
+    "  display: grid;",
+    "  gap: var(--gem-space-md, 16px);",
+    "}",
+    `${selector} .gem-cluster {`,
+    "  display: flex;",
+    "  flex-wrap: wrap;",
+    "  align-items: center;",
+    "  gap: var(--gem-space-sm, 8px);",
+    "}",
+    `${selector} .gem-grid,`,
+    `${selector} .gem-section__grid {`,
+    "  display: grid;",
+    "  gap: var(--gem-space-lg, 24px);",
+    "}",
+    `${selector} .gem-card,`,
+    `${selector} .gem-product-card {`,
+    `  border: 1px solid ${border};`,
+    "  border-radius: var(--gem-radius-md, 18px);",
+    `  background: ${surface};`,
+    "  color: inherit;",
+    "}",
+    `${selector} .gem-card {`,
+    "  padding: var(--gem-component-card-padding, 16px);",
+    "}",
+    `${selector} .gem-media {`,
+    "  display: block;",
+    "  overflow: hidden;",
+    `  background: color-mix(in srgb, ${accent} 10%, ${surface});`,
+    "}",
+    `${selector} .gem-heading,`,
+    `${selector} .gem-section__heading,`,
+    `${selector} .gem-product-card__title {`,
+    "  margin: 0;",
+    "  color: inherit;",
+    "  font-family: var(--gem-font-heading, inherit);",
+    "}",
+    `${selector} .gem-text,`,
+    `${selector} .gem-section__body {`,
+    "  margin: 0;",
+    `  color: ${mutedText};`,
+    "  line-height: 1.55;",
+    "}",
+    `${selector} .gem-badge,`,
+    `${selector} .gem-proof {`,
+    "  display: inline-flex;",
+    "  width: fit-content;",
+    "  align-items: center;",
+    `  border: 1px solid ${border};`,
+    "  border-radius: var(--gem-radius-pill, 999px);",
+    "  padding: 6px 10px;",
+    `  background: ${surface};`,
+    `  color: ${text};`,
+    "  font-size: 0.8125rem;",
+    "  font-weight: 700;",
+    "}",
+    `${selector} .gem-icon {`,
+    "  display: inline-grid;",
+    "  width: 1.75rem;",
+    "  height: 1.75rem;",
+    "  flex: 0 0 auto;",
+    "  place-items: center;",
+    "}",
+    `${selector} .gem-u-visually-hidden {`,
+    "  position: absolute;",
+    "  width: 1px;",
+    "  height: 1px;",
+    "  overflow: hidden;",
+    "  clip: rect(0 0 0 0);",
+    "}",
+    `.gem-section${selector} {`,
+    "  padding-block: clamp(44px, 7vw, 92px);",
+    "}",
+    `.gem-section${selector} > .gem-section__inner,`,
+    `.gem-section${selector} .gem-container {`,
+    `  width: min(${page}, calc(100% - ${gutter}));`,
+    `  max-width: ${page};`,
+    "  margin-inline: auto;",
+    "}",
+    `.gem-section${selector} .gem-section__heading,`,
+    `.gem-section${selector} .gem-section__body,`,
+    `.gem-section${selector} .gem-text {`,
+    "  overflow-wrap: anywhere;",
+    "}",
+    `.gem-section${selector} img {`,
+    "  max-width: 100%;",
+    "  height: auto;",
+    "}",
+    `.gem-section${selector} .gem-media > svg {`,
+    "  display: block;",
+    "  width: 100%;",
+    "  height: 100%;",
+    "}",
+    `${selector} .gem-button,`,
+    `${selector} [class*="__button"] {`,
+    "  display: inline-flex;",
+    "  width: fit-content;",
+    "  min-height: 44px;",
+    "  align-items: center;",
+    "  justify-content: center;",
+    `  border: 1px solid ${accent};`,
+    "  border-radius: var(--gem-radius-pill, 999px);",
+    "  padding: 10px 16px;",
+    `  background: ${accent};`,
+    `  color: ${accentText};`,
+    "  font-weight: 800;",
+    "  text-decoration: none;",
+    "}"
+  ].join("\n");
+}
+var OPT_IN_EYEBROW = ":where(.gem-section[data-gem-eyebrow='show']) .gem-section__eyebrow { display: block; letter-spacing: 0.12em; }";
+var OPT_IN_HEADING = ":where(.gem-section[data-gem-heading='section']) .gem-section__heading { margin: 0; font-family: var(--gem-font-heading); font-size: var(--gem-h2); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }";
+var OPT_IN_BODY = ":where(.gem-section[data-gem-body='section']) .gem-section__body { margin: 0; color: var(--gem-color-muted); font-size: var(--gem-body); line-height: var(--gem-font-body-line-height, 1.5); }";
+var OPT_IN_HEADING_MOBILE = "  :where(.gem-section[data-gem-heading='section']) .gem-section__heading { font-size: min(var(--gem-h2), clamp(1.75rem, 9vw, 2.75rem)); }";
+function createSectionCss() {
+  return [
+    ".gem-section {",
+    "  color: var(--gem-color-text);",
+    "  background: var(--gem-color-background);",
+    "  padding-block: var(--gem-layout-section, var(--gem-space-3xl, 64px));",
+    "  overflow: clip;",
+    "}",
+    ".gem-section__inner {",
+    "  width: min(var(--gem-layout-page, 1180px), calc(100% - var(--gem-layout-gutter, 32px)));",
+    "  margin-inline: auto;",
+    "  display: grid;",
+    "  gap: var(--gem-space-lg);",
+    "}",
+    // Typography + list defaults for the SECTION layer. These live in createGemBaseCss, which styles a
+    // whole storefront document — but the editor/preview renderers compose sections WITHOUT that
+    // document shell, so they inherited nothing: every preview rendered in the browser's default
+    // serif while only headings (which set the token themselves) came out right. Measured on a real
+    // generated store: body and eyebrow computed to "Times", h1 to "system-ui".
+    //
+    // Setting it on `.gem-section` rather than `body` keeps it composable — a section is styled the
+    // same whether it is alone in a preview or one of twenty in a document, and a section's own
+    // gem.css still wins on specificity wherever it has an opinion.
+    ".gem-section { font-family: var(--gem-font-body); }",
+    // Eyebrow spacing lives in the .gem-section__eyebrow rule below, not here — see the note there.
+    // Copy-block lists are typeset prose, not document lists: the hero shipped raw bullet discs and a
+    // 40px indent that broke its centring. Scoped to `__copy` containers so FAQ/feature lists, which
+    // own their markers deliberately, are untouched.
+    '.gem-section [class*="__copy"] ul, .gem-section [class*="__copy"] ol { list-style: none; padding-left: 0; margin: var(--gem-space-sm, 12px) 0 0; }',
+    // Content alignment knob (section LAYOUT axis) — set by apply_section_edit set_layout (gemboss
+    // override key gem_content_alignment), emitted as data-gem-content-alignment on the shell (real
+    // 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)[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)[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,
+    // the theme emitted it, and nothing moved — a ghost edit for every "căn giữa theo chiều dọc" /
+    // "chữ dồn xuống dưới" request the tool description explicitly promises it answers.
+    //
+    // The full-bleed hero's copy block is ABSOLUTELY positioned (left:50%; bottom:50px), so the only
+    // thing that moves it is overriding that inset — align-* on an ancestor cannot. Specificity
+    // (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)[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)[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
+    // (inner IS the 2-col grid); (b) `__media` is a direct child of the section's OWN 2-col grid wrapper
+    // (`.gem-section__inner > [class*='__grid'] > [class*='__media']`) — feature-split, image-with-text
+    // and product-highlight all nest their media one level down in a `{section}__grid`, so the earlier
+    // inner-DIRECT-only rule was a DEAD knob on them (advertised via the media_position setting, but the
+    // swap did nothing). CARD/product grids stay untouched: their media is nested DEEPER (grid > card >
+    // __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)[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)[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
+    // sc-013), flipping data-gem-content-spacing on gem-hero-banner / gem-hero-video moved no property.
+    // The knob drives the rhythm between the stacked copy, only when set. TWO mechanisms, chosen by the copy
+    // block's measured display (every storefront HeroBanner/HeroVideo rendered and measured in Chromium):
+    //  - GRID copy blocks: row-gap. A margin would ADD to their existing gap (tight came out looser than
+    //    unset) and would override variant margins such as `.gem-hero--mobile-split .gem-hero__text
+    //    { margin-top: auto }`. row-gap is inert on a block container, so it is safe on every copy class.
+    //  - BLOCK copy blocks (default / dawn-image-banner __copy, slideshow __copy): margin between children,
+    //    with the children's own bottom margins zeroed — adjacent block margins collapse to the larger one.
+    ":is(.gem-hero-banner, .gem-hero-video, .gem-hero)[data-gem-content-spacing='tight'] :is(.gem-hero-banner__copy, .gem-hero-banner__content, .gem-hero-slideshow__copy, .gem-hero-video__content, .gem-hero__content) { row-gap: var(--gem-space-xs); }",
+    ":is(.gem-hero-banner--default, .gem-hero-banner--dawn-image-banner)[data-gem-content-spacing='tight'] .gem-hero-banner__copy > * + *, .gem-hero-banner[data-gem-content-spacing='tight'] .gem-hero-slideshow__copy > * + * { margin-top: var(--gem-space-xs); }",
+    ":is(.gem-hero-banner--default, .gem-hero-banner--dawn-image-banner)[data-gem-content-spacing='tight'] .gem-hero-banner__copy > :not(:last-child), .gem-hero-banner[data-gem-content-spacing='tight'] .gem-hero-slideshow__copy > :not(:last-child) { margin-bottom: 0; }",
+    ":is(.gem-hero-banner, .gem-hero-video, .gem-hero)[data-gem-content-spacing='normal'] :is(.gem-hero-banner__copy, .gem-hero-banner__content, .gem-hero-slideshow__copy, .gem-hero-video__content, .gem-hero__content) { row-gap: var(--gem-space-md); }",
+    ":is(.gem-hero-banner--default, .gem-hero-banner--dawn-image-banner)[data-gem-content-spacing='normal'] .gem-hero-banner__copy > * + *, .gem-hero-banner[data-gem-content-spacing='normal'] .gem-hero-slideshow__copy > * + * { margin-top: var(--gem-space-md); }",
+    ":is(.gem-hero-banner--default, .gem-hero-banner--dawn-image-banner)[data-gem-content-spacing='normal'] .gem-hero-banner__copy > :not(:last-child), .gem-hero-banner[data-gem-content-spacing='normal'] .gem-hero-slideshow__copy > :not(:last-child) { margin-bottom: 0; }",
+    ":is(.gem-hero-banner, .gem-hero-video, .gem-hero)[data-gem-content-spacing='roomy'] :is(.gem-hero-banner__copy, .gem-hero-banner__content, .gem-hero-slideshow__copy, .gem-hero-video__content, .gem-hero__content) { row-gap: var(--gem-space-xl); }",
+    ":is(.gem-hero-banner--default, .gem-hero-banner--dawn-image-banner)[data-gem-content-spacing='roomy'] .gem-hero-banner__copy > * + *, .gem-hero-banner[data-gem-content-spacing='roomy'] .gem-hero-slideshow__copy > * + * { margin-top: var(--gem-space-xl); }",
+    ":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)[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)[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,
+    // gem-collage__grid…), not the universal `.gem-section__grid` — so a `.gem-section__grid`-only rule
+    // was a DEAD knob on them (advertised, but set_layout grid_columns changed nothing). Match any
+    // `[class*='__grid']` direct-ish child so the knob is honest everywhere it's offered. Specificity
+    // (0,2,0)+attr beats a section's own single-class grid template, so it only wins when the operator
+    // sets it; unset, the section's native `columns` setting still governs. (Mirrors the re-stretch rule
+    // above, which already uses [class*='__grid'] safely.)
+    ...GEM_GRID_COLUMNS_KNOB_CSS_LINES,
+    // Per-section background knob — set by apply_section_edit set_style. Maps a THEME-TOKEN swatch to
+    // a --gem-color-* background PLUS its paired text token, so contrast stays handled and the section
+    // stays on-brand (no arbitrary hex). `default` = inherit the page background (the revert value).
+    // block padding gives the colored band breathing room when a section's inner has none of its own.
+    // Each swatch also publishes --gem-section-bg for the shape-divider to paint with. `default`
+    // publishes the PAGE colour while keeping `background: transparent` on the section itself —
+    // the two are separate declarations, so the section still lets whatever is behind it show
+    // through, and only the divider gains something to paint. Without this, choosing `default`
+    // (or leaving the knob unset) silently disabled the divider.
+    // 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)[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)[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)[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)[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.
+    ".gem-section[data-gem-heading-color='accent'] :is(.gem-section__heading, .gem-hero-banner__copy h1, .gem-hero-banner__copy h2) { color: var(--gem-color-accent); }",
+    ".gem-section[data-gem-heading-color='red'] :is(.gem-section__heading, .gem-hero-banner__copy h1, .gem-hero-banner__copy h2) { color: #d61f1f; }",
+    ".gem-section[data-gem-heading-color='green'] :is(.gem-section__heading, .gem-hero-banner__copy h1, .gem-hero-banner__copy h2) { color: #1a7f37; }",
+    ".gem-section[data-gem-heading-color='dark'] :is(.gem-section__heading, .gem-hero-banner__copy h1, .gem-hero-banner__copy h2) { color: var(--gem-color-text); }",
+    ".gem-section[data-gem-eyebrow-color='accent'] .gem-section__eyebrow { color: var(--gem-color-accent); }",
+    ".gem-section[data-gem-eyebrow-color='red'] .gem-section__eyebrow { color: #d61f1f; }",
+    ".gem-section[data-gem-eyebrow-color='green'] .gem-section__eyebrow { color: #1a7f37; }",
+    ".gem-section[data-gem-eyebrow-color='dark'] .gem-section__eyebrow { color: var(--gem-color-text); }",
+    ".gem-section[data-gem-badge-color='accent'] [class*='__badge'] { color: var(--gem-color-accent); }",
+    ".gem-section[data-gem-badge-color='red'] [class*='__badge'] { color: #d61f1f; }",
+    ".gem-section[data-gem-badge-color='green'] [class*='__badge'] { color: #1a7f37; }",
+    ".gem-section[data-gem-badge-color='dark'] [class*='__badge'] { color: var(--gem-color-text); }",
+    ".gem-section__eyebrow {",
+    // Bottom margin, not 0: the eyebrow sat flush against the heading (both margin:0) and the two
+    // read as colliding. It belongs HERE rather than in a separate rule — an earlier standalone
+    // `.gem-section__eyebrow { margin: … }` had identical specificity and simply lost to this one on
+    // source order, so it shipped in the bundle and moved nothing.
+    "  margin: 0 0 var(--gem-space-sm, 12px);",
+    "  color: var(--gem-color-accent);",
+    "  font-size: 0.8125rem;",
+    "  font-weight: calc(650 * var(--gem-style-weight, 1));",
+    "  text-transform: uppercase;",
+    "}",
+    ".gem-section__heading {",
+    "  margin: 0;",
+    "  font-family: var(--gem-font-heading);",
+    "  font-size: clamp(calc(2rem * var(--gem-typography-heading-scale, 1)), calc(4vw * var(--gem-typography-heading-scale, 1)), calc(4rem * var(--gem-typography-heading-scale, 1)));",
+    "  line-height: 1.04;",
+    "}",
+    ".gem-section__body {",
+    "  margin: 0;",
+    "  max-width: 64ch;",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 72%, transparent));",
+    "}",
+    ".gem-section__grid {",
+    "  display: grid;",
+    "  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));",
+    "  column-gap: var(--gem-grid-column-gap, var(--gem-space-md));",
+    "  row-gap: var(--gem-grid-row-gap, var(--gem-space-md));",
+    "}",
+    ".gem-section[data-gem-composition-mode='image-with-copy'] .gem-section__inner {",
+    "  align-content: center;",
+    "}",
+    ".gem-section:is([data-gem-composition-mode='slideshow'], [data-gem-composition-mode='video-led']) .gem-section__inner {",
+    "  min-block-size: min(72vh, 680px);",
+    "  align-content: end;",
+    "}",
+    ".gem-section[data-gem-composition-mode='category-grid'] .gem-section__grid {",
+    "  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));",
+    "}",
+    ".gem-section[data-gem-composition-mode='split-collage'] .gem-section__grid {",
+    "  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);",
+    "  align-items: stretch;",
+    "}",
+    ".gem-section[data-gem-composition-mode='video-led'] {",
+    "  background: color-mix(in srgb, var(--gem-color-text) 6%, var(--gem-color-background));",
+    "}",
+    ".gem-section:is([data-gem-product-card-mode='gallery'], [data-gem-product-card-mode='editorial']) :is(.gem-product-card-grid__grid, .gem-section__grid) {",
+    "  gap: var(--gem-space-xl);",
+    "}",
+    ".gem-section:is([data-gem-product-card-mode='quick-buy'], [data-gem-product-card-mode='badge-heavy']) .gem-product-card {",
+    "  position: relative;",
+    "}",
+    ".gem-section[data-gem-product-card-mode='standard'] .gem-product-card-grid__grid {}",
+    ".gem-section:is([data-gem-product-card-mode='utility'], [data-gem-collection-card-mode='dense-grid']) .gem-product-card-grid__grid {",
+    "  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));",
+    "  gap: var(--gem-space-sm);",
+    "}",
+    ".gem-section:is([data-gem-product-card-mode='badge-heavy'], [data-gem-badge-density='high']) .gem-badge {",
+    "  border-color: var(--gem-color-accent);",
+    "  color: var(--gem-color-accent);",
+    "}",
+    ".gem-section:is([data-gem-collection-card-mode='image-tile'], [data-gem-collection-card-mode='editorial-tile'], [data-gem-collection-card-mode='collage']) .gem-media {",
+    "  min-block-size: clamp(12rem, 26vw, 24rem);",
+    "}",
+    ".gem-section[data-gem-collection-card-mode='editorial-tile'] .gem-section__grid {",
+    "  gap: var(--gem-space-xl);",
+    "}",
+    ".gem-section[data-gem-collection-card-mode='collage'] .gem-section__grid {",
+    "  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));",
+    "}",
+    ".gem-section[data-gem-card-copy-mode='minimal'] :is(.gem-product-card__vendor, .gem-product-card__description) {",
+    "  display: none;",
+    "}",
+    ".gem-section:is([data-gem-image-treatment='editorial-crop'], [data-gem-image-treatment='poster']) .gem-media {",
+    "  aspect-ratio: 4 / 5;",
+    "}",
+    ".gem-section:is([data-gem-proof-mode='press'], [data-gem-proof-mode='trust-strip']) .gem-reviews-proof-strip__points {}",
+    ".gem-section[data-gem-proof-mode='minimal'] .gem-reviews-proof-strip__points {",
+    "  gap: var(--gem-space-sm);",
+    "}",
+    ".gem-section[data-gem-proof-mode='compliance'] .gem-reviews-proof-strip__points {",
+    "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  padding: var(--gem-space-md);",
+    "}",
+    ".gem-section[data-gem-proof-mode='testimonial'] .gem-reviews-proof-strip__points {",
+    "  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));",
+    "  gap: var(--gem-space-lg);",
+    "}",
+    ".gem-section[data-gem-editorial-band-mode='gridline-story'] .gem-section__inner {",
+    "  border-block: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  padding-block: var(--gem-space-xl);",
+    "}",
+    ".gem-section:is([data-gem-editorial-band-mode='rich-text'], [data-gem-editorial-band-mode='none']) .gem-section__body {}",
+    ".gem-section[data-gem-editorial-band-mode='marquee'] .gem-section__heading {",
+    "  text-transform: uppercase;",
+    "}",
+    ".gem-section[data-gem-editorial-band-mode='media-story'] .gem-section__grid {",
+    "  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);",
+    "}",
+    "@media (min-width: 990px) {",
+    "  #MainContent:has(.gem-product-media-gallery[data-gem-section-id='product-gallery']):has(.gem-product-main[data-gem-section-id='product-main']) {",
+    "    display: grid;",
+    "    grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.72fr);",
+    "    gap: var(--gem-space-xl);",
+    "    align-items: start;",
+    "    width: min(var(--gem-layout-page, 1180px), calc(100% - var(--gem-layout-gutter, 32px)));",
+    "    margin-inline: auto;",
+    "    padding-block: var(--gem-space-xl);",
+    "  }",
+    "  #MainContent:has(.gem-product-media-gallery[data-gem-section-id='product-gallery']):has(.gem-product-main[data-gem-section-id='product-main']) > .gem-section {",
+    "    padding-block: 0;",
+    "    overflow: visible;",
+    "  }",
+    "  #MainContent:has(.gem-product-media-gallery[data-gem-section-id='product-gallery']):has(.gem-product-main[data-gem-section-id='product-main']) > .gem-section > .gem-section__inner {",
+    "    width: 100%;",
+    "  }",
+    "  #MainContent:has(.gem-product-media-gallery[data-gem-section-id='product-gallery']):has(.gem-product-main[data-gem-section-id='product-main']) > .gem-breadcrumbs {",
+    "    grid-column: 1 / -1;",
+    "  }",
+    "  #MainContent:has(.gem-product-media-gallery[data-gem-section-id='product-gallery']):has(.gem-product-main[data-gem-section-id='product-main']) > .gem-product-media-gallery {",
+    "    grid-column: 1;",
+    "  }",
+    "  #MainContent:has(.gem-product-media-gallery[data-gem-section-id='product-gallery']):has(.gem-product-main[data-gem-section-id='product-main']) > .gem-product-main {",
+    "    grid-column: 2;",
+    "    position: sticky;",
+    "    top: calc(var(--gem-component-header-height, 72px) + var(--gem-space-md));",
+    "  }",
+    "  #MainContent:has(.gem-product-media-gallery[data-gem-section-id='product-gallery']):has(.gem-product-main[data-gem-section-id='product-main']) > .gem-section:not(.gem-breadcrumbs):not(.gem-product-media-gallery):not(.gem-product-main) {",
+    "    grid-column: 1 / -1;",
+    "    padding-block: var(--gem-layout-section, var(--gem-space-3xl, 64px));",
+    "  }",
+    "}",
+    "@media (max-width: 760px) {",
+    "  .gem-section { padding-block: calc(var(--gem-layout-section, 64px) * 0.72); }",
+    "  .gem-section__inner, .gem-container { width: min(100% - 32px, var(--gem-layout-page, 1180px)); }",
+    "  .gem-section__heading { font-size: clamp(1.75rem, 9vw, 2.75rem); }",
+    "  .gem-section__grid { grid-template-columns: minmax(0, 1fr); }",
+    "  .gem-section:is([data-gem-composition-mode='split-collage'], [data-gem-editorial-band-mode='media-story']) .gem-section__grid { grid-template-columns: minmax(0, 1fr); }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__inner { grid-template-columns: minmax(0, 1fr); }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__summary { position: static; }",
+    "  .gem-section:is([data-gem-composition-mode='slideshow'], [data-gem-composition-mode='video-led']) .gem-section__inner { min-block-size: min(62vh, 560px); }",
+    "}",
+    OPT_IN_EYEBROW,
+    OPT_IN_HEADING,
+    OPT_IN_BODY,
+    "@media (max-width: 760px) {",
+    OPT_IN_HEADING_MOBILE,
+    "}",
+    // The row, LAST — see GEM_ROW_CSS_LINES. Emitted here for every profile and again after the Dawn block.
+    ...GEM_ROW_CSS_LINES
+  ].join("\n");
+}
+function createDawnParityCss() {
+  return [
+    "/* Dawn parity profile: locked default baseline; morph presets must opt out before applying Gem visual identity. */",
+    ":root { --gem-profile-mode: dawn-parity; --gem-layout-page: 1100px; --gem-layout-gutter: 32px; --gem-layout-section: 52px; --gem-radius-md: 0px; --gem-card-radius: 0px; --gem-media-radius: 0px; --gem-grid-column-gap: 8px; --gem-grid-row-gap: 8px; }",
+    ".utility-bar, .announcement-bar, .utility-bar__grid { min-height: 38px; }",
+    ".announcement-bar__message { margin: 0; min-height: 38px; padding-block: 10px; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.04em; }",
+    // The pair of rules here used to blank the real message (font-size: 0) and inject a FIXED
+    // string in its place, so every store — captured or not — advertised "Free shipping available
+    // on all orders!" whether or not it was true. Announcement copy is data now
+    // (headerPreset.announcement_text / bars[]), so render what the store actually says.
+    ".announcement-bar__message span { font-size: 0.75rem; }",
+    // A strip carrying several promos lays them ACROSS the bar the way stores do, rather than
+    // running them together into one sentence.
+    ".gem-announcement-bar__segments { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 4px 24px; }",
+    ".gem-shell-header .localization-wrapper { display: none !important; }",
+    ".gem-shell-header { position: relative; border-bottom: 1px solid rgb(18 18 18 / 8%); background: var(--gem-color-background); }",
+    ".gem-shell-header__inner, .header { width: min(1200px, 100%); max-width: 1200px; min-height: 84px; padding: 20px 50px; gap: 20px; }",
+    ".gem-shell-header__inner.header--middle-center, .header.header--middle-center, .gem-shell-header__inner.header--middle-left, .header.header--middle-left { grid-template-areas: 'heading navigation icons'; grid-template-columns: 97.5px auto 1fr; }",
+    // The rule above sets the DESKTOP logo-left grid for the real Dawn header (.header) but had no
+    // mobile scope, so it leaked onto small screens — pushing the logo to the far left and clustering
+    // the hamburger beside it (not stock Dawn mobile). Restore Dawn's own mobile header on ≤749px:
+    // hamburger in the left column, logo centered (honouring header--mobile-center).
+    "@media screen and (max-width: 749px) { .header.header--middle-left, .header.header--middle-center { grid-template-areas: 'left-icons heading icons'; grid-template-columns: 1fr 2fr 1fr; } .header.header--middle-left header-drawer, .header.header--middle-center header-drawer { grid-area: left-icons; justify-self: start; } .header.header--mobile-center .header__heading, .header.header--mobile-center .header__heading-link { grid-area: heading; justify-self: center; text-align: center; } }",
+    // Collage placeholder cards: Shopify adds the `ratio` class (→ `.ratio::before` intrinsic height)
+    // to card__inner only when featured_image is nil; the local LiquidJS mock collection doesn't hit
+    // that branch, so a placeholder media in a spanned grid cell collapsed to 0 (the 3rd collage tile
+    // got cut). Pin the square aspect for placeholder collage media that LACKS the `ratio` class — a
+    // no-op on real Shopify (there the card__inner has `.ratio`, so `:not(.ratio)` excludes it).
+    ".collage .card__inner:not(.ratio):has(.placeholder-svg) { aspect-ratio: 1 / 1; }",
+    ".gem-shell-header__logo { display: inline-block; width: 105px; height: 37px; min-height: 0; padding: 7.5px; font-size: 1.125rem; line-height: 22px; font-weight: 400; letter-spacing: 0.08em; text-align: center; white-space: nowrap; overflow: hidden; }",
+    ".gem-shell-header__nav a, .gem-shell-header__action { border: 0; border-radius: 0; background: transparent; font-weight: 400; text-decoration: none; }",
+    ".gem-shell-header__nav { gap: 20px; }",
+    ".gem-shell-header__actions { justify-self: end; gap: 0; padding-right: 8px; }",
+    ".gem-shell-header .svg-wrapper { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; pointer-events: none; }",
+    ".gem-shell-header .svg-wrapper > svg { display: block; width: 100%; height: 100%; }",
+    ".gem-shell-header .header__icon-close { display: none; }",
+    ".gem-shell-header details[open] > summary .gem-header__icon-open { display: none; }",
+    ".gem-shell-header details[open] > summary .header__icon-close { display: inline-flex; }",
+    ".gem-shell-header .header__icons { display: flex; align-items: center; justify-content: flex-end; }",
+    ".gem-shell-header__actions .gem-shell-header__action, .gem-shell-header .header__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; font-size: 0; }",
+    ".gem-shell-header__actions .gem-shell-header__action--cart { background: transparent; color: var(--gem-color-text); }",
+    ".gem-shell-header__actions .gem-shell-header__action--search::before, .gem-shell-header__actions .gem-shell-header__action--search::after, .gem-shell-header__actions .gem-shell-header__action--account::before, .gem-shell-header__actions .gem-shell-header__action--cart::before, .gem-shell-header__actions .gem-shell-header__action--cart::after { content: none; display: none; }",
+    ".gem-shell-header .cart-count-bubble, .gem-shell-header__cart-count { position: absolute; left: 2.2rem; bottom: 0.8rem; display: flex; align-items: center; justify-content: center; min-width: 1.7rem; height: 1.7rem; border-radius: 100%; background: rgb(18 18 18); color: rgb(255 255 255); font-size: 0.9rem; line-height: 1; }",
+    ".gem-shell-header__drawer-toggle { border: 0; background: transparent; padding: 0; font-size: 0; }",
+    ".gem-shell-header__drawer-toggle::before { content: none; display: none; }",
+    ".gem-section { padding-block: var(--gem-layout-section); }",
+    "main > .gem-section:first-child { padding-top: 0; }",
+    ".gem-hero-banner--default { min-height: 720px; display: grid; place-items: center; text-align: center; }",
+    ".gem-hero-banner--default { position: relative; overflow: hidden; padding: 0; color: white; place-items: stretch; }",
+    ".gem-hero-banner--default .gem-hero-banner__inner { position: static; width: 100%; min-height: 720px; height: 100%; display: grid; align-items: end; justify-items: center; padding-bottom: 0; }",
+    ".gem-hero-banner--default .gem-hero-banner__media { position: absolute; inset: 0; z-index: 0; }",
+    ".gem-hero-banner--default .gem-hero-banner__media::after { content: ''; position: absolute; inset: 0; background: rgb(0 0 0 / 32%); }",
+    ".gem-hero-banner--default .gem-hero-banner__image, .gem-hero-banner--default .gem-hero-banner__placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }",
+    ".gem-hero-banner--default .gem-hero-banner__copy { position: absolute; z-index: 1; left: 50%; bottom: 50px; transform: translateX(-50%); width: min(702px, 100%); margin: 0; padding: 40px 0; text-align: center; display: block; }",
+    ".gem-hero-banner--default .gem-section__heading { margin: 0; font-size: 52px; line-height: 67.6px; color: currentColor; }",
+    ".gem-hero-banner--default .gem-section__body { max-width: none; margin: 10px 0 0; color: currentColor; font-size: 16px; line-height: 28.8px; }",
+    // Hero text overlays a scrimmed photo, so it MUST stay light — a palette/color-scheme
+    // foreground would otherwise override it to a dark tone and make the headline unreadable
+    // over the image (real-user finding 2026-07-02). Force light + a soft shadow so the copy is
+    // legible on ANY background image, whatever palette the seller picks. `!important` beats the
+    // scheme's `.gem-section__heading` color rule; the text-shadow covers bright/low-scrim images.
+    ".gem-hero-banner--default .gem-hero-banner__copy { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }",
+    ".gem-hero-banner--default .gem-hero-banner__copy :is(.gem-section__heading, .gem-section__body, .gem-section__eyebrow, .gem-hero-banner__proof, .gem-hero-banner__disclaimer, p) { color: #fff !important; }",
+    ".gem-hero-banner--default .gem-hero-banner__actions { margin-top: 24px; }",
+    ".gem-hero-banner--default .gem-button--primary { min-width: 130px; min-height: 47px; background: transparent; border-color: currentColor; color: currentColor; padding: 0 30px; font-size: 15px; line-height: 18px; }",
+    // split-proof / editorial: a real two-column split (copy beside image) — matches the
+    // planner's design and the section-library gem.css the published Dawn theme uses. The
+    // copy sits on the section background (legible), never overlaid on the photo.
+    ".gem-hero-banner--split-proof, .gem-hero-banner--editorial { min-height: auto; display: block; padding-block: 56px; text-align: left; color: var(--gem-color-text); }",
+    ".gem-hero-banner--split-proof .gem-hero-banner__inner, .gem-hero-banner--editorial .gem-hero-banner__inner { width: min(var(--gem-layout-page, 1200px), calc(100% - var(--gem-layout-gutter, 32px))); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.82fr); gap: 48px; align-items: center; min-height: 0; }",
+    ".gem-hero-banner--split-proof .gem-hero-banner__copy, .gem-hero-banner--editorial .gem-hero-banner__copy { position: static; display: grid; gap: 14px; max-width: 40rem; margin: 0; padding: 0; text-align: left; align-content: center; }",
+    ".gem-hero-banner--split-proof .gem-section__eyebrow, .gem-hero-banner--editorial .gem-section__eyebrow { display: block; margin: 0; color: var(--gem-color-muted); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }",
+    ".gem-hero-banner--split-proof .gem-section__heading, .gem-hero-banner--editorial .gem-section__heading { margin: 0; font-size: 46px; line-height: 1.08; color: var(--gem-color-text); }",
+    ".gem-hero-banner--split-proof .gem-section__body, .gem-hero-banner--editorial .gem-section__body { margin: 0; max-width: 36rem; color: var(--gem-color-muted); font-size: 16px; line-height: 1.6; }",
+    ".gem-hero-banner--split-proof .gem-hero-banner__proof, .gem-hero-banner--editorial .gem-hero-banner__proof { margin: 4px 0 0; color: var(--gem-color-muted); font-size: 14px; }",
+    ".gem-hero-banner--split-proof .gem-hero-banner__actions, .gem-hero-banner--editorial .gem-hero-banner__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }",
+    ".gem-hero-banner--split-proof .gem-hero-banner__media, .gem-hero-banner--editorial .gem-hero-banner__media { position: relative; inset: auto; min-height: 26rem; height: 100%; overflow: hidden; border-radius: 6px; background: rgb(244 244 244); }",
+    ".gem-hero-banner--split-proof .gem-hero-banner__image, .gem-hero-banner--split-proof .gem-hero-banner__placeholder, .gem-hero-banner--editorial .gem-hero-banner__image, .gem-hero-banner--editorial .gem-hero-banner__placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }",
+    ".gem-hero-banner .gem-section__content { max-width: 78rem; margin-inline: auto; }",
+    ".gem-hero-banner h1, .gem-hero-banner h2, .gem-section__heading { margin: 0 0 1.5rem; font-size: clamp(calc(2.5rem * var(--gem-typography-heading-scale, 1)), calc(4vw * var(--gem-typography-heading-scale, 1)), calc(5.2rem * var(--gem-typography-heading-scale, 1))); font-weight: 400; line-height: 1.08; letter-spacing: 0; }",
+    ".gem-section__eyebrow { display: none; }",
+    ".gem-hero-banner--compact-collection { min-height: auto; display: block; text-align: left; padding-block: 25px; }",
+    ".gem-hero-banner--compact-collection .gem-section__content, .gem-product-card-grid--quick-view-grid > .gem-section__inner { width: min(var(--gem-layout-page, 1200px), calc(100% - var(--gem-layout-gutter, 32px))); margin-inline: auto; }",
+    ".gem-hero-banner--compact-collection .gem-hero-banner__inner { width: min(var(--gem-layout-page, 1200px), calc(100% - var(--gem-layout-gutter, 32px))); min-height: auto; margin-inline: auto; display: block; }",
+    ".gem-hero-banner--compact-collection .gem-hero-banner__media { display: none; }",
+    ".gem-hero-banner--compact-collection .gem-hero-banner__copy { max-width: none; }",
+    ".gem-hero-banner--compact-collection .gem-section__heading { font-size: 40px; line-height: 52px; margin: 0; }",
+    ".gem-hero-banner--compact-collection .gem-section__body { display: none; }",
+    ".gem-rich-text--dawn-intro { text-align: center; padding-block: 40px 0; }",
+    ".gem-rich-text--dawn-intro .gem-rich-text__content { width: min(780px, 100%); max-width: 780px; margin-inline: auto; }",
+    ".gem-rich-text--dawn-intro .gem-section__heading { margin: 0; font-size: 40px; line-height: 52px; }",
+    ".gem-rich-text--dawn-intro .gem-section__body { width: 100%; max-width: none; margin: 20px 0 0; font-size: 16px; line-height: 28.8px; }",
+    ".gem-rich-text--dawn-intro .gem-section__body p { margin: 0; }",
+    ".gem-rich-text--dawn-intro .gem-rich-text__blocks { display: block; width: 100%; }",
+    ".gem-button { min-width: 12rem; border-radius: 0; font-weight: 400; box-shadow: none; }",
+    ".gem-product-card-wrapper { display: block; min-width: 0; }",
+    ".gem-card, .gem-product-card { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; }",
+    ".gem-product-card__media, .gem-media { border: 0; border-radius: 0; box-shadow: none; background: rgb(244 244 244); }",
+    ".gem-product-card__media { display: block; position: relative; width: 100%; height: 0; min-block-size: 0; padding-bottom: 100%; aspect-ratio: auto; overflow: hidden; }",
+    ".gem-featured-collection--editorial-grid .gem-product-card__media, .gem-product-card-grid--quick-view-grid .gem-product-card__media, .gem-main-search .gem-product-card__media, .gem-cart-recommendations--dawn-empty .gem-product-card__media { min-block-size: 0 !important; }",
+    ".gem-product-card__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }",
+    // Home product grids show generated/lifestyle imagery (not catalog product-on-white shots), so
+    // `contain` letterboxes them inside the square card (looks misaligned / floating off the box).
+    // Fill the card with `cover` in these grid contexts; PDP/cart cards keep `contain`.
+    ".gem-featured-collection .gem-product-card__media > img, .gem-product-card-grid .gem-product-card__media > img { object-fit: cover; }",
+    ".gem-product-card-grid--quick-view-grid .gem-product-card__media { display: block; min-height: 0; }",
+    ".gem-product-card-grid--quick-view-grid .gem-product-card__placeholder { min-height: 0; }",
+    ".gem-product-card__content { padding-top: 8px; gap: 4px; }",
+    ".gem-product-card__title { font-weight: 400; font-size: 16px; line-height: 24px; }",
+    ".gem-product-card__price { display: block; margin-top: 4px; font-weight: 400; line-height: 24px; }",
+    ".gem-product-card__price .gem-price, .gem-product-card__price { font-size: 16px; }",
+    ".gem-product-card-grid--quick-view-grid .gem-product-card__badges { display: none; }",
+    ".gem-featured-collection--editorial-grid .gem-product-card__quick-actions, .gem-product-card-grid--quick-view-grid .gem-product-card__quick-actions, .gem-main-search .gem-product-card__quick-actions { display: none; }",
+    ".gem-cart-recommendations--dawn-empty .gem-product-card__quick-actions { display: none; }",
+    ".gem-featured-collection--editorial-grid > .gem-section__inner > .gem-section__heading, .gem-featured-collection--editorial-grid > .gem-section__inner > .gem-section__body { display: none; }",
+    ".gem-featured-collection--editorial-grid { padding-block: 28px 36px; }",
+    ".gem-featured-collection--editorial-grid .gem-section__grid, .gem-product-card-grid--quick-view-grid .gem-section__grid, .gem-main-search .gem-section__grid { grid-template-columns: repeat(var(--gem-product-card-grid-columns, 4), minmax(0, 1fr)); gap: 8px; }",
+    ".gem-product-card-grid--quick-view-grid { padding-top: 0; }",
+    ".gem-product-card-grid--quick-view-grid .gem-section__heading:empty { display: none; }",
+    // Hide a compare-at only when the price ISN'T actually on sale. The rule used to hide it
+    // unconditionally — fine while every card was demo copy, wrong once real captured cards arrived:
+    // longevitybox's six products each carry a genuine was-price and the grid silently dropped all
+    // six. `gem-price--on-sale` is set by the binder exactly when a compare-at was captured.
+    ".gem-product-card-grid--quick-view-grid .gem-price:not(.gem-price--on-sale) .gem-price__compare { display: none; }",
+    ".gem-product-card-grid--quick-view-grid > .gem-section__inner { position: relative; row-gap: 0 !important; }",
+    ".gem-product-card-grid__meta { position: absolute; inset-block-start: 11px; inset-inline-end: 0; float: none; display: flex; justify-content: flex-end; align-items: center; min-height: 21px; height: 21px; margin: 0; color: rgb(18 18 18 / 75%); font-size: 16px; line-height: 28.8px; }",
+    ".gem-product-card-grid--quick-view-grid .gem-product-card-grid__meta { display: flex; }",
+    ".gem-product-card-grid__controls { display: flex; align-items: center; gap: 20px; min-height: 32px; margin: 0 0 24px; }",
+    ".gem-product-card-grid--quick-view-grid .gem-product-card-grid__controls { min-height: 51px; height: 51px; margin: 0 0 16px !important; padding-top: 10px; }",
+    // Scoped to the Dawn quick-view grid it was measured on, as gemsite's copy is (app/globals.css). Unscoped,
+    // it forced an 8px / 4px gap with !important on EVERY section reusing the class: GemFactory's tier-specs
+    // stacked its cards 2-4px apart on mobile (library audit 2026-10-05), and this repo's own
+    // product-card-grid/featured renamed its grid to __cards just to get out from under it (review #628).
+    ".gem-product-card-grid--quick-view-grid .gem-product-card-grid__grid { gap: 8px !important; }",
+    ".gem-product-card-grid__controls .gem-collection-filter-toolbar__filters { display: flex; align-items: center; gap: 18px; border: 0; background: transparent; padding: 0; }",
+    ".gem-product-card-grid__controls .gem-collection-filter-toolbar__filters summary { min-width: auto; border: 0; background: transparent; padding: 0; pointer-events: none; }",
+    ".gem-product-card-grid__controls .gem-collection-filter-toolbar__filter, .gem-product-card-grid__controls .gem-collection-filter-toolbar__sort { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 400; }",
+    ".gem-product-card-grid__controls .gem-collection-filter-toolbar__select { width: auto; min-width: 0; min-height: 0; border: 0; background: transparent; padding: 0; font-size: 0.75rem; }",
+    ".gem-product-card-grid__controls .gem-collection-filter-toolbar__submit { display: none; }",
+    ".gem-product-card-grid__controls::after { content: ''; display: block; clear: both; }",
+    ".gem-main-search { padding-top: 36px; }",
+    ".gem-main-search > .gem-section__inner { display: block; }",
+    ".gem-main-search .gem-section__heading { font-size: 24px !important; line-height: 31.2px !important; margin: 16px 0 30px !important; text-align: center; }",
+    ".gem-main-search .gem-search-form { width: 741px; max-width: 741px; height: 47px; grid-template-columns: minmax(0, 1fr) 44px; gap: 0; align-items: stretch; margin: 0 auto 50px; }",
+    ".gem-main-search .gem-search-form .gem-form-field { display: block; height: 47px; }",
+    ".gem-main-search .gem-search-form .gem-form-field span { display: none; }",
+    ".gem-main-search .gem-search-form .gem-input { min-height: 47px; height: 47px; border: 1px solid rgb(18 18 18 / 75%); border-right: 0; border-radius: 0; padding: 10px 16px; }",
+    ".gem-main-search .gem-search-form .gem-button { min-width: 44px; width: 44px; min-height: 47px; height: 47px; border: 1px solid rgb(18 18 18 / 75%); border-left: 0; background: transparent; color: var(--gem-color-text); font-size: 0; padding: 0; }",
+    ".gem-main-search .gem-search-form .gem-button::before { content: none; display: none; }",
+    ".gem-main-search .gem-search-form .gem-button .svg-wrapper, .gem-collection-filter-toolbar__filters summary .svg-wrapper { display: inline-flex; width: 18px; height: 18px; margin-right: 8px; }",
+    ".gem-main-search .gem-search-form .gem-button .svg-wrapper svg, .gem-collection-filter-toolbar__filters summary .svg-wrapper svg { width: 100%; height: 100%; }",
+    ".gem-main-search .gem-product-card-grid__controls { height: 51px; min-height: 51px; margin: 0 0 16px; padding-top: 10px; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-media-gallery__frame { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-media-gallery__item { aspect-ratio: 1 / 1; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-media-gallery__item:first-child { grid-column: 1 / -1; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-media-gallery__thumbs { display: none; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__summary { gap: 18px; max-width: 600px; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__summary > .gem-section__heading { font-size: 40px; line-height: 52px; margin-bottom: 0; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__text--uppercase, .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__text--subtitle { display: none; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__availability { display: none; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__price, .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__price .gem-price { min-height: 30px; font-size: 16px; line-height: 24px; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__price .gem-price { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-weight: 400; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__price .gem-price__regular { font-weight: 400; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__sale-badge { min-height: 22px; border-radius: 999px; background: rgb(51 79 180); color: white; padding: 4px 12px; font-size: 12px; line-height: 12px; font-weight: 400; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-section__body { margin-top: 10px; font-size: 16px; line-height: 28.8px; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-buy-buttons__variant-status { display: none; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__variant-fallback { max-width: 440px; gap: 8px; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__variant-fallback legend { font-size: 15px; line-height: 27px; margin-bottom: 0; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__variant-pill { min-height: 36px; min-width: auto; padding: 0 20px; font-size: 13px; line-height: 16px; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__dawn-story { display: block; margin-top: 36px; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__dawn-story-media { aspect-ratio: 1.2 / 1; margin-bottom: 32px; overflow: hidden; background: rgb(244 244 244); }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__dawn-story-media img { width: 100%; height: 100%; object-fit: contain; display: block; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__dawn-story h2 { margin: 0 0 16px; font-size: 24px; line-height: 31.2px; font-weight: 400; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__dawn-story p { margin: 0; color: rgb(18 18 18 / 75%); font-size: 15px; line-height: 27px; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__collapsible summary h2 { display: inline; margin: 0; font: inherit; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__collapsible summary .svg-wrapper { display: inline-flex; width: 18px; height: 18px; margin-right: 12px; color: rgb(18 18 18 / 75%); }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__collapsible summary .gem-product-main__collapsible-caret { margin-left: auto; margin-right: 0; width: 10px; height: 10px; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__share { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; color: rgb(18 18 18 / 75%); text-decoration: none; font-size: 15px; line-height: 27px; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__share .svg-wrapper { display: inline-flex; width: 13px; height: 12px; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-buy-buttons { gap: 15px; max-width: 440px; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-buy-buttons__quantity { width: 142px; gap: 6px; font-size: 15px; line-height: 27px; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-quantity-input { width: 142px; min-height: 47px; height: 47px; grid-template-columns: 44px 54px 44px; border-radius: 0; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-quantity-input__button, .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-quantity-input__field { min-height: 47px; height: 47px; padding-block: 0; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-buy-buttons__submit { background: transparent; color: rgb(18 18 18); border: 1px solid rgb(18 18 18); min-height: 47px; padding-block: 0; font-size: 15px; line-height: 18px; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] [class~='shopify-payment-button'] { position: relative; min-height: 47px; height: 47px; margin-top: -5px; overflow: hidden; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] [class~='shopify-payment-button'] > * { visibility: hidden; }",
+    ".gem-product-main[data-gem-product-main-layout='dawn-main'] [class~='shopify-payment-button']::before { content: 'Buy it now'; position: absolute; inset: 0; display: grid; place-items: center; background: rgb(18 18 18); color: white; font-size: 15px; line-height: 18px; }",
+    ".gem-recommended-products-product-rail .gem-recommended-products__quick-view-surface, .gem-recommended-products-product-rail [data-gem-quick-view-surface] { display: none !important; }",
+    ".gem-recommended-products-product-rail .gem-recommended-products__inner:empty { min-height: 4.8rem; }",
+    ".gem-cart-main--line-items .gem-section__heading { font-size: clamp(2.4rem, 3.4vw, 4rem); }",
+    ".gem-cart-main--line-items .gem-section__body { color: rgb(18 18 18 / 75%); }",
+    ".gem-cart-main__empty { width: 1100px !important; max-width: calc(100vw - 100px) !important; margin-inline: auto; }",
+    ".gem-cart-main__login { margin-top: 4rem; }",
+    ".gem-cart-main__login h2 { margin: 0 0 1.5rem; font-size: 1.8rem; font-weight: 400; }",
+    ".gem-cart-main__login p { margin: 0; }",
+    ".gem-cart-recommendations--dawn-empty { margin-top: -135px; padding-top: 0; }",
+    ".gem-cart-recommendations--dawn-empty .gem-cart-recommendations__header { width: 1100px !important; max-width: calc(100vw - 100px) !important; margin: 0 auto 16px; }",
+    ".gem-cart-recommendations--dawn-empty .gem-section__heading { font-size: 2rem; margin: 0; }",
+    ".gem-cart-recommendations--dawn-empty .gem-cart-recommendations__rail { width: 1100px !important; max-width: calc(100vw - 100px) !important; margin-inline: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }",
+    ".gem-hero-collage--category-mosaic { min-height: 1003px; padding-block: 97px 36px; }",
+    ".gem-hero-collage--category-mosaic > .gem-section__inner { min-height: 870px; padding: 0; align-content: start; }",
+    ".gem-hero-collage--category-mosaic .gem-hero-collage__intro { display: none; }",
+    ".gem-hero-collage--category-mosaic .gem-hero-collage__grid { display: grid; min-height: 870px; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; }",
+    ".gem-hero-collage--category-mosaic .gem-hero-collage__tile { position: relative; display: block; min-height: 0; overflow: hidden; border: 0; background: rgb(244 244 244); }",
+    ".gem-hero-collage--category-mosaic .gem-hero-collage__tile:first-child { grid-row: 1 / -1; }",
+    ".gem-hero-collage--category-mosaic .gem-hero-collage__media, .gem-hero-collage--category-mosaic .gem-hero-collage__image, .gem-hero-collage--category-mosaic .gem-hero-collage__placeholder { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }",
+    ".gem-hero-collage--category-mosaic .gem-hero-collage__placeholder { background: rgb(244 244 244); }",
+    ".gem-hero-collage--category-mosaic .gem-hero-collage__content { position: absolute; left: 24px; bottom: 24px; display: grid; gap: 6px; color: rgb(18 18 18); }",
+    ".gem-hero-collage--category-mosaic .gem-hero-collage__badge, .gem-hero-collage--category-mosaic .gem-hero-collage__caption { display: none; }",
+    ".gem-hero-collage--category-mosaic .gem-hero-collage__label { font-size: 20px; line-height: 26px; font-weight: 400; }",
+    ".gem-hero-video--dawn-video { height: 552px; min-height: 552px; padding: 0; overflow: hidden; }",
+    ".gem-hero-video--dawn-video > .gem-section__inner, .gem-hero-video--dawn-video .gem-hero-video__inner, .gem-hero-video--dawn-video .gem-hero-video__media { width: 100%; max-width: none; height: 552px; min-height: 552px; }",
+    ".gem-hero-video--dawn-video .gem-hero-video__heading { text-align: center; margin: 0 0 24px; }",
+    ".gem-hero-video--dawn-video .gem-hero-video__content-wrap, .gem-hero-video--dawn-video .gem-hero-video__scrim, .gem-hero-video--dawn-video .gem-hero-video__toggle { display: none; }",
+    ".gem-hero-video--dawn-video .gem-hero-video__placeholder, .gem-hero-video--dawn-video .gem-hero-video__poster, .gem-hero-video--dawn-video .gem-hero-video__video { display: block; width: 100%; height: 100%; object-fit: cover; background: rgb(244 244 244); }",
+    ".gem-advanced-list--feature-grid { height: 243px; min-height: 243px; overflow: hidden; padding-block: 36px; }",
+    ".gem-advanced-list--feature-grid > .gem-section__inner > .gem-section__heading, .gem-advanced-list--feature-grid > .gem-section__inner > .gem-section__body { display: none; }",
+    ".gem-advanced-list--feature-grid .gem-section__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }",
+    ".gem-advanced-list--feature-grid .gem-advanced-list__item { min-height: 0; text-align: center; font-size: 14px; line-height: 25.2px; }",
+    ".gem-advanced-list--feature-grid .gem-advanced-list__item h3 { display: none; }",
+    ".gem-advanced-list--feature-grid .gem-advanced-list__item .gem-richtext, .gem-advanced-list--feature-grid .gem-advanced-list__item p { margin: 0; color: rgb(18 18 18 / 75%); }",
+    ".gem-shell-footer { margin-top: 0; border-top: 1px solid rgb(18 18 18 / 8%); padding-block: 36px; background: rgb(255 255 255); color: rgb(18 18 18); }",
+    ".gem-shell-footer__inner { max-width: var(--gem-layout-page, 1200px); }",
+    ".gem-shell-footer__newsletter { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; width: 100%; max-width: 1100px; min-height: 90px; margin: 10px auto 0; padding: 0 0 20px; background: transparent; border: 0; }",
+    ".gem-shell-footer__newsletter-heading { margin: 0 0 18px; font-size: 18px; line-height: 23.4px; font-weight: 400; }",
+    ".gem-shell-footer__newsletter form { display: flex; align-items: stretch; flex-wrap: nowrap; gap: 0; width: min(100%, 480px); max-width: 480px; }",
+    ".gem-shell-footer__newsletter .gem-input { width: 100%; min-height: 45px; border: 1px solid rgb(18 18 18 / 55%); border-radius: 0; background: transparent; padding: 10px 14px; font-size: 16px; line-height: 24px; }",
+    ".gem-shell-footer__newsletter .gem-button { min-width: 45px; min-height: 45px; border-radius: 0; border: 1px solid rgb(18 18 18); background: rgb(18 18 18); color: white; font-size: 0; padding: 0; }",
+    ".gem-shell-footer__newsletter .gem-button::before { content: '\\2192'; font-size: 20px; line-height: 1; }",
+    ".gem-shell-footer__support, .gem-shell-footer__markets, .gem-shell-footer__community, .gem-shell-footer__trust, .gem-shell-footer__offer { display: none; }",
+    ".gem-shell-footer__grid { display: flex; width: 100%; max-width: 1100px; gap: 8px; margin: 40px auto 0; padding-bottom: 0; }",
+    ".gem-shell-footer__grid > div, .gem-shell-footer__column, .gem-shell-footer__block { flex: 1 1 0; border: 0; background: transparent; padding: 0; box-shadow: none; }",
+    ".gem-shell-footer .footer-block__heading { margin: 0 0 20px; font-size: 18px; line-height: 23.4px; font-weight: 400; }",
+    ".gem-shell-footer .footer-block__details-content { display: grid; gap: 10px; margin: 0; padding: 0; color: rgb(18 18 18 / 75%); font-size: 14px; line-height: 25.2px; }",
+    ".gem-shell-footer .footer-block__details-content a { color: rgb(18 18 18 / 75%); text-decoration: none; }",
+    ".gem-shell-footer .footer-block__details-content p { margin: 0; max-width: 320px; }",
+    ".gem-shell-footer__bottom { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 18px; width: 100vw; min-height: 186px; margin: 50px 0 0 calc(50% - 50vw); border-top: 1px solid rgb(18 18 18 / 8%); padding: 30px calc((100vw - 1100px) / 2) 0; }",
+    ".gem-shell-footer__social, .gem-shell-footer__payments { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }",
+    ".gem-shell-footer__social a { min-height: 24px; border: 0; padding: 0; color: rgb(18 18 18 / 75%); font-size: 13px; line-height: 18px; }",
+    ".gem-shell-footer__payments { margin-left: auto; gap: 6px; }",
+    ".gem-shell-footer__payment-icon { width: 38px; height: auto; }",
+    ".gem-shell-footer__payment-fallback { display: inline-grid; place-items: center; min-width: 38px; height: 24px; border: 1px solid rgb(18 18 18 / 12%); border-radius: 3px; background: white; color: rgb(18 18 18 / 72%); font-size: 8px; line-height: 1; }",
+    ".gem-shell-footer__localization { order: -1; flex: 0 0 100%; width: 100%; }",
+    ".gem-shell-footer__localization .gem-select, .gem-shell-footer__localization > .gem-select { display: inline-flex; align-items: center; min-width: 210px; min-height: 45px; border: 1px solid rgb(18 18 18 / 55%); border-radius: 0; background: transparent; padding: 10px 36px 10px 12px; color: rgb(18 18 18); font-size: 13px; line-height: 18px; }",
+    // Opt-ins again, AFTER the Dawn rules above (see OPT_IN_EYEBROW).
+    OPT_IN_EYEBROW,
+    OPT_IN_HEADING,
+    OPT_IN_BODY,
+    createDawnParityMobileCss(),
+    // The row again, after every Dawn rule including its phone block (see GEM_ROW_CSS_LINES).
+    ...GEM_ROW_CSS_LINES
+  ].join("\n");
+}
+function createDawnParityMobileCss() {
+  return [
+    "@media (max-width: 760px) {",
+    "  :root { --gem-layout-gutter: 24px; --gem-layout-section: 36px; }",
+    "  .gem-shell-header, .gem-shell-header__inner, .header { min-height: 64px; }",
+    "  .gem-shell-header { --gem-component-header-height: 64px; }",
+    "  .gem-shell-header__inner, .gem-shell-header__inner.header--middle-left, .gem-shell-header__inner.header--middle-center { display: grid; width: 100%; max-width: none; height: 64px; margin-inline: 0; grid-template-columns: 82px minmax(0, 1fr) 84px; grid-template-areas: 'drawer heading icons'; column-gap: 0; padding: 10px 30px; }",
+    "  .gem-shell-header__drawer { grid-area: drawer; order: 0; justify-self: start; }",
+    "  .gem-shell-header__logo { grid-area: heading; justify-self: center; }",
+    "  .gem-shell-header__actions { grid-area: icons; display: inline-flex; justify-self: start; gap: 0; }",
+    "  .gem-shell-header__actions .gem-shell-header__action.gem-shell-header__action--search, .gem-shell-header__actions .gem-shell-header__action.gem-shell-header__action--cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: rgb(18 18 18); font-size: 0; box-shadow: none; }",
+    "  .gem-shell-header__actions .gem-shell-header__action--account { display: none; }",
+    "  .gem-shell-header__action--search::before, .gem-shell-header__action--search::after, .gem-shell-header__action--cart::before, .gem-shell-header__action--cart::after { content: none; display: none; }",
+    "  .gem-shell-header .cart-count-bubble, .gem-shell-header__cart-count { display: none; }",
+    "  .gem-hero-banner--editorial, .gem-hero-banner--split-proof { min-height: auto; padding-block: 36px; }",
+    "  .gem-hero-banner--split-proof .gem-hero-banner__inner, .gem-hero-banner--editorial .gem-hero-banner__inner { grid-template-columns: 1fr; gap: 24px; }",
+    "  .gem-hero-banner--split-proof .gem-section__heading, .gem-hero-banner--editorial .gem-section__heading { font-size: 34px; }",
+    "  .gem-hero-banner--split-proof .gem-hero-banner__media, .gem-hero-banner--editorial .gem-hero-banner__media { min-height: 18rem; }",
+    "  .gem-hero-banner--default { min-height: 390px; }",
+    "  .gem-hero-banner--default .gem-hero-banner__inner { min-height: 390px; height: auto; align-items: center; justify-items: center; padding-bottom: 0; }",
+    "  .gem-hero-banner--default .gem-hero-banner__copy { position: relative; left: auto; bottom: auto; transform: none; align-self: auto; justify-self: auto; margin: 0 auto; padding-inline: 15px; }",
+    "  .gem-hero-banner--default .gem-section__heading { font-size: 40px; line-height: 52px; margin: 0; }",
+    "  .gem-hero-banner--default .gem-section__body { font-size: 15px; line-height: 27px; }",
+    "  .gem-hero-banner--default .gem-button--primary { min-width: 130px; min-height: 47px; box-sizing: border-box; font-size: 15px; line-height: 18px; }",
+    "  .gem-rich-text--dawn-intro { padding-block: 30px 0; }",
+    "  .gem-rich-text--dawn-intro .gem-rich-text__content { max-width: 320px; }",
+    "  .gem-rich-text--dawn-intro .gem-section__heading { font-size: 30px; line-height: 39px; }",
+    "  .gem-rich-text--dawn-intro .gem-section__body { font-size: 15px; line-height: 27px; }",
+    "  .gem-rich-text--dawn-intro .gem-rich-text__blocks { display: block; }",
+    "  .gem-featured-collection--editorial-grid { padding-block: 21px 27px; }",
+    "  .gem-hero-banner--compact-collection { padding-block: 25px; }",
+    "  .gem-hero-banner--compact-collection .gem-section__heading { font-size: 30px; line-height: 39px; }",
+    "  .gem-product-card-grid--quick-view-grid > .gem-section__inner, .gem-main-search > .gem-section__inner { width: calc(100% - 30px); }",
+    "  .gem-product-card-grid--quick-view-grid .gem-product-card-grid__grid { gap: 4px !important; }",
+    "  .gem-product-card__content { padding-top: 8px; gap: 4px; }",
+    "  .gem-product-card__title { font-size: 15px; line-height: 24px; }",
+    "  .gem-product-card__price, .gem-product-card__price .gem-price { font-size: 16px; line-height: 24px; }",
+    "  .gem-hero-banner h1, .gem-hero-banner h2, .gem-section__heading { font-size: clamp(2rem, 11vw, 3.6rem); }",
+    "  .gem-featured-collection--editorial-grid .gem-section__grid, .gem-product-card-grid--quick-view-grid .gem-section__grid, .gem-main-search .gem-section__grid { grid-template-columns: repeat(var(--gem-product-card-grid-mobile-columns, 2), minmax(0, 1fr)); }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] > .gem-section__inner { width: calc(100% - 30px); }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-media-gallery__frame { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-media-gallery__item { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1 / 1; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__summary { gap: 15px; margin-top: 20px; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__summary > .gem-section__heading { font-size: 30px; line-height: 39px; margin-bottom: 0; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__price, .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__price .gem-price { min-height: 30px; font-size: 16px; line-height: 24px; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__sale-badge { min-height: 22px; padding: 4px 12px; font-size: 12px; line-height: 12px; font-weight: 400; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__variant-fallback { max-width: none; min-height: 112px; gap: 8px; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__variant-fallback legend { font-size: 15px; line-height: 27px; margin-bottom: 0; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__variant-pill { min-height: 36px; min-width: auto; padding: 0 20px; font-size: 13px; line-height: 16px; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-buy-buttons { gap: 15px; max-width: none; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-buy-buttons__quantity { width: 142px; gap: 0; font-size: 15px; line-height: 27px; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-quantity-input { width: 142px; min-height: 47px; height: 47px; grid-template-columns: 44px 54px 44px; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-quantity-input__button, .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-quantity-input__field { min-height: 47px; height: 47px; padding-block: 0; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-buy-buttons__submit { min-height: 47px; margin-top: 9px; padding-block: 0; font-size: 15px; line-height: 18px; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] [class~='shopify-payment-button'] { min-height: 47px; height: 47px; margin-top: -5px; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] [class~='shopify-payment-button']::before { min-height: 47px; font-size: 15px; line-height: 18px; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-section__body { min-height: 312px; margin-top: 10px; font-size: 15px; line-height: 27px; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-section__body + .gem-product-main__collapsible { margin-top: 9px; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__collapsible { min-height: 51px; padding: 0; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__collapsible + .gem-product-main__collapsible { margin-top: -15px; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__collapsible + .gem-product-main__share { margin-top: -4px; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__collapsible summary { min-height: 51px; padding-block: 12px; font-size: 15px; line-height: 27px; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__collapsible .gem-richtext { display: none; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__dawn-story { margin-top: 65px; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__dawn-story-media { width: 100%; height: 296px; margin-bottom: 32px; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__dawn-story h2 { font-size: 20px; line-height: 26px; margin-bottom: 12px; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__dawn-story p { font-size: 15px; line-height: 27px; }",
+    "  .gem-product-main[data-gem-product-main-layout='dawn-main'] .gem-product-main__share { min-height: 44px; width: 100%; font-size: 15px; line-height: 27px; }",
+    "  .gem-main-search { padding-top: 41px; }",
+    "  .gem-main-search .gem-section__heading { font-size: 20px; line-height: 26px; text-align: center; margin-bottom: 43px; }",
+    "  .gem-main-search .gem-search-form { max-width: none; width: 100%; margin-bottom: 22px; }",
+    "  .gem-main-search .gem-search-form .gem-input, .gem-main-search .gem-search-form .gem-button { min-height: 47px; }",
+    "  .gem-product-card-grid--quick-view-grid > .gem-section__inner, .gem-main-search > .gem-section__inner { position: relative; row-gap: 0; }",
+    "  .gem-product-card-grid--quick-view-grid .gem-product-card-grid__meta { position: absolute; inset-block-start: 0; inset-inline-end: 0; display: flex; float: none; justify-content: flex-end; align-items: center; min-height: 40px; height: 40px; margin: 0; font-size: 1.2rem; }",
+    "  .gem-product-card-grid__controls, .gem-main-search .gem-product-card-grid__controls { display: flex; justify-content: space-between; align-items: center; min-height: 40px; height: 40px; margin: 0 0 16px; padding-top: 0; }",
+    "  .gem-product-card-grid__controls .gem-collection-filter-toolbar__form, .gem-main-search .gem-product-card-grid__controls .gem-collection-filter-toolbar__form { display: contents; }",
+    "  .gem-product-card-grid__controls .gem-collection-filter-toolbar__filters, .gem-main-search .gem-product-card-grid__controls .gem-collection-filter-toolbar__filters { display: block; min-height: 40px; height: 40px; border: 0; background: transparent; padding: 0; overflow: hidden; }",
+    "  .gem-product-card-grid__controls .gem-collection-filter-toolbar__filters summary, .gem-main-search .gem-product-card-grid__controls .gem-collection-filter-toolbar__filters summary { display: inline-flex; align-items: center; min-height: 40px; height: 40px; border: 0; background: transparent; padding: 0; font-size: 0; pointer-events: auto; }",
+    "  .gem-collection-filter-toolbar__filters summary::before { content: none; display: none; }",
+    "  .gem-product-card-grid__controls .gem-collection-filter-toolbar__filters summary span:not(.svg-wrapper), .gem-main-search .gem-product-card-grid__controls .gem-collection-filter-toolbar__filters summary span:not(.svg-wrapper) { display: inline; font-size: 1.4rem; letter-spacing: 0; }",
+    "  .gem-product-card-grid__controls .gem-collection-filter-toolbar__filters summary .svg-wrapper, .gem-main-search .gem-product-card-grid__controls .gem-collection-filter-toolbar__filters summary .svg-wrapper { width: 1.6rem; height: 1.6rem; margin-right: 0.8rem; }",
+    "  .gem-product-card-grid__controls .gem-collection-filter-toolbar__filters .gem-collection-filter-toolbar__filter, .gem-product-card-grid__controls .gem-collection-filter-toolbar__filters label, .gem-product-card-grid__controls .gem-collection-filter-toolbar__filters select, .gem-product-card-grid__controls .gem-collection-filter-toolbar__sort, .gem-main-search .gem-product-card-grid__controls .gem-collection-filter-toolbar__sort { display: none; }",
+    "  .gem-main-search .gem-search-results-meta { margin-left: auto; font-size: 1.2rem; }",
+    "  .gem-cart-main--line-items { padding-top: 52px; padding-bottom: 38px; }",
+    "  .gem-cart-main--line-items .gem-section__heading { font-size: 30px; line-height: 39px; text-align: center; margin-bottom: 20px; }",
+    "  .gem-cart-main__empty { width: 360px !important; max-width: calc(100vw - 30px) !important; text-align: center; }",
+    "  .gem-cart-main__empty .gem-button { min-height: 47px; padding-block: 0; font-size: 15px; line-height: 18px; }",
+    "  .gem-cart-main__login { text-align: left; margin-top: 55px; }",
+    "  .gem-cart-main__login h2 { font-size: 20px; line-height: 26px; margin-bottom: 5px; }",
+    "  .gem-cart-main__login p { font-size: 15px; line-height: 27px; margin-top: 8px; }",
+    "  .gem-cart-recommendations--dawn-empty { margin-top: -46px; padding-bottom: 148px; }",
+    "  .gem-cart-recommendations--dawn-empty .gem-cart-recommendations__header { width: 360px !important; max-width: calc(100vw - 30px) !important; margin: 0 auto 15px; }",
+    "  .gem-cart-recommendations--dawn-empty .gem-section__heading { font-size: 18px; line-height: 24px; }",
+    "  .gem-cart-recommendations--dawn-empty .gem-cart-recommendations__rail { width: 360px !important; max-width: calc(100vw - 30px) !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; gap: 4px; padding-bottom: 0; }",
+    "  .gem-cart-recommendations--dawn-empty .gem-product-card-wrapper { width: auto; min-width: 0; }",
+    "  .gem-cart-recommendations--dawn-empty .gem-product-card__content { padding-top: 8px; gap: 5px; }",
+    "  .gem-cart-recommendations--dawn-empty .gem-product-card__title, .gem-cart-recommendations--dawn-empty .gem-product-card__price, .gem-cart-recommendations--dawn-empty .gem-product-card__price .gem-price { font-size: 15px; line-height: 24px; }",
+    "  .gem-shell-footer { margin-top: 0; padding-block: 27px; }",
+    "  .gem-shell-footer__inner { width: 100%; max-width: none; padding: 0; }",
+    "  .gem-shell-footer__grid { display: block; width: calc(100% - 80px); max-width: 310px; margin: 40px auto 0; padding-bottom: 0; }",
+    "  .gem-shell-footer__grid > div, .gem-shell-footer__column, .gem-shell-footer__block { width: 100%; margin: 0 0 40px; }",
+    "  .gem-shell-footer__grid > .gem-shell-footer__block:nth-child(1) { min-height: 176px; }",
+    "  .gem-shell-footer__grid > .gem-shell-footer__block:nth-child(2) { min-height: 222px; }",
+    "  .gem-shell-footer__grid > .gem-shell-footer__block:nth-child(3) { min-height: 95px; margin-bottom: 20px; }",
+    "  .gem-shell-footer .footer-block__heading { margin-bottom: 20px; font-size: 18px; line-height: 23.4px; }",
+    "  .gem-shell-footer .footer-block__details-content { gap: 10px; font-size: 14px; line-height: 25.2px; }",
+    "  .gem-shell-footer__newsletter { display: block; width: calc(100% - 80px); max-width: 310px; min-height: 162px; margin: 0 auto 0; padding-bottom: 0; }",
+    "  .gem-shell-footer__newsletter form { width: 100%; max-width: none; }",
+    "  .gem-shell-footer__bottom { display: flex; width: 100vw; max-width: none; min-height: 200px; margin: 9px 0 0; padding: 27px 40px 0; gap: 18px; }",
+    "  .gem-shell-footer__localization { order: 0; }",
+    "  .gem-shell-footer__payments { margin-left: 0; }",
+    "  .gem-hero-collage--category-mosaic { min-height: 709px; padding-block: 36px; }",
+    "  .gem-hero-collage--category-mosaic > .gem-section__inner { min-height: 637px; }",
+    "  .gem-hero-collage--category-mosaic .gem-hero-collage__grid { min-height: 637px; grid-template-columns: 1fr; grid-template-rows: 2fr 1fr 1fr; }",
+    "  .gem-hero-video--dawn-video { height: 212px; min-height: 212px; }",
+    "  .gem-hero-video--dawn-video > .gem-section__inner, .gem-hero-video--dawn-video .gem-hero-video__inner, .gem-hero-video--dawn-video .gem-hero-video__media { height: 212px; min-height: 212px; }",
+    "  .gem-advanced-list--feature-grid { height: 420px; min-height: 420px; padding-block: 36px; }",
+    "  .gem-advanced-list--feature-grid .gem-section__grid { grid-template-columns: 1fr; }",
+    OPT_IN_HEADING_MOBILE,
+    "}"
+  ].join("\n");
+}
+function createShellCss() {
+  return [
+    ".page-width {",
+    "  max-width: var(--page-width, var(--gem-layout-page, 1200px));",
+    "  margin: 0 auto;",
+    "  padding: 0 1.5rem;",
+    "}",
+    "@media screen and (min-width: 750px) {",
+    "  .page-width { padding: 0 5rem; }",
+    "}",
+    ".list-unstyled {",
+    "  margin: 0;",
+    "  padding: 0;",
+    "  list-style: none;",
+    "}",
+    ".link, .link--text {",
+    "  color: inherit;",
+    "  text-decoration: none;",
+    "}",
+    ".focus-inset:focus-visible {",
+    "  outline: 0.2rem solid rgba(var(--color-foreground, 18 18 18), 0.5);",
+    "  outline-offset: 0.3rem;",
+    "}",
+    ".h2, .h5, .inline-richtext {",
+    "  font-family: var(--gem-font-heading);",
+    "}",
+    ".h2 { font-size: 2rem; line-height: 1.15; }",
+    ".h5 { font-size: 1.2rem; line-height: 1.3; }",
+    ".utility-bar {",
+    "  border-bottom: 0.1rem solid rgba(var(--color-foreground, 18 18 18), 0.08);",
+    "  background: var(--gem-color-surface);",
+    "}",
+    ".utility-bar__grid {",
+    "  display: grid;",
+    "  grid-template-columns: 1fr;",
+    "  align-items: center;",
+    "  min-height: 3.8rem;",
+    "}",
+    ".utility-bar__grid--2-col, .utility-bar__grid--3-col {",
+    "  grid-template-columns: 1fr auto;",
+    "}",
+    ".announcement-bar {",
+    "  color: var(--gem-color-text);",
+    "  text-align: center;",
+    "}",
+    ".announcement-bar__message {",
+    "  margin: 0;",
+    "  padding: 1rem 0;",
+    "  min-height: 3.8rem;",
+    "  display: flex;",
+    "  align-items: center;",
+    "  justify-content: center;",
+    "  letter-spacing: 0;",
+    "}",
+    ".announcement-bar__link {",
+    "  display: block;",
+    "  width: 100%;",
+    "}",
+    ".gem-shell-header .localization-wrapper {",
+    "  display: none !important;",
+    "}",
+    ".header-wrapper {",
+    "  display: block;",
+    "  position: relative;",
+    "  background: var(--gem-color-background);",
+    "  z-index: 3;",
+    "}",
+    ".header-wrapper--border-bottom {",
+    "  border-bottom: 0.1rem solid rgba(var(--color-foreground, 18 18 18), 0.08);",
+    "}",
+    "sticky-header.header-wrapper {",
+    "  position: sticky;",
+    "  top: 0;",
+    "}",
+    ".header {",
+    "  display: grid;",
+    "  grid-template-areas: 'heading navigation icons';",
+    "  grid-template-columns: auto 1fr auto;",
+    "  align-items: center;",
+    "  column-gap: 2rem;",
+    "  padding-top: 20px;",
+    "  padding-bottom: 20px;",
+    "}",
+    ".header--middle-left { grid-template-areas: 'heading navigation icons'; }",
+    ".header--middle-center { grid-template-areas: 'navigation heading icons'; grid-template-columns: 1fr auto 1fr; }",
+    ".header__heading-link, .gem-shell-header__logo {",
+    "  grid-area: heading;",
+    "  justify-self: start;",
+    "  line-height: 1;",
+    "}",
+    ".header__heading-logo-wrapper {",
+    "  display: inline-block;",
+    "  max-width: 100%;",
+    "}",
+    ".header__heading-logo {",
+    "  height: auto;",
+    "  max-width: 100%;",
+    "}",
+    ".header .gem-shell-header__nav {",
+    "  grid-area: navigation;",
+    "  justify-content: flex-start;",
+    "}",
+    ".header .gem-shell-header__actions {",
+    "  grid-area: icons;",
+    "  justify-content: flex-end;",
+    "}",
+    ".header__icon, .gem-shell-header__action {",
+    "  color: inherit;",
+    "  display: inline-flex;",
+    "  align-items: center;",
+    "  justify-content: center;",
+    "  min-width: 4.4rem;",
+    "  min-height: 4.4rem;",
+    "  padding: 0 0.8rem;",
+    "  text-decoration: none;",
+    "}",
+    ".cart-count-bubble, .gem-shell-header__cart-count {",
+    "  display: inline-flex;",
+    "  align-items: center;",
+    "  justify-content: center;",
+    "  min-width: 1.7rem;",
+    "  height: 1.7rem;",
+    "  border-radius: 50%;",
+    "  background: rgb(var(--color-button, 18 18 18));",
+    "  color: rgb(var(--color-button-text, 255 255 255));",
+    "  font-size: 0.9rem;",
+    "}",
+    ".menu-drawer-container, .gem-shell-header__drawer {",
+    "  display: flex;",
+    "}",
+    ".drawer-menu .gem-shell-header__nav { display: none; }",
+    ".footer {",
+    "  border-top: 0.1rem solid rgba(var(--color-foreground, 18 18 18), 0.08);",
+    "  background: var(--gem-color-background);",
+    "}",
+    ".footer__content-top, .gem-shell-footer__inner {",
+    "  padding-bottom: 5rem;",
+    "}",
+    ".footer__blocks-wrapper {",
+    "  display: grid;",
+    "  gap: 3rem;",
+    "}",
+    "@media screen and (min-width: 750px) {",
+    "  .footer__blocks-wrapper.grid--4-col-tablet { grid-template-columns: repeat(4, minmax(0, 1fr)); }",
+    "}",
+    ".footer-block__heading {",
+    "  margin: 0 0 2rem;",
+    "  font-size: 1.6rem;",
+    "}",
+    ".footer-block__details-content {",
+    "  display: grid;",
+    "  gap: 1rem;",
+    "  color: rgba(var(--color-foreground, 18 18 18), 0.75);",
+    "}",
+    ".footer-block__details-content .list-menu__item--link {",
+    "  padding: 0;",
+    "}",
+    ".footer-block--newsletter {",
+    "  display: flex;",
+    "  flex-wrap: wrap;",
+    "  justify-content: space-between;",
+    "  gap: 3rem;",
+    "  margin-top: 3rem;",
+    "}",
+    ".newsletter-form__field-wrapper, .field {",
+    "  position: relative;",
+    "}",
+    ".field__input, .field input, .gem-input {",
+    "  min-height: 4.5rem;",
+    "  border-radius: var(--inputs-radius, 0);",
+    "}",
+    ".footer__content-bottom {",
+    "  border-top: 0.1rem solid rgba(var(--color-foreground, 18 18 18), 0.08);",
+    "  padding-top: 3rem;",
+    "}",
+    ".footer__content-bottom-wrapper {",
+    "  display: flex;",
+    "  width: 100%;",
+    "  justify-content: space-between;",
+    "  gap: 1.5rem;",
+    "}",
+    ".footer__copyright, .copyright__content, .policies {",
+    "  font-size: 1.1rem;",
+    "}",
+    ".policies {",
+    "  display: inline-flex;",
+    "  gap: 1.5rem;",
+    "  margin: 0;",
+    "  padding: 0;",
+    "  list-style: none;",
+    "}",
+    ".gem-shell-header, .gem-shell-footer {",
+    "  color: var(--gem-color-text);",
+    "  background: var(--gem-color-surface);",
+    "  border-color: var(--gem-color-border);",
+    "}",
+    ".gem-shell-header {",
+    "  border-bottom: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  min-height: var(--gem-component-header-height, 72px);",
+    "  z-index: 20;",
+    "}",
+    ".gem-shell-header--sticky {",
+    "  position: sticky;",
+    "  top: 0;",
+    "}",
+    ".gem-shell-header--editorial {",
+    "  background: color-mix(in srgb, var(--gem-color-surface) 88%, transparent);",
+    "  backdrop-filter: blur(14px);",
+    "}",
+    ".gem-shell-header--overlay.gem-shell-header--transparent-start {",
+    "  background: color-mix(in srgb, var(--gem-color-text) 18%, transparent);",
+    "  color: var(--gem-color-surface);",
+    "  border-bottom-color: color-mix(in srgb, var(--gem-color-surface) 24%, transparent);",
+    "  backdrop-filter: blur(10px);",
+    "}",
+    ".gem-shell-header--overlay .gem-shell-header__actions .gem-shell-header__action--cart {",
+    "  color: var(--gem-color-surface);",
+    "}",
+    ".gem-shell-header--scroll-background[data-gem-header-contrast-state='solid'] {",
+    "  background: var(--gem-color-surface);",
+    "  color: var(--gem-color-text);",
+    "}",
+    ".gem-shell-header--search-led, .gem-shell-header--mega-menu {",
+    "  box-shadow: var(--gem-shadow-sm, none);",
+    "}",
+    ".gem-shell-header--split-nav .gem-shell-header__inner {",
+    "  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);",
+    "}",
+    ".gem-shell-header--split-nav .gem-shell-header__logo {",
+    "  grid-column: 2;",
+    "}",
+    ".gem-shell-header--split-nav .gem-shell-header__nav {",
+    "  grid-column: 1;",
+    "  grid-row: 1;",
+    "  justify-content: flex-start;",
+    "}",
+    ".gem-shell-header--split-nav .gem-shell-header__actions {",
+    "  grid-column: 3;",
+    "  grid-row: 1;",
+    "  justify-content: flex-end;",
+    "}",
+    ".gem-shell-header--marketplace {",
+    "  --gem-component-header-height: 80px;",
+    "}",
+    ".gem-shell-header--promo-stack .gem-shell-header__announcement, .gem-shell-header__utility {",
+    "  font-size: 0.8125rem;",
+    "}",
+    ".gem-shell-header__announcement {",
+    "  background: var(--gem-color-accent);",
+    "  color: var(--gem-color-accent-text, var(--gem-color-surface));",
+    "  padding: var(--gem-space-sm) var(--gem-space-md);",
+    "  text-align: center;",
+    "  font-size: 0.875rem;",
+    "  font-weight: 650;",
+    "}",
+    ".gem-shell-header__utility {",
+    "  display: flex;",
+    "  justify-content: space-between;",
+    "  align-items: center;",
+    "  gap: var(--gem-space-md);",
+    "  width: min(var(--gem-layout-page, 1180px), calc(100% - var(--gem-layout-gutter, 32px)));",
+    "  margin-inline: auto;",
+    "  padding-block: var(--gem-space-xs);",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 72%, transparent));",
+    "}",
+    ".gem-shell-header__utility nav {",
+    "  display: flex;",
+    "  gap: var(--gem-space-md);",
+    "}",
+    ".gem-shell-header__inner, .gem-shell-footer__inner {",
+    "  width: min(var(--gem-layout-page, 1180px), calc(100% - var(--gem-layout-gutter, 32px)));",
+    "  margin-inline: auto;",
+    "}",
+    ".gem-shell-header__inner {",
+    "  min-height: var(--gem-component-header-height, 72px);",
+    "  display: grid;",
+    "  grid-template-columns: auto minmax(0, 1fr) auto;",
+    "  align-items: center;",
+    "  gap: var(--gem-space-md);",
+    "}",
+    ".gem-shell-header__logo {",
+    "  color: inherit;",
+    "  font-family: var(--gem-font-heading);",
+    "  font-weight: 750;",
+    "  text-decoration: none;",
+    "}",
+    ".gem-shell-header__drawer {",
+    "  display: none;",
+    "}",
+    ".gem-shell-header__drawer-toggle {",
+    "  list-style: none;",
+    "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  border-radius: var(--gem-radius-md);",
+    "  padding: var(--gem-space-sm) var(--gem-space-md);",
+    "  font-weight: 700;",
+    "  cursor: pointer;",
+    "}",
+    ".gem-shell-header__drawer-toggle::-webkit-details-marker {",
+    "  display: none;",
+    "}",
+    ".gem-shell-header__drawer-panel {",
+    "  position: absolute;",
+    "  inset-inline: 0;",
+    "  top: 100%;",
+    "  border-top: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  border-bottom: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  background: var(--gem-color-surface);",
+    "  padding: var(--gem-space-md);",
+    "  box-shadow: var(--gem-shadow-md, none);",
+    "}",
+    ".gem-shell-header__drawer-nav, .gem-shell-header__drawer-actions {",
+    "  display: grid;",
+    "  gap: var(--gem-space-sm);",
+    "}",
+    ".gem-shell-header__drawer-actions {",
+    "  margin-top: var(--gem-space-md);",
+    "  padding-top: var(--gem-space-md);",
+    "  border-top: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "}",
+    ".gem-shell-header__nav, .gem-shell-header__actions {",
+    "  display: flex;",
+    "  align-items: center;",
+    "  gap: var(--gem-space-md);",
+    "}",
+    ".gem-shell-header__nav--editorial {",
+    "  justify-content: center;",
+    "  font-family: var(--gem-font-heading);",
+    "}",
+    ".gem-shell-header__nav--mega {",
+    "  font-weight: 650;",
+    "}",
+    ".gem-shell-header__nav a, .gem-shell-header__actions a, .gem-shell-footer a {",
+    "  color: inherit;",
+    "  text-decoration: none;",
+    "}",
+    ".gem-shell-header__action--search, .gem-shell-header__action--cart {",
+    "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  border-radius: var(--gem-radius-md);",
+    "  padding: var(--gem-space-sm) var(--gem-space-md);",
+    "}",
+    ".gem-shell-header__actions .gem-shell-header__action--cart {",
+    "  background: var(--gem-color-accent);",
+    "  color: var(--gem-color-accent-text, var(--gem-color-surface));",
+    "  white-space: nowrap;",
+    "}",
+    ".gem-shell-header__actions .gem-shell-header__action--cart * {",
+    "  color: inherit;",
+    "}",
+    ".gem-shell-header__cart-count {",
+    "  display: inline-flex;",
+    "  align-items: center;",
+    "  justify-content: center;",
+    "  min-inline-size: 1.5em;",
+    "  min-block-size: 1.5em;",
+    "  border-radius: var(--gem-radius-pill, 999px);",
+    "  background: color-mix(in srgb, currentColor 14%, transparent);",
+    "  font-size: 0.8125rem;",
+    "}",
+    ".gem-shell-header__mega, .gem-shell-header__departments, .gem-shell-header__promo-stack, .gem-shell-header__quicklinks, .gem-shell-header__trust-signal, .gem-shell-header__editorial-note, .gem-shell-header__search {",
+    "  width: min(var(--gem-layout-page, 1180px), calc(100% - var(--gem-layout-gutter, 32px)));",
+    "  margin-inline: auto;",
+    "  border-top: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "}",
+    ".gem-shell-header__mega, .gem-shell-header__departments, .gem-shell-header__promo-stack, .gem-shell-header__quicklinks {",
+    "  display: grid;",
+    "  grid-template-columns: repeat(3, minmax(0, 1fr));",
+    "  gap: var(--gem-space-md);",
+    "  padding-block: var(--gem-space-md);",
+    "}",
+    ".gem-shell-header__departments {",
+    "  grid-template-columns: repeat(4, minmax(0, 1fr));",
+    "}",
+    ".gem-shell-header__promo-stack {",
+    "  grid-template-columns: 2fr repeat(2, minmax(0, 1fr));",
+    "}",
+    ".gem-shell-header__quicklinks {",
+    "  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));",
+    "}",
+    ".gem-shell-header__trust-signal {",
+    "  padding-block: var(--gem-space-sm);",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 72%, transparent));",
+    "  font-size: 0.875rem;",
+    "}",
+    ".gem-shell-header__mega a, .gem-shell-header__mega span, .gem-shell-header__departments a, .gem-shell-header__departments span, .gem-shell-header__promo-stack a, .gem-shell-header__promo-stack span, .gem-shell-header__quicklinks a {",
+    "  border-radius: var(--gem-radius-md);",
+    "  background: var(--gem-color-background);",
+    "  padding: var(--gem-space-md);",
+    "}",
+    ".gem-shell-header__search {",
+    "  display: flex;",
+    "  gap: var(--gem-space-sm);",
+    "  padding-block: var(--gem-space-sm);",
+    "}",
+    ".gem-shell-header__search input {",
+    "  flex: 1;",
+    "  min-width: 0;",
+    "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  border-radius: var(--gem-radius-md);",
+    "  padding: var(--gem-space-md);",
+    "}",
+    ".gem-shell-header__search button {",
+    "  border: 0;",
+    "  border-radius: var(--gem-radius-md);",
+    "  background: var(--gem-color-accent);",
+    "  color: var(--gem-color-accent-text, var(--gem-color-surface));",
+    "  padding-inline: var(--gem-space-lg);",
+    "  font-weight: 700;",
+    "}",
+    ".gem-shell-header__search--sticky {",
+    "  position: sticky;",
+    "  top: var(--gem-component-header-height, 72px);",
+    "  z-index: 19;",
+    "  background: var(--gem-color-surface);",
+    "}",
+    ".gem-shell-header__editorial-note {",
+    "  padding-block: var(--gem-space-sm);",
+    "  text-align: center;",
+    "  font-family: var(--gem-font-heading);",
+    "  color: var(--gem-color-muted, color-mix(in srgb, var(--gem-color-text) 72%, transparent));",
+    "}",
+    ".gem-shell-footer {",
+    "  border-top: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  padding-block: var(--gem-layout-section, 64px);",
+    "}",
+    ".gem-shell-footer__newsletter {",
+    "  display: grid;",
+    "  gap: var(--gem-space-md);",
+    "  margin-bottom: var(--gem-space-xl);",
+    "}",
+    ".gem-shell-footer__newsletter form {",
+    "  display: flex;",
+    "  gap: var(--gem-space-sm);",
+    "  flex-wrap: wrap;",
+    "}",
+    ".gem-shell-footer__newsletter input, .gem-shell-footer__newsletter button {",
+    "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  border-radius: var(--gem-radius-md);",
+    "  padding: var(--gem-space-md);",
+    "  background: var(--gem-color-surface);",
+    "  color: var(--gem-color-text);",
+    "}",
+    ".gem-shell-footer__newsletter button {",
+    "  background: var(--gem-color-accent);",
+    "  color: var(--gem-color-accent-text, var(--gem-color-surface));",
+    "  font-weight: 700;",
+    "}",
+    ".gem-shell-footer__grid {",
+    "  display: grid;",
+    "  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));",
+    "  gap: var(--gem-space-lg);",
+    "}",
+    ".gem-shell-footer__grid > div, .gem-shell-footer__column {",
+    "  display: grid;",
+    "  gap: var(--gem-space-sm);",
+    "}",
+    ".gem-shell-footer__column {",
+    "  align-content: start;",
+    "}",
+    ".gem-shell-footer__column summary {",
+    "  min-height: 2.75rem;",
+    "  display: flex;",
+    "  align-items: center;",
+    "  cursor: pointer;",
+    "  font-weight: 700;",
+    "}",
+    ".gem-shell-footer__column [data-gem-footer-accordion-panel] {",
+    "  display: grid;",
+    "  gap: var(--gem-space-sm);",
+    "}",
+    ".gem-shell-footer__story, .gem-shell-footer__compliance, .gem-shell-footer__offer, .gem-shell-footer__support, .gem-shell-footer__community, .gem-shell-footer__markets {",
+    "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  border-radius: var(--gem-radius-md);",
+    "  background: var(--gem-color-background);",
+    "  padding: var(--gem-space-lg);",
+    "  margin-bottom: var(--gem-space-xl);",
+    "}",
+    ".gem-shell-footer__story h2 {",
+    "  margin: 0;",
+    "  font-family: var(--gem-font-heading);",
+    "}",
+    ".gem-shell-footer__compliance strong {",
+    "  display: block;",
+    "  margin-bottom: var(--gem-space-sm);",
+    "}",
+    ".gem-shell-footer__offer {",
+    "  background: var(--gem-color-accent);",
+    "  color: var(--gem-color-accent-text, var(--gem-color-surface));",
+    "  font-weight: 700;",
+    "}",
+    ".gem-shell-footer--sitemap .gem-shell-footer__grid {",
+    "  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));",
+    "}",
+    ".gem-shell-footer--community .gem-shell-footer__community h2 {",
+    "  margin: 0;",
+    "  font-family: var(--gem-font-heading);",
+    "}",
+    ".gem-shell-footer__trust {",
+    "  display: flex;",
+    "  flex-wrap: wrap;",
+    "  gap: var(--gem-space-sm);",
+    "  margin-top: var(--gem-space-xl);",
+    "}",
+    ".gem-shell-footer__trust span {",
+    "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  border-radius: var(--gem-radius-md);",
+    "  padding: var(--gem-space-sm) var(--gem-space-md);",
+    "}",
+    ".gem-shell-footer__bottom {",
+    "  display: flex;",
+    "  flex-wrap: wrap;",
+    "  align-items: center;",
+    "  justify-content: space-between;",
+    "  gap: var(--gem-space-md);",
+    "  margin-top: var(--gem-space-xl);",
+    "  padding-top: var(--gem-space-lg);",
+    "  border-top: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "}",
+    ".gem-shell-footer__social, .gem-shell-footer__payments {",
+    "  display: flex;",
+    "  flex-wrap: wrap;",
+    "  align-items: center;",
+    "  gap: var(--gem-space-xs);",
+    "  margin: 0;",
+    "  padding: 0;",
+    "  list-style: none;",
+    "}",
+    ".gem-shell-footer__payment-icon {",
+    "  width: 2.375rem;",
+    "  height: auto;",
+    "}",
+    ".gem-shell-footer__social a {",
+    "  display: inline-flex;",
+    "  min-height: 2.25rem;",
+    "  align-items: center;",
+    "  border: var(--gem-border-subtle, 1px solid var(--gem-color-border));",
+    "  border-radius: var(--gem-radius-md);",
+    "  padding: var(--gem-space-xs) var(--gem-space-sm);",
+    "}",
+    ".gem-shell-footer__localization {",
+    "  min-width: min(18rem, 100%);",
+    "}",
+    ".gem-shell-footer__localization .gem-select {",
+    "  width: 100%;",
+    "}",
+    "@media (max-width: 760px) {",
+    "  .gem-shell-header { position: sticky; top: 0; }",
+    "  .gem-shell-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; }",
+    "  .gem-shell-header--split-nav .gem-shell-header__inner { grid-template-columns: auto 1fr auto; }",
+    "  .gem-shell-header--split-nav .gem-shell-header__logo, .gem-shell-header--split-nav .gem-shell-header__nav, .gem-shell-header--split-nav .gem-shell-header__actions { grid-column: auto; grid-row: auto; }",
+    "  .gem-shell-header__drawer { display: block; }",
+    "  .gem-shell-header__drawer { order: -1; }",
+    "  .gem-shell-header__nav { display: none; }",
+    "  .gem-shell-header__actions { gap: var(--gem-space-xs); }",
+    "  .gem-shell-header__actions .gem-shell-header__action:not(.gem-shell-header__action--cart) { display: none; }",
+    "  .gem-shell-header__utility, .gem-shell-header__departments, .gem-shell-header__promo-stack, .gem-shell-header__quicklinks, .gem-shell-header__mega { grid-template-columns: 1fr; }",
+    "}"
+  ].join("\n");
+}
 
 // ../../packages/gem-framework/src/offer-engine.ts
 function offerEngineRuntimeScript() {
@@ -1067,8 +4182,38 @@ function isAllowedUntokenizedValue(property, value) {
 function hasRawVisualValue(value) {
   return /#[0-9a-f]{3,8}\b|rgb\(|hsl\(|\b\d+(?:\.\d+)?(?:px|rem|em)\b/i.test(value);
 }
+var frameworkPublicVariables;
+function gemFrameworkPublicCssVariables() {
+  if (!frameworkPublicVariables) {
+    const css = [
+      createGemThemeCss(defaultGemTokens, ":root", { profile: "dawn-parity" }),
+      createGemThemeCss(defaultGemTokens, ":root", { profile: "morph" }),
+      createThemeProfileCss("dawn-parity"),
+      createMorphProfileCss(),
+      createPrimitiveCss(),
+      String(createSectionCss()),
+      String(createShellCss()),
+      String(createGemSectionRuntimeContractCss())
+    ].join("\n").replace(/\/\*[\s\S]*?\*\//g, " ");
+    frameworkPublicVariables = gemPublicCssVariablesFrom(css);
+  }
+  return frameworkPublicVariables;
+}
+var ROOT_SELECTOR = /^\s*(?::root|html|:host)(?:\[[^\]]*\]|:[a-z-]+(?:\([^()]*\))?)*\s*$/;
+function gemPublicCssVariablesFrom(stylesheet) {
+  const css = stylesheet.replace(/\/\*[\s\S]*?\*\//g, " ");
+  const declaredOnRoot = /* @__PURE__ */ new Set();
+  const declaredElsewhere = /* @__PURE__ */ new Set();
+  for (const [, selector, body] of css.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+    const onRoot = selector.split(",").every((part) => ROOT_SELECTOR.test(part));
+    for (const [, name] of body.matchAll(/(--gem-[a-z0-9-]+)\s*:/g)) (onRoot ? declaredOnRoot : declaredElsewhere).add(name);
+  }
+  const mentioned = new Set([...css.matchAll(/--gem-[a-z0-9-]+/g)].map((match) => match[0]));
+  return new Set([...mentioned].filter((name) => declaredOnRoot.has(name) || !declaredElsewhere.has(name)));
+}
 function isKnownGemCssVariable(variableName, options) {
   if (canonicalCssVariableNames.has(variableName)) return true;
+  if (gemFrameworkPublicCssVariables().has(variableName)) return true;
   const allowedPrefixes = [
     "--gem-seasonal-",
     // Global style-variant knobs (--gem-style-space/radius/text/weight/stroke): the