.product-360-section{--360-primary-color: rgb(var(--color-button));--360-accent-color: rgb(var(--color-accent));--360-text-color: rgb(var(--color-foreground));--360-background: rgb(var(--color-background));--360-border-color: rgba(var(--color-foreground), .1);--360-shadow: 0 8px 32px rgba(var(--color-shadow), .15);--360-transition: var(--duration-short) ease}.product-360-wrapper{width:100%;position:relative}.product-360-container{position:relative;width:100%;cursor:grab;-webkit-user-select:none;user-select:none;overflow:hidden;touch-action:none;background:var(--360-background);border:1px solid var(--360-border-color);transition:var(--360-transition);will-change:transform}.product-360-container:hover{box-shadow:var(--360-shadow)}.product-360-container:active{cursor:grabbing}.product-360-viewer{width:100%;height:auto;display:block;transition:transform var(--duration-short) cubic-bezier(.4,0,.2,1);transform-origin:center center;backface-visibility:hidden;will-change:transform}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--360-background);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:opacity var(--duration-default) ease}.loading-spinner{width:4rem;height:4rem;border:3px solid rgba(var(--color-foreground),.1);border-top:3px solid var(--360-primary-color);border-radius:50%;animation:spin 1s linear infinite}.loading-text{margin-top:1.5rem;font-size:1.4rem;color:var(--360-text-color);font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.progress-bar{width:20rem;height:.4rem;background:rgba(var(--color-foreground),.1);border-radius:.2rem;margin-top:1.5rem;overflow:hidden}.progress-fill{height:100%;background:var(--360-accent-color);width:0%;transition:width .3s ease;border-radius:inherit}.viewer-indicators{position:absolute;top:1.5rem;right:1.5rem;display:flex;flex-direction:column;gap:.8rem;z-index:5}.indicator{background:rgba(var(--color-foreground),.8);color:var(--360-background);padding:.6rem 1.2rem;border-radius:1.5rem;font-size:1.2rem;font-weight:500;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap}.frame-indicator{position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%);background:rgba(var(--color-foreground),.8);color:var(--360-background);padding:.4rem 1.2rem;border-radius:1.2rem;font-size:1.1rem;z-index:5;font-weight:500}.auto-rotate-btn{position:absolute;bottom:1.5rem;right:1.5rem;background:rgba(var(--color-foreground),.8);color:var(--360-background);border:none;width:4rem;height:4rem;border-radius:50%;cursor:pointer;font-size:1.6rem;z-index:5;transition:var(--360-transition);display:flex;align-items:center;justify-content:center}.auto-rotate-btn:hover{background:var(--360-primary-color);transform:scale(1.05)}.auto-rotate-btn.active{background:var(--360-accent-color)}.controls-container{margin-top:2rem;text-align:center}.controls-info{color:rgba(var(--color-foreground),.7);font-size:1.4rem;margin-bottom:1.5rem;line-height:1.4}.controls-grid{display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem;align-items:center;max-width:30rem;margin:0 auto}.control-btn{background:var(--360-primary-color);color:rgb(var(--color-button-text));border:none;width:5rem;height:5rem;border-radius:50%;cursor:pointer;font-size:2rem;font-weight:700;transition:var(--360-transition);touch-action:manipulation;display:flex;align-items:center;justify-content:center}.control-btn:hover:not(:disabled){background:rgba(var(--color-button),.8);transform:scale(1.05)}.control-btn:active{transform:scale(.95)}.control-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.reset-btn{background:var(--360-accent-color);color:rgb(var(--color-button-text));border:none;padding:1.2rem 2.4rem;border-radius:2.5rem;cursor:pointer;font-size:1.4rem;font-weight:500;transition:var(--360-transition);white-space:nowrap}.reset-btn:hover{background:rgba(var(--color-accent),.8);transform:translateY(-1px)}@media screen and (max-width: 768px){.viewer-indicators{top:1rem;right:1rem;gap:.6rem}.indicator{padding:.4rem .8rem;font-size:1.1rem}.frame-indicator{bottom:1rem;padding:.3rem .8rem;font-size:1rem}.auto-rotate-btn{bottom:1rem;right:1rem;width:3.6rem;height:3.6rem;font-size:1.4rem}.controls-grid{gap:2rem}.control-btn{width:5.5rem;height:5.5rem;font-size:2.2rem}.controls-info{font-size:1.3rem;padding:0 1rem}}@media screen and (max-width: 480px){.control-btn{width:5rem;height:5rem;font-size:2rem}.reset-btn{padding:1rem 2rem;font-size:1.3rem}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.product-360-viewer{transition:none!important}}.product-360-container:focus{outline:2px solid var(--360-accent-color);outline-offset:2px}.control-btn:focus,.reset-btn:focus,.auto-rotate-btn:focus{outline:2px solid var(--360-accent-color);outline-offset:2px}@media (prefers-contrast: high){.indicator,.frame-indicator,.auto-rotate-btn{border:1px solid}}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/*# sourceMappingURL=/cdn/shop/t/5/assets/product-360-viewer.css.map */