/* =========================================================
   ALYSIUM / PRESTASHOP 8.1
   Main image smaller + horizontal gallery below
   No hover zoom
   ========================================================= */

/* force main image then gallery below */
body#product #product-images-cont.images-container,
body#product #product-images-cont.flex-container,
body#product #product-images-cont.pkp-thumbs-under-main {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

body#product #product-images-cont .main-image-container {
  order: 1 !important;
  width: 100% !important;
}

body#product #product-images-cont .pkp-thumb-gallery-wrap,
body#product #product-images-cont .js-qv-mask.mask {
  order: 2 !important;
  width: 100% !important;
}

/* disable zoom / hover layer */
body#product .prod-image-zoom,
body#product .product-main-image-nozoom,
body#product .product-cover,
body#product .js-qv-product-cover {
  cursor: default !important;
}

body#product .layer[data-toggle="modal"],
body#product .product-cover .layer,
body#product .zoomContainer,
body#product .zoomWindow,
body#product .zoomLens {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body#product .product-main-image-nozoom,
body#product .product-main-image-nozoom img,
body#product .product-cover img.js-qv-product-cover {
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* main image size */
body#product #main .product-cover .js-qv-product-cover,
body#product #main .product-cover img.js-qv-product-cover,
body#product #main .product-main-image-nozoom img,
body#product #main .product-cover picture img {
  width: 50% !important;
  max-width: 50% !important;
  height: auto !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  object-fit: contain !important;
}

body#product #main .product-cover,
body#product #main .product-main-image-nozoom {
  text-align: center !important;
}

/* horizontal gallery */
body#product .pkp-thumb-gallery-wrap {
  margin-top: 20px !important;
  width: 100% !important;
}

body#product .pkp-thumb-gallery {
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 8px 2px 12px !important;
  scrollbar-width: thin;
}

body#product .pkp-thumb-gallery::-webkit-scrollbar {
  height: 8px;
}

body#product .pkp-thumb-gallery::-webkit-scrollbar-thumb {
  border-radius: 30px;
  background: rgba(0,0,0,.18);
}

body#product .pkp-thumb-gallery .product-images,
body#product .js-qv-product-images {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

body#product .pkp-thumb-gallery .thumb-container,
body#product .js-qv-product-images .thumb-container {
  list-style: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

body#product .pkp-thumb-gallery .thumb,
body#product .js-qv-product-images .thumb {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 18px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
  padding: 6px !important;
  cursor: pointer !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, opacity .22s ease !important;
  opacity: .92 !important;
  margin: 0 auto !important;
}

body#product .pkp-thumb-gallery .thumb:hover,
body#product .js-qv-product-images .thumb:hover {
  transform: translateY(-2px) !important;
  opacity: 1 !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.12) !important;
  border-color: rgba(0,0,0,.18) !important;
}

body#product .pkp-thumb-gallery .thumb.selected,
body#product .pkp-thumb-gallery .thumb-container.is-active .thumb,
body#product .js-qv-product-images .thumb.selected,
body#product .js-qv-product-images .thumb-container.is-active .thumb {
  opacity: 1 !important;
  border-color: #111 !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.14) !important;
  transform: translateY(-1px) !important;
}

/* thumbnails must never inherit 50% */
body#product .pkp-thumb-gallery img,
body#product .js-qv-product-images .thumb-container img {
  width: 88px !important;
  max-width: 88px !important;
  height: 88px !important;
}

@media (max-width: 767px) {
  body#product #main .product-cover .js-qv-product-cover,
  body#product #main .product-cover img.js-qv-product-cover,
  body#product #main .product-main-image-nozoom img,
  body#product #main .product-cover picture img {
    width: 70% !important;
    max-width: 70% !important;
  }

  body#product .pkp-thumb-gallery .thumb,
  body#product .js-qv-product-images .thumb,
  body#product .pkp-thumb-gallery img,
  body#product .js-qv-product-images .thumb-container img {
    width: 72px !important;
    max-width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    border-radius: 14px !important;
    padding: 5px !important;
  }

  body#product .pkp-thumb-gallery .product-images,
  body#product .js-qv-product-images {
    gap: 10px !important;
    justify-content: flex-start !important;
  }
}
/* ===== correctif clic miniatures ===== */
body#product .pkp-thumb-gallery-wrap,
body#product .pkp-thumb-gallery,
body#product .pkp-thumb-gallery .product-images,
body#product .pkp-thumb-gallery .thumb-container,
body#product .pkp-thumb-gallery .thumb {
  pointer-events: auto !important;
}

body#product .pkp-thumb-gallery .thumb-container {
  position: relative !important;
  z-index: 8 !important;
}

body#product .pkp-thumb-gallery .thumb {
  position: relative !important;
  z-index: 9 !important;
  cursor: pointer !important;
}