/* L2: individually interactive product, actual photograph shared with its hero. */
.ui-lab-product{position:relative;display:flex;align-items:flex-end;justify-content:center;min-width:0;min-height:0;width:100%;height:100%;padding:0 var(--space-xs);border:0;background:transparent;color:var(--ink);isolation:isolate;transition:opacity var(--motion-fast)}
.ui-lab-product::before{content:'';position:absolute;inset:auto var(--space-sm) 0;height:var(--space-sm);background:color-mix(in oklab,var(--ink) 9%,transparent);border-radius:50%;filter:blur(var(--space-xs));z-index:-1}
.ui-lab-product__photo{width:100%;height:100%;min-height:0;object-fit:contain;object-position:center bottom;filter:var(--lab-white-filter) var(--lab-photo-shadow);opacity:var(--lab-white-opacity);transform-origin:center bottom;transition:filter var(--motion-normal),transform var(--motion-normal),opacity var(--motion-normal)}
.ui-lab-product.is-active:not(:disabled){z-index:var(--z-tooltip)}
.ui-lab-product.is-active:not(:disabled) .ui-lab-product__photo,.ui-lab-product.is-source .ui-lab-product__photo{filter:var(--lab-photo-shadow);opacity:1;transform:translateY(calc(-1 * var(--lab-hover-lift))) scale(var(--lab-hover-scale))}
.ui-lab-product:focus-visible{outline-offset:var(--space-xs);border-radius:var(--radius-sm)}
.ui-lab-product__tooltip{position:absolute;left:50%;bottom:calc(100% + var(--lab-tooltip-gap));width:var(--lab-tooltip-width);display:grid;overflow:hidden;background:var(--lab-card-surface);color:var(--lab-card-ink);box-shadow:var(--lab-card-shadow);border-radius:var(--lab-card-radius);text-align:left;opacity:0;visibility:hidden;transform:translate(-50%,var(--space-xs));pointer-events:none;font-size:var(--text-sm);line-height:var(--leading-heading);z-index:var(--z-tooltip)}
.ui-lab-product__preview {
  display: block;
  height: var(--lab-tooltip-photo-height);
  padding: var(--space-sm);
  background: var(--lab-card-photo);
}
.ui-lab-product__preview img{width:100%;height:100%;object-fit:contain;filter:var(--lab-photo-shadow)}
.ui-lab-product__info{display:grid;gap:var(--space-xs);padding:var(--space-md)}
.ui-lab-product__info small{font-size:var(--text-xs);color:var(--lab-card-muted)}
.ui-lab-product__info>strong{font-size:1.125rem;font-weight:var(--weight-title);letter-spacing:-.025em;word-break:keep-all}
.ui-lab-product__summary{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-xs);
  margin-top:var(--space-xs);padding-block:var(--space-xs)
}
.ui-lab-product__summary strong{font-size:var(--text-md);font-variant-numeric:tabular-nums;color:var(--lab-card-accent);white-space:nowrap}
.ui-lab-product.is-active:not(:disabled) .ui-lab-product__tooltip{opacity:1;visibility:visible;transform:translate(-50%,0)}
.ui-lab-product__scene{display:none}
.ui-lab-product-demo{width:var(--product-reel-width);height:var(--detail-image-height);padding:var(--space-4xl) var(--space-2xl);background:var(--lab-wall)}
.ui-lab-family-card {
  display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: var(--space-sm);
  min-width: 0; min-height: var(--lab-list-card-height); overflow: hidden;
  padding: var(--space-md);
  border: 0; border-radius: var(--product-card-radius);
  background: var(--lab-family-studio-surface); color: var(--lab-card-ink); box-shadow: var(--product-card-shadow);
  font: inherit; text-align: start; text-decoration: none; cursor: pointer;
}
.ui-lab-family-card__copy { display: grid; gap: var(--space-xs); }
.ui-lab-family-card__copy small, .ui-lab-family-card__copy > span {
  color: var(--lab-card-muted); font-size: var(--text-xs); font-weight: var(--weight-strong);
}
.ui-lab-family-card__copy strong {
  font-size: var(--text-lg); font-weight: var(--weight-title); line-height: var(--leading-heading); word-break: keep-all;
}
.ui-lab-family-card__features { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.ui-lab-family-card__features > span {
  padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-round);
  background: color-mix(in srgb,var(--surface) 55%,transparent); color: var(--lab-card-ink);
}
.ui-lab-family-card__features > .ui-lab-family-card__feature--planned {
  background: transparent; box-shadow: inset 0 0 0 var(--border) currentColor; color: var(--lab-card-muted);
}
.ui-lab-family-card__photo { position: relative; }
.ui-lab-family-card__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: var(--space-xs) var(--space-sm);
  object-fit: contain; filter: var(--lab-photo-shadow) grayscale(1);
}
.ui-lab-family-card__action {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  min-height: var(--control-sm); padding-inline: var(--space-md);
  border: var(--border) solid var(--lab-card-accent); border-radius: var(--product-card-radius);
  color: var(--lab-card-accent); font-size: var(--text-sm); font-weight: var(--weight-strong);
}
.ui-lab-family-card:is(:hover,:focus-visible) .ui-lab-family-card__action { background: var(--lab-card-selected); }
.ui-lab-family-card__action .icon { width: 15px; height: 15px; }
.ui-lab-family-card-demo { display: grid; width: min(100%,var(--product-card-width)); }
.ui-lab-hero{margin:0;display:flex;flex-direction:column;min-height:0;height:100%;align-items:center;gap:var(--space-md);padding:var(--space-xl) var(--space-3xl) var(--space-md)}
.ui-lab-hero__media{position:relative;flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.ui-lab-hero__media>img{width:100%;height:100%;object-fit:contain;filter:var(--lab-photo-shadow)}
.ui-lab-hero figcaption{display:flex;flex:none;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-sm);font-size:var(--text-md)}
.ui-lab-hero__price{font-size:var(--text-lg);font-variant-numeric:tabular-nums}
.ui-lab-hero__capacity,.ui-product-card__capacity{padding-inline:var(--space-sm);border-radius:var(--radius-round);background:var(--page-background);color:var(--muted);font-size:var(--text-xs);font-weight:var(--weight-body)}
.ui-lab-hero__failure{position:absolute;background:var(--surface);padding:var(--space-md);font-size:var(--text-sm)}
.ui-product-card--selection{position:relative;overflow:hidden;border:0;border-radius:var(--lab-card-radius);background:var(--lab-card-surface);color:var(--lab-card-ink);box-shadow:var(--lab-card-shadow);height:100%;min-width:0}
.ui-product-card--selection.is-selected{background:var(--lab-card-selected)}
.ui-product-card--selection.is-selected::after{content:'';position:absolute;inset:0;border:1px solid var(--lab-card-accent);border-radius:inherit;pointer-events:none}
.ui-product-card--selection .ui-product-card__image{height:calc(var(--lab-card-photo-height) + 2 * var(--space-xs));padding:var(--space-xs) 0;background:var(--lab-card-photo);border-radius:0;min-height:0;aspect-ratio:auto}
.ui-product-card--selection .ui-product-card__image img{width:100%;height:100%;object-fit:contain;filter:var(--lab-photo-shadow)}
.ui-product-card--selection .ui-product-card__body{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;align-items:center;padding:var(--space-xs) var(--space-sm);gap:0 var(--space-sm);min-height:0}
.ui-product-card--selection h3{grid-column:1 / -1;display:flex;align-items:center;flex-wrap:wrap;gap:0 var(--space-sm);min-height:0;font-size:var(--text-md);line-height:var(--leading-heading);overflow-wrap:anywhere}
.ui-product-card--selection .ui-product-card__price{margin:0;font-size:var(--text-lg);line-height:var(--leading-heading);font-variant-numeric:tabular-nums}
.ui-product-card--selection .ui-button--icon{width:var(--control-sm);min-height:var(--control-sm)}
.ui-product-card__selected{position:absolute;right:var(--space-sm);top:var(--space-sm);padding:var(--space-xs) var(--space-md);background:var(--lab-card-accent);color:var(--surface);border-radius:var(--radius-round);font-size:var(--text-xs);z-index:1}
.ui-lab-transition::view-transition-group(lab-product){animation-duration:var(--lab-transition);animation-timing-function:var(--lab-transition-easing)}
.ui-lab-transition::view-transition-old(lab-product),.ui-lab-transition::view-transition-new(lab-product){height:100%;object-fit:contain;mix-blend-mode:normal}
.ui-lab-transition::view-transition-old(root),.ui-lab-transition::view-transition-new(root){animation-duration:var(--motion-normal)}
.ui-lab-product.is-source .ui-lab-product__photo,.section-lab-detail:not([inert]) .ui-lab-hero__media>img{view-transition-name:lab-product}

