/* ===== DA page PANIER /cart — porté de mf-preview-cart-da.css (gâté Adrien, chargé si page_name==cart).
   Markup natif PrestaShop (.cart-grid, .cart-voucher, .cart-summary-line...) ; tokens street-da inlined. ===== */
:root{
  --bg:#071009;--charcoal:#1B1F1A;--off:#F7F7F2;--lime:#A8F000;--neon:#65C900;--green-deep:#2f6b12;--pink:#F2387A;
  --on-dark:#F7F7F2;--on-dark-mut:rgba(247,247,242,.72);--on-dark-dim:rgba(247,247,242,.5);--on-light-dim:#6a726a;
  --line-d:rgba(247,247,242,.10);--line-l:#e2e4dd;--disp:'Arial Black','Arial Bold',Arial,sans-serif;--ease:cubic-bezier(.22,1,.36,1);
}
/* =========================================================================
   PANIER /cart — DA « fermier de la street » (preview only, scope body#cart)
   Chargé APRÈS street-da.css + cards.css. S'appuie sur les tokens :root.
   Parti pris (iso fiche produit) : liste articles = carte claire éditoriale,
   RÉSUMÉ = buy-box panneau sombre charcoal sticky, CTA rose -> lime.
   ========================================================================= */

/* ---------- cadre général ---------- */
body#cart{background:#fff !important;}
body#cart #main{max-width:1240px;margin:0 auto;padding:6px 20px 64px;box-sizing:border-box;}

/* ---------- en-tête de page (titre + fil d'ariane) ---------- */
body#cart .page-header{max-width:1240px;margin:8px auto 0;padding:0 20px;text-align:left;border:0;background:transparent;}
body#cart .page-header h1{font-family:var(--disp);font-weight:900;text-transform:uppercase;
  font-size:clamp(30px,4vw,48px);line-height:1;letter-spacing:-.01em;color:#0d140b;margin:0;}
body#cart .page-header h1::after{content:"";display:block;width:64px;height:5px;background:var(--lime);
  border-radius:4px;margin-top:16px;}
body#cart .breadcrumb{max-width:1240px;margin:14px auto 4px;padding:0 20px;background:transparent;}
body#cart .breadcrumb ol{padding:0;margin:0;}
body#cart .breadcrumb li,body#cart .breadcrumb li a,body#cart .breadcrumb li span{
  font-family:var(--disp);text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--on-light-dim);}
body#cart .breadcrumb li a:hover{color:#59ab6e;}

/* ---------- grille 2 colonnes ---------- */
body#cart .cart-grid{display:flex;flex-wrap:wrap;gap:26px;margin:22px 0 0;}
body#cart .cart-grid-body,body#cart .cart-grid-right{padding:0;float:none;}
body#cart .cart-grid-body{flex:1 1 100%;max-width:100%;}
body#cart .cart-grid-right{flex:1 1 100%;max-width:100%;}
@media(min-width:992px){
  body#cart .cart-grid{flex-wrap:nowrap;align-items:flex-start;}
  body#cart .cart-grid-body{flex:1 1 auto;width:auto;max-width:none;}
  body#cart .cart-grid-right{flex:0 0 364px;width:364px;position:sticky;top:20px;}
}

/* ============================ COLONNE GAUCHE (articles) =================== */
body#cart .card.cart-container{background:#fff !important;border:1px solid var(--line-l) !important;
  border-radius:22px !important;box-shadow:0 18px 44px rgba(13,20,11,.10) !important;
  padding:22px 24px 8px !important;overflow:hidden;}

/* --- barre récompenses (livraison / cadeau) : re-skin street --- */
body#cart .mf-rewards{background:var(--charcoal);border:0;border-radius:16px;padding:18px 20px 12px;margin:0 0 22px;}
body#cart .mf-rewards__msg{color:var(--on-dark);}
body#cart .mf-rewards__amount{color:var(--lime);font-weight:900;}
body#cart .mf-rewards__done{color:var(--lime);font-weight:900;}
body#cart .mf-rewards__sep{color:var(--on-dark-dim);}
body#cart .mf-rewards__track{background:rgba(247,247,242,.14);}
body#cart .mf-rewards__fill{background:linear-gradient(90deg,#65C900,var(--lime));}
body#cart .mf-rewards__node{background:var(--charcoal);border-color:rgba(247,247,242,.3);}
body#cart .mf-rewards__node--on{background:var(--lime);border-color:var(--lime);color:var(--bg);}
body#cart .mf-rewards__labels{color:var(--on-dark-mut);}
body#cart .mf-rewards__label b{color:var(--off);}
body#cart .mf-rewards__label--on,body#cart .mf-rewards__label--on b{color:var(--lime);}

/* --- en-tête de colonnes --- */
body#cart .cart-items-title{border-bottom:2px solid var(--line-l);padding-bottom:12px;margin-bottom:2px;}
body#cart .cart-items-title .row > div{font-family:var(--disp);text-transform:uppercase;
  letter-spacing:.12em;font-size:11px;color:var(--on-light-dim);}
@media(max-width:767px){body#cart .cart-items-title{display:none;}}

/* --- lignes articles --- */
body#cart ul.cart-items{list-style:none;margin:0;padding:0;}
body#cart li.cart-item{padding:22px 0;border-bottom:1px solid var(--line-l);}
body#cart li.cart-item:last-child{border-bottom:0;}

/* image produit en tuile */
body#cart .product-image img{width:100%;height:auto;border-radius:14px;background:#f2f2ec;
  box-shadow:0 8px 20px rgba(13,20,11,.12);}

/* nom produit */
body#cart .product_name{font-family:var(--disp);font-weight:900;text-transform:uppercase;
  font-size:15px;line-height:1.15;color:#0d140b !important;letter-spacing:.01em;display:inline-block;}
body#cart .product_name:hover{color:var(--green-deep) !important;}

