/* Happy Hover Video for WooCommerce (Media Picker) */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  position: relative;
  overflow: hidden;
}

/* Video layer */
.happy-hover-video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 2;
}

.happy-hover-video__el {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Only products that actually have a hover video */
@media (hover: hover) and (pointer: fine) {
  .woocommerce
    ul.products
    li.product.happy-has-hover-video:hover
    .happy-hover-video,
  .woocommerce-page
    ul.products
    li.product.happy-has-hover-video:hover
    .happy-hover-video {
    opacity: 1;
  }

  .woocommerce ul.products li.product.happy-has-hover-video:hover img,
  .woocommerce-page ul.products li.product.happy-has-hover-video:hover img {
    opacity: 0;
  }
}

/* Touch devices: don't show hover video */
@media (hover: none) {
  .happy-hover-video {
    display: none !important;
  }
}