@gemboss/gem-framework 0.16.1 → 0.18.13

package/dist/primitives.css

@@ -321,6 +321,30 @@ a {
   block-size: var(--gem-checkbox-size);
   accent-color: var(--gem-checkbox-accent);
 }
+[data-gem-form-set] :is(.gem-quantity-input) {
+  min-height: var(--gem-input-height);
+  border: var(--gem-input-border-width) solid var(--gem-input-border-color);
+  border-radius: min(var(--gem-input-radius), 22px);
+}
+[data-gem-form-set] :is(.gem-quantity-input__button, .gem-quantity-input__field) {
+  background: var(--gem-input-bg);
+  font-size: var(--gem-input-font-size);
+}
+[data-gem-form-set][data-gem-field-shape="underline"] :is(.gem-quantity-input__button, .gem-quantity-input__field) {
+  background: transparent;
+}
+@media (hover: hover) {
+  :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)):hover:not(:disabled):not([aria-invalid="true"]):not(:focus-visible) {
+    border-color: currentColor;
+    box-shadow: 0 0 0 1px currentColor;
+  }
+  [data-gem-form-set]:is([data-gem-field-shape="underline"], [data-gem-field-shape="filled"]) :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)):hover:not(:disabled):not([aria-invalid="true"]):not(:focus-visible) {
+    box-shadow: 0 1px 0 0 currentColor;
+  }
+}
+:is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input))[aria-invalid="true"] {
+  border-color: color-mix(in srgb, var(--gem-color-danger, #b42318) 70%, currentColor);
+}
 .gem-submit {
   cursor: pointer;
 }
@@ -495,12 +519,14 @@ a {
   --gem-stars-value: 5;
   position: relative;
   display: inline-block;
+  width: max-content;
   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 :is(svg, img) { max-width: none; flex: none; }
 .gem-stars__fill {
   position: absolute;
   inset: 0;
@@ -831,6 +857,10 @@ a {
   color: var(--gem-color-text);
   text-align: center;
 }
+.gem-quantity-input__field {
+  display: grid;
+  place-items: center;
+}
 .gem-quantity-input__button {
   font-weight: 750;
 }
@@ -1051,7 +1081,7 @@ a {
   [data-gem-ambient] { --gem-ambient-amp: 2px; animation-duration: 12s; }
   [data-gem-reveal] { transition: none; opacity: 1; transform: none; }
 }
-:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top], :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom] { position: relative; overflow: clip; overflow-clip-margin: var(--gem-divider-height, 48px); }
+:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top]:where([data-gem-divider-top='wave'], [data-gem-divider-top='slope'], [data-gem-divider-top='spikes'], [data-gem-divider-top='arch'], [data-gem-divider-top='blob']), :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom]:where([data-gem-divider-bottom='wave'], [data-gem-divider-bottom='slope'], [data-gem-divider-bottom='spikes'], [data-gem-divider-bottom='arch'], [data-gem-divider-bottom='blob']) { position: relative; overflow: clip; overflow-clip-margin: var(--gem-divider-height, 48px); }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='wave']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='slope']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='spikes']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='arch']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='blob']::after, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='wave']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='slope']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='spikes']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='arch']::before, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='blob']::before { content: ''; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; height: var(--gem-divider-height, 48px); background: var(--gem-section-bg, var(--gem-color-background)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom]::after { top: 100%; }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top]::before { bottom: 100%; transform: scaleY(-1); }
@@ -1065,7 +1095,7 @@ a {
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='arch']::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V2 Q50 12 0 2 Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V2 Q50 12 0 2 Z'/%3E%3C/svg%3E"); }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='blob']::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V4 C85 11 72 0 58 5 C44 10 30 2 16 6 C10 8 5 5 0 6 Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V4 C85 11 72 0 58 5 C44 10 30 2 16 6 C10 8 5 5 0 6 Z'/%3E%3C/svg%3E"); }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top='blob']::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V4 C85 11 72 0 58 5 C44 10 30 2 16 6 C10 8 5 5 0 6 Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0 H100 V4 C85 11 72 0 58 5 C44 10 30 2 16 6 C10 8 5 5 0 6 Z'/%3E%3C/svg%3E"); }
-:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card] :is(.gem-section__inner, [class*='__inner']) { border-radius: var(--gem-radius-md); padding: var(--gem-space-xl); }
+:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card]:where([data-gem-card='outline'], [data-gem-card='shadow'], [data-gem-card='filled']) :is(.gem-section__inner, [class*='__inner']) { border-radius: var(--gem-radius-md); padding: var(--gem-space-xl); }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card='outline'] :is(.gem-section__inner, [class*='__inner']) { border: 1px solid var(--gem-color-border); }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card='shadow'] :is(.gem-section__inner, [class*='__inner']) { background: var(--gem-color-surface); box-shadow: var(--gem-shadow-md); }
 :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card='filled'] :is(.gem-section__inner, [class*='__inner']) { background: color-mix(in srgb, currentColor 6%, transparent); }
