@gemboss/gem-framework 0.6.0 → 0.9.0

package/dist/plugins/runtime-slot-loader.js

@@ -0,0 +1,29 @@
+// @gemboss/gem-framework/plugins/runtime-slot-loader: the gem-runtime plugin "runtime-slot-loader" as an ES module. Generated from
+// packages/gem-framework/src/runtime.ts, the same lines gem-runtime.js carries; do not edit here.
+import { mountPlugin } from "../runtime-core.js";
+
+export const key = "runtime-slot-loader";
+export const readyEvent = "gem:slot:ready";
+
+function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin }) {
+  registerPlugin('runtime-slot-loader', ({ api }) => {
+    const slots = document.querySelectorAll('[data-gem-runtime-slot], [data-gem-footer-block-builder], .gem-navigation-shell__layout');
+    let bound = 0;
+    slots.forEach((slot, index) => {
+      if (!mark(slot, 'runtime-slot-loader')) return;
+      if (slot.dataset) {
+        slot.dataset.gemRuntimeSlotState = 'ready';
+        if (!slot.dataset.gemRuntimeSlotIndex) slot.dataset.gemRuntimeSlotIndex = String(index);
+      }
+      bound += 1;
+    });
+    api.emit('gem:slot:ready', { source: 'gem-runtime', count: bound });
+  });
+}
+
+/** Bind every "runtime-slot-loader" hook inside root (default: the whole document). Returns unmount(). Mounting the same root twice binds once. */
+export function mount(root, options) {
+  return mountPlugin(key, install, root, options);
+}
+
+export default mount;

package/dist/plugins/seasonal-effects.d.ts

@@ -0,0 +1,9 @@
+// @gemboss/gem-framework/plugins/seasonal-effects: types of the ES module next to this file. Generated; do not edit here.
+import type { MountOptions, Unmount } from "../runtime-core.js";
+
+export type { MountOptions, Unmount };
+export declare const key: "seasonal-effects";
+export declare const readyEvent: "gem:seasonal:ready";
+/** Bind every "seasonal-effects" hook inside root (default: the whole document). Returns unmount(). Mounting the same root twice binds once. */
+export declare function mount(root?: ParentNode | null, options?: MountOptions): Unmount;
+export default mount;

package/dist/plugins/seasonal-effects.js

@@ -0,0 +1,17 @@
+// @gemboss/gem-framework/plugins/seasonal-effects: the gem-runtime plugin "seasonal-effects" as an ES module. Generated from
+// packages/gem-framework/src/runtime.ts, the same lines gem-runtime.js carries; do not edit here.
+import { mountPlugin } from "../runtime-core.js";
+
+export const key = "seasonal-effects";
+export const readyEvent = "gem:seasonal:ready";
+
+function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin }) {
+  registerNoopPlugin("seasonal-effects", "gem:seasonal:ready");
+}
+
+/** Bind every "seasonal-effects" hook inside root (default: the whole document). Returns unmount(). Mounting the same root twice binds once. */
+export function mount(root, options) {
+  return mountPlugin(key, install, root, options);
+}
+
+export default mount;

package/dist/plugins/sticky-atc.d.ts

@@ -0,0 +1,9 @@
+// @gemboss/gem-framework/plugins/sticky-atc: types of the ES module next to this file. Generated; do not edit here.
+import type { MountOptions, Unmount } from "../runtime-core.js";
+
+export type { MountOptions, Unmount };
+export declare const key: "sticky-atc";
+export declare const readyEvent: "gem:sticky-atc:ready";
+/** Bind every "sticky-atc" hook inside root (default: the whole document). Returns unmount(). Mounting the same root twice binds once. */
+export declare function mount(root?: ParentNode | null, options?: MountOptions): Unmount;
+export default mount;

package/dist/plugins/sticky-atc.js

