/**
 * Copyright (c) 2023 Smart Unicorn SARL
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the European Union Public License version 1.2
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/license/eupl-1-2/
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to contact@smartunicorn.fr so we can send you a copy immediately.
 *
 * The module or template you have purchased can only be used on one website.
 * You have to make a new purchase for every use on a different PrestaShop website.
 *
 * @author    Smart Unicorn SARL <contact@smartunicorn.fr>
 * @copyright Copyright (c) 2023 Smart Unicorn SARL (https://www.smartunicorn.fr/). All rights reserved.
 * @license   https://opensource.org/license/eupl-1-2/ European Union Public License version 1.2 (EUPL-1.2)
 */
/*Common swiper style*/
/*Make image container sticky on scroll*/
@media (min-width: 768px) {
  .product-container .col-md-6:first-child {
    position: sticky;
    top: 1rem;
  }
}

/*Prevent images from getting highlighted when double clicking on navigation arrows*/
.images-container {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*Keep video centered vertically*/
.pis-swiper-slide {
  height: auto;
}

/*Assure that image is displayed correctly without content reflow*/
.pis-swiper-slide img {
  width: 100%;
  height: auto;
}

/*Main swiper style*/
.pis-product-cover {
  margin-bottom: 1.25rem;
  --pis-swiper-btn-padding: 6px;
  --pis-swiper-btn-bg-color: rgba(255, 255, 255, 0.5);
  --pis-swiper-btn-position: 10px;
  --pis-swiper-btn-border-radius: 20%;
  --pis-swiper-pagination-border-size: 0;
  --pis-swiper-pagination-border-color: #fff;
}

.pis-product-cover .swiper-button-next {
  right: var(--pis-swiper-btn-position);
}

.pis-product-cover .swiper-button-prev {
  left: var(--pis-swiper-btn-position);
}

.pis-product-cover .swiper-button-next:after,
.pis-product-cover .swiper-button-prev:after {
  padding: var(--pis-swiper-btn-padding);
  background-color: var(--pis-swiper-btn-bg-color);
  border-radius: var(--pis-swiper-btn-border-radius);
}

.pis-product-cover .swiper-pagination-bullet-active {
  border: var(--pis-swiper-pagination-border-size) solid var(--pis-swiper-pagination-border-color);
}

/*---------------------------------------------------------------------------------------------------------*/

.images-container .pis-product-cover .swiper-wrapper {
  height: 45rem;
  width: 45rem;
}

.images-container .swiper-zoom-container {
  height: 45rem;
  width: 45rem;
}

.images-container .swiper-zoom-container .pis-video-placeholder {
  height: 45rem;
  background-position: center;
}

.images-container .swiper-zoom-container .pis-video-placeholder .pis-video-placeholder-overlay {
  background: unset;
}

.pis-product-cover .pis-video-play-icon > img {
  width: 80px!important;
}
/*---------------------------------------------------------------------------------------------------------*/

.images-container .pis-product-images {
  margin: 0;
}

.images-container .pis-product-images .swiper-button-prev {
  left: 0;
}

.images-container .pis-product-images .swiper-button-next {
  right: 0;
}

.images-container .pis-product-cover .swiper-button-prev,
.images-container .pis-product-cover .swiper-button-next {
  background: unset;
  height: 32px;
  width: 32px;
}

.images-container .pis-product-images .swiper-button-prev,
.images-container .pis-product-images .swiper-button-next {
  background: unset;
  width: 55px;
}

.images-container .swiper-button-prev::after,
.images-container .swiper-button-next::after {
  color: #00B2E3;
  background: #fff;
  padding: 0.6rem 1rem;
  opacity: .7;
  border-radius: 50px;
}


@media (min-width: 768px) {

  .pis-product-cover .swiper-pagination {
    display: none;
  }

  .pis-product-cover .swiper .swiper-button-next.pis-display-nav-on-hover {
    right: -40px;
    -webkit-transition: right .3s ease;
    -moz-transition: right .3s ease;
    -o-transition: right .3s ease;
    transition: right .3s ease;
  }

  .pis-product-cover .swiper:hover .swiper-button-next.pis-display-nav-on-hover {
    right: var(--pis-swiper-btn-position);
  }

  .pis-product-cover .swiper .swiper-button-prev.pis-display-nav-on-hover {
    left: -40px;
    -webkit-transition: left .3s ease;
    -moz-transition: left .3s ease;
    -o-transition: left .3s ease;
    transition: left .3s ease;
  }

  .pis-product-cover .swiper:hover .swiper-button-prev.pis-display-nav-on-hover {
    left: var(--pis-swiper-btn-position);
  }
}

@media (max-width: 767px) {
  .pis-product-cover .pis-hide-nav-mobile {
    display: none;
  }
}

/*Thumbnails swiper style*/
.pis-product-images {
  margin: 0 50px;
  position: relative;
  --pis-swiper-thumbnails-number: 3;
  --pis-swiper-thumbnails-space-between: 10px;
}

@media (max-width: 767px) {
  .pis-product-images {
    display: none;
  }
}

.pis-product-images .pis-swiper-centered-thumbnails {
  justify-content: center;
}

.pis-product-images .swiper-slide {
  cursor: pointer;
  width: calc((100% - (var(--pis-swiper-thumbnails-number) - 1) * var(--pis-swiper-thumbnails-space-between)) / var(--pis-swiper-thumbnails-number)); /*3 corresponds to slidesPerView value, 20px is 2 times (=3-1) the spaceBetween value*/
  margin-right: var(--pis-swiper-thumbnails-space-between); /*10 corresponds to swiper spaceBetween value*/
  opacity: 0.5;
  transition: opacity 0.1s ease-in-out;
}

.pis-product-images .swiper-slide:hover,
.pis-product-images .swiper-slide-thumb-active {
  opacity: 1;
}

.pis-product-images .swiper-button-next {
  right: -40px;
}

.pis-product-images .swiper-button-prev {
  left: -40px;
}

/*---------------------------------------------------------------------------------------------------------*/
@media (max-width: 850px) {
  .images-container .pis-product-cover .swiper-wrapper {
    height: 100%;
    width: 100%;
  }

  .images-container .pis-product-cover {
    margin-bottom: 0;
  }

  .images-container .pis-product-cover .swiper-pagination-bullets {
    position: relative;
    bottom: unset;
    margin-top: 1rem;
  }

  .images-container .swiper-zoom-container {
    height: 100%;
    width: 100%;
  }

  .images-container .swiper-zoom-container .pis-video-placeholder {
    height: 100%;
  }

  .pis-video-play-icon > img {
    width: 80px;
  }
}
/*---------------------------------------------------------------------------------------------------------*/