@@ -1435,5 +1465,12 @@ a {
   .gem-collection-filter-toolbar__active-filter, .gem-collection-filter-toolbar__clear { min-height: 2.25rem; align-items: center; }
 }
 
-:where([data-gem-edition='2']) { --gem-section-heading-size: calc(var(--gem-h2) * var(--gem-typography-heading-scale, 1)); --gem-hero-heading-size: calc(var(--gem-h1) * var(--gem-typography-heading-scale, 1)); }
+:where([data-gem-edition='3']) .gem-product-card-grid--quick-view-grid .gem-product-card-grid__card { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; }
+:where([data-gem-edition='3']) .gem-product-card-grid--quick-view-grid .gem-product-card__media > .gem-product-card__badges { display: flex; }
+@media (max-width: 989px) { :where([data-gem-edition='3']) .gem-product-card-grid--quick-view-grid .gem-product-card-grid__grid[data-gem-product-grid] { grid-template-columns: repeat(var(--gem-product-card-grid-mobile-columns, 2), minmax(0, 1fr)); } }
+:where([data-gem-edition='3']) .gem-hero.gem-hero-banner--compact-collection .gem-hero__overlay:not(.has-media) { position: relative; inset: auto; z-index: auto; opacity: 1; width: min(var(--gem-layout-page, 1200px), calc(100% - var(--gem-layout-gutter, 32px))); margin: clamp(24px, 5vw, 48px) auto 0; background: none; color: var(--gem-color-text); border-radius: 0; }
+:where([data-gem-edition='3']) .gem-hero.gem-hero-banner--compact-collection .gem-hero__overlay:not(.has-media) .gem-hero__heading { color: var(--gem-color-text); }
+:where([data-gem-edition='3']) .gem-section.gem-hero.gem-hero-banner--compact-collection:not(:has(> .gem-hero__bg)) { padding-block-end: 0; }
+
+:where([data-gem-edition='2'], [data-gem-edition='3']) { --gem-section-heading-size: calc(var(--gem-h2) * var(--gem-typography-heading-scale, 1)); --gem-hero-heading-size: calc(var(--gem-h1) * var(--gem-typography-heading-scale, 1)); }
 

package/dist/section-gate.js

