/**
 * SarvTheme — Product Media styles (frontend only).
 *
 * Video (and future media) overlays inside the gallery thumbnail strip and main
 * stage. The admin "Media" meta box is rendered + styled by the shared meta box
 * framework (Theme\Meta), so no admin CSS lives here.
 */

/* ---------- Frontend: gallery video overlays ---------- */
.st-gallery__thumb--video,
.st-gallery__stage--video {
  --st-media-overlay-bg: rgb(0 0 0 / 0.38);
}

.st-gallery__thumb--video {
  position: relative;
}

.st-gallery__thumb--video .st-gallery__thumb-img,
.st-gallery__thumb--video .st-gallery__thumb-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.st-media-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  border-radius: inherit;
  background: var(--st-media-overlay-bg, rgb(0 0 0 / 0.38));
  color: var(--st-color-primary, #0d6efd);
}

.st-media-overlay--large-center .st-media-overlay__icon {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.35));
}

.st-gallery__stage-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  border-radius: inherit;
}

.st-gallery__stage--video .st-gallery__stage-overlay .st-media-overlay {
  background: rgb(0 0 0 / 0.28);
}

.st-media-overlay--stage .st-media-overlay__icon--stage {
  width: clamp(52px, 12vw, 72px);
  height: clamp(52px, 12vw, 72px);
  filter: drop-shadow(0 4px 14px rgb(0 0 0 / 0.4));
}

/* "+ More" slot when the first hidden item is a video */
.st-gallery__thumb--more.st-gallery__thumb--video .st-media-overlay {
  z-index: 1;
  background: rgb(0 0 0 / 0.45);
}

.st-gallery__thumb--more.st-gallery__thumb--video .st-gallery__thumb-more-overlay {
  z-index: 2;
}

@media (max-width: 767px) {
  .st-media-overlay--large-center .st-media-overlay__icon {
    width: 28px;
    height: 28px;
  }
}