:root {
  --primary: #db0812;
  --primary-h: #c00710;
  --primary-bg: rgba(219,8,18,.06);
  --primary-ring: rgba(219,8,18,.25);
  --gray: #535353;
  --bg: #fff;
  --bg2: #f5f5f5;
  --bg3: #fafafa;
  --tx: #000;
  --tx2: #535353;
  --tx3: #707070;
  --on-primary: #fff;
  --primary-text: #db0812;
  --bdr: rgba(0,0,0,.1);
  --font: Verdana, 'Open Sans', sans-serif;
  --mono: Consolas, monospace;
  --r: 6px;
  --tr: .2s ease;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  font-family: var(--font);
  background: var(--bg2);
  color: var(--tx);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 100vw;
}

/* ── Layout ── */
.app {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}
@media (min-width: 1024px) {
  .app {
    grid-template-columns: 1fr 380px;
    grid-template-rows: auto 1fr;
  }
}

/* ── Header ── */
.hdr {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--bdr);
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 8px;
  overflow: hidden;
}
.hdr-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.hdr-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}
.hdr h1 {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.hdr .badge {
  font-family: var(--mono);
  font-size: .625rem;
  color: var(--tx3);
  background: var(--bg2);
  padding: 3px 8px;
  border-radius: 100px;
  border: 1px solid var(--bdr);
  white-space: nowrap;
  flex-shrink: 0;
}
.hdr-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.renderer-badge {
  font-family: var(--mono);
  font-size: .5rem;
  color: var(--tx3);
  background: var(--bg2);
  padding: 2px 6px;
  border-radius: 100px;
  border: 1px solid var(--bdr);
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .hdr { padding: 8px 12px; }
  .hdr h1 { font-size: .75rem; }
  .renderer-badge { display: none; }
  .hdr .badge { font-size: .5625rem; padding: 2px 6px; }
}

/* ── Viewer ── */
.viewer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  overflow: hidden;
  min-height: 44vh;
  width: 100%;
}
@media (min-width: 1024px) {
  .viewer { min-height: unset; border-right: 1px solid var(--bdr); }
}
.viewer-grid {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) perspective(600px) rotateX(55deg);
  width: 200%;
  height: 60%;
  background-image:
    linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: 120px 120px;
  background-position: center;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 60% 80% at 50% 100%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 100%, black 20%, transparent 70%);
}
/* The visible viewer. Not the hidden WebXR viewer below, which must not get
   the 44vh minimum height. */
model-viewer:not(.xr-viewer) {
  width: 100%;
  height: 100%;
  min-height: 44vh;
  --poster-color: transparent;
  --progress-bar-color: var(--primary);
  --progress-bar-height: 3px;
  --min-hotspot-opacity: 0.25;
  position: relative;
  z-index: 1;
}
/* Hidden viewer that carries a WebXR session (viewer.js startWebXR): never
   part of the layout, visible only while the session runs, because on phones
   the DOM overlay with its close button lives inside it. */
model-viewer.xr-viewer {
  position: fixed;
  left: 0;
  top: 0;
  width: 2px;
  height: 2px;
  opacity: 0;
  pointer-events: none;
  --poster-color: transparent;
}
model-viewer.xr-viewer.xr-live { opacity: 1; }
/* WebXR on phones and tablets (viewer.js createXRViewer): hints and a close
   button inside the hidden viewer. During the session the browser shows them
   over the camera image; outside it the 2 x 2 px viewer hides them. */
