/* The storefront consumes the shared Style Master palette and scene. */
html.xform3-themed .lab-page {
  --ink: var(--gui-text);
  --muted: var(--gui-muted);
  --line: var(--gui-line);
  --paper: var(--gui-panel);
  --surface: var(--gui-panel-2);
  --blue: var(--gui-blue);
  max-width: none;
  padding: 0 clamp(18px, 2.6vw, 46px) 48px;
  background: var(--gui-bg);
  color: var(--gui-text);
  font-family: var(--gui-font-body), system-ui, sans-serif;
}

.lab-page .lab-header {
  --store-header-pad: clamp(16px, 2vw, 30px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(0, auto);
  grid-template-rows: auto 1fr auto;
  align-items: start;
  column-gap: 24px;
  min-height: 186px;
  padding: 18px var(--store-header-pad) 12px;
  margin: 0 calc(-1 * clamp(18px, 2.6vw, 46px));
  border: 0;
  background: color-mix(in srgb, var(--gui-blue) 9%, var(--gui-panel));
}

.lab-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gui-panel) 77%, transparent) 0%, color-mix(in srgb, var(--gui-panel) 32%, transparent) 27%, color-mix(in srgb, var(--gui-panel) 6%, transparent) 65%, color-mix(in srgb, var(--gui-panel) 38%, transparent) 100%);
}

.lab-header > :not(.xf3-suite-stage) { position: relative; z-index: 2; }
.lab-page .lab-header .xf3-suite-header-scene { left: calc(-1 * var(--store-header-pad)); right: calc(-1 * var(--store-header-pad)); filter: contrast(1.35) saturate(1.2); }
.lab-page .lab-brand { grid-column: 1; grid-row: 1; width: max-content; max-width: 100%; gap: 11px; }
.lab-page .lab-brand img { width: 46px; height: 46px; filter: none; }
.lab-page .lab-brand > span { font-size: clamp(22px, 2vw, 30px); font-weight: 600; letter-spacing: -.035em; color: var(--gui-text); }
.lab-page .lab-brand small { font-size: .53em; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--gui-blue); }

.lab-page .lab-preferences {
  grid-column: 2;
  grid-row: 1;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: end;
  gap: 8px 10px;
  margin: 0;
  color: var(--gui-text);
  font-size: 11px;
}
.lab-page .lab-preferences > label { min-width: 75px; max-width: 122px; gap: 4px; color: var(--gui-muted); }
.lab-page .lab-preferences select { min-height: 30px; padding: 4px 7px; border-radius: var(--xf3-heading-radius, 3px); background: var(--gui-form-bg); border-color: var(--gui-form-border); color: var(--gui-text); }
.lab-page .lab-style-controls { display: contents; }
.lab-page #xform3-theme-picker.xform3-style-docked {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 8px 10px;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  container-type: normal;
}
.lab-page #xform3-style-extensions { display: contents; }
.lab-page #xform3-theme-picker .xform3-control-field {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: clamp(104px, 10vw, 142px);
  min-width: 0;
  color: var(--gui-muted);
}
.lab-page #xform3-theme-picker .xform3-control-name { font-size: 11px; color: var(--gui-muted); }
.lab-page #xform3-theme-picker select { width: 100%; height: 30px; font-size: 11px; }
.lab-page #xform3-theme-picker :is(#suite-xf3-scenery-mode, #xform3-motion) {
  width: auto;
  min-width: 80px;
  height: 30px;
  padding: 4px 7px;
  font-size: 11px;
  background: var(--gui-panel);
}
.lab-page #xform3-theme-picker [role=status] { flex-basis: 100%; }
.lab-page .lab-header .lab-main-nav {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-content: flex-start;
  align-self: end;
  padding: 0;
  margin-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--gui-line) 72%, transparent);
}
.lab-page .lab-main-nav .menu { justify-content: flex-start; gap: 3px 8px; }
.lab-page .lab-main-nav .group > a {
  padding: 8px 14px;
  color: var(--gui-nav-text);
  background: color-mix(in srgb, var(--gui-nav-bg) 88%, transparent);
  border-radius: var(--xf3-heading-radius, 3px);
  font-weight: 600;
}
.lab-page .lab-main-nav .group > a:hover,
.lab-page .lab-main-nav .group:focus-within > a { color: var(--gui-nav-hover-text); background: var(--gui-nav-hover-bg); }
.lab-page .lab-main-nav .sub { left: 0; right: auto; background: var(--gui-panel); color: var(--gui-text); border-color: var(--gui-line); }
.lab-page .lab-main-nav .sub a { color: var(--gui-text); }
.lab-page .lab-main-nav .sub a:hover { background: var(--gui-nav-hover-bg); color: var(--gui-nav-hover-text); }

.lab-page .lab-workspace { padding-top: 24px; }
.lab-page .lab-viewer-shell { border-color: var(--gui-line); box-shadow: 0 12px 32px color-mix(in srgb, var(--gui-text) 8%, transparent); }
.lab-page .lab-viewer-toolbar { background: var(--gui-panel-2); color: var(--gui-muted); border-color: var(--gui-line); }
.lab-page .lab-viewer-toolbar button { color: var(--gui-blue); }
.lab-page .xf3v2__summary { background: color-mix(in srgb, var(--gui-panel) 92%, transparent); }
.lab-page .xf3v2__primary { background: var(--gui-button-bg); color: var(--gui-button-text); }

@media (max-width: 1120px) {
  .lab-page .lab-header { grid-template-columns: 1fr; min-height: 204px; }
  .lab-page .lab-brand { grid-column: 1; }
  .lab-page .lab-preferences { grid-column: 1; grid-row: 2; justify-content: flex-start; margin-top: 12px; }
  .lab-page .lab-header .lab-main-nav { grid-row: 3; }
}
@media (max-width: 650px) {
  .lab-page .lab-header { --store-header-pad: 16px; min-height: 0; padding: 14px var(--store-header-pad) 12px; }
  .lab-page .lab-preferences { gap: 8px; }
  .lab-page .lab-preferences > label { flex: 1 1 84px; }
  .lab-page #xform3-theme-picker.xform3-style-docked { flex-basis: 100%; justify-content: flex-start; }
  .lab-page #xform3-theme-picker .xform3-control-field { flex: 1 1 108px; }
  .lab-page .lab-main-nav .group > a { padding: 7px 10px; }
}