/* L3: continuous laboratory, rows, and selected family composition. */
.section-lab-explorer{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) var(--lab-helper-height);background:var(--lab-surface);position:relative}
.section-lab-explorer.is-list { --lab-helper-height: 0px; }
.section-lab-explorer--standalone{height:var(--lab-section-height);min-height:var(--lab-section-min);grid-template-rows:var(--lab-toolbar-height) minmax(0,1fr) var(--lab-helper-height)}
.section-lab-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--space-lg);padding-inline:var(--space-2xl)}
.section-lab-toolbar h1{font-size:var(--text-xl)}
.section-lab-toolbar__controls { display: flex; align-items: center; gap: var(--space-md); }
.section-lab-toolbar__controls > span { font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--muted); white-space: nowrap; }
.section-lab-views,.section-lab-view,.section-lab-model-groups{display:contents}
.section-lab-view-wait{display:grid;place-items:center;color:var(--muted)}
.section-lab-overview{min-height:0;position:relative;display:flex}
.section-lab-loading{position:absolute;inset-block-end:var(--space-md);inset-inline:var(--space-md);display:grid;justify-items:center;color:var(--muted);font-size:var(--text-sm);pointer-events:none;z-index:var(--z-dropdown)}
.section-lab-room {
  position: relative;
  isolation: isolate;
  flex: 1;
  display: grid;
  place-items: start center;
  min-width: 0;
  min-height: 0;
  container-type: size;
  background: var(--lab-surface);
}
.section-lab-scene {
  position: relative;
  width: min(100cqw, calc(100cqh * var(--lab-scene-ratio)));
  height: min(100cqh, calc(100cqw / var(--lab-scene-ratio)));
  container-type: size;
}
.section-lab-scene__image {
  display: block;
  width: 100%;
  height: 100%;
  filter: grayscale(1);
}
.section-lab-scene__clip {
  position: absolute;
  width: 0;
  height: 0;
}
.section-lab-scene__color {
  position: absolute;
  inset: 0;
  filter: none;
  clip-path: url(#lab-room-color-clip);
  pointer-events: none;
}
.section-lab-row {
  display: contents;
}
.section-lab-explorer:not(.is-list) .ui-lab-product {
  position: absolute;
  left: calc(var(--lab-hit-x) * 1%);
  top: calc(var(--lab-hit-y) * 1%);
  width: calc(var(--lab-hit-width) * 1%);
  height: calc(var(--lab-hit-height) * 1%);
  padding: 0;
}
.section-lab-explorer:not(.is-list) .ui-lab-product::before {
  inset: 0;
  height: auto;
  background: transparent;
  filter: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 var(--space-sm) var(--border) color-mix(in srgb, var(--lab-card-accent) 55%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-normal);
}
.section-lab-explorer:not(.is-list) .ui-lab-product.is-active:not(:disabled)::before {
  opacity: 1;
}
.section-lab-explorer:not(.is-list) .ui-lab-product__photo {
  display: none;
}
.section-lab-explorer:not(.is-list) .ui-lab-product__scene {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--lab-scene-artwork) no-repeat;
  background-size: 100cqw 100cqh;
  background-position: calc(var(--lab-hit-x) * -1cqw) calc(var(--lab-hit-y) * -1cqh);
  opacity: 0;
}
.section-lab-explorer:not(.is-list) .ui-lab-product.is-source .ui-lab-product__scene {
  opacity: 1;
}
.section-lab-explorer:not(.is-list) .ui-lab-product.is-source .ui-lab-product__scene {
  view-transition-name: lab-product;
}
.section-lab-explorer:not(.is-list) .ui-lab-product:disabled .ui-lab-product__tooltip {
  opacity: 0;
  visibility: hidden;
}
.section-lab-row--floor .ui-lab-product .ui-lab-product__tooltip,
.section-lab-row--floor .ui-lab-product.is-active .ui-lab-product__tooltip {
  top: calc(50% - var(--lab-tooltip-rise));
  bottom: auto;
  left: calc(100% + var(--lab-tooltip-gap));
  transform: translate(0, -50%);
}
.section-lab-row--floor .ui-lab-product:nth-last-child(-n+2) .ui-lab-product__tooltip {
  left: auto;
  right: calc(100% + var(--lab-tooltip-gap));
}
.section-lab-row--bench .ui-lab-product__tooltip {
  --tooltip-anchor: calc((var(--lab-hit-x) + var(--lab-hit-width) / 2) * 1cqw);
  --tooltip-edge: calc(var(--lab-tooltip-width) / 2 + var(--space-lg));
  left: calc(50% + clamp(var(--tooltip-edge), var(--tooltip-anchor), 100cqw - var(--tooltip-edge)) - var(--tooltip-anchor));
}
.section-lab-status {
  position: absolute;
  z-index: var(--z-dropdown);
  inset: auto var(--space-md) calc(var(--lab-helper-height) + var(--space-md));
  display: grid;
  justify-items: center;
  font-size: var(--text-sm);
  pointer-events: none;
}
.section-lab-status > span { padding: var(--space-sm) var(--space-md); background: var(--lab-card-surface); border-radius: var(--lab-card-radius); box-shadow: var(--lab-card-shadow); }
.section-lab-detail{display:grid;grid-template-columns:var(--lab-detail-columns);min-height:0;background:var(--lab-card-photo);color:var(--lab-card-ink)}
.section-lab-detail:focus{outline:none}
.section-lab-detail__hero{position:relative;min-width:0;min-height:0;display:grid;grid-template-rows:var(--control-height) minmax(0,1fr);background:linear-gradient(transparent 70%,color-mix(in oklab,var(--lab-furniture-edge) 24%,transparent))}
.section-lab-detail__hero::before{position:absolute;content:'';inset:45% var(--space-2xl) 25%;background:var(--lab-furniture-front);border-top:var(--space-sm) solid var(--lab-surface);border-bottom:var(--border) solid var(--lab-furniture-edge);opacity:var(--lab-muted-opacity);z-index:0}
.section-lab-detail__back{position:relative;padding:var(--space-md) var(--space-xl) 0;z-index:1}
.section-lab-detail__products{padding:var(--space-sm) var(--space-xl);min-width:0;min-height:0;display:flex;flex-direction:column;gap:var(--space-sm);overflow:auto}
@media(prefers-reduced-motion:no-preference){
  .section-lab-detail:not([hidden]) .section-lab-detail__products{animation:section-lab-models-enter var(--motion-normal) var(--lab-transition-easing) var(--motion-fast) backwards}
  @keyframes section-lab-models-enter{from{visibility:hidden;opacity:0;transform:translateX(var(--space-sm))}to{visibility:visible;opacity:1;transform:none}}
}
.section-lab-detail__heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex:none}
.section-lab-detail__title{display:grid;gap:var(--space-xs);min-width:0}
.section-lab-detail__heading h2{font-size:var(--lab-detail-title);line-height:var(--leading-heading);font-weight:var(--weight-title)}
.section-lab-detail__heading p{font-size:var(--text-sm);color:var(--muted)}
.section-lab-detail__toolbar{display:flex;align-items:center;gap:var(--space-md);flex:none}
.section-lab-detail__toolbar>.ui-button{padding-inline:0;color:var(--lab-card-accent)}
.section-lab-detail__count{font-size:var(--text-xs);color:var(--muted)}
.section-lab-models__family{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-sm);flex:none}
.section-lab-models__family--dense{--lab-card-photo-height:var(--lab-card-photo-compact-height)}
.section-lab-room[hidden],.section-lab-list[hidden]{display:none}
.section-lab-list {
  --lab-list-view-height: 100cqh;
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  scrollbar-width: none;
  container-type: size;
  padding: var(--space-md) var(--space-xl) var(--space-sm);
  background: var(--page-background);
}
.section-lab-list::-webkit-scrollbar { display: none; }
.section-lab-list:has(> .section-lab-list-filter):not([hidden]) {
  display: grid; grid-template-columns: var(--lab-list-filter-width) minmax(0,1fr);
  align-items: start; gap: var(--space-lg);
}
.section-lab-list-filter {
  position: sticky; top: 0; padding: var(--space-lg) var(--space-md);
  border: var(--border) solid color-mix(in srgb,var(--surface) 80%,transparent);
  border-radius: var(--product-card-radius); background: var(--lab-list-filter-glass);
  box-shadow: var(--lab-card-inset-shadow),var(--lab-card-shadow);
  -webkit-backdrop-filter: var(--lab-list-filter-blur); backdrop-filter: var(--lab-list-filter-blur);
}
.section-lab-list-filter h2 { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); font-size: var(--text-md); }
.section-lab-list-filter h2 .icon { width: 17px; height: 17px; }
.section-lab-list-filter__label { margin: 0 var(--space-xs) var(--space-xs); color: var(--muted); font-size: var(--text-sm); font-weight: var(--weight-strong); line-height: var(--leading-heading); }
.section-lab-list-filter__view-switch .ui-button-group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.section-lab-list-filter__view-switch .ui-button { gap: var(--space-xs); padding-inline: var(--space-xs); }
.section-lab-list-filter__view-switch .icon.ui-catalog-view-icon { width: var(--space-xl); height: var(--space-xl); }
.section-lab-list-filter__categories { display: grid; gap: var(--space-xs); margin-top: var(--space-lg); }
.section-lab-list-filter__category-heading {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs);
}
.section-lab-list-filter__category-heading .ui-toggle { font-size: var(--text-sm); line-height: var(--leading-heading); }
.section-lab-list-filter__category-heading .section-lab-list-filter__label { margin-block-end: 0; white-space: nowrap; }
.section-lab-list-filter__category-heading .ui-toggle {
  --toggle-width: var(--lab-list-toggle-width); --toggle-height: var(--lab-list-toggle-height);
  --toggle-knob: var(--lab-list-toggle-knob); --toggle-travel: calc(var(--toggle-width) - var(--toggle-height));
  gap: var(--space-xs); min-height: var(--control-xs);
}
.section-lab-list-filter__category-heading .ui-toggle input:checked { background: var(--lab-list-accent); }
.section-lab-list-filter__categories .ui-button {
  justify-content: space-between; min-height: 38px; padding-inline: var(--space-sm); border: 0; border-radius: var(--product-card-radius);
  font-size: var(--text-sm); text-align: start;
}
.section-lab-list-filter__categories .ui-button[aria-pressed] .icon { width: 16px; height: 16px; visibility: hidden; }
.section-lab-list-filter__categories .ui-button[aria-pressed="true"] { color: var(--lab-list-accent); background: var(--lab-list-accent-surface); font-weight: var(--weight-strong); }
.section-lab-list-filter__categories .ui-button[aria-pressed="true"] .icon { visibility: visible; }
.section-lab-list-results { position: relative; min-width: 0; }
.section-lab-list-status { display: grid; justify-items: center; gap: var(--space-md); padding-block: var(--space-lg); color: var(--muted); }
.section-lab-list-status--loading {
  position: absolute; z-index: var(--z-dropdown); inset-block-start: var(--space-sm); inset-inline: 0;
  justify-self: center; width: fit-content; padding: var(--space-sm) var(--space-md);
  border-radius: var(--product-card-radius); background: var(--surface); box-shadow: var(--lab-card-shadow); pointer-events: none;
}
.section-lab-list-content {
  --lab-list-photo-size: clamp(
    var(--lab-list-model-width-min),
    calc((var(--lab-list-view-height) - var(--lab-list-model-row-gap)) / 2 - var(--lab-list-model-info-height)),
    var(--lab-list-model-width-max)
  );
  --lab-list-card-height: calc(var(--lab-list-photo-size) + var(--lab-list-model-info-height));
  min-width: 0;
}
.section-lab-list .section-home-product-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--lab-list-model-row-gap) var(--lab-list-model-column-gap);
}
.section-lab-list-family { display: grid; min-width: 0; }
.section-lab-list-batch { display: contents; }
.section-lab-list-more { display: grid; place-items: center; min-height: var(--control-sm); }

