/* La table prend 100% et la désignation s’étire vraiment */
.vogproductlist .table.vpl-table{width:100%;table-layout:auto}
.vogproductlist .vpl-col-name-col{width:auto}
.vogproductlist td.vpl-col-name{width:35%}

/* Empêcher que le nom soit compressé : il prend la place disponible */
.vogproductlist td.vpl-col-name a{display:inline-block;max-width:100%}
.vogproductlist td.vpl-col-name{white-space:normal}

/* Paliers sous le prix de base */
.vogproductlist td.vpl-col-price .vpl-price-line{line-height:1.28}
.vogproductlist td.vpl-col-price .vpl-tiers{
  margin-top:.4rem;border:1px solid #e2e6ea;border-radius:6px;overflow:hidden
}

/* >>> Spécificité haute + !important pour battre le thème <<< */
.vogproductlist table.vpl-table td .vpl-tiers .vpl-tier{
  padding:.32rem .6rem;display:block;border-top:1px solid #e9ecef !important
}
.vogproductlist table.vpl-table td .vpl-tiers .vpl-tier:first-child{border-top:0 !important}
.vogproductlist table.vpl-table td .vpl-tiers .vpl-tier.odd{background:#f0f2f5 !important}
.vogproductlist table.vpl-table td .vpl-tiers .vpl-tier.even{background:#ffffff !important}
/* Bouton "retour en haut" */
.vpl-backtop{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid #d0d7de;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  font-size: 20px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
  pointer-events: none; /* clique désactivé tant qu'il est caché */
}
.vpl-backtop:hover{ box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.vpl-backtop.vpl-show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.vpl-disabled { opacity: .7; pointer-events:none; }
.vpl-spinner {
  display:inline-block; width:1em; height:1em; margin-right:.5em;
  border: .15em solid currentColor; border-right-color: transparent;
  border-radius:50%; animation: vplspin 0.8s linear infinite;
  vertical-align: -0.15em;
}
@keyframes vplspin { to { transform: rotate(360deg); } }
.vpl-table {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.vpl-header {
  font-weight: 600;
  background: #f8f8f8;
}
.vpl-col {
  overflow-wrap: anywhere;
}

/* Vignette produit : contrainte de taille (sinon home_default ~250px déborde de
   sa colonne 100px et passe par-dessus les infos réf/nom/stock). */
.vpl-col-thumb{ overflow:hidden; }
.vpl-col-thumb img,
.vpl-thumb-img{
  display:block;
  max-width:100%;
  width:auto;
  height:auto;
  max-height:96px;
  object-fit:contain;
}
@media(max-width: 900px){
  .vpl-row{

  }
  .vpl-header { display:none; } /* cache l’en-tête en mobile */
}

.vpl-table{display:flex;flex-direction:column;width:100%}
.vpl-row{display:grid;gap:0;align-items:stretch;border-bottom:1px solid #eee}
.vpl-header{font-weight: 300;
  background: white;
  text-transform: uppercase;
  color: gray;
  font-size: 14px;}
.vpl-col{padding:.5rem;border-right:1px solid #eee;align-items:center}
.vpl-col:last-child{border-right:none} /* pas de bordure sur la dernière colonne */

/* Desktop / large */
@media(min-width: 901px){
  
  .vpl-col-price{justify-content:flex-end;text-align:right}
  .vpl-col-qty{justify-content:flex-end;text-align:right}
}

/* Mobile : 4 colonnes compactes */
@media(max-width: 900px){
  .vpl-header{display:none} /* header masqué en mobile */
  .vpl-row{
    grid-template-columns: 64px 1fr max-content max-content; /* photo | infos | prix | qté */
  }
  .vpl-col-thumb img{max-width:56px}
  .vpl-ref-ean{font-size:.85em;margin-bottom:.2rem}
  .vpl-name a{text-decoration:none;font-size:.95em;font-weight:500}
  .vpl-col-price{font-size:.9em;text-align:right}
  .vpl-col-qty input{width:74px}
  .vpl-col {
  padding: 0.3rem;
  }
  .vpl-col img {max-width: 60px !important;}
  .vpl-col  {font-size: 0.8rem;}
  .vpl-col input {width:48px !important;}
  .vpl-tiers .vpl-tier {font-size:10px;}
    .vpl-col-info .vpl-ref, .vpl-col-info .vpl-ean {
    font-size: .65rem;
    color: #555;
  }
 #vpl-status {display:none;}
 #module-vogproductlist-list .card-block {
  padding: 0rem 0rem 0rem;
}
#module-vogproductlist-list #wrapper .container {

  padding: 0 4px !important;
}
}

/* Tiers dégressifs alternés */
.vpl-tiers .vpl-tier.odd{background:#f7f7f7}
.vpl-tiers .vpl-tier.even{background:#ffffff}
.vpl-client-picker {font-size: 0.9rem;
font-weight: 300;
background: #1b355b;
  padding: 10px;
 color: white;
  margin-top: 20px !important;
 border-radius: 5px;
}
.vog-search-product {background: #4cdfcd;padding: 10px;
  border-radius: 5px;}
 #vpl-client-status {display:none;}
.vpl-client-row {background:white;}
  .vpl-two-cols{ display:grid; grid-template-columns:1fr 300px; gap:1rem; align-items:start; }
  .vpl-col-list{min-width:0} .vpl-col-basket{min-width:0}

 
  .vpl-col-qty{order:3} .vpl-col-price{order:4}
  .vpl-info-block .vpl-info-line{display:flex;gap:.5rem;align-items:center}
  .vpl-min{margin-left:.5rem;padding:.1rem .4rem;border:1px solid #ddd;border-radius:999px;font-size:.8rem;color:#444}
  .vpl-min-warn{color:#c00;font-size:.85rem}
  .vpl-tiers .vpl-tier.odd{background:#f7f7f7} .vpl-tiers .vpl-tier.even{background:#eeeeee}

  /* Panneau panier latéral — sticky dans la colonne droite */
  .vpl-two-cols{ grid-template-columns: 1fr 270px; }
.vpl-col-basket {
  position: -webkit-sticky;
  position: sticky;
  top: 16px;
  align-self: start;
  height: calc(100vh - 32px); /* hauteur max visible */
  overflow-y: auto;           /* scroll interne */
  z-index: 10000;
}
  #vpl-basket{
    position:static;
    border-radius:12px;
    padding:.75rem;
    background:#f7f7f7;
    border-radius: 1.75rem;
  }
  .page-content.card.card-block, .vpl-two-cols{ overflow:visible !important; }

  .vpl-basket-header{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.5rem}
  .vpl-basket-client{font-weight:700}
  .vpl-edit-client{font-weight:400;font-size:.9rem;margin-left:.35rem}
  .vpl-basket-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
  .vpl-basket-controls{display:flex;justify-content:flex-end;margin:.25rem 0 .5rem 0}
  .vpl-toggle-basket{background:#f5f5f5;border:1px solid #ddd;border-radius:4px;padding:.25rem .5rem;cursor:pointer}

  .vpl-cart-rows{overflow:visible}
  .vpl-cart-row{
    display:grid; grid-template-columns:52px 1fr auto; gap:.6rem; align-items:start;
    padding:.5rem .5rem; border-bottom:1px dashed #eee; border-radius: 1rem;
    box-shadow: 0 .5rem 2rem 0 rgba(115,129,136,.1); background:#fff; margin-bottom: 12px;
  }
  .vpl-cart-img-el{ width:48px; height:auto; display:block }
  .vpl-cart-main{ display:flex; flex-direction:column; gap:.15rem }
  .vpl-cart-name{ font-weight:600; color:#222; font-size:14px; }
  .vpl-cart-subrow{ color:#444; font-size:12px; }
  .vpl-cart-remove{
    align-self:center; 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-cart-remove:hover{ background:#e2e2e2; }

  .vpl-basket-footer{display:flex;justify-content:space-between;padding-top:.5rem;border-top:1px solid #ccc;font-weight:700}

  .vpl-search-sticky{ position:sticky; top:0; z-index:9999; background:#fff; padding:.4rem .2rem; border-bottom:1px solid #eee; }

  .vpl-toast{
    display:none; margin-bottom:.5rem; padding:.5rem .6rem; border-radius:6px; font-weight:600;
    background:#e8f7ee; color:#0f6b2f; border:1px solid #bfe8cf;
  }
  .vpl-toast[data-type="error"]{ background:#fdecea; color:#7a1414; border-color:#f3c1bd; }
  
  .vpl-col-basket::-webkit-scrollbar {
  width: 1px;
}

.vpl-col-basket::-webkit-scrollbar-track {
  background: transparent; /* ou #f5f5f5 si tu veux une couleur */
}

.vpl-col-basket::-webkit-scrollbar-thumb {
  background-color: #999;  /* couleur de la barre */
  border-radius: 2px;
}

/* Scrollbar Firefox */
.vpl-col-basket {
  scrollbar-width: thin;       /* réduit la largeur */
  scrollbar-color: #999 transparent; /* couleur barre + fond */
}
.texte-bleu {color: #5769a4;
  font-weight: 700;}
  

  @media (max-width: 640px){
    .vpl-two-cols{ display:block; }
    .vpl-row{ grid-template-columns:70px 1fr 60px 120px; align-items:center; gap:.3rem; }
    .vpl-col-thumb{grid-column:1} .vpl-col-info{grid-column:2} .vpl-col-qty{grid-column:3;text-align:center} .vpl-col-price{grid-column:4;text-align:right}
    .vpl-col-info .vpl-name{font-size:.85rem}
    .vpl-col-info .vpl-ref,.vpl-col-info .vpl-ean{font-size:.75rem;color:#555}
    .vpl-col-thumb img{max-width:60px;height:auto}

    #vpl-basket{ position:sticky; bottom:0; top:auto; width:100%; border-radius:8px 8px 0 0; box-shadow:0 -6px 18px rgba(0,0,0,.08); z-index:10000; }
    .vpl-basket-controls{ display:none; }
  }
  
 .vpl-basket-actions  .btn-primary {width:100%;}

.desktop-only{ display:block !important; }
.mobile-only{ display:none !important; }

/* Grille PRODUIT — DESKTOP = 4 colonnes */
.vpl-row{
  display:grid;
  grid-template-columns:100px 1fr 120px 200px; /* thumb | infos | qty | price */
  gap:.75rem;
  padding:.6rem .2rem;
  border-bottom:1px solid #f1f1f1;
}
.vpl-edit-price{
  border:none; background:transparent; padding:0; cursor:pointer;
  font-weight:700; text-decoration:underline dotted;
}
.vpl-price-override-badge{
  margin-left:.4rem; font-size:.75rem; background:#ffe9a8; color:#7a5a00;
  padding:.05rem .4rem; border-radius:6px;
}
.vpl-price-mobile{ display:none; }
/* Bloc prix mobile : toggle par classe */
.vpl-price-mobile-edit { display:none; }
.vpl-price-mobile.is-editing .vpl-price-mobile-show { display:none; }
.vpl-price-mobile.is-editing .vpl-price-mobile-edit { display:block; }

/* Rendre visiblement cliquable */
.vpl-price-mobile-show,
.vpl-price-mobile-value {
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.vpl-price-mobile-edit input {
  width: 110px; /* ajuste si besoin */
}

@media(min-width: 901px){
.head_commande_express {display:grid;grid-template-columns:50% 50%;align-content: center;
  align-items: center;
  font-size: 2.2rem;
  color: #1b355b;}
}
