/* ==========================================================================
   Widget : Ajouter au panier (WooCommerce) – cf-wc-add-to-cart
   Ces styles complètent ceux de WooCommerce sans les écraser.
   Les couleurs et typographies sont pilotées par les contrôles Elementor
   via les selectors définis dans le widget PHP.
   ========================================================================== */

/* Conteneur principal
   ------------------------------------------------------------------ */
.elementor-add-to-cart {
    display: block;
}

/* Le formulaire WooCommerce natif (.cart) est en flex par défaut ;
   on s'assure qu'il hérite de l'alignement défini dans Elementor. */
.elementor-add-to-cart form.cart,
.elementor-add-to-cart .cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--button-spacing, .75em);
}

/* Alignements (pilotés par prefix_class sur {{WRAPPER}}) */
.elementor-add-to-cart--align-left .elementor-add-to-cart,
.elementor-add-to-cart--align-left .elementor-add-to-cart form.cart  { text-align: left;  justify-content: flex-start; }
.elementor-add-to-cart--align-center .elementor-add-to-cart,
.elementor-add-to-cart--align-center .elementor-add-to-cart form.cart { text-align: center; justify-content: center; }
.elementor-add-to-cart--align-right .elementor-add-to-cart,
.elementor-add-to-cart--align-right .elementor-add-to-cart form.cart  { text-align: right;  justify-content: flex-end; }
.elementor-add-to-cart--align-justify .elementor-add-to-cart .button,
.elementor-add-to-cart--align-justify .elementor-add-to-cart .single_add_to_cart_button { width: 100%; text-align: center; }

/* Lien "Voir le panier" – espacement configurable via CSS var */
.elementor-add-to-cart .added_to_cart {
    margin-top: var(--view-cart-spacing, .5em);
    display: block;
}

/* --------------------------------------------------------------------------
   Disposition : Empilé (stacked)
   Le wrapper .e-atc-qty-button-holder est injecté via les hooks WC
   quand l'option "Empilé" ou "Auto" est sélectionnée.
   -------------------------------------------------------------------------- */
.elementor-add-to-cart--layout-stacked .elementor-add-to-cart .e-atc-qty-button-holder,
.elementor-add-to-cart--layout-auto .elementor-add-to-cart .e-atc-qty-button-holder {
    display: flex;
    flex-direction: column;
    gap: .5em;
    width: 100%;
}

/* Auto : s'empile sur les petits écrans, reste inline sur les grands. */
@media (min-width: 768px) {
    .elementor-add-to-cart--layout-auto .elementor-add-to-cart .e-atc-qty-button-holder {
        flex-direction: row;
        width: auto;
    }
}

/* Le bouton prend toute la largeur en mode empilé. */
.elementor-add-to-cart--layout-stacked .elementor-add-to-cart .e-atc-qty-button-holder .button,
.elementor-add-to-cart--layout-stacked .elementor-add-to-cart .e-atc-qty-button-holder .single_add_to_cart_button {
    width: 100%;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Champ quantité
   -------------------------------------------------------------------------- */
.elementor-add-to-cart .quantity {
    display: flex;
    align-items: center;
}

.elementor-add-to-cart .qty {
    width: 4em;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Transitions douces sur le bouton
   -------------------------------------------------------------------------- */
.elementor-add-to-cart .button,
.elementor-add-to-cart .single_add_to_cart_button {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* --------------------------------------------------------------------------
   Icône dans le bouton (mode AJAX)
   -------------------------------------------------------------------------- */
.elementor-add-to-cart .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0; /* géré par margin sur l'icône via Elementor */
}

.cf-wc-atc__btn-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Tailles du bouton
   Les padding/font-size servent de valeurs par défaut ; les contrôles
   de style Elementor les surchargent si l'utilisateur les renseigne.
   -------------------------------------------------------------------------- */
.cf-wc-atc--size-xs .elementor-add-to-cart .button,
.cf-wc-atc--size-xs .elementor-add-to-cart .single_add_to_cart_button {
    font-size: 0.7em;
    padding: 0.3em 0.8em;
}

.cf-wc-atc--size-sm .elementor-add-to-cart .button,
.cf-wc-atc--size-sm .elementor-add-to-cart .single_add_to_cart_button {
    font-size: 0.85em;
    padding: 0.4em 1em;
}

.cf-wc-atc--size-md .elementor-add-to-cart .button,
.cf-wc-atc--size-md .elementor-add-to-cart .single_add_to_cart_button {
    font-size: 1em;
    padding: 0.6em 1.5em;
}

.cf-wc-atc--size-lg .elementor-add-to-cart .button,
.cf-wc-atc--size-lg .elementor-add-to-cart .single_add_to_cart_button {
    font-size: 1.15em;
    padding: 0.75em 2em;
}

.cf-wc-atc--size-xl .elementor-add-to-cart .button,
.cf-wc-atc--size-xl .elementor-add-to-cart .single_add_to_cart_button {
    font-size: 1.3em;
    padding: 0.9em 2.5em;
}

/* --------------------------------------------------------------------------
   Message d'avertissement (mode édition Elementor)
   -------------------------------------------------------------------------- */
.cf-wc-atc__notice {
    padding: .75em 1em;
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    color: #856404;
    border-radius: 3px;
    font-size: .9em;
}