/* Storefront browse/collection/listing styling — draws on BHY_Style's
 * design tokens (the --bh-* custom properties BHY_Style::inline_css()
 * actually emits, printed on every front-end page via wp_head).
 *
 * Real bug fixed here: every rule below previously referenced a
 * fictional, never-defined --bhy-color-* scheme (--bhy-color-border,
 * --bhy-color-surface, --bhy-color-accent, --bhy-color-text-muted) that
 * doesn't exist anywhere in this codebase — the-self-hosted-self 3.4.88 already
 * found and fixed the IDENTICAL bug in class-portal.php's own inline
 * styles ("every declaration silently fell through to hardcoded
 * generic-WP-blue fallbacks, so the portal NEVER showed the real site
 * brand... ever"), but this sibling file wasn't part of that pass and
 * had the same problem. Every reference below is now the real --bh-*
 * name BHY_Style actually writes (--bh-border, --bh-surface,
 * --bh-accent, --bh-text-dim, etc.), same as bh-contest/bh-crm/
 * bh-streaming's own front-end CSS already does it correctly. */

.bhm-storefront-wrap {
    max-width:1200px;
    margin:0 auto;
    padding:32px 20px;
}
.bhm-collection-title {
    font-size:28px;
    margin:0 0 8px;
}
.bhm-collection-desc {
    color:var(--bh-text-dim, #646970);
    margin:0 0 24px;
}

/* Same "control panel" language as bh-courses' catalog filter bar and
   bh-registry's search row — ecosystem-wide consistency, not
   reinvented per plugin: recessed surface-2 panel, pill-shaped inputs
   with a real focus ring. */
.bhm-product-filter {
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    align-items:flex-end;
    padding:16px;
    margin-bottom:24px;
    border:1px solid var(--bh-border, #e2e2e2);
    border-radius:14px;
    background:var(--bh-surface-2, #f6f6f7);
}
.bhm-product-filter label {
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:12px;
    font-weight:600;
    color:var(--bh-text-dim, #646970);
}
.bhm-product-filter input, .bhm-product-filter select {
    padding:9px 14px;
    border:1px solid var(--bh-border, #ccc);
    border-radius:999px;
    font-size:14px;
    background:var(--bh-surface, #fff);
    transition:border-color .15s ease, box-shadow .15s ease;
}
.bhm-product-filter input:focus, .bhm-product-filter select:focus {
    outline:none;
    border-color:var(--bh-accent, #2271b1);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--bh-accent, #2271b1) 18%, transparent);
}
.bhm-product-filter .button { align-self:flex-end; }

.bhm-product-grid {
    display:grid;
    grid-template-columns:repeat(var(--bhm-grid-cols, 4), 1fr);
    gap:20px;
    align-items: start;
}
.bhm-product-grid[aria-busy="true"] {
    opacity:.5;
    pointer-events:none;
}

@media (max-width:900px) { .bhm-product-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px) { .bhm-product-grid { grid-template-columns:1fr; } }

/* Same resting-depth + accent-tinted hover-lift language as every other
   card in this ecosystem (.bhc-course-card, .bhr-card) — this one
   already had A hover state, just not the shared vocabulary (no lift,
   no glow), which read as a slightly different, less finished product
   next to the catalog/registry cards. */
.bhm-product-card {
    display:flex;
    flex-direction:column;
    gap:8px;
    text-decoration:none;
    color:inherit;
    border:1px solid var(--bh-border, #e2e2e2);
    border-radius:var(--bh-radius, 8px);
    overflow:hidden;
    background:var(--bh-surface, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    /* --bhm-grid-cols is a deliberate author-chosen column count (a
       shortcode attribute), not a bug to auto-fit away like the other
       grids this session — but with fewer real products than columns,
       each track still gets its full 1fr share, stretching a card far
       wider than its own content. max-width + justify-self:center keeps
       the chosen column count intact while stopping individual cards
       from stretching into oversized, awkward proportions. */
    max-width: 320px;
    justify-self: center;
    width: 100%;
}
.bhm-product-card:hover {
    transform: translateY(-4px);
    border-color: var(--bh-accent, #2271b1);
    box-shadow: 0 16px 32px -14px color-mix(in srgb, var(--bh-accent, #2271b1) 40%, transparent), 0 4px 8px rgba(0, 0, 0, .08);
}
@media (prefers-reduced-motion: reduce) {
    .bhm-product-card { transition: none; }
    .bhm-product-card:hover { transform: none; }
}
.bhm-product-card-image img {
    width:100%;
    height:auto;
    display:block;
    aspect-ratio:1/1;
    object-fit:cover;
}
.bhm-product-card-title {
    padding:0 12px;
    font-weight:600;
    font-size:14px;
    color:var(--bh-text, inherit);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.bhm-product-card-price {
    padding:0 12px 12px;
    color:var(--bh-accent, #2271b1);
    font-weight:600;
}

.bhm-studio-block-placeholder {
    padding:16px;
    border:1px dashed var(--bh-border, #ccc);
    border-radius:var(--bh-radius-sm, 6px);
    background:var(--bh-surface, #f6f7f7);
    font-size:13px;
    color:var(--bh-text-dim, #646970);
}

/* "You may also like" — the automatic (or explicitly block-placed)
 * related-products section, BHM_Recommendations::render_related_products_block(). */
.bhm-related-products {
    margin-top:40px;
    padding-top:24px;
    border-top:1px solid var(--bh-border, #e2e2e2);
}
.bhm-related-products-heading {
    font-size:20px;
    margin:0 0 16px;
    color:var(--bh-text, inherit);
}

/* Single-product light polish, ROADMAP-platform-evolution.md Section 5 —
 * WooCommerce's own stock single-product template stays (cart/checkout
 * logic is never reimplemented here), but its price/button now read as
 * this ecosystem's own brand rather than generic WooCommerce purple.
 *
 * Real bug, caught live: the first version of these rules only matched
 * the CLASSIC WooCommerce template's markup (`.summary .price`,
 * `.summary .single_add_to_cart_button`) — this site (and any
 * block-theme WooCommerce install, confirmed via the
 * `woocommerce-uses-block-theme` body class) instead renders the
 * product page as real Woo Blocks (`.wc-block-components-product-price`,
 * `.wp-block-woocommerce-add-to-cart-form`), an entirely different DOM
 * shape with no `.summary` ancestor at all — so every rule below
 * silently matched nothing and the button stayed plain WooCommerce
 * black. `.single_add_to_cart_button` itself is the one class name
 * that's stable across BOTH template modes; scoping to that directly
 * (dropping the `.summary` requirement) covers both. */
.single-product .price,
.single-product .wc-block-components-product-price { color:var(--bh-accent, #2271b1); }
.single-product .button,
.single-product .single_add_to_cart_button {
    background:var(--bh-accent, #2271b1);
    border-color:var(--bh-accent, #2271b1);
    color:var(--bh-bg, #fff);
    border-radius:var(--bh-radius-sm, 4px);
    transition:background .15s ease;
}
.single-product .button:hover,
.single-product .single_add_to_cart_button:hover {
    background:var(--bh-accent-soft, #1d5f8f);
    border-color:var(--bh-accent-soft, #1d5f8f);
}