/* ==========================================================
   1. SUR TOUS LES ÉCRANS : On cache l'ancienne icône Compare et le compteur (0)
   ========================================================== */
.wd-header-compare .wd-tools-icon,
.wd-header-compare .wd-tools-count,
.wd-toolbar-compare .wd-toolbar-icon,
.item-compare .wd-toolbar-icon,
.wd-toolbar-compare .wd-tools-count,
.item-compare .wd-tools-count {
    display: none !important;
}

/* ==========================================================
   2. ON CRÉE VOTRE ICÔNE EN ::BEFORE (Taille Mobile : 32px)
   ========================================================== */
.wd-header-compare > a::before,
.wd-toolbar .wd-header-compare > a::before,
.wd-toolbar .wd-toolbar-compare > a::before,
.wd-toolbar .item-compare > a::before {
    content: "" !important;
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 auto !important;
    
    /* Votre URL directe intégrée : */
    background-image: url("https://capmicrodz.com/wp-content/uploads/2026/08/livraison-de-colis.png") !important;
    
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* ==========================================================
   3. SUR MOBILE : Remplacer le texte "Compare" par "Suivi"
   ========================================================== */
.wd-toolbar .wd-header-compare .wd-toolbar-label,
.wd-toolbar .wd-toolbar-compare .wd-toolbar-label,
.wd-toolbar .item-compare .wd-toolbar-label {
    font-size: 0 !important;
    display: block !important;
}

.wd-toolbar .wd-header-compare .wd-toolbar-label::after,
.wd-toolbar .wd-toolbar-compare .wd-toolbar-label::after,
.wd-toolbar .item-compare .wd-toolbar-label::after {
    content: "Suivi" !important;
    font-size: 11px !important;
    display: block !important;
    line-height: 1.2 !important;
    color: inherit !important;
    margin-top: 2px !important;
}

/* ==========================================================
   4. SUR PC UNIQUEMENT : Alignement parfait du cercle + Zoom
   ========================================================== */
@media (min-width: 1024px) {
    /* Alignement vertical du conteneur principal */
    .wd-header-compare {
        display: inline-flex !important;
        align-items: center !important;
        vertical-align: middle !important;
    }

    /* Cercle blanc de 42px parfaitement aligné avec les autres */
    .wd-header-compare > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        background-color: #ffffff !important;
        border-radius: 50% !important;
        box-shadow: none !important;
        text-decoration: none !important;
        
        /* Correction du décalage vers le bas : */
        vertical-align: middle !important;
        align-self: center !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    /* Camion zoomé (140%) et bien centré dans le cercle */
    .wd-header-compare > a::before {
        width: 42px !important;
        height: 42px !important;
        background-size: 100% !important;
        background-position: center 58% !important;
    }
}