@@ -0,0 +1,43 @@
+// @gemboss/gem-framework/plugins/sticky-atc: the gem-runtime plugin "sticky-atc" as an ES module. Generated from
+// packages/gem-framework/src/runtime.ts, the same lines gem-runtime.js carries; do not edit here.
+import { mountPlugin } from "../runtime-core.js";
+
+export const key = "sticky-atc";
+export const readyEvent = "gem:sticky-atc:ready";
+
+function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin }) {
+  registerPlugin('sticky-atc', ({ api }) => {
+    const bars = document.querySelectorAll('[data-gem-sticky-atc], .gem-sticky-atc');
+    let bound = 0;
+    const setState = (bar, state) => {
+      if (!bar || !bar.dataset) return;
+      if (bar.dataset.gemStickyAtcState === state) return;
+      bar.dataset.gemStickyAtcState = state;
+      api.emit(state === 'visible' ? 'gem:sticky-atc:show' : 'gem:sticky-atc:hide', { source: 'gem-runtime', id: bar.id || undefined });
+    };
+    bars.forEach((bar) => {
+      if (!mark(bar, 'sticky-atc')) return;
+      const cssThreshold = () => { try { return target.getComputedStyle ? Number(target.getComputedStyle(bar).getPropertyValue('--gem-sticky-atc-threshold')) : 0; } catch { return 0; } };
+      const threshold = bar.hasAttribute && bar.hasAttribute('data-gem-sticky-atc-threshold')
+        ? (Number(bar.getAttribute('data-gem-sticky-atc-threshold')) || cssThreshold() || 360)
+        : Number(bar.getAttribute && (bar.getAttribute('data-gem-sticky-threshold') || '240'));
+      const update = () => {
+        const scrollY = Number(target.scrollY || target.pageYOffset || 0);
+        setState(bar, scrollY >= threshold ? 'visible' : 'hidden');
+      };
+      update();
+      if (canListen(target)) __gemListen(target, 'scroll', update, { passive: true });
+      const form = bar.querySelector && bar.querySelector('form');
+      if (canListen(form)) __gemListen(form, 'submit', () => api.emit('gem:sticky-atc:submit', { source: 'gem-runtime', id: bar.id || undefined }));
+      bound += 1;
+    });
+    api.emit('gem:sticky-atc:ready', { source: 'gem-runtime', count: bound });
+  });
+}
+
+/** Bind every "sticky-atc" hook inside root (default: the whole document). Returns unmount(). Mounting the same root twice binds once. */
+export function mount(root, options) {
+  return mountPlugin(key, install, root, options);
+}
+
+export default mount;

package/dist/plugins/tabs.d.ts

@@ -0,0 +1,9 @@
+// @gemboss/gem-framework/plugins/tabs: types of the ES module next to this file. Generated; do not edit here.
+import type { MountOptions, Unmount } from "../runtime-core.js";
+
+export type { MountOptions, Unmount };
+export declare const key: "tabs";
+export declare const readyEvent: "gem:tabs:ready";
+/** Bind every "tabs" hook inside root (default: the whole document). Returns unmount(). Mounting the same root twice binds once. */
+export declare function mount(root?: ParentNode | null, options?: MountOptions): Unmount;
+export default mount;

package/dist/plugins/tabs.js

