/*! Lucide 3D/AR prehliadač · JOGISE s.r.o. 2026 · v1.0.0 */
.lu3d-open, .lu3d-dlg, .lu3d, .lu3d * { box-sizing: border-box; }

/* ───────── tlačidlo na produktovej stránke ───────── */
.lu3d-open {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 12px; border-radius: 999px; font: 600 14px/1.1 inherit; font-family: inherit;
  color: #fff; background: var(--lu3d-accent, #1f6fd1); box-shadow: 0 2px 10px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.18);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; -webkit-tap-highlight-color: transparent; z-index: 5;
}
.lu3d-open:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.25); filter: brightness(1.06); }
.lu3d-open:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--lu3d-accent, #1f6fd1); }
.lu3d-open svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lu3d-open span { white-space: nowrap; }
.lu3d-open small { display: none; }
.lu3d-open--float { position: absolute; left: 12px; top: 12px; }
.lu3d-open--inline { margin: 10px 0; }
.lu3d-open--inline small { display: block; font-weight: 400; font-size: 12px; opacity: .9; margin-top: 2px; }
.lu3d-open--inline .lu3d-open-txt { display: flex; flex-direction: column; }
@media (max-width: 480px) { .lu3d-open--float { left: 8px; top: 8px; padding: 8px 13px 8px 10px; font-size: 13px; } }
.lu3d-host-rel { position: relative !important; }
@keyframes lu3d-pulse { 0% { box-shadow: 0 0 0 0 rgba(31,111,209,.55), 0 2px 10px rgba(0,0,0,.22); } 70% { box-shadow: 0 0 0 14px rgba(31,111,209,0), 0 2px 10px rgba(0,0,0,.22); } 100% { box-shadow: 0 0 0 0 rgba(31,111,209,0), 0 2px 10px rgba(0,0,0,.22); } }
.lu3d-open--pulse { animation: lu3d-pulse 2.2s ease-out 3; }
@media (prefers-reduced-motion: reduce) { .lu3d-open--pulse { animation: none; } .lu3d-open { transition: none; } }

