/* Jewelry landing (/jewelry/, body.term-jewelry): promo images interleaved
   between product cards, like the diamond search grid. The product grid becomes a
   CSS grid so each promo tile can span 2 columns cleanly — 2 cards wide x 1 tall
   on desktop, full width (2 cols) on mobile. Tiles are injected server-side by
   da_jewelry_grid_promos() on the woocommerce_shop_loop hook. */
body.term-jewelry ul.products {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* mobile: 2 columns */
    gap: 15px;
}
/* WooCommerce adds ::before/::after (clearfix) to ul.products; as a grid these
   become phantom grid items that take the first cell and shove every card one
   column to the right. Remove them so cards start at column 1. (Card contents
   keep the theme's centered text-align — this file must NOT set text-align.) */
body.term-jewelry ul.products::before,
body.term-jewelry ul.products::after {
    display: none !important;
    content: none !important;
}
body.term-jewelry ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
}
body.term-jewelry ul.products li.jewelry-grid-promo {
    grid-column: span 2; /* 2 cards wide */
    position: relative;  /* image is absolutely positioned inside (below) */
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 8px;
}
/* Absolutely-positioned so the image does NOT dictate the tile height — the tile
   then stretches to the card row height (1 card tall) and the image fills it. */
body.term-jewelry ul.products li.jewelry-grid-promo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (min-width: 768px) {
    body.term-jewelry ul.products {
        grid-template-columns: repeat(4, 1fr); /* desktop: 4 columns */
    }
    /* Desktop tiles carry no explicit height — they stretch to the product cards
       sharing their row (the PHP guarantees a tile always shares its row with 2
       cards, so it never collapses). This small floor is only an anti-collapse
       backstop if that invariant ever breaks; it's well below a real card row
       (~560px+), so it can never override the card-driven height. */
    body.term-jewelry ul.products li.jewelry-grid-promo { min-height: 150px; }
}
/* Below 768px the tile spans the full 2-col row on its own, so no product card
   sets the row height — give it an explicit "one card tall" height to match. */
@media (max-width: 767px) {
    body.term-jewelry ul.products li.jewelry-grid-promo { height: 480px; }
}
@media (max-width: 575px) {
    body.term-jewelry ul.products li.jewelry-grid-promo { height: 410px; }
}