.woo360-wrap { width: 100%; }
.woo360-viewer{
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  overflow: hidden;
  background: #fafafa;
  user-select: none;
  touch-action: pan-y;
}
.woo360-viewer.is-dragging { cursor: grabbing; }
.woo360-viewer.woo360-ready { cursor: grab; }
.woo360-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
}
.woo360-hint{
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  transition: opacity .2s ease;
}
.woo360-thumb{
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 6px 6px 0;
  border: 1px solid rgba(0,0,0,.12);
}
.woo360-stage{ position:relative; width:100%; height:100%; }
.woo360-loader{
  position:absolute; left:10px; right:10px; bottom:10px;
  height:6px; border-radius:999px; background:rgba(0,0,0,.08);
  overflow:hidden;
}
.woo360-bar{ height:100%; width:0%; background:rgba(0,0,0,.35); transition: width .2s ease; }

.woo360-shadow{
  position:absolute; left:10%; right:10%; bottom:8%;
  height:14%; border-radius:50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.22), rgba(0,0,0,0) 70%);
  pointer-events:none;
}
.woo360-highlight{
  position:absolute; left:0; right:0; top:0; height:45%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
  pointer-events:none;
}