/**
 * USAR WC Bridge — Product Grid Styling (v0.9.12)
 *
 * Single source of truth for how WooCommerce product cards render across the
 * site: shop archive, category archives, related products, cross-sells, and
 * any [products] shortcode invocation. Scoped to .woocommerce ul.products so
 * it applies wherever WC renders a product loop but never touches non-WC
 * lists. Replaces the per-page CSS that used to live in the /shop/ Elementor
 * HTML widget.
 *
 * Brand palette (matches the rest of usar-wc-bridge): navy #1a3354 / accent
 * gold #cf8a15 / soft border #e0e3e7 / white card #fff.
 *
 * Loaded on every frontend page where WC styles are enqueued — the standard
 * wc-blocks-style handle in WC 9.x+. Performance cost: ~3 KB gzipped.
 */

/* ============================================================================
 * GRID — explicit columns by WC's columns-N class
 * ============================================================================
 *
 * WC's [products columns="3"] shortcode adds `.columns-3` to <ul.products>;
 * the category-archive loop adds `.columns-4` by default. Style each one
 * explicitly so the column count the author specified always wins. auto-fit
 * fallback handles edge cases where neither class is present (mostly older
 * widget renders). Specificity is single-class so authors can still override
 * per-page.
 */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    grid-auto-flow: row dense;
}
/* v0.9.10 — kill WC's default clearfix pseudo-elements. They're harmless when
   ul.products is a flex container (WC's default) but become grid items when
   we switch the parent to display:grid — eating slot 1 + slot N+1. The 3-real-
   product grid then renders as ::before(1) → Animal(2) → Handler(3) → Scannable(4)
   → ::after(5), so Scannable wraps alone to row 2. Setting display:none on
   them removes them from grid layout entirely. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
    display: none !important;
    content: none !important;
}
.woocommerce ul.products.columns-1,
.woocommerce-page ul.products.columns-1 { grid-template-columns: 1fr; }
.woocommerce ul.products.columns-2,
.woocommerce-page ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
.woocommerce ul.products.columns-3,
.woocommerce-page ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
.woocommerce ul.products.columns-4,
.woocommerce-page ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
.woocommerce ul.products.columns-5,
.woocommerce-page ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
.woocommerce ul.products.columns-6,
.woocommerce-page ul.products.columns-6 { grid-template-columns: repeat(6, 1fr); }

/* WC's default theme floats items + uses calc-width — kill both so the grid
   layout above isn't ignored. (v0.9.9: removed height:100% — combined with
   grid stretch it was producing phantom grid cells that pushed items into
   unexpected slots. min-height instead, lets cards size to content.) */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    padding: 16px !important;
    background: #fff;
    border: 1px solid #e0e3e7;
    border-radius: 10px;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    text-align: center;
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    clear: none !important;
    min-width: 0;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
    border-color: #cf8a15;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(41, 74, 112, 0.08);
}

/* ============================================================================
 * PRODUCT IMAGE — fixed-box CONTAIN (not zoom / not crop)
 * ============================================================================
 *
 * WC's default woocommerce.css enqueues AFTER this plugin's CSS and applies
 * `width: 100%; height: auto;` to product images at the same selector
 * specificity — source order wins, the image grows to its natural aspect
 * ratio, and cards with taller images push the whole grid row taller. The
 * `!important` flags below force our 200×200 contained box to win regardless
 * of source order or theme overrides.
 *
 * Width/height are also locked with `!important` on the LINK wrapper so any
 * theme `<a>` reset (display:inline) can't collapse the image box.
 *
 * `:not(.onsale)` skips the sale-flash <img> which is a positioned overlay,
 * not the product photo.
 */
/* v0.9.12 — Auto-height image rule. v0.9.11 forced fixed 240×240 boxes which
   exceeded card width on layouts where the card's .woocommerce-LoopProduct-link
   is narrower (e.g. ~226px) — image overflowed the link container and got
   clipped by ancestor overflow. Now: width 100% of available container,
   height auto (preserves aspect ratio), bounded by max-height: 220px so
   tall portrait images don't push the card to absurd heights. Centered
   block via auto margins. object-fit: contain ensures aspect ratio is
   preserved with no cropping. */
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 220px !important;
    margin: 0 auto 12px !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent;
    border-radius: 6px;
    box-sizing: border-box !important;
}

/* ============================================================================
 * TITLE
 * ============================================================================
 */
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product h2,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px;
    font-weight: 700;
    margin: 6px 0 4px;
    color: #1a3354;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    text-transform: none;
    display: block;
    text-align: center;
    line-height: 1.3;
}

/* ============================================================================
 * PRICE
 * ============================================================================
 */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
    font-size: 14px;
    font-weight: 700;
    color: #cf8a15;
    margin-bottom: 10px;
    display: block;
}
.woocommerce ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins {
    text-decoration: none;
    background: transparent;
}
.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del {
    color: #9ca3af;
    opacity: 0.7;
    margin-right: 6px;
}

/* ============================================================================
 * SALE BADGE
 * ============================================================================
 */
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale {
    background: #cf8a15;
    color: #fff;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
    min-height: 0;
    min-width: 0;
    line-height: 1.4;
    top: 8px;
    right: 8px;
    left: auto;
}

/* ============================================================================
 * BUTTON — "Add to cart" / "Select options"
 * ============================================================================
 */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
    display: inline-block;
    background: linear-gradient(135deg, #294a70 0%, #1a3354 100%);
    color: #fff;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 4px;
    align-self: center;
    border: 0;
    transition: background 0.15s;
    font-family: inherit;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover {
    background: #cf8a15;
    color: #fff;
}
.woocommerce ul.products li.product .button.added::after,
.woocommerce-page ul.products li.product .button.added::after {
    font-family: WooCommerce;
    content: "\e017";
    margin-left: 6px;
    vertical-align: middle;
}

/* ============================================================================
 * MOBILE — 2-col on phones, 1-col on very narrow
 * ============================================================================
 */
@media (max-width: 600px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .woocommerce ul.products.columns-3,
    .woocommerce ul.products.columns-4,
    .woocommerce ul.products.columns-5,
    .woocommerce ul.products.columns-6,
    .woocommerce-page ul.products.columns-3,
    .woocommerce-page ul.products.columns-4,
    .woocommerce-page ul.products.columns-5,
    .woocommerce-page ul.products.columns-6 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .woocommerce ul.products li.product img,
    .woocommerce-page ul.products li.product img {
        height: 160px !important;
        max-height: 160px !important;
        max-width: 100% !important;
    }
}
@media (max-width: 360px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .woocommerce ul.products.columns-2,
    .woocommerce ul.products.columns-3,
    .woocommerce ul.products.columns-4,
    .woocommerce-page ul.products.columns-2,
    .woocommerce-page ul.products.columns-3,
    .woocommerce-page ul.products.columns-4 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
 * COMPAT — filter classes (page-level JS toggles `.is-filtered-out` on
 * products that don't match the current animal-type filter; we honor that
 * class universally so any page's filter UI just works).
 * ============================================================================
 */
.woocommerce ul.products li.product.is-filtered-out,
.woocommerce-page ul.products li.product.is-filtered-out {
    display: none !important;
}