/* drevko-ar.css v2.0 — „Obraz na vašej stene" (3D + AR) */
.drevko-ar-wrap{margin:10px 0 4px}
.p-detail-inner-header-mobile .drevko-ar-wrap{margin:8px 0 10px}
.drevko-ar-btn{position:relative;display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border:0;border-radius:999px;background:var(--drevko-ar-color,#111);color:#fff;font:inherit;font-weight:700;font-size:14px;line-height:1.2;letter-spacing:.15px;cursor:pointer;isolation:isolate;box-shadow:0 2px 6px rgba(0,0,0,.12);transition:transform .18s ease,filter .18s ease;-webkit-tap-highlight-color:transparent}
/* jednofarebné plné tlačidlo, bez animácií; pod ním jemná statická žiara v rovnakej farbe */
.drevko-ar-btn::after{content:"";position:absolute;top:8px;right:14px;bottom:-4px;left:14px;border-radius:inherit;background:inherit;filter:blur(12px);opacity:.30;z-index:-1;transition:opacity .18s ease}
.drevko-ar-btn svg{width:20px;height:20px;flex:0 0 auto;color:#fff}
.drevko-ar-btn>span{color:#fff}
/* iskričky – iná (zlatá) farba, jemný pomalý pohyb (bez blikania: priehľadnosť sa nemení) */
.drevko-ar-spark{position:absolute;top:-9px;right:12px;width:17px;height:17px;pointer-events:none;color:var(--drevko-ar-spark,#f7b733);filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));z-index:2;animation:drevko-ar-float 3.6s ease-in-out infinite alternate;transform-origin:50% 50%}
.drevko-ar-spark svg{width:100%;height:100%;display:block;color:inherit}
.drevko-ar-spark+.drevko-ar-spark{top:-2px;right:-3px;width:10px;height:10px;animation-duration:4.4s;animation-delay:-1.8s}
@keyframes drevko-ar-float{0%{transform:translate(0,1px) rotate(-8deg) scale(.94)}100%{transform:translate(1px,-2px) rotate(12deg) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.drevko-ar-spark{animation:none}}
.drevko-ar-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.drevko-ar-btn:hover::after{opacity:.65}
.drevko-ar-btn:active{transform:translateY(0) scale(.985)}
.drevko-ar-btn:focus-visible{outline:2px solid var(--drevko-ar-color,#111);outline-offset:3px}

.drevko-ar-overlay{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;background:rgba(20,20,20,.62);z-index:100000010;display:flex;align-items:center;justify-content:center;padding:16px}
.drevko-ar-modal{position:relative;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);width:min(1080px,100%);height:min(680px,calc(100vh - 32px));height:min(680px,calc(100dvh - 32px));background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.4);font-family:inherit;color:#222;box-sizing:border-box}
.drevko-ar-modal *{box-sizing:border-box}
.drevko-ar-close{position:absolute;top:10px;right:10px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.9);font-size:26px;line-height:1;cursor:pointer;color:#444;padding:0;z-index:5}
.drevko-ar-close:hover{color:#000;background:#fff}

/* ĽAVÁ STRANA – scéna v mierke */
.drevko-ar-left{position:relative;min-height:0;background:#ece9e3}
.drevko-ar-stage{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background:#ece9e3}
.drevko-ar-wall{position:absolute;top:0;left:0;transform-origin:0 0;opacity:0;transition:opacity .25s ease;pointer-events:none;will-change:transform;z-index:0}
.drevko-ar-wall svg{display:block;width:100%;height:100%}
.drevko-ar-shadow{transition:x .52s cubic-bezier(.22,.8,.3,1),y .52s cubic-bezier(.22,.8,.3,1),width .52s cubic-bezier(.22,.8,.3,1),height .52s cubic-bezier(.22,.8,.3,1)}
.drevko-ar-stage model-viewer{position:relative;z-index:1;display:block;width:100%;height:100%;background:transparent;--poster-color:transparent;--progress-bar-color:#111;--progress-bar-height:2px}
.drevko-ar-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#777;font-size:14px;pointer-events:none;z-index:2}
.drevko-ar-anchor{width:0;height:0;opacity:0;pointer-events:none}
.drevko-ar-dim{padding:3px 8px;border-radius:999px;background:rgba(17,17,17,.82);color:#fff;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;pointer-events:none;transition:opacity .2s ease}
.drevko-ar-stage.is-back .drevko-ar-dim{opacity:0}
/* kóta sa kotví hranou (nie stredom) k okraju obrazu, aby ho neprekrývala */
.drevko-ar-dim-w{transform:translateY(calc(50% + 5px))}
.drevko-ar-dim-h{transform:translateX(calc(50% + 6px))}
/* gestá – animované ikonky */
.drevko-ar-gest{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;flex-wrap:wrap;z-index:3;pointer-events:none}
.drevko-ar-gest span{display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 8px;border-radius:999px;background:rgba(255,255,255,.88);color:#333;font-size:12px;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.drevko-ar-gest em{font-style:normal}
.drevko-ar-g{width:24px;height:24px;flex:0 0 auto;color:#222;overflow:visible}
.drevko-ar-g-rot{width:36px}
.drevko-ar-g-hand{animation:drevko-ar-g-drag 2.6s ease-in-out infinite}
.drevko-ar-g-wheel{animation:drevko-ar-g-wheel 1.8s ease-in-out infinite}
.drevko-ar-g-p1{animation:drevko-ar-g-p1 2.2s ease-in-out infinite alternate}
.drevko-ar-g-p2{animation:drevko-ar-g-p2 2.2s ease-in-out infinite alternate}
@keyframes drevko-ar-g-drag{0%,100%{transform:translateX(-7px)}50%{transform:translateX(7px)}}
@keyframes drevko-ar-g-wheel{0%{transform:translateY(-1.5px);opacity:1}60%{transform:translateY(5px);opacity:.15}100%{transform:translateY(-1.5px);opacity:1}}
@keyframes drevko-ar-g-p1{0%{transform:translate(2.5px,-2.2px)}100%{transform:translate(-3px,2.6px)}}
@keyframes drevko-ar-g-p2{0%{transform:translate(-2.5px,2.2px)}100%{transform:translate(3px,-2.6px)}}
@media (prefers-reduced-motion:reduce){.drevko-ar-g-hand,.drevko-ar-g-wheel,.drevko-ar-g-p1,.drevko-ar-g-p2{animation:none}.drevko-ar-shadow{transition:none}}

/* PRAVÁ STRANA – veľkosť, QR / AR */
.drevko-ar-right{display:flex;flex-direction:column;gap:14px;padding:26px 24px 22px;overflow:auto;min-height:0}
.drevko-ar-right h3{margin:0 40px 2px 0;font-size:22px;line-height:1.2}
.drevko-ar-sizes{display:flex;flex-direction:column;gap:8px}
.drevko-ar-sizes-label{font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:#777;font-weight:600}
.drevko-ar-size{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;padding:12px 14px;border:1.5px solid #dedede;border-radius:10px;background:#fff;color:#222;font:inherit;font-size:15px;line-height:1.2;text-align:left;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.drevko-ar-size b{font-weight:700}
.drevko-ar-size span{font-size:13px;color:#777;white-space:nowrap}
.drevko-ar-size:hover{border-color:#111}
.drevko-ar-size.is-active{border-color:#111;background:#f6f6f6;box-shadow:inset 0 0 0 1px #111}
.drevko-ar-size:disabled{cursor:default}
.drevko-ar-hint{font-size:13px;color:#555;margin:0;line-height:1.45}
.drevko-ar-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;border:0;border-radius:12px;background:var(--drevko-ar-color,#111);color:#fff;font:inherit;font-weight:700;font-size:16px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.16)}
.drevko-ar-go svg{width:22px;height:22px}
.drevko-ar-go:hover{filter:brightness(1.12)}
.drevko-ar-go:disabled{opacity:.55;cursor:default}
.drevko-ar-qr{display:flex;gap:14px;align-items:center;padding:12px;border:1px solid #ececec;border-radius:12px;background:#fafafa;margin-top:auto}
.drevko-ar-qr-img{flex:0 0 auto;padding:6px;background:#fff;border-radius:8px;border:1px solid #eee;line-height:0}
.drevko-ar-qr-img canvas{display:none}
.drevko-ar-qr-img img{width:132px;height:132px;display:block}
.drevko-ar-qr-txt{display:flex;flex-direction:column;gap:3px;font-size:14px;color:#222}
.drevko-ar-qr-txt span{font-size:13px;color:#777}
.drevko-ar-msg{font-size:14px;color:#b3261e}
.drevko-ar-msg:empty{display:none}
body.drevko-ar-open{overflow:hidden}

@media (max-width:860px){
  .drevko-ar-overlay{padding:10px}
  .drevko-ar-modal{grid-template-columns:1fr;grid-template-rows:auto auto;height:auto;max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);overflow:auto;border-radius:14px}
  .drevko-ar-left{height:min(44vh,400px);min-height:240px}
  .drevko-ar-right{padding:16px 16px 18px;gap:12px;overflow:visible}
  .drevko-ar-right h3{font-size:19px}
  .drevko-ar-sizes{flex-direction:row;flex-wrap:wrap}
  .drevko-ar-sizes-label{width:100%}
  .drevko-ar-size{width:auto;flex:1 1 auto;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 12px}
  .drevko-ar-qr{margin-top:0}
  .drevko-ar-gest span em{display:none}
  .drevko-ar-gest span{padding:6px 8px}
}