/* pastille conditionnement (Gram: 100g) */
body#cart .product-line-grid-body .product-line-info:nth-child(2){display:inline-flex;align-items:center;
  gap:6px;margin-top:10px;background:rgba(168,240,0,.16);border:1px solid rgba(47,107,18,.28);
  border-radius:999px;padding:4px 12px;}
body#cart .product-line-info .label{color:var(--on-light-dim);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;font-family:var(--disp);}
body#cart .product-line-info .value{color:var(--green-deep);font-weight:900;font-family:var(--disp);font-size:12px;}

/* prix courant + barré + remise */
body#cart .product-price-and-shipping{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;}
body#cart .product-price-and-shipping .price{font-family:var(--disp);font-weight:900;
  color:var(--green-deep);font-size:18px;line-height:1.1;}
body#cart .product-price-and-shipping .regular-price{color:var(--on-light-dim);text-decoration:line-through;
  font-size:13px;font-weight:700;}
body#cart .discount.discount-percentage{background:var(--pink);color:#fff;font-family:var(--disp);
  font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:11px;padding:4px 9px;
  border-radius:20px;box-shadow:0 5px 14px rgba(242,56,122,.3);}

/* quantité -> stepper (buttons injectés par le JS) */
body#cart .qty .mf-qty{display:inline-flex;align-items:center;border:2px solid var(--line-l);
  border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 3px 10px rgba(13,20,11,.06);}
body#cart .mf-qty-btn{width:40px;height:46px;border:0;background:transparent;font-family:var(--disp);
  font-size:20px;line-height:1;cursor:pointer;color:#0d140b;transition:background .15s var(--ease),color .15s var(--ease);}
body#cart .mf-qty-dec:hover{background:rgba(242,56,122,.12);color:var(--pink);}
body#cart .mf-qty-inc:hover{background:rgba(101,201,0,.16);color:#3a8a00;}
body#cart .js-cart-line-product-quantity{width:46px;height:46px;padding:0;border:0;
  border-left:1px solid var(--line-l);border-right:1px solid var(--line-l);text-align:center;
  font-family:var(--disp);font-weight:900;font-size:15px;color:#0d140b;background:transparent;
  -moz-appearance:textfield;box-shadow:none;}
body#cart .js-cart-line-product-quantity::-webkit-outer-spin-button,
body#cart .js-cart-line-product-quantity::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* total ligne */
body#cart .product-line-grid-right .price .product-price strong{font-family:var(--disp);
  font-weight:900;font-size:18px;color:#0d140b;}

/* suppression */
body#cart .remove-from-cart{display:inline-flex;color:var(--on-light-dim);
  transition:color .18s var(--ease),transform .18s var(--ease);}
body#cart .remove-from-cart:hover{color:var(--pink);transform:scale(1.12);}
body#cart .remove-from-cart i{font-size:18px;}

/* continuer les achats -> lien outline discret */
body#cart .cart-grid-body > a.btn-primary{display:inline-flex;align-items:center;gap:8px;margin:18px 0 4px;
  background:transparent !important;border:2px solid var(--line-l) !important;color:#0d140b !important;
  font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:13px;
  padding:12px 22px !important;border-radius:50px !important;box-shadow:none !important;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);}
body#cart .cart-grid-body > a.btn-primary::before{content:"\2190";font-size:15px;line-height:1;}
body#cart .cart-grid-body > a.btn-primary:hover{border-color:var(--green-deep) !important;
  color:var(--green-deep) !important;background:rgba(47,107,18,.06) !important;}

/* cross-sell vide -> masqué */
body#cart .ets_crosssell_block:has(.alert-warning){display:none !important;}
body#cart .ets_crosssell_title{font-family:var(--disp);text-transform:uppercase;letter-spacing:.02em;
  font-size:20px;color:#0d140b;margin:26px 0 14px;}

/* ============================ COLONNE DROITE (résumé sombre) ============== */
body#cart .card.cart-summary{background:var(--charcoal) !important;border:0 !important;
  border-radius:22px !important;padding:6px 24px 24px !important;color:var(--on-dark);overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.3),0 26px 56px rgba(0,0,0,.35) !important;}

/* code promo */
body#cart .cart-voucher h5{font-family:var(--disp);text-transform:uppercase;letter-spacing:.08em;
  font-size:12px;color:var(--on-dark-mut);margin:20px 0 12px;}
body#cart .promo-code form{display:flex;gap:8px;}
body#cart .promo-input{flex:1 1 auto;min-width:0;height:46px;border-radius:12px;
  border:2px solid rgba(247,247,242,.2);background:rgba(247,247,242,.05);color:var(--on-dark);
  padding:0 14px;font-size:14px;transition:border-color .18s var(--ease);}
body#cart .promo-input::placeholder{color:var(--on-dark-dim);}
body#cart .promo-input:focus{outline:0;border-color:var(--lime);}
body#cart .cart-voucher .btn-primary{flex:0 0 auto;background:transparent !important;
  border:2px solid var(--lime) !important;color:var(--lime) !important;border-radius:12px !important;
  font-family:var(--disp);text-transform:uppercase;letter-spacing:.03em;font-size:13px;
  padding:0 18px !important;height:46px;box-shadow:none !important;
  transition:background .2s var(--ease),color .2s var(--ease);}
body#cart .cart-voucher .btn-primary:hover{background:var(--lime) !important;color:var(--bg) !important;}
body#cart .cart-voucher .alert-danger{background:rgba(242,56,122,.12);border:0;color:#ffd7e4;
  border-radius:10px;margin-top:10px;font-size:12.5px;}

/* sous-totaux */
body#cart .cart-detailed-subtotals{border-top:1px solid var(--line-d);margin-top:20px;padding:18px 0 4px;}
body#cart .cart-summary-line{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;}
body#cart .cart-summary-line .label{color:var(--on-dark-mut);font-size:14px;}
body#cart .cart-summary-line .value{color:var(--on-dark);font-weight:700;font-size:14px;}
body#cart #cart-subtotal-shipping .value{color:var(--lime);font-family:var(--disp);
  text-transform:uppercase;letter-spacing:.03em;}

