/*
  No-JS homepage carousels.

  Loaded only when JavaScript is disabled (see layout: media="(scripting: none)" + noscript).
  Swiper never inits, so slides stay width:100% and overflow:hidden clips to one card.
  Ant Design Carousel/slick never inits, so Hot Deals slides stack/overlap.

  Selectors must beat legacy-utility-overrides `:not(.swiper-initialized)` pre-init rules
  (those stay in the cascade when JS is off and otherwise keep 88%-wide FTD slides).
*/

/*
  Product / blog carousels → CSS grid when Swiper never inits.
  Shop Solar by Categories is excluded: it must stay flex so legacy
  calc((100% - N) / slidesPerView) widths resolve against the full track
  (same as JS-on). Grid + those calcs collapses cards into thin pillars.
*/
.swiper:not(.swiper-initialized),
.featured-trader-deals-carousel:not(.swiper-initialized),
.buy-direct-slider:not(.swiper-initialized),
.home-blog__swiper:not(.swiper-initialized),
.home-product .swiper:not(.swiper-initialized) {
  overflow: visible !important;
}

.swiper:not(.swiper-initialized) .swiper-wrapper,
.featured-trader-deals-carousel:not(.swiper-initialized) .swiper-wrapper,
.buy-direct-slider:not(.swiper-initialized) .swiper-wrapper,
.home-blog__swiper:not(.swiper-initialized) .swiper-wrapper,
.home-product .swiper:not(.swiper-initialized) .swiper-wrapper {
  display: grid !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  align-items: stretch !important;
  gap: 2rem !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.swiper:not(.swiper-initialized) .swiper-slide,
.featured-trader-deals-carousel:not(.swiper-initialized) .swiper-slide,
.buy-direct-slider:not(.swiper-initialized) .swiper-slide,
.home-blog__swiper:not(.swiper-initialized) .swiper-slide,
.home-product .swiper:not(.swiper-initialized) .swiper-slide {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}

.swiper-button-prev,
.swiper-button-next,
.swiper-pagination,
.swiper-scrollbar {
  display: none !important;
}

/*
  Shop Solar by Categories — match JS-enabled Swiper layout.

  Undo the generic `.swiper` grid / width:100% rules above (that root also has
  class `swiper`). Keep flex + the same calc slide widths as legacy pre-init /
  hero-critical so cards fill the track like initialized Swiper.
*/
.category-sagement .swiper-slider__category:not(.swiper-initialized) {
  overflow: hidden !important;
}

.category-sagement .swiper-slider__category:not(.swiper-initialized) .swiper-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  gap: 0 !important;
  grid-template-columns: none !important;
  align-items: stretch !important;
}

.category-sagement .swiper-slider__category:not(.swiper-initialized) .swiper-slide {
  flex-shrink: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
  /* Beat `.swiper:not(.swiper-initialized) .swiper-slide { width:100% }` */
  width: calc((100% - 15px) / 2) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  margin-right: 15px !important;
}

@media (min-width: 768px) {
  .category-sagement .swiper-slider__category:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 30px) / 3) !important;
  }
}

@media (min-width: 1024px) {
  .category-sagement .swiper-slider__category:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 60px) / 5) !important;
  }
}

@media (min-width: 1400px) {
  .category-sagement .swiper-slider__category:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 90px) / 7) !important;
  }
}

.category-sagement .category-placeholder {
  margin: 0.5rem 0 !important;
  width: 100% !important;
}

.category-sagement .category-placeholder a.category-card-tilt,
.category-sagement .category-placeholder a.card-tilt {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transform: none !important;
}

.category-sagement .category-placeholder img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: 150px !important;
  margin: 0 auto 10px !important;
  object-fit: contain !important;
}

