@charset "utf-8";

sq-carousel { display: block; position: relative; }

sq-carousel .swiper-container, #sq-shop-category .swiper-wrapper, #sq-shop-category .swiper-container { overflow: hidden !important; }

sq-carousel .swiper-slide { width: auto; }

sq-carousel[data-carousel-type="custom"] .swiper-slide { margin-right: 20px; }

@media screen and (min-width: 2000px) {
  sq-carousel[data-carousel-type="custom"] .swiper-slide .sq-carousel__banner-image img, sq-carousel[data-carousel-type="custom"] .swiper-slide .sq-carousel__banner-image video { transition: 0.3s; }
  sq-carousel[data-carousel-type="custom"] .swiper-slide .sq-carousel__banner-image:hover img, sq-carousel[data-carousel-type="custom"] .swiper-slide .sq-carousel__banner-image:hover video { transform: scale(1.1); }
}

@media screen and (max-width: 2000px) {
  sq-carousel .swiper-container, #sq-shop-category .swiper-wrapper, #sq-shop-category .swiper-container { overflow: visible !important; }
  sq-carousel[data-carousel-type="custom"] .swiper-slide { transition: 0.3s; }
  sq-carousel[data-carousel-type="custom"] .swiper-slide:hover { transform: scale(1.03); }
}

.sq-carousel__banner-card { position: relative; width: 100%; height: 100%; }

.sq-carousel__banner-image { position: relative; border-radius: 20px; overflow: hidden; width: 400px; height: 700px; }

.sq-carousel__banner-image img { object-fit: none; }

.sq-carousel__banner-image img, .sq-carousel__banner-image video { width: 400px; height: 700px; }

@media screen and (max-width: 1200px) {
  .sq-carousel__banner-image, .sq-carousel__banner-image img, .sq-carousel__banner-image video { width: 400px; height: 700px; }
}

@media screen and (max-width: 767.98px) {
  .sq-carousel__banner-image, .sq-carousel__banner-image img, .sq-carousel__banner-image video { width: 350px !important; height: 525px !important; }
  .sq-carousel__banner-content { width: 350px !important; height: 525px !important; }
  .sq-carousel__banner-subtitle { font-size: 16px !important; }
}

.sq-carousel__banner-content { width: 400px; position: absolute; top: 0%; left: 0%; padding: 40px; text-align: center; box-sizing: border-box; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; z-index: 2; }

.sq-carousel__banner-title { font-size: 24px; font-weight: 500; margin-top: 8px; text-align: start; line-height: 1.2; }

.sq-carousel__banner-subtitle { font-size: 24px; text-align: start; }

@media screen and (max-width: 1200px) {
  .sq-carousel__banner-title { font-size: 20px !important; line-height: 24px !important; }
  .sq-carousel__banner-subtitle { font-size: 20px; }
}

@media screen and (max-width: 991.98px) {
  .sq-carousel__banner-content { padding: 24px; }
}

.swiper-container--single .m-slide__content, .swiper-container--single .m-slide__content * { visibility: visible !important; opacity: 1 !important; }

.sq-custom-navigation-container { position: relative; width: 100%; height: var(--sq-swiper-navigation-size); margin-top: 56px; display: flex; justify-content: end; align-items: center; gap: 20px; }

.sq-custom-navigation-prev, .sq-custom-navigation-next { width: 36px; height: 36px; border-radius: 36px; background-color: rgb(226, 226, 229); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; }

.sq-custom-navigation-prev:not(.swiper-button-disabled):hover, .sq-custom-navigation-next:not(.swiper-button-disabled):hover { background-color: rgb(237, 237, 240); }

.sq-custom-navigation-prev svg, .sq-custom-navigation-next svg { width: 16px; height: 16px; }

.sq-custom-navigation-prev.swiper-button-disabled, .sq-custom-navigation-next.swiper-button-disabled { background-color: rgb(245, 245, 246); cursor: default; }

.sq-custom-navigation-prev.swiper-button-disabled svg path, .sq-custom-navigation-next.swiper-button-disabled svg path { fill: rgb(183, 183, 184); }

#sq-carousel[data-carousel-type="custom"] .swiper-wrapper { margin: auto !important; width: fit-content !important; }

#sq-carousel[data-carousel-type="custom"] .swiper-slide { width: auto !important; }

#sq-carousel[data-carousel-type="custom"] .swiper-slide .sq-carousel__banner-card { width: auto !important; height: auto !important; }