/**
 * WooCommerce presentation.
 *
 * WooCommerce block themes render the catalogue through the Product Collection / Product Template
 * blocks, which ship their own unstyled-ish defaults. This file maps that markup onto the Claude
 * Design kit's ProductCard and ProductScreen, using only tokens from tokens.css.
 *
 * Enqueued by inc/enqueue.php, and only in a WooCommerce context — editorial pages never load it.
 */

/* ============================================================== catalogue grid ==== */

/*
 * `loop_shop_columns` cannot set this in a block theme — the Product Template block hardcodes a
 * `columns-N` class — so the grid is corrected here. The selector carries a tag prefix purely to
 * outrank WooCommerce's own `.columns-3` rule.
 *
 * auto-fill against the kit's minmax(230px) track rather than a fixed column count. Since the
 * filter sidebar landed, the results column is ~885px rather than the full width, and a hardcoded
 * four gave 209px cards — too narrow for the card's own two-button action row. Letting the track
 * decide keeps the card at its designed size whatever the column is doing.
 */
ul.wc-block-product-template,
ul.wc-block-product-template.columns-1,
ul.wc-block-product-template.columns-2,
ul.wc-block-product-template.columns-3,
ul.wc-block-product-template.columns-4,
ul.wc-block-product-template.columns-5,
ul.wc-block-product-template.columns-6 {
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

/* ================================================================ product card ==== */

/* Both the block loop (li.wc-block-product) and the classic loop (li.product) get the card. */
li.wc-block-product,
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: auto !important;   /* WooCommerce's classic float grid sets a percentage width. */
	margin: 0 !important;
	float: none !important;
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: var(--transition-surface);
	text-align: left;
}

li.wc-block-product:hover,
.woocommerce ul.products li.product:hover { box-shadow: var(--shadow-md); }

/* Media panel — contained on a tint, matching the kit's 4:3 product frame. */
li.wc-block-product .wc-block-components-product-image,
.woocommerce ul.products li.product a img {
	margin: 0;
	background: var(--surface-subtle);
	border-bottom: var(--border-width) solid var(--border-subtle);
}

/*
 * Square, not the kit's 4:3 — a client decision, and the right one for a catalogue of manufacturer
 * shots that mostly arrive square.
 *
 * archive-product.html now sets the Product Image block's own `aspectRatio` and `scale` attributes,
 * so the !important that used to be needed here is gone: the block writes those as inline styles
 * and a stylesheet could not otherwise reach them. `contain` matters as much as the ratio —
 * `cover` crops manufacturer photography that already ships with its own padding.
 *
 * The classic-loop selector keeps the declarations, since related products and shortcode loops
 * render without the block's attributes.
 */
li.wc-block-product .wc-block-components-product-image img,
.woocommerce ul.products li.product a img {
	width: 100%;
	height: auto;
	padding: var(--space-4);
	border-radius: 0;
	display: block;
}

.woocommerce ul.products li.product a img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* Everything below the image shares one padded column. */
li.wc-block-product > :not(.wc-block-components-product-image),
.woocommerce ul.products li.product > :not(a:first-of-type, .fb-card-actions) {
	padding-inline: var(--space-4);
	text-align: left;
	margin-block: 0;
}

li.wc-block-product > :not(.wc-block-components-product-image):first-of-type { padding-top: var(--space-4); }

/*
 * The classic card keeps image, brand and title inside its product link, so those two text rows
 * need the padding the rule above only reaches direct children with. The image is excluded: it is
 * full-bleed against the card edge in both loops.
 */
.woocommerce ul.products li.product > a:first-of-type > :not(img) {
	padding-inline: var(--space-4);
	text-align: left;
}

/*
 * The Product Template block ships its title with `has-medium-font-size`, whose generated class
 * carries `!important` — so without one here the card title rendered at core's fluid Medium
 * (14px→20px with the viewport) instead of the kit's fixed 14px. Same reason the price rule
 * below needs one.
 */
li.wc-block-product .wp-block-post-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-body);
	font-size: var(--text-body-sm) !important;
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	letter-spacing: 0;
	text-align: left;
	text-wrap: pretty;
	margin: var(--space-1) 0 0;
	padding-top: 0;
}

