/* ═══════════════════════════════════════════════════════════════════
   BMP GLOBAL LOOP — v1.2.0
   Thin override layer only. The bmpc-research-card design system
   (bmpc-june3-additions.css) is the source of truth for all visual
   styling. This file handles ONLY:
     1. WooCommerce ul.products grid layout (replaces WC floats)
     2. Border-top modifier classes for the WC loop context
     3. Cross-sell section heading + responsive grid overrides
   No new card visual classes are defined here.
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   1. WOOCOMMERCE LOOP GRID
   Force the WC ul.products into the same 3-col grid as the homepage
   .bmpc-research-set-grid. High specificity beats WC float layout.
   ═══════════════════════════════════════════════════════════════════ */

.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) !important;
    gap: 28px !important;
    align-items: stretch !important;
    list-style: none !important;
    margin: 0 0 48px !important;
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
}

/* Each WC <li> must be a flex column so the bmpc-research-card inside
   fills the full height and the CTA pins to the bottom */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* bmpc-research-card inside WC loop must fill 100% height of the <li> */
.woocommerce ul.products li.product .bmpc-research-card,
.woocommerce-page ul.products li.product .bmpc-research-card {
    height: 100% !important;
    min-height: 100% !important;
}

/* Kill the native WC loop title injection — our bmpc-card-title is the title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    display: none !important;
}

/* Hard 3-column lock at 1200px+ to prevent tablet rule bleed-in */
@media ( min-width: 1200px ) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   1b. PRICE COLOR OVERRIDES — EXPLICIT CLASS TARGETING
   june3-additions.css explicitly names .woocommerce-Price-amount,
   .woocommerce-Price-currencySymbol, and bdi with !important.
   Wildcards (*) cannot beat an explicit class rule at the same
   or higher specificity. We must name every inner WC class directly.
   ═══════════════════════════════════════════════════════════════════ */

/* ── CARD: Single price (non-discounted, e.g. 1-Vial ID 519) ──────── */
.woocommerce ul.products li.product .bmpc-research-card .bmpc-card-price-single .woocommerce-Price-amount,
.woocommerce ul.products li.product .bmpc-research-card .bmpc-card-price-single .woocommerce-Price-currencySymbol,
.woocommerce ul.products li.product .bmpc-research-card .bmpc-card-price-single bdi,
.bmp-crosssell-grid .bmpc-research-card .bmpc-card-price-single .woocommerce-Price-amount,
.bmp-crosssell-grid .bmpc-research-card .bmpc-card-price-single .woocommerce-Price-currencySymbol,
.bmp-crosssell-grid .bmpc-research-card .bmpc-card-price-single bdi {
    color: #2b2b2b !important;
}

/* ── CARD: Sale final price — red (e.g. 3-Vial/6-Vial) ──────────── */
.woocommerce ul.products li.product .bmpc-research-card .bmpc-card-price-final .woocommerce-Price-amount,
.woocommerce ul.products li.product .bmpc-research-card .bmpc-card-price-final .woocommerce-Price-currencySymbol,
.woocommerce ul.products li.product .bmpc-research-card .bmpc-card-price-final bdi,
.bmp-crosssell-grid .bmpc-research-card .bmpc-card-price-final .woocommerce-Price-amount,
.bmp-crosssell-grid .bmpc-research-card .bmpc-card-price-final .woocommerce-Price-currencySymbol,
.bmp-crosssell-grid .bmpc-research-card .bmpc-card-price-final bdi {
    color: #e42525 !important;
}

/* ── CARD: Sale original price — gray strikethrough ─────────────── */
.woocommerce ul.products li.product .bmpc-research-card .bmpc-card-price-original .woocommerce-Price-amount,
.woocommerce ul.products li.product .bmpc-research-card .bmpc-card-price-original .woocommerce-Price-currencySymbol,
.woocommerce ul.products li.product .bmpc-research-card .bmpc-card-price-original bdi,
.bmp-crosssell-grid .bmpc-research-card .bmpc-card-price-original .woocommerce-Price-amount,
.bmp-crosssell-grid .bmpc-research-card .bmpc-card-price-original .woocommerce-Price-currencySymbol,
.bmp-crosssell-grid .bmpc-research-card .bmpc-card-price-original bdi {
    color: #9b9b9b !important;
    text-decoration: line-through !important;
}

/* ── SINGLE PRODUCT PAGE: Main price block at top of product page ── */
/* Non-discounted */
.woocommerce div.product p.price .woocommerce-Price-amount,
.woocommerce div.product p.price .woocommerce-Price-currencySymbol,
.woocommerce div.product p.price bdi {
    color: #2b2b2b !important;
}

/* On Sale — red final price */
.woocommerce div.product p.price ins .woocommerce-Price-amount,
.woocommerce div.product p.price ins .woocommerce-Price-currencySymbol,
.woocommerce div.product p.price ins bdi {
    color: #e42525 !important;
}