/* Compact customer preferences, with appearance settings in one disclosure. */
.lab-page .lab-header { z-index: 30; overflow: visible; min-height: 146px; grid-template-columns: minmax(190px, 1fr) auto; }
.lab-page .lab-preferences { grid-column: 2; grid-row: 1; justify-content: flex-end; margin: 0; z-index: 5; }
.lab-page .lab-appearance { position: relative; margin: 0; padding: 0; border: 0; font-size: 11px; }
.lab-page .lab-appearance > summary { display: flex; align-items: center; gap: 12px; list-style: none; min-height: 30px; box-sizing: border-box; padding: 5px 10px; border: 1px solid var(--gui-form-border, var(--line)); border-radius: var(--xf3-heading-radius, 3px); background: var(--gui-form-bg, var(--paper)); color: var(--gui-text, var(--ink)); font-weight: 500; }
.lab-page .lab-appearance > summary::-webkit-details-marker { display: none; }
.lab-page .lab-appearance > summary::after { content: '⌄'; font-size: 14px; line-height: 1; }
.lab-page .lab-appearance[open] > summary::after { content: '⌃'; }
.lab-page .lab-appearance-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 310px; max-width: calc(100vw - 36px); max-height: calc(100dvh - 120px); overflow: auto; box-sizing: border-box; padding: 14px; background: var(--gui-panel, var(--paper)); color: var(--gui-text, var(--ink)); border: 1px solid var(--gui-line, var(--line)); border-radius: 8px; box-shadow: 0 14px 35px #0003; }
.lab-page .lab-appearance-panel #xform3-theme-picker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; width: 100%; }
.lab-page .lab-appearance-panel #xform3-theme-picker .xform3-control-field { width: auto; grid-column: auto; }
.lab-page .lab-appearance-panel #xform3-theme-picker .xform3-theme-field { grid-column: 1 / -1; }
.lab-page .lab-appearance-panel #xform3-theme-picker #xform3-style-extensions > .xform3-control-field { grid-column: 1 / -1; }
.lab-page .lab-appearance-panel #xform3-theme-picker select { max-width: none; }
.lab-page .lab-appearance-panel #xform3-theme-picker :is(#suite-xf3-scenery-mode, #xform3-motion) { width: 100%; }
.lab-page .lab-appearance-panel > label { display: grid !important; grid-template-columns: 1fr 125px; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gui-line, var(--line)); }
.lab-page .lab-header .lab-main-nav { justify-content: flex-end; z-index: 4; border: 0; margin-top: 12px; overflow: visible; }
.lab-page .lab-main-nav .menu { justify-content: flex-end; flex-wrap: wrap; }
.lab-page .lab-main-nav .lab-menu-trigger { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; font: inherit; font-weight: 600; line-height: 1.3; background: color-mix(in srgb, var(--gui-nav-bg, var(--surface)) 90%, transparent) !important; color: var(--gui-nav-text, var(--ink)) !important; }
.lab-page .lab-main-nav .lab-menu-trigger::after { content: '⌄'; font-size: 12px; }
.lab-page .lab-main-nav .group.is-open > .lab-menu-trigger { background: var(--gui-nav-hover-bg, var(--surface)) !important; color: var(--gui-nav-hover-text, var(--ink)) !important; }
.lab-page .lab-main-nav .group > .sub { display: none; left: auto; right: 0; top: 100%; z-index: 50; max-height: min(65dvh, 520px); overflow: auto; box-shadow: 0 15px 40px #0004; }
.lab-page .lab-main-nav .group.is-open > .sub { display: block; }
@media (max-width: 680px) {
  .lab-page .lab-header { grid-template-columns: 1fr; min-height: 0; }
  .lab-page .lab-preferences { grid-column: 1; grid-row: 2; justify-content: flex-end; margin-top: 12px; }
  .lab-page .lab-preferences > label { flex: 0 1 auto; min-width: 65px; }
  .lab-page .lab-main-nav .menu { gap: 4px; }
  .lab-page .lab-main-nav .lab-menu-trigger { padding: 8px; font-size: 12px; gap: 4px; }
  .lab-page .lab-main-nav .group:first-child > .sub { left: 0; right: auto; }
}

/* Portal lettering and quiet, faceted storefront chrome. */
.lab-page .lab-brand { gap: 0; align-items: center; }
.lab-page .lab-brand img { width: 112px; height: 84px; object-fit: contain; }
.lab-page .lab-brand > span { margin-left: -2px; }
.lab-page .lab-wordmark { display: flex; align-items: baseline; gap: 3px; font-family: XF3Lufga, var(--gui-font-ui), sans-serif; font-size: 37px; font-weight: 600; letter-spacing: .025em; line-height: 1; color: var(--gui-text); }
.lab-page .lab-wordmark sup { position: relative; top: -3px; font-size: 51px; font-weight: 600; line-height: .9; color: var(--gui-blue); -webkit-text-stroke: .5px color-mix(in srgb, var(--gui-blue) 70%, var(--gui-text)); }
.lab-page .lab-brand small { margin-top: 7px; font-size: 9px; line-height: 1.2; letter-spacing: .17em; color: var(--gui-muted); }
.lab-page .lab-header { background: linear-gradient(125deg, var(--gui-panel), color-mix(in srgb, var(--gui-blue) 8%, var(--gui-panel)) 65%, color-mix(in srgb, var(--gui-green) 7%, var(--gui-panel))); border-bottom: 1px solid color-mix(in srgb, var(--gui-blue) 20%, transparent); }
.lab-page .lab-header .xf3-suite-header-scene { filter: contrast(1.3) saturate(1.45); }
.lab-page .lab-main-nav .lab-menu-trigger { padding: 9px 13px; gap: 8px; border: 1px solid color-mix(in srgb, var(--gui-blue) 24%, var(--gui-line)) !important; border-radius: 12px 4px 12px 4px; background: color-mix(in srgb, var(--gui-panel) 80%, transparent) !important; color: var(--gui-text) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gui-panel) 80%, transparent); font-size: 13px; letter-spacing: .015em; }
.lab-page .lab-menu-trigger::before { font-size: 15px; color: var(--gui-blue); line-height: 1; font-weight: 400; }
.lab-page .lab-menu-trigger[data-i18n="nav.info"]::before { content: '◇'; }
.lab-page .lab-menu-trigger[data-i18n="nav.order"]::before { content: '↗'; }
.lab-page .lab-menu-trigger[data-i18n="nav.account"]::before { content: '◎'; }
.lab-page .lab-menu-trigger[data-i18n="nav.contact"]::before { content: '✉'; }
.lab-page .lab-main-nav .group.is-open > .lab-menu-trigger { border-color: var(--gui-blue) !important; background: var(--gui-nav-hover-bg) !important; color: var(--gui-nav-hover-text) !important; }
.lab-page .lab-main-nav .group.is-open > .lab-menu-trigger::after { transform: rotate(180deg); }
.lab-page .lab-main-nav .group > .sub { padding: 9px; border: 1px solid color-mix(in srgb, var(--gui-blue) 28%, var(--gui-line)); border-radius: 14px 4px 14px 14px; background: linear-gradient(145deg, var(--gui-panel), color-mix(in srgb, var(--gui-panel-2) 50%, var(--gui-panel))); box-shadow: 0 18px 45px #0003, inset 0 1px 0 color-mix(in srgb, var(--gui-blue) 12%, transparent); scrollbar-width: thin; }
.lab-page .lab-main-nav .sub > li:not(.contact-item) > a { padding: 10px 13px; background: transparent !important; color: var(--gui-text) !important; border: 1px solid transparent; border-radius: 7px; font-size: 13px; }
.lab-page .lab-main-nav .sub > li:not(.contact-item) > a:hover,
.lab-page .lab-main-nav .sub > li:not(.contact-item) > a:focus-visible { background: var(--gui-nav-hover-bg) !important; color: var(--gui-nav-hover-text) !important; border-color: color-mix(in srgb, var(--gui-blue) 25%, transparent); }
.lab-page .lab-main-nav .sub-contact { width: 365px; max-width: calc(100vw - 32px); box-sizing: border-box; }
.lab-page .lab-main-nav .contact-item { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 9px 8px; margin: 5px 0; border: 1px solid color-mix(in srgb, var(--gui-line) 60%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--gui-panel) 76%, transparent); }
.lab-page .lab-contact-icon { align-self: start; margin-top: 17px; color: var(--gui-blue); font-size: 19px; text-align: center; }
.lab-page .lab-contact-detail { min-width: 0; }
.lab-page .lab-contact-detail small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--gui-muted); margin-bottom: 4px; }
.lab-page .lab-main-nav .lab-contact-detail a { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--gui-blue) 50%, var(--gui-line)); border-radius: 5px; color: var(--gui-blue) !important; background: color-mix(in srgb, var(--gui-blue) 5%, var(--gui-panel)) !important; font-size: 13px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.lab-page .lab-main-nav .lab-contact-detail a:hover { border-color: var(--gui-blue); text-decoration: underline; text-underline-offset: 3px; }
.lab-page .lab-main-nav .copy-btn { padding: 5px 6px; border-radius: 5px; font-size: 10px; background: transparent !important; color: var(--gui-muted) !important; border-color: var(--gui-line) !important; }
.lab-page .lab-main-nav .corp-lines { font-size: 10px; line-height: 1.7; padding: 4px 9px; }
.lab-page .lab-main-nav .divider { margin: 7px 3px; border-color: color-mix(in srgb, var(--gui-line) 60%, transparent); }
.lab-page .lab-footer a[href^="tel:"] { display: inline-block; border: 1px solid color-mix(in srgb, var(--gui-blue) 40%, var(--gui-line)); padding: 4px 9px; border-radius: 5px; font-variant-numeric: tabular-nums; }
.lab-page .lab-footer { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) minmax(160px,.65fr); align-items:start; }
.lab-page .lab-footer .xf3-made-in-canada { display:flex; align-items:flex-start; justify-content:center; min-width:0; }
.lab-page .lab-footer .xf3-made-in-canada img { display:block; width:min(100%,210px); height:auto; aspect-ratio:48.234/48.697; object-fit:contain; }
.lab-page .xf3-store-linkbar .xf3-contact-canada-flag { display:inline-block; width:27px; height:18px; margin-right:5px; object-fit:contain; vertical-align:-.22em; }
.lab-page .lab-footer .xf3-footer-canada-flag { display:inline-block; width:22px; height:auto; margin-right:3px; vertical-align:-.16em; }
@media(max-width:900px) and (min-width:601px) { .lab-page .lab-footer { grid-template-columns:repeat(2,minmax(0,1fr)); } .lab-page .lab-footer .xf3-made-in-canada { justify-content:flex-start; } }
@keyframes store-menu-arrive { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
html:not(.xf3-world-paused) .lab-page .group.is-open > .sub { animation: store-menu-arrive 160ms ease-out; }
@media (prefers-reduced-motion: reduce) { .lab-page .group.is-open > .sub { animation: none !important; } }
@media (max-width: 680px) {
  .lab-page .lab-brand img { width: 96px; height: 72px; }
  .lab-page .lab-wordmark { font-size: 32px; }
  .lab-page .lab-wordmark sup { font-size: 43px; }
  .lab-page .lab-main-nav .lab-menu-trigger { padding: 8px; font-size: 12px; gap: 4px; }
  .lab-page .lab-main-nav .lab-menu-trigger::before { display: none; }
}

/* The shared Realm wordmark uses a STORE neon sign in this header. */
.lab-page .lab-realm-store-brand { display:block; width:270px; height:84px; position:relative; }
.lab-page .lab-realm-store-brand > span { margin:0; }
.lab-page .lab-realm-store-brand .lab-brand-tagline { position:absolute; width:1px; height:1px; padding:0; margin:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.lab-page .lab-realm-store-brand .lab-brand-fallback { display:block; padding-top:22px; font-size:26px; }

/* Standalone store: a contained atelier with closely grouped header controls. */
html.xform3-themed body:has(.lab-page) { background:radial-gradient(ellipse at 0 12%,color-mix(in srgb,var(--gui-blue) 16%,transparent),transparent 48%),radial-gradient(ellipse at 100% 55%,color-mix(in srgb,var(--gui-green) 12%,transparent),transparent 52%),linear-gradient(150deg,var(--gui-panel-2),var(--gui-bg) 48%,var(--gui-panel-2)); background-attachment:fixed; }
html.xform3-themed .lab-page { max-width:1120px; box-sizing:border-box; margin:0 auto; padding:0 24px 36px; background:linear-gradient(120deg,color-mix(in srgb,var(--gui-panel) 64%,transparent),color-mix(in srgb,var(--gui-panel-2) 54%,transparent)); box-shadow:0 0 80px color-mix(in srgb,var(--gui-blue) 5%,transparent); }
.lab-page .lab-header { grid-template-columns:270px minmax(0,1fr); grid-template-rows:auto auto; column-gap:20px; row-gap:8px; align-items:end; min-height:0; margin:0 -24px; padding:12px 24px 13px; background:linear-gradient(115deg,color-mix(in srgb,var(--gui-panel) 70%,transparent),color-mix(in srgb,var(--gui-blue) 6%,var(--gui-panel))); }
.lab-page .lab-realm-store-brand { grid-column:1; grid-row:1/3; align-self:center; width:270px; height:88px; }
.lab-page .lab-realm-store-brand .xf3-brand-component { height:88px; }
.lab-page .lab-header .lab-preferences { grid-column:2; grid-row:1; margin:0; align-self:end; gap:8px; }
.lab-page .lab-header .lab-main-nav { grid-column:2; grid-row:2; align-self:start; margin:0; padding:0; }
.lab-page .lab-main-nav .menu { gap:6px; }
.lab-page .lab-main-nav .lab-menu-trigger { padding:7px 11px; border-radius:7px!important; font-size:12px; font-weight:500; background:color-mix(in srgb,var(--gui-panel) 58%,transparent)!important; box-shadow:none; }
.lab-page .lab-header .xf3-suite-header-scene { opacity:.32; filter:saturate(.65); }
.lab-page .lab-header::before { background:linear-gradient(90deg,color-mix(in srgb,var(--gui-panel) 70%,transparent),transparent 75%); }
.lab-page .lab-workspace { padding-top:18px; }
.lab-page .xf3v2__form { background:color-mix(in srgb,var(--gui-panel) 66%,transparent); border:1px solid color-mix(in srgb,var(--gui-line) 50%,transparent); border-radius:14px; padding:16px; }
.lab-page .xf3v2__summary { background:linear-gradient(115deg,color-mix(in srgb,var(--gui-blue) 9%,var(--gui-panel)),color-mix(in srgb,var(--gui-panel) 72%,transparent)); border:1px solid color-mix(in srgb,var(--gui-line) 55%,transparent); border-radius:12px; padding:14px 16px; }
.lab-page .lab-viewer-toolbar { background:transparent; }
.lab-page .lab-specs { padding:24px 0; border-top:1px solid color-mix(in srgb,var(--gui-blue) 16%,transparent); }
.lab-page .lab-specs article { background:color-mix(in srgb,var(--gui-panel) 52%,transparent); border-radius:12px; padding:18px; border:1px solid color-mix(in srgb,var(--gui-line) 40%,transparent); }
.lab-page .lab-footer { border-color:color-mix(in srgb,var(--gui-blue) 24%,transparent); background:linear-gradient(130deg,transparent,color-mix(in srgb,var(--gui-blue) 7%,transparent)); border-radius:16px; padding:24px 18px; }
@media(max-width:780px) {
 .lab-page .lab-header { grid-template-columns:1fr; gap:10px; }
 .lab-page .lab-realm-store-brand { grid-column:1; grid-row:1; }
 .lab-page .lab-header .lab-preferences { grid-column:1; grid-row:2; justify-content:flex-end; }
 .lab-page .lab-header .lab-main-nav { grid-column:1; grid-row:3; }
}
@media(max-width:480px) {
 html.xform3-themed .lab-page { padding:0 14px 24px; }
 .lab-page .lab-header { margin:0 -14px; padding:10px 14px; }
 .lab-page .lab-header .lab-preferences { gap:6px; }
 .lab-page .lab-preferences > label { min-width:60px; }
 .lab-page .lab-main-nav .lab-menu-trigger { padding:7px 8px; font-size:11px; }
 .lab-page .lab-main-nav .menu { gap:5px; }
 .lab-page .xf3v2__form { padding:12px; }
}
/* Translucent acrylic sheets and botanical contours continue around the page. */
html.xform3-themed body:has(.lab-page) { background-image:radial-gradient(ellipse at 0 12%,color-mix(in srgb,var(--gui-blue) 22%,transparent),transparent 52%),radial-gradient(ellipse at 100% 55%,color-mix(in srgb,var(--gui-green) 16%,transparent),transparent 56%),url('./xf3-store-atmosphere.svg'),linear-gradient(150deg,var(--gui-panel-2),var(--gui-bg) 48%,var(--gui-panel-2))!important; background-size:auto,auto,cover,auto!important; background-position:center!important; background-attachment:fixed!important; }
html.xform3-themed .lab-page { background:linear-gradient(120deg,color-mix(in srgb,var(--gui-panel) 52%,transparent),color-mix(in srgb,var(--gui-panel-2) 38%,transparent)); }
.lab-page .lab-viewer-toolbar button { background:var(--gui-panel)!important; color:var(--gui-text)!important; border:1px solid var(--gui-line); border-radius:6px; }
.lab-page .lab-viewer-toolbar .lab-view-modes button[aria-pressed=true] { background:var(--gui-button-bg)!important; color:var(--gui-button-text)!important; border-color:var(--gui-button-bg); }

/* Self-describing preference options free the caption row. */
.lab-page .lab-preferences > label > [data-pref-caption] { display:none!important; }
.lab-page .lab-preferences > label { min-width:0; max-width:none; gap:0; }
.lab-page .lab-preferences > label select { width:100%; max-width:none; }
.lab-page .lab-preferences > label:has([data-lab-units]) { width:128px; }
.lab-page .lab-preferences > label:has([data-lab-currency]) { width:119px; }
.lab-page .lab-preferences > label:has([data-lab-language]) { width:170px; }
@media(min-width:980px) {
 .lab-page .lab-header { grid-template-rows:32px 32px; align-items:start; }
 .lab-page .lab-header .lab-preferences { align-self:start; }
}
@media(max-width:480px) {
 .lab-page .lab-preferences > label:has([data-lab-units]) { width:115px; }
 .lab-page .lab-preferences > label:has([data-lab-currency]) { width:110px; }
 .lab-page .lab-preferences > label:has([data-lab-language]) { width:160px; }
}

/* Text Size scales every header control and menu, with room to reflow. */
.lab-page .lab-preferences,
.lab-page .lab-appearance { font-size:calc(11px * var(--lab-scale,1)); }
.lab-page .lab-header .lab-preferences select,
.lab-page .lab-appearance > summary,
.lab-page #xform3-theme-picker :is(select,button,.xform3-control-name),
.lab-page .lab-appearance-panel > label { font-size:calc(11px * var(--lab-scale,1))!important; }
.lab-page .lab-header .lab-preferences select,
.lab-page .lab-appearance > summary,
.lab-page #xform3-theme-picker :is(select,button) { height:auto; min-height:calc(30px * var(--lab-scale,1)); line-height:1.3; }
.lab-page .lab-preferences > label:has([data-lab-units]) { width:calc(128px * var(--lab-scale,1)); max-width:100%; }
.lab-page .lab-preferences > label:has([data-lab-currency]) { width:calc(119px * var(--lab-scale,1)); max-width:100%; }
.lab-page .lab-preferences > label:has([data-lab-language]) { width:calc(170px * var(--lab-scale,1)); max-width:100%; }
.lab-page .lab-main-nav .lab-menu-trigger { font-size:calc(12px * var(--lab-scale,1))!important; line-height:1.3; }
.lab-page .lab-main-nav .sub > li:not(.contact-item) > a,
.lab-page .lab-main-nav .lab-contact-detail a { font-size:calc(13px * var(--lab-scale,1))!important; }
.lab-page .lab-contact-detail small,
.lab-page .lab-main-nav .copy-btn,
.lab-page .lab-main-nav .corp-lines { font-size:calc(10px * var(--lab-scale,1))!important; }
.lab-page .lab-contact-icon { font-size:calc(19px * var(--lab-scale,1)); }
.lab-page .lab-menu-trigger::before { font-size:calc(15px * var(--lab-scale,1)); }
.lab-page .lab-menu-trigger::after,
.lab-page .lab-appearance > summary::after { font-size:calc(12px * var(--lab-scale,1)); }
.lab-page .lab-main-nav .group > .sub { min-width:min(calc(230px * var(--lab-scale,1)),calc(100vw - 36px)); max-width:calc(100vw - 36px); }
.lab-page .lab-main-nav .sub-contact { width:calc(365px * var(--lab-scale,1)); }
.lab-page .lab-main-nav .contact-item { grid-template-columns:calc(25px * var(--lab-scale,1)) minmax(0,1fr) auto; }
.lab-page .lab-main-nav .lab-contact-detail a { white-space:normal; overflow-wrap:anywhere; }
.lab-page .lab-appearance-panel { width:calc(310px * var(--lab-scale,1)); }
.lab-page .lab-appearance-panel > label { grid-template-columns:minmax(0,1fr) minmax(0,calc(125px * var(--lab-scale,1))); }
@media(min-width:980px) {
 .lab-page .lab-header { grid-template-rows:minmax(calc(32px * var(--lab-scale,1)),auto) minmax(calc(32px * var(--lab-scale,1)),auto); }
}

/* Roomier standalone store and naturally sized navigation flyouts. */
html.xform3-themed .lab-page { width:calc(100% - 40px); max-width:1480px; }
.lab-page .lab-header { grid-template-columns:290px minmax(0,1fr); }
.lab-page .lab-preferences > label:has([data-lab-language]) { width:calc(218px * var(--lab-scale,1)); flex:0 0 auto; max-width:100%; }
.lab-page .lab-preferences > label:has([data-lab-units]),
.lab-page .lab-preferences > label:has([data-lab-currency]) { flex-shrink:0; }
.lab-page .lab-main-nav .group > .sub { max-height:none!important; overflow:visible!important; }
.lab-page .lab-main-nav .group > .sub > li { overflow:visible; }
@media(max-width:780px) {
 .lab-page .lab-header { grid-template-columns:1fr; }
}
@media(max-width:600px) {
 html.xform3-themed .lab-page { width:100%; }
}

/* Soft acrylic controls pair their hover surface with the readable theme ink. */
html.xform3-themed .lab-page {
  --gui-button-bg: color-mix(in srgb, var(--gui-blue) 30%, var(--gui-panel));
  --gui-button-text: var(--gui-text);
  --gui-button-hover-bg: color-mix(in srgb, var(--gui-blue) 40%, var(--gui-panel));
  --gui-button-border: color-mix(in srgb, var(--gui-blue) 48%, var(--gui-line));
  --gui-nav-hover-bg: color-mix(in srgb, var(--gui-blue) 18%, var(--gui-panel));
  --gui-nav-hover-text: var(--gui-text);
}
html.xform3-themed .lab-page button:not(:disabled):is(:hover,:focus-visible) {
  background: var(--gui-button-hover-bg)!important;
  color: var(--gui-button-text)!important;
  border-color: var(--gui-button-border)!important;
}
html.xform3-themed .lab-page .xf3v2__chips button {
  color: var(--gui-text);
  transition: background-color .15s ease, border-color .15s ease;
}

/* One continuous sky-to-foothills setting, with readable acrylic working surfaces. */
html.xform3-themed body:has(.lab-page) {
  background-image:url('./xf3-store-sky.svg'),url('./xf3-store-horizon.svg'),linear-gradient(180deg,color-mix(in srgb,var(--gui-blue) 18%,var(--gui-bg)),var(--gui-bg) 42%,color-mix(in srgb,var(--gui-green) 15%,var(--gui-bg)))!important;
  background-size:100% auto,100% auto,100% 100%!important;
  background-position:center top,center bottom,center!important;
  background-repeat:no-repeat!important;
  background-attachment:scroll!important;
}
html.xform3-themed .lab-page { background:transparent; box-shadow:none; }
html.xform3-themed .lab-page .lab-header { background:color-mix(in srgb,var(--gui-panel) 30%,transparent); grid-template-rows:auto auto; }
.lab-page .lab-header::before { background:none; }
.lab-page .lab-header .xf3-suite-header-scene { opacity:.14; }
.lab-page .lab-header .lab-preferences { flex-wrap:wrap; min-width:0; }
.lab-page .lab-main-nav .lab-menu-trigger::before { content:none; display:none; }
.lab-page .lab-main-nav .lab-menu-trigger { font-size:calc(14px * var(--lab-scale,1))!important; padding:.55em .9em; gap:.5em; }
html.xform3-themed .lab-page :is(.xf3v2__form,.xf3v2__summary,.lab-cart-pane,.lab-chat-pane) { background:color-mix(in srgb,var(--gui-panel) 88%,transparent); }
.lab-page .lab-specs article { background:color-mix(in srgb,var(--gui-panel) 82%,transparent); }
.lab-page .lab-footer { background:color-mix(in srgb,var(--gui-panel) 84%,transparent); margin-bottom:clamp(130px,17vw,280px); }
.lab-page .lab-preview-note { display:inline-block; background:color-mix(in srgb,var(--gui-panel) 82%,transparent); padding:8px 10px; border-radius:8px; }

/* Let text determine row height, including the newer quantity/purchase group. */
html.xform3-themed .lab-page .xf3v2__summary { display:flex; flex-flow:row wrap; align-items:center; gap:12px 16px; }
html.xform3-themed .lab-page .xf3v2__summary h2 { flex:1 1 12ch; font-size:1.45em; white-space:normal; overflow-wrap:anywhere; margin:0; }
html.xform3-themed .lab-page .lab-summary-purchase { flex:0 1 auto; display:flex; flex-wrap:wrap; gap:10px; max-width:100%; }
html.xform3-themed .lab-page .lab-summary-quantity { flex:0 0 auto; }
html.xform3-themed .lab-page .lab-summary-quantity input { width:4em; }
html.xform3-themed .lab-page .xf3v2__summary .xf3v2__price { flex:1 1 12em; white-space:normal; }
html.xform3-themed .lab-page .xf3v2__summary .xf3v2__price strong { font-size:1.45em; }
html.xform3-themed .lab-page .lab-volume-tiers { flex:1 1 16em; flex-wrap:wrap; overflow:visible; justify-content:flex-start; white-space:normal; gap:6px 10px; }
html.xform3-themed .lab-page .lab-shipping-preview { flex:1 1 100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
html.xform3-themed .lab-page .lab-shipping-preview>label { grid-column:1/-1; grid-row:auto; }
html.xform3-themed .lab-page .lab-shipping-preview>input { grid-column:auto; grid-row:auto; padding:.55em .7em; }
html.xform3-themed .lab-page .lab-shipping-preview :is(fieldset,[data-shipping-message]) { grid-column:1/-1; grid-row:auto; }
html.xform3-themed .lab-page .xf3v2__summary :is(.xf3v2__quote-state,.xf3v2__safety) { flex-basis:100%; }
html.xform3-themed .lab-page .xf3v2__dimensions label { grid-template-columns:minmax(0,1fr); gap:7px; }
html.xform3-themed .lab-page .xf3v2__dimensions label>.lab-dimension-label { grid-column:1; grid-row:1; }
html.xform3-themed .lab-page .xf3v2__dimensions input[type=number] { grid-column:1; grid-row:2; }
html.xform3-themed .lab-page .xf3v2__dimensions input[type=range] { grid-column:1; grid-row:3; }
html.xform3-themed .lab-page .lab-dimension-limits { white-space:normal; }
html.xform3-themed .lab-page :is(.lab-cart-line-actions,.lab-cart-pane,.lab-order-tabs-main)>button,
html.xform3-themed .lab-page .lab-cart-line-actions button { padding:.55em .85em; line-height:1.35; min-height:2.4em; border-radius:8px; }
html.xform3-themed .lab-page .lab-cart-line-actions { gap:12px; }
html.xform3-themed .lab-page .lab-cart-line-actions button+button { margin-left:0; }
html.xform3-themed .lab-page .lab-cart-specs>div { flex-wrap:wrap; }
html.xform3-themed .lab-page .lab-cart-specs dt { flex-shrink:1; }
@media(max-width:600px) {
 .lab-page .lab-footer { grid-template-columns:1fr; }
 html.xform3-themed .lab-page .xf3v2__dimensions { grid-template-columns:1fr; }
 html.xform3-themed .lab-page .lab-header .lab-preferences { justify-content:flex-start; }
}
/* Feather the retained shelf illustration into the surrounding landscape. */
.lab-page .lab-viewer {
  border-radius:0;
  mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);
  mask-composite:intersect;
}

/* Translucent acrylic fascia: intentionally overrides the suite's opaque header reset. */
html.xform3-themed .lab-page .lab-header {
  background:linear-gradient(115deg,color-mix(in srgb,var(--gui-blue) 17%,transparent),color-mix(in srgb,var(--gui-panel) 25%,transparent) 48%,color-mix(in srgb,var(--gui-green) 12%,transparent))!important;
  backdrop-filter:blur(8px) saturate(1.15);
  border-bottom:1px solid color-mix(in srgb,var(--gui-panel) 70%,var(--gui-blue))!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--gui-panel) 80%,transparent),0 6px 20px color-mix(in srgb,var(--gui-blue) 7%,transparent);
}
.lab-page .lab-header::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:1; background:linear-gradient(118deg,transparent 19%,color-mix(in srgb,var(--gui-panel) 25%,transparent) 19.2%,transparent 32%,transparent 78%,color-mix(in srgb,var(--gui-panel) 18%,transparent) 78.2%,transparent 91%); }
html.xform3-themed .lab-page .lab-main-nav .lab-menu-trigger,
html.xform3-themed .lab-page .lab-preferences select,
html.xform3-themed .lab-page .lab-appearance>summary { background:color-mix(in srgb,var(--gui-panel) 52%,transparent)!important; }
html.xform3-themed .lab-page .lab-main-nav .group.is-open>.lab-menu-trigger { background:var(--gui-nav-hover-bg)!important; }
.lab-page .lab-preferences>label:has([data-lab-language]) { width:calc(170px * var(--lab-scale,1)); }
@supports(field-sizing:content) {
 .lab-page .lab-preferences>label:has([data-lab-language]) { width:auto; min-width:0; }
 .lab-page .lab-header .lab-preferences [data-lab-language] { field-sizing:content; width:auto; min-width:0; max-width:100%; padding-inline-end:26px; }
}
html.xform3-themed .lab-page .lab-appearance { background:transparent!important; }