/* total */
body#cart .cart-summary-totals{border-top:1px solid var(--line-d);margin-top:6px;padding-top:14px;}
body#cart .cart-total{display:flex;justify-content:space-between;align-items:baseline;padding:0;}
body#cart .cart-total .label{font-family:var(--disp);text-transform:uppercase;letter-spacing:.04em;
  font-size:14px;color:var(--on-dark);}
body#cart .cart-total .value{font-family:var(--disp);font-weight:900;font-size:30px;line-height:1;color:var(--lime);}

/* CTA checkout */
body#cart .checkout.cart-detailed-actions{padding:0 !important;background:transparent;}
body#cart .checkout .btn-primary{width:100%;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;background:var(--pink) !important;color:#fff !important;border:0 !important;
  border-radius:50px !important;font-family:var(--disp);font-weight:900;text-transform:uppercase;
  letter-spacing:.04em;font-size:15px;padding:17px 22px !important;margin-top:18px;
  box-shadow:0 10px 26px rgba(242,56,122,.4) !important;
  transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);}
body#cart .checkout .btn-primary::after{content:"\2192";font-size:17px;line-height:1;}
body#cart .checkout .btn-primary:hover{background:var(--lime) !important;color:var(--bg) !important;
  transform:translateY(-2px);box-shadow:0 14px 30px rgba(168,240,0,.4) !important;}

/* ligne de réassurance (injectée) */
body#cart .mf-cart-trust{margin-top:14px;text-align:center;font-size:12px;color:var(--on-dark-mut);letter-spacing:.02em;}
body#cart .mf-cart-trust span{margin-right:5px;}

/* table remise volume vide -> pas d'encart fantôme */
body#cart #quantity-discount-table:empty,
body#cart #quantity-discount-table .product-discounts:empty{display:none !important;}

/* ---------- responsive fin ---------- */
@media(max-width:767px){
  body#cart #main{padding:6px 14px 48px;}
  body#cart .card.cart-container{padding:18px 16px 4px !important;}
  body#cart .card.cart-summary{padding:6px 18px 20px !important;}
  body#cart .product-line-grid-right .row > div{margin-top:10px;}
  body#cart .product-image img{max-width:120px;}
}

/* =========================================================================
   v2 — CORRECTIFS (2026-08-28) : stepper dédoublé, promo cadre blanc,
   total qui chevauche, ligne article en flex robuste.
   ========================================================================= */

/* --- 1. STEPPER : masquer le stepper natif touchspin (garde le mien) --- */
body#cart .qty .input-group-btn-vertical,
body#cart .qty .input-group-btn,
body#cart .qty .bootstrap-touchspin-up,
body#cart .qty .bootstrap-touchspin-down,
body#cart .qty .js-increase-product-quantity,
body#cart .qty .js-decrease-product-quantity{display:none !important;}
body#cart .qty .bootstrap-touchspin,
body#cart .qty .input-group{display:contents !important;background:transparent !important;
  border:0 !important;box-shadow:none !important;}
body#cart .qty{display:flex;align-items:center;justify-content:flex-start;}
body#cart .qty .mf-qty{flex:0 0 auto;}
body#cart .mf-qty-btn{width:36px;height:44px;}
body#cart .js-cart-line-product-quantity{width:42px;height:44px;}

/* --- 2. LIGNE ARTICLE : flex robuste (image fixe + corps) --- */
body#cart .product-line-grid-left > .row{display:flex !important;align-items:center;
  flex-wrap:nowrap;margin:0 !important;}
body#cart .product-image{flex:0 0 auto !important;width:96px !important;max-width:96px !important;
  padding:0 !important;margin-right:16px;}
body#cart .product-image img{width:96px;height:96px;max-width:96px;object-fit:cover;}
body#cart .product-line-grid-body{flex:1 1 auto !important;min-width:0;width:auto !important;padding:0 !important;}
body#cart .product-line-grid-right .row{align-items:center;}

/* --- 3. CODE PROMO : gommer le cadre blanc du thème (fondu charcoal) --- */
body#cart .cart-summary .block-promo,
body#cart .cart-summary .cart-voucher,
body#cart .cart-summary .promo-code,
body#cart .cart-summary #promo-code{background:transparent !important;border:0 !important;
  box-shadow:none !important;padding:0 !important;margin:0 !important;}
body#cart .cart-summary .cart-voucher h5{background:transparent !important;border:0 !important;padding:0 !important;}

/* --- 4. TOTAL : label à gauche, valeur à droite, zéro chevauchement --- */
body#cart .cart-total{gap:14px;flex-wrap:nowrap;}
body#cart .cart-total .label{flex:1 1 auto;line-height:1.2;}
body#cart .cart-total .value{flex:0 0 auto;font-size:26px;white-space:nowrap;}

/* --- 5. mobile : croix de suppression alignée, actions aérées --- */
@media(max-width:767px){
  body#cart .product-image,body#cart .product-image img{width:84px !important;max-width:84px !important;height:84px;}
  body#cart .product-line-grid-right{margin-top:14px;}
  body#cart .cart-line-product-actions{text-align:right;}
}

/* =========================================================================
   v3 — (2026-08-28) : masquer l'en-tête colonnes, fondre le bloc promo
   dans le panneau sombre (fini le cadre blanc / texte noir).
   ========================================================================= */

/* 1. masquer l'en-tête Item / Price / Qty / Total price (desktop + mobile) */
body#cart .cart-items-title{display:none !important;}

/* 2. PROMOTION CODE : plus AUCUN fond blanc, tout fond dans le charcoal */
body#cart .cart-summary .cart-detailed-totals,
body#cart .cart-summary .block-promo,
body#cart .cart-summary .cart-voucher,
body#cart .cart-summary .promo-code,
body#cart .cart-summary #promo-code,
body#cart .cart-summary .card-block{
  background:transparent !important;background-color:transparent !important;
  border:0 !important;box-shadow:none !important;}
