/* Velectronics Software – Woo Product Video (Isolated)
   Scope EVERYTHING under the unique wrapper id that starts with #vspvg-
*/

[id^="vspvg-"]{ isolation:isolate; }
[id^="vspvg-"], [id^="vspvg-"] *{ box-sizing:border-box; }

[id^="vspvg-"] .vspvg-card{
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.75);
}

[id^="vspvg-"] .vspvg-title{
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 10px 0;
  opacity: .9;
}

[id^="vspvg-"] .vspvg-video{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 12px;
  overflow:hidden;
}

[id^="vspvg-"] .vspvg-hint{
  font-size: 12px;
  opacity: .7;
  margin-top: 8px;
}

/* If the theme has a tight thumbnails row, keep it neat */
.woocommerce-product-gallery [id^="vspvg-"]{
  width: 100%;
}


/* ===============================
   ✅ Woo/Astra gallery integration
   Adds a VIDEO thumbnail on the LEFT thumbnails column
================================ */

/* Video thumb behaves like other thumbs */
.woocommerce-product-gallery .flex-control-thumbs li.vspvg-thumb{
  position: relative;
  cursor: pointer;
}

.woocommerce-product-gallery .flex-control-thumbs li.vspvg-thumb::after{
  content: "▶";
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  line-height: 1;
  opacity: .85;
  pointer-events:none;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

.woocommerce-product-gallery .flex-control-thumbs li.vspvg-thumb img{
  display:block;
  width: 100%;
  height: auto;
}

/* Main video should fill the stage like images */
.woocommerce-product-gallery .vspvg-main-video{
  width: 100%;
}

.woocommerce-product-gallery .vspvg-main-player{
  width: 100%;
  height: auto;
  display:block;
}