/* Masquer les boutons radio */
input[type="radio"] {
    display: none; /* Masque les boutons radio */
}

/* Style pour les labels */
label[for="payment_method_sellix"],
label[for="payment_method_sellauth"],
label[for="payment_method_mm_gateway"],
label[for="payment_method_plisio"],
label[for="payment_method_sellauth_stripe"] {
    display: inline-flex; /* Utilise flexbox pour aligner le texte */
    align-items: center; /* Centre verticalement le texte */
    font-weight: bold; /* Met le texte en gras */
    font-size: 1em; /* Taille de police normale */
    color: #ffffff; /* Couleur du texte par défaut */
    background-color: rgb(40, 40, 40); /* Couleur de fond des boutons */
    border-radius: 5px; /* Coins légèrement arrondis */
    margin: 5px; /* Espacement externe réduit */
    padding: 8px 12px; /* Espace interne autour du texte */
    cursor: pointer; /* Change le curseur lors du survol */
    transition: color 0.3s ease, background-color 0.3s ease; /* Transition douce pour la couleur du texte et le fond */
    white-space: nowrap; /* Évite le passage à la ligne */
}

/* Style pour indiquer l'état sélectionné et changer la couleur du texte */
input[type="radio"]:checked + label {
    background-color: rgb(50, 50, 50); /* Change la couleur de fond lorsque sélectionné */
    color: rgb(220, 53, 69); /* Conserve la couleur du texte rouge lorsque sélectionné */
}

/* Ajout d'un style de survol pour le texte du label */
label[for="payment_method_sellix"]:hover,
label[for="payment_method_sellauth_stripe"]:hover,
label[for="payment_method_mm_gateway"]:hover,
label[for="payment_method_plisio"]:hover,
label[for="payment_method_sellauth"]:hover {
    color: rgb(220, 53, 69); /* Change la couleur du texte lors du survol */
}

/*
 * Styles complets pour l'effet de zoom sur les produits.
 * Ce code cible les pages d'archives, les catégories et les carrousels
 * pour assurer un comportement cohérent sur tout le site.
 */

/* Applique la transition pour une animation en douceur */
.archive .product,
.product-category,
.etheme-elementor-product-align-center .swiper-slide .product {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

/* Force la transformation au survol */
.archive .product:hover,
.product-category:hover,
.etheme-elementor-product-align-center .swiper-slide .product:hover {
    transform: scale(1.05) translateY(-5px) !important;
}

/* Cache l'effet de débordement du zoom à l'intérieur des carrousels */
.etheme-elementor-product-align-center .swiper-slide {
    overflow: hidden !important;
}

/* Retire l'effet de zoom sur les images dans les carrousels */
.etheme-product-grid-item.etheme-product-image-hover-zoom-in:hover img {
    transform: scale(1) !important;
}