li.wc-block-product .wp-block-post-title a,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--text-primary);
	text-decoration: none;
}

li.wc-block-product .wp-block-post-title a:hover { text-decoration: underline; }

li.wc-block-product .wp-block-woocommerce-product-price,
.woocommerce ul.products li.product .price {
	font-family: var(--font-display);
	font-size: var(--text-h3) !important;
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-heading);
	color: var(--text-primary);
	text-align: left;
	margin: var(--space-3) 0 0;
}

li.wc-block-product .wp-block-woocommerce-product-price .wc-block-components-product-price__value { font-size: inherit; }

/* Metadata injected by the theme's loop hooks (brand, SKU, certifications, stock). */
.fb-loop-brand {
	font-size: var(--text-micro);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
	margin-top: var(--space-4);
}

/* Inside the block card the wrapper carries the top padding; the margin would double it. */
.fb-product-meta .fb-loop-brand { margin-top: 0; }

.fb-loop-sku {
	font-family: var(--font-mono);
	font-size: var(--text-micro);
	color: var(--text-muted);
	margin-top: var(--space-1);
}

.fb-loop-certs {
	display: flex;
	gap: var(--space-1);
	flex-wrap: wrap;
	margin-top: var(--space-3);
}

.fb-loop-stock { margin-top: var(--space-3); }

/*
 * Actions pinned to the card foot so uneven titles still align, with the two CTAs side by side as
 * the kit has them: Add to Cart takes the space, Quote takes what it needs.
 *
 * `margin-top: auto` is what does the pinning — it is why a card with a two-line title still lines
 * its buttons up with the one beside it.
 */
li.wc-block-product .fb-card-actions,
.woocommerce ul.products li.product .fb-card-actions {
	display: flex;
	gap: var(--space-2);
	padding-inline: var(--space-4);
	margin-top: auto;
	padding-bottom: var(--space-4);
	padding-top: var(--space-3);
}

li.wc-block-product .fb-card-actions > *,
.woocommerce ul.products li.product .fb-card-actions > * { margin: 0; min-width: 0; }

/*
 * The two loops name their buttons differently — the block card wraps Add to Cart in a block, the
 * classic card emits WooCommerce's own `a.button` — so both are listed. The rule is the same one:
 * Add to Cart takes the space, Quote takes what it needs.
 */
li.wc-block-product .fb-card-actions .wp-block-woocommerce-product-button,
.woocommerce ul.products li.product .fb-card-actions > .button,
.woocommerce ul.products li.product .fb-card-actions > .added_to_cart { flex: 1; }

li.wc-block-product .fb-card-actions .wp-block-fischer-bell-add-to-quote,
.woocommerce ul.products li.product .fb-card-actions > form.fb-quote-add { flex: 0 0 auto; }

/*
 * A quote-only product has no Add to Cart, so the quote button is the only child and takes the
 * full width — which is the kit's quote-only card exactly.
 */
li.wc-block-product .fb-card-actions .wp-block-fischer-bell-add-to-quote:only-child { flex: 1; }

/*
 * `:only-child` cannot do this job on the classic card: WooCommerce emits an out-of-flow
 * `span.screen-reader-text` beside the buttons, so the quote form is never an only child even on a
 * product that has no Add to Cart. Ask the question that is actually being asked — "is there a
 * cart button in this row?" — rather than counting elements.
 */
.woocommerce ul.products li.product .fb-card-actions:not(:has(> .button)) > form.fb-quote-add { flex: 1; }

/*
 * The quote form defaults to inline-block, so it shrank to its label inside the flex child and the
 * button's `width: 100%` then resolved against *that* rather than the card. On a quote-only card,
 * where the button should span the full width, it came out two-thirds wide.
 */
li.wc-block-product .fb-card-actions form.fb-quote-add {
	display: block;
	width: 100%;
	margin: 0;
}

.woocommerce ul.products li.product .fb-card-actions > form.fb-quote-add {
	display: block;
	width: auto;
	margin: 0;
}

/* With no cart button beside it the quote form is the row, so it takes the width back. */
.woocommerce ul.products li.product .fb-card-actions:not(:has(> .button)) > form.fb-quote-add { width: 100%; }

