.spin-viewer { width:100%; max-width:800px; margin:0 auto; color:#808285; }
.spin-stage { position:relative; width:100%; aspect-ratio:800/533; overflow:hidden; cursor:grab; touch-action:pan-y; user-select:none; background:#fff; }
.spin-stage.is-dragging { cursor:grabbing; }
.spin-stage:focus-visible { outline:3px solid #26a18f; outline-offset:3px; }
.spin-stage .spin-image { display:block; width:100%; height:100%; max-width:none; object-fit:contain; pointer-events:none; transform-origin:center; }
.spin-spots { position:absolute; inset:0; pointer-events:none; }
.spin-spots[hidden] { display:none; }
.spin-spot { position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border:2px solid var(--spot-color); border-radius:50%; color:var(--spot-color)!important; background:rgba(255,255,255,.85); pointer-events:auto; text-decoration:none!important; }
.spin-spot::before,.spin-spot::after { content:''; position:absolute; left:4px; right:4px; top:8px; height:2px; background:currentColor; }
.spin-spot::after { transform:rotate(90deg); }
.spin-tip { display:none; position:absolute; bottom:28px; left:50%; transform:translateX(-50%); width:210px; padding:12px; border:1px solid #eee; background:#fff; color:#333; font:400 13px/1.4 'Titillium Web',sans-serif; text-align:center; box-shadow:0 2px 10px #0002; }
.spin-spot:hover .spin-tip,.spin-spot:focus-visible .spin-tip { display:block; }
.spin-controls { display:flex; justify-content:center; align-items:center; gap:6px; padding:6px 0 0; }
.elementor .spin-controls button { box-sizing:border-box; width:40px; min-height:40px; padding:4px; border:0; border-radius:3px; background:transparent !important; color:#808285 !important; font:400 25px/1 Arial,sans-serif; cursor:pointer; box-shadow:none; text-decoration:none; }
.elementor .spin-controls button:hover,.elementor .spin-controls button:focus-visible { background:#fff9 !important; color:#333 !important; }
.spin-controls button:disabled { opacity:.35; cursor:wait; }
.spin-controls button[aria-pressed=false][data-spin=spots] { opacity:.4; }
.spin-status { margin:0; padding:2px 0 8px; text-align:center; color:#666; font:400 13px/1.4 'Titillium Web',sans-serif; }
@media(max-width:767px) { .spin-spot { width:18px; height:18px; margin:-9px 0 0 -9px; } .spin-spot::before,.spin-spot::after { left:3px; right:3px; top:6px; } .spin-tip { width:150px; font-size:12px; } }