/* Minimal: miniatura con ícono play + modal responsive */

/* --- 1) VIDEO SLIDE en área principal: cuadrado como el resto --- */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image.wcsv-video a.wcsv-video-trigger{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;   /* iguala el tamaño visual con las imágenes */
  overflow: hidden;
}

.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image.wcsv-video a.wcsv-video-trigger > img{
  width: 100%;
  height: 100%;
  object-fit: cover;     /* recorta al centro para que no quede “aplastado” */
  display: block;
}

/* Ícono play */
.woocommerce-product-gallery__image.wcsv-video .wcsv-video-trigger::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  z-index: 2;
}

.woocommerce-product-gallery__image.wcsv-video .wcsv-video-trigger::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-40%, -50%);
  width: 0;
  height: 0;
  border-left: 14px solid rgba(255,255,255,0.95);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  z-index: 3;
}

/* VIDEO THUMB: forzar cuadrado igual a las demás */
.woocommerce-product-gallery .flex-control-thumbs li.wcsv-thumb{
  width: 80px !important;
  height: 80px !important;
  flex: 0 0 80px !important;
  overflow: hidden !important;
  border-radius: 12px;
}

.woocommerce-product-gallery .flex-control-thumbs li.wcsv-thumb img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}

/* Fallback suave (si por tema no queda perfecto): fuerza que los thumbs sean cuadrados SIN deformar. */
.woocommerce-product-gallery .flex-control-thumbs li{
  overflow: hidden;
}
.woocommerce-product-gallery .flex-control-thumbs img{
  display:block;
}

/* --- 2.1) THUMBS mobile: si no entran, que hagan wrap (2 renglones) sin solaparse --- */
@media (max-width: 768px){
  .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs{
    display: flex !important;
    flex-wrap: wrap !important;
    height: auto !important;
    justify-content: flex-start;
    align-content: flex-start;
    row-gap: 12px;
    column-gap: 12px;
    padding-right: 0 !important; /* algunos themes lo setean inline */
  }
  .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li{
    margin: 0 !important;
    position: static !important;
  }
  /* En mobile mejor usar gap, no margenes en cada thumb */
  .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs img{
    margin-right: 0 !important;
  }
}

/* --- 3) MODAL: realmente responsive y botón cerrar fijo arriba-derecha --- */
.wcsv-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.wcsv-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
}

.wcsv-content{
  position: relative;
  z-index: 1;
  /* Ajuste por ancho y por alto (para que NUNCA se corte) */
  width: min(420px, 92vw, calc((92vh - 80px) * 9 / 16));
  max-height: 92vh;
}

.wcsv-close{
  position: absolute !important;
  top: -12px !important;
  right: -12px !important;

  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  border-radius: 999px !important;

  background: rgba(0,0,0,0.55) !important;
  color: #fff !important;

  font-size: 22px !important;
  line-height: 1 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;
  z-index: 5 !important;

  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
  text-transform: none !important;
}

.wcsv-close:hover{ background: rgba(0,0,0,0.65) !important; }

.wcsv-iframe-wrap{
  width: 100%;
  aspect-ratio: 9 / 16; /* Shorts: vertical */
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  max-height: 92vh; /* seguridad extra */
}

.wcsv-iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Evita scroll de fondo cuando el modal está abierto */
body.wcsv-modal-open{
  overflow: hidden;
}

/* Mobile: un poco más grande sin pasarse de pantalla */
@media (max-width: 480px){
  .wcsv-content{
    width: min(96vw, calc((92vh - 70px) * 9 / 16));
  }
  .wcsv-close{
    top: -10px;
    right: -10px;
  }
}