li.wc-block-product .fb-card-actions .fb-btn,
li.wc-block-product .fb-card-actions .wc-block-components-product-button__button,
.woocommerce ul.products li.product .fb-card-actions .fb-btn,
.woocommerce ul.products li.product .fb-card-actions > .button { width: 100%; }

/* ==================================================================== buttons ==== */

/*
 * WooCommerce's catalogue and single-product CTAs rendered at ~20px tall — less than half the
 * design system's 44px minimum tap target. They are mapped onto .fb-btn's cart variant here.
 */
.wc-block-components-product-button__button,
.woocommerce a.button.add_to_cart_button,
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce #respond input#submit,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	height: var(--control-h-md);
	min-height: var(--tap-min);
	padding: 0 var(--space-5) !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-body-sm) !important;
	font-weight: var(--fw-semibold) !important;
	letter-spacing: var(--ls-button);
	line-height: 1 !important;
	border: var(--border-width) solid transparent;
	border-radius: var(--radius-md) !important;
	background: var(--cta-cart-bg) !important;
	color: var(--cta-cart-fg) !important;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: var(--transition-control);
}

.wc-block-components-product-button__button:hover,
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--steel-700) !important;
	color: var(--cta-cart-fg) !important;
}

.woocommerce .single_add_to_cart_button {
	height: var(--control-h-lg);
	font-size: var(--text-body) !important;
}

/* Secondary/outline treatment for WooCommerce's non-primary buttons. */
.woocommerce a.button:not(.add_to_cart_button):not(.alt),
.woocommerce button.button:not(.alt) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tap-min);
	padding: 0 var(--space-5);
	border-radius: var(--radius-md);
	border: var(--border-width) solid var(--border-strong);
	background: var(--surface-card);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	font-weight: var(--fw-semibold);
	text-decoration: none;
}

/* Confirmation state after an AJAX add-to-quote. */
.fb-btn.is-added {
	background: var(--fb-green-100);
	color: var(--fb-green-700);
	border-color: transparent;
}

/* ============================================================ quantity input ==== */

.woocommerce .quantity input.qty,
.wc-block-components-quantity-selector input {
	height: var(--control-h-lg);
	min-height: var(--tap-min);
	width: 88px;
	padding-inline: var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--text-body-sm);
	color: var(--text-primary);
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-md);
	text-align: center;
}

/* ================================================================ breadcrumbs ==== */

.woocommerce-breadcrumb,
.wc-block-breadcrumbs {
	font-size: var(--text-caption) !important;
	color: var(--text-muted);
	margin-bottom: var(--space-5);
}

.woocommerce-breadcrumb a,
.wc-block-breadcrumbs a {
	color: var(--text-secondary);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover,
.wc-block-breadcrumbs a:hover { color: var(--text-primary); text-decoration: underline; }

/* ============================================================ sorting / count ==== */

.woocommerce-ordering select,
.wc-block-catalog-sorting select {
	height: var(--control-h-md);
	min-height: var(--tap-min);
	padding-inline: var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	color: var(--text-primary);
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-md);
}

.woocommerce-result-count,
.wc-block-product-results-count {
	font-size: var(--text-body-sm) !important;
	color: var(--text-secondary);
	margin: 0;
}

/* ============================================================= single product ==== */

.woocommerce div.product .product_title {
	font-family: var(--font-display);
	font-size: var(--text-h1);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-heading);
	line-height: var(--lh-snug);
	text-wrap: pretty;
	margin: var(--space-2) 0 0;
}

/* Price sits in its own ruled band, as in the kit's ProductScreen. */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--font-display);
	font-size: var(--text-h1);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-heading);
	color: var(--text-primary);
	margin: 0;
}

/* ------------------------------------------------------------ PDP price ----
   The single-product template is a BLOCK template, so the price is
   `.wp-block-woocommerce-product-price`, not the classic `p.price` the rules
   above target — those never matched here. Left to itself the block rendered in
   the body face at weight 400 and at core's fluid Large (22px→36px with the
   viewport), while the same price in the shop loop was display/bold. The
   `!important` is to beat `.has-large-font-size`, which core emits with one. */