.featured-trader-deals-carousel:not(.swiper-initialized) .swiper-wrapper,
.buy-direct-slider:not(.swiper-initialized) .swiper-wrapper,
.home-product .swiper:not(.swiper-initialized) .swiper-wrapper {
  gap: 2rem !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.home-blog__swiper:not(.swiper-initialized) .swiper-wrapper {
  gap: 2rem !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

@media (min-width: 576px) {
  .featured-trader-deals-carousel:not(.swiper-initialized) .swiper-wrapper,
  .buy-direct-slider:not(.swiper-initialized) .swiper-wrapper,
  .home-product .swiper:not(.swiper-initialized) .swiper-wrapper,
  .home-blog__swiper:not(.swiper-initialized) .swiper-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 768px) {
  .featured-trader-deals-carousel:not(.swiper-initialized) .swiper-wrapper,
  .buy-direct-slider:not(.swiper-initialized) .swiper-wrapper,
  .home-product .swiper:not(.swiper-initialized) .swiper-wrapper,
  .home-blog__swiper:not(.swiper-initialized) .swiper-wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  .featured-trader-deals-carousel:not(.swiper-initialized) .swiper-wrapper,
  .buy-direct-slider:not(.swiper-initialized) .swiper-wrapper,
  .home-product .swiper:not(.swiper-initialized) .swiper-wrapper {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .home-blog__swiper:not(.swiper-initialized) .swiper-wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1280px) {
  .featured-trader-deals-carousel:not(.swiper-initialized) .swiper-wrapper,
  .buy-direct-slider:not(.swiper-initialized) .swiper-wrapper,
  .home-product .swiper:not(.swiper-initialized) .swiper-wrapper {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .home-blog__swiper:not(.swiper-initialized) .swiper-wrapper {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1440px) {
  .featured-trader-deals-carousel:not(.swiper-initialized) .swiper-wrapper,
  .buy-direct-slider:not(.swiper-initialized) .swiper-wrapper,
  .home-product .swiper:not(.swiper-initialized) .swiper-wrapper {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Hot Deals: without slick init, show first card only (opaque over orange shell). */
.hot-deals-spotlight .ant-carousel .slick-slider,
.hot-deals-spotlight .ant-carousel .slick-list,
.hot-deals-spotlight .ant-carousel .slick-track {
  display: block !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  left: 0 !important;
  right: auto !important;
  overflow: visible !important;
}

.hot-deals-spotlight .ant-carousel .slick-slide,
.hot-deals-spotlight .ant-carousel .slick-cloned {
  display: none !important;
  float: none !important;
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
}

.hot-deals-spotlight .ant-carousel .slick-slide:first-child {
  display: block !important;
}

.hot-deals-spotlight .ant-carousel .slick-slide:first-child > div {
  height: auto !important;
}

.hot-deals-spotlight__nav {
  display: none !important;
}

/* Map: show static SVG; hide the JS-only react-simple-maps tree. */
.map-container .map-static-fallback {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}

.map-container .map-interactive {
  display: none !important;
}

.map-container .map-zooming-controls,
.map-container .map-zoom-btn {
  display: none !important;
}

/*
  Sticky without JS scroll handlers.
  White homepage header reveals on scroll (scroll-driven). Fallback: sticky capsule.
  Hero is ~450px — reveal after it leaves, matching JS sticky threshold.
*/
@keyframes no-js-home-sticky-reveal {
  from {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

@keyframes no-js-home-capsule-hide {
  from {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

.capsule-navigation-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 150 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Desktop only — mobile uses white sticky (prod). */
@media (min-width: 992px) {
  .capsule-navigation-container {
    display: block !important;
  }
}

@media (max-width: 991px) {
  .capsule-navigation-container {
    display: none !important;
  }
}

/*
  Only when JS is off (no html.js-mega-menu from beforeInteractive boot).
  Prevents fighting the JS .fixed sticky path if these sheets are ever loaded with JS on.
*/
html:not(.js-mega-menu) .sticky-header.home-navigtion-block,
html:not(.js-mega-menu) .body-capsule .sticky-header.home-navigtion-block {
  display: none !important;
}

@supports (animation-timeline: scroll()) {
  /* Match prod sticky engage (~300px) when JS is off. */
  html:not(.js-mega-menu) .capsule-navigation-container {
    animation-name: no-js-home-capsule-hide;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root);
    animation-range: 260px 300px;
  }

  html:not(.js-mega-menu) .sticky-header.home-navigtion-block,
  html:not(.js-mega-menu) .sticky-header.home-navigtion-block.header-14,
  html:not(.js-mega-menu) .body-capsule .sticky-header.home-navigtion-block,
  html:not(.js-mega-menu) header.sticky-header.home-navigtion-block {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 1200 !important;
    width: 100% !important;
    background-color: #fff !important;
    box-shadow: 0 3px 6px rgba(51, 51, 51, 0.05) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-100%);
    animation-name: no-js-home-sticky-reveal;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root);
    /* Prod engages white sticky near 300px scroll. */
    animation-range: 260px 300px;
  }
}

@supports not (animation-timeline: scroll()) {
  html:not(.js-mega-menu) .capsule-navigation-container {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    background: rgba(26, 43, 56, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 3px 6px rgba(51, 51, 51, 0.08) !important;
  }

  html:not(.js-mega-menu) .sticky-header.home-navigtion-block,
  html:not(.js-mega-menu) .body-capsule .sticky-header.home-navigtion-block,
  html:not(.js-mega-menu) header.sticky-header.home-navigtion-block {
    display: none !important;
  }
}

.sticky-header:not(.home-navigtion-block) {
  position: sticky !important;
  top: 0 !important;
  z-index: 1200 !important;
}

/* Capsule cart only — do not touch sticky-header Lucide + "Cart" column layout. */
.cap-nav-cart-dropdown.cart-dropdown .header-ant-dropdown-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  gap: 0 !important;
  text-decoration: none !important;
  color: inherit !important;
}

.cap-nav-cart-dropdown .header-ant-dropdown-trigger img,
.cap-nav-cart-dropdown .header-ant-dropdown-trigger svg {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
}

/* -- Order status shipping logos -- */
.shipping-brands .swiper:not(.swiper-initialized),
.shipping-brands .swiper-slider__brands:not(.swiper-initialized) {
  overflow: visible !important;
}
.shipping-brands .swiper:not(.swiper-initialized) .swiper-wrapper,
.shipping-brands .swiper-slider__brands:not(.swiper-initialized) .swiper-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 2rem !important;
  transform: none !important;
  width: 100% !important;
  grid-template-columns: unset !important;
}
.shipping-brands .swiper:not(.swiper-initialized) .swiper-slide,
.shipping-brands .swiper-slider__brands:not(.swiper-initialized) .swiper-slide {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc((100% - 2rem) / 2) !important;
  max-width: 18rem !important;
  height: auto !important;
  margin: 0 !important;
}
.shipping-brands .brand-logo,
.shipping-brands .swiper-slide img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 4.8rem !important;
  object-fit: contain !important;
}
@media (min-width: 768px) {
  .shipping-brands .swiper:not(.swiper-initialized) .swiper-slide,
  .shipping-brands .swiper-slider__brands:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 4rem) / 3) !important;
  }
}
@media (min-width: 1200px) {
  .shipping-brands .swiper:not(.swiper-initialized) .swiper-slide,
  .shipping-brands .swiper-slider__brands:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 8rem) / 5) !important;
  }
}

