/* ============================================================
   SITE V2 — étape 8 : page panier et mini-panier
   Chargée par _partials/site-v2.tpl (jamais sur le tunnel de commande).

   Deux composants :
   1. le mini-panier déroulant du header et le panier volant (leofeature,
      drop_down.tpl), injectés en JS dans #_desktop_cart et dans
      .leo-fly-cart-slidebar ;
   2. la page panier (body#cart, /panier?action=show).

   Spécificité :
   - header-v2.css colore tous les liens et icônes de la zone d'icônes
     (« body:not(#checkout) #header .col-info :is(a, i)… », (2,3,3), et au survol
     du panier « … #_desktop_cart:hover :is(a, i) », (3,2,2)). Le déroulant étant
     dans #_desktop_cart, ses règles reprennent le préfixe du header (3 identifiants)
     pour passer devant, sans toucher au header lui-même ;
   - page panier : sélecteurs du thème (theme.css), à spécificité égale ou un cran
     au-dessus.
   Couleurs (contrastes WCAG calculés) : encre #332720 14,5:1 sur blanc, 13,6:1 sur
   crème ; texte #6B5B4E 6,5:1 / 6,1:1 ; terracotta texte #A1480F 6,1:1 / 5,7:1 ;
   terracotta #B05315 5,1:1 (icônes et contours ≥ 3:1).
   ============================================================ */


/* ============================================================
   1. MINI-PANIER DÉROULANT ET PANIER VOLANT
   Préfixe commun, (3,0,1) : déroulant du header ou panneau du panier volant.
   ============================================================ */

/* ---------- Panneau ----------
   Thème : fond blanc, filet gris, bordure noire de 3 px en haut. */

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-cart-content {
  background: #FBF7EF;
  color: #6B5B4E;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
}

/* Déroulant du header : filet sable et même ombre douce que le menu du compte
   (header-v2.css). Le panneau du panier volant reste sans cadre (leofeature). */
body:not(#checkout) #header #_desktop_cart .leo-dropdown-cart-content {
  border: 1px solid #E2D6C2;
  border-radius: 2px;
  box-shadow: 0 12px 28px rgba(51, 39, 32, 0.12);
}

/* ---------- Lignes produit ---------- */

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-cart-item {
  border-color: #E2D6C2;
}

/* Ligne en cours de modification ou détail ouvert (thème : bleu #c9def3) */
:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-cart-item:is(.high-light, .show-combination, .show-customization, .show-additional),
:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-cart-item .leo-dropdown-additional {
  background-color: #F3EADA;
  color: #6B5B4E;
}

/* Photo : cadre blanc (les photos sont sur fond blanc) */
:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-cart-item-img img {
  background: #FFFFFF;
  border: 1px solid #E2D6C2;
  border-radius: 2px;
}

/* Nom du produit : Fraunces encre, comme les cartes produits (listes.css).
   Marge à droite : place de la corbeille (cible de 44 px en haut à droite). */
:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-cart-item-info .product-name {
  padding-right: 1.25rem;
  line-height: 1.3;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-cart-item-info .product-name a {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #332720;
  text-decoration: none;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-cart-item-info .product-name a:is(:hover, :focus) {
  color: #A1480F;
}

/* Prix : Karla grasse encre (thème : noir 13 px) */
:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-cart-item-info .current-price .price {
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: #332720;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-cart-item-info .product-discount .regular-price {
  color: #6B5B4E;
}

/* Remise (thème : rouge pur, pastille saumon à texte blanc) */
:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-cart-item-info .product-discount :is(.discount-amount, .discount-percentage) {
  padding: 1px 4px;
  border-radius: 2px;
  background: #F3EADA;
  color: #A1480F;
  font-weight: 700;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-cart-item-info .unit-price-cart {
  color: #6B5B4E;
  font-size: 0.8125rem;
}

/* ---------- Quantité [ − ] [ 1 ] [ + ] ----------
   Thème : boutons de 20 × 27 px. Cibles de 44 px, un seul cadre comme sur la fiche
   produit (fiche.css). Les trois éléments flottent dans le thème : la ligne devient flex. */

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-cart-item-info .product-quantity {
  display: flex;
  width: max-content;
  align-items: stretch;
  margin-top: 0.5rem;
  border: 1px solid #C0AC92;
  border-radius: 2px;
  background: #FFFFFF;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-cart-item-info .product-quantity:focus-within {
  border-color: #B05315;
  box-shadow: 0 0 0 1px #B05315;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-cart-item-info .product-quantity .leo-bt-product-quantity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: transparent;
  color: #332720;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-cart-item-info .product-quantity .leo-bt-product-quantity:is(:hover, :focus) {
  background: #F3EADA;
  color: #A1480F;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-cart-item-info .product-quantity .leo-bt-product-quantity:focus-visible {
  outline: 2px solid #B05315;
  outline-offset: -2px;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-cart-item-info .product-quantity .leo-bt-product-quantity > i {
  font-size: 1.125rem;
  color: inherit;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-cart-item-info .product-quantity .leo-input-product-quantity {
  float: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #332720;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;                     /* 16 px : pas de zoom automatique sur iOS */
  font-weight: 700;
  text-align: center;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-cart-item-info .product-quantity .leo-input-product-quantity:focus {
  outline: none;                       /* contour porté par le cadre (:focus-within) */
}

/* ---------- Corbeille ----------
   Terracotta, cible de 44 px (thème : icône noire de 20 px, jaune au survol). */

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-cart-item .leo-remove-from-cart {
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: #B05315;
  transition: color 0.15s ease;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-cart-item .leo-remove-from-cart:is(:hover, :focus) {
  color: #8F4210;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-cart-item .leo-remove-from-cart:focus-visible {
  outline: 2px solid #B05315;
  outline-offset: -4px;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-cart-item .leo-remove-from-cart i {
  color: inherit;
}

/* ---------- Détail de la déclinaison (« Format : 2kg ») ----------
   Bouton de dépliage : carré jaune à chevron blanc dans le thème (gris une fois ouvert).
   Sable à chevron terracotta, sable foncé une fois ouvert. */

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .view-leo-dropdown-additional {
  border-radius: 2px;
  background: #F3EADA;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .view-leo-dropdown-additional:hover,
:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .view-leo-dropdown-additional.show {
  background: #EADFCB;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .view-leo-dropdown-additional::before,
:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .view-leo-dropdown-additional::after {
  height: 2px;
  background: #A1480F;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-additional :is(.view-combination, .view-customization) {
  border-top-color: #E2D6C2;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-additional .product-line-info {
  font-size: 0.875rem;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-additional .label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #332720;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-additional .value {
  color: #6B5B4E;
}

/* Chargement d'une ligne (thème : roue bleue #2fb5d2) */
:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-cssload-speeding-wheel {
  border-color: #B05315;
  border-left-color: transparent;
  border-right-color: transparent;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-overlay {
  background: rgba(251, 247, 239, 0.75);
}

/* ---------- Sous-totaux et total ---------- */

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-cart-subtotals {
  padding: 0.75rem 1.25rem;
  border-top-color: #E2D6C2;
  border-bottom-color: #E2D6C2;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-cart-total {
  padding: 0.75rem 1.25rem;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) :is(.leo-dropdown-cart-subtotals, .leo-dropdown-cart-total) .label {
  color: #6B5B4E;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) :is(.leo-dropdown-cart-subtotals, .leo-dropdown-cart-total) .value {
  color: #332720;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
}

/* Total TTC : encre grasse, un cran plus grand */
:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-cart-total .label {
  color: #332720;
  font-size: 0.9375rem;
  font-weight: 700;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-cart-total .value {
  font-size: 1rem;
}

/* « Plus que X € pour la livraison offerte » (theme.css : gris #c9c9c9, texte noir) */
:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo_free_price {
  margin: 0 1.25rem 0.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: 2px;
  background: #F3EADA;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo_free_price p {
  color: #332720;
  font-size: 0.875rem;
}

/* ---------- Boutons « Voir le panier » et « Commander » ----------
   Thème : pilules jaunes (.btn-primary.btn-outline, rayon 50px !important) ; boutons.css
   exclut le header, d'où ces règles. Empilés pleine largeur : côte à côte, les libellés
   espacés ne tiennent pas dans les 265 px du panneau. */

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-cart-content .leo-cart-dropdown-action {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.25rem 1.25rem 1.25rem;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-cart-content .leo-cart-dropdown-action::after {
  content: none;                       /* clearfix inutile en flex */
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-cart-content .leo-cart-dropdown-action a.cart-dropdow-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.625rem 1rem;
  border: 1px solid #B05315;
  border-radius: 2px !important;       /* theme.css : .btn-outline { border-radius: 50px !important } */
  background: #B05315;
  box-shadow: none;
  color: #FFF8F0;                      /* 4,9:1 sur terracotta */
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  white-space: normal;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-cart-content .leo-cart-dropdown-action a.cart-dropdow-button:is(:hover, :focus, :active) {
  border-color: #8F4210;
  background: #8F4210;
  color: #FFF8F0;
}

/* « Voir le panier » : contour sable, comme .home-v2__btn--ghost */
:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-cart-content .leo-cart-dropdown-action a.cart-dropdow-viewcart {
  border-color: #C0AC92;
  background: transparent;
  color: #332720;
}

:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-cart-content .leo-cart-dropdown-action a.cart-dropdow-viewcart:is(:hover, :focus, :active) {
  border-color: #B05315;
  background: transparent;
  color: #A1480F;
}

/* theme.css : .btn:focus { outline: none !important } — seul un !important rend le contour */
:is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) .leo-dropdown-cart-content .leo-cart-dropdown-action a.cart-dropdow-button:focus-visible {
  outline: 2px solid #B05315 !important;
  outline-offset: 3px;
}

/* ---------- Panier volant (bas de page, leofeature) ----------
   Pastille ronde blanche, sac noir, jaune au survol, compteur noir ;
   panneau à bordure noire de 3 px. */

.leo-fly-cart-icon-wrapper a {
  width: 2.75rem;
  height: 2.75rem;
  line-height: 2.625rem;
  border: 1px solid #E2D6C2;
  background-color: #FBF7EF;
  box-shadow: 0 6px 16px rgba(51, 39, 32, 0.14);
}

.leo-fly-cart-icon-wrapper a::after { color: #332720; }

.leo-fly-cart-icon-wrapper a:hover,
.leo-fly-cart-icon-wrapper a:hover::after { color: #B05315; }

.leo-fly-cart-icon-wrapper a:focus-visible {
  outline: 2px solid #B05315;
  outline-offset: 3px;
}

/* Compteur : même pastille que celle du header (header-v2.css) */
.leo-fly-cart .leo-fly-cart-total {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #B05315;
  color: #FFF8F0;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
}

.leo-fly-cart .leo-fly-cart-total:empty { display: none; }

.leo-fly-cart-slidebar { background: #FBF7EF; }

.leo-fly-cart-slidebar:is(.slidebar_left, .slidebar_right, .slidebar_top, .slidebar_bottom),
.leo-fly-cart-slidebar:is(.slidebar_left, .slidebar_right, .slidebar_top, .slidebar_bottom) .leo-fly-cart {
  border-color: #E2D6C2;
  border-width: 1px;
}

.leo-fly-cart-slidebar .leo-fly-cart { background: #FBF7EF; }

.leo-fly-cart-slidebar:is(.slidebar_top, .slidebar_bottom) .leo-dropdown-cart-item { border-right-color: #E2D6C2; }

.leo-fly-cart-slidebar:is(.slidebar_top, .slidebar_bottom) .leo-dropdown-total { border-color: #E2D6C2; }

.leo-fly-cart-slidebar.active-scroll .leo-dropdown-bottom { background: #FBF7EF; }

/* Panneau horizontal : libellés des totaux sur une ligne (« Sous-total » se coupait) */
body .leo-fly-cart-slidebar:is(.slidebar_top, .slidebar_bottom) :is(.leo-dropdown-cart-subtotals, .leo-dropdown-cart-total) .label {
  white-space: nowrap;
}

/* Dans le panneau, les boutons gardent leur disposition (leofeature : blocs empilés à gauche du total) */
body .leo-fly-cart-slidebar .leo-dropdown-cart-content .leo-cart-dropdown-action {
  padding: 0.5rem 1.25rem;
}


/* ============================================================
   2. PAGE PANIER (body#cart)
   ============================================================ */

/* ---------- Cadres ----------
   Thème : carte blanche, bordure grise translucide, ombre portée, rayon 4 px.
   Crème à filet sable, comme les cadres des formulaires (formulaires.css). */

.cart-grid .card {
  background-color: #FBF7EF;
  border: 1px solid #E2D6C2;
  border-radius: 2px;
  box-shadow: none;
}

.cart-grid .separator,
.cart-grid-body hr,
.cart-grid-right hr {
  border-color: #E2D6C2;
}

/* ---------- Titre « Panier d'achat » ----------
   Thème : capitales noires. Fraunces (typo.css), casse normale, encre. */

.cart-grid-body .card-block h1.h1 {
  margin: 0;
  color: #332720;
  font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
}

.cart-grid-body .card-block {
  padding: 1.25rem 1rem;
}

@media (min-width: 768px) {
  .cart-grid-body .card-block { padding: 1.5rem 1.5rem 1.25rem; }
}

/* ---------- Lignes produit ---------- */

.cart-grid-body .cart-items {
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .cart-grid-body .cart-items { padding: 0 1.5rem; }
}

.cart-grid-body .cart-item {
  padding: 1.25rem 0;
  border-bottom-color: #E2D6C2;
}

/* Photo : cadre blanc (photos sur fond blanc) posé sur le crème */
.cart-item .product-line-grid-left .product-image img {
  background: #FFFFFF;
  border: 1px solid #E2D6C2;
  border-radius: 2px;
}

/* Nom : Fraunces encre, comme les cartes produits (listes.css).
   Thème : survol jaune via « .cart-grid-body a.label:hover » */
.product-line-grid-body > .product-line-info > a.label {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  font-weight: 500;
  line-height: 1.3;
  color: #332720;
  text-decoration: none;
}

.product-line-grid-body > .product-line-info > a.label:is(:hover, :focus) {
  color: #A1480F;
}

.product-line-grid-body > .product-line-info > a.label:focus-visible {
  outline: 2px solid #B05315;
  outline-offset: 2px;
}

/* Prix unitaire : jaune #FFC600 dans le thème (.product-price) → Karla grasse encre,
   comme le prix de la fiche (fiche.css) */
.cart-item .product-line-grid-body .product-line-info.product-price {
  margin-bottom: 0.25rem;
  color: #332720;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

.cart-item .product-line-grid-body .product-line-info.product-price .price {
  color: inherit;
}

/* Prix remisé : terracotta texte (thème : orange #DB6C1C) */
.cart-item .product-line-grid-body .has-discount.product-price,
.cart-item .product-line-grid-body .has-discount .price {
  color: #A1480F;
}

.cart-item .product-line-grid-body .product-discount {
  color: #6B5B4E;
}

.cart-item .product-line-grid-body .product-discount .regular-price {
  color: #6B5B4E;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
}

.cart-item .product-line-grid-body .has-discount .discount {
  margin-left: 0.5rem;
  padding: 2px 6px;
  border-radius: 2px;
  background: #F3EADA;
  color: #A1480F;
  font-size: 0.8125rem;
  font-weight: 700;
}

/* Le <br> du gabarit creuse un vide entre prix et déclinaison */
.cart-item .product-line-grid-body > br { display: none; }

/* Déclinaison « Format : 2kg » (thème : libellé 16 px aligné à droite) */
.cart-item .product-line-grid-body > .product-line-info:not(.product-price) {
  margin-bottom: 0.25rem;
  font-size: 0.9375rem;
  color: #6B5B4E;
}

.cart-item .product-line-grid-body > .product-line-info > .label {
  color: #332720;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
}

.cart-item .product-line-grid-body > .product-line-info > .value {
  color: #6B5B4E;
}

.cart-item .product-line-grid-body > .product-line-info > .unit-price-cart {
  color: #6B5B4E;
}

/* ---------- Colonne droite : quantité, total de la ligne, corbeille ----------
   Les colonnes Bootstrap du thème laissent 80 à 110 px à la quantité, trop peu pour
   [ − ] [ 1 ] [ + ] de 44 px : la ligne passe en flex (quantité à sa taille, prix
   dans le reste, corbeille à sa taille). Sur mobile, la colonne vide qui décalait
   la ligne sous le texte est retirée : quantité, prix et corbeille sous la photo. */

.cart-item .product-line-grid-right > .row,
.cart-item .product-line-grid-right > .row > .col-md-10 > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.cart-item .product-line-grid-right > .row > .hidden-md-up { display: none; }

.cart-item .product-line-grid-right > .row > .col-md-10 {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.cart-item .product-line-grid-right > .row > .text-xs-right {
  flex: 0 0 auto;
  width: auto;
  padding-left: 0;
}

.cart-item .product-line-grid-right .qty {
  flex: 0 0 auto;
  width: auto;
  padding-right: 0.5rem;
}

.cart-item .product-line-grid-right .price {
  flex: 1 1 auto;
  width: auto;
  padding-left: 0.9375rem;             /* même retrait que la quantité quand le prix passe dessous */
}

/* Dès 768 px, photo un peu moins large (thème : 25 %, photo de 180 px) au profit de la
   colonne des actions : quantité et prix tiennent sur une ligne dès 1200 px
   (entre 768 et 1199 px, le prix passe sous la quantité si la place manque). */
@media (min-width: 768px) {
  .cart-item .product-line-grid > .product-line-grid-left  { width: 20%; }
  .cart-item .product-line-grid > .product-line-grid-body  { width: 33%; }
  .cart-item .product-line-grid > .product-line-grid-right { width: 47%; }
}

/* Total de la ligne (thème : #414141, interligne de 36 px) */
.cart-item .product-line-grid-right .product-price {
  color: #332720;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 2.75rem;
  white-space: nowrap;
}

.cart-item .product-line-grid-right .product-price strong { font-weight: 700; }

/* Quantité : même widget que la fiche produit (fiche.css), cadre unique, 44 px.
   formulaires.css en règle déjà les couleurs ; la forme est reprise ici. */
.cart-item .product-line-grid-right .bootstrap-touchspin {
  display: inline-flex;
  align-items: stretch;
  float: none;
  width: auto;
  border: 1px solid #C0AC92;
  border-radius: 2px;
  background: #FFFFFF;
  box-shadow: none;
  vertical-align: middle;
}

.cart-item .product-line-grid-right .bootstrap-touchspin:focus-within {
  border-color: #B05315;
  box-shadow: 0 0 0 1px #B05315;
}

.cart-item .product-line-grid-right .bootstrap-touchspin > .form-control {
  order: 2;
  float: none;
  width: 3rem;
  height: 2.75rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #332720;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.cart-item .product-line-grid-right .bootstrap-touchspin > .form-control::-webkit-inner-spin-button,
.cart-item .product-line-grid-right .bootstrap-touchspin > .form-control::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-item .product-line-grid-right .bootstrap-touchspin > .form-control:focus {
  border: 0;
  outline: none;                       /* contour porté par le cadre (:focus-within) */
  box-shadow: none;
}

.cart-item .product-line-grid-right .bootstrap-touchspin > .input-group-btn-vertical {
  display: contents;
}

.cart-item .product-line-grid-right .bootstrap-touchspin .btn-touchspin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none;
  width: 2.75rem;
  max-width: none;
  height: 2.75rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #332720;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cart-item .product-line-grid-right .bootstrap-touchspin .bootstrap-touchspin-down { order: 1; }
.cart-item .product-line-grid-right .bootstrap-touchspin .bootstrap-touchspin-up   { order: 3; }

.cart-item .product-line-grid-right .bootstrap-touchspin .btn-touchspin:hover {
  background: #F3EADA;
  color: #A1480F;
}

.cart-item .product-line-grid-right .bootstrap-touchspin .btn-touchspin:focus-visible {
  outline-offset: -2px;                /* contour : boutons.css (.btn, !important) */
}

/* Icônes : « − » et « + » (Material Icons « remove » / « add ») au lieu des chevrons */
.cart-item .product-line-grid-right .bootstrap-touchspin .input-group-btn-vertical i {
  position: static;
  font-size: 1.25rem;
  line-height: 1;
  color: inherit;
}

.cart-item .product-line-grid-right .bootstrap-touchspin .input-group-btn-vertical .touchspin-up::after {
  content: "\E145";
}

.cart-item .product-line-grid-right .bootstrap-touchspin .input-group-btn-vertical .touchspin-down::after {
  content: "\E15B";
}

/* Corbeille : terracotta, cible de 44 px (thème : #414141) */
.product-line-grid-right .cart-line-product-actions .remove-from-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: 0;
  color: #B05315;
  transition: color 0.15s ease;
}

.product-line-grid-right .cart-line-product-actions .remove-from-cart:is(:hover, :focus) {
  color: #8F4210;
}

.product-line-grid-right .cart-line-product-actions .remove-from-cart:focus-visible {
  outline-offset: -2px;
}

.product-line-grid-right .cart-line-product-actions .remove-from-cart .material-icons {
  float: none;
  color: inherit;
  font-size: 1.375rem;
}

/* Personnalisations : lien « Détails du produit » */
.cart-item .product-line-grid-body .customizations a {
  color: #A1480F;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Panier vide ---------- */

.cart-grid-body .no-items {
  padding: 1.5rem 1rem;
  color: #6B5B4E;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .cart-grid-body .no-items { padding: 1.75rem 1.5rem; }
}

/* ---------- « Continuer vos achats » ----------
   Apparence seulement. Thème : noir, jaune au survol. */

.cart-grid-body > a.label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 2.75rem;
  margin-top: 0.5rem;
  color: #332720;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-align: left;
  text-transform: uppercase;
  text-decoration: none;
}

.cart-grid-body > a.label .material-icons {
  margin-left: -0.375rem;
  color: #B05315;
  font-size: 1.25rem;
  transition: transform 0.2s ease;
}

.cart-grid-body > a.label:is(:hover, :focus) {
  color: #A1480F;
}

.cart-grid-body > a.label:hover .material-icons {
  transform: translateX(-3px);
}

/* ---------- Récapitulatif ---------- */

.cart-summary .card-block {
  padding: 1.25rem 1.25rem 0.5rem;
}

.cart-summary .cart-summary-line .label {
  color: #6B5B4E;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  text-align: left;
}

.cart-summary .cart-summary-line .value {
  color: #332720;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

.cart-summary .cart-summary-line small.value:empty { display: none; }

.cart-summary .cart-summary-line small.value {
  color: #6B5B4E;
  font-weight: 400;
}

/* Total TTC : encre grasse, séparé des sous-totaux par un filet */
.cart-summary .cart-summary-totals {
  margin: 0 1.25rem;
  padding: 1rem 0 0.25rem;
  border-top: 1px solid #E2D6C2;
}

.cart-summary .cart-summary-line.cart-total .label,
.cart-summary .cart-summary-line.cart-total .value {
  color: #332720;
  font-size: 1.125rem;
  font-weight: 700;
}

/* « Plus que X € pour la livraison offerte » (theme.css : gris #c9c9c9, texte noir) */
.cart-summary .leo_free_price {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 2px;
  background: #F3EADA;
}

.cart-summary .leo_free_price p {
  color: #332720;
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* Réductions déjà appliquées (thème : libellé orange #ff9a52, 2,3:1) */
.cart-summary .block-promo .cart-summary-line .label,
.cart-summary .block-promo .promo-name {
  color: #A1480F;
}

.cart-summary .block-promo .cart-summary-line .label a,
.cart-summary .block-promo .promo-name a {
  color: #332720;
}

.cart-grid-right .promo-discounts .cart-summary-line .label {
  color: #6B5B4E;
}

/* ---------- Code de réduction ---------- */

.cart-summary .block-promo .promo-code-button {
  margin-bottom: 0.75rem;
  padding-left: 1.25rem;
}

.cart-summary .block-promo .promo-code-button a,
.cart-summary .block-promo .cancel-promo {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: #A1480F;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(161, 72, 15, 0.45);
  cursor: pointer;
}

.cart-summary .block-promo .promo-code-button a:is(:hover, :focus),
.cart-summary .block-promo .cancel-promo:is(:hover, :focus) {
  color: #8F4210;
  text-decoration-color: currentColor;
}

/* Zone de saisie (thème : fond gris #ebebeb) */
.cart-summary .block-promo .promo-code {
  padding: 1rem 1.25rem;
  background: #F3EADA;
}

.cart-summary .block-promo .promo-code form {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

/* Champ (thème : bordure #acaaa6, 40 px) : comme les champs de formulaires.css */
.cart-summary .block-promo .promo-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid #9C8A70;
  border-radius: 2px;
  background: #FFFFFF;
  color: #332720;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  text-indent: 0;
}

.cart-summary .block-promo .promo-input:focus {
  border-color: #B05315;
  outline: none;
  box-shadow: 0 0 0 1px #B05315, 0 0 0 4px rgba(176, 83, 21, 0.16);
}

.cart-summary .block-promo .promo-input::placeholder {
  color: #7A6A5C;
  opacity: 1;
}

/* Bouton « Ajouter » (terracotta : boutons.css) ; thème : remonté de 4 px, en casse « Capitalize » */
.cart-summary .block-promo .promo-input + button {
  flex: 0 0 auto;
  margin-top: 0;
  padding-block: 0;
  min-height: 2.75rem;
  text-transform: uppercase;
}

/* Code refusé (thème : rouge vif #ff4c4c, texte blanc) */
.cart-summary .block-promo .promo-code .alert-danger {
  border: 0;
  border-left: 3px solid #9B2C22;
  border-radius: 2px;
  background: #FBEDEA;
  color: #9B2C22;
}

.cart-summary .block-promo .promo-code .alert-danger::after {
  border-bottom-color: #FBEDEA;
}

.cart-summary .block-promo .promo-code .alert-danger .material-icons {
  color: inherit;
}

/* Codes proposés (« promo-highlighted ») */
.cart-summary .block-promo.promo-highlighted {
  color: #6B5B4E;
}

/* ---------- Bouton « Commander » ----------
   Couleurs : boutons.css. Pleine largeur dans le récapitulatif, 48 px de haut. */

.cart-summary .cart-detailed-actions {
  padding: 0.75rem 1.25rem 1.25rem;
}

.cart-summary .checkout .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
}

/* ---------- Réassurance sous le récapitulatif (blockreassurance) ----------
   Le module écrit la couleur en style="" (#000000) : seul un !important la remplace. */

.cart-grid-right .blockreassurance_product {
  margin-top: 1rem;
  padding: 0.25rem 1.25rem;
  border: 1px solid #E2D6C2;
  border-radius: 2px;
  background: #FBF7EF;
}

.cart-grid-right .blockreassurance_product > div:not(.clearfix) {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  column-gap: 0.875rem;
  align-items: center;
  padding: 0.875rem 0;
  border-bottom: 1px solid #E2D6C2;
}

.cart-grid-right .blockreassurance_product > div:not(.clearfix):nth-last-child(2) {
  border-bottom: 0;
}

.cart-grid-right .blockreassurance_product .item-product {
  grid-row: span 2;
  float: none;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  font-size: 0;                        /* le &nbsp; du gabarit décalait l'icône */
}

.cart-grid-right .blockreassurance_product .item-product :is(img, svg) {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
}

.cart-grid-right .blockreassurance_product .block-title {
  color: #332720 !important;           /* bat le style en ligne du module */
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
}

.cart-grid-right .blockreassurance_product p {
  margin: 0;
  color: #6B5B4E !important;           /* bat le style en ligne du module */
  font-size: 0.9375rem;
  line-height: 1.4;
}


/* ============================================================
   ANIMATIONS RÉDUITES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  :is(body:not(#checkout) #header #_desktop_cart, body .leo-fly-cart-slidebar) :is(.leo-bt-product-quantity, .leo-remove-from-cart, a.cart-dropdow-button),
  .cart-item .product-line-grid-right .bootstrap-touchspin .btn-touchspin,
  .product-line-grid-right .cart-line-product-actions .remove-from-cart,
  .cart-grid-body > a.label .material-icons {
    transition: none;
  }

  .cart-grid-body > a.label:hover .material-icons { transform: none; }
}