/* WooCommerce Video Featured — Frontend Styles */

/* ── Video wrapper — fixed 230x230 (archive/shop) ─────────────────────── */
.wvf-video-wrapper.wvf-loop {
  display: block;
  width: 230px;
  height: 230px;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  background: transparent;
  margin: 0 auto;
  line-height: 0;
}

.wvf-loop .wvf-iframe {
  position: absolute;
  width: 177.78%;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  border: 0;
  display: block;
  background: transparent;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.wvf-video-wrapper.wvf-loop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: default;
  background: transparent;
}

/* ── Fade-in on iframe load ──────────────────────────────────────────────── */
.wvf-iframe {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.wvf-iframe.wvf-loaded {
  opacity: 1;
}

/* ── Single product — video inside flexslider gallery slide ──────────── */
.wvf-gallery-video-slide .wvf-video-wrapper.wvf-single {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
  background: #000;
}

.wvf-gallery-video-slide .wvf-single .wvf-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  opacity: 1;
}

/* ── Gallery bottom thumbnail — video iframe behind clickable img ───── */
.flex-control-thumbs li .wvf-thumb-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  z-index: 1;
  display: block;
}

/* ── PhotoSwipe lightbox — video slide ───────────────────────────────── */
.pswp__zoom-wrap:has(.wvf-pswp-video) {
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
}

.wvf-pswp-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
}

.wvf-pswp-video iframe {
  width: 80vw;
  height: 45vw;
  max-width: 1280px;
  max-height: 720px;
  border: 0;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .wvf-video-wrapper.wvf-loop {
    width: 100%;
    height: 0;
    padding-top: 100%;
  }
  .wvf-loop .wvf-iframe {
    top: 0;
    height: 100%;
  }

  .wvf-pswp-video iframe {
    width: 95vw;
    height: 53.4vw;
  }
}