/** Shopify CDN: Minification failed

Line 79:23 Unexpected "*"

**/
.video-section__media {
  --ratio-percent: 56.25%;
  position: relative;
  padding-bottom: calc(var(--ratio-percent) - var(--media-border-width));
}

/* Needed for gradient continuity with or without animation so that transparent PNG images come up as we would expect */
.scroll-trigger:where(.gradient.video-section__media) {
  background: transparent;
}

.video-section__media.global-media-settings--full-width {
  padding-bottom: var(--ratio-percent);
}

.video-section__media.deferred-media {
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
}

.video-section__media.deferred-media:after {
  content: none;
}

.video-section__poster.deferred-media__poster:focus {
  outline-offset: 0.3rem;
}

.video-section__media iframe {
  background-color: rgba(var(--color-foreground), 0.03);
  border: 0;
}

.video-section__poster,
.video-section__media iframe,
.video-section__media video {
  position: absolute;
  width: 100%;
  height: 100%;
}

.video-section__media video {
  background: #000000;
}

.video-section__media.media-fit-cover video {
  object-fit: cover;
}

/* ===== MyGlassStyle: scalable video sizing (works via CSS vars) ===== */
.video-section .video-section__media {
  max-height: var(--mg-video-max-h, none);
}

/* poster and loaded media should match the same height */
.video-section .video-section__poster,
.video-section .deferred-media__poster,
.video-section video,
.video-section iframe {
  max-height: var(--mg-video-max-h, none);
}

/* show full portrait video by default (no cropping) */
.video-section .video-section__poster img,
.video-section video,
.video-section iframe {
  width: 100%;
  height: 100%;
  object-fit: var(--mg-video-fit, contain);
  background: #000;
}

/* ===== MyGlassStyle: Video section sizing + no border + no crop ===== */
.video-section.section-*-video,
[class*="section-"][class*="-video"] { /* safety */
}

/* Scope: works because you add: section-{{ section.id }}-video */
[class*="section-"][class*="-video"] .video-section__media {
  /* remove “card” look */
  border: 0 !important;
  box-shadow: none !important;

  /* black bars area */
  background: #000 !important;

  /* IMPORTANT: stop huge/tall blocks */
  max-height: var(--mg-video-max-h, 640px);
  height: auto;

  /* replace Dawn ratio padding behavior with real sizing */
  aspect-ratio: var(--mg-video-ar, 16 / 9);
  padding-bottom: 0 !important;
}

/* If theme sets height:0 for ratio technique, override it */
[class*="section-"][class*="-video"] .video-section__media.deferred-media {
  height: auto !important;
}

/* Make poster & media fill the new aspect-ratio box */
[class*="section-"][class*="-video"] .video-section__poster,
[class*="section-"][class*="-video"] .deferred-media__poster,
[class*="section-"][class*="-video"] .video-section__media > video,
[class*="section-"][class*="-video"] .video-section__media > iframe {
  width: 100% !important;
  height: 100% !important;
}

/* KEY: no cropping — show full video */
[class*="section-"][class*="-video"] .video-section__media > video {
  object-fit: var(--mg-video-fit, contain) !important; /* contain = full video */
  object-position: center !important;
  background: #000 !important;
}

[class*="section-"][class*="-video"] .video-section__poster img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000 !important;
}

/* If theme adds "media-fit-cover" class — kill cover for this section */
[class*="section-"][class*="-video"] .media-fit-cover video {
  object-fit: var(--mg-video-fit, contain) !important;
}

/* =========================================================
   MyGlassStyle – UNIVERSAL VIDEO STYLE (all templates)
   Put this at the VERY END of assets/video-section.css
   ========================================================= */

/* 1) Make the whole video block centered */
.video-section .video-section__media {
  margin-left: auto;
  margin-right: auto;
}

/* 2) Stop Dawn "padding-bottom ratio" from controlling the height
      We use aspect-ratio instead (more stable) */
.video-section .video-section__media {
  padding-bottom: 0 !important;
  aspect-ratio: var(--mg-video-ar, 16 / 9);
  max-height: var(--mg-video-max-h, 640px);
  height: auto !important;

  /* remove card look */
  border: 0 !important;
  box-shadow: none !important;

  /* base background */
  background: #000 !important;

  position: relative;
  overflow: hidden;
}

/* 3) Make poster + iframe + video fill the box */
.video-section .video-section__poster,
.video-section .deferred-media__poster,
.video-section .video-section__media > video,
.video-section .video-section__media > iframe {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  inset: 0;
}

/* 4) Keep FULL video visible by default (no crop) */
.video-section .video-section__media > video,
.video-section .video-section__media > iframe {
  object-fit: var(--mg-video-fit, contain) !important;
  object-position: center !important;
  background: transparent !important;
}

/* 5) Poster image behavior */
.video-section .video-section__poster img {
  width: 100% !important;
  height: 100% !important;
  object-fit: var(--mg-video-fit, contain) !important;
  object-position: center !important;
}

/* 6) If theme adds media-fit-cover, neutralize it (we control fit via variable) */
.video-section .media-fit-cover video {
  object-fit: var(--mg-video-fit, contain) !important;
}

/* 7) Optional: blurred background behind portrait videos (no black bars)
      This works ONLY for <video> (Shopify hosted). YouTube/Vimeo iframes can't be duplicated in CSS. */
.video-section .video-section__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 0;
}

/* Only if you want blur background: add class "mg-video-blur" to the section wrapper in Liquid */
.mg-video-blur .video-section__media::before {
  background: var(--mg-video-bg, #000);
  filter: blur(22px);
  transform: scale(1.12);
  opacity: 0.85;
}

/* Make the actual media stay above the blurred layer */
.video-section .video-section__media > video,
.video-section .video-section__media > iframe,
.video-section .video-section__poster {
  z-index: 1;
}