/**
 * Cross-sell JungleVet — présentation des encarts.
 *
 * Reprend les règles que la surcharge du thème plaçait en <style> inline dans
 * product_list_17.tpl. Elles y étaient renvoyées à chaque affichage d'encart, et
 * dupliquées quand une page en portait plusieurs.
 *
 * ⚠ Cette feuille est agrégée par PrestaShop dans le CSS combiné du thème
 *   (PS_CSS_THEME_CACHE = 1). Elle n'apparaîtra donc pas sous son propre nom dans
 *   le HTML : ne pas en conclure qu'elle n'est pas chargée. Contrôler dans
 *   themes/junglevet/assets/cache/theme-*.css.
 *
 * ⛔ Les largeurs ci-dessous FIGENT le nombre de colonnes, exactement comme le
 *   faisait la surcharge. C'est la raison pour laquelle les réglages de grille du
 *   back-office de l'ancien module étaient sans effet. Deux options se
 *   présentaient : rendre le réglage réellement effectif, ou l'assumer comme
 *   figé. La seconde est retenue pour cette version, avec le réglage retiré de
 *   l'écran d'administration — un paramètre sans effet est pire qu'un paramètre
 *   absent. Si le besoin de le rendre variable apparaît, passer par une variable
 *   CSS posée sur le conteneur.
 *
 * ⛔ LE POINT D'ACCROCHE EST .featured-products-home, PAS .ets_crosssell_block.
 *
 *   Ces règles ont d'abord été écrites en « .jvcs.ets_crosssell_block … » pour
 *   égaliser la spécificité des sélecteurs à trois classes qu'elles remplacent.
 *   C'était faux, et mesuré faux sur le HTML servi : les DEUX gabarits de
 *   conteneur ne posent pas les mêmes classes.
 *
 *     conteneur-onglets.tpl  → « ets_crosssell_block … layout_tab »   (la porte)
 *     conteneur-liste.tpl    → « products_block featured-products … » (ne la porte PAS)
 *
 *   Les huit règles étaient donc mortes sur toute la mise en page en liste, dont
 *   la fiche produit. Le point commun fiable est la section rendue par
 *   liste-produits.tpl, présente dans les deux cas :
 *
 *     <section class="featured-products featured-products-home mt-2 clearfix">
 *
 * ⛔ ET LE DÉFAUT ÉTAIT INVISIBLE, ce qui est le vrai piège. ets_crosssell injecte
 *   dans le corps de page un <style> aux largeurs IDENTIQUES, sous
 *   « .featured-products.featured-products-home .product-miniature ». Ce sélecteur
 *   matche notre section, qui porte les deux classes : l'encart s'affichait donc
 *   correctement GRÂCE au CSS de l'ancien module. Le jour de sa désinstallation, la
 *   mise en page tombait — sans qu'aucun changement de notre côté ne l'explique.
 *
 *   D'où le préfixe à trois classes ci-dessous, qui porte chaque règle à (0,4,0) :
 *   il bat ce <style> en (0,3,0) alors qu'il est placé APRÈS nous dans le document,
 *   et il rend la feuille autonome quand ets_crosssell disparaîtra.
 *
 * ⚠ NON MESURÉ : le contenu de themes/junglevet/assets/css/custom.css n'a pas été
 *   relevé. Si une règle y vise le même élément avec une spécificité supérieure,
 *   elle gagnera malgré cette précaution. À contrôler dans l'inspecteur après
 *   bascule, sur la fiche produit et sur le panier.
 */

.jvcs .featured-products.featured-products-home .jvcs__produits {
    width: 100%;
}

.jvcs .featured-products.featured-products-home .product-miniature {
    width: calc(100% / 4 - 20px);
}

@media (max-width: 1199px) {
    .jvcs .featured-products.featured-products-home .product-miniature {
        width: calc(100% / 3 - 20px);
    }
}

@media (max-width: 991px) {
    /* ⚠ UN SEUL porteur de cet écart vertical, la section interne. La version
       d'origine visait aussi le conteneur externe, sélecteur qui ne matchait
       aucun de nos deux gabarits ; le rendre vivant doublerait la marge. */
    .jvcs .featured-products.featured-products-home {
        margin-bottom: 2.2rem;
    }

    .jvcs .featured-products.featured-products-home .jvcs__produits {
        display: inline-block;
    }

    .jvcs .featured-products.featured-products-home .product-miniature {
        width: calc(100% / 2 - 20px);
    }

    /* Le thème pose une ombre sur la description ; elle alourdit un carrousel
       de vignettes serrées sur petit écran. Retrait repris de la surcharge. */
    .jvcs .featured-products.featured-products-home .thumbnail-container .product-description {
        box-shadow: none;
    }
}

@media (max-width: 600px) {
    .jvcs .featured-products.featured-products-home .product-miniature {
        width: calc(100% / 1 - 20px);
    }
}

/* Pictogramme accolé au titre.
   ⚠ Dimensions imposées en attribut ET en CSS : l'attribut évite le décalage de
   mise en page pendant le chargement, le CSS garantit l'alignement.

   ⚠ 27px de haut pour un PNG qui mesure 25 × 25 : l'image est donc étirée de 8 %.
   C'est ce que faisait le style inline de la surcharge du thème, reproduit tel
   quel pour ne rien changer au rendu. height: 25px corrigerait la déformation. */
.jvcs__picto {
    display: inline-block;
    width: 25px;
    height: 27px;
    vertical-align: middle;
    margin-left: 8px;
}

/* ⚠ La surcharge utilisait !important sur margin-bottom. Évité ici : la
   spécificité de .jvcs suffit, et !important rend la feuille impossible à
   ajuster depuis le Custom CSS du thème. */