/**
 * Fiche produit — ajustements MOBILE UNIQUEMENT.
 * Le layout produit passe en une seule colonne sous 992px (col-lg-6) : toutes les
 * règles ci-dessous sont donc gated par @media (max-width: 991.98px).
 * La version desktop (≥ 992px, deux colonnes) reste strictement la version de base.
 * Chargé après app.css via templates/_partials/stylesheets.tpl.
 */

@media (max-width: 991.98px) {

  /* --- Bloc livraison allégé --------------------------------------------
     Base : 18px + police "medium" (semi-gras) => très lourd sur mobile. */
  .products-fiche .products-delivery {
    font-size: 14px;
    line-height: 1.5;
  }
  .products-fiche .products-delivery .en_stock {
    font-size: 14px;
  }
  .products-fiche .products-delivery .frais_offerts {
    display: block;
    margin-top: 6px;
    font-family: inherit;
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6b7280;
  }

  /* --- Logos de paiement : même hauteur, centrés ------------------------
     Hauteur fixe + largeur auto => tous les logos affichés à la même hauteur
     (la largeur s'adapte au ratio de chaque logo). */
  .products-fiche .logos_paiement {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    max-width: 100%;
  }
  .products-fiche .logos_paiement img {
    height: 18px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  /* --- Made in Belgium : centré + plus d'espace vertical ---------------- */
  .products-fiche .madeinbelgium {
    display: block;
    margin: 18px auto 0;
  }

  /* --- Continuité des fonds blancs : toute la colonne produit en blanc,
         à plat (pas d'arrondi, pas d'ombre sur les blocs) ---------------- */
  .products-fiche .products-gallery,
  .products-fiche .products-gallery .page-content,
  .products-fiche .products-title-price.mobile-only,
  .products-fiche .product-buy-card {
    background: #fff;
    border-radius: 0;
    box-shadow: none;
  }
  /* Fond des images en blanc */
  .products-fiche .products-gallery img,
  .products-fiche .products-gallery .product-cover,
  .products-fiche .products-gallery .thumbnails-slider,
  .products-fiche .products-gallery .images-container {
    background: #fff;
  }
  /* Rapproche l'onglet (détails) du bloc d'achat -> continuité verticale */
  .products-fiche .products-purchase-box {
    margin-top: 0;
  }

  /* --- Carte d'achat (déplacée sous les images par product-mobile.js) --- */
  .products-fiche .product-buy-card {
    margin: 0;
    padding: 8px 18px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .products-fiche .product-buy-card .product-information {
    margin: 0;
  }
  /* Titre "Configurez votre produit" (ajouté par le JS, mobile uniquement).
     margin-bottom nul + première zone collée au titre (voir plus bas) pour
     réduire l'espace titre -> "Corps". */
  .products-fiche .product-buy-card .buy-card-title {
    margin: 0;
    font-family: "Geomanist Bold", sans-serif; /* graisse via la famille (webfont) */
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    text-align: left;
    text-transform: none;
  }
  /* Labels "Corps" / "Couleur" / "Quantité" en graisse normale
     (par défaut le thème les affiche en Geomanist Medium => trop gras). */
  .products-fiche .product-buy-card .info-title {
    font-family: "Geomanist Regular", sans-serif;
    font-weight: 400;
  }

  /* --- Alignement à gauche des contrôles d'achat (cohérence avec les titres) -
     Le thème centre pastilles (<=475px) + quantité/bouton (<=576px) alors que
     les intitulés restent à gauche : on réaligne tout à gauche sous le titre. */
  .products-fiche .product-buy-card .colors-container {
    justify-content: flex-start;
  }
  .products-fiche .product-buy-card .product-variants ul {
    padding-left: 0;
    margin: 0;
    list-style: none;
    text-align: left;
  }
  .products-fiche .product-buy-card .product-variants .input-container {
    float: none;
    display: block;
    text-align: left;
  }
  .products-fiche .product-buy-card #quantity_wanted_p {
    justify-content: flex-start;
  }
  .products-fiche .product-buy-card .btn.add-to-cart {
    margin-left: 0;
    margin-right: auto;
  }

  /* --- Fines lignes de séparation entre Corps / Couleur / Quantité --------- */
  .products-fiche .product-buy-card .product-variants .variant-group + .variant-group,
  .products-fiche .product-buy-card .product-add-to-cart.products-quantity {
    border-top: 1px solid #e5e7eb;
    margin-top: 22px;
    padding-top: 22px;
  }
  /* Espace réduit entre le titre "Configurez votre produit" et "Corps" :
     on supprime le grand margin-top (50px) de la première zone. */
  .products-fiche .product-buy-card .product-variants .variant-group:first-of-type {
    margin-top: 6px;
  }
  /* Logos de paiement : plus d'espace vertical autour */
  .products-fiche .product-buy-card .logos_paiement {
    margin: 14px 0;
  }
  /* Avis (étoiles + scores) : réellement centrés + plus d'espace au-dessus.
     Structure : .zone_avis > a > .lws-reviews-avg-mobile-widget > .avg-widget-item.
     Le <a> et les items à largeur fixe (250px, contenu calé à gauche) décalaient
     le bloc vers la gauche : on force le <a>/widget en pleine largeur et chaque
     ligne à largeur auto, centrée. */
  .products-fiche .product-buy-card .zone_avis {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .products-fiche .product-buy-card .zone_avis > a {
    display: block;
    width: 100%;
  }
  .products-fiche .product-buy-card .zone_avis .lws-reviews-avg-mobile-widget {
    width: 100%;
    justify-content: center;
  }
  .products-fiche .product-buy-card .zone_avis .avg-widget-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;      /* une ligne d'avis par rangée, contenu centré */
    max-width: 100%;
    margin: 4px 0;
  }

}