/**
 * 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)
 */
.pfi-product-miniature-features-images {
  /*Variables*/
  --pfi-miniature-text-color: #7a7a7a;
  --pfi-miniature-tooltip-text-color: #fff;
  --pfi-miniature-tooltip-background-color: black;
  --pfi-miniature-image-gap: 8px;
  --pfi-miniature-position-top: 40px;
  --pfi-miniature-position-left: 0%;
  --pfi-miniature-max-width: 242px;
  --pfi-miniature-max-height: 210px;

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: var(--pfi-miniature-image-gap);
  justify-content: center;
  padding: 0.5rem 0.5rem 0 0.5rem;
  margin-bottom: 0; /*override ul styling in theme*/
  max-width: var(--pfi-miniature-max-width);
}

.pfi-miniature-display-top {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: absolute;
  top: var(--pfi-miniature-position-top);
  max-height: var(--pfi-miniature-max-height);
  z-index: 11; /*at least 2 to keep images above quick view button, at least 3 to keep tooltip above flags, and 11 to keep tooltip above wishlist button*/
}

.pfi-miniature-display-top-left {
  left: var(--pfi-miniature-position-left);
}

.pfi-miniature-display-top-right {
  right: 0;
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

.pfi-miniature-feature {
  display: flex;
}

.pfi-miniature-tooltip {
  position: relative;
  display: inline-block;
}

.pfi-miniature-tooltip .pfi-miniature-tooltip-text-top {
  visibility: hidden;
  background-color: var(--pfi-miniature-tooltip-background-color);
  color: var(--pfi-miniature-tooltip-text-color);
  text-align: center;
  border-radius: 6px;
  padding: 0.5rem;
  position: absolute;
  z-index: 2; /*2 to keep tooltip above quick view button*/
  bottom: 100%;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.pfi-miniature-tooltip .pfi-miniature-tooltip-text-top::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--pfi-miniature-tooltip-background-color) transparent transparent transparent;
}

.pfi-miniature-tooltip:hover .pfi-miniature-tooltip-text-top {
  visibility: visible;
  opacity: 1;
}

.pfi-miniature-feature-label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  color: var(--pfi-miniature-text-color);

  margin-top: auto;
  margin-bottom: auto;
  padding-left: 4px;
}

/*Overridden in order to allow the miniature tooltip to be displayed out of its parent*/
.product-miniature .thumbnail-container {
  overflow: visible;
}

/*Overridden in order to allow the images to be displayed above miniature top thumbnail*/
.product-miniature .product-description {
  position: static;
}
.productfeaturesimages_thumb {
	position: absolute;
	bottom: 10px;
	display: none;
}
.product-miniature:hover .productfeaturesimages_thumb {
	display: block;
}
.feature_image_description {
  font-family: 'Inter';
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0;
}