body#cart .cart-summary .cart-voucher h5{background:transparent !important;
  color:var(--on-dark-mut) !important;border:0 !important;padding:0 !important;
  font-family:var(--disp);text-transform:uppercase;letter-spacing:.08em;font-size:12px;margin:22px 0 12px;}

/* 3. stepper un peu plus affirmé + couleurs au survol (− rose / + vert) */
body#cart .mf-qty{border-radius:14px;}
body#cart .mf-qty-btn{width:38px;height:46px;font-size:22px;}
body#cart .mf-qty-dec:hover{background:rgba(242,56,122,.14);color:var(--pink);}
body#cart .mf-qty-inc:hover{background:rgba(101,201,0,.18);color:#3a8a00;}

/* =========================================================================
   v4 — (2026-08-28) : chevauchement image/nom (mobile), stepper<->total,
   total (tax incl.) non chevauché, input promo translucide.
   ========================================================================= */

/* 1. LIGNE ARTICLE : flex forcé, float/position neutralisés (mobile + desktop) */
body#cart .cart-item .product-line-grid-left{padding:0 !important;}
body#cart .cart-item .product-line-grid-left > .row{display:flex !important;flex-wrap:nowrap !important;
  align-items:center !important;margin:0 !important;width:100% !important;}
body#cart .cart-item .product-image{position:static !important;float:none !important;display:block !important;
  flex:0 0 92px !important;width:92px !important;max-width:92px !important;padding:0 !important;margin:0 16px 0 0 !important;}
body#cart .cart-item .product-image img{width:92px !important;height:92px !important;max-width:92px !important;
  object-fit:cover !important;margin:0 !important;display:block !important;}
body#cart .cart-item .product-line-grid-body{position:static !important;float:none !important;overflow:visible !important;
  flex:1 1 auto !important;width:auto !important;min-width:0 !important;padding:0 !important;margin:0 !important;}
@media(max-width:767px){
  body#cart .cart-item .product-image{flex-basis:78px !important;width:78px !important;max-width:78px !important;margin-right:14px !important;}
  body#cart .cart-item .product-image img{width:78px !important;height:78px !important;max-width:78px !important;}
}

/* 2. STEPPER <-> TOTAL LIGNE : séparer, total aligné à droite */
body#cart .product-line-grid-right > .row{align-items:center !important;}
body#cart .qty .mf-qty{width:132px;max-width:132px;}
body#cart .mf-qty-btn{width:36px;height:44px;}
body#cart .js-cart-line-product-quantity{width:44px;height:44px;}
body#cart .product-line-grid-right .price{text-align:right;padding-left:10px;}

/* 3. TOTAL (TAX INCL.) : flex forcé, valeur non wrap */
body#cart .cart-summary-line.cart-total{display:flex !important;justify-content:space-between !important;
  align-items:center !important;gap:14px !important;flex-wrap:nowrap !important;}
body#cart .cart-total .label{flex:1 1 auto;font-size:13px;line-height:1.2;}
body#cart .cart-total .value{flex:0 0 auto;font-size:25px;white-space:nowrap;text-align:right;}

/* 4. INPUT PROMO : translucide (fondu charcoal, fini le blanc plein) */
body#cart .promo-input{background:rgba(247,247,242,.06) !important;color:var(--on-dark) !important;
  border:2px solid rgba(247,247,242,.22) !important;}
body#cart .promo-input::placeholder{color:var(--on-dark-dim) !important;}

/* 5. resserrer l'espace titre -> carte (mobile) */
body#cart .page-header{margin-bottom:0 !important;}
body#cart .breadcrumb{margin:10px auto 0 !important;}
body#cart .cart-grid{margin-top:12px !important;}

/* =========================================================================
   v5 — (2026-08-28) : MOBILE, bouton "Continue shopping" cloné sous le titre.
   Le clone (.mf-cont-top) vit dans .page-header ; l'original reste en bas
   (visible desktop). En mobile : clone visible en haut, original masqué.
   ========================================================================= */
body#cart .mf-cont-top{display:none;}
@media(max-width:767px){
  body#cart .mf-cont-top{display:inline-flex !important;align-items:center;gap:8px;margin:16px 0 2px;
    background:transparent !important;border:2px solid var(--line-l) !important;color:#0d140b !important;
    font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:13px;
    padding:12px 22px !important;border-radius:50px !important;box-shadow:none !important;text-decoration:none;
    transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);}
  body#cart .mf-cont-top::before{content:"\2190";font-size:15px;line-height:1;}
  body#cart .mf-cont-top:hover{border-color:var(--green-deep) !important;color:var(--green-deep) !important;
    background:rgba(47,107,18,.06) !important;}
  /* masquer l'original en bas en mobile */
  body#cart .cart-grid-body > a.btn-primary:not(.mf-cont-top){display:none !important;}
}

/* =========================================================================
   v6 — (2026-08-28) : MOBILE, réduire l'espace vertical titre/bouton -> carte.
   ========================================================================= */
@media(max-width:767px){
  body#cart .page-header{padding-top:4px !important;padding-bottom:0 !important;margin:0 !important;}
  body#cart .breadcrumb{margin:6px auto 0 !important;padding-bottom:0 !important;}
  body#cart .row-wrapper{margin-top:0 !important;}
  body#cart #content-wrapper{padding-top:0 !important;margin-top:0 !important;}
  body#cart #wrapper,body#cart .page-content{padding-top:0 !important;margin-top:0 !important;}
  body#cart #main{padding-top:0 !important;}
  body#cart .cart-grid{margin-top:8px !important;}
  body#cart .card.cart-container{margin-top:0 !important;}
  body#cart .mf-cont-top{margin:10px 0 0 !important;}
}

/* =========================================================================
   v7 — (2026-08-28) : retirer le trait lime sous le titre + compresser
   davantage l'espace au-dessus de la carte en MOBILE (breadcrumb masqué).
   ========================================================================= */
/* trait vert sous "Shopping cart" : supprimé (desktop + mobile) */
body#cart .page-header h1::after{display:none !important;}

