/**
 * Bestsellers / Recommendations box created by ai
 * PrestaShop module stylesheet
 */

.ai-bestsellers-section {
  margin-top: 2rem;
  margin-bottom: 2.5rem;
  clear: both;
}

.ai-bestsellers-section .products-section-title {
  margin: 2.5rem 0;
  font-weight: 500;
  text-align: center;
  font-size: 1.3125rem;
  text-transform: uppercase;
  color: #232323;
  font-family: Manrope, sans-serif;
  letter-spacing: normal;
}

.ai-bestsellers-section .ai-bestsellers-wrapper {
  width: 100%;
}

.ai-bestsellers-section gr-recommendations {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.875rem;
  margin: 0 auto;
  width: 100%;
  list-style: none;
}

/* Responsiveness matching PrestaShop Classic Grid (col-xs-12 col-sm-6 col-lg-4 col-xl-3) */
@media (min-width: 576px) {
  .ai-bestsellers-section gr-recommendations {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .ai-bestsellers-section gr-recommendations {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .ai-bestsellers-section gr-recommendations {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Product title link: strictly #7a7a7a, NO color change on hover, NO underline */
.ai-bestsellers-section gr-recommendations a,
.ai-bestsellers-section gr-recommendations a:link,
.ai-bestsellers-section gr-recommendations a:visited,
.ai-bestsellers-section gr-recommendations [slot="link"],
.ai-bestsellers-section gr-recommendations .product-title a,
.ai-bestsellers-section gr-recommendation-product a,
.ai-bestsellers-section gr-recommendation-product [slot="link"] {
  color: #7a7a7a !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  font-family: Manrope, sans-serif !important;
  text-transform: capitalize !important;
  text-align: center !important;
  display: block !important;
  line-height: 1.25em !important;
  transition: none !important;
}

.ai-bestsellers-section gr-recommendations a:hover,
.ai-bestsellers-section gr-recommendations a:focus,
.ai-bestsellers-section gr-recommendations a:active,
.ai-bestsellers-section gr-recommendations [slot="link"]:hover,
.ai-bestsellers-section gr-recommendations [slot="link"]:focus,
.ai-bestsellers-section gr-recommendations [slot="link"]:active,
.ai-bestsellers-section gr-recommendation-product a:hover,
.ai-bestsellers-section gr-recommendation-product a:focus,
.ai-bestsellers-section gr-recommendation-product a:active,
.ai-bestsellers-section gr-recommendation-product [slot="link"]:hover,
.ai-bestsellers-section gr-recommendation-product [slot="link"]:focus,
.ai-bestsellers-section gr-recommendation-product [slot="link"]:active {
  color: #7a7a7a !important;
  text-decoration: none !important;
}

/* Product Flags / Promotion Badges */
.ai-bestsellers-section .product-flags {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  pointer-events: none;
}

.ai-bestsellers-section .product-flags li.product-flag {
  display: block;
  width: fit-content;
  min-width: 3.125rem;
  min-height: 1.875rem;
  padding: 0.3125rem 0.4375rem;
  margin-top: 0.625rem;
  font-family: Manrope, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25rem;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  pointer-events: auto;
  background-color: #24b9d7;
}

.ai-bestsellers-section .product-flags li.product-flag.discount,
.ai-bestsellers-section .product-flags li.product-flag.discount-amount,
.ai-bestsellers-section .product-flags li.product-flag.discount-percentage {
  background-color: #f39d72 !important;
}

/* Component loading & empty state handling */
.ai-bestsellers-section gr-recommendations[data-state="loading"] {
  opacity: 0.6;
}

.ai-bestsellers-section gr-recommendations[data-state="empty"] {
  display: none;
}