.viewer-360{display:block;position:relative;width:100%}.viewer-360--modal{height:100%}.viewer-360__canvas{min-height:250px;position:relative;width:100%;aspect-ratio:1 / 1;overflow:hidden;border-radius:12px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y pinch-zoom}.viewer-360--modal .viewer-360__canvas{border-radius:0;min-height:100%;aspect-ratio:auto}.viewer-360__canvas--dragging{cursor:grabbing}.viewer-360__canvas:focus{outline:2px solid var(--color-foreground);outline-offset:2px}.viewer-360__canvas:focus:not(:focus-visible){outline:none}.viewer-360__frame{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .05s ease-out;pointer-events:none}.viewer-360__frame--active{opacity:1;pointer-events:auto}.viewer-360__image{width:100%;height:100%;object-fit:contain;pointer-events:none}.viewer-360__image--placeholder{width:60%;height:60%;object-fit:contain;opacity:.3}.viewer-360__loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:rgb(var(--color-background-rgb) / .9);z-index:10;transition:opacity .3s ease,visibility .3s ease}.viewer-360__loading--hidden{opacity:0;visibility:hidden;pointer-events:none}.viewer-360__spinner{width:40px;height:40px;border:3px solid rgb(var(--color-foreground-rgb) / .1);border-top-color:var(--color-foreground);border-radius:50%;animation:viewer360-spin .8s linear infinite}@keyframes viewer360-spin{to{transform:rotate(360deg)}}.viewer-360__hint{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;padding:10px 16px;background:rgb(var(--color-foreground-rgb) / .85);color:var(--color-background);border-radius:100px;font-family:var(--font-body--family),var(--font-body--fallback);font-size:13px;font-weight:500;transition:opacity .3s ease,transform .3s ease;pointer-events:none;z-index:5}.viewer-360__hint--hidden{opacity:0;transform:translate(-50%) translateY(10px)}.viewer-360__hint-icon{flex-shrink:0;animation:viewer360-hint-pulse 2s ease-in-out infinite}@keyframes viewer360-hint-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.viewer-360__hint-text{white-space:nowrap}.viewer-360__progress{margin-top:16px;padding:0 16px}.viewer-360--modal .viewer-360__progress{position:absolute;bottom:80px;left:0;right:0;margin-top:0}.viewer-360__progress-track{width:100%;height:4px;background:rgb(var(--color-foreground-rgb) / .1);border-radius:2px;overflow:hidden}.viewer-360__progress-fill{height:100%;width:10%;background:var(--color-foreground);border-radius:2px;transition:width .1s ease-out}.viewer-360__controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px}.viewer-360--modal .viewer-360__controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);margin-top:0}.viewer-360__control{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:var(--color-background);border:1px solid rgb(var(--color-foreground-rgb) / .15);border-radius:50%;color:var(--color-foreground);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,transform .2s ease}.viewer-360__control:hover{background:rgb(var(--color-foreground-rgb) / .05);border-color:rgb(var(--color-foreground-rgb) / .25)}.viewer-360__control:active{transform:scale(.95)}.viewer-360__control:focus-visible{outline:2px solid var(--color-foreground);outline-offset:2px}.viewer-360__control svg{flex-shrink:0}.viewer-360__pause-icon,.viewer-360--playing .viewer-360__play-icon{display:none}.viewer-360--playing .viewer-360__pause-icon{display:block}media-gallery{position:relative}.product-360-trigger{position:absolute;z-index:20;bottom:16px;right:16px;top:auto;left:auto;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--color-background);border:1px solid rgb(var(--color-foreground-rgb) / .15);border-radius:var(--style-border-radius-button, 4px);color:var(--color-foreground);font-family:var(--font-body--family),var(--font-body--fallback);font-size:13px;font-weight:600;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,transform .15s ease;box-shadow:0 2px 8px #00000014}.product-360-trigger:hover{background:rgb(var(--color-foreground-rgb) / .05);border-color:rgb(var(--color-foreground-rgb) / .25);transform:translateY(-1px);box-shadow:0 4px 12px #0000001f}.product-360-trigger:active{transform:translateY(0)}.product-360-trigger:focus-visible{outline:2px solid var(--color-foreground);outline-offset:2px}.product-360-trigger__icon{display:flex;width:20px;height:20px;flex-shrink:0}.product-360-trigger__text{white-space:nowrap}.viewer-360-dialog{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-width:100%;max-height:100%;margin:0;padding:0;border:none;background:var(--color-background);overflow:hidden}.viewer-360-dialog::backdrop{background:#000000b3}.viewer-360-dialog__close{position:absolute;top:16px;right:16px;z-index:var(--layer-raised, 100);display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:var(--color-background);border:1px solid rgb(var(--color-foreground-rgb) / .15);border-radius:50%;color:var(--color-foreground);cursor:pointer;transition:background-color .2s ease,border-color .2s ease;box-shadow:0 2px 8px #0000001a}.viewer-360-dialog__close:hover{background:rgb(var(--color-foreground-rgb) / .05);border-color:rgb(var(--color-foreground-rgb) / .25)}.viewer-360-dialog__close:focus-visible{outline:2px solid var(--color-foreground);outline-offset:2px}.viewer-360-dialog__close svg{width:20px;height:20px}.viewer-360-dialog__content{width:100%;height:100%;display:flex;align-items:center;justify-content:center}@media screen and (min-width:750px){.viewer-360-dialog{width:90vw;height:90vh;max-width:900px;max-height:900px;margin:auto;border-radius:12px;box-shadow:0 20px 60px #0000004d}.viewer-360-dialog__close{top:20px;right:20px}}@media screen and (max-width:749px){.viewer-360__hint{bottom:16px;padding:8px 14px;font-size:12px}.viewer-360__controls{gap:8px;margin-top:16px}.viewer-360__control{width:40px;height:40px}.viewer-360--modal .viewer-360__controls{bottom:16px}.viewer-360--modal .viewer-360__progress{bottom:70px}.product-360-trigger{top:12px;right:12px;bottom:auto;left:auto;padding:6px 12px;font-size:12px}.product-360-trigger__icon{width:18px;height:18px}}
/*# sourceMappingURL=/cdn/shop/t/1/assets/viewer-360-dialog.css.map */