/* Mini-panier Elementor (widget « Menu Cart ») — piloté par --ckwc-mc-*.
   Portée sous .ckwc-mc (classe posée sur <body> en front, sur l'aperçu en admin)
   pour passer devant Elementor/thème. Les polices restent celles de CercleKit
   (var(--ck-font-*)). Les BOUTONS du pied sont stylés par l'aspect CercleKit choisi
   (CSS injecté séparément, cf. CKWC_Mini_Panier::btn_override_css) — pas ici. */

/* 1) TOGGLE (icône panier du menu) : annule la fuite du bouton « Primaire » rouge.
   ⚠️ BLINDÉ COMME CERCLEKIT (1.0.388). Un aspect de bouton CercleKit qui cible
   `.elementor-button` émet `html body .elementor-button.elementor-button.elementor-button`
   en `!important` — (0,3,2) — et l'icône du panier EST un `.elementor-button`.
   Notre ancien `.ckwc-mc .elementor-menu-cart__toggle_button.elementor-button`
   ne pesait que (0,3,0) : entre deux `!important`, la spécificité tranche, et
   l'icône du panier ressortait en bouton plein (fond rouge, texte blanc, marges).
   Même préfixe `html body` et classe triplée : (0,5,2).
   ⚠️ DEUX FORMES, et les deux servent : en front `.ckwc-mc` est posée SUR le
   <body> (`html body.ckwc-mc`, collé) ; dans l'aperçu du tiroir, sur un
   conteneur DANS le body (`html body .ckwc-mc`, espacé). Vérifié sur le banc :
   la seule forme espacée ne s'appliquait pas en front. */
