/* =========================================================
   RELEVANT – Layout WooCommerce sur mobile
   ========================================================= */

@media (max-width: 768px) {

    /* Marqueur quand notre JS est chargé */
    body.relevant-mobile-1col {
        /* juste au cas où, pas de style ici nécessaire */
    }

    /* Container de produits : on annule les grids/flex du thème */
    body.relevant-mobile-1col .woocommerce ul.products,
    body.relevant-mobile-1col .woocommerce-page ul.products {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 1 produit = 100% de largeur */
    body.relevant-mobile-1col .woocommerce ul.products li.product,
    body.relevant-mobile-1col .woocommerce-page ul.products li.product {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
        margin-right: 0 !important;
    }

    /* On nettoie aussi les colonnes que le thème pourrait mettre */
    body.relevant-mobile-1col .woocommerce ul.products li.product [class*="col-"],
    body.relevant-mobile-1col .woocommerce-page ul.products li.product [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }
}