/* ==========================================================================
   Bouton WhatsApp des cartes produit
   Empile sous le bouton d'ajout au panier, tous deux en pleine largeur.
   Il double le bouton d'achat sans le concurrencer : plus bas, mais dans le
   vert lime de la charte.
   ========================================================================== */

ul.products li.product .rdl-actions,
.rdl-actions {
    display: grid !important;
    /* « minmax(0, …) » et non « 1fr » : « 1fr » vaut « minmax(auto, 1fr) » et
       refuse de descendre sous la largeur minimale du contenu. */
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    width: 100%;
}

.rdl-actions .added_to_cart {
    text-align: center;
}

/* Le bouton ne porte volontairement pas la classe « button » : il n'herite
   donc ni du fond bleu electrique ni de l'icone de panier en ::before, qui
   restent la marque de l'action principale.

   Le texte est en marine et non en blanc : sur le lime #CEFF00, du blanc
   tombe a un rapport de contraste de 1,3 pour 1 et devient illisible. En
   marine #0E1236 le rapport monte a 15,3 pour 1. */
.rdl-actions .rdl-wa {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 13px 14px !important;
    background: var(--rideal-vert-lime, #CEFF00) !important;
    color: #0E1236 !important;
    font-family: var(--font-display, inherit) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

/* Survol : inversion de la paire, comme sur le ruban « SUR-MESURE ». */
.rdl-actions .rdl-wa:hover,
.rdl-actions .rdl-wa:focus-visible {
    background: #0E1236 !important;
    color: var(--rideal-vert-lime, #CEFF00) !important;
}

.rdl-actions .rdl-wa__logo {
    flex: 0 0 auto;
    display: block;
    width: 16px;
    height: 16px;
}

@media (max-width: 767px) {
    .rdl-actions { gap: 5px; }
    .rdl-actions .rdl-wa {
        padding: 11px 8px !important;
        font-size: 11px !important;
        letter-spacing: 0.05em !important;
    }
    .rdl-actions .rdl-wa__logo { width: 14px; height: 14px; }
}