/* ==========================================
   PAGE PANIER - NOVA IP Camera
   ==========================================

   Design System: mx-* classes
   Structure: 2 colonnes (produits | resume)
   SCOPE: .page-cart (uniquement page panier)

   TABLE OF CONTENTS:
   1. Reset & Layout Global
   2. En-tete Panier
   3. Liste Produits
   4. Ligne Produit
   5. Selecteur Quantite
   6. Resume Panier (sidebar)
   7. Totaux
   8. Code Promo
   9. Bouton Commander
   10. Panier Vide
   11. Responsive Tablette
   12. Responsive Mobile

   ========================================== */

/* ==========================================
   1. RESET & LAYOUT GLOBAL
   ========================================== */

/* Alert notifications - padding latéral (toutes tailles) */
body#cart #notifications .notifications-container {
  padding-left: var(--space-4) !important;
  padding-right: var(--space-4) !important;
}

.page-cart .mx-cart-page {
  padding: var(--space-6) 0;
}

.page-cart .mx-cart-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-8);
  align-items: start;
}

/* Force la colonne produits à dicter la hauteur pour que sticky fonctionne */
.page-cart .mx-cart-products {
  min-height: calc(100vh - 250px);
}

/* ==========================================
   2. EN-TETE PANIER
   ========================================== */

.page-cart .mx-cart-header {
  margin-bottom: var(--space-6);
  padding: 0;
  border-bottom: none;
}

.page-cart .mx-cart-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--mx-black);
  margin: 0;
}

/* ==========================================
   3. LISTE PRODUITS
   ========================================== */

.page-cart .mx-cart-overview {
  background: white;
  border: 1px solid var(--mx-gray-200);
  border-radius: var(--radius-lg);
}

.page-cart .mx-cart-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-cart .mx-cart-item {
  border-bottom: 1px solid var(--mx-gray-200);
}

.page-cart .mx-cart-item:last-child {
  border-bottom: none;
}

/* ==========================================
   4. LIGNE PRODUIT
   ========================================== */

.page-cart .mx-cart-product-line {
  display: grid;
  grid-template-columns: 100px 1fr auto auto auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
}

/* Image produit */
.page-cart .mx-cart-product-image {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--mx-gray-100);
}

.page-cart .mx-cart-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Infos produit */
.page-cart .mx-cart-product-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.page-cart .mx-cart-product-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--mx-black);
  text-decoration: none;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-cart .mx-cart-product-name:hover {
  color: var(--mx-blue);
}

/* Prix unitaire */
.page-cart .mx-cart-product-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}

.page-cart .mx-cart-product-price-regular {
  color: var(--mx-gray-500);
  text-decoration: line-through;
}

.page-cart .mx-cart-product-discount {
  background: var(--mx-orange);
  color: white;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.page-cart .mx-cart-product-price-current {
  font-weight: var(--fw-semibold);
  color: var(--mx-black);
}

.page-cart .mx-cart-product-unit-price {
  font-size: var(--fs-xs);
  color: var(--mx-gray-500);
  width: 100%;
}

/* Attributs */
.page-cart .mx-cart-product-attributes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.page-cart .mx-cart-product-attribute {
  font-size: var(--fs-xs);
  color: var(--mx-gray-600);
}

.page-cart .mx-cart-product-attribute-label {
  color: var(--mx-gray-500);
}

/* Personnalisation */
.page-cart .mx-cart-customization-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--mx-blue);
  text-decoration: none;
}

.page-cart .mx-cart-customization-link:hover {
  text-decoration: underline;
}

.page-cart .mx-cart-customization-link svg {
  width: 14px;
  height: 14px;
}

/* ==========================================
   5. SELECTEUR QUANTITE
   Styles principaux dans form-elements.css
   ========================================== */

.page-cart .mx-cart-product-quantity {
  display: flex;
  align-items: center;
  margin: 0;
}

/* Cadeau : quantité sans sélecteur */
.page-cart .mx-cart-gift-quantity {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-600);
  padding: 0 var(--space-4);
}

/* ==========================================
   6. PRIX TOTAL LIGNE & ACTIONS
   ========================================== */

.page-cart .mx-cart-product-total {
  text-align: right;
  min-width: 100px;
}

.page-cart .mx-cart-product-total-price {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--mx-black);
}

