/** Shopify CDN: Minification failed

Line 22:18 Unexpected "{"
Line 22:27 Expected ":"
Line 22:34 Unexpected "{"
Line 23:24 Expected identifier but found whitespace
Line 23:26 Unexpected "{"
Line 23:35 Expected ":"
Line 23:61 Expected ":"
Line 24:27 Expected identifier but found whitespace
Line 24:29 Unexpected "{"
Line 24:38 Expected ":"
... and 1 more hidden warnings

**/
/* ============================================================
   Hero Slider Section — hero-slider.css
   CWV-optimized | Fully responsive | Shopify Liquid compatible
   ============================================================ */

/* ---------- Section shell ---------- */
#shopify-section-{{ section.id }} {
  --section-padding-top: {{ section.settings.padding_top }}px;
  --section-padding-bottom: {{ section.settings.padding_bottom }}px;
}

.hero-slider-section {
  padding-top: var(--section-padding-top, 0px);
  padding-bottom: var(--section-padding-bottom, 0px);
  /* Contain paint for CWV — prevents layout shift from child absolute elements */
  contain: layout style;
}

/* True edge-to-edge banner — .page-width--full only reduces padding at large
   breakpoints, it never zeroes it, so this section needs its own override
   to match the live theme's full-bleed hero. */
.hero-slider-section .page-width {
  padding-inline: 0;
  height: 100%;
}

/* ---------- Swiper wrapper ---------- */
.hero-swiper {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Reserve height before images load → prevents CLS.
     Ratio is derived from the actual uploaded image (see hero-slider.liquid)
     so the container never crops/stretches banners that don't match a
     hardcoded guess; the literal fallback only applies in the empty
     theme-editor state before any image is picked. */
  aspect-ratio: var(--hero-desktop-ratio, 16 / 9);
  background-color: #f2f2f2; /* placeholder bg, prevents white flash */
}

.hero-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
  /* GPU-composited transform — avoids layout during slide animation */
  will-change: transform;
}

/* ---------- Slide ---------- */
.hero-swiper .swiper-slide {
  position: relative;
  display: flex;
  flex-shrink: 0;
  width: 100%;
  overflow: hidden;
}

/* ---------- Fallback: before Swiper JS initializes ----------
   Swiper adds the "swiper-initialized" class to the root element once
   it has built the slide structure and applied its own transforms.
   Until that happens (or if the JS fails to load for any reason), this
   rule stacks every slide on top of slide 1 via absolute positioning so
   later slides never bleed into view next to the first — this is what
   was happening on the collection page when Swiper hadn't initialized yet. */
.hero-swiper:not(.swiper-initialized) .swiper-wrapper {
  display: block;
  position: relative;
}

.hero-swiper:not(.swiper-initialized) .swiper-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.hero-swiper:not(.swiper-initialized) .swiper-slide:first-child {
  position: relative;
  opacity: 1;
}

/* ---------- Anchor / click target ---------- */
.hero-swiper-content {
  display: block;
  width: 100%;
  height: 100%;
  /* Prevent tap highlight flash on mobile */
  -webkit-tap-highlight-color: transparent;
  outline-offset: 3px;
}

/* ---------- Images ---------- */
.hero-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Use transform for scale to stay on compositor thread */
  display: block;
  /* Prevent image drag interfering with swipe */
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Desktop image shown by default; mobile hidden */
.hero-swiper .desktop-img {
  display: block;
}

.hero-swiper .mobile-image {
  display: none;
}

/* ---------- Pagination ---------- */
.swiper-pagination-hero {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  z-index: 10;
  /* Pointer events only on bullets, not transparent area */
  pointer-events: none;
}

.swiper-pagination-hero .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #001
  transition: background-color 0.25s ease, transform 0.25s ease;
  cursor: pointer;
  pointer-events: auto;
  /* Accessible tap target without affecting the visual dot size */
  padding: 3px;
  box-sizing: content-box;
}

.swiper-pagination-hero .swiper-pagination-bullet-active {
  background-color: #000;
  transform: scale(1.15);
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ---------- Mobile ( ≤ 767px ) ---------- */
@media (max-width: 767px) {
  .hero-swiper {
    /* Matches the real uploaded mobile image so nothing is cropped/stretched */
    aspect-ratio: var(--hero-mobile-ratio, 4 / 5);
  }

  /* Switch image source to mobile variant.
     !important: a legacy unscoped `img.desktop-img` rule elsewhere in the
     theme's CSS was winning this toggle despite lower specificity — forcing
     it here guarantees the mobile image actually shows instead of the
     desktop banner getting cover-cropped into the mobile aspect box. */
  .hero-swiper .desktop-img {
    display: none !important;
  }

  .hero-swiper .mobile-image {
    display: block !important;
  }

  .swiper-pagination-hero {
    bottom: 8px;
  }

  .swiper-pagination-hero .swiper-pagination-bullet {
    width: 2px;
    height: 2px;
  }
}

/* ---------- Tablet ( 768px – 1023px ) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-swiper {
    aspect-ratio: var(--hero-desktop-ratio, 16 / 7);
  }

  /* Show desktop image at tablet too (can be overridden per theme) */
  .hero-swiper .desktop-img {
    display: block;
  }

  .hero-swiper .mobile-image {
    display: none;
  }
}

/* ---------- Large desktop ( ≥ 1440px ) ---------- */
@media (min-width: 1440px) {
  .hero-swiper {
    aspect-ratio: var(--hero-desktop-ratio, 21 / 8);
  }
}

/* ---------- Full-width modifier ---------- */
.page-width--full .hero-swiper {
  border-radius: 0;
}

/* ---------- Reduced motion — CWV/accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-swiper .swiper-wrapper {
    will-change: auto;
    transition-duration: 0ms !important;
  }

  .swiper-pagination-hero .swiper-pagination-bullet {
    transition: none;
  }
}