body.single-product .wp-block-woocommerce-product-price {
	font-family: var(--font-display);
	font-size: var(--text-h1) !important;
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-heading);
	line-height: var(--lh-snug);
	color: var(--text-primary);
}

/* The gate and quote-only notes sit inside the price block but are prose, not a figure. */
body.single-product .wp-block-woocommerce-product-price .fb-price__gate,
body.single-product .wp-block-woocommerce-product-price .fb-price__on-request {
	font-size: var(--text-body-sm) !important;
	font-weight: var(--fw-semibold);
	letter-spacing: 0;
}

/* WooCommerce prints its own stock line on the PDP in addition to the one the theme renders in
   the price band. Two stock statements, in two type treatments, sometimes disagreeing ("Low
   stock" vs "6 in stock"). The theme's is the design-kit treatment, so this one goes. */
body.single-product div.product p.stock {
	display: none;
}

.fb-pdp-priceband {
	border-top: var(--border-width) solid var(--border-subtle);
	border-bottom: var(--border-width) solid var(--border-subtle);
	margin: var(--space-6) 0;
	padding: var(--space-5) 0;
}

.fb-pdp-priceband .fb-stock { margin-top: var(--space-3); }
.fb-pdp-gst { font-size: var(--text-caption); color: var(--text-muted); margin-top: var(--space-2); }

.fb-pdp-brand {
	font-size: var(--text-micro);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
}

.fb-pdp-mpn {
	font-family: var(--font-mono);
	font-size: var(--text-caption);
	color: var(--text-muted);
	margin-top: var(--space-2);
}

.fb-pdp-certs {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
	margin-top: var(--space-4);
}

/* Cart and quote sit side by side — dark then green, never competing for the same slot. */
.woocommerce div.product form.cart {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: var(--space-6);
}

.woocommerce div.product form.cart .quantity { margin: 0; }
form.fb-quote-add--detached { display: none; }

/* Reassurance strip beneath the buy box. */
.fb-pdp-assurances {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.fb-pdp-assurance {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-caption);
	color: var(--text-secondary);
}

.fb-pdp-assurance .fb-icon { color: var(--fb-green-700); }

/* -------------------------------------------------------------------- tabs ---- */

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--space-6);
	padding: 0;
	margin: 0 0 var(--space-8);
	border-bottom: var(--border-width) solid var(--border-subtle);
	list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: var(--space-3) 0;
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	font-weight: var(--fw-medium);
	color: var(--text-secondary);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--text-primary);
	font-weight: var(--fw-semibold);
	border-bottom-color: var(--fb-green);
}

.woocommerce div.product .woocommerce-tabs .panel { max-width: 820px; }

.woocommerce div.product .woocommerce-tabs .panel > h2 { display: none; }

/* Specification and bulk-pricing tables. */
.fb-spec-table,
.fb-bulk-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-body-sm);
}

.fb-spec-table th {
	text-align: left;
	width: 260px;
	padding: var(--space-3) var(--space-4) var(--space-3) 0;
	color: var(--text-secondary);
	font-weight: var(--fw-medium);
}

.fb-spec-table td { padding: var(--space-3) 0; }
.fb-spec-table tr,
.fb-bulk-table tbody tr { border-bottom: var(--border-width) solid var(--border-subtle); }
.fb-spec-table td.is-mono, .fb-bulk-table td + td { font-family: var(--font-mono); }

.fb-bulk-table thead tr { border-bottom: var(--border-width-strong) solid var(--border-default); }

.fb-bulk-table th {
	text-align: left;
	padding: var(--space-3) 0;
	font-size: var(--text-micro);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: var(--fw-semibold);
}

.fb-bulk-table td { padding: var(--space-3) 0; }

.fb-tab-empty { color: var(--text-secondary); margin: 0; }

/* ================================================================= responsive ==== */