/*
  RV quotation banner — match JS-enabled Swiper:
  one slide, keep absolute .slide-content clip-path overlay from style.min.
  Override the generic `.swiper:not(.swiper-initialized)` grid rules above.
  Do NOT stack all slides or force .slide-content to position:relative.
*/
.rv-home-slider {
  position: relative !important;
  z-index: 0 !important;
  overflow: hidden !important;
}
.rv-home-slider .swiper:not(.swiper-initialized),
.rv-home-slider .rv-banner-slider:not(.swiper-initialized) {
  min-height: 450px !important;
  overflow: hidden !important;
}
.rv-home-slider .swiper:not(.swiper-initialized) .swiper-wrapper,
.rv-home-slider .rv-banner-slider:not(.swiper-initialized) .swiper-wrapper {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 450px !important;
}
.rv-home-slider .swiper:not(.swiper-initialized) .swiper-slide,
.rv-home-slider .rv-banner-slider:not(.swiper-initialized) .swiper-slide {
  display: none !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.rv-home-slider .swiper:not(.swiper-initialized) .swiper-slide:first-child,
.rv-home-slider .rv-banner-slider:not(.swiper-initialized) .swiper-slide:first-child {
  display: block !important;
  min-height: 450px !important;
  height: auto !important;
}
.rv-home-slider .swiper:not(.swiper-initialized) .swiper-slide:first-child img,
.rv-home-slider .rv-banner-slider:not(.swiper-initialized) .swiper-slide:first-child img {
  display: block !important;
  width: 100% !important;
  max-height: 450px !important;
  object-fit: cover !important;
}
.rv-home-slider .slide-content {
  z-index: 100 !important;
}
.rv-home-slider .rv-actions-btns {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 1rem !important;
}
@media (max-width: 768px) {
  .rv-home-slider .swiper:not(.swiper-initialized) .swiper-slide:first-child img,
  .rv-home-slider .rv-banner-slider:not(.swiper-initialized) .swiper-slide:first-child img {
    display: none !important;
  }
  .rv-home-slider .swiper:not(.swiper-initialized),
  .rv-home-slider .rv-banner-slider:not(.swiper-initialized),
  .rv-home-slider .swiper:not(.swiper-initialized) .swiper-wrapper,
  .rv-home-slider .rv-banner-slider:not(.swiper-initialized) .swiper-wrapper,
  .rv-home-slider .swiper:not(.swiper-initialized) .swiper-slide:first-child,
  .rv-home-slider .rv-banner-slider:not(.swiper-initialized) .swiper-slide:first-child {
    min-height: 0 !important;
  }
}

/* -- Explore videos related carousel -- */
.video-detail .ant-carousel .slick-slider,
.video-detail .ant-carousel .slick-list,
.video-detail .ant-carousel .slick-track {
  display: block !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}
.video-detail .ant-carousel .slick-track {
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  gap: 1.2rem !important;
}
.video-detail .ant-carousel .slick-slide,
.video-detail .ant-carousel .slick-cloned {
  display: block !important;
  float: none !important;
  width: 100% !important;
  height: auto !important;
  position: relative !important;
  opacity: 1 !important;
}
.video-detail .ant-carousel .slick-arrow,
.video-detail .ant-carousel .slick-dots {
  display: none !important;
}
@media (min-width: 768px) {
  .video-detail .ant-carousel .slick-track {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1024px) {
  .video-detail .ant-carousel .slick-track {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Storefront banner: show first slide when Ant Carousel/slick never inits. */
.store-front-page-header .ant-carousel .slick-slider,
.store-front-page-header .ant-carousel .slick-list,
.store-front-page-header .ant-carousel .slick-track,
.store-front .store-front-slider .ant-carousel .slick-slider,
.store-front .store-front-slider .ant-carousel .slick-list,
.store-front .store-front-slider .ant-carousel .slick-track {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  transform: none !important;
}
.store-front-page-header .ant-carousel .slick-slide,
.store-front-page-header .ant-carousel .slick-cloned,
.store-front .store-front-slider .ant-carousel .slick-slide,
.store-front .store-front-slider .ant-carousel .slick-cloned {
  display: none !important;
  float: none !important;
  width: 100% !important;
}
.store-front-page-header .ant-carousel .slick-slide:first-child,
.store-front .store-front-slider .ant-carousel .slick-slide:first-child {
  display: block !important;
}
.store-front-page-header .ant-carousel .slick-arrow,
.store-front-page-header .ant-carousel .slick-dots,
.store-front .store-front-slider .ant-carousel .slick-arrow,
.store-front .store-front-slider .ant-carousel .slick-dots {
  display: none !important;
}
.store-front-page-header .ant-carousel img,
.store-front .store-front-slider .ant-carousel img {
  display: block !important;
  width: 100% !important;
  max-height: 32rem !important;
  object-fit: cover !important;
}