/* WooCommerce bridge.
   Hand-written. This is the ONLY stylesheet here that is not generated.

   WooCommerce and Blocksy emit their own markup and class names; the skin in
   components.css styles bkc-* classes. Two ways to join them:

     1. Override the Woo template so it emits bkc- markup directly.
        Preferred for the product card, the product page and the cart.
        Overrides live at themes/bankrupt-child/woocommerce/<same path as core>.

     2. Point the skin at Woo's existing selectors from here.
        Use for the long tail that is not worth overriding.

   Loaded after components.css, so rules here win without !important. */

/* ------------------------------------------------------------------ *
 * Product grid
 *
 * WooCommerce ships a float/flex layout with per-column width classes.
 * Replaced with a grid whose 1px gaps show the hairline color underneath,
 * so the tiles read as one riveted sheet rather than separate cards.
 *
 * The !important flags below are aimed at WooCommerce's own stylesheet,
 * which sets width and float on li.product with high specificity. They are
 * the only ones in this theme.
 * ------------------------------------------------------------------ */

ul.products {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--border-hair);
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--line-hairline);
	border: var(--border-hair) solid var(--line-hairline);
}

@media (min-width: 560px) {
	ul.products { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	ul.products { grid-template-columns: repeat(3, 1fr); }
}

/* repo/README.md's "Product grids" spec: 4 columns at the widest — this step
   predates that spec and was never bumped past 3 until now (2026-08-30). */
@media (min-width: 1180px) {
	ul.products { grid-template-columns: repeat(4, 1fr); }
}

/* Kill Woo's clearfix pseudo-elements — they become phantom grid items. */
ul.products::before,
ul.products::after { content: none !important; display: none !important; }

ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
}

/* The whole tile is the link. */
.bkc-product-link {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.bkc-product-link .bkc-product { height: 100%; }

/* get_price_html() emits its own markup inside .bkc-price. */
.bkc-price .woocommerce-Price-amount { font: var(--type-code); color: var(--text-strong); }
.bkc-price del { color: var(--text-faint); text-decoration: line-through; margin-right: var(--space-3); }
.bkc-price ins { text-decoration: none; color: var(--text-strong); }

/* Woo prints a screen-reader-only heading and a sale flash we do not use. */
ul.products li.product .onsale { display: none; }

/* ------------------------------------------------------------------ *
 * Withheld tile — the manual, non-product 12th grid cell.
 * Markup: woocommerce/loop/loop-end.php. Reuses the real card's shot/meta
 * classes so it sits in the grid identically to a real product tile.
 * ------------------------------------------------------------------ */
.bkc-product-cell--withheld .bkc-product { height: 100%; }

.bkc-product__shot--withheld {
	aspect-ratio: auto;
	min-height: 380px;
	padding: var(--space-8);
}

.bkc-withheld__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
	max-width: 34ch;
	text-align: center;
}

.bkc-badge--alarm { color: var(--alarm-500); }

.bkc-withheld__title {
	font: var(--fw-bold) var(--fs-700)/var(--lh-snug) var(--font-display);
	text-transform: uppercase;
	color: var(--text-strong);
}

.bkc-withheld__body { font: var(--type-body-sm); color: var(--text-muted); }

.bkc-withheld__soon { font: var(--type-code); color: var(--text-muted); }