/*
 * Encarts de cross-sell.
 *
 * La grille appartient au module ; la carte produit appartient au thème.
 * Chaque entrée est rendue par `catalog/_partials/miniatures/product.tpl`, donc
 * lien, prix, promotion et bouton d'ajout au panier restent identiques aux listes
 * natives de la boutique.
 *
 * ⛔ Aucun carrousel. Le thème initialise Flickity sur
 * `.home-featured-products`, le détruit au chargement et ne le recrée qu'en
 * dessous de 992 px. Cette classe n'est jamais employée ici.
 */

.jscs-encart {
  margin: 2rem 0;
  clear: both;
}

.jscs-encart__titre {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: none;
}

.jscs-encart__picto {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  background: currentColor;
  border-radius: 50%;
  opacity: .18;
}

/*
 * Grille : quatre colonnes en large, puis trois, deux et une.
 *
 * `!important` est limité au `display`. La classe générique `.products` du thème
 * peut porter `display:flex` dans une feuille chargée après celle du module ; sans
 * cette protection, le même HTML bascule de grille à rangée selon l'ordre des
 * assets. Toutes les autres propriétés restent normalement surchargeables.
 */
.jscs-encart__liste.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}

/* Le gabarit natif peut poser une largeur de colonne prévue pour les listings.
   Dans notre grille, c'est la cellule qui donne la largeur. */
.jscs-encart__liste > * {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
}

.jscs-encart__liste .product-miniature {
  width: 100%;
  max-width: none;
  height: 100%;
}

@media (max-width: 1199px) {
  .jscs-encart__liste.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .jscs-encart__liste.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .jscs-encart__liste.products {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Mise en page « onglets » : nom hérité de l'ancien module. Le moteur ne renvoie
   qu'un jeu de produits ; inventer des onglets sans panneaux n'aurait aucun sens.
   Le filet conserve la distinction visuelle historique. */
.jscs-encart--onglets {
  border-top: 1px solid rgba(0, 0, 0, .08);
  padding-top: 1.5rem;
}

/* Popup d'ajout panier : deux colonnes au plus, une sur téléphone. */
@media (min-width: 601px) {
  .jscs-encart--popup_panier .jscs-encart__liste.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }
}

@media (max-width: 600px) {
  .jscs-encart--popup_panier .jscs-encart__liste.products {
    gap: .75rem;
  }
}