@import 'swiper/swiper-bundle.css';

.apps__wrapper:has(.slider-components.slider-container),
.apps__container:has(.slider-components.slider-container) {
  display: block;
}

.slider-components.slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.swiper-wrapper {
  --general-radius: 16px;
}

.slider-components.slider-container .product_tags {
  --pos_x: 5%;
  --pos_x--md: 5%;
  --pos_y: 5%;
  --pos_y--md: 5%;
  left: var(--pos_x);
  top: var(--pos_y);
}

.slider-components.slider-container .product_tags div.tag-content {
  font-weight: bold;
  font-size: 1rem;
  line-height: 18px;
}

.slider-components.slider-container .product_tags div.tag--exclusive {
  padding-right: 30px;
}

.slider-components.slider-container :is(.hero-media-image-wrapper, .hero-banner-video-wrapper, .hero-video-wrapper) {
  min-height: 500px;
}

.slider-components.slider-container :is(.video-wrapper, .hero-banner-video) {
  padding-bottom: 500px;
}

.slider-components.slider-container :is(.video-wrapper, video, .hero-banner-image img) {
  border-radius: var(--general-radius);
}

.slider-components.slider-container-thumbs :is(video, img){
  border-radius: 100px;
}

.slider-components.slider-container-thumbs iframe {
  pointer-events: none;
}

.slider-components .slider-content {
  display: none;
}

.slider-components.slider-container .slider-content {
  display: block;
}

.slider-components .swiper-button-prev:after,
.slider-components .swiper-button-next:after {
  display: none;
}

.slider-components .swiper-horizontal > .swiper-pagination-bullets,
.slider-components .swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 0;
}

.slider-components.slider-container-thumbs {
  margin-top: 16px;
}

.slider-components.slider-container-thumbs li {
  background: darkseagreen;
  width: 50px !important;
  height: 50px;
  overflow: hidden;
  border-radius: 100px;
}

.slider-components .swiper-slide-thumb-active {
  border-width: 2px;
  border-style: solid;
  border-color: var(--color-primary);
}

.slider-components.slider-container-thumbs ul.swiper-wrapper {
  transform: none !important;
  width: auto;
  margin: 0;
  gap: 12px;
}

.slider-components :is(.swiper-button-prev, .swiper-button-next) {
  display: none;
}

.slider-components .hero-banner-content {
  --width: 90%;
  --width--md: 35%;
  --pos_x: 5%;
  --pos_x--md: 5%;
  --pos_y: 5%;
  --pos_y--md: 5%;
  left: var(--pos_x);
  bottom: var(--pos_y);
  width: var(--width);
}

.slider-components .hero-banner-content a {
  margin-top: 1rem;
  width: 100%;
}

.slider-components .hero-banner-content .text {
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  .slider-components.slider-container :is(.video-wrapper, .hero-banner-video) {
    padding-bottom: 552px;
  }

  .slider-components.slider-container :is(.hero-media-image-wrapper, .hero-banner-video-wrapper, video) {
    min-height: 552px;
    max-height: 552px;
  }

  .slider-components .hero-banner-content {
    left: var(--pos_x--md);
    bottom: var(--pos_y--md);
    width: var(--width--md);
  }

  .slider-components .hero-banner-content a {
    width: auto;
  }

  .slider-components :is(.swiper-pagination, .swiper-button-prev, .swiper-button-next) {
    display: flex;
  }

  .slider-components.slider-container-thumbs li {
    border-radius: var(--general-radius);
    width: 80px !important;
    height: 80px;
  }

  .slider-components.slider-container-thumbs ul.swiper-wrapper {
    gap: 16px;
  }

  .slider-components.slider-container-thumbs :is(video, img) {
    border-radius: var(--general-radius);
  }
}