@media (max-width: 860px) {
	/*
	 * auto-fill picks the column count on its own now, so only the track floor and the gap need
	 * adjusting: 230px would drop a phone to a single column, and two-up reads better.
	 */
	ul.wc-block-product-template,
	ul.wc-block-product-template.columns-1,
	ul.wc-block-product-template.columns-2,
	ul.wc-block-product-template.columns-3,
	ul.wc-block-product-template.columns-4,
	ul.wc-block-product-template.columns-5,
	ul.wc-block-product-template.columns-6 {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: var(--space-3);
	}

	/* Too little width for two buttons abreast; stack them. */
	li.wc-block-product .fb-card-actions,
	.woocommerce ul.products li.product .fb-card-actions { flex-direction: column; }

	li.wc-block-product .fb-card-actions .wp-block-fischer-bell-add-to-quote,
	.woocommerce ul.products li.product .fb-card-actions > form.fb-quote-add { flex: 1; }

	.woocommerce div.product .woocommerce-tabs ul.tabs {
		gap: var(--space-4);
		overflow-x: auto;
		flex-wrap: nowrap;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li a { white-space: nowrap; }

	.fb-spec-table th { width: 45%; }
}

@media (max-width: 480px) {
	/* One full-width CTA per row reads better than two cramped halves. */
	.woocommerce div.product form.cart { gap: var(--space-2); }
	.woocommerce div.product form.cart .quantity,
	.woocommerce div.product form.cart .quantity input.qty { width: 100%; }
	.woocommerce .single_add_to_cart_button,
	.woocommerce div.product form.cart .fb-btn { width: 100%; }
}

/* ==========================================================================
   MY ACCOUNT
   The design kit's Account screen: an identity header, stat tiles and tables,
   with the endpoint menu presented as the kit's Tabs component.
   Markup comes from inc/account.php, woocommerce/myaccount/dashboard.php, and
   the wholesale + quotes plugins' account endpoints.
   ========================================================================== */

/* WooCommerce floats the navigation into a 30% left column and the content beside it. The kit
   runs the endpoints along the top instead, so both floats are cancelled outright. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
	margin: 0;
}

/* --- Endpoint menu as Tabs ---------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation {
	margin-bottom: var(--space-8);
	border-bottom: var(--border-width) solid var(--border-default);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	gap: var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: inline-flex;
	align-items: center;
	/* The tab sits ON the container's border, so its own 3px rule replaces it when active. */
	margin-bottom: calc(var(--border-width) * -1);
	padding: var(--space-3) 0;
	min-height: var(--tap-min);
	border-bottom: 3px solid transparent;
	color: var(--text-muted);
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	font-weight: var(--fw-medium);
	white-space: nowrap;
	text-decoration: none;
	transition: var(--transition-control);
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible {
	color: var(--text-primary);
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	border-bottom-color: var(--fb-green);
	color: var(--text-primary);
	font-weight: var(--fw-semibold);
}

/* Logging out is not a peer of the other tabs; keep it available but quiet. */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-left: auto;
}

/* --- Dashboard header ---------------------------------------------------- */

.fb-account-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-8);
}

.fb-account-header__name {
	margin: var(--space-2) 0 0;
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: var(--fw-black);
	line-height: var(--lh-tight);
}

.fb-account-header__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

.fb-account-header__whoami {
	margin: var(--space-3) 0 0;
	color: var(--text-muted);
	font-size: var(--text-body-sm);
}

/* --- Stat tiles ---------------------------------------------------------- */

.fb-account-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-4);
	margin-bottom: var(--space-8);
}

.fb-account-stat {
	padding: var(--space-5);
}

.fb-account-stat__value {
	margin-top: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: var(--fw-black);
	line-height: var(--lh-tight);
}

/* wc_price() wraps the figure in its own span, which would otherwise inherit the body face. */
.fb-account-stat__value .woocommerce-Price-amount {
	font-family: inherit;
	font-weight: inherit;
}

.fb-account-stat__note {
	margin-top: var(--space-1);
	color: var(--text-muted);
	font-size: var(--text-caption);
}

/* --- Tables -------------------------------------------------------------- */

/* Wide tables scroll inside their own container rather than pushing the page sideways. */
.fb-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.fb-account-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-body-sm);
}

.fb-account-table th {
	padding: var(--space-3) var(--space-3) var(--space-3) 0;
	border-bottom: var(--border-width-strong) solid var(--border-default);
	color: var(--text-muted);
	font-size: var(--text-micro);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-eyebrow);
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.fb-account-table td {
	padding: var(--space-3) var(--space-3) var(--space-3) 0;
	border-bottom: var(--border-width) solid var(--border-subtle);
	vertical-align: middle;
}

