/* ==========================================================================
   Canonical WooCommerce product card — shared by shop, archives, related
   products and the homepage product-grid block. Loaded globally (small).
   Targets WooCommerce's standard ul.products > li.product markup.
   ========================================================================== */
ul.products {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(14px, 2vw, 26px);
    grid-template-columns: repeat(var(--mlc-cols, 4), minmax(0, 1fr));
}
/* WooCommerce core adds ::before/::after clearfix to ul.products for its old
   float layout (`.woocommerce ul.products::before{content:" ";display:table}`).
   In a grid those pseudo-elements become grid items and steal the first/last
   cells (first card shifts out of column 1). Kill them — !important + the same
   .woocommerce ancestor to beat core's specificity. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.products::before,
ul.products::after { content: none !important; display: none !important; }

ul.products.columns-3 { --mlc-cols: 3; }
ul.products.columns-4 { --mlc-cols: 4; }
ul.products.columns-5 { --mlc-cols: 5; }

ul.products li.product {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--mlc-card-bg);
    border: 1px solid var(--mlc-line);
    border-radius: var(--mlc-radius);
    overflow: hidden;
    transition: transform var(--mlc-transition), box-shadow var(--mlc-transition);
    text-align: left;
    margin: 0 !important;
    width: auto !important;
}
ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--mlc-shadow-lg); }

ul.products li.product a.woocommerce-LoopProduct-link { display: block; color: inherit; }
ul.products li.product img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--mlc-green-tint);
    margin: 0 !important;
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    padding: 16px 16px 6px;
    margin: 0;
    color: var(--mlc-ink);
}

ul.products li.product .price {
    display: block;
    padding: 0 16px;
    /* Bottom margin guarantees a gap above the (bottom-pinned) button even when
       a 2-line title fills the card and the button's margin-top:auto collapses. */
    margin: 0 0 16px;
    color: var(--mlc-green-dark);
    font-weight: 700;
    font-size: 1.05rem;
}
ul.products li.product .price del { color: var(--mlc-ink-soft); font-weight: 400; opacity: .7; margin-right: 6px; }
ul.products li.product .price ins { text-decoration: none; color: var(--mlc-sale); }

ul.products li.product .star-rating { margin: 8px 16px 0; font-size: .8em; color: var(--mlc-star); }

/* Payment-instalment messaging (Clearpay/Square, PayPal Pay Later) is removed
   from product loops in PHP (inc/woocommerce.php). This is a CSS safety net so
   nothing slips through onto the cards regardless of which hook injects it. */
ul.products li.product square-placement,
ul.products li.product .clearpay-loop,
ul.products li.product .ppcp-messages { display: none !important; }

/* Sale / out-of-stock flashes */
ul.products li.product .onsale,
.woocommerce span.onsale {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    background: var(--mlc-sale); color: #fff;
    min-height: auto; min-width: auto;
    padding: 4px 10px; border-radius: 999px;
    font-size: .72rem; font-weight: 700; line-height: 1;
    margin: 0;
}

/* Add-to-cart button */
ul.products li.product .button,
ul.products li.product .added_to_cart {
    margin: auto 16px 16px;
    display: flex; align-items: center; justify-content: center;
    padding: .7em 1.1em;
    border-radius: 999px;
    background: var(--mlc-green); color: #fff; font-weight: 600; font-size: .9rem;
    border: 0; cursor: pointer;
    transition: background var(--mlc-transition);
    text-align: center;
}
ul.products li.product .button:hover { background: var(--mlc-green-dark); color: #fff; }
ul.products li.product .button.loading { opacity: .7; }

/* Short meta line some loops add */
ul.products li.product .mlc-loop-excerpt { padding: 2px 16px 8px; color: var(--mlc-ink-soft); font-size: .85rem; }

@media (max-width: 900px)  { ul.products, ul.products.columns-5, ul.products.columns-4 { --mlc-cols: 3; } }
@media (max-width: 640px)  { ul.products, ul.products.columns-5, ul.products.columns-4, ul.products.columns-3 { --mlc-cols: 2; } }

/* ==========================================================================
   Make the card identical on .woocommerce pages (shop / category / search /
   single-product related) as on the homepage product-grid block.

   WooCommerce's own loop rules in woocommerce.css are scoped to
   `.woocommerce ul.products li.product …` and only match on WC pages (the
   homepage <body> has no `.woocommerce` class), so they silently override the
   base rules above there. We re-assert the same values at equal specificity;
   this stylesheet loads after woocommerce.css, so source order wins. No
   !important needed.
   ========================================================================== */
.woocommerce ul.products li.product a img { margin: 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
    font-size: 1rem; font-weight: 600; line-height: 1.35; padding: 16px 16px 6px; margin: 0;
}
.woocommerce ul.products li.product .price {
    font-size: 1.05rem; font-weight: 700; margin: 0 0 16px; color: var(--mlc-green-dark);
}
.woocommerce ul.products li.product .star-rating { margin: 8px 16px 0; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
    display: flex; margin: auto 16px 16px; padding: .7em 1.1em;
}