.xr-viewer .xr-hint {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: max-content;
  max-width: min(88vw, 420px);
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .64);
  color: #fff;
  font: 600 .9375rem/1.35 var(--font, system-ui, sans-serif);
  text-align: left;
  pointer-events: none;   /* taps go through to the model */
}
.xr-viewer .xr-hint svg {
  width: 26px;
  height: 26px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  animation: xr-sweep 2.4s ease-in-out infinite;
}
/* Searching for the floor (before placing) or tracking lost */
.xr-viewer[ar-status="session-started"]:not(.xr-no-floor) .xr-hint-find,
.xr-viewer[ar-tracking="not-tracking"] .xr-hint-find { display: flex; }
/* Still no floor after 10 s (viewer.js onXRStatus): say why */
.xr-viewer.xr-no-floor[ar-status="session-started"]:not([ar-tracking="not-tracking"]) .xr-hint-nofloor { display: flex; }
/* Placed: how to move it, fades out after a few seconds */
.xr-viewer[ar-status="object-placed"]:not([ar-tracking="not-tracking"]) .xr-hint-move {
  display: flex;
  animation: xr-hint-out 6s forwards;
}
@keyframes xr-sweep {
  0%, 100% { transform: translateX(-5px) rotate(-10deg); }
  50% { transform: translateX(5px) rotate(10deg); }
}
@keyframes xr-hint-out {
  0%, 80% { opacity: 1; }
  100% { opacity: 0; }
}
.xr-viewer .xr-exit {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: 16px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;   /* the viewer itself lets no taps through */
}
.xr-viewer .xr-exit svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.xr-viewer .xr-exit:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .xr-viewer .xr-hint svg { animation: none; }
}
model-viewer::part(default-ar-button) { display: none; }
model-viewer::part(default-progress-bar) {
  background: var(--bdr);
  height: 3px;
}
/* Loading */
.loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  opacity: 1;
  transition: opacity .3s;
}
.loader.hidden { opacity: 0; }
.loader-spinner {
  width: 56px;
  height: 56px;
  border: 4px solid rgba(0,0,0,.08);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: loadSpin .7s linear infinite;
}
.loader-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--bdr);
  overflow: hidden;
}
.loader-bar-fill {
  height: 100%;
  width: 30%;
  background: var(--primary);
  border-radius: 0 2px 2px 0;
  animation: loadSlide 1.2s ease-in-out infinite;
}
@keyframes loadSpin {
  to { transform: rotate(360deg); }
}
@keyframes loadSlide {
  0% { transform: translateX(-100%); width: 30%; }
  50% { width: 50%; }
  100% { transform: translateX(400%); width: 30%; }
}
.loader span { font-size: .75rem; color: var(--tx2); margin-top: 10px; }

/* Watermark */
.watermark {
  position: absolute;
  bottom: 10px;
  right: 14px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: .5625rem;
  color: var(--tx3);
  font-family: var(--mono);
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.watermark img { width: 14px; height: 14px; object-fit: contain; }

/* Viewer toolbar */
.viewer-toolbar {
  position: absolute;
  bottom: 10px;
  left: 14px;
  z-index: 5;
  display: flex;
  gap: 6px;
}
.viewer-tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
  cursor: pointer;
  color: var(--tx2);
  transition: var(--tr);
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.viewer-tool-btn:hover { background: rgba(255,255,255,.95); color: var(--tx); }
.viewer-tool-btn.active { color: var(--primary-text, var(--primary)); border-color: var(--primary); background: var(--primary-bg); }
.viewer-tool-btn svg { width: 16px; height: 16px; }

/* Dimension lines on model — uses model-viewer hotspots for position + occlusion */
.dim-hotspot {
  background: none !important;
  border: none;
  padding: 0;
  width: 0; height: 0;
  position: relative;
  pointer-events: none;
  --min-hotspot-opacity: 0.25;
}
#dim-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
  display: none;
}
#dim-svg.visible { display: block; }