.fb-account-table tr:last-child td {
	border-bottom: 0;
}

/* Numbers and references are data — the mono face makes them scannable down a column. */
.fb-account-table .is-mono {
	font-family: var(--font-mono);
}

.fb-account-table .is-actions {
	padding-right: 0;
	text-align: right;
}

.fb-account-table__detail {
	display: block;
	margin-top: 2px;
	color: var(--text-muted);
	font-size: var(--text-caption);
}

/* --- Sections and empty states ------------------------------------------- */

.fb-account-section {
	margin-top: var(--space-10);
}

.fb-account-section__title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: var(--fw-bold);
}

.fb-account-section__more {
	margin-top: var(--space-4);
	font-size: var(--text-body-sm);
}

.fb-account-empty {
	padding: var(--space-8);
	border: var(--border-width) solid var(--border-subtle);
	border-radius: var(--radius-md);
	background: var(--surface-subtle);
	color: var(--text-secondary);
}

.fb-account-empty p {
	margin: 0 0 var(--space-3);
}

.fb-account-empty p:last-of-type {
	margin-bottom: var(--space-4);
}

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 782px) {
	.fb-account-header {
		align-items: flex-start;
	}

	/* A full-width primary action is easier to hit than one floated beside the name. */
	.fb-account-header > .fb-btn {
		width: 100%;
		justify-content: center;
	}

	.fb-account-stats {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}

	.fb-account-stat {
		padding: var(--space-4);
	}

	.fb-account-stat__value {
		font-size: var(--text-h3);
	}

	/* Logout would otherwise be pushed off the end of the scrolling tab strip. */
	.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
		margin-left: 0;
	}
}

/* --------------------------------------------------------- account alignment ---
   WooCommerce's woocommerce-blocktheme.css caps the page title and the .woocommerce
   wrapper at 1000px on account, cart and checkout. The constrained layout then applies
   `margin: auto !important`, so those three pages sat ~90px inside the header's edge
   while every other page lined up with it.

   The shell already governs width, so the cap is removed. Prefixed with `body` purely to
   outrank WooCommerce's own selector without depending on stylesheet order. */
body.woocommerce-account .wp-block-post-title,
body.woocommerce-account main .woocommerce,
body.woocommerce-cart .wp-block-post-title,
body.woocommerce-cart main .woocommerce,
body.woocommerce-checkout .wp-block-post-title,
body.woocommerce-checkout main .woocommerce {
	max-width: none;
}

/* WooCommerce pads each account nav item by 1em for its stacked list. The tab bar sets its
   own padding on the link; `body` outranks WooCommerce regardless of load order. */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	text-decoration: none;
}

/* Now that the shell governs width rather than a 1000px cap, account forms would otherwise stretch
   the full page. The kit presents them as cards, so they keep a form-shaped measure — capped, and
   flush with the page edge rather than centred. */
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register,
body.woocommerce-account .woocommerce-ResetPassword {
	max-width: 480px;
	padding: var(--space-6);
	border: var(--border-width) solid var(--border-subtle);
	border-radius: var(--radius-md);
	background: var(--surface-card);
}

body.woocommerce-account .woocommerce-EditAccountForm,
body.woocommerce-account .woocommerce-address-fields,
body.woocommerce-edit-address .woocommerce-MyAccount-content form {
	max-width: 640px;
}

/* WooCommerce stacks login and register side by side on some configurations; keep them from
   inheriting the card treatment twice. */
body.woocommerce-account .u-columns .woocommerce-form-login,
body.woocommerce-account .u-columns .woocommerce-form-register {
	max-width: none;
}

/* ------------------------------------------------- legacy product grid ----
   WooCommerce has two product-loop blocks. The shop archive uses Product
   Collection (`li.wc-block-product`, styled above); the empty-cart "New in
   store" strip still uses the older Product Grid, which ships its own type
   scale — 12px titles, prices and buttons. That is off the design scale and
   looks nothing like the cards on the shop page. Same treatment, same tokens.

   Scoped through the grid wrapper for specificity (0,2,0) so it wins over
   WooCommerce's own single-class rules without needing !important. */
