/* Le hook displayProductActions est rendu en 3e enfant du flex row
 * `.product__actions-qty-add` (qty + add-to-cart + nous). On force le wrap
 * sur le parent et mon élément prend 100% du flex-basis pour passer à la ligne. */
.vlproduct__buy .product__actions-qty-add {
    flex-wrap: wrap;
}
.vlessai-wrap {
    flex-basis: 100%;
}

/* Honeypot — invisible humain mais présent au DOM pour appâter les bots. */
.vlessai-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* vlessai — styles complémentaires.
 *
 * Fallback important : la modale doit rester invisible par défaut, peu importe
 * que Alpine ait initialisé ou non le composant vlEssaiForm. On force
 * display:none sur `.vlessai-modal` sans `.show`, et seul l'ajout de `.show`
 * (via x-show ou Alpine :class) la rend visible. Évite le bug "modale toujours
 * affichée à l'arrivée sur la fiche produit" si front.js n'a pas chargé.
 */

.vlessai-modal {
    display: none;
}
.vlessai-modal.show {
    display: flex;
}
.vlessai-modal[x-cloak] {
    display: none !important;
}

/* Cible le bouton submit / form interne quand x-cloak est encore en place
 * (avant boot Alpine) → ne pas afficher pour éviter le "bouton vide". */
[x-cloak] {
    display: none !important;
}