/* Annotation Hotspots */
.anno-hotspot {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(4px);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s;
  padding: 0;
  color: var(--primary); /* iOS: without this, the SVG stroke=currentColor falls back to system link-blue */
  --min-hotspot-opacity: 0.2;
}
.anno-hotspot:hover { background: var(--primary); color: var(--on-primary, #fff); }
.anno-hotspot.active { background: var(--primary); color: var(--on-primary, #fff); transform: scale(1.15); }
.anno-hotspot svg { width: 14px; height: 14px; pointer-events: none; }
.anno-hotspot .anno-plus { display: block; }
.anno-hotspot .anno-minus { display: none; }
.anno-hotspot.active .anno-plus { display: none; }
.anno-hotspot.active .anno-minus { display: block; }

.anno-popup {
  position: absolute;
  top: 0; left: 0;
  z-index: 20;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  padding: 16px 18px;
  max-width: 260px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
  display: none;
}
.anno-popup.show { display: block; opacity: 1; transform: translateY(0); }
.anno-popup-title { font-size: .8125rem; font-weight: 700; margin-bottom: 6px; color: var(--tx); }
.anno-popup-desc { font-size: .75rem; color: var(--tx2); line-height: 1.5; }
.anno-popup-close {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; cursor: pointer;
  font-size: 1rem; color: var(--tx3); line-height: 1;
}
.anno-popup-close:hover { color: var(--tx); }

/* ── Controls ── */
.controls {
  background: var(--bg3);
  padding: 20px 16px 4px; /* tight bottom: legal links sit close to the edge */
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}
@media (min-width: 1024px) {
  .controls { padding: 24px 24px 4px; }
}
@media (max-width: 1023px) {
  .controls { border-top: 1px solid var(--bdr); }
}

/* Dimension group */
.dim-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: fadein .3s ease both;
}
.dim-group:nth-child(2) { animation-delay: .05s; }
.dim-group:nth-child(3) { animation-delay: .1s; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.dim-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.dim-label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx2);
}
.dim-value {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--primary-text, var(--primary));
  font-weight: 400;
}

/* Button options */
.opt-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.opt-btn {
  padding: 8px 14px;
  font-family: var(--font);
  font-size: .8125rem;
  font-weight: 400;
  color: var(--tx2);
  background: var(--bg);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  cursor: pointer;
  transition: var(--tr);
  outline: none;
  white-space: nowrap;
}
.opt-btn:hover {
  background: var(--bg2);
  color: var(--tx);
  border-color: rgba(0,0,0,.18);
}
.opt-btn.active {
  color: var(--primary-text, var(--primary));
  border-color: var(--primary);
  background: var(--primary-bg);
  font-weight: 700;
}

/* Swatch options */
.opt-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 20px;
  width: 100%;
}
.opt-swatch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: var(--tr);
  position: relative;
  outline: none;
  background: none;
  flex-shrink: 0;
  padding: 3px;
}
.opt-swatch:hover { transform: scale(1.08); }
.opt-swatch.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}
.opt-swatch-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.08);
}
.opt-swatch-label {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .625rem;
  color: var(--tx3);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.opt-swatch:hover .opt-swatch-label,
.opt-swatch.active .opt-swatch-label { opacity: 1; }

/* Select options */
.opt-select {
  font-family: var(--font);
  font-size: .8125rem;
  padding: 8px 12px;
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--tx);
  outline: none;
  cursor: pointer;
  width: 100%;
  max-width: 240px;
}
.opt-select:focus { border-color: var(--primary); }

/* Variant info */
.variant-info {
  font-family: var(--mono);
  font-size: .6875rem;
  color: var(--tx3);
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  word-break: break-word;
  overflow-wrap: break-word;
}

/* AR Button placeholder (Phase 2) */
.ar-section {
  margin-top: auto;
  padding-top: 12px;
}

