:root {
  /* Standaard voor Companion Milo en Titanium: Chrome-weergave rond 67%. */
  --smart-display-reference-scale: 0.67;
  --smart-display-virtual-width: 149.253731vw;
  --smart-display-virtual-height: 149.253731vh;
  --smart-display-virtual-small-height: 149.253731svh;
  --smart-display-scroll-height: 402.985075vh;
  --smart-display-product-width: 125.373134vw;
  --smart-display-product-height: 122.38806vh;
}

html[data-smart-display-model="portable"] {
  --smart-display-reference-scale: 0.8;
  --smart-display-virtual-width: 125vw;
  --smart-display-virtual-height: 125vh;
  --smart-display-virtual-small-height: 125svh;
  --smart-display-scroll-height: 337.5vh;
  --smart-display-product-width: 105vw;
  --smart-display-product-height: 102.5vh;
}

html[data-smart-display-model="companion-2027"] {
  --smart-display-reference-scale: 0.9;
  --smart-display-virtual-width: 111.111111vw;
  --smart-display-virtual-height: 111.111111vh;
  --smart-display-virtual-small-height: 111.111111svh;
  --smart-display-scroll-height: 300vh;
  --smart-display-product-width: 93.333333vw;
  --smart-display-product-height: 91.111111vh;
}

html[data-display-profile="smart-display"]:not([data-smart-display-layout="portrait"]) {
  zoom: var(--smart-display-reference-scale);
}

/* Maak 100vw-afhankelijke content even breed als bij echte Chrome-zoom op 67%. */
html[data-display-profile="smart-display"]:not([data-smart-display-layout="portrait"]) body {
  --wrap: min(1260px, calc(var(--smart-display-virtual-width) - 48px));
  min-height: var(--smart-display-virtual-height);
}

html[data-display-profile="smart-display"]:not([data-smart-display-layout="portrait"]) body[data-product-model] {
  --wrap: min(1240px, calc(var(--smart-display-virtual-width) - 48px));
}

html[data-display-profile="smart-display"]:not([data-smart-display-layout="portrait"]) body:has(#warranty-form) {
  --wrap: min(1180px, calc(var(--smart-display-virtual-width) - 48px));
}

/* Compenseer viewport-eenheden in de scrollende productpresentaties. */
html[data-display-profile="smart-display"]:not([data-smart-display-layout="portrait"]) .scroll-reveal {
  height: var(--smart-display-scroll-height);
}

html[data-display-profile="smart-display"]:not([data-smart-display-layout="portrait"]) .sticky-stage {
  height: var(--smart-display-virtual-height);
}

html[data-display-profile="smart-display"]:not([data-smart-display-layout="portrait"]) .reveal-title {
  left: max(24px, calc((var(--smart-display-virtual-width) - var(--wrap)) / 2));
}

html[data-display-profile="smart-display"]:not([data-smart-display-layout="portrait"]) .product-zoom {
  width: min(var(--smart-display-product-width), 1060px);
  height: min(var(--smart-display-product-height), 860px);
}

html[data-display-profile="smart-display"]:not([data-smart-display-layout="portrait"]) body:has(> .ambient) .page {
  min-height: var(--smart-display-virtual-height);
  min-height: var(--smart-display-virtual-small-height);
}

.smart-display-profile-debug {
  position: fixed;
  z-index: 2147483647;
  right: 12px;
  bottom: 12px;
  max-width: calc(100vw - 24px);
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(9, 10, 12, 0.88);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
  color: #fff;
  font: 600 12px/1.25 system-ui, sans-serif;
  letter-spacing: 0.01em;
  pointer-events: none;
}