.wc-block-grid .wc-block-grid__product-title {
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	color: var(--text-primary);
}

.wc-block-grid .wc-block-grid__product-price {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-heading);
	color: var(--text-primary);
}

/* Gate and quote-only notes are prose sitting inside the price slot, not a figure. */
.wc-block-grid .wc-block-grid__product-price .fb-price__gate,
.wc-block-grid .wc-block-grid__product-price .fb-price__on-request {
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: 0;
}

.wc-block-grid .wc-block-grid__product-add-to-cart .wp-block-button__link {
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	font-weight: var(--fw-semibold);
}

/* ------------------------------------------------------------------ catalogue ---- */

/*
 * The eStore archive: filter sidebar beside the product grid, matching CatalogScreen.jsx.
 *
 * Filtering is navigation — every option is a link carrying WooCommerce's own `filter_*` query
 * vars — so nothing here depends on JavaScript. The only scripted part is turning the sidebar
 * into a sheet on a phone, and that is additive.
 */

.fb-catalog-page {
	padding-block: var(--space-6) var(--space-16);
}

.fb-catalog-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-block: var(--space-5) var(--space-6);
}

.fb-catalog-head__description {
	max-width: 640px;
	margin-block: var(--space-2) 0;
}

.fb-catalog-head__tools {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.fb-catalog {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--space-10);
	align-items: start;
}

/*
 * Sticky under the sticky header. 150px clears the top bar, masthead and nav; anything less and
 * the first facet hides behind the header once the page is scrolled.
 */
.fb-catalog__aside {
	position: sticky;
	top: 150px;
}

.fb-catalog__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}

/* ---- the filter panel ---- */

.fb-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-bottom: var(--space-3);
}

.fb-filters__title {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--text-body);
	color: var(--text-primary);
}

.fb-filters__clear {
	font-size: var(--text-caption);
	color: var(--text-muted);
	text-decoration: none;
	margin-left: auto;
}

.fb-filters__clear:hover { color: var(--text-primary); text-decoration: underline; }

/* Only meaningful once the panel is a sheet. */
.fb-filters__close,
.fb-filters__done { display: none; }

/* ---- one facet ---- */

.fb-facet {
	border-bottom: var(--border-width) solid var(--border-subtle);
	padding-block: var(--space-4);
}

.fb-facet__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 32px;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	font-weight: var(--fw-semibold);
	color: var(--text-primary);

	/* Suppress the native disclosure triangle in every engine. */
	list-style: none;
}

.fb-facet__summary::-webkit-details-marker { display: none; }
.fb-facet__summary::marker { content: ""; }
.fb-facet__summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.fb-facet__chevron {
	color: var(--steel-500);
	transition: transform var(--dur-fast) var(--ease-out);
}

.fb-facet[open] .fb-facet__chevron { transform: rotate(180deg); }

.fb-facet__list {
	list-style: none;
	margin: var(--space-2) 0 0;
	padding: 0;
}

.fb-facet__list li { margin: 0; }

/* ---- the overflow disclosure on a long facet (audit M-9) ---- */

/*
 * Brand brings several hundred terms after the product import, which is unusable as a flat list.
 * The overflow is a nested <details> so it stays real, crawlable markup and opens with no
 * JavaScript — the same reasoning as the facet groups themselves.
 */
.fb-facet__more { margin-top: var(--space-2); }

.fb-facet__more-summary {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: var(--text-caption);
	font-weight: var(--fw-semibold);
	color: var(--brand-700);
	text-decoration: underline;
	text-underline-offset: 2px;
	list-style: none;
}

.fb-facet__more-summary::-webkit-details-marker { display: none; }
.fb-facet__more-summary::marker { content: ""; }
.fb-facet__more-summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.fb-facet__more[open] .fb-facet__more-summary { margin-bottom: var(--space-1); }

/* ---- a checkbox that is really a link ---- */

/*
 * Rendered as an anchor, not an input, because ticking a facet navigates. It is drawn as a
 * checkbox because that is what the control means to a buyer, and it is how the design kit draws
 * it. `aria-current` carries the checked state to assistive tech.
 *
 * Two classes on these rules: the theme and WooCommerce both style bare links inside the
 * catalogue, and either would recolour the row.
 */
