/* Mini-panier Elementor (widget « Menu Cart ») — piloté par --ckwc-mc-*. Portée sous .ckwc-mc (classe posée sur 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 (`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). */ .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; }