@media(max-width:767px){
  body#cart .breadcrumb{display:none !important;}
  body#cart .container,body#cart .row-wrapper,body#cart #content-wrapper,
  body#cart #main,body#cart #wrapper,body#cart .page-content{
    padding-top:0 !important;margin-top:0 !important;}
  body#cart .page-header{padding:2px 20px 0 !important;}
  body#cart .mf-cont-top{margin:8px 0 0 !important;}
  body#cart .cart-grid{margin-top:6px !important;}
  body#cart .cart-grid-body{margin-top:0 !important;}
}

/* =========================================================================
   v8 — (2026-08-28) : LA cause du gros vide = .page-title-wrapper
   (theme.css : padding 30px 0 + margin-bottom 60px). On le resserre.
   ========================================================================= */
body#cart .page-title-wrapper{padding-top:16px !important;padding-bottom:0 !important;margin-bottom:12px !important;}
@media(max-width:767px){
  body#cart .page-title-wrapper{padding-top:10px !important;padding-bottom:0 !important;margin-bottom:22px !important;}
}

/* =========================================================================
   v10 — (2026-08-28) : aérer titre->bouton (mobile), doublon prix (garder le
   noir + prix barré ajouté, masquer le bloc vert du haut), remonter la carte
   Promotion Code en mobile.
   ========================================================================= */

/* 1. aérer titre -> Continue shopping (mobile) */
@media(max-width:767px){
  body#cart .mf-cont-top{margin:18px 0 0 !important;}
}

/* 2. doublon prix : masquer le bloc unitaire vert (prix+barré+-5%) du haut */
body#cart .cart-item .product-price-and-shipping{display:none !important;}

/* 3. total noir + prix barré ajouté à côté (injecté par le JS) */
body#cart .product-line-grid-right .price .product-price{display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
body#cart .mf-old-price{color:var(--on-light-dim);text-decoration:line-through;
  font-family:Arial,sans-serif;font-weight:700;font-size:14px;}

/* 4. MOBILE : remonter la carte Promotion Code (réduire l'écart entre cartes) */
@media(max-width:767px){
  body#cart .cart-grid{gap:14px !important;}
  body#cart .cart-grid-body{margin-bottom:0 !important;}
  body#cart .cart-grid-right{margin-top:0 !important;}
  body#cart .card.cart-container{margin-bottom:0 !important;}
  body#cart .card.cart-summary{margin-top:0 !important;}
}

/* =========================================================================
   v12 — (2026-08-28) : total (tax incl.) centré verticalement entre la ligne
   blanche (border-top) et le CTA rose (padding haut=bas, marge CTA à 0).
   ========================================================================= */
body#cart .cart-summary-totals{padding-top:20px !important;padding-bottom:20px !important;margin-top:8px !important;}
body#cart .checkout .btn-primary{margin-top:0 !important;}

/* =========================================================================
   v13 — (2026-08-28) : total = EXACTEMENT 20px au-dessus/en-dessous. On neutralise
   la hauteur de ligne de la valeur + tout padding/marge du bloc CTA (card-block).
   ========================================================================= */
body#cart .cart-summary-totals{padding:20px 0 !important;margin-top:8px !important;}
body#cart .cart-summary-line.cart-total{line-height:1 !important;padding:0 !important;margin:0 !important;}
body#cart .cart-total .value{line-height:1 !important;}
body#cart .checkout,
body#cart .checkout.cart-detailed-actions,
body#cart .checkout.card-block,
body#cart .checkout .text-sm-center{padding:0 !important;margin:0 !important;}
body#cart .checkout .btn-primary{margin-top:0 !important;}

/* =========================================================================
   v14 — (2026-08-28) : total groupé avec le CTA -> plus d'air AU-DESSUS
   (séparation d'avec la ligne blanche), petit espace en dessous (près du CTA).
   ========================================================================= */
body#cart .cart-summary-totals{padding-top:32px !important;padding-bottom:14px !important;margin-top:8px !important;}
body#cart .checkout .btn-primary{margin-top:0 !important;}

/* =========================================================================
   v15 — (2026-08-28) : espaces ÉGAUX trait blanc <-> total <-> CTA (22px/22px).
   ========================================================================= */
body#cart .cart-summary-totals{padding-top:22px !important;padding-bottom:22px !important;margin-top:8px !important;}
body#cart .cart-summary-line.cart-total{align-items:center !important;}
body#cart .checkout .btn-primary{margin-top:0 !important;}

/* =========================================================================
   v16 — (2026-08-28) : le TRAIT blanc = border-top de .cart-total. On met
   l'espace SOUS le trait (padding-top) = espace au-dessus du CTA. Égal des 2 côtés.
   ========================================================================= */
body#cart .cart-summary-totals{padding:0 !important;margin-top:0 !important;border-top:0 !important;}
body#cart .cart-summary-line.cart-total{
  border-top:1px solid rgba(247,247,242,.85) !important;
  margin-top:24px !important;      /* séparation d'avec "Shipping" (au-dessus du trait) */
  padding-top:24px !important;      /* espace trait -> total */
  padding-bottom:0 !important;
  margin-bottom:0 !important;}
body#cart .checkout .btn-primary{margin-top:24px !important;}   /* espace total -> CTA (égal) */

/* =========================================================================
   v17 — (2026-08-28) : PARITÉ DESKTOP.
   (a) Continue shopping sur la même ligne que le titre (header en flex).
   (b) disposition du tarif : actions alignées à droite, total + barré côte à côte.
   ========================================================================= */
