/** Shopify CDN: Minification failed

Line 171:18 Unexpected "{"
Line 171:27 Expected ":"
Line 171:34 Unexpected "{"
Line 174:14 Expected identifier but found whitespace
Line 174:16 Unexpected "{"
Line 174:25 Expected ":"
Line 174:59 Expected ":"
Line 175:17 Expected identifier but found whitespace
Line 175:19 Unexpected "{"
Line 175:28 Expected ":"
... and 8 more hidden warnings

**/


/* CSS from section stylesheet tags */
/* --- Layout --- */
.video-carousel-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.video-carousel-track {
  display: flex;
  transition: transform 0.6s ease;
}

/* Slides show about 1/3 peek on each side */
.video-carousel-slide {
  flex: 0 0 70%;
  margin: 0 2%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Add blank space before and after to center edges */
.video-carousel-track::before,
.video-carousel-track::after {
  content: "";
  flex: 0 0 15%;
}

/* --- Video Styling --- */
.video-carousel-slide iframe,
.video-carousel-slide video {
  width: 100%;
  max-height: 900px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  object-fit: cover;
  pointer-events: none;
}

/* Allow interaction with iframe when hovering the slide */
.video-carousel-slide:hover iframe {
  pointer-events: auto;
}

/* Hide native controls until hover (uploaded videos only) */
.video-carousel-slide video::-webkit-media-controls {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.video-carousel-slide:hover video::-webkit-media-controls {
  opacity: 1;
}

/* --- Overlay Play/Pause Button (uploaded videos only) --- */
.play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.85);
  border: none;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 5;
}

.video-carousel-slide:hover .play-overlay {
  opacity: 1;
}

.play-overlay svg {
  width: 30px;
  height: 30px;
  color: #000;
  margin-left: 3px;
}

/* --- When playing, button turns to pause icon --- */
.play-overlay.playing svg path {
  d: path("M6 19h4V5H6zm8-14v14h4V5h-4z");
}

/* --- Arrows (perfect circles) --- */
.video-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.85);
  color: #333;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  font-size: 24px;
  z-index: 10; /* base; capped by section stacking context below */
  cursor: pointer;
}

.video-carousel-arrow:hover {
  background: rgba(255,255,255,0.95);
}

.video-carousel-arrow.prev { left: 15px; }
.video-carousel-arrow.next { right: 15px; }

/* --- White dots --- */
.video-carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10; /* base; capped by section stacking context below */
}

.video-carousel-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.3s ease;
}

.video-carousel-dots .dot.active {
  background: #fff;
}

.video-carousel-dots .dot:hover {
  background: rgba(255,255,255,0.9);
}

/* --- Live height fix (scoped to this section) --- */
#video,
#shopify-section-{{ section.id }} {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: {{ section.settings.section_top_padding }}px !important;
  padding-bottom: {{ section.settings.section_bottom_padding }}px !important;
}

/* --- Sticky header offset using scroll-margin (replaces :target hack) --- */
#video { scroll-margin-top: 120px; }
@media (max-width: 768px) { #video { scroll-margin-top: 90px; } }

/* --- Ensure videos never stretch taller live --- */
#video .video-carousel-slide iframe,
#video .video-carousel-slide video {
  max-height: 1000px;
  aspect-ratio: 16 / 9;
}

/* Optional: smaller video height on mobile for uploaded videos */
@media (max-width: 768px) {
  #video .video-carousel-slide iframe,
  #video .video-carousel-slide video {
    height: 320px;
  }
}

/* --- Keep this section under the header (fix arrow overlap) --- */
#shopify-section-{{ section.id }} {
  position: relative;
  z-index: 0;           /* puts whole section at base layer */
  isolation: isolate;   /* new stacking context so children can't jump above header */
}
#shopify-section-{{ section.id }} .video-carousel-arrow,
#shopify-section-{{ section.id }} .video-carousel-dots {
  z-index: 1;           /* lower than header; higher than slides */
}

/* --- Hide arrows & dots when there is only one slide (fallback) --- */
.video-carousel-wrapper[data-slides="1"] .video-carousel-arrow,
.video-carousel-wrapper[data-slides="1"] .video-carousel-dots {
  display: none !important;
}