.spin360__slide { background: #fff; cursor: pointer; overflow: hidden; user-select: none; }
.spin360__slide .spin360__image { cursor: ew-resize !important; height: 100%; max-height: 100%; max-width: 100%; object-fit: contain; width: 100%; }
.spin360__thumb { background: #fff; color: #1e2024; cursor: pointer; flex-direction: column; font-weight: 700; gap: 2px; justify-content: center; }
.spin360__thumb--dark { background: #24242a; color: #fff; }
.spin360__thumb:hover, .spin360__thumb.swiper-slide-thumb-active { border-color: var(--theme-base-color); }
.spin360__thumb-icon { font-size: 18px; line-height: 1; }
.spin360__thumb-arrow { font-size: 18px; line-height: 1; }
.spin360__expand { align-items: center; background: transparent; border: 0; color: #8b8d92; cursor: pointer; display: inline-flex; height: 42px; justify-content: center; padding: 8px; position: absolute; right: 12px; top: 10px; width: 42px; z-index: 3; }
.spin360__expand:hover { color: #34363a; }
.spin360__hint { align-items: center; background: rgba(62, 64, 70, .86); border: 0; border-radius: 28px; bottom: 18px; color: #fff; cursor: pointer; display: inline-flex; font-size: 15px; gap: 7px; left: 50%; padding: 12px 22px; position: absolute; transform: translateX(-50%); white-space: nowrap; z-index: 3; }
.spin360__hint-arrow { font-size: 22px; line-height: 12px; }
.spin360__loader { align-items: center; background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.08); border-radius: 50%; bottom: 18px; box-shadow: 0 2px 10px rgba(0,0,0,.12); display: inline-flex; height: 32px; justify-content: center; left: 18px; opacity: 0; pointer-events: none; position: absolute; transition: opacity .2s ease, visibility .2s ease; width: 32px; z-index: 3; }
.spin360__loader-ring { animation: spin360-loader-rotate .85s linear infinite; background: conic-gradient(var(--theme-base-color) var(--spin360-load-progress, 12deg), rgba(65,68,75,.16) 0); border-radius: inherit; display: block; height: 18px; position: relative; width: 18px; }
.spin360__loader-ring::after { background: #fff; border-radius: inherit; content: ''; inset: 3px; position: absolute; }
.spin360__loader--visible { opacity: 1; visibility: visible; }
.spin360__loader--complete { opacity: 0; visibility: hidden; }
@keyframes spin360-loader-rotate { to { transform: rotate(360deg); } }
.spin360-overlay { align-items: center; background: rgba(0, 0, 0, .94); display: flex; inset: 0; justify-content: center; position: fixed; touch-action: none; z-index: 2147483000; }
.spin360-overlay__stage { touch-action: none; align-items: center; display: flex; height: 100%; justify-content: center; max-height: 100vh; max-width: 100vw; position: relative; width: 100%; }
.spin360-overlay__image { cursor: ew-resize; height: auto; max-height: 100%; max-width: 100%; object-fit: contain; user-select: none; width: auto; }
.spin360-overlay__close { align-items: center; background: rgba(255,255,255,.14); border: 0; border-radius: 50%; color: #fff; cursor: pointer; display: inline-flex; font-size: 34px; height: 44px; justify-content: center; line-height: 1; position: absolute; right: 22px; top: 18px; width: 44px; z-index: 2; }
.spin360-overlay__label { align-items: center; background: rgba(55,55,58,.86); border-radius: 24px; bottom: 22px; color: #fff; display: inline-flex; font-size: 15px; gap: 7px; left: 50%; padding: 10px 18px; pointer-events: none; position: absolute; transform: translateX(-50%); }
.spin360-overlay__label span { font-size: 21px; line-height: 12px; }
html.spin360-lock, html.spin360-lock body { overflow: hidden !important; }
@media (max-width: 1024px) { .spin360__expand { right: 6px; top: 4px; } .spin360__hint { bottom: 12px; font-size: 14px; padding: 10px 17px; } .spin360__loader { bottom: 12px; left: 12px; } .spin360-overlay__close { right: 12px; top: 12px; } }
.spin360-overlay__loader { align-items: center; background: rgba(20,20,22,.82); border: 1px solid rgba(255,255,255,.28); border-radius: 32px; bottom: 22px; color: #fff; display: inline-flex; font-size: 19px; font-weight: 600; gap: 13px; left: 22px; opacity: 0; padding: 15px 22px; pointer-events: none; position: absolute; transition: opacity .18s ease, visibility .18s ease; visibility: hidden; z-index: 3; }
.spin360-overlay__loader--visible { opacity: 1; visibility: visible; }
.spin360-overlay__loader-ring { display: block; flex: 0 0 32px; height: 32px; width: 32px; }
.spin360-overlay__loader-ring svg { display: block; height: 32px; overflow: visible; width: 32px; }
.spin360-overlay__loader-ring-track, .spin360-overlay__loader-ring-progress { fill: none; stroke-width: 4; }
.spin360-overlay__loader-ring-track { stroke: rgba(255,255,255,.25); }
.spin360-overlay__loader-ring-progress { animation: spin360-full-progress-orbit 1.1s linear infinite; stroke: #fff; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; transform-origin: 50% 50%; transition: stroke-dashoffset .16s linear; }
@keyframes spin360-full-progress-orbit { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
.spin360-overlay__loader-text { line-height: 32px; }
@media (max-width: 1024px) { .spin360-overlay__loader { bottom: 14px; left: 14px; } }
.spin360-overlay__loader--center { bottom: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.spin360-overlay--loading .spin360-overlay__image { cursor: wait; }
@media (max-width: 1024px) { .spin360-overlay__loader--center { bottom: auto; left: 50%; } }