html body.ckwc-mc .elementor-menu-cart__toggle .elementor-button.elementor-button.elementor-button,
html body.ckwc-mc .elementor-menu-cart__toggle_button.elementor-button.elementor-button.elementor-button,
html body .ckwc-mc .elementor-menu-cart__toggle .elementor-button.elementor-button.elementor-button,
html body .ckwc-mc .elementor-menu-cart__toggle_button.elementor-button.elementor-button.elementor-button {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--ckwc-mc-icon-color, #1a1a1a) !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--ck-font-primary) !important;
    font-weight: 500 !important;
    gap: .5em !important;
}
/* Le survol doit peser PLUS que la règle au-dessus, sinon sa couleur ne passe plus. */
html body.ckwc-mc .elementor-menu-cart__toggle .elementor-button.elementor-button.elementor-button:hover,
html body .ckwc-mc .elementor-menu-cart__toggle .elementor-button.elementor-button.elementor-button:hover {
    background-color: transparent !important;
    color: var(--ckwc-mc-icon-color-h, #d85830) !important;
}
/* CROIX DE FERMETURE PERSONNALISÉE (classe posée par minicart.js quand une
   icône est choisie dans le tiroir).
   Les DEUX barres d'Elementor sont ses pseudo-éléments : on les masque, sinon
   elles se croiseraient par-dessus le glyphe. Le glyphe reprend les MÊMES
   variables que la croix d'origine (taille, couleur, survol) — le réglage de
   couleur et de taille continue donc de fonctionner à l'identique, seule la
   forme change.
   ⚠ AUCUNE `font-family` ici, volontairement. Le bouton d'Elementor force
   `font-family: eicons`, et la police du glyphe vient de la classe de la
   bibliothèque (`.ti`, `.ph`…). Une déclaration de notre côté, même
   `inherit`, gagnerait en spécificité sur cette classe (0,2,0 contre 0,1,0)
   et afficherait le glyphe en eicons — donc un carré vide. */
.ckwc-mc .elementor-menu-cart__close-button.ckwc-mc-close-custom::before,
.ckwc-mc .elementor-menu-cart__close-button.ckwc-mc-close-custom::after {
    display: none !important;
}
.ckwc-mc .elementor-menu-cart__close-button.ckwc-mc-close-custom {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.ckwc-mc .ckwc-mc-close-ico {
    font-size: var(--cart-close-icon-size, 25px) !important;
    line-height: 1 !important;
    color: var(--cart-close-button-color, #69727d) !important;
    transition: color .3s ease;
}
.ckwc-mc .elementor-menu-cart__close-button:hover .ckwc-mc-close-ico {
    color: var(--cart-close-button-hover-color, #69727d) !important;
}

/* Pastille compteur. */
.ckwc-mc .elementor-menu-cart__toggle .elementor-button-icon-qty {
    border-radius: var(--ckwc-mc-badge-radius, 0) !important;
    background-color: var(--ckwc-mc-badge-bg, #d85830) !important;
    color: var(--ckwc-mc-badge-color, #ffffff) !important;
}

/* 2) SIDEBAR (panneau latéral natif Elementor). */
/* Le tiroir passe AU-DESSUS du burger du Menu CercleKit (100001, monté si haut
   pour dominer son propre panneau à 99999). Elementor le laisse à 9998 : dans
   l'en-tête collant, contexte d'empilement commun aux deux, le burger traversait
   le voile et le panneau. Même valeur pour tous nos panneaux (filtre boutique,
   fenêtre du panier-fichier). */
.ckwc-mc .elementor-menu-cart__container { z-index: 100002 !important; }
.ckwc-mc .elementor-menu-cart__main {
    background-color: var(--ckwc-mc-panel-bg, #ffffff) !important;
    max-width: 90vw !important;
    padding: var(--ckwc-mc-panel-pad, 32px) !important;
    border-radius: var(--ckwc-mc-panel-radius, 0) !important;
    border-left: var(--ckwc-mc-border-w, 1px) solid var(--ckwc-mc-border, #e0e0e0) !important;
    box-shadow: none !important;
    color: var(--ckwc-mc-text, #444444) !important;
    font-family: var(--ck-font-secondary) !important;
}
.ckwc-mc .elementor-menu-cart__products-title,
.ckwc-mc .elementor-menu-cart__main-title {
    color: var(--ckwc-mc-title, #1a1a1a) !important;
    font-family: var(--ck-font-primary) !important;
    font-weight: 700 !important;
    font-size: var(--ckwc-mc-title-size, 16px) !important;
}
/* La croix de fermeture se règle par les variables d'Elementor
   (--cart-close-button-color / -hover-color / --cart-close-icon-size), émises
   par le tiroir Mini-panier. Il y avait ici un `color:` : sans effet, la croix
   étant deux pseudo-éléments peints par `background`, pas du texte. */
/* Notre titre (template composant) : épinglé au-dessus de la liste défilante. */
.ckwc-mc .ckwc-mc-title { flex: 0 0 auto; margin: 0 0 14px; }
/* Largeur fixe du panneau : desktop uniquement. En mobile on laisse Elementor gérer
   son tiroir, borné à 90vw (max-width ci-dessus) pour ne jamais déborder. */
@media (min-width: 768px) {
    .ckwc-mc .elementor-menu-cart__main { width: var(--ckwc-mc-panel-width, 380px) !important; }
}

/* DÉFILEMENT : la zone scrollable d'Elementor était .elementor-menu-cart__products,
   remplacée par notre liste → sans ces règles, un panier chargé BLOQUE (vécu).
   Le panneau devient une colonne : la liste défile, sous-total et boutons
   restent épinglés en bas (geste Shopify). min-height:0 obligatoire, sinon un
   enfant flex refuse de rétrécir sous sa hauteur de contenu. */
.ckwc-mc .elementor-menu-cart__main {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.ckwc-mc .elementor-menu-cart__main .widget_shopping_cart_content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.ckwc-mc .widget_shopping_cart_content .ckwc-mc-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* 2b) LES LIGNES = LE COMPOSANT DU WIDGET PANIER (classes .ckwc-panier__*,
   stylées par panier-widget.css — chargé avec ce fichier). Ici : uniquement
   le PONT entre les réglages du tiroir et les variables du composant, et les
   quelques particularités du tiroir. La liste étant un conteneur étroit, la
   grille compacte du widget (container query ≤620px) s'applique toute seule. */
.ckwc-mc-list {
    --ckwc-cart-sep: var(--ckwc-mc-sep, #e8e8e8);
    --ckwc-cart-item-bw: var(--ckwc-mc-sep-w, 1px);
    --ckwc-cart-img: var(--ckwc-mc-thumb-w, 64px);
    --ckwc-cart-img-radius: var(--ckwc-mc-thumb-radius, 8px);
}
.ckwc-mc-list .ckwc-panier__name { font-size: var(--ckwc-mc-name-size, 15px); }
.ckwc-mc-list .ckwc-panier__name a { color: var(--ckwc-mc-name-color, #1a1a1a); }
.ckwc-mc-list .ckwc-panier__unit { color: var(--ckwc-mc-price-color, #8a8f98); font-size: var(--ckwc-mc-price-size, 13px); }
/* La croix vit en haut à droite de la ligne, comme la grille compacte du widget. */
.ckwc-mc-list .ckwc-panier__remove { align-self: start; }
/* Panier vide. */
.ckwc-mc .ckwc-mc-empty { color: var(--ckwc-mc-text, #444444); margin: 8px 0; }

/* Un seul bouton au pied : pleine largeur (la grille 2 colonnes d'Elementor
   le laisserait sinon à moitié). */
.ckwc-mc .elementor-menu-cart__footer-buttons.ckwc-mc-single { grid-template-columns: 1fr !important; }

/* Mode catalogue (prix masqués) : plus de ligne sous-total du tout. */
.ckwc-mc-noprice .elementor-menu-cart__subtotal { display: none !important; }

/* …ni À CÔTÉ DE L'ICÔNE. Elementor imprime toujours le montant dans son bouton
   et le fragment Ajax le réécrit à chaque ajout — avec les prix masqués, ce
   « montant » est le texte de remplacement (« Sur demande »), collé au caddie.
   Le widget Menu boutique coupe déjà le réglage d'Elementor ; cette règle
   couvre le Menu Cart posé SEUL, dont le réglage appartient à Elementor. */
.ckwc-mc-noprice .elementor-menu-cart__toggle .elementor-button-text { display: none !important; }

/* Sous-total — AUCUNE bordure à lui : le filet du dernier article sépare déjà
   (sinon deux traits s'empilent, « tout épais » — vécu), et la bordure basse
   par défaut d'Elementor rajoutait un 3ᵉ trait avant le bouton. */
.ckwc-mc .elementor-menu-cart__subtotal {
    font-family: var(--ck-font-primary) !important;
    color: var(--ckwc-mc-subtotal-color, #1a1a1a) !important;
    font-size: var(--ckwc-mc-subtotal-size, 15px) !important;
    font-weight: var(--ckwc-mc-subtotal-weight, 700) !important;
    border: 0 !important;
    padding: 16px 0 0 !important;
}

/* Aperçu admin : le pied (sous-total, boutons) est mis en page par Elementor
   en front — absent en admin, on pose l'équivalent, scopé aperçu. */
.ckwc-mc-preview .elementor-menu-cart__subtotal { display: flex; justify-content: space-between; padding: 14px 0; margin-top: 4px; }
.ckwc-mc-preview .elementor-menu-cart__footer-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ckwc-mc-preview .elementor-menu-cart__footer-buttons .elementor-button { flex: 1 1 auto; text-align: center; text-decoration: none; }

/* 3) ICÔNE PANIER LUCIDE (optionnelle, sous .ckwc-mc-icon). */
.ckwc-mc-icon .elementor-menu-cart__toggle .elementor-button-icon svg.e-font-icon-svg { display: none !important; }
.ckwc-mc-icon .elementor-menu-cart__toggle .elementor-button-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.ckwc-mc-icon .elementor-menu-cart__toggle .elementor-button-icon::before {
    content: '' !important;
    display: inline-block !important;
    width: var(--ckwc-mc-icon-size, 22px) !important;
    height: var(--ckwc-mc-icon-size, 22px) !important;
    background-color: var(--ckwc-mc-icon-color, #1a1a1a) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%228%22 cy=%2221%22 r=%221%22/%3E%3Ccircle cx=%2219%22 cy=%2221%22 r=%221%22/%3E%3Cpath d=%22M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12%22/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%228%22 cy=%2221%22 r=%221%22/%3E%3Ccircle cx=%2219%22 cy=%2221%22 r=%221%22/%3E%3Cpath d=%22M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12%22/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 1.1.93 — LE SURVOL DE L'ICÔNE (Kévin, 23/10 : « l'icône du caddie, le survol fonctionne pas »). L'icône CercleKit est
   un masque peint en « Couleur icône » : le survol ne changeait que le texte. Elle prend « Couleur au survol » quand on
   survole le bouton. L'icône d'origine d'Elementor (SVG) aussi : son remplissage suit la même couleur au survol. */
html body.ckwc-mc-icon .elementor-menu-cart__toggle .elementor-button:hover .elementor-button-icon::before,
html body .ckwc-mc-icon .elementor-menu-cart__toggle .elementor-button:hover .elementor-button-icon::before {
    background-color: var(--ckwc-mc-icon-color-h, #d85830) !important;
}
html body.ckwc-mc .elementor-menu-cart__toggle .elementor-button:hover .elementor-button-icon svg,
html body .ckwc-mc .elementor-menu-cart__toggle .elementor-button:hover .elementor-button-icon svg {
    fill: var(--ckwc-mc-icon-color-h, #d85830) !important;
}

/* 1.1.24 — LE MINI PANIER OUVERT PASSE SUR LA BARRE D'INFO (Kévin, 15/10 : « sur la barre d'infos, pas dessous, très
   important »). La barre d'info de CercleKit est collée au-dessus de tout (z-index 99998) ; l'en-tête collant qui
   contient le panier crée sa propre pile (z-index 100) et l'y enfermait, voile compris. Le temps de l'ouverture
   seulement, l'en-tête monte au-dessus de la barre. */
[data-elementor-type="header"].elementor-location-header:has(.elementor-menu-cart--shown) { z-index: 100000; }