/* product-viewer.css */

/* Hide the overlay until JS is ready */
.pv-container .pv-overlay {
  display: none;
}

/* Once we add .js-ready, show it normally */
.pv-container.js-ready .pv-overlay {
  display: flex;  /* or block/flex, whatever your layout needs */
}

/* Container just wraps the image */
.pv-container {
  display: inline-block;
  position: relative;
  cursor: grab;
}

/* Grabbing state */
.pv-container.dragging {
  cursor: grabbing;
}

/* The overlay now a centered semi-transparent button */
.pv-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.5em 1em;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 1em;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  z-index: 10;
  pointer-events: auto;   /* allow clicking */
  white-space: nowrap;
}

/* Hide it when loading is done or when not needed */
.pv-overlay.hidden {
  display: none; !important;
}

/* Ensure the image fills its parent */
.pv-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;   /* drag catchers are on the image element */
}

/* 1) never show overlay on auto-load viewers */
.pv-container .pv-overlay {
  display: none !important;
}

/* 2) show on click-to-load only once JS has initialized */
.pv-container[data-load-on-click="true"].js-ready .pv-overlay {
  display: flex !important;
}

/* 3) now hide it again when the loader finishes */
.pv-container[data-load-on-click="true"].js-ready .pv-overlay.hidden {
  display: none !important;
}


/* Make each viewer block-level and centered */
.pv-container {
  display: block;
  margin: 1.5em auto;  /* vertical gutter + auto-horizontal centering */
  max-width: 100%;     /* never overflow its container */
}