/*
 * Gacha Treasure Suite - Grille WooCommerce native sur mobile.
 * Aucun style n'est applique a partir de 768 px.
 */

@media screen and (max-width: 767px) {
    /*
     * Les pseudo-elements clearfix de Storefront ne doivent pas devenir des
     * cellules. Ils sont sortis du flux de la grille au lieu d'etre masques.
     */
    .woocommerce ul.products::before,
    .woocommerce ul.products::after,
    .woocommerce-page ul.products::before,
    .woocommerce-page ul.products::after {
        position: absolute !important;
        display: block !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none;
    }

    /* La liste WooCommerce devient une grille a deux colonnes fixes. */
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px 12px;
        position: relative;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Chaque produit est une cellule, y compris les elements first et last de Storefront. */
    .woocommerce ul.products > li.product,
    .woocommerce ul.products > li.product.first,
    .woocommerce ul.products > li.product.last,
    .woocommerce-page ul.products > li.product,
    .woocommerce-page ul.products > li.product.first,
    .woocommerce-page ul.products > li.product.last {
        box-sizing: border-box;
        float: none !important;
        clear: none !important;
        width: 100% !important;
        min-width: 0;
        max-width: none;
        margin: 0 !important;
        padding: 0 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        order: 0;
    }

    .woocommerce ul.products > li.product .woocommerce-loop-product__link,
    .woocommerce-page ul.products > li.product .woocommerce-loop-product__link {
        display: block;
        min-width: 0;
        margin: 0;
        padding: 0;
        transform: none;
    }

    .woocommerce ul.products > li.product .woocommerce-loop-product__link img,
    .woocommerce-page ul.products > li.product .woocommerce-loop-product__link img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 0 0.55rem;
        object-fit: contain;
    }
}