/* ═══════════════════════════════════════════════════════════════════
   Shop surfaces: catalogue, product, cart, checkout.
   Phase 2 styles WooCommerce's own markup; Phase 3 replaces the single
   product template outright.
   ═══════════════════════════════════════════════════════════════════ */

/* ── catalogue ── */
/* 215px is chosen so the five-product range lands on one row at the wrapper's full
   width rather than breaking 4 + 1, and still reflows sensibly below that. */
.woocommerce ul.products {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 20px; list-style: none; margin: 0; padding: 0;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; }

.bm-card {
  position: relative; background: var(--surface);
  border: 1px solid var(--hair-soft); border-radius: var(--r-lg);
  overflow: hidden; margin: 0 !important; width: auto !important; float: none !important;
  display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.bm-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--hair); }

/* Each card carries its own product's colour without a stylesheet per product. */
.bm-card__accent { position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--card-accent, var(--brand)); z-index: 2; }

/* The link grows to fill the card so the button below it lands on the same line in
   every card, even where a title wraps to two lines. */
.bm-card a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; text-decoration: none; flex: 1 1 auto; }
.bm-card img {
  width: 100%; aspect-ratio: 18/25; object-fit: contain;
  background: var(--surface-2); padding: 14px;
}
.bm-card .woocommerce-loop-product__title {
  font-family: var(--disp); font-size: 1.05rem; font-weight: 600; line-height: 1.25;
  letter-spacing: -.015em; padding: 18px 20px 0; margin: 0;
}
.bm-card__pack { display: block; padding: 6px 20px 0; font-size: .75rem; color: var(--ink-mute); }
.bm-card .price {
  display: block; padding: 12px 20px 0; margin: 0;
  font-family: var(--disp); font-weight: 600; font-size: 1.15rem; color: var(--ink);
}
.bm-card .price del { color: var(--ink-mute); font-weight: 400; font-size: .85em; margin-right: 6px; }
.bm-card .button {
  margin: 16px 20px 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card-accent, var(--accent)); color: #fff;
  padding: 11px 18px; border-radius: 100px; border: 0;
  font-weight: 600; font-size: .875rem; text-decoration: none; cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}
.bm-card .button:hover { opacity: .92; transform: translateY(-1px); }
.bm-card .added_to_cart { display: none; }

/* The interim single-product rules that lived here are gone: woocommerce/single-product.php
   replaced that markup entirely in Phase 3, and the leftover `position: sticky` on
   .woocommerce-product-gallery was a live hazard on narrow screens. */

/* ── tabs ── */
.woocommerce-tabs ul.tabs { list-style: none; display: flex; gap: 6px; margin: 0 0 22px; padding: 0 0 2px; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
.woocommerce-tabs ul.tabs li a { display: block; padding: 12px 18px; text-decoration: none; font-weight: 600; font-size: .938rem; color: var(--ink-mute); border-bottom: 2px solid transparent; }
.woocommerce-tabs ul.tabs li.active a { color: var(--ink); border-bottom-color: var(--accent); }

/* Cart, checkout, notices and order-received now live in checkout.css, which loads
   only on those screens. Keeping them here duplicated the rules and let the older,
   looser versions win by source order. */

/* ── archive header ──
   Replaces WooCommerce's bare "Shop" page title, which is a filing label rather
   than a headline. */
.bm-shophead { max-width: 54ch; margin-bottom: clamp(26px, 3.5vw, 42px); }
.bm-shophead__h { font-size: var(--t-sec); margin-top: 12px; }
.bm-shophead__lead { margin-top: 16px; }