#product-image-360 {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition:
    opacity 0.1s ease-in-out;
    -o-transition:
    opacity 0.1s ease-in-out;
    transition:
    opacity 0.1s ease-in-out;
    -o-object-fit: contain;
       object-fit: contain
}

#product-viewer {
  position: relative;
  overflow: hidden; /* Ensure icon stays within bounds */
}

#product-viewer.dragging {
  -webkit-box-shadow: 0 0 10px rgba(0, 100, 200, 0.5);
          box-shadow: 0 0 10px rgba(0, 100, 200, 0.5); /* Subtle blue glow */
}

#drag-icon {
    position: absolute;
    left: 50%;
    bottom: -8px;
    cursor: -webkit-grab;
    cursor: grab;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    -webkit-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* Use flexbox to center the SVG if needed */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

#drag-icon svg {
  width: 100%;  /* Make the SVG fill the container */
  height: 100%;
  display: block; /*removes extra space*/
}