.fb-filters .fb-check {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--tap-min);
	font-size: var(--text-body-sm);
	color: var(--text-primary);
	text-decoration: none;
	cursor: pointer;
}

.fb-filters .fb-check:hover { color: var(--text-primary); text-decoration: none; }
.fb-filters .fb-check:hover .fb-check__label { text-decoration: underline; }

.fb-filters .fb-check:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-sm);
}

.fb-check__box {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: var(--border-width-strong) solid var(--border-strong);
	border-radius: var(--radius-sm);
	background: var(--surface-card);
	transition: var(--transition-control);
}

.fb-check.is-checked .fb-check__box {
	border-color: var(--fb-ink);
	background: var(--fb-ink);
	color: var(--fb-green);
}

.fb-check__label { flex: 1; }

.fb-check__count {
	font-size: var(--text-caption);
	color: var(--text-muted);
}

/* ---- active filter chips ---- */

.fb-active-filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.fb-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	height: 28px;
	padding-inline: var(--space-3);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-pill);
	background: var(--surface-card);
	color: var(--text-secondary);
	font-size: var(--text-body-sm);
	font-weight: var(--fw-medium);
	text-decoration: none;
	transition: var(--transition-control);
}

.fb-active-filters .fb-tag--active {
	border-color: var(--fb-ink);
	background: var(--fb-ink);
	color: var(--text-inverse);
}

.fb-active-filters .fb-tag--active:hover {
	background: var(--steel-700);
	border-color: var(--steel-700);
	color: var(--text-inverse);
	text-decoration: none;
}

.fb-active-filters__clear {
	font-size: var(--text-caption);
	color: var(--text-muted);
	text-decoration: none;
}

.fb-active-filters__clear:hover { color: var(--text-primary); text-decoration: underline; }

/* ---- empty state ---- */

.fb-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-3);
	padding: var(--space-16) var(--space-6);
	border: var(--border-width) dashed var(--border-default);
	border-radius: var(--radius-lg);
	background: var(--surface-subtle);
}

.fb-empty .fb-icon { color: var(--steel-400); }

.fb-empty__title {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: var(--fw-bold);
	margin: 0;
}

.fb-empty__text {
	color: var(--text-secondary);
	max-width: 44ch;
	margin: 0;
}

.fb-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	margin-top: var(--space-2);
}

/* ---- the mobile sheet ---- */

@media (max-width: 860px) {
	.fb-catalog { grid-template-columns: minmax(0, 1fr); gap: 0; }

	/* The sidebar stops being a column and becomes a sheet over the results. */
	.fb-catalog__aside { position: static; }

	.fb-filters {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 80;
		max-height: 82vh;
		overflow-y: auto;
		padding: var(--space-5);
		background: var(--surface-card);
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		box-shadow: var(--shadow-lg);

		/* Off-canvas rather than display:none, so the panel slides rather than blinks. */
		transform: translateY(100%);
		visibility: hidden;
		transition: transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
	}

	.fb-filters.is-open {
		transform: translateY(0);
		visibility: visible;
	}

	.fb-filters__head {
		position: sticky;
		top: calc(var(--space-5) * -1);
		z-index: 1;
		background: var(--surface-card);
		padding-block: var(--space-2) var(--space-3);
	}

	.fb-filters__close { display: inline-flex; }

	.fb-filters__done {
		display: block;
		position: sticky;
		bottom: calc(var(--space-5) * -1);
		background: var(--surface-card);
		padding-block: var(--space-4);
	}

	.fb-filters__done .fb-btn { width: 100%; }

	/* Injected by site.js, so it only exists when it can actually be dismissed. */
	.fb-filters-scrim {
		position: fixed;
		inset: 0;
		z-index: 79;
		background: rgba(44, 46, 53, 0.55);
		border: 0;
		padding: 0;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--dur-base) linear, visibility var(--dur-base);
	}

	.fb-filters-scrim.is-open { opacity: 1; visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
	.fb-filters { transition: none; }
}

/* Above the sheet breakpoint the scrim has no job. */
@media (min-width: 861px) {
	.fb-filters-scrim { display: none; }
}