/* Japean — barre "Commander" collante en bas d'ecran, page panier, mobile uniquement.
   Pose du 01/09/2026 (GO John).

   Pourquoi : sur mobile la mise en page 2 colonnes du desktop s'empile, ce qui envoie
   le recapitulatif ET son bouton "Commander" a 1406 px, soit ~1,7 ecran de defilement.
   Mesure Matomo aout : 7 % des paniers mobiles sont finalises contre 28 % sur desktop,
   alors que le mobile produit 3x plus de paniers (2 778 EUR abandonnes en un mois).
   Le bouton n'est pas refusé : il n'est pas trouvé.

   Choix technique : 100 % CSS, aucun JS. PrestaShop re-genere le bloc
   .cart-summary__actions a chaque mise a jour AJAX du panier (changement de quantite) ;
   une injection DOM serait detruite a ce moment-la, pas une regle CSS.

   Rien n'est masque ni supprime : le bloc est seulement repositionne sur petit ecran.
   Au-dessus de 768 px, la page reste strictement identique a aujourd'hui. */

@media (max-width: 767.98px) {

  body#cart .cart-summary__actions.checkout {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    margin: 0;
    padding: 10px 14px;
    /* encoche / barre gestuelle des iPhone recents */
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
  }

  body#cart .cart-summary__actions.checkout .btn {
    width: 100%;
    margin: 0;
    /* cible tactile confortable (>= 44 px recommande) */
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* de la place en bas de page pour que la barre ne recouvre jamais le contenu
     (notamment le bloc "Avant de commander" situe juste apres le recapitulatif) */
  body#cart #wrapper {
    padding-bottom: 96px;
  }

  /* les deux pastilles flottantes doivent remonter au-dessus de la barre,
     sinon elles se retrouvent dessous et deviennent incliquables */
  body#cart #jpn-support {
    bottom: 84px !important;
  }

  body#cart .agJsWidget {
    bottom: 72px !important;
  }
}