.product-video-thumb {
  position: relative;
  display: block;
  cursor: pointer;
}

#product-video-position {
  display: none !important;
}

/* Main image play overlay (big button) */
.product-video-main-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  z-index: 1205; /* above mousetrap (z-index:999) */
  pointer-events: auto;
}

/* When any Magnific popup is open, don't let overlay interfere with background clicks */
.mfp-ready .product-video-main-overlay,
.mfp-zoom-out-cur .product-video-main-overlay {
  pointer-events: none !important;
}

/* lightGallery open: also ensure overlay never blocks backdrop clicks */
.lg-on .product-video-main-overlay {
  pointer-events: none !important;
}

/* Scheme A: top-right close button for lightGallery (mobile-friendly) */
.pv-lg-top-close {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 2147483647;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 30px;
  line-height: 38px;
  text-align: center;
  padding: 0;
  cursor: pointer;
  pointer-events: auto !important;
  touch-action: manipulation;
}

.pv-lg-top-close:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

/* When using thumbnail mode, ensure the fallback UL is visible and sized */
.image-additional.product-video-only {
  display: block !important;
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}

.image-additional.product-video-only > li {
  display: inline-block;
  vertical-align: top;
  margin-right: 8px;
}

/* Bigger play badge on main image */
.product-video-main-overlay:after {
  width: 96px;
  height: 96px;
  margin-left: -48px;
  margin-top: -48px;
  border-width: 4px;
  /* Main image overlay: lighter dark background to not block details */
  background: rgba(0, 0, 0, 0.45);
}

.product-video-main-overlay:before {
  margin-left: -10px;
  margin-top: -18px;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 30px solid rgba(255, 255, 255, 0.98);
}

@media (max-width: 768px) {
  .product-video-main-overlay {
    width: 96px;
    height: 96px;
  }

  .product-video-main-overlay:after {
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -40px;
  }

  .product-video-main-overlay:before {
    margin-left: -8px;
    margin-top: -15px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 26px solid rgba(255, 255, 255, 0.98);
  }
}

/* Keep popup slightly higher to avoid overlapping fixed widgets (e.g. translators) */
#product-video-modal .modal-dialog {
  margin-top: 20px;
  margin-bottom: 220px;
}

.product-video-mfp-modal .mfp-container {
  padding-top: 20px;
  padding-bottom: 220px;
}

.product-video-mfp-modal .mfp-content {
  max-width: 980px;
}

.product-video-thumb:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  margin-top: -32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  border: 3px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 1;
}

/* Main image overlay uses .product-video-thumb too; override its background only */
.product-video-main-overlay.product-video-thumb:after {
  background: rgba(0, 0, 0, 0.45) !important;
}

.product-video-thumb:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -6px;
  margin-top: -13px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 22px solid rgba(255, 255, 255, 0.98);
  /* Keep triangle crisp and above the circle */
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25));
  pointer-events: none;
  z-index: 2;
}

/* Safety: if slick clones slides, don't show duplicated video thumb */
.slick-cloned .product-video-thumb {
  display: none !important;
}

/* Mobile popup position: 10% from top */
@media (max-width: 768px) {
  /* Override theme's mobile modal translate(0,50%) for our video modal only */
  #product-video-modal.modal.in .modal-dialog {
    transform: translate(0, 5%) !important;
  }

  #product-video-modal .modal-dialog {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Magnific popup vertical align: top with 10vh offset */
  .product-video-mfp-modal .mfp-container:before {
    display: none !important;
  }

  .product-video-mfp-modal .mfp-content {
    vertical-align: top !important;
    margin-top: 5vh;
  }

  .product-video-mfp-modal .mfp-container {
    padding-top: 0 !important;
    padding-bottom: 14vh !important;
  }

  .product-video-only .product-video-thumb img {
    width: 96px;
    height: 96px;
  }
}