@gemboss/gem-framework 0.16.1 → 0.18.11

package/README.md

@@ -93,6 +93,80 @@ Từ 0.8.2 mỗi module có `.d.ts` cạnh nó (`mount(root?: ParentNode | null,
 
 ## Nhật ký thay đổi
 
+- **0.18.11** (19/10/2026): `.gem-stars` nhận sao SVG (gap #45 của GemFactory). Hàng sao rộng đúng bằng các ngôi sao
+  (`width: max-content`), và `svg` / `img` trong hàng sao không bị luật nền `max-width: 100%` bóp. Trước đó sao SVG trong
+  lớp tô bị co theo bề rộng lớp tô (4,2 vẽ thành năm sao ép), và hàng sao là item bị giãn của grid / flex thì phần trăm tô
+  tính theo bề rộng đã giãn (3 trên 5 vẽ thành 5). Hàng sao bằng ký tự ★ trong một flex row (thẻ sản phẩm featured) không đổi.
+
+- **0.18.10** (19/10/2026): section-gate (`fabricatedProofInSource`, `VERIFIED_BY_DEFAULT`) bắt cờ "đã xác minh"
+  (verified, isVerified, verified_buyer…) đọc theo kiểu thiếu thì coi là đúng: `!== false`, `?? true`, `|| true`,
+  `=== false ? null : <badge>`, `{ verified = true }`, kể cả xuống dòng. Huy hiệu "Verified Buyer" chỉ được hiện khi dữ liệu
+  nói `verified === true` (star-card-grid đã gắn nó cho mọi review không mang cờ).
+- **0.18.9** (19/10/2026): `gemPlanFormSet(plan)`: bộ form mà MỌI trình vẽ dùng cho một plan. `tokens.form` của plan nếu
+  có; `tokens.form: null` khi người bán chọn "None" (không bộ nào); thiếu khoá (plan viết trước khi có bộ form) thì bộ mà
+  tính cách của nó suy ra (`deriveFormSetId`). `renderGemPreviewDocument` dùng nó cho cả tờ token lẫn `<body>`, như
+  storefront. Schema `tokens.form` nhận `null`. Giá trị lưu không phải một bộ (mảng, object rỗng) được đọc như thiếu khoá.
+- **0.18.8** (19/10/2026): `deriveFormSetId` (và `GEM_SOFT_FIELD_FAMILIES`, `GemFormCharacter`): bộ form mà tính cách của
+  store suy ra (bo góc + kiểu nút + họ), chuyển từ `theme-presets` sang đây. Planner vẫn ghi nó vào mọi plan mới; storefront
+  dùng chính hàm này cho plan viết trước khi có bộ form (không có `tokens.form`), để mọi store có một bộ form thay vì mỗi
+  field một kiểu. `deriveStylePackFormSetId` của `theme-presets` giữ tên, gọi sang hàm này.
+- **0.18.7** (19/10/2026): `GEM_FORM_VAR_SCOPE` khai biến của bộ form trên cả `output`. Gói này không có luật nào tô
+  `output` bằng biến của bộ form, nên tự nó không đổi gì trên trang. Nó cần cho gemsite, nơi con số giữa −/+ của ô số
+  lượng (giỏ và trang sản phẩm, đều là `<output>`) tô `--gem-input-bg` như hai nút: ngoài phạm vi, con số lấy giá trị đã
+  tính ở cấp trang, nên trong một băng có bảng màu riêng hai nút tối mà ô số vẫn sáng dưới chữ trắng của băng. Có hiệu
+  lực khi gemsite chép bản này (`lib/form-set.ts` và khối mặc định trong `globals.css`).
+- **0.18.6** (16/10/2026): `./settings-schema` (hợp đồng schema của section): `color_scheme` phải là select trên các bảng
+  màu store vẽ được (`RENDERED_COLOR_SCHEMES`, option chuẩn `COLOR_SCHEME_OPTIONS`); `range` phải có `min`/`max`; select
+  không option là lỗi. `normalizeSettingsSchema` đổi mọi cách viết cũ của "scheme" (type `color`, `color_scheme`,
+  `setting`, `string`) thành select đó. 34/51 dòng `color_scheme` trong thư viện từng là ô chọn màu hoặc ô gõ chữ mà
+  store bỏ qua.
+
+- **0.18.5** (15/10/2026): Luật nền của thẻ (`data-gem-card`) chỉ khớp `outline|shadow|filled`, luật clip của divider chỉ
+  khớp các hình có mask. Trước đó chúng khớp mọi giá trị, kể cả `"none"` (giá trị tắt mà các cửa ghi chuyển nguyên chữ ra
+  thuộc tính): hero lưu `card: "none"` từng mang hộp thẻ (đệm 32px, bo góc, ảnh bị bóp). Danh sách trắng viết trong
+  `:where(…)` nên độ đặc hiệu giữ nguyên.
+
+- **0.18.4** (15/10/2026): Lưới sản phẩm của trang collection (`product-card-grid.quick-view-grid`) cách nhau 8px trên
+  điện thoại (trước 4px), như featured collection và hai rail sản phẩm: thẻ giờ là thẻ Dawn phẳng, không đệm riêng.
+  Đi cùng section-library 1.42.9 (`sizes` ảnh đo lại cho thẻ phẳng).
+
+- **0.18.3** (15/10/2026): Lưới sản phẩm kiểu Dawn (4 cột, 2 cột trên điện thoại, khe 8px) và khung ảnh vuông
+  của thẻ áp thêm cho hai rail `recommended-products.product-rail` và `cart-recommendations.product-rail`, vì
+  hai section này giờ vẽ `.gem-product-card` (section-library 1.42.7). Không đổi section nào khác.
+
+- **0.18.2** (14/10/2026): Checkbox `divider_flip` nhận thêm giá trị lưu `1` và `"1"`, theo cùng
+  hợp đồng với checkbox của renderer. `false`, chuỗi false/off/0, giá trị vắng hoặc sai vẫn không flip.
+  Không đổi hình học cạnh, CSS, edition hoặc phiên bản section library.
+
+- **0.18.1** (14/10/2026): Trên document có divider native, nội dung của section parallax bên cạnh
+  cũng được xếp trên cạnh SVG. Chỉ bỏ stacking isolation; clipping nền parallax vẫn giữ nguyên.
+  Document không có divider native giữ hành vi cũ kể cả khi stylesheet còn được giữ sau navigation.
+
+- **0.18.0** (14/10/2026): Thêm API native cho cạnh section element: `gemSectionDividers`,
+  `gemSectionDividerStyle`, `gemSectionDividerResponsiveStyle`, `GEM_ELEMENT_SECTION_DIVIDER_CSS` và
+  `GEM_SECTION_DIVIDER_PATHS`. Dùng lại năm shape `wave`, `slope`, `spikes`, `arch`, `blob`; chiều cao 0–320px,
+  màu/token và flip được kiểm tra trước khi render. Chiều cao có thể khác ở mobile/tablet. CSS mới chỉ dùng khi
+  consumer render lớp SVG native; CSS primitive và divider section-shell cũ giữ nguyên. Cần nâng renderer/editor
+  tương ứng trước khi coi các control mới là hoạt động; bump source không phải bằng chứng đã deploy consumer.
+
+- **0.17.1** (14/10/2026): bộ đọc schema (`settings-schema.js`) nhận kiểu `datetime`: một thời điểm kèm offset, ISO 8601
+  (`2026-12-31T23:59:00+07:00`). Countdown dùng nó cho `target` (gemtheme #776). `requires` nhận thêm `{key, in: [...]}`
+  (hiện khi sibling là một trong vài giá trị) và báo lỗi vòng gate (A chờ B, B chờ A). Không đổi CSS hay runtime.
+- **0.17.0** (12/10/2026): **edition 3**, trang collection theo bậc của Dawn. Đo trên theme "Start from scratch" ở 768:
+  - trước: bốn thẻ 170px đóng hộp quanh ảnh 120px, không badge Sale / Sold out, tiêu đề ở x=0 trên dải màu nhấn rồi mờ xám;
+  - edition 3: thẻ là ảnh + chữ; badge hiện khi section bật `show_badges`; số cột điện thoại (`columns_mobile`) giữ tới 989px;
+    tiêu đề compact-collection nằm trên trang, thẳng mép lưới, màu chữ của theme.
+  - Băng compact-collection có ẢNH collection (`.has-media`, ảnh là `.gem-hero__bg`) giữ màn phủ và chữ trắng; luật tiêu đề chỉ
+    áp khi không có ảnh (review #764: chữ tối trên ảnh còn khoảng 1:1).
+  - Theme morph giữ thẻ có hộp: profile morph nhắc lại hộp từ token thẻ, cao hơn một class, nên knob thẻ vẫn sống ở mọi edition.
+
+  Luật nằm ở trường MỚI `elements` của registry (`EDITION_3_ELEMENTS`), không nằm cạnh luật Dawn-parity: sections.css không
+  được nhắc `data-gem-edition` (`editions.test.ts`). `gemFrameworkEditionElementCss()` đóng primitives.css ngay TRƯỚC biến
+  của registry, nên mỗi luật thắng bằng selector của chính nó (thêm một class hay attribute), không bằng vị trí. Store đang ở
+  edition 1/2 không đổi; store mới nhận edition mới nhất. Chuỗi: gemsite nâng gói + sync (khối `primitives.css from
+  :where([data-gem-edition='2'])` dời mốc: BREAKS; `lib/framework-edition.test.ts` nhận luật phần tử; cổng `collection:grid`).
+  gemboss: CI đọc `main` của gemtheme, nên test edition (`framework-edition-setting.test.ts`, `the-edition-door-reaches-the-plan`)
+  phải hết ghim "edition 2 là mới nhất" và merge TRƯỚC; rồi nâng vendor.
 - **0.16.1** (12/10/2026): SỬA cổng slot-contract (`slotsReadBy`, `…/section-gate`), gap #42 của GemFactory + review #758. Tên túi
   slot chỉ tính khi đứng ĐẦU một biểu thức: không sau chữ, `$`, `-`, `.`, `/` hay dấu nháy. Nên id `…reward-slots.v1`,
   `delivery-picker.slots.v1`, `gift.timeslots.v1`, chuỗi `"./slots.ts"` và `item.content.title` (tên alias làm thuộc tính của thứ

package/dist/SOURCE.json

@@ -1,7 +1,7 @@
 {
   "package": "@gemboss/gem-framework",
-  "version": "0.16.1",
-  "gemtheme_sha": "d9398bcf426b33f3c3b8b0cd4865d4f051b2c358",
+  "version": "0.18.11",
+  "gemtheme_sha": "8ba104ab54bc3c5e5e2e837a5a6a83a2d3fd14c4",
   "gemtheme_dirty": false,
-  "framework_version": "0.16.1"
+  "framework_version": "0.18.11"
 }

package/dist/editions.d.ts

@@ -28,6 +28,13 @@ export interface GemFrameworkEdition {
     changes: readonly string[];
     /** The CSS this edition adds, unscoped; gemFrameworkEditionCss scopes it. Empty for edition 1. */
     css: readonly string[];
+    /**
+     * ELEMENT rules this edition adds, `:where(&)`-scoped like `css` (gemFrameworkEditionElementCss). They close primitives.css
+     * just BEFORE the custom properties above, so they come before sections.css: each must out-rank, by its own selector, the
+     * sections.css and storefront rules it changes (a class or an attribute more), never by position. Kept here, not beside
+     * those rules, because sections.css must not name data-gem-edition (a new edition would move the storefront's anchors).
+     */
+    elements?: readonly string[];
 }
 export declare const GEM_EDITION_SUPPORT_MONTHS = 6;
 export declare const GEM_FRAMEWORK_EDITIONS: readonly GemFrameworkEdition[];
@@ -48,6 +55,8 @@ export declare function gemFrameworkEditionSupportedUntil(edition: unknown): str
 export declare function addEditionSupportMonths(released: string): string;
 /** `:where([data-gem-edition='N'], [data-gem-edition='N+1'], …)`: the attribute selectors of edition N and every later one. */
 export declare function gemFrameworkEditionScope(edition: number): string;
+/** Every edition's ELEMENT rules, scoped, oldest first: they close primitives.css just before gemFrameworkEditionCss. */
+export declare function gemFrameworkEditionElementCss(): string;
 /**
  * Every edition's CSS, scoped, oldest first. It closes primitives.css (primitives.ts createGemThemeCssParts): the rules set
  * custom properties on <html>, so their place in the sheet does not decide anything against element rules.

package/dist/editions.js

@@ -117,6 +117,14 @@ var GEM_EDITION_SUPPORT_MONTHS = 6;
 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: [] },
   {
@@ -125,6 +133,18 @@ 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;
@@ -146,6 +166,9 @@ function addEditionSupportMonths(released) {
 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");
 }
@@ -155,6 +178,7 @@ export {
   LATEST_GEM_FRAMEWORK_EDITION,
   addEditionSupportMonths,
   gemFrameworkEditionCss,
+  gemFrameworkEditionElementCss,
   gemFrameworkEditionOf,
   gemFrameworkEditionScope,
   gemFrameworkEditionSupportedUntil

package/dist/gem-framework.css

@@ -586,12 +586,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;
@@ -1142,7 +1144,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); }
@@ -1156,7 +1158,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); }
@@ -1526,7 +1528,14 @@ 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)); }
 
 .gem-popup-shell { padding: 0; }
 .gem-popup-shell__dialog {
@@ -2480,7 +2489,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; }
@@ -2494,7 +2503,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; }
@@ -2648,13 +2657,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; }