/* Configurator hierarchy: legible titles and generous, clearly selected samples. */
html.xform3-themed .lab-page .xf3v2__option>label,
html.xform3-themed .lab-page .xf3v2__dimensions label>.lab-dimension-label,
html.xform3-themed .lab-page .lab-mounting-holes-section>h3 {
 font-size:calc(17px * var(--lab-scale,1)); font-weight:650; line-height:1.3;
 color:var(--gui-text); margin-bottom:9px; letter-spacing:-.015em;
}
html.xform3-themed .lab-page .lab-dimension-limits { font-size:.76em; line-height:1.5; font-weight:450; color:var(--gui-text); opacity:.8; }
html.xform3-themed .lab-page .xf3v2__form>fieldset:first-of-type legend { font-size:calc(15px * var(--lab-scale,1)); color:var(--gui-text); }
html.xform3-themed .lab-page .lab-visual-picks { gap:8px; grid-template-columns:repeat(auto-fit,minmax(min(100%,85px),1fr)); }
html.xform3-themed .lab-page .lab-visual-picks button { font-size:calc(13px * var(--lab-scale,1)); font-weight:500; min-height:94px; padding:10px 6px; gap:8px; border-radius:9px; border-color:color-mix(in srgb,var(--gui-text) 36%,var(--gui-panel)); background:var(--gui-panel); }
html.xform3-themed .lab-page .lab-visual-picks button[aria-pressed=true] { background:color-mix(in srgb,var(--gui-blue) 16%,var(--gui-panel)); border:2px solid var(--gui-blue); padding:9px 5px; box-shadow:inset 0 -3px 0 var(--gui-blue); font-weight:700; }
html.xform3-themed .lab-page .lab-visual-icon { width:68px; height:46px; }
html.xform3-themed .lab-page .lab-visual-caption { line-height:1.35; }
html.xform3-themed .lab-page .lab-feature-note-toggle { font-size:calc(12px * var(--lab-scale,1)); padding:5px 8px; }
html.xform3-themed .lab-page .lab-feature-settings { font-size:calc(13px * var(--lab-scale,1)); }
html.xform3-themed .lab-page .xf3v2__option { margin-bottom:24px; }
html.xform3-themed .lab-page .lab-workspace + .xf3-suite-interior { float:none; width:100%; max-width:none; height:clamp(230px,25vw,350px); max-height:none; margin:14px 0 0; opacity:1; }
@media(min-width:901px) { .lab-page .lab-preview-column { position:relative; top:auto; } }
@media(max-width:600px) { html.xform3-themed .lab-page .lab-visual-picks { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Keep the detailed garden visible beside the product in every scenery palette. */
html.xform3-themed .lab-page .lab-workspace + .xf3-suite-interior .xf3-landscape-art .xf3-botanical { display:inline!important; opacity:1!important; }
html.xform3-themed .lab-page .lab-workspace + .xf3-suite-interior .xf3-decor-props { opacity:.25; }
html.xform3-themed .lab-page .lab-workspace + .xf3-suite-interior .xf3-habitat { height:100%; }

/* The pinned toolbar keeps the sky visible beneath its glass surfaces. */
html.xform3-themed .lab-page .lab-sticky-top { background:color-mix(in srgb,var(--gui-panel) 28%,transparent); backdrop-filter:blur(8px); }
html.xform3-themed .lab-page .lab-workspace + .xf3-suite-interior .xf3-landscape-art { filter:none; }
/* Readable toolbar lettering with restrained surfaces. */
html.xform3-themed .lab-page .lab-header .lab-preferences select,
html.xform3-themed .lab-page .lab-appearance>summary { font-size:calc(13px * var(--lab-scale,1))!important; font-weight:600; color:var(--gui-text); }
html.xform3-themed .lab-page .lab-main-nav .lab-menu-trigger { font-size:calc(16px * var(--lab-scale,1))!important; font-weight:600; }
.lab-page .lab-preferences>label:has([data-lab-units]) { width:calc(151px * var(--lab-scale,1)); }
.lab-page .lab-preferences>label:has([data-lab-currency]) { width:calc(138px * var(--lab-scale,1)); }
html.xform3-themed .lab-page .lab-header { background:linear-gradient(110deg,color-mix(in srgb,var(--gui-blue) 22%,transparent),color-mix(in srgb,var(--gui-panel) 8%,transparent) 55%,color-mix(in srgb,var(--gui-blue) 14%,transparent))!important; }
html.xform3-themed .lab-page .lab-sticky-top { background:color-mix(in srgb,var(--gui-panel) 10%,transparent); backdrop-filter:blur(3px); }
.lab-page .lab-header::before { background:url('./xf3-store-sun.svg') center / cover no-repeat; opacity:1; }
html.xform3-themed .lab-page .lab-workspace + .xf3-suite-interior { position:relative; isolation:isolate; }
html.xform3-themed .lab-page .lab-workspace + .xf3-suite-interior::before { content:""; position:absolute; inset:-20px -15px 0; background:url('./xf3-store-night.svg') center top / 100% 100% no-repeat; pointer-events:none; z-index:-1; }
html.xform3-themed .lab-page .lab-workspace + .xf3-suite-interior .xf3-sky { filter:contrast(1.12) saturate(1.1); }
@media(max-width:850px) { .lab-page .lab-header::before { background-size:auto 140px; background-position:center top; } }
.lab-page .lab-preferences>label:has([data-lab-units]) { width:calc(177px * var(--lab-scale,1)); }
.lab-page .lab-preferences>label:has([data-lab-currency]) { width:calc(146px * var(--lab-scale,1)); }
/* Frost only the content behind the pinned controls, not the drawn sky. */
html.xform3-themed .lab-page .lab-sticky-top { background:color-mix(in srgb,var(--gui-panel) 38%,transparent); backdrop-filter:blur(18px) saturate(1.2); }
@media(max-width:850px) { .lab-page .lab-header::before { background-position:100px top; } }
/* The atelier photograph carries the masthead imagery, while the UI stays in place. */
html.xform3-themed .lab-page .lab-header { background:var(--gui-panel)!important; }
.lab-page .lab-header::before { background:linear-gradient(90deg,color-mix(in srgb,var(--gui-panel) 94%,transparent),color-mix(in srgb,var(--gui-panel) 78%,transparent) 23%,transparent 37%,transparent 63%,color-mix(in srgb,var(--gui-panel) 20%,transparent)),url('./xf3-atelier-gallery-v2.png') center 48% / cover no-repeat; }
.lab-page .lab-header::after { background:none; }
.lab-page .lab-header .xf3-suite-header-scene { opacity:0; }
html.xform3-themed body:has(.lab-page) { background-image:linear-gradient(180deg,transparent 0, color-mix(in srgb,var(--gui-bg) 20%,transparent) 250px,var(--gui-bg) 900px),url('./xf3-atelier-gallery-v2.png'),url('./xf3-store-horizon.svg'),linear-gradient(180deg,var(--gui-bg),color-mix(in srgb,var(--gui-green) 15%,var(--gui-bg)))!important; background-size:100% 900px,100% auto,100% auto,100% 100%!important; background-position:center top,center top,center bottom,center!important; background-repeat:no-repeat!important; }
@media(max-width:850px) { .lab-page .lab-header::before { background-position:center,52% center; background-size:cover; } }
/* Give the gallery one uninterrupted masthead, without repeating it below. */
html.xform3-themed body:has(.lab-page) { background-image:url('./xf3-store-horizon.svg'),radial-gradient(ellipse at 25% 0,color-mix(in srgb,var(--gui-blue) 28%,var(--gui-panel)),transparent 55%),linear-gradient(180deg,var(--gui-panel-2),var(--gui-bg) 60%,color-mix(in srgb,var(--gui-green) 15%,var(--gui-bg)))!important; background-size:100% auto,100% 900px,100% 100%!important; background-position:center bottom,center top,center!important; }
.lab-page .lab-header { padding-bottom:49px; }
.lab-page .lab-header::before { background-image:linear-gradient(90deg,color-mix(in srgb,var(--gui-panel) 95%,transparent),color-mix(in srgb,var(--gui-panel) 78%,transparent) 23%,transparent 37%,transparent 63%,color-mix(in srgb,var(--gui-panel) 28%,transparent)),url('./xf3-atelier-gallery-v2.png'); background-position:center,center 46%; background-size:cover; }
html.xform3-themed .lab-page .lab-main-nav .lab-menu-trigger,
html.xform3-themed .lab-page .lab-header .lab-preferences select,
html.xform3-themed .lab-page .lab-appearance>summary { background:color-mix(in srgb,var(--gui-panel) 88%,transparent)!important; }
@media(max-width:850px) { .lab-page .lab-header { padding-bottom:26px; } .lab-page .lab-header::before { background-position:center,center; } }
@media(max-width:850px) {
 .lab-page .lab-header::before { background-image:linear-gradient(90deg,color-mix(in srgb,var(--gui-panel) 96%,transparent),color-mix(in srgb,var(--gui-panel) 87%,transparent) 300px,transparent 425px),url('./xf3-atelier-gallery-v2.png'); }
}
/* Continuous retained-vector world. Header, middle and foreground share one canvas. */
html.xform3-themed body:has(.lab-page) { position:relative; isolation:isolate; background-image:linear-gradient(180deg,color-mix(in srgb,var(--gui-blue) 38%,var(--gui-panel)) 0%,color-mix(in srgb,var(--gui-blue) 17%,var(--gui-bg)) 29%,var(--gui-bg) 52%,color-mix(in srgb,var(--gui-green) 24%,var(--gui-bg)) 83%,color-mix(in srgb,var(--gui-green) 42%,var(--gui-panel)))!important; background-size:100% 100%!important; }
html.xform3-themed .lab-page { position:relative; z-index:1; background:transparent!important; }
html.xform3-themed .lab-page .lab-header { background:transparent!important; padding-bottom:13px; border:0!important; box-shadow:none; backdrop-filter:none; }
.lab-page .lab-header::before,.lab-page .lab-header::after { content:none!important; background:none!important; }
html.xform3-themed .lab-page .lab-sticky-top { background:color-mix(in srgb,var(--gui-panel) 17%,transparent); backdrop-filter:none; }
html.xform3-themed .lab-page .lab-specs { border:0; }
html.xform3-themed .lab-page .lab-specs>div { grid-template-columns:repeat(3,minmax(0,1fr)); }
html.xform3-themed .lab-page .lab-specs article { background:color-mix(in srgb,var(--gui-panel) 87%,transparent); }
html.xform3-themed .lab-page .lab-footer { margin-bottom:clamp(230px,29vw,400px); }
html.xform3-themed .lab-page .lab-viewer { background:transparent!important; mask-image:none; }
@media(max-width:780px) { html.xform3-themed .lab-page .lab-specs>div { grid-template-columns:1fr; } }

/* A soft open viewing area protects the acrylic edges without making a picture box. */
html.xform3-themed .lab-page .lab-viewer { background:radial-gradient(ellipse at 50% 48%,color-mix(in srgb,var(--gui-panel) 52%,transparent),transparent 71%)!important; }
/* Fine daylight sky spans the store behind the transparent Realm scenery. */
html.xform3-themed body:has(.lab-page) {
 background-image:url('./xf3-store-sky.svg'),linear-gradient(180deg,color-mix(in srgb,var(--gui-blue) 38%,var(--gui-panel)) 0%,color-mix(in srgb,var(--gui-blue) 17%,var(--gui-bg)) 29%,var(--gui-bg) 52%,color-mix(in srgb,var(--gui-green) 24%,var(--gui-bg)) 83%,color-mix(in srgb,var(--gui-green) 42%,var(--gui-panel)))!important;
 background-size:100% auto,100% 100%!important;
 background-position:center top,center!important;
 background-repeat:no-repeat!important;
}
/* Shopify's Refresh main wrapper otherwise paints over the Store scenery. */
html.xform3-themed body:has(.lab-page) #MainContent { background: transparent !important; }