.page-cart .mx-cart-gift-label {
  font-size: var(--fs-sm);
  color: var(--mx-orange);
  font-weight: var(--fw-medium);
}

.page-cart .mx-cart-product-actions {
  display: flex;
  align-items: center;
}

.page-cart .mx-cart-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--mx-gray-500);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.page-cart .mx-cart-remove-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.page-cart .mx-cart-remove-btn svg {
  width: 20px;
  height: 20px;
}

/* Icône trash SVG en fallback (évite le flash pendant chargement Lucide) */
.page-cart .mx-cart-remove-btn::before {
  content: '';
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Masquer le fallback quand Lucide est chargé */
.page-cart .mx-cart-remove-btn:has(svg)::before {
  display: none;
}

/* ==========================================
   7. RESUME PANIER (Sidebar)
   ========================================== */

/* Desktop : sticky sidebar */
@media (min-width: 1024px) {
  .page-cart .mx-cart-summary-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 250px;
    align-self: start;
  }
}

.page-cart .mx-cart-summary {
  background: white;
  border: 1px solid var(--mx-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ==========================================
   7.1 FREE SHIPPING PROGRESS BAR
   ========================================== */
.mx-free-shipping-cart {
  background: var(--mx-orange-50);
  border: 1px solid var(--mx-orange-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.mx-free-shipping-cart .mx-free-shipping-message {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--mx-gray-700);
  margin-bottom: var(--space-2);
}

.mx-free-shipping-cart .mx-free-shipping-message svg {
  color: var(--mx-orange-500);
  flex-shrink: 0;
}

.mx-free-shipping-cart .mx-free-shipping-message strong {
  color: var(--mx-orange-600);
}

.mx-free-shipping-cart .mx-free-shipping-bar {
  height: 8px;
  background: var(--mx-orange-200);
  border-radius: 4px;
  overflow: hidden;
}

.mx-free-shipping-cart .mx-free-shipping-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mx-orange-400), var(--mx-orange-500));
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* État livraison gratuite atteinte */
.mx-free-shipping-cart.mx-free-shipping-reached {
  background: var(--mx-success-light);
  border-color: var(--mx-success);
}

.mx-free-shipping-cart.mx-free-shipping-reached .mx-free-shipping-message {
  color: var(--mx-success-dark);
}

.mx-free-shipping-cart.mx-free-shipping-reached .mx-free-shipping-message svg {
  color: var(--mx-success);
}

.mx-free-shipping-cart.mx-free-shipping-reached .mx-free-shipping-message strong {
  color: var(--mx-success-dark);
}

.mx-free-shipping-cart.mx-free-shipping-reached .mx-free-shipping-bar {
  background: rgba(16, 185, 129, 0.3);
}

.mx-free-shipping-cart.mx-free-shipping-reached .mx-free-shipping-bar-fill {
  background: linear-gradient(90deg, var(--mx-success), var(--mx-success-dark));
}

/* Icons conditionnelles */
.mx-free-shipping-cart .mx-free-shipping-icon-check {
  display: none;
}

.mx-free-shipping-cart.mx-free-shipping-reached .mx-free-shipping-icon-truck {
  display: none;
}

.mx-free-shipping-cart.mx-free-shipping-reached .mx-free-shipping-icon-check {
  display: block;
}

/* 7.2 Shipping info hint */
.mx-shipping-info-hint {
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--mx-gray-400);
  margin: var(--space-1) 0 0 0;
  text-align: right;
}

/* ==========================================
   8. TOTAUX
   ========================================== */

.page-cart .mx-cart-totals {
  padding: var(--space-4);
}

.page-cart .mx-cart-subtotals {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
}

/* Ligne nombre d'articles - plus grand */
.page-cart .mx-cart-count-line {
  font-size: var(--fs-base);
}

.page-cart .mx-cart-count-line .mx-cart-summary-value {
  font-weight: var(--fw-semibold);
}

.page-cart .mx-cart-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-sm);
}

.page-cart .mx-cart-summary-label {
  font-size: var(--fw-semibold);
  font-weight: var(--fw-semibold);
  color: var(--mx-gray-700);
}

.page-cart .mx-cart-summary-value {
  font-weight: var(--fw-medium);
  color: var(--mx-black);
}