/* Language switcher */
.lang-switch {
  display: flex;
  border: 1px solid var(--bdr);
  border-radius: 100px;
  overflow: hidden;
  flex-shrink: 0;
}
.lang-btn {
  font-family: var(--mono);
  font-size: .6875rem;
  padding: 5px 9px;
  min-width: 32px;
  text-align: center;
  box-sizing: border-box;
  border: none;
  background: transparent;
  color: var(--tx3);
  cursor: pointer;
  transition: var(--tr);
  outline: none;
  font-weight: 600; /* constant weight so toggling active doesn't resize/shift */
  line-height: 1;
}
.lang-btn:hover { color: var(--tx); }
.lang-btn.active {
  background: var(--primary);
  color: var(--on-primary, #fff);
}
.ar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  background: var(--primary);
  color: var(--on-primary, #fff);
  border: none;
  border-radius: var(--r);
  font-family: var(--font);
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--tr);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.ar-btn:hover { background: var(--primary-h); }
.ar-btn svg { width: auto; height: 20px; flex-shrink: 0; overflow: visible; min-width: 12px; }
.ar-sub {
  text-align: center;
  font-size: .6875rem;
  color: var(--tx3);
  margin-top: 6px;
}
.legal-links {
  text-align: center;
  font-size: .625rem;
  margin-top: 6px;
  padding-top: 5px;
  padding-bottom: 2px;
  border-top: 1px solid var(--bdr, rgba(0,0,0,0.1));
}
.legal-links a {
  color: var(--tx3);
  text-decoration: underline;
}
.legal-links a:hover {
  color: var(--primary-h);
}

/* ── Accessibility (WCAG 2.1 AA) ── */
/* 2.4.7 Visible keyboard focus — overrides the per-element outline:none. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.viewer-tool-btn:focus-visible,
.opt-btn:focus-visible,
.lang-btn:focus-visible,
.action-btn:focus-visible,
.ar-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
/* 2.5.5 Touch targets >= 44px (tablet sales). min-* overrides fixed sizes. */
.viewer-tool-btn { min-width: 36px; min-height: 36px; }
.opt-btn { min-height: 44px; }
.action-row .action-btn,
.pdf-btn-full,
.ar-btn { min-height: 44px; }
.pausAR-popup-close,
.anno-popup-close { min-width: 44px; min-height: 44px; }
.legal-links a { display: inline-block; padding: 8px 6px; }
/* 1.4.3 Variant-count badge contrast (was #999 ~2.6:1 on light bg). */
.hdr .badge { color: #5a5a5a; }

/* ── PausAR Popup ── */
.pausAR-popup-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  animation: popIn .25s ease;
}
@keyframes popIn { from { opacity: 0; } }
.pausAR-popup {
  background: var(--bg); border-radius: 12px;
  width: calc(100% - 32px); max-width: 440px;
  padding: 24px 18px 18px; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  max-height: 85vh; overflow-y: auto;
}
.pausAR-popup-close {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: transparent; cursor: pointer;
  font-size: 1rem; color: var(--tx3); line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.pausAR-popup-close:hover { background: var(--bg2); }
/* h2: dialog title right after the page h1 (heading order). */
.pausAR-popup h2,
.pausAR-popup h4 {
  font-family: var(--font); font-size: .9375rem; font-weight: 700;
  text-align: center; margin: 0 0 6px; color: var(--tx);
}
.pausAR-popup p {
  font-family: var(--font); font-size: .8125rem;
  text-align: center; color: var(--tx2); margin: 0 0 12px; line-height: 1.5;
}
.pausAR-popup hr {
  border: none; border-top: 1px solid var(--bdr); margin: 14px 0;
}
.pausAR-popup-qr {
  display: flex; justify-content: center; margin: 16px 0;
}
.pausAR-popup-qr svg { width: 180px; height: 180px; max-width: 100%; }
.pausAR-popup-or {
  text-align: center; font-size: .75rem; color: var(--tx3);
  margin: 10px 0;
}
.pausAR-popup-link {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--bdr); border-radius: var(--r);
  overflow: hidden; margin-top: 8px;
  max-width: 100%;
}
.pausAR-popup-link-text {
  flex: 1; padding: 8px 10px;
  font-family: var(--mono); font-size: .625rem;
  color: var(--tx2); word-break: break-all;
  overflow-wrap: break-word;
  background: var(--bg2); line-height: 1.4;
  min-width: 0;
}
.pausAR-popup-link-copy {
  padding: 8px 14px; border: none; border-left: 1px solid var(--bdr);
  background: var(--bg); cursor: pointer;
  font-family: var(--mono); font-size: .6875rem; color: var(--tx2);
  white-space: nowrap; transition: var(--tr);
}
.pausAR-popup-link-copy:hover { background: var(--bg2); }
.pausAR-popup-status {
  font-size: .75rem; color: var(--tx3); margin-bottom: 4px;
}
/* Start button of the WebXR loader: disabled until the model is loaded. */
.pausAR-popup-go {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 44px; margin-top: 4px; padding: 12px 14px;
  background: var(--primary); color: var(--on-primary, #fff);
  border: none; border-radius: var(--r);
  font-family: var(--font); font-size: .875rem; font-weight: 700;
  cursor: pointer; transition: var(--tr);
}
.pausAR-popup-go:hover:not(:disabled) { background: var(--primary-h); }
.pausAR-popup-go:disabled { opacity: .45; cursor: default; }
.pausAR-popup-go:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Autostart Overlay ── */
.pausAR-autostart {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(0,0,0,.75);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  cursor: pointer; animation: popIn .3s ease;
}
.pausAR-autostart svg {
  width: 64px; height: 64px; fill: none;
  stroke: #fff; stroke-width: 1.2;
  animation: asPulse 2s ease-in-out infinite;
}
@keyframes asPulse { 0%,100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.pausAR-autostart-title {
  color: #fff; font-size: 1.125rem; font-weight: 700;
  font-family: var(--font);
}
.pausAR-autostart-sub {
  color: rgba(255,255,255,.7); font-size: .8125rem;
  font-family: var(--font);
}
.pausAR-autostart-close {
  position: absolute; top: 16px; right: 16px;
  color: rgba(255,255,255,.6); font-size: 1.5rem;
  cursor: pointer; background: none; border: none;
  width: 40px; height: 40px; display: flex;
  align-items: center; justify-content: center;
  border-radius: 50%;
}
.pausAR-autostart-close:hover { color: #fff; background: rgba(255,255,255,.1); }

/* ── Price Display ── */
.price-display {
  display: flex;
  justify-content: space-between;
  /* center, not baseline: on the baseline of the large amount the small
     uppercase label sat 2.5 px below the middle of the box. */
  align-items: center;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  animation: fadein .3s ease both;
  width: 100%;
}
.price-label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx2);
}
.price-value {
  font-family: var(--mono);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--tx);
}

/* ── Action Buttons Row ── */
.action-row {
  display: flex;
  gap: 8px;
  width: 100%;
}
@media (max-width: 380px) {
  .action-row { flex-direction: column; }
}
.action-row .action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 10px;
  font-family: var(--font);
  font-size: .75rem;
  font-weight: 700;
  border-radius: var(--r);
  cursor: pointer;
  transition: var(--tr);
  outline: none;
  border: 1px solid var(--bdr);
  background: var(--bg);
  color: var(--tx2);
  white-space: nowrap;
  min-width: 0;
}
.action-btn:hover { background: var(--bg2); color: var(--tx); border-color: rgba(0,0,0,.18); }
.action-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.action-btn.inquiry-btn {
  background: var(--primary);
  color: var(--on-primary, #fff);
  border-color: var(--primary);
}
.action-btn.inquiry-btn:hover { opacity: .9; }

/* ── Animation Toggle ── */
.anim-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  cursor: pointer;
  font-family: var(--mono);
  font-size: .6875rem;
  color: var(--tx2);
  transition: var(--tr);
  outline: none;
  border: none;
  width: 100%;
}
.anim-toggle:hover { background: var(--bg2); }