@@ -0,0 +1,50 @@
+// @gemboss/gem-framework/plugins/tabs: the gem-runtime plugin "tabs" as an ES module. Generated from
+// packages/gem-framework/src/runtime.ts, the same lines gem-runtime.js carries; do not edit here.
+import { mountPlugin } from "../runtime-core.js";
+
+export const key = "tabs";
+export const readyEvent = "gem:tabs:ready";
+
+function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin }) {
+  registerPlugin('tabs', ({ api }) => {
+    const roots = document.querySelectorAll('[data-gem-tabs]');
+    let bound = 0;
+    roots.forEach((root) => {
+      if (!mark(root, 'tabs')) return;
+      const tabs = Array.prototype.slice.call(root.querySelectorAll('[data-gem-tab]'));
+      const panels = Array.prototype.slice.call(root.querySelectorAll('[data-gem-panel]'));
+      if (!tabs.length || !panels.length) return;
+      const select = (key, userInitiated) => {
+        tabs.forEach((t) => t.setAttribute('aria-selected', String(t.getAttribute('data-gem-tab') === key)));
+        let active = null;
+        panels.forEach((p) => {
+          if (p.getAttribute('data-gem-panel') === key) { p.removeAttribute('hidden'); active = p; }
+          else p.setAttribute('hidden', '');
+        });
+        if (userInitiated && active && active.getBoundingClientRect) {
+          const r = active.getBoundingClientRect();
+          const vh = window.innerHeight || document.documentElement.clientHeight;
+          if (!(r.top < vh * 0.85 && r.bottom > vh * 0.15) && active.scrollIntoView) {
+            active.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+          }
+        }
+        api.emit('gem:tabs:change', { source: 'gem-runtime', key: key });
+      };
+      tabs.forEach((t) => {
+        if (!canListen(t)) return;
+        __gemListen(t, 'click', () => select(t.getAttribute('data-gem-tab'), true));
+      });
+      const initial = tabs.filter((t) => t.getAttribute('aria-selected') === 'true')[0] || tabs[0];
+      select(initial.getAttribute('data-gem-tab'), false);
+      bound += 1;
+    });
+    api.emit('gem:tabs:ready', { source: 'gem-runtime', count: bound });
+  });
+}
+
+/** Bind every "tabs" hook inside root (default: the whole document). Returns unmount(). Mounting the same root twice binds once. */
+export function mount(root, options) {
+  return mountPlugin(key, install, root, options);
+}
+
+export default mount;

package/dist/plugins/variant-selects.d.ts

@@ -0,0 +1,9 @@
+// @gemboss/gem-framework/plugins/variant-selects: types of the ES module next to this file. Generated; do not edit here.
+import type { MountOptions, Unmount } from "../runtime-core.js";
+
+export type { MountOptions, Unmount };
+export declare const key: "variant-selects";
+export declare const readyEvent: "gem:variant:ready";
+/** Bind every "variant-selects" hook inside root (default: the whole document). Returns unmount(). Mounting the same root twice binds once. */
+export declare function mount(root?: ParentNode | null, options?: MountOptions): Unmount;
+export default mount;

package/dist/plugins/variant-selects.js