/* Ligne réduction - mise en avant */
.page-cart #cart-subtotal-discount .mx-cart-summary-value {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  background: var(--mx-green-50, #f0fdf4);
  color: var(--mx-green-700, #15803d);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

.page-cart .mx-cart-shipping-details {
  width: 100%;
  text-align: right;
}

.page-cart .mx-cart-shipping-details small {
  font-size: var(--fs-xs);
  color: var(--mx-gray-500);
}

/* Total final */
.page-cart .mx-cart-total-wrapper {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--mx-gray-200);
}

/* Ligne livraison dans le bloc total */
.page-cart .mx-cart-shipping-line {
  margin-bottom: var(--space-2);
}

.page-cart .mx-cart-total-final {
  font-size: var(--fs-lg);
}

.page-cart .mx-cart-total-final .mx-cart-summary-label {
  font-weight: var(--fw-semibold);
  color: var(--mx-black);
}

.page-cart .mx-cart-total-final .mx-cart-summary-value {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--mx-black);
}

/* Total HT - style discret */
.page-cart .mx-cart-total-ht .mx-cart-summary-label,
.page-cart .mx-cart-total-ht .mx-cart-summary-value {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-600);
}

/* TVA - style discret */
.page-cart .mx-cart-tax-line .mx-cart-summary-label,
.page-cart .mx-cart-tax-line .mx-cart-summary-value {
  font-size: var(--fs-sm);
  color: var(--mx-gray-500);
}

/* ==========================================
   9. CODE PROMO
   ========================================== */

.page-cart .mx-cart-voucher {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--mx-gray-200);
}

/* Vouchers appliques */
.page-cart .mx-voucher-list {
  list-style: none;
  margin: 0 0 var(--space-3) 0;
  padding: 0;
}

.page-cart .mx-voucher-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2);
  background: var(--mx-green-50, #f0fdf4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.page-cart .mx-voucher-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--mx-green-700, #15803d);
}

.page-cart .mx-voucher-name svg {
  width: 16px;
  height: 16px;
}

.page-cart .mx-voucher-value {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-semibold);
  color: var(--mx-green-700, #15803d);
}

.page-cart .mx-voucher-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--mx-green-500);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.page-cart .mx-voucher-remove:hover {
  background: var(--mx-green-100, rgba(76, 175, 80, 0.15));
  color: var(--mx-green-700, #15803d) !important;
}

.page-cart .mx-voucher-remove svg {
  width: 14px;
  height: 14px;
}

/* Toggle code promo */
.page-cart .mx-promo-toggle-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) 0;
  font-size: var(--fs-sm);
  color: #000;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color var(--transition-fast);
}

.page-cart .mx-promo-toggle-btn:hover {
  color: var(--mx-blue-700);
}

.page-cart .mx-promo-toggle-btn svg {
  width: 18px;
  height: 18px;
}

.page-cart .mx-promo-toggle-btn svg:first-child {
  flex-shrink: 0;
}

.page-cart .mx-promo-chevron {
  margin-left: auto;
  transition: transform var(--transition-fast);
}

.page-cart .mx-promo-toggle-btn[aria-expanded="true"] .mx-promo-chevron {
  transform: rotate(180deg);
}

/* Formulaire code promo */
/* Le margin est sur l'élément interne pour éviter le saut à la fermeture du collapse */
.page-cart .mx-promo-form-wrapper {
  margin-top: 0;
}

.page-cart .mx-promo-form {
  padding-top: var(--space-3);
}

.page-cart .mx-promo-input-group {
  display: flex;
  gap: 0;
}

/* Input code promo - border-radius gauche uniquement */
.page-cart .mx-promo-input {
  flex: 1;
  min-width: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  border-right: none;
}

/* Bouton code promo - border-radius droit uniquement */
.page-cart .mx-promo-btn {
  flex-shrink: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.page-cart .mx-promo-btn:hover {
  transform: none;
}

/* Erreur code promo - visible quand PS JS injecte display inline */
.page-cart .mx-promo-error {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(239, 68, 68, 0.1);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: #dc2626;
}

/* !important nécessaire car PS JS injecte display:block en inline */
.page-cart .mx-promo-error[style*="display: block"],
.page-cart .mx-promo-error[style*="display:block"] {
  display: flex !important;
}

.page-cart .mx-promo-error svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Offres disponibles */
.page-cart .mx-available-discounts {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--mx-gray-300);
}