.pdf-btn-full {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 10px 10px;
  font-family: var(--font);
  font-size: .75rem;
  font-weight: 700;
  border-radius: var(--r);
  cursor: pointer;
  transition: var(--tr);
  outline: none;
  border: 1px solid var(--bdr);
  background: var(--bg);
  color: var(--tx2);
}
.pdf-btn-full:hover { background: var(--bg2); color: var(--tx); border-color: rgba(0,0,0,.18); }
.pdf-btn-full svg { width: 14px; height: 14px; flex-shrink: 0; }
.pdf-btn-full[disabled] { opacity: .6; cursor: wait; }

/* ── Accessibility, WCAG 2.2 AA (launch review 25.09.2026) ── */
/* 2.4.7 The language switch clips outer outlines (overflow:hidden): draw the
   focus ring inside the button instead. */
.lang-btn:focus-visible { outline-offset: -2px; border-radius: 100px; }
/* 2.5.8 Minimum target size (24px) everywhere, 44px on touch screens (iPad
   at the trade fair). The hotspot keeps its look; ::after enlarges the hit
   area around it. */
.lang-btn { min-height: 24px; }
.anno-hotspot { position: relative; }
.anno-hotspot::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
@media (pointer: coarse) {
  .viewer-tool-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .viewer-tool-btn svg { width: 18px; height: 18px; }
  .lang-btn { min-height: 36px; min-width: 40px; }
  .opt-swatch { min-width: 44px; min-height: 44px; }
}
/* 2.3.3 "Reduce motion" in the OS settings: no pulsing, sliding or spinning.
   Auto-rotation is switched off in viewer.js. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Phone header: room for the product title. The variant count is hidden and
   the offline button shows its icon only (the label stays for screen readers). */
