/* ═══════════════════════════════════════════════════════════════════
   HR TRAILER — HOMEPAGE "FEATURED PRODUCTS" GRID
   Professional product cards for the front page (shop.css does not
   load here). Scoped to body.home so shop/category pages are untouched.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Grid: 4-up like the reference, clean gutters ────────────────── */
body.home .woocommerce ul.products,
body.home ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
}

body.home .woocommerce.columns-4 { width: 100%; }

/* WooCommerce adds clearfix ::before/::after to ul.products. In a grid
   container these become phantom grid items that eat the first & last
   cells (producing a 3 / 4 / 1 layout). Neutralize them so 8 products
   lay out as a clean 4 × 2. */
body.home .woocommerce ul.products::before,
body.home .woocommerce ul.products::after,
body.home ul.products::before,
body.home ul.products::after {
    display: none !important;
    content: none !important;
}

/* ── Card ────────────────────────────────────────────────────────── */
body.home ul.products li.product {
    background: #fff !important;
    border: 1px solid #e6eaf0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(19, 36, 64, 0.06) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
    position: relative !important;
}

body.home ul.products li.product:hover {
    box-shadow: 0 8px 28px rgba(19, 36, 64, 0.14) !important;
    transform: translateY(-3px) !important;
}

/* link that wraps cat + badge + image + title + price */
body.home ul.products li.product > a.woocommerce-loop-product__link {
    display: block !important;
    text-decoration: none !important;
}

/* ── Product image: uniform size, fills card width ───────────────── */
body.home ul.products li.product img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    border-bottom: 1px solid #f0f2f5 !important;
    background: #f5f7fa !important;
}

/* ── Category eyebrow label ──────────────────────────────────────── */
body.home ul.products li.product .hr-loop-cat {
    display: block !important;
    font-size: 11px !important;
    color: #8a94a6 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 14px 16px 5px !important;
    line-height: 1.3 !important;
}

/* ── Title ───────────────────────────────────────────────────────── */
body.home ul.products li.product .woocommerce-loop-product__title {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #132440 !important;
    line-height: 1.35 !important;
    padding: 0 16px 8px !important;
    margin: 0 !important;
    /* keep titles to ~3 lines so card tops align */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 3.4em !important;
}

/* ── Price ───────────────────────────────────────────────────────── */
body.home ul.products li.product .price {
    display: block !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #132440 !important;
    padding: 0 16px 16px !important;
    margin: 0 !important;
}

body.home ul.products li.product .price del {
    color: #aab1bd !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin-right: 5px !important;
}

body.home ul.products li.product .price ins {
    text-decoration: none !important;
    color: #BF092F !important;
}

body.home ul.products li.product .price .screen-reader-text { display: none !important; }

/* ── Add to Cart button: full-width navy, sticks to card bottom ──── */
body.home ul.products li.product .button,
body.home ul.products li.product .add_to_cart_button {
    display: block !important;
    width: 100% !important;
    background: #132440 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 14px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    margin-top: auto !important;
    box-sizing: border-box !important;
}

body.home ul.products li.product .button:hover,
body.home ul.products li.product .add_to_cart_button:hover {
    background: #0b1830 !important;
}

body.home ul.products li.product .added_to_cart {
    display: block !important;
    text-align: center !important;
    padding: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #132440 !important;
    text-decoration: none !important;
}

/* ── Sale badge: clean pill, top-left over the image ─────────────── */
body.home ul.products li.product .onsale {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    margin: 0 !important;
    background: #BF092F !important;
    color: #fff !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    padding: 5px 11px !important;
    border-radius: 4px !important;
    line-height: 1 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 2 !important;
}

/* ── Responsive ──────────────────────────────────────────────────── */
/* Keep 4 columns across all desktop/laptop widths so 8 products = 2 rows.
   (No 3-column tier — that would wrap 8 items into 3 rows.) */
@media (max-width: 920px) {
    body.home .woocommerce ul.products,
    body.home ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
    body.home ul.products li.product img { height: 180px !important; }
}
@media (max-width: 480px) {
    body.home .woocommerce ul.products,
    body.home ul.products { grid-template-columns: repeat(2, 1fr) !important; }
    body.home ul.products li.product .woocommerce-loop-product__title { font-size: 13px !important; }
}