/*
 * neura-3d viewer — opmaak voor het `product-3d`-blok.
 *
 * Poort van het goedgekeurde AR-prototype (design/ar-prototype), maar
 * merk-neutraal: elke kleur loopt via de gb-/brand-tokenlaag met de
 * prototype-waarde als fallback, zodat het blok op elke site de eigen
 * accentkleur pakt en op Grill Bill er exact zo uitziet als het prototype.
 *
 * De tokens hangen aan de blok-sectie (`.nb--product-3d`), de rest gebruikt de
 * eigen `n3d-`-prefix: dit bestand wordt naast de blokken-CSS geladen en mag
 * daar niets van raken.
 */
.nb--product-3d {
  --n3d-accent: var(--gb-ember, var(--gb-flame, var(--brand-accent, #F39019)));
  --n3d-bg:     var(--gb-charcoal, var(--brand-bg-base, #0A0908));
  --n3d-panel:  var(--gb-coal, #161616);
  --n3d-sheet:  #262421;
  --n3d-line:   rgba(255, 255, 255, .08);
  --n3d-text:   var(--gb-cream, var(--brand-text, #EEE7DB));
  --n3d-muted:  rgba(238, 231, 219, .5);
  --n3d-mono:   var(--gb-font-mono, ui-monospace, "JetBrains Mono", monospace);
  color: var(--n3d-text);
}
.nb--product-3d *, .nb--product-3d *::before, .nb--product-3d *::after { box-sizing: border-box; }

.n3d-head { margin: 0 0 14px; }
.n3d-title { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; margin: 0 0 8px; font-weight: 700; }
.n3d-intro { margin: 0; color: rgba(238, 231, 219, .78); max-width: 60ch; }

.n3d-wrap { position: relative; }
.n3d-stage {
  position: relative; background: var(--n3d-panel); border: 1px solid var(--n3d-line);
  border-radius: 6px; aspect-ratio: 4 / 5; overflow: hidden;
}
@media (min-width: 901px) { .n3d-stage { aspect-ratio: 16 / 10; } }
.n3d-stage model-viewer {
  width: 100%; height: 100%; display: block; position: relative; z-index: 1;
  background: transparent; --poster-color: transparent;
  /* Op `auto` pakte de browser élke veeg over het model als paginascroll en brak
     hij de pointer-reeks af (pointercancel): het model draaide op mobiel in
     stapjes van een paar graden. `pan-y` laat een horizontale veeg volledig bij
     ons (rondom draaien zonder haperen) en houdt verticaal vegen als paginascroll,
     zodat een kader dat het halve scherm vult de pagina niet op slot zet. */
  touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.n3d-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

.n3d-pill,
.n3d-lid, .n3d-fs, .n3d-fsclose {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--n3d-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--n3d-text); background: rgba(10, 9, 8, .62); border: 1px solid var(--n3d-line);
  border-radius: 999px; padding: 8px 12px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.n3d-lid { position: absolute; left: 24px; top: 46px; z-index: 3; }
.n3d-lid:hover, .n3d-lid[data-lid="open"] { border-color: var(--n3d-accent); }
.n3d-lid svg, .n3d-fs svg, .n3d-fsclose svg { width: 13px; height: 13px; }
.n3d-fs { position: absolute; right: 22px; top: 18px; z-index: 3; }
.n3d-fs:hover { border-color: var(--n3d-accent); }
.n3d-fsclose { position: absolute; right: 22px; top: 18px; z-index: 4; display: none; }
.n3d-fsclose:hover { border-color: var(--n3d-accent); }
.n3d-lid:focus-visible, .n3d-fs:focus-visible, .n3d-fsclose:focus-visible,
.n3d-chip:focus-visible { outline: 2px solid var(--n3d-text); outline-offset: 2px; }

/* lightbox: de hele wrap verhuist naar de overlay en weer terug */
.n3d-overlay {
  position: fixed; inset: 0; z-index: 100; background: var(--n3d-bg);
  display: none; flex-direction: column; padding: 14px; gap: 10px;
}
.n3d-overlay.is-open { display: flex; }
.n3d-overlay .n3d-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.n3d-overlay .n3d-stage { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
.n3d-overlay .n3d-fs { display: none; }
.n3d-overlay .n3d-fsclose { display: inline-flex; }
.n3d-overlay .n3d-bgbar { justify-content: center; }
body.n3d-fs-open { overflow: hidden; }
.n3d-wrap.is-placeholder {
  min-height: 200px; border: 1px dashed var(--n3d-line); border-radius: 6px; display: grid;
  place-items: center; font-family: var(--n3d-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--n3d-muted);
}

/* chips-rijen (desktop, buiten de stage) */
.n3d-bgbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.n3d-bgbar .n3d-lbl {
  font-family: var(--n3d-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--n3d-muted); margin-right: 4px;
}
.n3d-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font: 500 12px inherit; color: rgba(238, 231, 219, .78);
  background: var(--n3d-panel); border: 1px solid var(--n3d-line); border-radius: 999px; padding: 7px 12px;
}
.n3d-chip:hover { color: var(--n3d-text); }
.n3d-chip.is-on { border-color: var(--n3d-accent); color: var(--n3d-text); box-shadow: 0 0 0 1px rgba(243, 144, 25, .25) inset; }
.n3d-chip.is-off { opacity: .55; text-decoration: line-through; }
.n3d-chip .n3d-sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .15); }
.n3d-chip svg { width: 14px; height: 14px; }
.n3d-chip input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.n3d-lightchip { gap: 8px; cursor: default; }
.n3d-lightchip input { width: 110px; accent-color: var(--n3d-accent); margin: 0; }
.n3d-lightchip output { font-family: var(--n3d-mono); font-size: 10px; color: var(--n3d-muted); min-width: 34px; }

/* AR-knop in de model-viewer-slot */
.n3d-ar {
  position: absolute; right: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--n3d-accent); color: #140a00; border: 0; border-radius: 999px;
  padding: 12px 18px; font: 600 14px inherit; cursor: pointer;
  box-shadow: 0 8px 24px rgba(243, 144, 25, .28);
}
.n3d-ar svg { width: 18px; height: 18px; }
.n3d-ar:focus-visible { outline: 2px solid var(--n3d-text); outline-offset: 3px; }

.n3d-arhint {
  display: none; position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); z-index: 7;
  max-width: 86%; padding: 10px 14px; border-radius: 12px; background: rgba(10, 9, 8, .82);
  color: var(--n3d-text); font-size: 13px; line-height: 1.4; text-align: center;
}
.n3d-arhint.is-on { display: block; }

.n3d-hud { position: absolute; inset: 14px; pointer-events: none; z-index: 2; }
.n3d-hud i { position: absolute; width: 14px; height: 14px; border-color: var(--n3d-muted); border-style: solid; border-width: 0; }
.n3d-hud .tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.n3d-hud .tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.n3d-hud .bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.n3d-hud .br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.n3d-hint {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2;
  font-family: var(--n3d-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--n3d-muted); white-space: nowrap; pointer-events: none; transition: opacity .4s;
}
.n3d-stage.is-touched .n3d-hint { opacity: 0; }
.n3d-loading {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; padding: 24px;
  font-family: var(--n3d-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--n3d-muted); background: var(--n3d-panel); transition: opacity .5s; pointer-events: none;
}
.n3d-stage.is-ready .n3d-loading { opacity: 0; }

/* maten-strip */
.n3d-dims {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--n3d-line); border-radius: 6px; overflow: hidden; margin-top: 12px;
}
.n3d-dims div { padding: 12px 14px; border-right: 1px solid var(--n3d-line); }
.n3d-dims div:last-child { border-right: 0; }
.n3d-dims b { display: block; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.n3d-dims span {
  font-family: var(--n3d-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--n3d-muted);
}

/* Foto-schuifjes: in de lade, direct onder de achtergrond-chips (viewer.js zet ze
   daar neer). Ingeklapt tot er een achtergrond gekozen is; dan schuiven ze uit via
   grid-template-rows 0fr → 1fr, zodat de hoogte animeert zonder vaste maat. */
.n3d-sheet .n3d-phototools {
  display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(-6px);
  /* visibility: ingeklapt ook uit de tab-volgorde (anders bedient een toetsenbord
     onzichtbare schuifjes); de vertraging laat de inklap-animatie eerst aflopen. */
  visibility: hidden;
  transition: grid-template-rows .32s ease, opacity .24s ease, transform .32s ease, visibility 0s .32s;
}
.n3d-sheet .n3d-phototools-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.n3d-wrap.has-photo .n3d-sheet .n3d-phototools {
  grid-template-rows: 1fr; opacity: 1; transform: none; visibility: visible;
  transition: grid-template-rows .32s ease, opacity .24s ease, transform .32s ease, visibility 0s;
}
.n3d-sheet .n3d-phototools label {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid #3a3733; font-size: 14px;
}
.n3d-sheet .n3d-phototools label:first-child { margin-top: 6px; }
.n3d-sheet .n3d-phototools input[type=range] { flex: 1; max-width: 180px; accent-color: var(--n3d-accent); margin: 0; }
.n3d-sheet .n3d-phototools .n3d-note { display: block; font-size: 12px; line-height: 1.45; color: rgba(238, 231, 219, .78); padding: 8px 0 2px; }
@media (prefers-reduced-motion: reduce) {
  .n3d-sheet .n3d-phototools, .n3d-wrap.has-photo .n3d-sheet .n3d-phototools { transition: none; }
}

/* opties-knop + lade/bottom sheet */
.n3d-opt {
  display: none; position: absolute; left: 12px; bottom: 12px; z-index: 6;
  border-radius: 20px; border: 0; background: rgba(28, 26, 23, .92); color: var(--n3d-text);
  align-items: center; justify-content: center; cursor: pointer;
}
.n3d-fs, .n3d-opt { width: 40px; height: 40px; padding: 0; border-radius: 20px; justify-content: center; gap: 0; }
.n3d-fs svg, .n3d-opt svg { width: 18px; height: 18px; animation: n3d-grow 2.4s ease-in-out infinite; }
@keyframes n3d-grow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
.n3d-wrap.sheet-open .n3d-opt svg { animation: none; }
@media (prefers-reduced-motion: reduce) { .n3d-fs svg, .n3d-opt svg { animation: none; } }

.n3d-sheetbg { display: none; position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .45); }
.n3d-sheet {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 72vh; overflow: auto;
  background: var(--n3d-sheet); color: var(--n3d-text); border-radius: 18px 18px 0 0;
  padding: 8px 18px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .28s ease;
  scrollbar-width: thin; scrollbar-color: rgba(243, 144, 25, .85) transparent;
}
.n3d-sheet::-webkit-scrollbar { width: 6px; }
.n3d-sheet::-webkit-scrollbar-track { background: transparent; }
.n3d-sheet::-webkit-scrollbar-thumb { background: rgba(243, 144, 25, .85); border-radius: 3px; }
.n3d-sheet .n3d-grip { width: 38px; height: 4px; border-radius: 2px; background: #4a463f; margin: 4px auto 10px; }
.n3d-sheet h4 {
  margin: 14px 0 4px; font: 10px/1 var(--n3d-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--n3d-muted);
}
.n3d-sheet .n3d-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid #3a3733; font-size: 14px;
}
.n3d-sheet .n3d-row:last-child { border-bottom: 0; }
.n3d-sheet .n3d-row input[type=range] { flex: 1; max-width: 180px; accent-color: var(--n3d-accent); }
.n3d-sheet .n3d-seg { display: flex; gap: 4px; background: #1c1a17; border-radius: 9px; padding: 3px; }
.n3d-sheet .n3d-seg button { border: 0; background: transparent; color: var(--n3d-muted); font: 500 12px/1 inherit; padding: 7px 10px; border-radius: 7px; cursor: pointer; }
.n3d-sheet .n3d-seg button.is-on { background: #3a3733; color: var(--n3d-text); }
.n3d-sheet .n3d-toggle {
  position: relative; width: 38px; height: 22px; border-radius: 11px; background: #4a463f; border: 0;
  flex: none; transition: background .2s; cursor: pointer;
}
.n3d-sheet .n3d-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 9px;
  background: #fff; transition: transform .2s;
}
.n3d-sheet .n3d-toggle.is-on { background: var(--n3d-accent); }
.n3d-sheet .n3d-toggle.is-on::after { transform: translateX(16px); }
.n3d-sheet .n3d-chips { display: flex; gap: 6px; overflow-x: auto; padding: 6px 0 4px; scrollbar-width: none; scroll-behavior: smooth; }
.n3d-sheet .n3d-chips::-webkit-scrollbar { height: 0; }
.n3d-sheet .n3d-chips button {
  flex: none; border: 1px solid #44413c; background: transparent; color: var(--n3d-text);
  font: 12px/1 inherit; padding: 8px 12px; border-radius: 16px; white-space: nowrap; cursor: pointer;
}
.n3d-sheet .n3d-chips button.is-on { border-color: var(--n3d-accent); }
.n3d-sheet .n3d-lidrow button {
  border: 1px solid var(--n3d-line); background: rgba(255, 255, 255, .06); color: var(--n3d-text);
  font: 500 12px/1 inherit; padding: 9px 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
}
.n3d-sheet .n3d-lidrow button.is-open { border-color: var(--n3d-accent); }
.n3d-sheet .n3d-sub { display: block; font-size: 11px; color: var(--n3d-muted); }
.n3d-sheet .n3d-close, .n3d-sheet .n3d-fsmirror {
  position: absolute; top: 10px; width: 32px; height: 32px; border-radius: 16px; border: 0;
  background: #3a3733; color: var(--n3d-text); display: grid; place-items: center; cursor: pointer;
}
.n3d-sheet .n3d-close { right: 12px; font-size: 16px; }
.n3d-sheet .n3d-fsmirror { right: 52px; }
.n3d-sheet .n3d-fsmirror svg { width: 15px; height: 15px; }
.n3d-wrap.sheet-open .n3d-sheetbg { display: block; }
.n3d-wrap.sheet-open .n3d-sheet { display: block; transform: translateY(0); }

/* AR-only sectie: alleen zichtbaar zolang de wrap `ar-active` heeft (ar-status "presenting") */
.n3d-sheet h4.ar-only,
.n3d-sheet .n3d-row.ar-only { display: none; }
.n3d-wrap.ar-active .n3d-sheet h4.ar-only { display: block; }
.n3d-wrap.ar-active .n3d-sheet .n3d-row.ar-only { display: flex; }

/* delen */
.n3d-sheet .n3d-qrrow { align-items: flex-start; gap: 14px; }
.n3d-sheet .n3d-qr { background: var(--n3d-text); padding: 6px; border-radius: 6px; width: 104px; height: 104px; flex: none; display: grid; place-items: center; }
.n3d-sheet .n3d-qr canvas, .n3d-sheet .n3d-qr img { width: 92px; height: 92px; display: block; image-rendering: pixelated; }
.n3d-sheet .n3d-qrrow p { margin: 0; font-size: 12px; line-height: 1.45; color: rgba(238, 231, 219, .78); }
.n3d-sheet .n3d-share { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 4px; }
.n3d-sheet .n3d-share a, .n3d-sheet .n3d-share button {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid #44413c; background: transparent;
  color: var(--n3d-text); font: 12px/1 inherit; padding: 9px 12px; border-radius: 16px;
  text-decoration: none; cursor: pointer;
}
.n3d-sheet .n3d-share svg { width: 14px; height: 14px; }
.n3d-sheet .n3d-share .is-ok { border-color: var(--n3d-accent); }
/* De QR wijst naar deze pagina: op het toestel zelf is dat zinloos. */
.n3d-wrap.is-touch .n3d-qrrow, .n3d-wrap.is-touch .n3d-fsmirror,
.n3d-wrap.ar-active .n3d-qrrow, .n3d-wrap.ar-active .n3d-fsmirror { display: none; }

/* ── QR-kaart linksonder in de stage (desktop) ──────────────────────────────
   viewer.js bouwt 'm alleen op een muis-apparaat; deze regels verbergen 'm
   bovendien tijdens een AR-sessie en op touch, net als het QR-rijtje in de lade.
   Linksonder botst niet met de opties-knop (linksboven) of volledig scherm
   (rechtsboven). */
.n3d-qrcard {
  position: absolute; left: 14px; bottom: 14px; z-index: 5; transition: left .28s ease;
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: 132px;
  padding: 12px 12px 10px; border-radius: 14px;
  background: rgba(28, 26, 23, .92); color: var(--n3d-text);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
}
.n3d-qrcard-code { background: var(--n3d-text); padding: 6px; border-radius: 6px; display: grid; place-items: center; }
.n3d-qrcard-code canvas, .n3d-qrcard-code img { width: 84px; height: 84px; display: block; image-rendering: pixelated; }
.n3d-qrcard p { margin: 0; font-size: 11px; line-height: 1.35; text-align: center; color: rgba(238, 231, 219, .82); }
.n3d-qrcard-x {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 11px; background: transparent; color: rgba(238, 231, 219, .7); cursor: pointer;
}
.n3d-qrcard-x:hover { color: var(--n3d-text); background: rgba(238, 231, 219, .12); }
.n3d-qrcard-x svg { width: 13px; height: 13px; }
.n3d-qrcard.is-collapsed { display: none; }

/* Ingeklapt: dezelfde hoek, alleen nog een ronde pil met het QR-icoon. */
.n3d-qrpill {
  display: none; position: absolute; left: 14px; bottom: 14px; z-index: 5; transition: left .28s ease;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 20px;
  align-items: center; justify-content: center; cursor: pointer;
  background: rgba(28, 26, 23, .92); color: var(--n3d-text);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.n3d-qrpill.is-on { display: inline-flex; }
.n3d-qrpill:hover { color: var(--n3d-accent); }
.n3d-qrpill svg { width: 19px; height: 19px; }
.n3d-qrcard:focus-visible, .n3d-qrcard-x:focus-visible, .n3d-qrpill:focus-visible {
  outline: 2px solid var(--n3d-accent); outline-offset: 2px;
}
/* Nooit boven een AR-camerabeeld of op een toestel waar de QR naar zichzelf wijst. */
.n3d-wrap.is-touch .n3d-qrcard, .n3d-wrap.is-touch .n3d-qrpill,
.n3d-wrap.ar-active .n3d-qrcard, .n3d-wrap.ar-active .n3d-qrpill { display: none; }
@media (hover: none) and (pointer: coarse), (max-width: 720px) {
  .n3d-qrcard, .n3d-qrpill { display: none !important; }
}

/* mobiel: chips-rijen weg, alles in de bottom sheet */
@media (hover: none) and (pointer: coarse), (max-width: 720px) {
  .n3d-bgbar { display: none !important; }
  .n3d-opt { display: inline-flex; }
  .n3d-lid, .n3d-fs { display: none; }
  .n3d-sheet { display: block; }
}
/* Mobiel: viewer.js verhuist de lade + achtergrond naar <body> (.n3d-portal) zolang
   hij open staat. Binnen een fotokader met een eigen containing block (transform,
   overflow) schoof een position:fixed-lade anders onder het kader uit en stond de
   sluitknop buiten beeld. De portal-wrap spiegelt de klassen van de echte wrap
   (sheet-open, has-photo, ar-active, is-touch), dus alle regels hierboven gelden. */
.n3d-portal { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.n3d-portal > * { pointer-events: auto; }
.n3d-portal .n3d-sheetbg { z-index: 1000; }
.n3d-portal .n3d-sheet { z-index: 1001; max-height: min(72vh, calc(100dvh - 56px)); overscroll-behavior: contain; }
body.n3d-sheet-open { overflow: hidden; }
/* desktop: dezelfde inhoud als lade links, niet-modaal zodat je kunt blijven draaien */
@media (min-width: 721px) and (hover: hover) {
  .n3d-bgbar { display: none !important; }
  .n3d-lid { display: none; }
  .n3d-opt { display: inline-flex; top: 46px; left: 24px; bottom: auto; }
  .n3d-sheet {
    display: block; position: absolute; top: 0; bottom: 0; left: 0; right: auto; width: 300px;
    max-height: none; border-radius: 0 18px 18px 0; padding: 52px 18px 18px;
    transform: translateX(-24px); opacity: 0; pointer-events: none;
    transition: transform .28s ease, opacity .28s ease;
    background: rgba(28, 26, 23, .94);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 8px 0 30px rgba(0, 0, 0, .35);
  }
  .n3d-wrap.sheet-open .n3d-sheet { transform: none; opacity: 1; pointer-events: auto; }
  /* De niet-modale lade is 300px breed en z-index 61: die legt zich volledig over
     de QR-kaart linksonder heen. In fullscreen gaat de lade automatisch open, dus
     zonder deze regel is de kaart daar nooit zichtbaar. Schuif hem mee naar rechts. */
  .n3d-wrap.sheet-open .n3d-qrcard, .n3d-wrap.sheet-open .n3d-qrpill { left: 314px; }
  .n3d-sheet .n3d-grip { display: none; }
  .n3d-sheetbg { display: none !important; }
}