/* Neutrale studioscène en productfoto ("flacon") — peek-core, met de hand geschreven
   (scene.css is gegenereerd uit het prototype, dit bestand niet).
   Besluit Ruud 29-09-2026: zonder bevestigd luchtprincipe het object in zacht
   strijklicht, subtiele korrel, reflectie en schaduw, en géén luchtstroom. */

/* ---------- Studio ---------- */
.peek-rs--studio{ position:relative; overflow:hidden; background:var(--c-studio, #040506); }
.peek-rs--studio .rs-main{ pointer-events:auto; }
.scene--studio{ min-height:560px; }
.studio{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
/* Strijklicht: een brede, zachte lichtbundel van linksboven over het object. */
.studio__light{ position:absolute; inset:-20%;
  background:
    radial-gradient(38% 30% at 66% 46%, rgba(236,235,231,.12), rgba(236,235,231,.04) 55%, transparent 75%),
    linear-gradient(118deg, transparent 22%, rgba(236,235,231,.055) 38%, rgba(236,235,231,.015) 52%, transparent 64%),
    radial-gradient(60% 50% at 20% 0%, rgba(0,154,215,.07), transparent 70%);
  animation:studio-drift 18s ease-in-out infinite alternate; }
/* Vloer: een donkere, licht glanzende plaat waar het object op staat. */
.studio__floor{ position:absolute; left:0; right:0; bottom:0; height:34%;
  background:linear-gradient(180deg, rgba(236,235,231,.035), rgba(4,5,6,0) 40%), linear-gradient(180deg, #07090b, #040506); }
.studio__floor::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, rgba(236,235,231,.10) 50%, transparent); }
.studio__grain{ position:absolute; inset:0; opacity:.13; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes studio-drift{ from{ transform:translate3d(-1.5%,0,0); } to{ transform:translate3d(1.5%,-1%,0); } }
@media (prefers-reduced-motion: reduce){ .studio__light{ animation:none; } }

/* Het object: rechts van de tekst, staand op de vloer. */
.studio__obj{ position:absolute; z-index:1; margin:0; right:clamp(24px, 9vw, 180px); bottom:calc(34% - 2px); width:min(28vw, 340px);
  display:flex; flex-direction:column; align-items:center; }
.studio__box{ position:relative; display:block; width:100%; }
/* Schaduw op de vloer. */
.studio__obj::after{ content:""; position:absolute; left:12%; right:12%; bottom:-14px; height:26px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.75), transparent); filter:blur(4px); z-index:-1; }

/* Foto als donkere studiokaart (besluit Ruud 01-10-2026): het beeld uit design/foto/donker heeft zijn eigen achtergrond. */
.studio__obj--photo .studio__box{ aspect-ratio:4 / 3; border-radius:14px; overflow:hidden;
  background:radial-gradient(120% 95% at 33% 30%, #23272c, #0e1012 62%, #090a0c);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(236,235,231,.12);
  -webkit-box-reflect:below 10px linear-gradient(transparent 70%, rgba(255,255,255,.12)); }
.studio__obj--photo .studio__box::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.05), transparent 38%, transparent 70%, rgba(0,0,0,.14)); }
.studio__img{ display:block; width:100%; height:100%; object-fit:cover; }
.studio__cap{ position:absolute; right:0; bottom:-30px; font:400 12px/1.3 var(--f-mono, monospace); letter-spacing:.08em; color:var(--c-ink-3, #7E8286); text-transform:uppercase; }

/* Silhouet: een rustige lijntekening in de huisstijl, met een zachte gloed. */
.studio__obj--sil .studio__box{ aspect-ratio:1; color:rgba(236,235,231,.34);
  -webkit-box-reflect:below 4px linear-gradient(transparent 72%, rgba(255,255,255,.10)); }
.studio__sil{ display:block; width:100%; height:100%; filter:drop-shadow(0 0 18px rgba(0,154,215,.14)); }

/* In de studio staat de tekst altijd leesbaar op de donkere achtergrond (geen simulatie). */
.peek-rs--studio .head{ color:var(--c-ink, #ECEBE7); }
.peek-rs--studio .rs-links a + a{ margin-left:0; }

@media (max-width:899px) and (orientation:portrait){
  .scene--studio{ min-height:640px; }
  .studio__floor{ height:40%; }
  .studio__obj{ right:auto; left:50%; transform:translateX(-50%); bottom:auto; top:calc(210px + env(safe-area-inset-top)); width:min(64vw, 340px); }
  .studio__cap{ display:none; }
  .peek-rs--studio .lede{ position:static; width:auto; height:auto; clip:auto; white-space:normal; }
}
@media (max-height:620px) and (orientation:landscape){ .studio__obj{ width:min(30vw, 300px); bottom:24%; } }

/* ---------- Flacon: kleine productfoto boven het kaartje in de luchtscène ---------- */
.rs-flacon{ margin:0; align-self:flex-start; width:120px; aspect-ratio:4 / 3; border-radius:8px; overflow:hidden;
  background:radial-gradient(120% 95% at 33% 30%, #23272c, #0e1012 62%, #090a0c); /* donkere studio, gelijk aan design/foto/donker (besluit Ruud 01-10-2026) */ box-shadow:0 12px 30px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(236,235,231,.12); }
.rs-flacon__img{ display:block; width:100%; height:100%; object-fit:cover; }
/* Productfoto van een product zonder 3D-model (Ruud 30-09-2026): klein naast het kaartje, niet over de stroming. */
.rs-flacon--dock{ width:152px; }

/* ---------- Interne notities (alleen ingelogde redactie) ---------- */
.peek-intern{ display:inline-block; margin-top:4px; padding:2px 6px; border:1px dashed rgba(239,146,33,.5); border-radius:4px; font:400 12px/1.4 var(--f-mono, monospace); color:#E9B77A; }

/* ---------- Productstill in de luchtscène (product-still.js) ----------
   Voor elk product behalve DD-N, IN-V en Q-R (die hun getekende object houden): eigen model,
   anders de hoofdfoto op een lichtbak, anders een silhouet. Staat op de plek van het rooster;
   de lucht loopt erachter. */
.rs-still{ position:fixed; z-index:1; left:0; top:0; margin:0; width:min(var(--w, 280px), 340px); aspect-ratio:4 / 3; pointer-events:none;
  transition:transform .9s var(--e-adem, ease), width .9s var(--e-adem, ease), opacity .5s; will-change:transform; }
.rs-still--static{ left:50%; top:50%; transform:translate(-50%, -50%) !important; }
.rs-still__box{ position:absolute; inset:0; display:block; border-radius:12px; overflow:hidden; }
.rs-still--photo .rs-still__box{ background:radial-gradient(120% 95% at 33% 30%, #23272c, #0e1012 62%, #090a0c); /* donkere studio, gelijk aan design/foto/donker (besluit Ruud 01-10-2026) */
  box-shadow:0 30px 60px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(236,235,231,.14), 0 0 60px rgba(0,154,215,.18); }
.rs-still__img{ display:block; width:100%; height:100%; object-fit:cover; }
.rs-still--sil .rs-still__box{ color:rgba(236,235,231,.32); padding:8% 18%; }
.rs-still__sil{ display:block; width:100%; height:100%; filter:drop-shadow(0 0 16px rgba(0,154,215,.2)); }
.rs-still.has-model .rs-still__box{ opacity:0; }
.rs-still__gl{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* Draaibaar (opdracht A, 02-10-2026): alleen het canvas met het model vangt aanrakingen; verticaal vegen blijft scrollen. */
.rs-still.has-model .rs-still__gl{ pointer-events:auto; touch-action:pan-y; cursor:grab; border-radius:12px; outline-offset:4px; }
.rs-still.has-model .rs-still__gl.is-drag{ cursor:grabbing; }
.rs-still.has-model .rs-still__gl:focus-visible{ outline:2px solid var(--c-blue); }
.peek-rs.is-pia-show .rs-still .rs-still__gl, .peek-rs.rs-off .rs-still .rs-still__gl{ pointer-events:none; }
/* het 3D-model komt na het statische studiobeeld (LCP) en vloeit erover in */
.rs-still__box{ transition:opacity .9s var(--e-adem, ease); }
.rs-still__gl{ animation:rs-gl-in .9s var(--e-adem, ease) both; }
@keyframes rs-gl-in{ from{ opacity:0; } to{ opacity:1; } }
.peek-rs.is-pia-show .rs-still, .peek-rs.rs-off .rs-still{ opacity:0; }
@media (prefers-reduced-motion: reduce){ .rs-still{ transition:opacity .3s; } }
@media (max-width:899px) and (orientation:portrait){ .rs-still{ width:min(var(--w, 220px), 62vw, 340px); } }

/* ---------- Compositie per montage (knowledge/uitblaaspatronen.json, veld montage) ----------
   Alleen de studio verandert: waar het object hangt of staat. Geen lucht. De motion-3d-engineer
   levert later de instellingen voor de luchtscènes per montage (data-montage op .scene). */
.scene--m-wand .studio::after{ content:""; position:absolute; top:0; bottom:34%; right:0; width:42%;
  background:linear-gradient(90deg, rgba(236,235,231,0), rgba(236,235,231,.035)); border-left:1px solid rgba(236,235,231,.06); }
.scene--m-wand .studio__obj{ bottom:auto; top:30%; right:clamp(24px, 6vw, 120px); width:min(26vw, 320px); }
.scene--m-plafond .studio__floor{ top:0; bottom:auto; height:22%; background:linear-gradient(0deg, rgba(236,235,231,.03), rgba(4,5,6,0) 40%), linear-gradient(0deg, #07090b, #040506); }
.scene--m-plafond .studio__obj{ bottom:auto; top:22%; }
.scene--m-plafond .studio__obj::after{ display:none; }
.scene--m-vloer .studio__obj, .scene--m-trede .studio__obj{ width:min(26vw, 320px); bottom:calc(34% - 6px); }
@media (max-width:899px) and (orientation:portrait){
  .scene--m-wand .studio__obj, .scene--m-plafond .studio__obj{ top:calc(210px + env(safe-area-inset-top)); right:auto; }
}

/* Pia-beeld bij het product (tweede beeld, klein, naast het kaartje) */
.rs-pia-still{ margin:0; align-self:flex-start; width:132px; }
.rs-pia-still__img{ display:block; width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; border-radius:10px; box-shadow:0 0 0 1px rgba(143,216,255,.28), 0 0 28px rgba(0,154,215,.2); }
.rs-pia-still figcaption{ margin-top:4px; font:400 12px/1.3 var(--f-mono, monospace); letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3, #7E8286); }

/* ---------- Compositie van de productpagina (Ruud 30-09-2026: "een nieuwe indeling van de pagina") ----------
   Eén gecentreerde container (max. 1320 px) met twee kolommen: links de tekst (kop, lede, twee beelden, kaartje), rechts
   het kader met de luchtsimulatie (max. 640 px, 4:3) of, zonder luchtscène, het object op een lichtbak (max. 520 px).
   Beide kolommen beginnen op de hoogte van de typecode. Dit blok staat hier en niet in scene.css, omdat scene.css uit het
   prototype wordt gegenereerd (port_adem) en dit bestand met de hand wordt onderhouden; het overschrijft de kaderregels daar.
   scene.js volgt de maat van .rs-frame met een ResizeObserver, dus alleen de lay-out verandert. */
.peek-rs{ --rs-max:1320px; --rs-gap:clamp(32px, 4vw, 64px); --rs-col:460px; }
.peek-rs .head{ font-size:clamp(46px, 5.2vw, 100px); }
.peek-rs .head .line{ width:auto; white-space:normal; }
.peek-rs .scene .head-wrap{ position:static; max-width:none; min-width:0; }
.peek-rs .scene .foot{ position:static; width:auto; max-width:var(--rs-col); top:auto; right:auto; bottom:auto; left:auto; gap:14px; }
.peek-rs .lede{ font-size:14.5px; line-height:1.5; }
.peek-rs .rs-links{ padding-top:2px; }
.rs-side{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; align-items:start; margin-top:2px; }
.rs-side:empty{ display:none; }
.rs-side .rs-flacon, .rs-side .rs-flacon--dock, .rs-side .rs-pia-still{ width:auto; margin:0; align-self:auto; }
.rs-side .rs-flacon{ aspect-ratio:4 / 3; border-radius:12px; box-shadow:0 24px 50px -22px rgba(0,0,0,.85), 0 0 0 1px rgba(236,235,231,.12); }
.rs-side .rs-flacon__img{ padding:0; }
.rs-side .rs-pia-still__img{ border-radius:12px; }
.rs-frame{ max-width:640px; }
@media (min-width:900px){
  .peek-rs--framed .scene, .peek-rs--studio .scene--studio{
    display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, min(640px, 56%)); grid-template-rows:auto auto auto auto 1fr;
    column-gap:var(--rs-gap); row-gap:0; align-items:start; align-content:start;
    width:100%; max-width:calc(var(--rs-max) + 2 * var(--margin)); margin:0 auto; box-sizing:border-box;
    height:auto; min-height:0; padding:clamp(96px, 12vh, 140px) var(--margin) clamp(48px, 7vh, 88px); }
  .peek-rs--studio .scene--studio{ grid-template-columns:minmax(0, 1fr) minmax(0, min(520px, 46%)); }
  /* De kop valt uiteen in rasterkinderen (display:contents), zodat het kader exact op de hoogte van de typecode begint,
     ook als de kicker over twee regels loopt. scene.js leest .head-wrap alleen voor de niet-omkaderde variant. */
  .peek-rs .scene .head-wrap{ display:contents; }
  .peek-rs .scene .kicker{ grid-column:1; grid-row:1; margin-bottom:18px; }
  .peek-rs .scene .head{ grid-column:1; grid-row:2; }
  .peek-rs .scene .rs-sub{ grid-column:1; grid-row:3; }
  .peek-rs .scene .rs-nick{ grid-column:1; grid-row:4; margin:6px 0 0; }
  .peek-rs .scene .foot{ grid-column:1; grid-row:5; margin-top:26px; }
  .peek-rs--framed .rs-stage{ grid-column:2; grid-row:2 / span 4; align-self:start; justify-self:stretch; width:100%; margin-top:0; }
  .peek-rs--framed .rs-stage .rs-ctl, .peek-rs--framed .rs-stage .rs-cap{ max-width:640px; }
  /* Studio: het object neemt de plek van het kader in, op een lichtbak, niet groter dan 520 px. */
  .peek-rs--studio .studio__obj{ position:relative; grid-column:2; grid-row:2 / span 4; align-self:start; justify-self:start; width:100%; max-width:520px;
    right:auto; left:auto; bottom:auto; top:auto; transform:none; margin:0; }
  .peek-rs--studio .studio__cap{ position:static; margin-top:10px; align-self:flex-end; }
  .peek-rs--studio .studio__floor{ height:26%; }
  .peek-rs--studio .studio__light{ background:
    radial-gradient(34% 30% at 68% 40%, rgba(236,235,231,.10), rgba(236,235,231,.03) 55%, transparent 75%),
    linear-gradient(118deg, transparent 22%, rgba(236,235,231,.05) 38%, rgba(236,235,231,.015) 52%, transparent 64%),
    radial-gradient(60% 50% at 20% 0%, rgba(0,154,215,.07), transparent 70%); }
  .peek-rs--framed{ background:radial-gradient(60% 55% at 68% 42%, rgba(0,154,215,.06), transparent 70%), radial-gradient(50% 40% at 18% 20%, rgba(236,235,231,.03), transparent 70%), var(--c-studio); }
}
@media (max-width:899px){
  /* Mobiel: kop, lede, kader of object op volle breedte, schakelaars, de twee beelden naast elkaar, kaartje. */
  .peek-rs--framed .scene, .peek-rs--studio .scene--studio{ align-items:stretch; }   /* scene.css zet align-items:start voor het raster; de flexkolom moet rekken */
  .peek-rs--studio .scene--studio{ display:flex; flex-direction:column; gap:16px; min-height:0; height:auto; padding:calc(84px + env(safe-area-inset-top)) var(--margin) 48px; }
  .peek-rs--studio .scene .head-wrap{ order:1; }
  .peek-rs--studio .scene .foot{ display:contents; }
  .peek-rs--studio .scene .lede{ order:2; position:static; width:auto; height:auto; overflow:visible; clip:auto; white-space:normal; display:block; }
  .peek-rs--studio .studio__obj{ order:3; position:relative; width:100%; max-width:520px; right:auto; left:auto; top:auto; bottom:auto; transform:none; margin:0; }
  .peek-rs--studio .scene .foot > :not(.lede){ order:4; }
  .peek-rs--studio .studio__cap{ display:block; position:static; margin-top:8px; align-self:flex-end; }
  .peek-rs--studio .studio__floor{ height:22%; }
  .rs-side{ width:100%; max-width:520px; }
  .peek-rs .lede{ font-size:14px; }
}

/* ---------- Fase A2 (award-opdracht, 01-10-2026): visueel en mobiel ----------
   Dit bestand wordt met de hand onderhouden en laadt na scene.css (afhankelijkheid in inc/assets.php). */
/* 4. Kicker als chips: geen scheidingstekens, dus geen los "·" aan het regeleinde; het aanzicht (.vw) is een chip als de rest. */
.peek-rs .kicker{ flex-wrap:wrap; gap:6px 6px; row-gap:6px; }
.peek-rs .kicker .dot{ margin-right:4px; }
.peek-rs .kicker .kk{ display:inline-block; padding:4px 9px 3px; border:1px solid var(--c-line); border-radius:999px; line-height:1.2; white-space:nowrap; color:var(--c-ink-2); }
.peek-rs .kicker .kk.vw{ color:var(--c-ink-3); border-style:dashed; }
@media (max-width:420px){ .peek-rs .kicker .kk{ padding:3px 7px 2px; font-size:12px; letter-spacing:.1em; } }

/* 2. Beelden naast het kaartje: staat er maar één beeld (geen Pia-foto), dan vult het op mobiel de hele breedte, in 4:3.
      Op desktop blijft het beeld op kolombreedte (helft van .rs-side), zoals Ruud het op 30-09 heeft gezien. */
@media (max-width:899px){
  .rs-side{ max-width:none; }
  .rs-side > :only-child{ grid-column:1 / -1; }
  .rs-side .rs-flacon:only-child{ aspect-ratio:4 / 3; }
  .rs-side .rs-flacon:only-child .rs-flacon__img{ padding:6%; }
  .rs-side .rs-pia-still:only-child .rs-pia-still__img{ aspect-ratio:4 / 3; }
}

/* 7. Onderschrift en kleurlegenda samen linksonder in het kader. scene.css zet .rs-note absoluut; hier doet de wrapper dat. */
.rs-frame .rs-notes{ position:absolute; z-index:4; left:12px; right:12px; bottom:10px; margin:0; display:flex; flex-wrap:wrap; gap:2px 14px; align-items:baseline; pointer-events:none; }
.rs-frame .rs-notes .rs-note{ position:static; display:block; margin:0; }
.rs-legend{ white-space:normal; }                      /* op 320 px loopt de legenda over twee regels in plaats van af te breken */
.rs-legend .rs-sw{ margin-right:5px; vertical-align:0; }
.rs-sw{ display:inline-block; width:7px; height:7px; border-radius:50%; flex:none; }
.rs-sw--c{ background:var(--c-blue); box-shadow:0 0 6px var(--c-blue); }
.rs-sw--w{ background:var(--c-orange); box-shadow:0 0 6px var(--c-orange); }
.rs-legend .rs-sep{ color:var(--c-ink-3); }
@media (max-width:899px){ .rs-frame .rs-notes{ font-size:12px; } .rs-legend .rs-sep{ margin:0 2px; } }
@media (max-width:420px){ .peek-rs .card dd{ white-space:normal; } }   /* smalle telefoons: lange waarden ("+20 K (met straalrichter)") lopen om in plaats van af te breken */

/* 8. Wervelstoot op aanraakschermen: de hint staat in het kader (bovenaan, gecentreerd) en verdwijnt na de eerste aanraking (scene.js: .gone).
      Lang indrukken mag geen selectie of contextmenu geven; verticaal scrollen blijft werken (touch-action:pan-y in scene.css). */
.rs-frame{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.hint .hint__t{ display:none; }
@media (hover:none) and (pointer:coarse){
  .hint .hint__d{ display:none; }
  .hint .hint__t{ display:inline; }
  .peek-rs .rs-frame .hint{ display:block; position:absolute; z-index:6; left:50%; top:auto; bottom:72px;   /* boven het onderschrift en de legenda (drie regels op een smalle telefoon) */ transform:translateX(-50%); max-width:calc(100% - 24px); white-space:normal; text-align:center;
    padding:6px 10px; border-radius:999px; background:rgba(8,10,12,.62); border:1px solid var(--c-line); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--c-ink-2); font-size:12px; letter-spacing:.12em; }
  /* Met een draaibaar 3D-model staat het model midden in het kader: de hint dan bovenin en compact, zodat hij het rooster niet afdekt. */
  .peek-rs .rs-frame:has(.rs-still[data-model]) .hint{ top:10px; bottom:auto; font-size:12px; letter-spacing:.06em; padding:5px 10px; }
  .peek-rs .rs-frame .hint.gone{ opacity:0; visibility:hidden; transition:opacity .8s, visibility 0s .8s; }
  .peek-rs.rs-off .rs-frame .hint{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .peek-rs .rs-frame .hint{ display:none !important; } }

/* ---------- AR: "Bekijk in je ruimte" (ar.php / ar.js, 02-10-2026) ---------- */
.peek-rs .rs-ar{ display:flex; flex-direction:column; gap:6px; }
.peek-rs .rs-ar__btn{ appearance:none; cursor:pointer; min-height:44px; padding:0 18px 0 14px; border-radius:999px; border:1px solid rgba(236,235,231,.3);
  background:rgba(8,10,12,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--c-ink);
  display:inline-flex; align-items:center; justify-content:center; gap:10px; align-self:flex-start;
  font:500 13px/1 var(--f-text); letter-spacing:.01em; transition:border-color .3s, background .3s; }
.peek-rs .rs-ar__btn:hover{ border-color:rgba(239,146,33,.7); background:rgba(40,22,6,.45); }
.peek-rs .rs-ar__btn:focus-visible{ outline:2px solid var(--c-focus); outline-offset:3px; }
.peek-rs .rs-ar__btn[aria-busy="true"]{ opacity:.7; cursor:progress; }
.peek-rs .rs-ar__btn svg{ flex:none; }
.peek-rs .rs-ar__note, .peek-rs .rs-ar__status{ margin:0; font:400 12px/1.4 var(--f-mono); letter-spacing:.04em; color:var(--c-ink-3); }
/* Opzet 07-10-2026: kop met "Mobiel"-badge; zonder AR (desktop) een QR-code (SVG uit assets/qr/qr.js, wit voor scanbaarheid),
   één zin en "Kopieer link". Knoppen van 44 px; tekst min. 12 px. */
.peek-rs .rs-ar__kop{ margin:0; font:600 14px/1.3 var(--f-text); letter-spacing:.01em; color:var(--c-ink); }
.peek-rs .rs-ar__desk{ display:flex; align-items:center; gap:18px; max-width:52ch; }
.peek-rs .rs-ar__desk[hidden]{ display:none; }
.peek-rs .rs-ar__qr{ flex:none; width:148px; height:148px; border-radius:10px; overflow:hidden; background:#fff; }
.peek-rs .rs-ar__qr svg{ display:block; width:100%; height:100%; }
.peek-rs .rs-ar__qr:empty{ display:none; }
.peek-rs .rs-ar__desk-body{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.peek-rs .rs-ar__desk-text{ margin:0; font:400 15px/1.5 var(--f-text); color:var(--c-ink); }
.peek-rs .rs-ar__share{ display:flex; flex-wrap:wrap; gap:10px; margin:0; }
.peek-rs .rs-ar__share .rs-ar__btn{ align-self:auto; text-decoration:none; }
@media (max-width:480px){ .peek-rs .rs-ar__desk{ flex-direction:column; align-items:flex-start; } }
/* Kleur (Ruud 02-10-2026, themekleuren uit theme.json): primair = gevuld Peek-oranje met donkere tekst ("Bekijk in je ruimte",
   "Kopieer link"); secundair = oranje rand ("Deel"). Focusring: --c-focus met marge. */
.peek-rs .rs-ar__btn--main, .peek-rs .rs-ar__copy{ background:var(--c-orange); border-color:var(--c-orange); color:#0B0E11; font-weight:600; }
.peek-rs .rs-ar__btn--main:hover, .peek-rs .rs-ar__copy:hover{ background:#F5A94A; border-color:#F5A94A; }
.peek-rs .rs-ar__btn--sec{ background:transparent; border-color:rgba(239,146,33,.75); color:var(--c-ink); }
.peek-rs .rs-ar__btn--sec:hover{ border-color:var(--c-orange); background:rgba(239,146,33,.12); }
.peek-rs .rs-ar__btn[hidden], .peek-rs .rs-ar__note[hidden], .peek-rs .rs-ar__height[hidden]{ display:none; }
.peek-rs .rs-ar__status:empty{ display:none; }
.peek-rs .rs-ar__dev{ margin:0; font:400 12px/1.4 var(--f-mono); letter-spacing:.04em; color:var(--c-ink-2, var(--c-ink)); }
.peek-rs .rs-ar__height{ display:flex; align-items:center; gap:10px; margin:0; font:400 12px/1.4 var(--f-mono); letter-spacing:.04em; color:var(--c-ink-3); }
.peek-rs .rs-ar__select{ min-height:44px; padding:0 12px; font:400 14px/1.2 var(--f-mono); color:var(--c-ink); background:#0a0c0f; border:1px solid rgba(236,235,231,.3); border-radius:8px; }
.peek-rs .rs-ar__select:focus-visible{ outline:2px solid var(--c-focus); outline-offset:3px; }
.peek-rs .rs-ar__stage{ position:relative; width:100%; aspect-ratio:4/3; border:1px solid var(--c-line); border-radius:10px; overflow:hidden; background:#0a0c0f; }
.peek-rs .rs-ar__stage model-viewer{ width:100%; height:100%; background:transparent; --poster-color:transparent; --progress-bar-color:var(--c-orange); }
.peek-rs .rs-ar__row{ position:absolute; left:12px; right:12px; bottom:12px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; pointer-events:none; }
.peek-rs .rs-ar__row .rs-ar__btn{ pointer-events:auto; }
.peek-rs .rs-ar__btn--in{ background:var(--c-orange); border-color:var(--c-orange); color:#0B0E11; font-weight:600; }
.peek-rs .rs-ar__btn--xr{ background:transparent; border-color:rgba(239,146,33,.75); color:var(--c-ink); }
.peek-rs .rs-ar__btn--xr:hover{ background:rgba(239,146,33,.12); border-color:var(--c-orange); }
.peek-rs .rs-ar__btn--xr:disabled{ opacity:.6; cursor:progress; }
/* WebXR dom-overlay (ar-xr.js): alleen zichtbaar binnen de AR-sessie op een telefoon (:xr-overlay); een bril heeft geen overlay. */
.rs-xr{ display:none; }
.rs-xr:xr-overlay{ display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:10px; position:fixed; inset:0; padding:0 16px calc(16px + env(safe-area-inset-bottom)); pointer-events:none; background:transparent; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:#ECEBE7; text-shadow:0 1px 3px rgba(0,0,0,.8); }
.rs-xr__gl{ position:fixed; left:0; top:0; width:1px; height:1px; opacity:0; pointer-events:none; }
.rs-xr__status{ margin:0; font-size:15px; line-height:1.4; text-align:center; max-width:36ch; }
.rs-xr__status:empty{ display:none; }
.rs-xr__cfd{ margin:0; font-size:12px; letter-spacing:.04em; opacity:.85; }
.rs-xr__bar{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; pointer-events:auto; }
.rs-xr__b{ appearance:none; cursor:pointer; min-height:44px; padding:0 16px; border-radius:999px; border:1px solid rgba(236,235,231,.45); background:rgba(10,12,15,.72); color:#ECEBE7; font:600 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.rs-xr__b--stop{ background:#EF9221; border-color:#EF9221; color:#0B0E11; }
.rs-xr__b:focus-visible{ outline:2px solid #8FD8FF; outline-offset:3px; }
/* Kijkvenster iPhone (ar-kijk.js): camera als achtergrond, transparante canvas erover, knoppen onderaan. */
html.rs-kijk-open{ overflow:hidden; }
.rs-kijk{ position:fixed; inset:0; z-index:10000; background:#000; touch-action:none; overscroll-behavior:none; -webkit-user-select:none; user-select:none; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:#ECEBE7; }
.rs-kijk__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; touch-action:none; pointer-events:none; }
.rs-kijk__gl{ position:absolute; inset:0; width:100% !important; height:100% !important; display:block; touch-action:none; }
.rs-kijk__ui{ position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:center; gap:10px; padding:0 16px calc(16px + env(safe-area-inset-bottom)); text-shadow:0 1px 3px rgba(0,0,0,.8); pointer-events:none; }
.rs-kijk__hint{ margin:0; font-size:15px; line-height:1.4; text-align:center; max-width:36ch; }
.rs-kijk__status{ margin:0; font-size:13px; line-height:1.4; text-align:center; }
.rs-kijk__status:empty{ display:none; }
.rs-kijk__cfd{ margin:0; font-size:12px; letter-spacing:.04em; opacity:.85; }
.rs-kijk__bar{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; pointer-events:auto; }
.rs-kijk__b{ appearance:none; cursor:pointer; min-height:44px; padding:0 16px; border-radius:999px; border:1px solid rgba(236,235,231,.45); background:rgba(10,12,15,.72); color:#ECEBE7; font:600 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.rs-kijk__b--stop{ background:#EF9221; border-color:#EF9221; color:#0B0E11; }
.rs-kijk__b:focus-visible{ outline:2px solid #8FD8FF; outline-offset:3px; }
/* Brilmodus (stereo naast elkaar): camerabeeld in beide helften, alleen de knop "Verlaat brilmodus" en de tip. */
.rs-kijk__video--r{ display:none; }
.rs-kijk--bril .rs-kijk__video{ display:block; width:50%; right:auto; }
.rs-kijk--bril .rs-kijk__video--r{ left:50%; }
.rs-kijk--bril .rs-kijk__hint, .rs-kijk--bril .rs-kijk__cfd, .rs-kijk--bril .rs-kijk__status, .rs-kijk--bril .rs-kijk__b:not([data-a="bril"]){ display:none; }
.rs-kijk--bril .rs-kijk__ui{ top:0; justify-content:space-between; padding-top:calc(10px + env(safe-area-inset-top)); }
.rs-kijk--bril .rs-kijk__bar{ width:100%; justify-content:space-between; }
.rs-kijk--bril .rs-kijk__bar::before{ content:""; }
.rs-kijk--bril .rs-kijk__b[data-a="bril"]{ background:rgba(10,12,15,.55); opacity:.8; }
.rs-kijk__tip{ margin:0; padding:10px 16px; border-radius:12px; background:rgba(10,12,15,.72); font-size:15px; line-height:1.4; text-align:center; max-width:32ch; }
.rs-kijk__tip[hidden]{ display:none; }
/* VR-link (vr-link.js): alleen ingevoegd bij immersive-vr. Holo-blauw op donker: contrast > 10:1. */
.peek-rs .rs-ar__vr{ display:inline-block; margin:0; font:500 13px/1.4 var(--f-mono); letter-spacing:.04em; color:var(--c-holo, #8FD8FF); text-decoration:underline; text-underline-offset:3px; }
.peek-rs .rs-ar__vr:hover{ color:#fff; }
.peek-rs .rs-ar__vr:focus-visible{ outline:2px solid var(--c-focus); outline-offset:3px; }