.page-cart .mx-available-discounts-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--mx-black);
  margin-bottom: var(--space-2);
}

.page-cart .mx-available-discounts-title svg {
  width: 16px;
  height: 16px;
  color: var(--mx-orange);
}

.page-cart .mx-discount-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-cart .mx-discount-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--fs-sm);
}

.page-cart .mx-discount-code {
  font-family: monospace;
  font-weight: var(--fw-semibold);
  color: white;
  background: var(--mx-orange);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.page-cart .mx-discount-name {
  color: var(--mx-gray-600);
}

/* ==========================================
   10. BOUTON COMMANDER
   ========================================== */

.page-cart .mx-cart-actions {
  padding: var(--space-4);
}

.page-cart .mx-cart-actions .mx-btn-checkout {
  width: 100%;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  font-size: var(--fs-base);
}

.page-cart .mx-cart-actions .mx-btn-checkout svg {
  width: 18px;
  height: 18px;
}

.page-cart .mx-cart-actions .mx-btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-cart .mx-cart-alert {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-3);
}

.page-cart .mx-cart-alert svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.page-cart .mx-cart-alert-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
}

.page-cart .mx-express-checkout {
  margin-top: var(--space-3);
}

/* ==========================================
   11. CONTINUER SHOPPING
   ========================================== */

.page-cart .mx-continue-shopping {
  margin-top: var(--space-4);
  font-size: var(--fs-base);
}

.page-cart .mx-continue-shopping svg {
  width: 18px;
  height: 18px;
}

/* ==========================================
   12. PANIER VIDE
   ========================================== */

.page-cart .mx-cart-empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  background: white;
  border-radius: var(--radius-lg);
}

.page-cart .mx-cart-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-3);
}

.page-cart .mx-cart-empty-icon img {
  max-width: 120px;
  height: auto;
}

.page-cart .mx-cart-empty-icon svg {
  width: 64px;
  height: 64px;
  color: var(--mx-gray-400);
}

.page-cart .mx-cart-empty-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--mx-black);
  margin-bottom: var(--space-2);
}

.page-cart .mx-cart-empty-text {
  font-size: var(--fs-sm);
  color: var(--mx-gray-600);
  margin-bottom: var(--space-4);
}

/* Message inspiration panier vide */
.page-cart .mx-cart-empty-inspiration {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px dashed var(--mx-gray-300);
}

.page-cart .mx-cart-empty-inspiration-text {
  font-size: var(--fs-base);
  color: var(--mx-gray-700);
  margin-bottom: var(--space-4);
}

.page-cart .mx-cart-empty-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8);
  color: var(--mx-gray-500);
}

.page-cart .mx-cart-empty-message svg {
  width: 32px;
  height: 32px;
}

.page-cart .mx-cart-empty-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

.page-cart .mx-cart-continue-shopping {
  text-align: left;
  margin-top: var(--space-4);
}

.page-cart .mx-cart-continue-shopping .mx-btn-tertiary {
  font-size: var(--fs-sm);
}

/* ==========================================
   13. REASSURANCE
   ========================================== */

.page-cart .mx-cart-reassurance {
  margin-top: var(--space-4);
}

/* ==========================================
   14. CROSS-SELLING
   ========================================== */

.page-cart .mx-crossselling {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--mx-gray-200);
}

.page-cart .mx-crossselling-header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.page-cart .mx-crossselling-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--mx-black);
  margin: 0 0 var(--space-2);
}

.page-cart .mx-crossselling-title svg {
  width: 24px;
  height: 24px;
  color: var(--mx-orange);
}

.page-cart .mx-crossselling-subtitle {
  font-size: var(--fs-sm);
  color: var(--mx-gray-600);
  margin: 0;
}

.page-cart .mx-crossselling-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

/* ==========================================
   15. STICKY BAR MOBILE
   ========================================== */

/* Masqué par défaut (desktop/tablette) */
.page-cart .mx-cart-sticky-mobile {
  display: none;
}

/* ==========================================
   16. RESPONSIVE TABLETTE (768px - 1023px)
   ========================================== */

