/* ============================================================
   alter-mobile-fixes.css — Hotfixes responsive mobile
   Lot Playwright iphone14 audit (2026-05-10).
   Priority 900 → s'applique APRÈS tous les autres CSS thème.

   PRINCIPE : laisser le navigateur gérer overflow:hidden globalement
   est un anti-pattern (coupe le contenu). On corrige les sources
   réelles : grid items qui n'ont pas min-width:0, badges au mauvais
   sélecteur, padding desktop hérité en mobile, etc.
   ============================================================ */

/* ---------- 1. Listing catégorie : grid items contractables ----------
   CSS Grid items ont min-width:auto par défaut → ils ne peuvent pas
   shrinker en dessous de leur contenu min-content. Pour des produits
   avec noms longs sans séparateurs (ex. "BordeauxNNN") sur viewport
   étroit (390px), la cellule grille refuse de descendre en dessous
   de la largeur du mot et déborde le grid container.
   Fix : min-width:0 sur tous les grid items + word-break sur titres. */
@media (max-width: 991.98px) {
  #js-product-list .products > *,
  #js-product-list .products .product-miniature,
  #js-product-list .products .product-miniature .thumbnail-container,
  #js-product-list .products .product-miniature .product-description {
    min-width: 0;
    box-sizing: border-box;
  }
  #js-product-list .products .product-miniature .product-title,
  #js-product-list .products .product-miniature .product-title a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Description padding : la rule mobile existante (15px 16px) reste
     OK. On force juste le respect de la largeur de cellule. */
  #js-product-list .products .product-miniature .product-description {
    width: 100%;
    max-width: 100%;
  }
}

/* ---------- 2. Badges produit : sélecteur cohérent ----------
   Bug pré-existant : le HTML rendu utilise `.pgvg-ratio-badge` mais la
   règle font-size:12px en mobile cible `.pgvg-badge` (alterbadge a
   probablement renommé sans MAJ du theme). Conséquence : `.format-badge`
   à 12px et `.pgvg-ratio-badge` à 15px (default token alterbadge) →
   2 badges, 2 tailles différentes côte-à-côte. */
@media (max-width: 991.98px) {
  .product-miniature .product-extra-features .pgvg-ratio-badge {
    font-size: 12px;
  }
}

/* ---------- 3. Cart : code promo + subtotals padding mobile ----------
   .block-promo : 27/32px desktop → trop épais sur 390px (champ rétréci
   au point d'être illisible). 16/16 sur mobile = aération suffisante. */
@media (max-width: 991.98px) {
  .block-promo {
    padding: 16px 16px 12px 16px;
  }
  #cart #cart-subtotal-products,
  #cart #cart-subtotal-shipping,
  #cart #cart-subtotal-discount {
    padding: 16px 16px;
  }
  .cart-grid-right .cart-summary h3,
  #checkout #promo-code h3 {
    padding: 16px 16px 8px 16px;
  }
  /* Champ + bouton "Ajouter" : permettre le wrap pour ne pas casser la
     ligne en cellules ultra-étroites. */
  #promo-code .promo-code form,
  #checkout #promo-code .promo-code form {
    flex-wrap: wrap;
    gap: 8px;
  }
  .block-promo .promo-input {
    font-size: 16px;
    flex: 1 1 100%;
    min-width: 0;
  }
  .block-promo .promo-input + button {
    flex: 1 1 100%;
  }
}

/* ---------- 4. Modal #blockcart-modal (ajout panier PS 8) ----------
   Bootstrap .modal-dialog max-width:500px par défaut + center → marges
   mais sur 390px viewport, contenu coupe sur les bords. Force full-width
   avec marge 8px. Layout vertical : photo stacked au-dessus infos
   (au lieu de Bootstrap row 2 cols, illisible en mobile). */
@media (max-width: 991.98px) {
  #blockcart-modal .modal-dialog,
  #blockcart-modal .modal-dialog.modal-dialog-centered {
    margin: 8px;
    max-width: calc(100vw - 16px);
  }
  #blockcart-modal .modal-content {
    max-width: 100%;
  }
  #blockcart-modal .modal-body,
  #blockcart-modal .modal-header,
  #blockcart-modal .modal-footer {
    padding: 16px;
  }
  #blockcart-modal .modal-body .row {
    flex-direction: column;
    margin: 0;
  }
  #blockcart-modal .product-image,
  #blockcart-modal .cart-content,
  #blockcart-modal .modal-body [class^="col-"],
  #blockcart-modal .modal-body [class*=" col-"] {
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
    padding: 0;
  }
  #blockcart-modal .product-image img {
    max-height: 180px;
    width: auto;
    margin: 0 auto 12px;
    display: block;
  }
  #blockcart-modal .cart-content-btn {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  #blockcart-modal .cart-content-btn > * {
    flex: 1 1 100%;
  }
}