.flavor-visual{cursor:grab;touch-action:pan-y;user-select:none;outline:none}
.flavor-visual:active{cursor:grabbing}
.flavor-visual:focus-visible{outline:3px solid var(--ink);outline-offset:-8px}
.flavor-visual img{pointer-events:none}
.flavor-visual.dragging img{transition:opacity .25s,transform .08s;transform:scale(1.025)}
.spin-prompt{position:absolute;z-index:5;bottom:18px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:white;border-radius:30px;padding:10px 14px;font-size:.61rem;font-weight:700;letter-spacing:.11em;box-shadow:4px 4px 0 rgba(255,255,255,.8);transition:.3s}
.spin-prompt span{font-size:1rem;margin-right:7px}.spin-prompt b{margin-left:12px;color:var(--lime)}
.flavor-visual:hover .spin-prompt{transform:translateX(-50%) translateY(-4px)}
.frame-loader{position:absolute;z-index:6;top:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-size:.58rem;font-weight:700;letter-spacing:.12em;opacity:0;transition:.2s}
.frame-loader.active{opacity:1}.frame-loader span{width:12px;height:12px;border:2px solid rgba(17,27,56,.25);border-top-color:var(--ink);border-radius:50%;animation:spin360 .7s linear infinite}
@keyframes spin360{to{transform:rotate(360deg)}}
.potency-number{display:flex;align-items:flex-start;justify-content:center;line-height:.85;font-variant-numeric:tabular-nums;min-width:110px;position:relative;margin-top:12px}
.potency-number .count-up{display:inline-block;min-width:2ch;text-align:right;font:inherit;letter-spacing:inherit}
.potency-number .percent-label{font:700 .85rem 'DM Sans',sans-serif;letter-spacing:-.04em;margin:2px 0 0 4px;color:var(--lime)}
.potency-number .over-label{position:absolute;top:-17px;left:50%;transform:translateX(-50%);font:700 .53rem 'DM Sans',sans-serif;letter-spacing:.18em;color:var(--cream)}
.vape-viewer{position:absolute;inset:48px 0 155px;display:grid;place-items:center;cursor:grab;touch-action:pan-y;user-select:none;outline:none}
.vape-viewer:active{cursor:grabbing}.vape-viewer:focus-visible{outline:3px solid var(--ink);outline-offset:-8px}
.vape-viewer>img{width:84%;height:88%;object-fit:contain;filter:drop-shadow(13px 19px 12px rgba(17,27,56,.18));pointer-events:none;transition:opacity .2s,transform .15s}
.vape-static{cursor:default;touch-action:auto;overflow:hidden}.vape-static:active{cursor:default}.vape-static>img{position:absolute;inset:50% auto auto 50%;width:112%;height:112%;transform:translate(-50%,-50%);object-position:center}
.vape-card:hover .vape-static>img{transform:translate(-50%,-50%) scale(1.025)}
.vape-viewer.dragging>img{transform:scale(1.025)}
.vape-options{position:absolute;left:24px;top:12px;display:flex;gap:7px;z-index:5}
.vape-option{border:1px solid var(--ink);border-radius:18px;background:rgba(255,255,255,.45);padding:7px 9px;font:700 .52rem 'DM Sans';letter-spacing:.06em;cursor:pointer;transition:.25s}
.vape-option:hover,.vape-option.active{background:var(--ink);color:white;transform:translateY(-2px)}
.mini-spin{position:absolute;right:24px;bottom:5px;background:var(--ink);color:white;padding:7px 10px;border-radius:20px;font-size:.5rem;font-weight:700;letter-spacing:.08em;z-index:4}
@media(min-width:561px) and (max-width:900px){.spin-prompt{top:18px;bottom:auto}.frame-loader{top:62px}}
@media(max-width:560px){.spin-prompt{top:12px;bottom:auto;font-size:.54rem;padding:8px 11px}.frame-loader{top:54px}.vape-static>img{width:122%;height:122%}}