/**
**Extends swiper-general.css
**Extends header.css (#header-video)
**for custom wc loop thumb slider ({theme}/template-parts/cat-header-slider.php)
*/

body.scroll-locked {
  overflow: hidden;
}

body.scroll-locked {
  overflow: hidden;
  touch-action: none;
  height: 100vh;
}

.header-video-template-landing-page {
  position: relative;
  margin-top: calc(
    (var(--nav-bar-pad) * 2) + var(--height-logo-wappen) +
      var(--height-logo-txt) + var(--gap-logo)
  );
  height: calc(
    100vh -
      (
        (var(--nav-bar-pad) * 2) + var(--height-logo-wappen) +
          var(--height-logo-txt) + var(--gap-logo)
      )
  );
  width: 100vw;
  transition: all var(--trans-dur) cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
}

.header-video-template-landing-page.small {
  margin-top: calc(
    (var(--nav-bar-pad) * 2) + var(--height-logo-txt) + var(--gap-logo)
  );
}

#wc-slider-section {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 99;
  transition: all var(--trans-dur) cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
}

#wc-slider-section.swiper-hidden {
  opacity: 0;
  pointer-events: none;
}

#wc-slider-section.swiper-visible {
  /*pointer-events: none;*/
  opacity: 1;
}

.scroll-locked #wc-slider-section.swiper-visible {
  pointer-events: all;
}

.swiper.wc-cat-header-swiper {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 var(--gap-l);
}

.swiper.wc-cat-header-swiper:not(.show-navigation) .swiper-button-next,
.swiper.wc-cat-header-swiper:not(.show-navigation) .swiper-button-prev {
  opacity: 0;
}

.swiper.wc-cat-header-swiper .swiper-wrapper {
  height: auto;
}

.swiper.wc-cat-header-swiper .swiper-slide:nth-child(2n) {
  margin-top: var(--gap-2xl);
}

.wc-cat-header-swiper-image {
  position: relative;
}

.wc-cat-header-swiper-image:after {
  content: "";
  display: block;
  pointer-events: none;
  width: 100%;
  /*padding-bottom: 124%;*/
  padding-bottom: 103%;
}

.wc-cat-header-swiper-image p {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: var(--gap-m);
  color: #fff;
  font-family: var(--headlinefont);
  text-transform: uppercase;
}

.wc-cat-header-swiper-image-wrapper {
  position: absolute;
  width: 100%;
  aspect-ratio: 1 / 1;
}

/*accessories_image accessory*/

.wc-cat-header-swiper-image-wrapper::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 29.6%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  bottom: 0;
}

.wc-cat-header-swiper-image-wrapper img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}