@media (max-width: 480px) {
  .hdr .badge { display: none; }
  .pa-off-hdr-btn .pa-off-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .pa-off-hdr-btn { padding: 6px 8px; }
  /* Up to two lines instead of cutting the title off. */
  .hdr h1 {
    white-space: normal; line-height: 1.2;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  }
}

/* ── Accessibility audit 29.09.2026 (WCAG 2.2 AA) ── */
/* 2.4.7 The action buttons set outline:none with the same weight as the
   general focus rule above and come later: without this they show no focus. */
.action-row .action-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 2.4.7 Active language button: its background is --primary, so a ring in
   --primary would be invisible. White ring inside instead. */
.lang-btn.active:focus-visible { outline-color: var(--on-primary, #fff); outline-offset: -4px; }
/* 2.4.7 / 1.4.11 Hotspots: model-viewer fades hotspots behind the model to
   20 %, which hid the focus. A focused or open hotspot is always fully
   visible, with a black and white ring that works on any model colour. */
.anno-hotspot:focus-visible,
.anno-hotspot.active { opacity: 1 !important; }
.anno-hotspot:focus-visible { outline: 3px solid #000; outline-offset: 2px; box-shadow: 0 0 0 5px #fff; border-radius: 50%; }
.anno-hotspot.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0,0,0,.55); }
/* Round controls stay round when focused (the general rule sets 4px). */
.opt-swatch:focus-visible { border-radius: 50%; }
/* 1.4.3 Selected option: brand text on the tinted background missed 4.5:1
   (4.45:1 with Paus red). Border and bold text mark the selection. */
.opt-btn.active { background: var(--bg); }
/* 1.4.1 / 1.4.11 Colour swatches: the name also shows on keyboard focus, and
   light colours get an edge that stands out from the white background. */
.opt-swatch:focus-visible .opt-swatch-label { opacity: 1; }
.opt-swatch-inner { box-shadow: inset 0 0 0 1px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.08); }
/* 1.4.4 Larger text (Safari text size on the iPad): buttons wrap instead of
   overlapping, the product title wraps instead of being cut off. The side
   padding is 6px: with nowrap the German label ran into the old 10px padding,
   with wrapping allowed it would break into two lines at normal size. */
.action-row { flex-wrap: wrap; }
.action-row .action-btn { white-space: normal; flex: 1 1 10em; text-align: center; padding-left: 6px; padding-right: 6px; }
.hdr h1 { white-space: normal; line-height: 1.2; }

/* ── Screen readers and dialogs (audit 29.09.2026, viewer.js part) ── */
/* Visually hidden, still read out. position:absolute also keeps these out of
   the flex gaps of .controls. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* 1.4.3 Load error: a readable box on the page background instead of red text
   on top of the previous model. */
.loader-error {
  background: var(--bg); color: var(--tx);
  border: 1px solid var(--bdr); border-left: 4px solid var(--primary-text, var(--primary));
  border-radius: var(--r); padding: 10px 14px; margin: 0 16px;
  font-family: var(--font); font-size: .875rem; line-height: 1.5; max-width: 80%;
}
/* 2.4.3 The PDF button stays focusable while the PDF is created. */
.pdf-btn-full.is-busy { opacity: .6; cursor: wait; }
/* 2.1.1 Autostart: the tap target is a real button, usable by keyboard. */
.pausAR-autostart-go {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  background: none; border: 0; padding: 16px 24px; border-radius: 12px;
  color: inherit; font: inherit; cursor: pointer;
}
.pausAR-autostart-go:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
/* "Technische Änderungen vorbehalten" above the legal links (viewer.js
   initLegalLinks, switch in the admin). */
.legal-links .disclaimer { margin: 0 0 2px; color: var(--tx3); line-height: 1.4; }
/* Phones and small tablets: in landscape or on short screens 44vh made the
   viewer a strip of ~170 px, with the hotspots on top of each other. At least
   360 px, but never taller than the screen below the header, so in landscape
   the viewer fills the screen and the options follow when scrolling. */
@media (max-width: 1023px) {
  .viewer,
  model-viewer:not(.xr-viewer) { min-height: max(44vh, min(360px, calc(100dvh - 64px))); }
}

