/** Shopify CDN: Minification failed

Line 47:13 Expected ":"
Line 47:23 Unterminated string token

**/
/* Full Video Container Styling */
.video-banner__full-video-container {
  position: fixed; /* Or absolute if you want it constrained to the banner */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent background */
  z-index: 1000; /* High z-index to be on top */
  display: none; /* Hidden by default */
  place-items: center; /* Center content */
}

.video-banner__full-video-player-element {
   width: 90%;
   max-width: 1100px; /* Limit player size */
   aspect-ratio: 16 / 9; /* Maintain aspect ratio */
   background-color: #000; /* Black background behind player */
 }

.video-banner__full-video-player-element video,
.video-banner__full-video-player-element iframe {
   display: block;
   width: 100%;
   height: 100%;
   border: none;
 }

.video-banner__close-full-video {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items": center;
  justify-content: center;
  padding: 0;
  z-index: 1001; /* Above player */
}

.video-banner__close-full-video:hover {
  background: rgba(0, 0, 0, 0.8);
}

.video-banner__close-full-video svg {
   width: 20px;
   height: 20px;
   fill: white;
}

.banner__box.content-container.color-scheme-1.gradient {
  background: transparent;
}

/* Prevent body scroll when full video is active */
body.video-banner-full-active {
   overflow: hidden;
}

/* Placeholder styling */
.video-banner__placeholder {
  display: grid;
  place-content: center;
  background-color: #f0f0f0; /* Light grey background */
}

.video-banner__placeholder .placeholder-svg {
  width: 80px;
  height: 80px;
  fill: #cccccc; /* Grey icon */
}

/* Ensure content alignment works */
.banner__content--full-height {
    height: 100%;
    display: flex; /* Use flexbox for vertical alignment */
    /* Apply position settings via banner--content-align-* classes if needed */
}
/* Add styles for banner--content-align-* if your theme doesn't cover them well with flex */


/* Responsive adjustments for video height settings if needed */
:root {
  --banner-height-small: 35vh;
  --banner-height-medium: 50vh;
  --banner-height-large: 75vh;
}
@media screen and (max-width: 749px) {
   :root {
       --banner-height-small: 40vh;
       --banner-height-medium: 55vh;
       --banner-height-large: 70vh;
   }
   .video-banner__full-video-player-element {
       width: 100%;
       height: auto; /* Let aspect ratio control height */
   }
}


/* Styles for different overlay filters */
.video-banner__overlay {
    display: block; /* Add this line */
    background-color: rgba(0, 0, 0, 0.1);
    opacity: var(--video-banner-overlay-opacity);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none; /* Added pointer-events none previously? Keep it */
}

.video-banner__overlay.filter--blur {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.video-banner__overlay.filter--grayscale {
  backdrop-filter: grayscale(100%);
  -webkit-backdrop-filter: grayscale(100%);
}
.video-banner__overlay.filter--sepia {
  backdrop-filter: sepia(90%);
  -webkit-backdrop-filter: sepia(90%);
}
.video-banner__overlay.filter--grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 30px 30px; /* Adjust grid size */
  backdrop-filter: brightness(0.9); /* Slightly darken behind grid */
  -webkit-backdrop-filter: brightness(0.9);
}
.video-banner__overlay.filter--dots {
   background-image: radial-gradient(rgba(0, 0, 0, 0.15) 1px, transparent 1px);
   background-size: 10px 10px; /* Adjust dot size/spacing */
   backdrop-filter: contrast(0.9);
   -webkit-backdrop-filter: contrast(0.9);
}

.banner__content {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  z-index: 2;
}

/* Example: Positioning content middle-center using flex */
.banner--content-align-middle-center .banner__content {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* Ensure text inside aligns center */
  height: 100%; /* Take full height for alignment */
}