@@ -1,3 +1,38 @@
+// ../../packages/gem-framework/src/section-dividers.ts
+var spikes = (() => {
+  const teeth = [];
+  for (let x = 95; x > 0; x -= 5) teeth.push(`L${x} ${teeth.length % 2 === 0 ? 10 : 3}`);
+  return `M0 0 H100 V3 ${teeth.join(" ")} L0 ${teeth.length % 2 === 0 ? 10 : 3} Z`;
+})();
+var GEM_SECTION_DIVIDER_PATHS = Object.freeze({
+  wave: "M0 0 H100 V3 C80 9 70 -1 50 4 C30 9 20 1 0 4 Z",
+  slope: "M0 0 H100 V10 Z",
+  spikes,
+  arch: "M0 0 H100 V2 Q50 12 0 2 Z",
+  blob: "M0 0 H100 V4 C85 11 72 0 58 5 C44 10 30 2 16 6 C10 8 5 5 0 6 Z"
+});
+var NUMBER = "[+-]?(?:\\d+(?:\\.\\d*)?|\\.\\d+)(?:e[+-]?\\d+)?";
+var CHANNEL = new RegExp(`^${NUMBER}%?$`, "i");
+var PERCENT = new RegExp(`^${NUMBER}%$`, "i");
+var ANGLE = new RegExp(`^${NUMBER}(?:deg|grad|rad|turn)?$`, "i");
+var GEM_ELEMENT_SECTION_DIVIDER_CSS = [
+  ".gem-el-section[data-gem-element-dividers] { position: relative; }",
+  // A configured edge must escape the band's parallax clip. The media keeps its own clipped
+  // wrapper so releasing the root cannot expose the deliberately oversized moving background.
+  ".gem-el-section[data-gem-parallax][data-gem-element-dividers] { overflow: visible; isolation: auto; }",
+  ".gem-el-section[data-gem-element-dividers] > .gem-el-section__parallax-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 0; }",
+  // Edge paint may extend into a neighbour with little padding. Only content, never its background,
+  // stacks above it. Guard on the current document's opted-in markup: a retained CSS resource after
+  // navigation must not change a page with no native dividers.
+  // An ordinary neighbouring parallax band also isolates its content by default. Release that
+  // stacking context on divider documents, retaining its existing media clip and direct markup.
+  "body:has(.gem-el-section[data-gem-element-dividers]) .gem-el-section[data-gem-parallax] { isolation: auto; }",
+  "body:has(.gem-el-section[data-gem-element-dividers]) .gem-el-section > .gem-el-section__inner { position: relative; z-index: 2; }",
+  ".gem-el-section > .gem-el-section__divider { position: absolute; display: block; inset-inline: 0; width: 100%; max-width: none; height: var(--gem-element-divider-height, 48px); color: var(--gem-element-divider-color, var(--gem-color-background)); overflow: hidden; pointer-events: none; z-index: 1; transform: scaleX(var(--gem-element-divider-scale-x, 1)); }",
+  ".gem-el-section > .gem-el-section__divider--bottom { top: 100%; }",
+  ".gem-el-section > .gem-el-section__divider--top { bottom: 100%; transform: scaleX(var(--gem-element-divider-scale-x, 1)) scaleY(-1); }"
+].join("\n");
+
 // ../../packages/gem-framework/src/form-set.ts
 var GEM_FORM_TOKEN_KEYS = [
   "radius",
@@ -51,7 +86,7 @@ var GEM_FORM_DEFAULTS = {
   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)";
+var GEM_FORM_VAR_SCOPE = "[data-gem-form-set], [data-gem-form-set] :is(input, select, textarea, button, form, output)";
 function gemFormCssBlock(form) {
   const vars = gemFormCssVars(form);
   return vars.length ? `${GEM_FORM_VAR_SCOPE} {
@@ -573,12 +608,12 @@ function gemMobileTokenCssVars(tokens, phone = readPhoneTokens(tokens)) {
 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 NUMBER2 = /^\d*\.?\d+$/;
 var typeRampValue = (typography, key) => {
   const hit = Object.entries(typography ?? {}).find(([k]) => rampKey(k) === rampKey(key));
   const v = hit == null || hit[1] == null ? "" : stripImportant(hit[1]).trim();
   if (!v) return null;
-  return (key === "scale" ? NUMBER.test(v) && Number(v) > 0 : LENGTH.test(v)) ? v : null;
+  return (key === "scale" ? NUMBER2.test(v) && Number(v) > 0 : LENGTH.test(v)) ? v : null;
 };
 var GEM_TYPE_MOBILE_MAX = "749px";
 function gemTypeRampCssVars(typography) {
@@ -653,6 +688,14 @@ function slugify(value) {
 var EDITION_2_CSS = [
   `:where(&) { ${GEM_HEADING_SIZE_CSS_VARS.filter((decl) => !decl.startsWith("--gem-section-heading-size-mobile") && !decl.startsWith("--gem-hero-heading-size-mobile")).join(" ")} }`
 ];
+var EDITION_3_ELEMENTS = [
+  `:where(&) .gem-product-card-grid--quick-view-grid .gem-product-card-grid__card { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; }`,
+  `:where(&) .gem-product-card-grid--quick-view-grid .gem-product-card__media > .gem-product-card__badges { display: flex; }`,
+  `@media (max-width: 989px) { :where(&) .gem-product-card-grid--quick-view-grid .gem-product-card-grid__grid[data-gem-product-grid] { grid-template-columns: repeat(var(--gem-product-card-grid-mobile-columns, 2), minmax(0, 1fr)); } }`,
+  `:where(&) .gem-hero.gem-hero-banner--compact-collection .gem-hero__overlay:not(.has-media) { position: relative; inset: auto; z-index: auto; opacity: 1; width: min(var(--gem-layout-page, 1200px), calc(100% - var(--gem-layout-gutter, 32px))); margin: clamp(24px, 5vw, 48px) auto 0; background: none; color: var(--gem-color-text); border-radius: 0; }`,
+  `:where(&) .gem-hero.gem-hero-banner--compact-collection .gem-hero__overlay:not(.has-media) .gem-hero__heading { color: var(--gem-color-text); }`,
+  `:where(&) .gem-section.gem-hero.gem-hero-banner--compact-collection:not(:has(> .gem-hero__bg)) { padding-block-end: 0; }`
+];
 var GEM_FRAMEWORK_EDITIONS = [
   { edition: 1, since: "0.1.0", released: "2026-07-04", changes: [], css: [] },
   {
@@ -661,12 +704,27 @@ var GEM_FRAMEWORK_EDITIONS = [
     released: "2026-10-10",
     changes: ["Section headings and hero titles follow your type scale on tablets and computers. Phones keep their current size."],
     css: EDITION_2_CSS
+  },
+  {
+    // Edition 3. Collection pages at Dawn's tiers (12/10/2026, measured on a "Start from scratch" theme): EDITION_3_ELEMENTS.
+    edition: 3,
+    since: "0.17.0",
+    released: "2026-10-12",
+    changes: [
+      "Collection grids: each product photo fills its column, phones and tablets show your mobile column count, and Sale and Sold out badges appear.",
+      "The collection title sits on the page, lined up with the products, in your text colour."
+    ],
+    css: [],
+    elements: EDITION_3_ELEMENTS
   }
 ];
 var LATEST_GEM_FRAMEWORK_EDITION = GEM_FRAMEWORK_EDITIONS[GEM_FRAMEWORK_EDITIONS.length - 1].edition;
 function gemFrameworkEditionScope(edition) {
   return GEM_FRAMEWORK_EDITIONS.filter((e) => e.edition >= edition).map((e) => `[data-gem-edition='${e.edition}']`).join(", ");
 }
+function gemFrameworkEditionElementCss() {
+  return GEM_FRAMEWORK_EDITIONS.flatMap((e) => (e.elements ?? []).map((rule) => rule.replaceAll("&", gemFrameworkEditionScope(e.edition)))).join("\n");
+}
 function gemFrameworkEditionCss() {
   return GEM_FRAMEWORK_EDITIONS.flatMap((e) => e.css.map((rule) => rule.replaceAll("&", gemFrameworkEditionScope(e.edition)))).join("\n");
 }
@@ -1086,18 +1144,8 @@ var GEM_POPUP_SHELL_CSS = GEM_POPUP_SHELL_CSS_LINES.join("\n");
 
 // ../../packages/gem-framework/src/primitives.ts
 var dividerMask = (path) => `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='${path}'/%3E%3C/svg%3E")`;
-var spikePath = (() => {
-  const teeth = [];
-  for (let x = 95; x > 0; x -= 5) teeth.push(`L${x} ${teeth.length % 2 === 0 ? 10 : 3}`);
-  return `M0 0 H100 V3 ${teeth.join(" ")} L0 ${teeth.length % 2 === 0 ? 10 : 3} Z`;
-})();
-var DIVIDER_SHAPES = {
-  wave: "M0 0 H100 V3 C80 9 70 -1 50 4 C30 9 20 1 0 4 Z",
-  slope: "M0 0 H100 V10 Z",
-  spikes: spikePath,
-  arch: "M0 0 H100 V2 Q50 12 0 2 Z",
-  blob: "M0 0 H100 V4 C85 11 72 0 58 5 C44 10 30 2 16 6 C10 8 5 5 0 6 Z"
-};
+var knownValues = (attr, values) => `:where(${values.map((v) => `[${attr}='${v}']`).join(", ")})`;
+var DIVIDER_SHAPES = Object.keys(GEM_SECTION_DIVIDER_PATHS);
 var GEM_DIVIDER_CSS_LINES = [
   // The clip is WIDENED, not removed. `.gem-section` sets `overflow: clip` and the wedge is drawn
   // at `top: 100%` / `bottom: 100%` — entirely outside the box — so the parent deleted every
@@ -1108,7 +1156,8 @@ var GEM_DIVIDER_CSS_LINES = [
   // it entirely would paint square corners over that radius. A browser without
   // `overflow-clip-margin` keeps plain `clip` — the divider stays hidden, which is today's
   // behaviour rather than a broken layout.
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top], :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom] { position: relative; overflow: clip; overflow-clip-margin: var(--gem-divider-height, 48px); }",
+  // Only for a shape that has a mask (knownValues): a "none" edge used to widen the clip by 48px for nothing.
+  `:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top]${knownValues("data-gem-divider-top", DIVIDER_SHAPES)}, :is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom]${knownValues("data-gem-divider-bottom", DIVIDER_SHAPES)} { position: relative; overflow: clip; overflow-clip-margin: var(--gem-divider-height, 48px); }`,
   // Shared geometry. `top: 100%` / `bottom: 100%` put it outside the box; z-index 1 keeps it above the
   // neighbouring band's background. pointer-events: none so it never eats a click near the seam.
   // Qualified by SHAPE. Unqualified, any value paints a solid 48px slab — including the literal
@@ -1118,7 +1167,7 @@ var GEM_DIVIDER_CSS_LINES = [
   ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom]::after { top: 100%; }",
   // The top edge reuses the same masks, mirrored, so five shapes cover both edges.
   ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-top]::before { bottom: 100%; transform: scaleY(-1); }",
-  ...Object.entries(DIVIDER_SHAPES).flatMap(([name, path]) => {
+  ...Object.entries(GEM_SECTION_DIVIDER_PATHS).flatMap(([name, path]) => {
     const mask = dividerMask(path);
     return [
       `:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-divider-bottom='${name}']::after { -webkit-mask-image: ${mask}; mask-image: ${mask}; }`,
@@ -1127,8 +1176,10 @@ var GEM_DIVIDER_CSS_LINES = [
   })
 ];
 var GEM_DIVIDER_CSS = GEM_DIVIDER_CSS_LINES.join("\n");
+var GEM_CARD_STYLES = ["outline", "shadow", "filled"];
 var GEM_CARD_CSS_LINES = [
-  ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card] :is(.gem-section__inner, [class*='__inner']) { border-radius: var(--gem-radius-md); padding: var(--gem-space-xl); }",
+  // Only for a style that draws (knownValues): "none", the knob's revert value, arrives here as an attribute too.
+  `:is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card]${knownValues("data-gem-card", GEM_CARD_STYLES)} :is(.gem-section__inner, [class*='__inner']) { border-radius: var(--gem-radius-md); padding: var(--gem-space-xl); }`,
   ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card='outline'] :is(.gem-section__inner, [class*='__inner']) { border: 1px solid var(--gem-color-border); }",
   ":is(.gem-section, .gem-hero, .gem-hero-split, .gem-hero-collage, .gem-hero-triptych, .gem-slideshow)[data-gem-card='shadow'] :is(.gem-section__inner, [class*='__inner']) { background: var(--gem-color-surface); box-shadow: var(--gem-shadow-md); }",
   // `filled` tints the section's own ground rather than reaching for a fixed colour, so it stays
@@ -1211,6 +1262,23 @@ var GEM_FORM_SET_CSS_LINES = [
   "  inline-size: var(--gem-checkbox-size);",
   "  block-size: var(--gem-checkbox-size);",
   "  accent-color: var(--gem-checkbox-accent);",
+  "}",
+  // THE QUANTITY STEPPER IS A FIELD OF THE SET (20/10/2026): its box takes the set's height, edge and corner (capped at
+  // 22px, so a pill set draws a round stepper, not a 999px lozenge), its -/+ and number the set's fill and text size, and
+  // the underline shape paints no cell, as it paints no field. The storefront carried these (gemsite #1001/#1007, with its
+  // own element stepper in the :is() lists); the package did not, so every section the kho previewed drew a square 44px
+  // stepper beside 48px pill fields (GemFactory Framework › Controls, measured 20/10/2026).
+  "[data-gem-form-set] :is(.gem-quantity-input) {",
+  "  min-height: var(--gem-input-height);",
+  "  border: var(--gem-input-border-width) solid var(--gem-input-border-color);",
+  "  border-radius: min(var(--gem-input-radius), 22px);",
+  "}",
+  "[data-gem-form-set] :is(.gem-quantity-input__button, .gem-quantity-input__field) {",
+  "  background: var(--gem-input-bg);",
+  "  font-size: var(--gem-input-font-size);",
+  "}",
+  '[data-gem-form-set][data-gem-field-shape="underline"] :is(.gem-quantity-input__button, .gem-quantity-input__field) {',
+  "  background: transparent;",
   "}"
 ];
 var GEM_FORM_SET_CSS = GEM_FORM_SET_CSS_LINES.join("\n");
@@ -1415,7 +1483,7 @@ function createGemBaseCssParts(profile) {
   ].join("\n");
   return {
     // Edition rules close the primitives (editions.ts): custom properties on <html>, scoped :where([data-gem-edition]).
-    primitives: [reset, "", createPrimitiveCss(), "", gemFrameworkEditionCss(), "", ""].join("\n"),
+    primitives: [reset, "", createPrimitiveCss(), "", gemFrameworkEditionElementCss(), "", gemFrameworkEditionCss(), "", ""].join("\n"),
     sections: [createShellCss(), "", createSectionCss(), "", createThemeProfileCss(profile)].join("\n")
   };
 }
@@ -1425,7 +1493,11 @@ function createThemeProfileCss(profile = "dawn-parity") {
 function createMorphProfileCss() {
   return [
     "/* Gem morph profile: style packs and section presets provide visual transformation above core primitives. */",
-    ":root { --gem-profile-mode: morph; }"
+    ":root { --gem-profile-mode: morph; }",
+    // A morph theme's quick-view card is a box drawn from its card tokens (the .gem-card primitive). Edition 3 unboxes this
+    // card for Dawn's collection page; restated here one class higher, so a morph theme keeps its box and its card knobs on
+    // every edition (review of #764). The same values as .gem-card: nothing changes for a morph store on edition 1 or 2.
+    ".gem-product-card-grid--quick-view-grid .gem-card.gem-product-card-grid__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); }"
   ].join("\n");
 }
 function createPrimitiveCss() {
@@ -1648,8 +1720,9 @@ function createPrimitiveCss() {
     "  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).
+    // A wrapped field gets the join's height too: the dawn-parity profile's 4.5rem floor named .gem-input until 0.18.12, and
+    // only the direct-child rule above outranked it, so a wrapped input stood 72px next to a 44px one (02/10/2026). The
+    // floor no longer names it; this keeps a wrapped field at the join's height whatever a profile floors it at.
     ".gem-field-join > .gem-form-field > :is(.gem-input, .gem-select) {",
     "  width: 100%;",
     "  height: 100%;",
@@ -1687,6 +1760,32 @@ function createPrimitiveCss() {
     "  accent-color: var(--gem-color-accent);",
     "}",
     ...GEM_FORM_SET_CSS_LINES,
+    // HOVER AND ERROR (§9.2 state matrix, 20/10/2026): GemFactory Framework › Controls measured both INERT, so a field a
+    // shopper points at, or one a form marked invalid, looked like any other. Written once for every field, with or
+    // without a form set.
+    // HOVER thickens the edge by 1px in the field's own ink, as Dawn does (`box-shadow: 0 0 0 calc(border + .1rem)`): a
+    // colour change alone was invisible under every form set, whose edge is already the ink (measured #1f2224 → #202223).
+    // The ring follows the box and its corner; an underline or filled field has only a bottom rule, so only that thickens.
+    // ERROR (`aria-invalid="true"`, set by the form) takes the danger colour mixed 70/30 with that ink, which keeps the
+    // edge at 3:1 or more on a white field (9.7:1), an underline field on a dark band (4.2:1) and on an accent band
+    // (3.0:1); plain #b42318 there was 2.4:1 and 1.8:1. Only the edge colour changes, so every shape keeps its edges.
+    // Hover skips a disabled or invalid field (an error must not lose its colour under the pointer), a focused one (the
+    // focus halo on a dark or accent band is a box-shadow, and a click focuses a text field as :focus-visible, so the
+    // pointer still on it would wipe the halo: review) and touch screens, where a tap would leave it stuck.
+    // Specificity: hover (0,6,0; 0,8,0 per shape) outranks the set's field rule (0,3,0); error (0,3,0) ties it and wins by
+    // coming later in the sheet.
+    "@media (hover: hover) {",
+    '  :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)):hover:not(:disabled):not([aria-invalid="true"]):not(:focus-visible) {',
+    "    border-color: currentColor;",
+    "    box-shadow: 0 0 0 1px currentColor;",
+    "  }",
+    '  [data-gem-form-set]:is([data-gem-field-shape="underline"], [data-gem-field-shape="filled"]) :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)):hover:not(:disabled):not([aria-invalid="true"]):not(:focus-visible) {',
+    "    box-shadow: 0 1px 0 0 currentColor;",
+    "  }",
+    "}",
+    ':is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input))[aria-invalid="true"] {',
+    "  border-color: color-mix(in srgb, var(--gem-color-danger, #b42318) 70%, currentColor);",
+    "}",
     ".gem-submit {",
     "  cursor: pointer;",
     "}",
@@ -1871,17 +1970,25 @@ function createPrimitiveCss() {
     // .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.
+    // SVG stars (GemFactory gap #45, 0.18.11): real review widgets draw each star as an SVG (solid + outline), and the
+    // eight product-reviews sections rebuilt in GemFactory put those SVGs in __base / __fill. Two things broke the fill
+    // (measured 12/10/2026): the base `svg { max-width: 100% }` shrank the SVGs in the clipped __fill to the fill's
+    // width (4.2 drew as five squeezed stars), and a .gem-stars that is a stretched grid / flex item computed its
+    // percentage against the stretched width (3 of 5 drew as 5). The row is as wide as its stars, always, and a star
+    // keeps its own size inside the clip.
     ".gem-stars {",
     "  --gem-stars-total: 5;",
     "  --gem-stars-value: 5;",
     "  position: relative;",
     "  display: inline-block;",
+    "  width: max-content;",
     "  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 :is(svg, img) { max-width: none; flex: none; }",
     ".gem-stars__fill {",
     "  position: absolute;",
     "  inset: 0;",
@@ -2238,6 +2345,12 @@ function createPrimitiveCss() {
     "  color: var(--gem-color-text);",
     "  text-align: center;",
     "}",
+    // The number in the middle of its cell, as the -/+ beside it (a <button> centres its label; an <output> is inline and
+    // put the digit 8-9px above the middle; Framework › Controls, 20/10/2026).
+    ".gem-quantity-input__field {",
+    "  display: grid;",
+    "  place-items: center;",
+    "}",
     ".gem-quantity-input__button {",
     "  font-weight: 750;",
     "}",
@@ -3387,7 +3500,7 @@ function createDawnParityCss() {
     ".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-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, .gem-recommended-products--product-rail .gem-product-card__media, .gem-cart-recommendations--product-rail .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).
@@ -3404,7 +3517,7 @@ function createDawnParityCss() {
     ".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-featured-collection--editorial-grid .gem-section__grid, .gem-product-card-grid--quick-view-grid .gem-section__grid, .gem-main-search .gem-section__grid, .gem-recommended-products--product-rail .gem-section__grid, .gem-cart-recommendations--product-rail .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
@@ -3574,14 +3687,16 @@ function createDawnParityMobileCss() {
     "  .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; }",
+    // 8px on a phone too, as the featured collection and the two product rails: the cards are Dawn's flat cards, and with
+    // no padding of their own a 4px gap left two columns of titles 4px apart at 320 (review of gemsite #951).
+    "  .gem-product-card-grid--quick-view-grid .gem-product-card-grid__grid { gap: 8px !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; }",
     // Fallback = the profile's own phone heading, declared once as --gem-heading-phone-cap on the :root above.
     "  .gem-section__heading { font-size: var(--gem-section-heading-size-mobile, var(--gem-heading-phone-cap)); }",
     "  .gem-hero-banner h1, .gem-hero-banner h2 { font-size: var(--gem-hero-heading-size-mobile, var(--gem-heading-phone-cap)); }",
-    "  .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-featured-collection--editorial-grid .gem-section__grid, .gem-product-card-grid--quick-view-grid .gem-section__grid, .gem-main-search .gem-section__grid, .gem-recommended-products--product-rail .gem-section__grid, .gem-cart-recommendations--product-rail .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; }",
@@ -3832,7 +3947,10 @@ function createShellCss() {
     ".newsletter-form__field-wrapper, .field {",
     "  position: relative;",
     "}",
-    ".field__input, .field input, .gem-input {",
+    // Dawn's field floor, for Dawn's own field classes. It named .gem-input too, and 4.5rem is Dawn's 45px only on Dawn's
+    // 10px root: on this 16px root a .gem-input stood 72px beside a 44px select and stepper whenever no form set ruled it
+    // (GemFactory Framework › Controls, 20/10/2026). A .gem-input takes the primitive's floor, as every field does.
+    ".field__input, .field input {",
     "  min-height: 4.5rem;",
     "  border-radius: var(--inputs-radius, 0);",
     "}",
@@ -5061,6 +5179,11 @@ var claimNamed = (key) => CLAIM_KEY.test(key) && !DISPLAY_QUANTITY.test(key);
 function stringLiteralsIn(line) {
   return [...line.matchAll(/(["'`])((?:\\.|(?!\1)[^\\])*)\1/g)].map((m) => m[2]);
 }
+var VERIFIED_FLAG = String.raw`\b(?:is_?)?verified(?:_?(?:buyer|purchase|purchaser|customer|review))?\b`;
+var VERIFIED_BY_DEFAULT = new RegExp(
+  `(?:${VERIFIED_FLAG}\\s*(?:!==?\\s*false\\b|(?:\\?\\?|\\|\\|)=?\\s*(?:true|!0)\\b|===?\\s*false\\s*\\?\\s*(?:null|undefined|false|""|'')\\s*:)|(?<=[{[,(]\\s*)${VERIFIED_FLAG}\\s*=(?![=>])\\s*(?:true|!0)\\b)`,
+  "i"
+);
 function fabricatedProofInSource(raw) {
   const src = blankComments(raw);
   const out = [];
@@ -5108,6 +5231,11 @@ function fabricatedProofInSource(raw) {
       out.push({ line: at, why: `${kind} ${JSON.stringify(text)}`, text: line.trim() });
     }
   });
+  const code = src.replace(/(["'])((?:\\.|(?!\1)[^\\\n])*)\1/g, (_m, q, body) => q + body.replace(/[^\n]/g, " ") + q);
+  for (const m of code.matchAll(new RegExp(VERIFIED_BY_DEFAULT.source, "gi"))) {
+    const at = code.slice(0, m.index).split("\n").length;
+    out.push({ line: at, why: `verified by default (${m[0].replace(/\s+/g, " ").trim()}); badge only on verified === true`, text: (lines[at - 1] ?? "").trim() });
+  }
   for (const r of demoReads) {
     const onDemoLine = caught.has(`${r.entry.line}\0key\0${r.key}`) || stringLiteralsIn(r.entry.value).some((text) => caught.has(`${r.entry.line}\0str\0${text}`));
     if (!onDemoLine) out.push({ line: r.at, why: r.why, text: r.text });
@@ -5272,6 +5400,7 @@ export {
   SHARED_FRAMEWORK_PREFIXES,
   TESTIMONY_NAME,
   TESTIMONY_PROPERTY,
+  VERIFIED_BY_DEFAULT,
   claimIn,
   classesStyledBy,
   cssPairingOrphans,

package/dist/sections.css

@@ -163,7 +163,7 @@ sticky-header.header-wrapper {
 .newsletter-form__field-wrapper, .field {
   position: relative;
 }
-.field__input, .field input, .gem-input {
+.field__input, .field input {
   min-height: 4.5rem;
   border-radius: var(--inputs-radius, 0);
 }
@@ -859,7 +859,7 @@ main > .gem-section:first-child { padding-top: 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-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, .gem-recommended-products--product-rail .gem-product-card__media, .gem-cart-recommendations--product-rail .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; }
 .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; }
@@ -873,7 +873,7 @@ main > .gem-section:first-child { padding-top: 0; }
 .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-featured-collection--editorial-grid .gem-section__grid, .gem-product-card-grid--quick-view-grid .gem-section__grid, .gem-main-search .gem-section__grid, .gem-recommended-products--product-rail .gem-section__grid, .gem-cart-recommendations--product-rail .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; }
 .gem-product-card-grid--quick-view-grid .gem-price:not(.gem-price--on-sale) .gem-price__compare { display: none; }
@@ -1027,13 +1027,13 @@ main > .gem-section:first-child { padding-top: 0; }
   .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-grid--quick-view-grid .gem-product-card-grid__grid { gap: 8px !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-section__heading { font-size: var(--gem-section-heading-size-mobile, var(--gem-heading-phone-cap)); }
   .gem-hero-banner h1, .gem-hero-banner h2 { font-size: var(--gem-hero-heading-size-mobile, var(--gem-heading-phone-cap)); }
-  .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-featured-collection--editorial-grid .gem-section__grid, .gem-product-card-grid--quick-view-grid .gem-section__grid, .gem-main-search .gem-section__grid, .gem-recommended-products--product-rail .gem-section__grid, .gem-cart-recommendations--product-rail .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; }