/* ───────── modálne okno ───────── */
html.lu3d-lock, html.lu3d-lock body { overflow: hidden !important; }
dialog.lu3d-dlg {
  --lu-accent: var(--lu3d-accent, #1f6fd1); --lu-ink: #101114; --lu-ink2: #5b5d63; --lu-bg: #f1f0ec; --lu-card: #ffffff; --lu-ring: rgba(16,17,20,.14);
  padding: 0; border: 0; margin: auto; width: min(1120px, 96vw); height: min(780px, 92dvh); max-width: none; max-height: none;
  border-radius: 18px; overflow: hidden; background: var(--lu-bg); color: var(--lu-ink); box-shadow: 0 30px 90px rgba(0,0,0,.45);
}
dialog.lu3d-dlg::backdrop { background: rgba(9,11,15,.66); backdrop-filter: blur(3px); }
@media (max-width: 700px) { dialog.lu3d-dlg { width: 100vw; height: 100dvh; border-radius: 0; } }

/* ───────── prehliadač (spoločný pre okno aj vložený režim) ───────── */
.lu3d { --lu-accent: var(--lu3d-accent, #1f6fd1); --lu-ink: #101114; --lu-ink2: #5b5d63; --lu-bg: #f1f0ec; --lu-card: #fff; --lu-ring: rgba(16,17,20,.14);
  position: relative; width: 100%; height: 100%; color: var(--lu-ink); font-family: inherit; line-height: 1.35; }
.lu3d-stage { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 30%, #ffffff 0%, #f1f0ec 55%, #e4e2dc 100%); transition: background .5s ease; overflow: hidden; }
.lu3d-night .lu3d-stage { background: radial-gradient(120% 90% at 50% 38%, #232733 0%, #11141b 55%, #07080c 100%); }
.lu3d-poster { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 84px); object-fit: contain; padding: 5%; background: transparent; opacity: 1; transition: opacity .5s ease; pointer-events: none; filter: saturate(.9); }
.lu3d-ready .lu3d-poster { opacity: 0; }
.lu3d-mv { position: absolute; left: 0; top: 0; right: 0; bottom: 84px; width: 100%; height: calc(100% - 84px); background: transparent; --poster-color: transparent; --progress-bar-color: transparent; --progress-mask: transparent; outline: none; }
.lu3d-mv:focus-visible { outline: 3px solid var(--lu-accent); outline-offset: -3px; }

.lu3d-title { position: absolute; left: 18px; top: 14px; right: 70px; z-index: 6; pointer-events: none; text-shadow: 0 1px 8px rgba(255,255,255,.7); }
.lu3d-night .lu3d-title { text-shadow: none; }
.lu3d-title b { display: block; font-size: 17px; font-weight: 700; letter-spacing: .01em; color: var(--lu-ink); }
.lu3d-night .lu3d-title b { color: #f4f4f6; }
.lu3d-title small { display: block; margin-top: 2px; font-size: 12px; color: var(--lu-ink2); letter-spacing: .04em; }
.lu3d-night .lu3d-title small { color: #aeb2bd; }

.lu3d-close { all: unset; box-sizing: border-box; cursor: pointer; position: absolute; right: 12px; top: 10px; z-index: 8; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 1px 6px rgba(0,0,0,.2); color: #101114; -webkit-tap-highlight-color: transparent; }
.lu3d-close:hover { background: #fff; }
.lu3d-close:focus-visible { outline: 3px solid var(--lu-accent); outline-offset: 2px; }
.lu3d-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.lu3d-loading { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: var(--lu-ink2); pointer-events: none; transition: opacity .3s ease; text-align: center; padding: 0 16px; }
.lu3d-night .lu3d-loading { color: #aeb2bd; }
.lu3d-ready .lu3d-loading { opacity: 0; }
.lu3d-bar { width: 180px; height: 4px; border-radius: 4px; background: rgba(120,120,130,.25); overflow: hidden; }
.lu3d-bar i { display: block; height: 100%; width: 0%; background: var(--lu-accent); border-radius: 4px; transition: width .2s ease; }
.lu3d-error .lu3d-loading { color: #b3261e; }
.lu3d-error .lu3d-bar { display: none; }

/* panel nástrojov */
.lu3d-tools { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9; display: flex; gap: 4px; padding: 6px; width: max-content; max-width: calc(100% - 16px); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  border-radius: 999px; background: rgba(255,255,255,.82); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); box-shadow: 0 8px 28px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.7); }
.lu3d-tools::-webkit-scrollbar { display: none; }
.lu3d-night .lu3d-tools { background: rgba(32,35,45,.78); box-shadow: 0 8px 28px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08); }
.lu3d-tool { all: unset; box-sizing: border-box; cursor: pointer; flex: none; min-width: 58px; padding: 7px 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; border-radius: 999px; color: #2a2c33; font: 600 11px/1.1 inherit; font-family: inherit; -webkit-tap-highlight-color: transparent; transition: background .15s ease, color .15s ease; user-select: none; }
.lu3d-night .lu3d-tool { color: #d6d9e2; }
.lu3d-tool svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lu3d-tool:hover { background: rgba(16,17,20,.07); }
.lu3d-night .lu3d-tool:hover { background: rgba(255,255,255,.1); }
.lu3d-tool[aria-pressed="true"] { background: var(--lu-accent); color: #fff; }
.lu3d-tool:focus-visible { outline: 3px solid var(--lu-accent); outline-offset: 1px; }
.lu3d-tool[hidden] { display: none; }
.lu3d-tool--ar { background: #101114; color: #fff; }
.lu3d-night .lu3d-tool--ar { background: #fff; color: #101114; }
.lu3d-tool--ar:hover { background: #2a2d36; }
.lu3d-night .lu3d-tool--ar:hover { background: #e6e8ee; }
@media (max-width: 520px) { .lu3d-mv { bottom: 92px; height: calc(100% - 92px); } .lu3d-poster { height: calc(100% - 92px); } .lu3d-tool { min-width: 52px; padding: 6px 7px 5px; font-size: 10.5px; } .lu3d-tools { bottom: max(12px, env(safe-area-inset-bottom)); } .lu3d-title b { font-size: 15px; } }
.lu3d-hint { position: absolute; left: 0; right: 0; bottom: 94px; text-align: center; z-index: 5; font-size: 12px; color: var(--lu-ink2); pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.lu3d-night .lu3d-hint { color: #8d92a0; }
.lu3d-ready .lu3d-hint { opacity: .85; }
.lu3d-touched .lu3d-hint { opacity: 0 !important; }
@media (max-width: 520px) { .lu3d-hint { bottom: 84px; } }

/* rozmery */
.lu3d-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .25s ease; overflow: visible; }
.lu3d-dims-on .lu3d-lines, .lu3d-dims-on .lu3d-dot, .lu3d-dims-on .lu3d-dimlabel { opacity: 1; }
.lu3d-lines line { stroke: var(--lu-accent); stroke-width: 2; stroke-linecap: round; }
.lu3d-night .lu3d-lines line { stroke: #7fb4ff; }
.lu3d-dot { all: unset; display: block; box-sizing: border-box; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2.5px solid var(--lu-accent); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.lu3d-dimlabel { all: unset; display: block; box-sizing: border-box; pointer-events: none; opacity: 0; transition: opacity .25s ease; padding: 4px 9px; border-radius: 999px; background: var(--lu-accent); color: #fff; font: 700 12px/1 inherit; font-family: inherit; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.28); }
.lu3d-dimlabel em { font-style: normal; font-weight: 500; opacity: .85; margin-right: 4px; }
.lu3d-dimnote { position: absolute; right: 16px; top: 62px; z-index: 6; font-size: 11px; color: var(--lu-ink2); opacity: 0; transition: opacity .25s ease; pointer-events: none; text-align: right; max-width: 200px; }
.lu3d-dims-on .lu3d-dimnote { opacity: .9; }
.lu3d-night .lu3d-dimnote { color: #8d92a0; }

/* QR okno pre AR z počítača */
.lu3d-qr { position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); z-index: 12; width: min(300px, calc(100% - 28px)); padding: 16px 16px 14px; border-radius: 16px; background: #fff; color: #101114; box-shadow: 0 16px 50px rgba(0,0,0,.35); text-align: center; }
.lu3d-qr[hidden] { display: none; }
.lu3d-qr b { display: block; font-size: 15px; margin-bottom: 4px; }
.lu3d-qr p { margin: 0 0 10px; font-size: 12.5px; color: #4b4d54; }
.lu3d-qr .lu3d-qrimg { display: inline-block; padding: 8px; border-radius: 10px; border: 1px solid rgba(16,17,20,.14); line-height: 0; }
.lu3d-qr .lu3d-qrimg img { width: 176px; height: 176px; image-rendering: pixelated; }
.lu3d-qr button { all: unset; cursor: pointer; display: block; margin: 10px auto 0; font-size: 12px; color: #1f6fd1; text-decoration: underline; }

/* ───────── prezentácia (showcase) ───────── */
.lu3d-show { --lu-accent: var(--lu3d-accent, #1f6fd1); position: relative; min-height: 100dvh; display: flex; flex-direction: column; background: #0d0f14; color: #f2f3f6; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden; }
.lu3d-show * { box-sizing: border-box; }
.lu3d-show-head { display: flex; align-items: center; gap: 16px; padding: 14px 22px; z-index: 5; }
.lu3d-show-brand { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: #cdd2de; }
.lu3d-show-brand span { color: var(--lu-accent); }
.lu3d-show-sub { font-size: 13px; color: #8e94a4; flex: 1; }
.lu3d-show-ctl { display: flex; gap: 8px; }
.lu3d-show-ctl button { all: unset; box-sizing: border-box; cursor: pointer; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.08); color: #e6e8ef; font: 600 13px/1 inherit; font-family: inherit; transition: background .15s; }
.lu3d-show-ctl button:hover { background: rgba(255,255,255,.16); }
.lu3d-show-ctl button[aria-pressed="true"] { background: var(--lu-accent); color: #fff; }
.lu3d-show-ctl button:focus-visible { outline: 3px solid var(--lu-accent); outline-offset: 2px; }
.lu3d-show-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr); gap: 0; min-height: 0; }
.lu3d-show-stage { position: relative; min-height: 460px; }
.lu3d-show-stage .lu3d { position: absolute; inset: 0; }
.lu3d-show-stage.lu3d-compare { display: grid; grid-template-columns: 1fr 1fr; }
.lu3d-show-stage.lu3d-compare .lu3d-pane { position: relative; }
.lu3d-pane .lu3d { position: absolute; inset: 0; }
.lu3d-pane-tag { position: absolute; left: 16px; top: 54px; z-index: 11; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(16,17,20,.78); color: #fff; }
.lu3d-pane-tag.alt { background: var(--lu-accent); }
.lu3d-show-info { padding: 28px 30px 22px; display: flex; flex-direction: column; gap: 16px; background: linear-gradient(180deg, #151822, #0d0f14); overflow: auto; }
.lu3d-show-kicker { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #8e94a4; font-weight: 700; }
.lu3d-show-name { font-size: clamp(26px, 3.2vw, 42px); line-height: 1.05; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.lu3d-show-sku { font-size: 13px; color: #8e94a4; }
.lu3d-show-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lu3d-chip { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.08); color: #d6d9e2; }
.lu3d-chip.hot { background: rgba(31,111,209,.22); color: #9cc4ff; }
.lu3d-show-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lu3d-stat { padding: 12px 12px 10px; border-radius: 14px; background: rgba(255,255,255,.055); }
.lu3d-stat b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.lu3d-stat span { font-size: 11px; color: #8e94a4; letter-spacing: .04em; }
.lu3d-show-bullets { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; color: #c9cddb; }
.lu3d-show-bullets li { display: flex; gap: 10px; align-items: flex-start; }
.lu3d-show-bullets li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--lu-accent); }
.lu3d-show-photo { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.055); }
.lu3d-show-photo img { width: 86px; height: 86px; object-fit: contain; border-radius: 10px; background: #fff; flex: none; }
.lu3d-show-photo p { margin: 0; font-size: 12.5px; color: #aab0bf; }
.lu3d-show-photo p b { color: #e8eaf0; display: block; font-size: 13px; margin-bottom: 2px; }
.lu3d-show-note { font-size: 11.5px; color: #6f7587; margin-top: auto; }
.lu3d-show-strip { display: flex; gap: 10px; padding: 12px 22px 16px; overflow-x: auto; scrollbar-width: thin; z-index: 5; background: #0a0c10; }
.lu3d-thumb { all: unset; box-sizing: border-box; cursor: pointer; flex: none; width: 96px; border-radius: 12px; background: rgba(255,255,255,.06); padding: 6px; text-align: center; transition: background .15s, transform .15s; -webkit-tap-highlight-color: transparent; }
.lu3d-thumb:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.lu3d-thumb[aria-current="true"] { background: var(--lu-accent); }
.lu3d-thumb:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lu3d-thumb img { display: block; width: 100%; height: 64px; object-fit: contain; border-radius: 8px; background: #fff; }
.lu3d-thumb span { display: block; margin-top: 5px; font-size: 11px; font-weight: 600; color: #e6e8ef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lu3d-progress { height: 3px; background: rgba(255,255,255,.08); }
.lu3d-progress i { display: block; height: 100%; width: 0; background: var(--lu-accent); }
@media (max-width: 900px) { .lu3d-show-main { grid-template-columns: 1fr; } .lu3d-show-stage { min-height: 62dvh; } .lu3d-show-info { padding: 20px 18px; } .lu3d-show-head { flex-wrap: wrap; padding: 12px 14px; } .lu3d-show-sub { display: none; } .lu3d-show-strip { padding: 10px 14px 14px; } }

/* žiara svietiacich častí (len v noci, keď svietidlo svieti) */
.lu3d-glow { all: unset; display: block; box-sizing: border-box; width: var(--lu-glow, 120px); height: var(--lu-glow, 120px); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .7s ease;
  background: radial-gradient(circle, rgba(255,232,185,.95) 0%, rgba(255,201,120,.55) 15%, rgba(255,168,72,.22) 38%, rgba(255,150,50,.07) 58%, rgba(255,150,50,0) 72%); }
.lu3d-night.lu3d-lit .lu3d-glow { opacity: 1; }
.lu3d:focus, .lu3d:focus-visible { outline: none; }

/* režim bez ovládania (porovnanie) */
.lu3d-bare .lu3d-tools, .lu3d-bare .lu3d-title, .lu3d-bare .lu3d-hint, .lu3d-bare .lu3d-dimnote, .lu3d-bare .lu3d-qr { display: none !important; }
.lu3d-bare .lu3d-mv { bottom: 0; height: 100%; } .lu3d-bare .lu3d-poster { height: 100%; }
.lu3d-pane:last-child .lu3d-pane-tag { top: 16px; }
/* úzke panely porovnania: iba ikony */
.lu3d-pane .lu3d-tool { min-width: 44px; padding: 8px 9px; } .lu3d-pane .lu3d-tool span { display: none; }