/* L4: catalog page below the shared customer header. */
.layout-customer-chrome:has(> #catalog-app .layout-product-lab){display:flex;flex-direction:column}
.layout-customer-chrome:has(> #catalog-app .layout-product-lab .section-lab-explorer.is-detail){height:100dvh}
.layout-customer-chrome > #catalog-app > .layout-customer{flex:1;width:100%;min-height:0;display:grid}
.layout-product-lab{max-width:var(--customer-content-max);width:100%;margin-inline:auto;display:grid;grid-template-rows:var(--lab-toolbar-height) minmax(0,1fr);background:var(--lab-surface);overflow:clip}
.layout-product-lab > .section-lab-toolbar { background: var(--page-background); }
.layout-product-lab .section-lab-list {
  --lab-list-view-height: calc(100dvh - var(--header-top-height) - var(--lab-toolbar-height) - var(--space-md) - var(--space-sm));
  overflow: visible;
  container-type: inline-size;
}
.layout-product-lab .section-lab-list-filter { top: var(--space-md); }
.layout-product-lab .section-lab-explorer:not(.is-list,.is-detail){--lab-helper-height:0px}
.layout-product-lab .section-lab-room{container-type:inline-size}
.layout-product-lab .section-lab-scene{width:100%;height:auto;aspect-ratio:var(--lab-scene-ratio)}
@media (max-width:42rem){
  .layout-product-lab{grid-template-rows:auto minmax(0,1fr)}
  .section-lab-explorer--standalone{grid-template-rows:auto minmax(0,1fr) var(--lab-helper-height)}
  .section-lab-toolbar{grid-template-columns:minmax(0,1fr);gap:var(--space-sm);padding:var(--space-sm) var(--space-md)}
  .section-lab-toolbar__controls{justify-content:center;flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.ui-lab-product__photo{transform:none!important}.ui-lab-transition::view-transition-group(*){animation:none}}
@media (prefers-reduced-motion: reduce) {
  .section-lab-explorer:not(.is-list) .ui-lab-product::before { transition: none; }
}