@media (min-width: 768px) and (max-width: 1023px) {

  /* Réduire le padding-top du wrapper */
  .page-cart #wrapper {
    padding-top: var(--space-4) !important;
  }

  /* Plus d'espace sur les côtés */
  .page-cart .mx-main-content-row {
    padding-inline: var(--space-4);
  }

  .page-cart .mx-cart-grid {
    grid-template-columns: 1fr 320px;
    gap: var(--space-4);
    align-items: start;
  }

  /* Désactiver sticky en tablette */
  .page-cart .mx-cart-summary-wrapper {
    position: static;
    top: auto;
  }

  /* Ligne produit tablette : 2 lignes
     Row 1: Image | Info | Prix Total
     Row 2: Image | Qty  | Poubelle
  */
  .page-cart .mx-cart-product-line {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--space-2) var(--space-3);
    align-items: center;
  }

  /* Image : colonne 1, span 2 lignes, alignée en haut */
  .page-cart .mx-cart-product-image {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 60px;
    height: 60px;
    align-self: start;
  }

  /* Info : ligne 1, colonne 2 */
  .page-cart .mx-cart-product-info {
    grid-column: 2;
    grid-row: 1;
  }

  /* Prix Total : ligne 1, colonne 3 (haut droite) */
  .page-cart .mx-cart-product-total {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
    align-self: start;
  }

  /* Ligne 2 : Qty | Poubelle - alignés en haut */
  .page-cart .mx-cart-product-quantity {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    align-self: start;
  }

  .page-cart .mx-cart-product-actions {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    align-self: start;
  }

  /* Bouton poubelle tablette : plus compact */
  .page-cart .mx-cart-remove-btn {
    width: 36px;
    height: 36px;
  }

  /* Cross-selling tablette : 2 colonnes */
  .page-cart .mx-crossselling-products {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Liens secondaires tablette : taille réduite */
  .page-cart .mx-devis-link,
  .page-cart .mx-continue-shopping {
    font-size: var(--fs-xs);
  }

}

/* ==========================================
   16. RESPONSIVE MOBILE (< 768px)
   ========================================== */

@media (max-width: 767px) {

  /* Réduire le padding-top du wrapper */
  .page-cart #wrapper {
    padding-top: var(--space-4) !important;
  }

  /* Padding latéral mobile */
  .page-cart .mx-main-content-row {
    padding-inline: var(--space-4);
  }

  .page-cart .mx-cart-page {
    padding: var(--space-4) 0;
  }

  .page-cart .mx-cart-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .page-cart .mx-cart-title {
    font-size: var(--fs-xl);
  }

  /* Ligne produit mobile : même structure que tablette
     Row 1: Image | Info | Prix Total
     Row 2: Image | Qty  | Poubelle
  */
  .page-cart .mx-cart-product-line {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3);
  }

  .page-cart .mx-cart-product-image {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 60px;
    height: 60px;
    align-self: start;
  }

  .page-cart .mx-cart-product-info {
    grid-column: 2;
    grid-row: 1;
  }

  .page-cart .mx-cart-product-name {
    font-size: var(--fs-sm);
  }

  /* Prix Total : ligne 1, colonne 3 (haut droite) */
  .page-cart .mx-cart-product-total {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
    align-self: start;
    min-width: auto;
  }

  .page-cart .mx-cart-product-total-price {
    font-size: var(--fs-base);
  }

  /* Ligne 2 : Qty | Poubelle */
  .page-cart .mx-cart-product-quantity {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    align-self: start;
  }

  .page-cart .mx-cart-product-actions {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    align-self: start;
  }

  /* Bouton poubelle mobile */
  .page-cart .mx-cart-remove-btn {
    width: 32px;
    height: 32px;
  }

  .page-cart .mx-cart-remove-btn svg {
    width: 16px;
    height: 16px;
  }

  /* Désactiver le min-height sur mobile (plus de sticky) */
  .page-cart .mx-cart-products {
    min-height: auto;
  }

  /* Resume mobile */
  .page-cart .mx-cart-summary-wrapper {
    position: static;
  }

  .page-cart .mx-cart-total-final .mx-cart-summary-value {
    font-size: var(--fs-lg);
  }

  /* Continuer shopping */
  .page-cart .mx-continue-shopping {
    justify-content: center;
    width: 100%;
    padding: var(--space-3);
    background: var(--mx-gray-100);
    border-radius: var(--radius-md);
    margin-top: var(--space-3);
  }

  /* Cross-selling mobile */
  .page-cart .mx-crossselling {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
  }

  .page-cart .mx-crossselling-title {
    font-size: var(--fs-lg);
  }

  .page-cart .mx-crossselling-products {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  /* ========================================
     STICKY BAR MOBILE - Commander
     ======================================== */

  .page-cart .mx-cart-sticky-mobile {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: white;
    border-top: 1px solid var(--mx-gray-200);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    padding: var(--space-3) var(--space-4);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }

  .page-cart .mx-cart-sticky-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .page-cart .mx-cart-sticky-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--space-2);
  }

  .page-cart .mx-cart-sticky-label {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--mx-black);
  }

  .page-cart .mx-cart-sticky-price {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--mx-black);
  }

  .page-cart .mx-btn-checkout-sticky {
    width: 100%;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }

  .page-cart .mx-btn-checkout-sticky svg {
    width: 18px;
    height: 18px;
  }

  /* Petit padding en bas */
  .page-cart .mx-cart-page {
    padding-bottom: var(--space-8);
  }

}

