/* MarketBashi — Shared WooCommerce product card typography v0.2.0.
 * Scoped to ul.products, not the single product purchase panel.
 */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    text-align: center;
    min-width: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    font-family: var(--mb-card-font, var(--mb-font-primary));
    font-size: var(--mb-setting-card-title-size, 15px);
    color: var(--mb-setting-card-title-color, #20202a);
    text-align: center;
    overflow-wrap: anywhere;
}
.woocommerce ul.products li.product .price {
    display: block;
    text-align: center;
    font-size: var(--mb-setting-price-size, 15px);
    color: var(--mb-setting-price-color, #737381);
}
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .woocommerce-Price-amount {
    font-size: var(--mb-setting-price-size, 15px);
    color: var(--mb-setting-price-color, #737381);
}
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins .woocommerce-Price-amount {
    font-size: var(--mb-setting-sale-price-size, 17px);
    color: var(--mb-setting-sale-price-color, #8128d8);
    text-decoration: none;
}
.woocommerce ul.products li.product .price:not(:has(del)) > .woocommerce-Price-amount {
    color: var(--mb-setting-price-color, #737381);
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.added_to_cart {
    display: table;
    width: fit-content;
    max-width: 100%;
    margin: 12px auto 0 !important;
    text-align: center;
    white-space: normal;
}
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
    font-family: var(--mb-badge-font, var(--mb-font-primary)) !important;
    font-size: var(--mb-setting-badge-size, 13px) !important;
    background-color: var(--mb-setting-badge-bg, #8128d8) !important;
    color: var(--mb-setting-badge-text, #ffffff) !important;
}

/* MarketBashi M.B — Global Product List Layout v0.1 */

/* Space around all standard WooCommerce product lists */
.woocommerce ul.products,
.woocommerce-page ul.products,
.wc-block-grid__products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 14px;

    width: 100%;
    max-width: 100%;
    margin: 0 auto 24px;
    padding: 0 16px;

    list-style: none;
}

/* Remove WooCommerce float-based layout */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
    display: none;
}

.woocommerce ul.products > li.product,
.woocommerce-page ul.products > li.product,
.wc-block-grid__products > .wc-block-grid__product {
    float: none !important;
    clear: none !important;

    width: auto !important;
    max-width: 100%;
    min-width: 0;

    margin: 0 !important;
}

/* Tablet */
@media (min-width: 768px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .wc-block-grid__products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
        padding-inline: 24px;
    }
}

/* Desktop */
@media (min-width: 1100px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .wc-block-grid__products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
        padding-inline: 24px;
    }
}