.products {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--margin-large);

    /* padding: var(--margin-small) 0; */
}

.products__inner {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;

    gap: var(--col-1);

    width: var(--col-12);

    padding-top: var(--margin-medium);
    padding-left: var(--col-0-5);
    padding-right: var(--col-0-5);
}

.product-card {
    width: var(--col-2);
    min-width: 215px;
    font-size: var(--txt-small);
    font-weight: var(--fw-light);
}

/* .product-card__image,
.product-card__image img {
    width: 100%;
    height: auto;
} */

.product-card__data {
    padding: 0.9em 0.75rem 0 0.6rem;
    display: flex;
    flex-direction: column;
    gap: var(--margin-small);
}

.product-card__title-infos {
    display: flex;
    justify-content: space-between;
}

.woocommerce-variation-add-to-cart,
.add_to_cart_button {
    font-weight: var(--fw-regular);
}

.product-card__out-of-stock {
    color: var(--secondary);
}

/* PRODUITS (cards) — variable product: hide native UI we don't want */
.product-card form.variations_form table.variations,
.product-card .woocommerce-variation-availability,
.product-card form.variations_form .quantity {
    display: none !important;
}

/* Cache la table Woo (donc pas de label "Couleur") */
#produits form.variations_form .variations {
    display: none !important;
}

/* Cache "Effacer" au cas où */
#produits form.variations_form .reset_variations {
    display: none !important;
}

#produits .product-card__variation-toggle {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
}

#produits .product-card__variation-option.is-active {
    text-decoration: underline;
}

a.added_to_cart.wc-forward {
    display: none !important;
}

.products__bottom-link {
    margin-bottom: var(--margin-medium);
}

/* ==============================
        MEDIA QUERIES   
================================= */

@media (max-width: 767px) {

    .products {
        min-height: auto;
    }

    .products__inner {
        align-items: center;
        gap: var(--margin-large);
        flex-direction: column;

        padding-left: 0;
        padding-right: 0;
    }

    .product-card {
        width: var(--col-3);
    }

    .product-card__data {
        padding: var(--margin-small) 0 0 0;
    }
}