@media(max-width: 900px){
.page-content.card.card-block,
.vpl-two-cols,
body,
#wrapper,
	#content {
	  overflow: visible !important;
	}

/* ========= VOG Product List — mobile only (<768px) ========= */

	/* Grille des produits : tout sur une ligne */
 .desktop-only{ display:none !important; }
  .mobile-only{ display:block !important; }

  /* Grille PRODUIT — MOBILE = 3 colonnes */
  .vpl-row{
    grid-template-columns:70px 1fr 130px; /* thumb | infos | qty+price */
    align-items:start;
    gap:.4rem;
  }
  .vpl-col-thumb{ grid-column:1; }
  .vpl-col-info{  grid-column:2; }
  .vpl-col-mobile-qtyprice{ grid-column:3; }
  .vpl-col-thumb{ grid-column:1; }
  .vpl-col-info{  grid-column:2; }
  .vpl-col-mobile-qtyprice{ grid-column:3; }
  .vpl-mobile-col3{ display:flex; flex-direction:column; gap:.35rem; }

  /* Stepper */
  .vpl-qty-mobile{
    display:grid;
    grid-template-columns:28px 1fr 28px;
    gap:.3rem; align-items:center;
  }
  .vpl-qty-mobile .vpl-qty{
    text-align:right; padding:.35rem .4rem;
    border:1px solid #000; border-radius:6px;
  }
  .vpl-stepper{
    border:1px solid #ddd; border-radius:6px; background:#f5f5f5;
    width:28px; height:32px; line-height:30px; font-size:18px; cursor:pointer;
  }

  /* Select tiers */
  .vpl-qty-select{
    width:100px; height:32px;
    border:1px solid #000; border-radius:6px; padding:0 .35rem;
    background:#fff;
  }
      .vog-search-product {
        position: sticky;
        top: 0px; /* ajuste la hauteur de ton header/menu */
        z-index: 9999;
        background: #fff;
        padding: 5px;
        border-bottom: 1px solid #ddd;
    }
	.vog-search-product input {border: 1px solid rgba(0,0,0,0.25) !important;}