@media(min-width:992px){
  /* (a) titre + bouton sur une ligne */
  body#cart .page-header{display:flex !important;align-items:center;justify-content:space-between;
    gap:20px;flex-wrap:wrap;}
  body#cart .page-header h1{text-align:left !important;flex:0 1 auto;}
  body#cart .mf-cont-top{display:inline-flex !important;align-items:center;gap:8px;margin:0 !important;
    background:transparent !important;border:2px solid var(--line-l) !important;color:#0d140b !important;
    font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:13px;
    padding:12px 22px !important;border-radius:50px !important;box-shadow:none !important;text-decoration:none;
    transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);}
  body#cart .mf-cont-top::before{content:"\2190";font-size:15px;line-height:1;}
  body#cart .mf-cont-top:hover{border-color:var(--green-deep) !important;color:var(--green-deep) !important;
    background:rgba(47,107,18,.06) !important;}
  /* masquer le bouton du bas en desktop */
  body#cart .cart-grid-body > a.btn-primary:not(.mf-cont-top){display:none !important;}

  /* (b) ligne article : actions alignées à droite, colonne prix unitaire masquée retirée du flux */
  body#cart .product-line-grid-right > .row{display:flex !important;align-items:center;
    justify-content:flex-end;gap:26px;flex-wrap:nowrap;margin:0 !important;}
  body#cart .product-line-grid-right > .row > div{width:auto !important;flex:0 0 auto !important;
    max-width:none !important;padding:0 !important;}
  body#cart .product-line-grid-right .qty{order:1;}
  body#cart .product-line-grid-right .price{order:2;text-align:right;}
  body#cart .product-line-grid-right .text-xs-right{order:3;}
}

/* total noir + prix barré CÔTE À CÔTE (baseline) */
body#cart .product-line-grid-right .price .product-price{display:inline-flex;align-items:baseline;
  gap:10px;flex-wrap:nowrap;}
body#cart .mf-old-price{color:var(--on-light-dim);text-decoration:line-through;
  font-family:Arial,sans-serif;font-weight:700;font-size:14px;white-space:nowrap;}

/* =========================================================================
   v18 — (2026-08-28) : MOBILE, masquer le titre "Shopping Cart"
   (on garde le bouton Continue shopping cloné dans le header).
   ========================================================================= */
@media(max-width:767px){
  body#cart .page-header h1{display:none !important;}
}

/* =========================================================================
   v19 — (2026-08-28) : desktop masquer titre + bouton à gauche ; hover bouton
   au bon vert (#59ab6e) ; badge panier au bon rose (mobile).
   ========================================================================= */
/* 1. titre masqué desktop + mobile ; bouton Continue shopping à GAUCHE */
body#cart .page-header h1{display:none !important;}
@media(min-width:992px){
  body#cart .page-header{justify-content:flex-start !important;}
}

/* 2. hover bouton Continue shopping : vert de marque #59ab6e (au lieu de green-deep) */
body#cart .cart-grid-body > a.btn-primary:hover,
body#cart .mf-cont-top:hover{border-color:#59ab6e !important;color:#59ab6e !important;
  background:rgba(89,171,110,.08) !important;}

/* 3. badge panier (compteur) : rose charte street partout (fix lime en mobile) */
body#cart .cart-products-count,
body#cart .blockcart .cart-products-count,
body#cart .header-cart .cart-products-count,
body#cart .pos-header-element .cart-products-count{background:var(--pink) !important;color:#fff !important;}

/* =========================================================================
   v20 — (2026-08-28) : "le bon vert" = lime de FREE/progress (#a8f000).
   Pastille GRAM refaite façon FREE (puce charcoal + valeur lime). Badge panier
   laissé sur ce vert (on annule la tentative rose).
   ========================================================================= */
/* pastille GRAM : puce sombre + "100g" en lime (comme FREE) */
body#cart .product-line-grid-body .product-line-info:nth-child(2){
  background:var(--charcoal) !important;border-color:var(--charcoal) !important;}
body#cart .product-line-grid-body .product-line-info:nth-child(2) .label{color:rgba(247,247,242,.65) !important;}
body#cart .product-line-grid-body .product-line-info:nth-child(2) .value{color:var(--lime) !important;}

/* badge panier : ROSE (charte street) — desktop ET mobile.
   Le header MOBILE est le widget elementor #7398f63 dont le ce/*.css met le
   badge en olive #7d9d2b (background-color, pas shorthand) -> on le bat en ciblant
   l'id exact + la même propriété background-color !important. */
body#cart .cart-products-count,
body#cart .blockcart .cart-products-count,
body#cart .elementor-widget-posCart .blockcart .cart-products-count,
body#cart .elementor-element-7398f63 .blockcart .cart-products-count,
body#cart .header-cart .cart-products-count,
body#cart .pos-header-element .cart-products-count,
body#cart .header-nav .cart-products-count,
body#cart #mfs-cart-badge,
#mfs-cart-badge{
  background:var(--pink) !important;background-color:var(--pink) !important;
  background-image:none !important;color:#fff !important;}

/* =========================================================================
   v24 — (2026-08-28) : (a) DESKTOP steppers alignés (qty à gauche fixe, total
   flex à droite) ; (b) MOBILE nom produit avec marge droite (ne touche plus la
   croix) ; (c) pas de hover "collant" du stepper sur écran tactile.
   ========================================================================= */
/* (a) desktop : stepper aligné à gauche de la zone actions, total à droite */
@media(min-width:992px){
  body#cart .product-line-grid-right > .row{justify-content:flex-start !important;gap:0 !important;}
  body#cart .product-line-grid-right .qty{flex:0 0 auto !important;margin:0 !important;order:1;}
  body#cart .product-line-grid-right .price{flex:1 1 auto !important;order:2;text-align:right !important;
    padding-right:20px !important;}
  body#cart .product-line-grid-right .text-xs-right{flex:0 0 28px !important;order:3;text-align:right;}
}

/* (b) mobile : le nom + pastille laissent la place à la croix (top-right) */
@media(max-width:767px){
  body#cart .product-line-grid-body{padding-right:38px !important;}
}

/* (c) écrans tactiles : pas de fond de survol figé sur -/+ */
@media(hover:none){
  body#cart .mf-qty-dec:hover,body#cart .mf-qty-inc:hover{background:transparent !important;color:#0d140b !important;}
}