/* On Sale — gray strikethrough original */
.woocommerce div.product p.price del .woocommerce-Price-amount,
.woocommerce div.product p.price del .woocommerce-Price-currencySymbol,
.woocommerce div.product p.price del bdi {
    color: #9b9b9b !important;
    text-decoration: line-through !important;
}


/* ═══════════════════════════════════════════════════════════════════
   2. BORDER-TOP MODIFIERS
   Homepage cards always have border-top: 3px solid var(--bmpc-red).
   In the WC loop we need to be able to switch this per-product.
   bmp-loop-card--border-red   → red (matches homepage default)
   bmp-loop-card--border-neutral → neutral grey border
   ═══════════════════════════════════════════════════════════════════ */

/* Neutral border: override the june3 always-red top border */
.woocommerce ul.products li.product .bmpc-research-card.bmp-loop-card--border-neutral,
.woocommerce-page ul.products li.product .bmpc-research-card.bmp-loop-card--border-neutral,
.bmp-crosssell-grid .bmpc-research-card.bmp-loop-card--border-neutral {
    border-top: 3px solid var( --bmpc-border ) !important;
}

.woocommerce ul.products li.product .bmpc-research-card.bmp-loop-card--border-neutral:hover,
.woocommerce-page ul.products li.product .bmpc-research-card.bmp-loop-card--border-neutral:hover,
.bmp-crosssell-grid .bmpc-research-card.bmp-loop-card--border-neutral:hover {
    border-color: var( --bmpc-black ) !important;
    border-top-color: var( --bmpc-border ) !important;
}

/* Red border: explicit override ensuring red wins */
.woocommerce ul.products li.product .bmpc-research-card.bmp-loop-card--border-red,
.woocommerce-page ul.products li.product .bmpc-research-card.bmp-loop-card--border-red,
.bmp-crosssell-grid .bmpc-research-card.bmp-loop-card--border-red {
    border-top: 3px solid var( --bmpc-red ) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   3. CROSS-SELL SECTION
   Heading + grid wrapper for the precision cross-sell block on
   single product pages.
   ═══════════════════════════════════════════════════════════════════ */

.bmp-crosssell-section {
    margin: 56px 0 0;
    padding: 0;
}

.bmp-crosssell-section__heading {
    font-family: var( --bmpc-font );
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var( --bmpc-black );
    margin: 0 0 24px;
    padding-bottom: 10px;
    border-bottom: 2px solid var( --bmpc-black );
    background: transparent;
}

/* Cross-sell grid uses the homepage bmpc-research-set-grid class
   for layout — we just override the width constraint so it fills
   the single-product page content width */
.bmp-crosssell-grid.bmpc-research-set-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════
   4. RESPONSIVE — TABLET (768px – 1199px)
   ═══════════════════════════════════════════════════════════════════ */

@media ( min-width: 768px ) and ( max-width: 1199px ) {

    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
        gap: 20px !important;
    }

    /* Cross-sell grid also 2-col on tablet */
    .bmp-crosssell-grid.bmpc-research-set-grid {
        grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
        gap: 20px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   5. RESPONSIVE — MOBILE (≤767px)
   ═══════════════════════════════════════════════════════════════════ */

@media ( max-width: 767px ) {

    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .bmp-crosssell-grid.bmpc-research-set-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .bmp-crosssell-section__heading {
        font-size: 0.9375rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   6. CART UPSELL CARD
   Scoped to .bmp-cart-upsell-wrap — zero bleed to shop/homepage/PDP
   ═══════════════════════════════════════════════════════════════════ */

.bmp-cart-upsell-wrap {
    margin: 2.5rem 0 0;
    width: 100%;
}

.bmp-cart-upsell-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #999;
    text-transform: uppercase;
    margin: 0 0 1rem;
}

.bmp-cart-upsell-wrap .bmpc-research-card {
    max-width: 340px;
    cursor: default;
}

.bmp-cart-upsell-wrap .bmpc-research-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

.bmp-cart-upsell-wrap .bmpc-card-cta.bmp-cart-upsell-atc {
    background: #111111 !important;
    color: #ffffff !important;
    letter-spacing: 0.1em;
    transition: background 0.2s ease;
    text-align: center;
    display: block;
}

.bmp-cart-upsell-wrap .bmpc-card-cta.bmp-cart-upsell-atc:hover,
.bmp-cart-upsell-wrap .bmpc-card-cta.bmp-cart-upsell-atc:focus {
    background: #333333 !important;
    color: #ffffff !important;
}

.bmp-cart-upsell-wrap .bmpc-card-cta.bmp-cart-upsell-atc.added {
    background: #1a6b1a !important;
    pointer-events: none;
}

.bmp-cart-upsell-wrap .bmpc-card-cta.bmp-cart-upsell-atc.added::after {
    content: " ✓";
}