.head_commande_express {
  display: row !important;

}	
  

  /* Prix sous le contrôle */
  .vpl-mobile-prices{ font-size:.9rem; text-align:right; }
  .vpl-mobile-prices .vpl-price-line strong{ font-size:1rem; }

	/* Image */
	.vpl-col-thumb img{
	  max-width:60px;
	  height:auto;
	}

	/* Info produit */
	.vpl-col-info .vpl-name{
	  font-size:.9rem;
	  line-height:1.2;
	}
	.vpl-col-info .vpl-ref,
	.vpl-col-info .vpl-ean{
	  font-size:.75rem;
	  color:#666;
	}

	/* Quantité avant prix */
	.vpl-col-qty{ grid-column:3; text-align:center; }
	.vpl-col-price{ grid-column:4; text-align:right; }

	/* Champ quantité : touch friendly */
	.vpl-qty{
	  width:70px;
	  text-align:right;
	  padding:.45rem .5rem;
	  border:1px solid #000;     /* bordure noire demandée */
	  border-radius:8px;
	  font-size:16px;            /* évite le zoom iOS */
	}

	/* Prix & paliers */
	.vpl-price-line{ font-size:.9rem; }
	.vpl-tiers .vpl-tier{ font-size:.75rem; }

	/* Barre de recherche sticky en haut dès qu’un client est sélectionné (classe posée par JS) */
	.vpl-search-sticky{
	  position:sticky;
	  top:0;
	  z-index:9999;
	  background:#fff;
	  padding:.4rem .2rem;
	  border-bottom:1px solid #eee;
	}

	/* Panier sticky en bas */
	 .vpl-two-cols { display: block; }

	  /* Panier sticky natif */
	  #vpl-basket.vpl-mobile-stick{
		position: -webkit-sticky;
		position: sticky;
		bottom: 0;
		top: auto;
		z-index: 10000;
		background: #fff;
		border-radius: 10px 10px 0 0;
		box-shadow: 0 -6px 18px rgba(0,0,0,.08);
		max-height: 200px;                 /* demandé */
		overflow: auto;                     /* scroll interne si > 200px */
		-webkit-overflow-scrolling: touch;
		margin-top: 16px;                   /* espace depuis la liste */
	  }

	  /* Fallback “garanti” pour iOS/surcouches qui cassent sticky */
	  #vpl-basket.vpl-mobile-fixed{
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 10000;
		background: #fff;
		border-radius: 10px 10px 0 0;
		box-shadow: 0 -6px 18px rgba(0,0,0,.08);
		max-height: 200px;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	  }

	  /* Le corps de lignes peut scroller quand le panier est petit */
	  #vpl-basket .vpl-basket-body{
		max-height: 160px; /* ajuste si ton header est plus haut */
		overflow: auto;
	  }

	/* Liste des lignes du panier : compacte + scroll interne si trop longue */
	.vpl-cart-rows{
	  max-height: 45vh;       /* scroll interne si > à la moitié de l’écran */
	  overflow:auto;
	  padding-right:.25rem;
	}

	/* Ligne panier : image à gauche, titre à droite, puis quantités/total en dessous */
	.vpl-cart-row{
	  display:grid;
	  grid-template-columns: 48px 1fr;
	  gap:.5rem;
	  align-items:start;
	  padding:.5rem 0;
	  border-bottom:1px dashed #eee;
	  background:#fff;
	}
	.vpl-cart-img-el{ width:44px; height:auto; display:block; }
	.vpl-cart-name{ font-weight:600; color:#222; font-size:14px; }
	.vpl-cart-subrow{ color:#444; font-size:12px; }

	/* Bouton supprimer (croix) */
	.vpl-cart-remove{
	  grid-column: 2 / span 1;
	  justify-self:end;
	  border:none;
	  background:#eee;
	  width:26px; height:26px; line-height:24px;
	  border-radius:50%;
	  cursor:pointer;
	  font-size:18px;
	  color:#444;
	}
	
  .vpl-price-mobile{ display:block; margin-top:.25rem; text-align:right; }
  .vpl-price-mobile-show{ display:flex; gap:.5rem; justify-content:flex-end; align-items:center; }
  .vpl-price-mobile-edit{ display:none; margin-top:.25rem; }
  .vpl-price-mobile-input{
    width:120px; text-align:right; padding:.35rem .4rem; border:1px solid #ddd; border-radius:6px;
  }
  
  .vpl-price-mobile-edit-btn{
    border:1px solid #ddd; background:#f5f5f5; border-radius:6px; padding:.2rem .45rem; font-size:.85rem; cursor:pointer;
  }
  .vpl-price-mobile-show,
.vpl-price-mobile-value { cursor: pointer; -webkit-tap-highlight-color: transparent; }
	
	
.vpl-price-mobile-edit { display:none; align-items:center; gap:.5rem; }
.vpl-price-mobile-edit input.vpl-price-mobile-input {
  width: 120px; /* ou 100% si tu préfères */
  padding: .4rem .5rem;
  border: 1px solid #888;
  border-radius: 6px;
  font-size: 16px; /* évite le zoom iOS */
}
.vpl-price-mobile-show { display:flex; align-items:center; gap:.6rem; }
.vpl-price-mobile-edit-btn { background:#eee; border:1px solid #ccc; border-radius:6px; padding:.3rem .6rem; }
.vpl-price-mobile-save, .vpl-price-mobile-cancel { padding:.3rem .6rem; border:1px solid #ccc; border-radius:6px; background:#f7f7f7; }
	
	
.vpl-cart-remove:hover{ background:#e2e2e2; }

	/* Footer total */
	.vpl-basket-footer{
	  display:flex;
	  justify-content:space-between;
	  padding-top:.5rem;
	  border-top:1px solid #ccc;
	  font-weight:700;
	}

	/* Fine barre de scroll (Chromium/Safari/Edge) */
	.vpl-cart-rows::-webkit-scrollbar{ width: 6px; }
	.vpl-cart-rows::-webkit-scrollbar-track{ background: transparent; }
	.vpl-cart-rows::-webkit-scrollbar-thumb{
	  background: rgba(0,0,0,.25);
	  border-radius: 3px;
	}

/* Firefox thin scrollbar */
	.vpl-cart-rows{ scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.25) transparent; }

/* Masquer le bloc de recherche client quand un client est choisi (JS peut ajouter une classe .vpl-client-picked au body) */
	body.vpl-client-picked #vpl-client-picker{ display:none !important; }

 .vpl-two-cols{ display: block; }

	  /* Le bloc panier lui-même devient sticky en bas */
	  #vpl-basket{
		position: -webkit-sticky;
		position: sticky;
		bottom: 0;           /* colle au bas de l’écran */
		top: auto;
		z-index: 10000;
		border-radius: 10px 10px 0 0;
		box-shadow: 0 -6px 18px rgba(0,0,0,.08);
		background: #fff;
		max-height: 200px;   /* limite en hauteur */
		overflow: auto;      /* scroll interne si contenu > 200px */
		-webkit-overflow-scrolling: touch;
	  }

	  /* Le conteneur interne suit la même limite de hauteur */
	  #vpl-basket .vpl-basket-inner{
		max-height: inherit;
	  }

	  /* Le corps (liste lignes) peut scroller dans le panier */
	  #vpl-basket .vpl-basket-body{
		max-height: calc(200px - 54px); /* ajuste si l’en-tête est haute */
		overflow: auto;
	  }

  /* Option : on masque le bouton “Masquer/afficher” en mobile */
  .vpl-basket-controls{ display:none; }
  /* Conteneur scrollable des lignes de récap */
  .vpl-cart-rows{
    max-height: 200px;
    overflow: auto;
  }
  
	  .vpl-qty, #vpl-client-cp, #vpl-search{
	  font-size: 16px;      /* clé anti-zoom iOS */
	  -webkit-text-size-adjust: 100%;
	}
.header-top .container {display:none;}

	  #vpl-basket .vpl-cart-rows{ display:none; }
	  /* Afficher les lignes quand data-expanded=1 */
	  #vpl-basket[data-expanded="1"] .vpl-cart-rows{
		display:block;
		max-height:200px;
		overflow:auto;
	  }

	  /* Pied mobile collé en bas, avec le total toujours visible */
	  .vpl-mobile-footer{
		position:sticky;
		bottom:0;
		left:0; right:0;
		display:flex;
		justify-content:space-between;
		align-items:center;
		gap:.75rem;
		padding:.6rem .8rem;
		background:#fff;
		border-top:1px solid #ddd;
		z-index:10000;
	  }
	  .vpl-mobile-toggle{
		border:1px solid #ddd;
		border-radius:6px;
		padding:.4rem .6rem;
		background:#f8f8f8;
	  }
  .vpl-mobile-total{ font-weight:700; }

  /* Le footer desktop n’est pas utile en mobile */
  .vpl-basket-footer{ display:none; }
}

	/* Scrollbar fine sur la liste (mobile et desktop) */
	.vpl-cart-rows{
	  scrollbar-width: thin;
	  scrollbar-color: #bbb transparent;
	}
.vpl-cart-rows::-webkit-scrollbar{ width: 6px; height: 6px; }
.vpl-cart-rows::-webkit-scrollbar-thumb{ background:#bbb; border-radius:3px; }
.vpl-cart-rows::-webkit-scrollbar-track{ background:transparent; }




}