/* v24b — l'input du stepper est reciblé par parent (sa classe js- a été retirée
   pour bloquer touchspin) : on garde son style via .mf-qty > input */
body#cart .mf-qty > input,body#cart .mf-qty-input{width:44px !important;height:46px !important;padding:0 !important;
  border:0 !important;border-left:1px solid var(--line-l) !important;border-right:1px solid var(--line-l) !important;
  text-align:center !important;font-family:var(--disp) !important;font-weight:900 !important;font-size:15px !important;
  color:#0d140b !important;background:transparent !important;-moz-appearance:textfield;box-shadow:none !important;}
body#cart .mf-qty > input::-webkit-outer-spin-button,
body#cart .mf-qty > input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* =========================================================================
   v25 — (2026-08-28) : prix des articles poussé à DROITE (desktop + mobile).
   Sélecteurs "> .row > .price" (même spécificité que la règle v17 mais plus
   tard dans le fichier) pour que flex:1 l'emporte enfin.
   ========================================================================= */
@media(min-width:992px){
  body#cart .product-line-grid-right > .row{justify-content:flex-start !important;}
  body#cart .product-line-grid-right > .row > .qty{flex:0 0 auto !important;order:1;}
  body#cart .product-line-grid-right > .row > .price{flex:1 1 auto !important;order:2;
    text-align:right !important;padding-right:14px !important;}
  body#cart .product-line-grid-right > .row > .text-xs-right{flex:0 0 26px !important;order:3;text-align:right;}
  body#cart .product-line-grid-right > .row > .product-price-and-shipping{display:none !important;}
}
@media(max-width:767px){
  body#cart .product-line-grid-right > .row{display:flex !important;align-items:center !important;
    justify-content:space-between !important;flex-wrap:nowrap !important;margin:0 !important;gap:10px;}
  body#cart .product-line-grid-right > .row > .qty{order:1;flex:0 0 auto !important;width:auto !important;margin:0 !important;}
  body#cart .product-line-grid-right > .row > .price{order:2;flex:1 1 auto !important;width:auto !important;
    text-align:right !important;margin:0 !important;}
  body#cart .product-line-grid-right > .row > .product-price-and-shipping{display:none !important;}
}

/* =========================================================================
   v26 — (2026-08-28) : stepper SYMÉTRIQUE. Le thème (.btn) posait padding:1px 6px
   sur les boutons -> + décentré / cellule asymétrique. On force des cellules
   égales, padding 0, centrage flex.
   ========================================================================= */
body#cart .qty{padding:0 !important;}
body#cart .mf-qty{box-sizing:border-box;}
body#cart .mf-qty-btn{flex:0 0 44px !important;width:44px !important;min-width:44px !important;max-width:44px !important;
  height:46px !important;padding:0 !important;margin:0 !important;box-sizing:border-box !important;border-radius:0 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;}
body#cart .mf-qty > input,body#cart .mf-qty-input{flex:0 0 46px !important;width:46px !important;
  box-sizing:border-box !important;padding:0 !important;}

/* =========================================================================
   v27 — (2026-08-28) : MOBILE, steppers alignés. Règle décisive (spécificité
   .cart-item...) : prix flex:1 à gauche, STEPPER fixe à droite -> alignés entre
   les lignes quel que soit le prix. La croix reste en absolute (thème).
   ========================================================================= */
@media(max-width:767px){
  body#cart .cart-item .product-line-grid-right > .row{display:flex !important;flex-wrap:nowrap !important;
    align-items:center !important;margin:0 !important;gap:12px !important;justify-content:flex-start !important;}
  body#cart .cart-item .product-line-grid-right > .row > .product-price-and-shipping{display:none !important;}
  body#cart .cart-item .product-line-grid-right > .row > .price{order:1 !important;flex:1 1 auto !important;
    width:auto !important;min-width:0 !important;text-align:left !important;margin:0 !important;padding:0 !important;}
  body#cart .cart-item .product-line-grid-right > .row > .qty{order:2 !important;flex:0 0 auto !important;
    width:auto !important;margin:0 !important;padding:0 !important;}
  body#cart .cart-item .product-line-grid-right > .row > .text-xs-right{order:3 !important;flex:0 0 auto !important;}
}

/* =========================================================================
   v28 — (2026-08-28) : MOBILE, pousser le stepper à DROITE. La colonne croix
   (col-xs-2) occupait l'espace à droite -> réduite à 0 (la ✕ est en absolute,
   elle reste). space-between : prix à gauche, stepper collé à droite.
   ========================================================================= */
@media(max-width:767px){
  body#cart .cart-item .product-line-grid-right > .row{justify-content:space-between !important;gap:12px !important;}
  body#cart .cart-item .product-line-grid-right > .row > .price{order:1 !important;flex:1 1 auto !important;
    min-width:0 !important;text-align:left !important;}
  body#cart .cart-item .product-line-grid-right > .row > .qty{order:2 !important;flex:0 0 auto !important;margin:0 !important;}
  body#cart .cart-item .product-line-grid-right > .row > .text-xs-right{order:3 !important;flex:0 0 0 !important;
    width:0 !important;min-width:0 !important;padding:0 !important;margin:0 !important;overflow:visible !important;}
}

/* =========================================================================
   v29 — (2026-08-28) : BONS D'ACHAT (démo preview). Message d'erreur DA rose +
   chip "voucher appliqué" (succès lime) + ligne Discount dans le récap.
   ========================================================================= */
/* message d'erreur : caché par défaut, apparition animée en rose */
body#cart .cart-voucher .js-error{display:none !important;}
body#cart .cart-voucher .js-error.mf-show{display:flex !important;align-items:center;gap:10px;margin-top:12px;
  background:rgba(242,56,122,.14) !important;border:1px solid rgba(242,56,122,.5) !important;color:#ffd7e4 !important;
  border-radius:12px !important;padding:11px 14px !important;font-size:13.5px;line-height:1.35;
  animation:mfVfade .25s var(--ease);}
