/* ===== Product Video Module (Osstem) =====
   Shortcode: [product_video]
   Purpose: responsive 16:9 product video with centered 80% width.
*/

.u-product-video {
  --pv-width: 80%;
  --pv-max-width: 960px;
  --pv-radius: 12px;
  --pv-accent: var(--color-primary, #EB6100);

  margin-block: clamp(18px, 3vw, 42px);
}

.u-product-video__inner {
  width: var(--pv-width);
  max-width: var(--pv-max-width);
  margin-inline: auto;
}

.u-product-video__frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;

  /* Orange border only on top and bottom, as requested. */
  border-top: 3px solid var(--pv-accent);
  border-bottom: 3px solid var(--pv-accent);
  border-left: 0;
  border-right: 0;
  border-radius: var(--pv-radius);
  box-sizing: border-box;
}

/* Robust 16:9 ratio. This works even if a CSS optimizer strips aspect-ratio. */
.u-product-video__frame::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.u-product-video__iframe,
.u-product-video__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Force Elementor shortcode widgets containing this module to have real width.
   Without this, Elementor's "width: initial" can collapse the video to 0px. */
.elementor-widget-shortcode:has(.u-product-video) {
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: 100% !important;
}

.elementor-widget-shortcode:has(.u-product-video) > .elementor-widget-container,
.elementor-widget-shortcode:has(.u-product-video) .elementor-shortcode {
  width: 100% !important;
  max-width: 100% !important;
}

/* Root wrapper should always span the available content area. */
.u-product-video {
  width: 100%;
  max-width: 100%;
}




/* Tablet: a little wider so the video does not feel too small. */
@media (max-width: 1024px) {
  .u-product-video__inner {
    width: 90%;
  }
}

/* Mobile: use full available container width. */
@media (max-width: 767px) {
  .u-product-video__inner {
    width: 100%;
    max-width: 100%;
  }
}