/********************
	Part - Style général des carousel
********************/

.carousel .direction {
  z-index: auto
}

.carousel .carousel-item {
  height: 100%
}

.carousel .carousel-item .caption {
  position: absolute;
  color: #fff;
  max-width: 340px
}

.carousel .carousel-item .caption .caption-description p {
  color: #fff
}

.carousel .carousel-control {
  opacity: 1
}

.carousel .carousel-control .icon-next:before,
.carousel .carousel-control .icon-prev:before {
  content: ""
}

.carousel .carousel-control .icon-next i,
.carousel .carousel-control .icon-prev i {
  font-size: 3.125rem;
  color: #fff
}

.carousel .carousel-control .icon-next:hover i,
.carousel .carousel-control .icon-prev:hover i {
  color: #2fb5d2
}

.carousel .carousel-control .icon-prev {
  left: 1rem
}

.carousel .carousel-control .icon-next {
  right: 2rem
}

.carousel .carousel-control.left,
.carousel .carousel-control.right {
  background: none
}

@media (max-width: 767px) {
  .carousel .carousel-item .caption {
    bottom: 5px;
    left: 40px
  }

  .carousel .carousel-item figure {
    margin: 0
  }
}

@media (min-width: 768px) {
  .carousel .carousel-item .caption {
    bottom: 28px;
    left: 90px
  }

  .carousel .carousel-item img {
    width: 100%;
  }
}

/********************
	Part - Style général des slider slick
********************/
.slick-slider {
  display: none !important;
}

.slick-slider.slick-initialized {
  display: flex !important;
}

.container-primary .slick-slider {
  position: static;
  width: 94%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.slick-slider .slick-arrow {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  cursor: pointer;
  border: none;
  background: transparent;
}

.slick-slider .slick-arrow svg {
  fill: transparent;
  stroke: var(--color-grey-font-default);
}

.slick-slider .slick-arrow.slick-prev {
  left: calc(-15px + (0 - -15) * ((100vw - 320px) / (1920 - 320)));
}

.slick-slider .slick-arrow.slick-next {
  right: calc(-15px + (0 - -15) * ((100vw - 320px) / (1920 - 320)));
}

.slick-slider .slick-list {
  min-width: 100%;
}

.slick-slider .slick-track {
  display: flex;
}

.slick-slider.slick-vertical .slick-track {
  display: block;
}

.slick-slider .slick-track .slick-slide {
  height: auto;
}

.slick-slider .slick-slide > div,
.slick-slide > div .product-miniature {
  height: 100%;
}

/********************
	Part - Style général des items swiper
********************/

.container-primary .swiper-container {
  position: static;
  width: 94%;
  margin: 0 auto;
}

.swiper-slide {
  height: auto;
}

.swiper-slide > .product-miniature {
  height: 100%;
}

/********************************
	Part - Featured products
********************************/

.featured-products {
  position: relative;
  max-width: var(--container-primary-max-width);
  margin: auto;
}

.featured-products>h2 {
  text-align: center;
}

.featured-products .slick-slider .slick-arrow {
  top: 50%;
}

.featured-products .slick-slider .slick-dots {
  position: absolute;
  z-index: 5;
  bottom: -50px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.featured-products .slick-slider .slick-dots button {
  display: block;
  border: none;
  border-radius: 100%;
  background-color: var(--color-primary-80);
  text-indent: -9999px;
  width: 1rem;
  height: 1rem;
  padding: 0;
}

.featured-products .slick-slider .slick-dots li:not(:last-of-type) {
  margin-right: 0.5em;
}

.featured-products .slick-slider .slick-dots li.slick-active button {
  background-color: var(--color-primary);
}