/**
 * Shop-page availability shortlist. Loaded only on shop and product taxonomy
 * archives (see SPB_Catalogue_Filter::enqueue), and scoped entirely under
 * .spb-availability-filter so it cannot reach into a theme's own markup.
 *
 * Four chips, each a plain link. Retail routes carry the retail accent, trade
 * routes the B2B accent, so the two halves of the business read apart at a
 * glance without a heading explaining them.
 */
.spb-availability-filter {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	width: 100%;
	margin: 0 0 20px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--spb-color-swatch-border, #dceaf7);
}
.spb-af-title {
	font: 600 11px/1 var(--spb-font-body, inherit);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--spb-color-label, #4f5d73);
}
.spb-af-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}
/* Rectangular with a small radius, and the label centred. The chips carried a
 * leading accent dot before: with the dot and the label sharing a
 * left-aligned row, the text sat off-centre in chips of differing widths and
 * the row read as ragged. Colour alone already separates retail from trade,
 * so the dot went and the label is now centred in its own box. */
.spb-af-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--spb-af-chip-height, 36px);
	padding: 0 16px;
	border: 1px solid var(--spb-color-swatch-border, #dceaf7);
	border-radius: var(--spb-af-chip-radius, 7px);
	background: #fff;
	font: 600 12.5px/1.2 var(--spb-font-body, inherit);
	color: var(--spb-color-heading, #0b1736);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.spb-af-retail-buy,
.spb-af-retail-preorder {
	color: var(--spb-retail-accent, #0147ca);
}
.spb-af-b2b-buy,
.spb-af-b2b-preorder {
	color: var(--spb-b2b-accent, #0f766e);
}
/* Pre-order routes read as the quieter of each pair — a dashed edge says
 * "available, but not today" without needing a second colour. */
.spb-af-retail-preorder,
.spb-af-b2b-preorder {
	border-style: dashed;
}
.spb-af-chip:hover {
	border-color: currentColor;
	background: color-mix(in srgb, currentColor 7%, #fff);
}
.spb-af-chip.is-on {
	border-style: solid;
	border-color: currentColor;
	background: color-mix(in srgb, currentColor 12%, #fff);
	box-shadow: inset 0 0 0 1px currentColor;
}
.spb-af-chip:focus-visible {
	outline: 2px solid var(--spb-color-focus-outline, #0878e8);
	outline-offset: 2px;
}
.spb-af-clear {
	font: 500 12px/1 var(--spb-font-body, inherit);
	color: var(--spb-color-muted, #64748b);
	text-decoration: underline;
	text-underline-offset: 3px;
	align-self: center;
}
.spb-af-clear:hover {
	color: var(--spb-color-heading, #0b1736);
}

@media ( max-width: 600px ) {
	.spb-availability-filter {
		gap: 8px 10px;
	}
	/* The chip row scrolls rather than stacking into four lines and pushing
	 * the products themselves below the fold. */
	.spb-af-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
	}
	.spb-af-chips::-webkit-scrollbar {
		display: none;
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.spb-af-chip {
		transition-duration: .01ms !important;
	}
}

/**
 * Route badges on a product card. Same shape language as the filter chips
 * above the grid — rectangular, small radius, label centred — so a shopper
 * reads the chip they clicked and the badge on the card as the same thing.
 *
 * These are labels, not controls: no hover, no pointer, and they never take a
 * click away from the card's own link.
 */
.spb-card-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0;
	pointer-events: none;
}
.spb-card-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: calc( var(--spb-af-chip-height, 36px) - 8px );
	padding: 0 10px;
	border: 1px solid currentColor;
	border-radius: var(--spb-af-chip-radius, 7px);
	background: color-mix(in srgb, currentColor 9%, #fff);
	font: 600 11.5px/1.2 var(--spb-font-body, inherit);
	text-align: center;
	white-space: nowrap;
}
/* Retail routes carry the retail accent, trade routes the B2B one — the same
 * split the filter uses, so the colour means the same thing in both places. */
.spb-card-badge.spb-af-retail-buy,
.spb-card-badge.spb-af-retail-preorder {
	color: var(--spb-retail-accent, #0b6fa4);
}
.spb-card-badge.spb-af-b2b-buy,
.spb-card-badge.spb-af-b2b-preorder {
	color: var(--spb-b2b-accent, #0a3f5c);
}
/* Pre-order reads as the quieter of each pair, same dashed edge as its chip. */
.spb-card-badge.spb-af-retail-preorder,
.spb-card-badge.spb-af-b2b-preorder {
	border-style: dashed;
}