/* ==========================================
   14. CROSS-SELLING INLINE (panier)
   ========================================== */

.page-cart .mx-crossselling-inline {
  margin: 0;
  padding: var(--space-5);
  border-top: 1px solid var(--mx-gray-200);
}

.page-cart .mx-crossselling-inline-header {
  margin-bottom: var(--space-4);
}

.page-cart .mx-crossselling-inline-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--mx-gray-800);
  margin: 0 0 var(--space-2) 0;
}

.page-cart .mx-crossselling-inline-title svg {
  color: var(--mx-orange-500);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.page-cart .mx-crossselling-inline-desc {
  font-size: var(--fs-xs);
  color: var(--mx-gray-500);
  margin: 0;
}

/* Slider wrapper */
.page-cart .mx-crossselling-inline-slider-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.page-cart .mx-crossselling-inline-slider {
  flex: 1;
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: var(--space-1) 0;
}

.page-cart .mx-crossselling-inline-slider::-webkit-scrollbar {
  display: none;
}

/* Navigation buttons */
.page-cart .mx-crossselling-inline-nav {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid var(--mx-gray-200);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.page-cart .mx-crossselling-inline-nav:hover {
  background: var(--mx-gray-50);
  border-color: var(--mx-gray-300);
}

/* Product mini cards */
.page-cart .mx-product-mini {
  flex: 0 0 100px;
  scroll-snap-align: start;
}

.page-cart .mx-product-mini-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.page-cart .mx-product-mini-link:hover .mx-product-mini-title {
  color: var(--mx-orange-500);
}

.page-cart .mx-product-mini-image {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--mx-gray-100);
  margin-bottom: var(--space-2);
}

.page-cart .mx-product-mini-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.page-cart .mx-product-mini-link:hover .mx-product-mini-image img {
  transform: scale(1.05);
}

.page-cart .mx-product-mini-info {
  text-align: center;
}

.page-cart .mx-product-mini-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--mx-gray-800);
  margin: 0 0 var(--space-1) 0;
  line-height: var(--lh-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.page-cart .mx-product-mini-price {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--mx-gray-900);
}

/* Tablet portrait - masquer les flèches, garder le fade */
@media (min-width: 768px) and (max-width: 1023px) {
  .page-cart .mx-crossselling-inline-nav {
    display: none;
  }

  .page-cart .mx-crossselling-inline-slider-wrap {
    position: relative;
  }

  .page-cart .mx-crossselling-inline-slider-wrap::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, white);
    pointer-events: none;
  }
}

/* Mobile responsive */
@media (max-width: 767px) {
  .page-cart .mx-crossselling-inline {
    padding: var(--space-4);
  }

  .page-cart .mx-crossselling-inline-title {
    font-size: var(--fs-sm);
  }

  .page-cart .mx-crossselling-inline-nav {
    display: none;
  }

  .page-cart .mx-crossselling-inline-slider-wrap {
    position: relative;
  }

  .page-cart .mx-crossselling-inline-slider-wrap::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, white);
    pointer-events: none;
  }

  .page-cart .mx-product-mini {
    flex: 0 0 85px;
  }

  .page-cart .mx-product-mini-image {
    width: 85px;
    height: 85px;
  }

  .page-cart .mx-product-mini-title,
  .page-cart .mx-product-mini-price {
    font-size: 0.65rem;
  }
}