body#cart .cart-voucher .js-error.mf-show::before{content:"!";flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;width:20px;height:20px;border-radius:50%;border:2px solid #ff9dbf;color:#ff9dbf;
  font-family:var(--disp);font-weight:900;font-size:12px;}
body#cart .cart-voucher .js-error .material-icons{display:none !important;}
@keyframes mfVfade{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:none;}}

/* chip bon d'achat appliqué (succès) */
body#cart #mf-vouchers{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
body#cart .mf-voucher-chip{display:flex;align-items:center;gap:10px;background:rgba(168,240,0,.12);
  border:1px solid rgba(168,240,0,.5);border-radius:12px;padding:10px 12px;animation:mfVfade .25s var(--ease);}
body#cart .mf-vc-ico{font-size:15px;line-height:1;}
body#cart .mf-vc-code{font-family:var(--disp);text-transform:uppercase;letter-spacing:.03em;font-size:13px;
  color:var(--lime);font-weight:900;}
body#cart .mf-vc-amt{margin-left:auto;font-family:var(--disp);font-weight:900;font-size:13px;color:var(--off);}
body#cart .mf-vc-x{border:0;background:transparent;color:var(--on-dark-mut);font-size:19px;line-height:1;
  cursor:pointer;padding:0 2px;transition:color .15s var(--ease);}
body#cart .mf-vc-x:hover{color:var(--pink);}

/* ligne Discount dans le récap sombre */
body#cart #mf-discount-line .label{color:var(--on-dark-mut);}
body#cart #mf-discount-line .value{color:var(--lime) !important;font-family:var(--disp);font-weight:900;}

/* =========================================================================
   v30 — (2026-08-28) : CTA "Proceed to checkout" sur TACTILE. Le hover
   rose->lime restait figé au tap (flash couleur + texte sombre bizarre).
   On neutralise le hover sur écran tactile + feedback d'appui propre.
   ========================================================================= */
@media(hover:none){
  body#cart .checkout .btn-primary:hover{background:var(--pink) !important;color:#fff !important;
    transform:none !important;box-shadow:0 10px 26px rgba(242,56,122,.4) !important;}
}
body#cart .checkout .btn-primary:active{transform:translateY(0) scale(.985) !important;
  box-shadow:0 6px 16px rgba(242,56,122,.35) !important;}

/* v31 — (2026-08-28) : masquer le widget chatbot (bulle + teaser + panneau) */
body#cart .mf-sb-launcher,body#cart .mf-sb-teaser,body#cart .mf-sb-panel,
body#cart .mf-sb-bot,body#cart [class^="mf-sb-launcher"]{display:none !important;}

/* ===== v32 : règle panier appliquée (FREE KOWABUNGA) en chip vert comme FREEGAUCHO ===== */
body#cart .cart-voucher .promo-name{list-style:none;padding:0;margin:12px 0 0;}
body#cart .cart-voucher .promo-name li.cart-summary-line{
  display:flex;align-items:center;gap:10px;flex-wrap:nowrap;
  background:rgba(168,240,0,.12);border:1px solid rgba(168,240,0,.38);
  border-radius:40px;padding:9px 16px;margin:0;font-size:13px;}
body#cart .cart-voucher .promo-name li.cart-summary-line .label{
  order:1;color:var(--lime);font-family:var(--disp);font-weight:900;letter-spacing:.02em;}
body#cart .cart-voucher .promo-name li.cart-summary-line .float-xs-right{
  order:2;margin-left:auto;color:var(--off);font-family:var(--disp);font-weight:900;white-space:nowrap;}
body#cart .cart-voucher .promo-name li.cart-summary-line a[data-link-action="remove-voucher"]{
  order:3;color:rgba(247,247,242,.5);text-decoration:none;display:flex;align-items:center;}
body#cart .cart-voucher .promo-name li.cart-summary-line a[data-link-action="remove-voucher"]:hover{color:var(--pink);}
body#cart .cart-voucher .promo-name li.cart-summary-line a[data-link-action="remove-voucher"] i{font-size:17px;}
/* v32 : espacer le Total du bouton Checkout (desktop) */
body#cart .cart-total{margin-bottom:20px !important;}

/* ===== Stepper quantité : boîte SEGMENTÉE (iso preview) au lieu de la pilule prod =====
   Le prod stylise le touchspin natif en pilule (radius 26px, sans séparateurs).
   On garde le markup natif mais on repasse en boîte + traits verticaux entre −/valeur/+. */
html.mf-da body#cart .product-line-grid .qty .bootstrap-touchspin{
  border:2px solid #e2e4dd !important;border-radius:12px !important;}
html.mf-da body#cart .product-line-grid .qty .bootstrap-touchspin .btn-touchspin.bootstrap-touchspin-down{
  border-right:2px solid #e2e4dd !important;}
html.mf-da body#cart .product-line-grid .qty .bootstrap-touchspin .btn-touchspin.bootstrap-touchspin-up{
  border-left:2px solid #e2e4dd !important;}
html.mf-da body#cart .product-line-grid .qty .bootstrap-touchspin .btn-touchspin.bootstrap-touchspin-down:hover{
  background:rgba(242,56,122,.12) !important;color:#F2387A !important;}
html.mf-da body#cart .product-line-grid .qty .bootstrap-touchspin .btn-touchspin.bootstrap-touchspin-up:hover{
  background:rgba(101,201,0,.16) !important;color:#3a8a00 !important;}

/* espace entre les pilules de codes promo appliqués + sous la liste avant l'input */
body#cart .cart-voucher .promo-name{display:flex;flex-direction:column;gap:10px;margin:0 0 14px;}
body#cart .cart-voucher .promo-name li{margin:0 !important;}

/* iOS : éviter le zoom auto au focus des inputs (font-size < 16px). Quantité + promo à 16px en mobile. */
@media (max-width:767px){
  body#cart .js-cart-line-product-quantity,
  body#cart input.js-cart-line-product-quantity,
  body#cart .promo-input{font-size:16px !important;}
}