@@ -0,0 +1,70 @@
+// @gemboss/gem-framework/plugins/variant-selects: the gem-runtime plugin "variant-selects" as an ES module. Generated from
+// packages/gem-framework/src/runtime.ts, the same lines gem-runtime.js carries; do not edit here.
+import { mountPlugin } from "../runtime-core.js";
+
+export const key = "variant-selects";
+export const readyEvent = "gem:variant:ready";
+
+function install({ document, window, target, mark, canListen, listen: __gemListen, registerPlugin, registerNoopPlugin }) {
+  registerPlugin('variant-selects', ({ api }) => {
+    const selects = document.querySelectorAll('[data-gem-variant-select], select[name="id"]');
+    let bound = 0;
+    selects.forEach((select) => {
+      if (!mark(select, 'variant-selects')) return;
+      let hasInitialized = false;
+      const update = () => {
+        const option = select.options && select.options[select.selectedIndex];
+        const available = !option || option.getAttribute('data-gem-variant-available') !== 'false';
+        const price = option && option.getAttribute('data-gem-variant-price');
+        const mediaId = option && option.getAttribute('data-gem-variant-media-id');
+        const form = select.closest && select.closest('form');
+        const scope = (form && form.closest && form.closest('[data-gem-section-id], .gem-section, [data-qa-surface]')) || (select.closest && select.closest('[data-gem-section-id], .gem-section, [data-qa-surface]')) || document;
+        const submit = form && form.querySelector && form.querySelector('[type="submit"]');
+        const status = form && form.querySelector && form.querySelector('[data-gem-variant-status]');
+        const priceOutput = scope && scope.querySelector && scope.querySelector('[data-gem-variant-price-output]');
+        const availabilityOutput = scope && scope.querySelector && scope.querySelector('[data-gem-variant-availability]');
+        if (form && form.dataset) form.dataset.gemSelectedVariantId = String(select.value || '');
+        if (form && form.dataset && price) form.dataset.gemSelectedVariantPrice = price;
+        if (form && form.dataset && mediaId) form.dataset.gemSelectedMediaId = mediaId;
+        if (submit) submit.disabled = !available;
+        if (submit) submit.setAttribute('aria-disabled', available ? 'false' : 'true');
+        if (status) status.textContent = available ? 'Selected variant available' : 'Selected variant unavailable';
+        if (hasInitialized && price && priceOutput) priceOutput.textContent = price;
+        if (availabilityOutput) {
+          availabilityOutput.textContent = available ? 'In stock' : 'Sold out';
+          availabilityOutput.classList && availabilityOutput.classList.toggle('gem-product-main__availability--in-stock', available);
+          availabilityOutput.classList && availabilityOutput.classList.toggle('gem-product-main__availability--sold-out', !available);
+        }
+        if (mediaId) {
+          const escapedMediaId = String(mediaId).replace(/["\\]/g, '\\$&');
+          const gallery = (scope && scope.querySelector && scope.querySelector('[data-gem-media-gallery], .gem-product-media-gallery')) || document.querySelector('[data-gem-media-gallery], .gem-product-media-gallery');
+          const thumb = gallery && gallery.querySelector && gallery.querySelector('[data-gem-media-id="' + escapedMediaId + '"]');
+          const mediaIndex = thumb && thumb.getAttribute && thumb.getAttribute('data-gem-media-index');
+          if (thumb && typeof thumb.click === 'function') thumb.click();
+          if (gallery && mediaIndex !== null && mediaIndex !== undefined) {
+            gallery.dataset && (gallery.dataset.gemMediaActiveIndex = String(mediaIndex));
+            gallery.querySelectorAll && gallery.querySelectorAll('[data-gem-media-thumb]').forEach((control) => {
+              const isActive = control.getAttribute && control.getAttribute('data-gem-media-index') === String(mediaIndex);
+              if (isActive) control.setAttribute('aria-current', 'true'); else control.removeAttribute('aria-current');
+              if (control.dataset) control.dataset.gemMediaActive = isActive ? 'true' : 'false';
+            });
+          }
+        }
+        api.emit('gem:variant:change', { source: 'gem-runtime', variantId: select.value || undefined, available, price, mediaId });
+        hasInitialized = true;
+      };
+      if (!canListen(select)) return;
+      __gemListen(select, 'change', update);
+      update();
+      bound += 1;
+    });
+    api.emit('gem:variant:ready', { source: 'gem-runtime', count: bound });
+  });
+}
+
+/** Bind every "variant-selects" hook inside root (default: the whole document). Returns unmount(). Mounting the same root twice binds once. */
+export function mount(root, options) {
+  return mountPlugin(key, install, root, options);
+}
+
+export default mount;

package/dist/popup-shell.css

@@ -0,0 +1,91 @@
+.gem-popup-shell { padding: 0; }
+.gem-popup-shell__dialog {
+  padding: 0; border: 0; margin: auto; color: var(--gem-color-text); background: var(--gem-color-background);
+  width: min(880px, 92vw); max-width: none; max-height: min(640px, 92vh); overflow: hidden;
+  border-radius: var(--gem-radius-lg); box-shadow: var(--gem-shadow-md);
+}
+.gem-popup-shell__dialog::backdrop { background: rgb(0 0 0 / 0.55); }
+.gem-popup-shell__frame { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; height: 100%; }
+.gem-popup-shell__media { position: relative; min-width: 0; overflow: hidden; background: var(--gem-color-surface); }
+.gem-popup-shell__image { display: block; width: 100%; height: 100%; object-fit: cover; }
+.gem-popup-shell__panel {
+  position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--gem-space-md);
+  padding: var(--gem-space-2xl) var(--gem-space-xl); overflow-y: auto; align-items: center; text-align: center;
+}
+.gem-popup-shell[data-gem-popup-align='start'] .gem-popup-shell__panel { align-items: stretch; text-align: start; }
+.gem-popup-shell[data-gem-popup-desktop='split-right'] .gem-popup-shell__media { order: 2; }
+.gem-popup-shell[data-gem-popup-media='none'] .gem-popup-shell__frame,
+.gem-popup-shell[data-gem-popup-desktop='card'] .gem-popup-shell__frame { grid-template-columns: 1fr; }
+@media (min-width: 750px) {
+  .gem-popup-shell[data-gem-popup-media='none'] .gem-popup-shell__dialog,
+  .gem-popup-shell[data-gem-popup-desktop='card'] .gem-popup-shell__dialog { width: min(480px, 92vw); }
+}
+.gem-popup-shell[data-gem-popup-media='none'] .gem-popup-shell__media { display: none; }
+.gem-popup-shell[data-gem-popup-desktop='card'] .gem-popup-shell__media { max-height: 200px; }
+.gem-popup-shell[data-gem-popup-desktop='card-over-image'] .gem-popup-shell__frame { grid-template-columns: 1fr; place-items: center; }
+.gem-popup-shell[data-gem-popup-desktop='card-over-image'] .gem-popup-shell__media { position: absolute; inset: 0; }
+.gem-popup-shell[data-gem-popup-desktop='card-over-image'] .gem-popup-shell__panel {
+  width: min(420px, 86%); margin: var(--gem-space-xl) 0; background: var(--gem-color-background); border-radius: var(--gem-radius-lg); box-shadow: var(--gem-shadow-sm);
+}
+.gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.6)); }
+.gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__panel,
+.gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__close { color: #fff; }
+.gem-popup-shell__close {
+  position: absolute; inset-block-start: var(--gem-space-xs); inset-inline-end: var(--gem-space-xs); z-index: 2;
+  display: inline-grid; place-items: center; width: var(--gem-tap-min); height: var(--gem-tap-min); padding: 0;
+  border: 0; border-radius: var(--gem-radius-pill); color: inherit; background: transparent; cursor: pointer;
+}
+.gem-popup-shell__close:focus-visible { outline: var(--gem-focus-ring); outline-offset: var(--gem-focus-offset); }
+.gem-popup-shell__teaser {
+  position: fixed; inset-block-end: var(--gem-space-md); inset-inline-end: var(--gem-space-md); z-index: 40;
+  min-height: var(--gem-tap-min); padding: 0 var(--gem-space-md); font: inherit; font-weight: 600; cursor: pointer;
+  color: var(--gem-color-accent-text); background: var(--gem-color-accent); border: 0; border-radius: var(--gem-radius-pill); box-shadow: var(--gem-shadow-md);
+}
+.gem-popup-shell__teaser[data-position='left'] { inset-inline-end: auto; inset-inline-start: var(--gem-space-md); }
+.gem-popup-shell__teaser[hidden] { display: none; }
+@media (min-width: 750px) {
+  .gem-popup-shell[data-gem-popup-desktop='fullscreen'] .gem-popup-shell__dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; box-shadow: none; }
+  .gem-popup-shell[data-gem-popup-desktop='fullscreen'] .gem-popup-shell__frame { min-height: 100%; }
+  .gem-popup-shell[data-gem-popup-desktop='fullscreen'] .gem-popup-shell__media { order: 2; }
+  .gem-popup-shell[data-gem-popup-desktop='fullscreen'] .gem-popup-shell__panel { padding: var(--gem-space-3xl); }
+  .gem-popup-shell[data-gem-popup-desktop='fullscreen'][data-gem-popup-align='start'] .gem-popup-shell__panel { padding-inline-start: max(var(--gem-space-3xl), 8vw); }
+  .gem-popup-shell[data-gem-popup-desktop='fullscreen'][data-gem-popup-media='background'] .gem-popup-shell__frame { grid-template-columns: 1fr; }
+  .gem-popup-shell[data-gem-popup-desktop='fullscreen'][data-gem-popup-media='background'][data-gem-popup-align='start'] .gem-popup-shell__frame { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+  .gem-popup-shell[data-gem-popup-desktop='fullscreen'][data-gem-popup-media='background'] .gem-popup-shell__media { position: absolute; inset: 0; }
+  .gem-popup-shell[data-gem-popup-desktop='fullscreen'][data-gem-popup-media='background'] .gem-popup-shell__panel { position: relative; z-index: 1; }
+  .gem-popup-shell[data-gem-popup-desktop='card-over-image'][data-gem-popup-media='background'] .gem-popup-shell__panel { color: var(--gem-color-text); }
+  .gem-popup-shell[data-gem-popup-media='background']:is([data-gem-popup-desktop='split-left'], [data-gem-popup-desktop='split-right'], [data-gem-popup-desktop='card']) .gem-popup-shell__panel,
+  .gem-popup-shell[data-gem-popup-media='background']:is([data-gem-popup-desktop='split-left'], [data-gem-popup-desktop='split-right'], [data-gem-popup-desktop='card']) .gem-popup-shell__close { color: var(--gem-color-text); }
+  .gem-popup-shell[data-gem-popup-media='background']:is([data-gem-popup-desktop='split-left'], [data-gem-popup-desktop='split-right'], [data-gem-popup-desktop='card']) .gem-popup-shell__media::after { content: none; }
+}
+@media (max-width: 749px) {
+  .gem-popup-shell__dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
+  .gem-popup-shell[data-gem-popup-mobile='sheet'] .gem-popup-shell__dialog { height: auto; max-height: 88dvh; margin: auto 0 0; border-radius: var(--gem-radius-lg) var(--gem-radius-lg) 0 0; }
+  .gem-popup-shell__frame { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100%; }
+  .gem-popup-shell__panel { justify-content: flex-start; padding: var(--gem-space-3xl) var(--gem-space-lg) var(--gem-space-xl); }
+  .gem-popup-shell[data-gem-popup-media='none'] .gem-popup-shell__panel,
+  .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__panel { justify-content: center; }
+  .gem-popup-shell[data-gem-popup-desktop='card-over-image'] .gem-popup-shell__panel { width: 100%; margin: 0; border-radius: 0; box-shadow: none; background: transparent; }
+  .gem-popup-shell[data-gem-popup-desktop='card-over-image'] .gem-popup-shell__media { position: relative; }
+  .gem-popup-shell__media { order: 2; max-height: 34dvh; }
+  .gem-popup-shell[data-gem-popup-media='top'] .gem-popup-shell__media { order: 0; }
+  .gem-popup-shell[data-gem-popup-media='top'] .gem-popup-shell__panel { padding-top: var(--gem-space-lg); }
+  .gem-popup-shell[data-gem-popup-media='none'] .gem-popup-shell__frame,
+  .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__frame { grid-template-rows: 1fr; }
+  .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__media { position: absolute; inset: 0; max-height: none; }
+}
+:root:not(:has([data-gem-canvas])) .gem-popup-shell[data-gem-popup-preview='true'] { position: fixed; inset: 0; z-index: 1000; padding: 0; background: rgb(0 0 0 / 0.55); }
+:root:not(:has([data-gem-canvas])) .gem-popup-shell[data-gem-popup-preview='true'] .gem-popup-shell__dialog { position: fixed; inset: 0; display: block; }
+:root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] .gem-popup-shell__dialog { position: relative; display: block; inset: auto; }
+:root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] { padding: var(--gem-space-xl) var(--gem-layout-gutter); background: rgb(0 0 0 / 0.55); }
+@media (min-width: 750px) {
+  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-desktop='fullscreen'] { padding: 0; }
+  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-desktop='fullscreen'] .gem-popup-shell__dialog { height: 720px; max-height: none; }
+}
+@media (max-width: 749px) {
+  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] { padding: 0; }
+  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] .gem-popup-shell__dialog { height: 844px; max-height: none; width: 100%; max-width: 100%; }
+  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-mobile='sheet'] { padding-top: 160px; }
+  :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-mobile='sheet'] .gem-popup-shell__dialog { min-height: 0; }
+}
+