/* ── Phones and tablets (below 1024 px): button hierarchy (Kolja 29.09.2026) ──
   1. "Im Raum platzieren" first and dominant, 2. PDF data sheet in full
   width, 3. inquiry and share as a small pair side by side, both outlined.
   Only the visual order changes (order); the three are independent actions,
   so the keyboard and screen reader order stays meaningful. Desktop as before. */
@media (max-width: 1023px) {
  .controls > .ar-section { order: 1; margin-top: 0; padding-top: 0; }
  .controls > .pdf-btn-full { order: 2; margin-top: -6px; }
  .controls > .action-row { order: 3; margin-top: -6px; }
  .controls > .legal-links { order: 4; }
  .ar-btn { min-height: 54px; font-size: .9375rem; }
  .pdf-btn-full { min-height: 48px; font-size: .8125rem; }
  /* Row, never stacked (the 380 px column rule made both buttons 120 px high). */
  .action-row { flex-direction: row; flex-wrap: wrap; }
  .action-row .action-btn { flex: 1 1 8em; min-height: 44px; }
  .action-btn.inquiry-btn { background: var(--bg); color: var(--tx2); border-color: var(--bdr); }
  .action-btn.inquiry-btn:hover { background: var(--bg2); color: var(--tx); border-color: rgba(0,0,0,.18); opacity: 1; }
}
/* Short labels ("Anfragen", "Teilen") only where the pair gets narrow. */
.action-btn .lbl-short { display: none; }
@media (max-width: 480px) {
  .action-btn .lbl-long { display: none; }
  .action-btn .lbl-short { display: inline; }
}

/* ── Light / dark / auto switch (footer, viewer.js themeSwitchMarkup) ── */
.theme-switch {
  display: flex;
  width: max-content;
  gap: 2px;
  margin: 8px auto 2px;
  padding: 2px;
  border: 1px solid var(--bdr);
  border-radius: 999px;
}
.theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tx3);
  font-family: var(--font);
  font-size: .6875rem;
  cursor: pointer;
}
.theme-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theme-btn:hover { color: var(--tx); }
.theme-btn[aria-pressed="true"] { background: var(--bg2); color: var(--tx); font-weight: 700; }
.theme-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Dark mode (<html data-theme="dark"> from /assets/theme.js) ──
   The colour variables follow inline (viewer.js applyColors); these rules
   cover colours that are written out. The PDF data sheet stays light. */
:root[data-theme="dark"] { color-scheme: dark; }
/* Stage a touch lighter in the middle, so dark products stand out. */
[data-theme="dark"] .viewer { background: radial-gradient(ellipse at 50% 42%, #36363c 0%, #26262a 55%, #1e1e21 100%); }
[data-theme="dark"] .viewer-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
}
[data-theme="dark"] .loader-spinner { border-color: rgba(255,255,255,.14); border-top-color: var(--primary); }
[data-theme="dark"] .watermark,
[data-theme="dark"] .viewer-tool-btn { background: rgba(30,30,33,.86); border-color: rgba(255,255,255,.14); }
[data-theme="dark"] .viewer-tool-btn:hover { background: rgba(52,52,58,.95); color: var(--tx); }
[data-theme="dark"] .anno-popup { background: var(--bg2); box-shadow: 0 6px 24px rgba(0,0,0,.55); }
[data-theme="dark"] .opt-btn:hover,
[data-theme="dark"] .action-btn:hover,
[data-theme="dark"] .pdf-btn-full:hover,
[data-theme="dark"] .action-btn.inquiry-btn:hover { border-color: rgba(255,255,255,.3); }
/* Dark colour swatches need a light edge on the dark panel. */
[data-theme="dark"] .opt-swatch-inner { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.4); }
[data-theme="dark"] .hdr .badge { color: var(--tx3); }
[data-theme="dark"] .legal-links a:hover { color: var(--primary-text); }
[data-theme="dark"] .pausAR-popup { box-shadow: 0 20px 60px rgba(0,0,0,.6); }
/* QR codes need a light ground to scan. */
[data-theme="dark"] .pausAR-popup-qr svg { background: #fff; padding: 10px; border-radius: 8px; box-sizing: content-box; }
/* Customer logos are made for light backgrounds: a light chip behind them,
   unless the project brings its own dark-mode logo (meta.logoDark). */
[data-theme="dark"] .hdr-logo:not(.own-dark) { background: #fff; border-radius: 6px; padding: 3px; }