/**
 * Bay State — small CSS layer.
 *
 * theme.json carries the design tokens (palette, type scale, spacing, shadows)
 * and exposes them as CSS custom properties under --wp--preset--*. This file
 * only holds what theme.json can't express today: skip link, focus rings,
 * sticky mobile CTA, top-bar layout, site header/footer chrome, holding-page
 * hero, 404, and accessibility utilities. Keep this file lean — anything that
 * could be a token belongs in theme.json instead.
 */

/* ============================================================
   Modern CSS reset (Josh Comeau / Andy Bell-style baseline). Must
   come first so every later rule operates on a consistent foundation.
   The single most-load-bearing line is `font: inherit` on form
   controls — browsers default <input>/<select>/<textarea>/<button>
   to ~13px platform fonts that ignore the body font-family entirely,
   which is the root cause of most form-styling oddities.
   ============================================================ */

/* 1. Intuitive box-sizing everywhere. */
*, *::before, *::after { box-sizing: border-box; }

/* 2. Drop UA margin so vertical rhythm is controlled deliberately
      via theme.json spacing tokens + block-gap. <dialog> is excluded
      because the cart drawer + facets dialogs need their own margins. */
*:not(dialog) { margin: 0; }

/* 3. Allow transitions to keyword sizes (auto, max-content) where the
      user hasn't requested reduced motion. Modern CSS, falls back
      gracefully. */
@media (prefers-reduced-motion: no-preference) {
	html { interpolate-size: allow-keywords; }
}

/* 4 + 5. Comfortable default body rhythm + smoother type rendering. */
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* Belt-and-suspenders against horizontal sliding on mobile. `overflow-x: clip`
   stops any rogue wide element from pushing the page sideways without
   creating a scroll container (so position:sticky still works inside).
   Was happening on /request-a-quote/ and similar form pages. */
html { overflow-x: clip; }

/* 6. Sane media defaults so images don't blow out their containers
      and don't sit on a baseline anymore. */
img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}

/* 7. Form controls inherit body typography. THIS is the big one — fixes
      the small/wrong-font input issue across the board. */
input, button, textarea, select { font: inherit; }

/* 8. Avoid horizontal overflow from absurdly long words in headings/paras. */
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* 9. Modern wrap algorithms — better line breaks at the cost of a bit of
      perf. Caniuse coverage is good (Chromium, Safari, Firefox). */
p { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

/* ============================================================
   Page horizontal padding — scales with viewport, kept separate
   from --wp--preset--spacing--40 so block-gap and other vertical
   spacings stay tight.
   ============================================================ */
:root {
	--bsp-px: var(--wp--preset--spacing--40); /* 1rem on small screens */
}
@media (min-width: 768px) {
	:root { --bsp-px: 1.5rem; }
}
@media (min-width: 1080px) {
	:root { --bsp-px: 2rem; }
}
@media (min-width: 1440px) {
	:root { --bsp-px: 2.5rem; }
}

/* ============================================================
   Skip link (WCAG 2.4.1 Bypass Blocks)
   ============================================================ */
.skip-link {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	left: 0;
	padding: 0.75rem 1rem;
	position: absolute;
	text-decoration: none;
	top: -100px;
	transition: top 120ms ease-out;
	z-index: 9999;
}
.skip-link:focus,
.skip-link:focus-visible {
	top: 0;
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: -3px;
}

/* ============================================================
   Visually hidden, available to assistive technology
   ============================================================ */
.sr-only {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ============================================================
   Focus ring (keyboard only, applied universally)
   ============================================================ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ============================================================
   Top bar — utility row (phone | address | hours) + announcement slot
   Neutral chrome; brand color reserved for action.
   ============================================================ */
.bsp-top-bar {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink-soft);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
}
.bsp-top-bar__announcement {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
}
.bsp-top-bar__announcement-inner {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: 0.5rem var(--bsp-px);
	text-align: center;
}
.bsp-top-bar__announcement-label {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	padding: 0.125rem 0.5rem;
	text-transform: uppercase;
}
.bsp-top-bar__announcement-body { font-size: var(--wp--preset--font-size--xs); }
.bsp-top-bar__announcement a { color: inherit; text-decoration: underline; }
.bsp-top-bar__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	justify-content: space-between;
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: 0.5rem var(--bsp-px);
}
.bsp-top-bar a {
	color: inherit;
	text-decoration: none;
}
.bsp-top-bar a:hover,
.bsp-top-bar a:focus-visible {
	color: var(--wp--preset--color--primary);
}
.bsp-top-bar__group {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}
.bsp-top-bar__divider {
	color: var(--wp--preset--color--ink-muted);
}
.bsp-top-bar__phone {
	font-weight: 700;
}
.bsp-top-bar__account {
	font-weight: 600;
}
.bsp-top-bar__account:hover,
.bsp-top-bar__account:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}
@media (max-width: 640px) {
	.bsp-top-bar__group--meta { display: none; }
	/* Account links live in the burger menu on mobile — keep the top bar
	   tight with just the phone CTA. */
	.bsp-top-bar__account,
	.bsp-top-bar__divider--account { display: none; }
	.bsp-top-bar__group .bsp-top-bar__divider:first-of-type { display: none; }
	.bsp-top-bar__inner { justify-content: center; }
}

/* ============================================================
   Site header — logo · search · account · CTA
   ============================================================ */
.bsp-site-header {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	position: relative;
}
.bsp-site-header__inner {
	align-items: center;
	display: grid;
	grid-template-columns: auto 1fr auto auto auto;
	gap: 1rem;
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: 1rem var(--bsp-px);
}
.bsp-site-header__hamburger,
.bsp-site-header__search-icon {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: none;
	min-height: 44px;
	min-width: 44px;
	padding: 0.625rem;
}
.bsp-site-header__hamburger:hover,
.bsp-site-header__search-icon:hover {
	color: var(--wp--preset--color--primary);
}
.bsp-site-header__brand {
	display: inline-flex;
	min-width: 0;
}
.bsp-site-header__cta {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
	display: inline-block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0.65rem 1.1rem;
	text-decoration: none;
	white-space: nowrap;
}
.bsp-site-header__cta:hover,
.bsp-site-header__cta:focus-visible {
	background: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--accent-ink);
}

/* Mobile layout: hamburger | logo | search-icon | account | cart-pill.
   Each side icon is a fixed 44px hit target; the logo column flexes and
   centers its child so the brand reads as the visual anchor of the bar. */
@media (max-width: 960px) {
	.bsp-site-header__inner {
		grid-template-columns: 44px 1fr 44px 44px auto;
		gap: 0.25rem;
		padding: 0.75rem var(--bsp-px);
	}
	.bsp-site-header__hamburger,
	.bsp-site-header__search-icon {
		display: inline-flex;
		min-width: 44px;
		padding: 0.5rem;
	}
	.bsp-site-header__brand {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.bsp-site-header__cta {
		display: none;
	}
	/* The cart pill collapses to icon-only on mobile (label hidden at line
	   ~4330); ensure the account control stays compact too so all five
	   header items fit at 320px. */
	.bsp-header-account {
		min-width: 0;
	}
}

.bsp-logo {
	display: inline-block;
	line-height: 0;
	text-decoration: none;
}
.bsp-logo {
	margin-right: 1.5rem;
}
.bsp-logo__svg {
	display: block;
	height: auto;
	max-height: 54px;
	width: auto;
}
@media (max-width: 640px) {
	.bsp-logo {
		margin-right: 0;
	}
	.bsp-logo__svg {
		max-height: 38px;
	}
}

/* ============================================================
   Header search (persistent typeahead)
   ============================================================ */
.bsp-header-search {
	min-width: 0;
	position: relative;
}
.bsp-header-search__form {
	align-items: center;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule-strong);
	display: flex;
	gap: 0.5rem;
	height: 44px;
	padding: 0 0.625rem;
	position: relative;
}
.bsp-header-search__form:focus-within {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--ink);
	box-shadow: 0 0 0 3px var(--wp--preset--color--primary-soft);
}
.bsp-header-search__icon {
	color: var(--wp--preset--color--ink-muted);
	flex-shrink: 0;
}
.bsp-header-search__form input[type="search"] {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--ink);
	flex: 1;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	min-width: 0;
	outline: 0;
	padding: 0;
}
.bsp-header-search__form input[type="search"]::-webkit-search-cancel-button,
.bsp-header-search__form input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
	display: none;
}
.bsp-header-search__clear,
.bsp-header-search__close {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--ink-muted);
	cursor: pointer;
	display: inline-flex;
	flex-shrink: 0;
	padding: 0.25rem;
}
.bsp-header-search__clear:hover,
.bsp-header-search__close:hover {
	color: var(--wp--preset--color--ink);
}
.bsp-header-search__close {
	display: none;
}
.bsp-header-search__panel {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	box-shadow: var(--wp--preset--shadow--lg);
	left: 0;
	max-height: min(70vh, 540px);
	overflow-y: auto;
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	/* Sit above the mega menu (z-index: 50) so the typeahead never gets
	   covered by the menu bar that lives below the header. */
	z-index: 60;
}
.bsp-header-search__results-list {
	list-style: none;
	margin: 0;
	padding: 0.25rem 0;
}
.bsp-header-search__hit {
	color: var(--wp--preset--color--ink);
	display: grid;
	gap: 0.125rem;
	padding: 0.625rem 1rem;
	text-decoration: none;
}
.bsp-header-search__hit:hover,
.bsp-header-search__hit:focus-visible,
[role="option"].is-active .bsp-header-search__hit,
[role="option"][aria-selected="true"] .bsp-header-search__hit {
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--ink);
}
.bsp-header-search__hit-meta {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.bsp-header-search__hit-title {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 1.35;
}
.bsp-header-search__hit-sku {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
}
.bsp-header-search__sku {
	font-family: var(--wp--preset--font-family--mono);
}
.bsp-header-search__see-all {
	border-top: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--primary);
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	padding: 0.75rem 1rem;
	text-decoration: none;
}
.bsp-header-search__see-all:hover,
.bsp-header-search__see-all:focus-visible {
	background: var(--wp--preset--color--primary-soft);
}
.bsp-header-search__empty {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
	padding: 1rem;
}
.bsp-header-search__empty a {
	color: var(--wp--preset--color--primary);
}

/* Mobile: search hidden by default, opens as drawer below header */
@media (max-width: 960px) {
	.bsp-header-search {
		background: var(--wp--preset--color--surface);
		border-bottom: 1px solid var(--wp--preset--color--rule);
		display: none;
		grid-column: 1 / -1;
		padding: 0.75rem var(--bsp-px);
	}
	.bsp-header-search[data-state="open"] {
		display: block;
	}
	.bsp-header-search__close {
		display: inline-flex;
	}
	.bsp-header-search__panel {
		left: var(--bsp-px);
		right: var(--bsp-px);
		top: calc(100% - 0.75rem + 4px);
	}
}

/* ============================================================
   Header account dropdown
   ============================================================ */
.bsp-header-account {
	position: relative;
}
.bsp-header-account__toggle {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	gap: 0.375rem;
	min-height: 44px;
	padding: 0.625rem 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.bsp-header-account__toggle:hover,
.bsp-header-account__toggle:focus-visible {
	color: var(--wp--preset--color--primary);
}
.bsp-header-account__name {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0;
	max-width: 8ch;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: none;
	white-space: nowrap;
}
@media (max-width: 480px) {
	.bsp-header-account__name { display: none; }
}
.bsp-header-account__panel {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	box-shadow: var(--wp--preset--shadow--lg);
	min-width: 240px;
	padding: 0.75rem 0;
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	/* Sit above the mega menu (z-index: 50) so the dropdown is never
	   covered by the menu bar that sits below the header. */
	z-index: 60;
}
.bsp-header-account__hello {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.08em;
	margin: 0 0 0.5rem;
	padding: 0 1rem;
	text-transform: uppercase;
}
.bsp-header-account__hello strong {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}
.bsp-header-account__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsp-header-account__list a {
	color: var(--wp--preset--color--ink);
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	padding: 0.5rem 1rem;
	text-decoration: none;
}
.bsp-header-account__list a:hover,
.bsp-header-account__list a:focus-visible {
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
}
.bsp-header-account__sep {
	border-top: 1px solid var(--wp--preset--color--rule);
	margin: 0.5rem 0;
}
.bsp-header-account__sep span { display: none; }
.bsp-header-account__signout {
	border-top: 1px solid var(--wp--preset--color--rule);
	margin-top: 0.5rem;
	padding-top: 0.5rem;
}
.bsp-header-account__signout a {
	color: var(--wp--preset--color--ink-soft);
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.5rem 1rem;
	text-decoration: none;
}
.bsp-header-account__signout a:hover,
.bsp-header-account__signout a:focus-visible {
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
}

/* ============================================================
   Category strip (persistent below header)
   ============================================================ */
.bsp-category-strip {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.bsp-category-strip::-webkit-scrollbar { display: none; }
.bsp-category-strip__list {
	display: flex;
	gap: 0;
	list-style: none;
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: 0 var(--bsp-px);
}
.bsp-category-strip__link {
	color: var(--wp--preset--color--ink-soft);
	display: inline-block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 0.875rem 0.875rem;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}
.bsp-category-strip__link:hover,
.bsp-category-strip__link:focus-visible {
	color: var(--wp--preset--color--ink);
}
.bsp-category-strip__link.is-active {
	color: var(--wp--preset--color--ink);
}
.bsp-category-strip__link.is-active::after {
	background: var(--wp--preset--color--accent);
	bottom: 0;
	content: "";
	height: 2px;
	left: 0.875rem;
	position: absolute;
	right: 0.875rem;
}
.bsp-category-strip__item--brands {
	margin-left: auto;
}
@media (max-width: 640px) {
	.bsp-category-strip__list {
		padding: 0 var(--bsp-px);
	}
	.bsp-category-strip__link {
		padding: 0.75rem 0.625rem;
	}
}

/* ============================================================
   Buttons (custom — supplements WP core button element styles)
   ============================================================ */
.bsp-button {
	background: var(--wp--preset--color--accent);
	border: 0;
	color: var(--wp--preset--color--accent-ink);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.005em;
	gap: 0.5rem;
	padding: 0.7rem 1.4rem;
	text-decoration: none;
	transition: background-color 120ms ease-out;
	min-height: 44px;
}
.bsp-button:hover,
.bsp-button:focus-visible {
	background: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--accent-ink);
	text-decoration: none;
}
.bsp-button--primary {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-ink);
}
.bsp-button--primary:hover,
.bsp-button--primary:focus-visible {
	background: var(--wp--preset--color--primary-deep);
	color: var(--wp--preset--color--primary-ink);
}
.bsp-button--ghost {
	background: transparent;
	border: 2px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	padding: calc(0.95rem - 2px) calc(1.75rem - 2px);
}
.bsp-button--ghost:hover,
.bsp-button--ghost:focus-visible {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
}
.bsp-button--small {
	font-size: var(--wp--preset--font-size--sm);
	min-height: 40px;
	padding: 0.55rem 1.1rem;
}

/* ============================================================
   Mobile sticky CTA (per Matt's brief)
   ============================================================ */
/* Was: fixed-position floating CTA at the bottom of mobile viewports.
   Hidden globally now — Request a Quote already lives in the burger
   menu's quick-actions strip and the cart pill is in the header, so the
   sticky bar is redundant chrome that crowded the screen. Keep the
   selector available so any pages that still reference the class don't
   visually regress. */
.bsp-sticky-cta { display: none !important; }

/* ============================================================
   Holding-page hero (Phase 0)
   ============================================================ */
.bsp-holding-hero {
	align-items: center;
	display: flex;
	min-height: calc(100vh - 8rem);
	padding-block: clamp(3rem, 8vw, 6rem);
}
.bsp-holding-hero__inner {
	margin: 0 auto;
	max-width: 720px;
	padding: 0 var(--bsp-px);
	width: 100%;
}
.bsp-holding-hero__eyebrow {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	margin: 0 0 1.5rem;
	text-transform: uppercase;
}
.bsp-holding-hero__title {
	margin: 0 0 1.25rem;
}
.bsp-holding-hero__lede {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.55;
	margin: 0 0 2.5rem;
	max-width: 600px;
}
.bsp-holding-hero__details {
	border-top: 1px solid var(--wp--preset--color--rule);
	display: grid;
	gap: 1.5rem 3rem;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	margin: 0 0 2.5rem;
	padding-top: 1.5rem;
}
.bsp-holding-hero__details dt {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 0 0 0.25rem;
	text-transform: uppercase;
}
.bsp-holding-hero__details dd {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	margin: 0;
}
.bsp-holding-hero__details dd a {
	color: inherit;
	text-decoration: none;
}
.bsp-holding-hero__details dd a:hover,
.bsp-holding-hero__details dd a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.bsp-holding-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* ============================================================
   Site footer
   ============================================================ */
.bsp-site-footer {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
	padding-block: clamp(2rem, 5vw, 4rem);
}
.bsp-site-footer__inner {
	display: grid;
	gap: 2.5rem;
	/* min(100%, 220px) collapses the floor to whatever the container can
	   actually fit — prevents overflow on <320px viewports while still
	   reflowing to multi-column whenever there's room. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: 0 var(--bsp-px);
}
.bsp-site-footer__col-title {
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}
.bsp-site-footer__brand {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 0.75rem;
}
.bsp-site-footer__tag {
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
	margin: 0;
}
.bsp-site-footer p,
.bsp-site-footer address {
	font-style: normal;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.65;
	margin: 0 0 0.5rem;
}
.bsp-site-footer a {
	color: var(--wp--preset--color--surface);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.bsp-site-footer a:hover,
.bsp-site-footer a:focus-visible {
	color: var(--wp--preset--color--primary-soft);
}
.bsp-site-footer__hours {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	max-width: 280px;
}
.bsp-site-footer__hours-row {
	align-items: baseline;
	color: rgba(255, 255, 255, 0.72);
	display: grid;
	font-size: var(--wp--preset--font-size--sm);
	gap: 1rem;
	grid-template-columns: 1fr auto;
	line-height: 1.4;
}
.bsp-site-footer__hours-row dt {
	font-weight: 500;
	margin: 0;
}
.bsp-site-footer__hours-row dd {
	font-variant-numeric: tabular-nums;
	margin: 0;
	text-align: right;
}
.bsp-site-footer__hours-row.is-today {
	color: var(--wp--preset--color--surface);
}
.bsp-site-footer__hours-row.is-today dt,
.bsp-site-footer__hours-row.is-today dd {
	font-weight: 700;
}
.bsp-site-footer__col--hours {
	min-width: 240px;
}
.bsp-site-footer__col--brand p {
	max-width: 280px;
}
.bsp-site-footer__phone {
	color: var(--wp--preset--color--surface) !important;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	letter-spacing: -0.005em;
	text-decoration: none !important;
}
.bsp-site-footer__phone:hover,
.bsp-site-footer__phone:focus-visible {
	color: var(--wp--preset--color--accent-soft) !important;
}
.bsp-site-footer__legal {
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.5);
	column-gap: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--xs);
	margin: 2.5rem auto 0;
	max-width: var(--wp--style--global--wide-size);
	padding: 1.5rem var(--bsp-px) 0;
	row-gap: 0.75rem;
}
.bsp-site-footer__legal p {
	margin: 0;
}
.bsp-site-footer__socials {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	margin-left: auto;
	padding: 0;
}
.bsp-site-footer__social {
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.7);
	display: inline-flex;
	height: 36px;
	justify-content: center;
	transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out, transform 120ms ease-out;
	width: 36px;
}
.bsp-site-footer__social svg {
	height: 18px;
	width: 18px;
}
.bsp-site-footer__social:hover,
.bsp-site-footer__social:focus-visible {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
	transform: translateY(-1px);
}

/* ============================================================
   Generic page + main shell
   ============================================================ */
/* WP block themes apply margin-block-start to every direct child of
   wp-site-blocks via the .is-layout-flow rules. We render top-bar,
   header, category-strip, then main as siblings — main picks up that
   auto-margin and visually "drops" below the category strip. We
   manage gaps explicitly via section padding instead. */
.wp-site-blocks > .bsp-main,
.wp-site-blocks > * {
	margin-block-start: 0;
}
.bsp-main {
	/* Safety net for horizontal overflow — clip (rather than hidden) so any
	   position:sticky descendants keep working. Catches negative-margin
	   bleeds, oversized embeds, accidental width:100vw, or long unbreakable
	   strings (long SKU numbers in cards) without each instance having to
	   self-defend. The hidden fallback covers Safari < 16 etc. */
	overflow-x: hidden;
	overflow-x: clip;
}
.bsp-main:focus {
	outline: none;
}
.bsp-page__inner {
	margin: 0 auto;
	max-width: var(--wp--style--global--content-size);
	padding: clamp(1.5rem, 4vw, 3rem) var(--bsp-px);
}

/* ============================================================
   404
   ============================================================ */
.bsp-error {
	align-items: center;
	display: flex;
	min-height: calc(100vh - 12rem);
	padding-block: clamp(3rem, 8vw, 6rem);
}
.bsp-error__inner {
	margin: 0 auto;
	max-width: 640px;
	padding: 0 var(--bsp-px);
}
.bsp-error__eyebrow {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	margin: 0 0 0.75rem;
}
.bsp-error__title {
	margin: 0 0 1rem;
}
.bsp-error__lede {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.55;
	margin: 0 0 2.5rem;
}
.bsp-error__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* ============================================================
   Style guide (live design-system spec at /style-guide)
   ============================================================ */
.bsp-styleguide {
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: clamp(1.5rem, 4vw, 3rem) var(--bsp-px);
}
.bsp-styleguide__intro {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	margin-bottom: 3rem;
	padding-bottom: 2rem;
}
.bsp-styleguide__intro h1 {
	margin-bottom: 0.5rem;
}
.bsp-styleguide__intro p {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--md);
	margin: 0;
	max-width: 600px;
}
.bsp-styleguide__section {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding: 3rem 0;
}
.bsp-styleguide__section:first-of-type {
	border-top: 0;
	padding-top: 0;
}
.bsp-styleguide__section h2 {
	margin: 0 0 1.5rem;
}
.bsp-styleguide__section-lede {
	color: var(--wp--preset--color--ink-soft);
	margin: -1rem 0 2rem;
	max-width: 640px;
}

/* Color swatches */
.bsp-swatch-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsp-swatch {
	border: 1px solid var(--wp--preset--color--rule);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.bsp-swatch__chip {
	aspect-ratio: 16 / 9;
	width: 100%;
}
.bsp-swatch__meta {
	background: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	padding: 0.625rem 0.75rem;
}
.bsp-swatch__name {
	color: var(--wp--preset--color--ink);
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin-bottom: 0.125rem;
}
.bsp-swatch__hex {
	color: var(--wp--preset--color--ink-muted);
}

/* Type scale samples */
.bsp-type-stack {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}
.bsp-type-stack__row {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding-bottom: 1.25rem;
}
.bsp-type-stack__sample {
	color: var(--wp--preset--color--ink);
	margin: 0;
}
.bsp-type-stack__meta {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	margin: 0.25rem 0 0;
}

/* Spacing scale samples */
.bsp-space-stack {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
}
.bsp-space-stack__row {
	align-items: center;
	display: grid;
	gap: 1rem;
	grid-template-columns: 80px 1fr;
}
.bsp-space-stack__bar {
	background: var(--wp--preset--color--primary);
	height: 16px;
}
.bsp-space-stack__label {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
}

/* Shadow swatches */
.bsp-shadow-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	list-style: none;
	margin: 0;
	padding: 1.25rem 0;
}
.bsp-shadow {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	height: 120px;
	padding: 0.75rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--ink-muted);
}

/* Button row */
.bsp-button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* Form preview */
.bsp-form-demo {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	display: grid;
	gap: 1.25rem;
	max-width: 480px;
	padding: 1.5rem;
}
.bsp-form-demo label {
	color: var(--wp--preset--color--ink);
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin-bottom: 0.375rem;
}
.bsp-form-demo input[type="text"],
.bsp-form-demo input[type="email"],
.bsp-form-demo input[type="tel"],
.bsp-form-demo textarea {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule-strong);
	border-radius: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--base);
	padding: 0.65rem 0.85rem;
	width: 100%;
}
.bsp-form-demo input:focus,
.bsp-form-demo textarea:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 3px solid var(--wp--preset--color--primary-soft);
	outline-offset: 0;
}

/* ============================================================
   Search page
   ============================================================ */
.bsp-search {
	padding-block: clamp(2rem, 5vw, 4rem);
}
.bsp-search__inner {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: 0 var(--bsp-px);
}
@media (min-width: 960px) {
	.bsp-search__inner {
		grid-template-columns: 220px 1fr;
		grid-template-areas:
			"header header"
			"form form"
			"facets chips"
			"facets results"
			"facets empty";
	}
	.bsp-search__header { grid-area: header; }
	.bsp-search__form { grid-area: form; }
	.bsp-search__facets { grid-area: facets; align-self: start; position: sticky; top: 1rem; }
	.bsp-search__chips { grid-area: chips; }
	.bsp-search__results { grid-area: results; }
	.bsp-search__empty { grid-area: empty; }
}
.bsp-search__title { margin: 0 0 0.5rem; }
.bsp-search__lede {
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 1.5rem;
	max-width: 540px;
}
.bsp-search__form {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding-bottom: 1rem;
}
.bsp-search__form input[type="search"] {
	background: var(--wp--preset--color--surface);
	border: 2px solid var(--wp--preset--color--rule-strong);
	border-radius: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--md);
	padding: 0.85rem 1rem;
	width: 100%;
}
.bsp-search__form input[type="search"]:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 3px solid var(--wp--preset--color--primary-soft);
	outline-offset: 0;
}
.bsp-search__status {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	margin: 0.5rem 0 0;
	min-height: 1em;
}
.bsp-search__results {
	display: grid;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsp-search-result {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	padding: 1.25rem;
}
.bsp-search-result__header {
	align-items: center;
	color: var(--wp--preset--color--ink-muted);
	display: flex;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	gap: 0.75rem;
	letter-spacing: 0.08em;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
}
.bsp-search-result__brand {
	color: var(--wp--preset--color--accent);
}
.bsp-search-result__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0 0 0.75rem;
}
.bsp-search-result__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.bsp-search-result__title a:hover,
.bsp-search-result__title a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}
.bsp-search-result__meta {
	color: var(--wp--preset--color--ink-soft);
	display: grid;
	font-size: var(--wp--preset--font-size--sm);
	gap: 0.25rem 0.75rem;
	grid-template-columns: auto 1fr;
	margin: 0 0 1rem;
}
.bsp-search-result__meta dt {
	color: var(--wp--preset--color--ink-muted);
	font-weight: 600;
}
.bsp-search-result__meta dd {
	margin: 0;
}
.bsp-search-result__meta code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.95em;
}
.bsp-search-result__stock--in {
	color: var(--wp--preset--color--success);
	font-weight: 600;
}
.bsp-search-result__stock--out {
	color: var(--wp--preset--color--ink-muted);
}
.bsp-search__facets {
	display: grid;
	gap: 1.5rem;
}
.bsp-search__facet-section[hidden] { display: none; }
.bsp-search__facet-toggle {
	align-items: center;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--wp--preset--font-size--sm);
	gap: 0.5rem;
}
.bsp-search__facet-toggle input { accent-color: var(--wp--preset--color--primary); }
.bsp-search__chips {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}
.bsp-search__chips[hidden] { display: none; }
.bsp-search__chip {
	align-items: center;
	background: var(--wp--preset--color--primary-soft);
	border: 0;
	border-radius: 999px;
	color: var(--wp--preset--color--primary-deep);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	gap: 0.4rem;
	padding: 0.3rem 0.65rem 0.3rem 0.85rem;
}
.bsp-search__chip:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary-ink); }
.bsp-search__chip-x {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1;
}
.bsp-search__chips-clear {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	margin-left: 0.25rem;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.bsp-search__chips-clear:hover { color: var(--wp--preset--color--primary); }
.bsp-search__facet-title {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}
.bsp-search__facet-list {
	display: grid;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsp-search-facet {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--ink-soft);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.25rem 0;
	text-align: left;
}
.bsp-search-facet:hover {
	color: var(--wp--preset--color--primary);
}
.bsp-search-facet.is-active {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}
.bsp-search-facet span {
	color: var(--wp--preset--color--ink-muted);
}
.bsp-search__empty {
	background: var(--wp--preset--color--primary-soft);
	border-left: 4px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--ink);
	padding: 1rem 1.25rem;
}

/* ============================================================
   Primary nav (desktop) + mobile drawer (gcfg pattern)
   ============================================================ */
.bsp-primary-nav {
	align-items: center;
	display: flex;
}
.bsp-primary-nav__desktop {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsp-primary-nav__desktop a {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}
.bsp-primary-nav__desktop a:hover,
.bsp-primary-nav__desktop a:focus-visible {
	color: var(--wp--preset--color--primary);
}
.bsp-primary-nav__cta-item a {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
	letter-spacing: 0.04em;
	padding: 0.625rem 1.1rem;
}
.bsp-primary-nav__cta-item a:hover,
.bsp-primary-nav__cta-item a:focus-visible {
	background: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--accent-ink);
}
.bsp-primary-nav__hamburger {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: none;
	margin-right: -0.5rem;
	padding: 0.5rem;
}
@media (max-width: 960px) {
	.bsp-primary-nav__desktop { display: none; }
	.bsp-primary-nav__hamburger { display: inline-flex; }
}

/* Mobile drawer */
.bsp-no-scroll { overflow: hidden; }

.bsp-mobile-menu {
	inset: 0;
	pointer-events: none;
	position: fixed;
	visibility: hidden;
	z-index: 100;
}
.bsp-mobile-menu[data-state="open"] {
	pointer-events: auto;
	visibility: visible;
}
.bsp-mobile-menu__backdrop {
	background: rgba(16, 20, 24, 0.5);
	border: 0;
	cursor: pointer;
	inset: 0;
	opacity: 0;
	padding: 0;
	position: absolute;
	transition: opacity 320ms ease-out;
	width: 100%;
}
.bsp-mobile-menu[data-state="open"] .bsp-mobile-menu__backdrop {
	opacity: 1;
}
.bsp-mobile-menu__panel {
	background: var(--wp--preset--color--surface);
	bottom: 0;
	display: flex;
	flex-direction: column;
	max-width: 420px;
	position: absolute;
	right: 0;
	top: 0;
	transform: translateX(100%);
	transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
	width: 100%;
}
.bsp-mobile-menu[data-state="open"] .bsp-mobile-menu__panel {
	transform: translateX(0);
}
.bsp-mobile-menu__header {
	align-items: center;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	display: flex;
	justify-content: space-between;
	padding: 1.25rem clamp(1rem, 5vw, 1.75rem);
	flex-shrink: 0;
}
.bsp-mobile-menu__brand {
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
	font-family: var(--wp--preset--font-family--sans);
	gap: 0.125rem;
	line-height: 1;
	text-decoration: none;
}
.bsp-mobile-menu__brand-name {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 800;
	letter-spacing: -0.02em;
}
.bsp-mobile-menu__brand-tag {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.bsp-mobile-menu__close {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	min-height: 44px;
	min-width: 44px;
	padding: 0.5rem;
}
.bsp-mobile-menu__close:hover {
	color: var(--wp--preset--color--primary);
}
.bsp-mobile-menu__body {
	flex: 1;
	overflow-y: auto;
}
.bsp-mobile-menu__section {
	padding: 1.25rem clamp(1rem, 5vw, 1.75rem);
}
.bsp-mobile-menu__section-label {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	margin: 0 0 1rem;
	text-transform: uppercase;
}
.bsp-mobile-menu__primary {
	display: grid;
	gap: 0.125rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsp-mobile-menu__primary a {
	color: var(--wp--preset--color--ink);
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	letter-spacing: -0.015em;
	min-height: 44px;
	padding: 0.75rem 0;
	text-decoration: none;
	transition: padding-left 240ms ease-out, color 120ms ease-out;
}
.bsp-mobile-menu__primary a:hover,
.bsp-mobile-menu__primary a:focus-visible {
	color: var(--wp--preset--color--primary);
	padding-left: 0.5rem;
}
.bsp-mobile-menu__secondary {
	display: grid;
	gap: 0.125rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsp-mobile-menu__secondary a {
	color: var(--wp--preset--color--ink-soft);
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	padding: 0.4rem 0;
	text-decoration: none;
}
.bsp-mobile-menu__secondary a:hover,
.bsp-mobile-menu__secondary a:focus-visible {
	color: var(--wp--preset--color--primary);
}
.bsp-mobile-menu__rule {
	background: var(--wp--preset--color--rule);
	border: 0;
	height: 1px;
	margin: 0 1.75rem;
}
.bsp-mobile-menu__contact {
	font-style: normal;
}
.bsp-mobile-menu__contact-cta {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
	display: inline-block;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	margin-bottom: 1rem;
	padding: 0.75rem 1.25rem;
	text-decoration: none;
}
.bsp-mobile-menu__contact-cta:hover,
.bsp-mobile-menu__contact-cta:focus-visible {
	background: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--accent-ink);
}
.bsp-mobile-menu__contact-line {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
	margin: 0 0 0.5rem;
}
.bsp-mobile-menu__contact-line--meta {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
	.bsp-mobile-menu__backdrop,
	.bsp-mobile-menu__panel {
		transition: none;
	}
}

/* ============================================================
   Hero (homepage) — neutral, image-led, capped to wide-size container
   ============================================================ */
.bsp-hero {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	overflow: hidden;
	padding: clamp(1.5rem, 3vw, 2.25rem) var(--bsp-px);
	position: relative;
}
.bsp-hero__inner {
	display: grid;
	gap: 2rem;
	position: relative;
}
.bsp-hero__media {
	display: block;
	overflow: hidden;
	position: relative;
}
.bsp-hero__image {
	display: block;
	height: auto;
	width: 100%;
}
@media (min-width: 768px) {
	.bsp-hero {
		padding-block: clamp(1.5rem, 3vw, 2.5rem);
	}
	.bsp-hero__inner {
		align-items: center;
		grid-template-columns: 5fr 7fr;
		gap: 3rem;
		min-height: 380px;
	}
	.bsp-hero__media {
		grid-column: 2;
		grid-row: 1;
		height: 100%;
	}
	.bsp-hero__media .bsp-hero__image {
		height: 100%;
		max-height: 460px;
		object-fit: cover;
		width: 100%;
	}
	.bsp-hero__text {
		grid-column: 1;
		grid-row: 1;
	}
}
.bsp-hero.no-image .bsp-hero__media { display: none; }
@media (min-width: 768px) {
	.bsp-hero.no-image .bsp-hero__inner {
		grid-template-columns: 1fr;
	}
	.bsp-hero.no-image .bsp-hero__text {
		max-width: 760px;
	}
}
.bsp-hero__eyebrow {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	margin: 0 0 1.25rem;
	text-transform: uppercase;
}
.bsp-hero__title {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(1.875rem, 1.3rem + 2.5vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 0 1.25rem;
	max-width: 22ch;
	text-wrap: balance;
}
.bsp-hero__lede {
	color: var(--wp--preset--color--ink-soft);
	font-size: clamp(1rem, 0.9rem + 0.45vw, 1.25rem);
	line-height: 1.55;
	margin: 0 0 2rem;
	max-width: 56ch;
}
.bsp-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* ============================================================
   Section helpers (used by patterns)
   ============================================================ */
.bsp-section-header {
	margin: 0 auto 2rem;
	max-width: 800px;
	text-align: left;
}
.bsp-section-header h2 {
	margin: 0 0 0.5rem;
}
.bsp-section-header__lede {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--md);
	margin: 0;
}
.bsp-section-eyebrow {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

/* ============================================================
   Category grid (homepage)
   ============================================================ */
.bsp-category-grid-section {
	padding-block: clamp(3rem, 6vw, 5rem);
}
.bsp-category-grid-section__inner {
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: 0 var(--bsp-px);
}
.bsp-category-grid {
	display: grid;
	gap: 1rem;
	grid-auto-rows: 1fr; /* equalize row heights across rows, not just within a row */
	grid-template-columns: repeat(2, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsp-category-grid__item { display: flex; height: 100%; }
.bsp-category-grid__item > .bsp-category-grid__link { width: 100%; }
@media (min-width: 640px) {
	.bsp-category-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
	/* 6 categories on one row on desktop, per design — Boilers / Water
	   Heaters / Valves / Pumps / Pipe & Fittings / Fixtures all visible
	   at once. */
	.bsp-category-grid { grid-template-columns: repeat(6, 1fr); }
}
.bsp-category-grid__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bsp-category-grid__link {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
	text-decoration: none;
	transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.bsp-category-grid__media {
	aspect-ratio: 16 / 10;
	background: var(--wp--preset--color--rule);
	margin: 0;
	overflow: hidden;
	width: 100%;
}
.bsp-category-grid__media img,
.bsp-category-grid__img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 320ms ease-out;
	width: 100%;
}
.bsp-category-grid__link:hover .bsp-category-grid__media img,
.bsp-category-grid__link:focus-visible .bsp-category-grid__media img {
	transform: scale(1.04);
}
.bsp-category-grid__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.95rem 1.15rem 1.15rem;
}
.bsp-category-grid__link:not(:has(.bsp-category-grid__media)) .bsp-category-grid__body {
	padding: 1.15rem;
}
@media (prefers-reduced-motion: reduce) {
	.bsp-category-grid__media img,
	.bsp-category-grid__img {
		transition: none;
	}
}
.bsp-category-grid__link:hover,
.bsp-category-grid__link:focus-visible {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--md);
}
.bsp-category-grid__title {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
}
.bsp-category-grid__count {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}
.bsp-category-grid__cta {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin-top: auto;
}

/* ============================================================
   Featured brands strip
   ============================================================ */
.bsp-featured-brands {
	background: var(--wp--preset--color--base);
	border-block: 1px solid var(--wp--preset--color--rule);
	padding-block: clamp(3rem, 6vw, 5rem);
}
.bsp-featured-brands__inner {
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: 0 var(--bsp-px);
}
/* .bsp-brand-strip removed — featured-brands now reuses the same
   .bsp-brand-grid + .bsp-brand-card markup as /brands/ archive. */
.bsp-featured-brands__more {
	margin: 1.5rem 0 0;
}
.bsp-featured-brands__more a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: none;
}

/* ============================================================
   Why contractors choose us
   ============================================================ */
.bsp-why {
	padding-block: clamp(3rem, 6vw, 5rem);
}
.bsp-why__inner {
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: 0 var(--bsp-px);
}
.bsp-why__grid {
	display: grid;
	gap: 1.5rem;
	grid-auto-rows: 1fr;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsp-why__item {
	background: var(--wp--preset--color--surface);
	border-top: 3px solid var(--wp--preset--color--accent);
	padding: 1.5rem;
}
.bsp-why__title {
	font-size: var(--wp--preset--font-size--md);
	margin: 0 0 0.5rem;
}
.bsp-why__copy {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
	margin: 0;
}

/* ============================================================
   Quote CTA section
   ============================================================ */
.bsp-quote-cta {
	background: var(--wp--preset--color--surface);
	border-block: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink);
	padding-block: clamp(3rem, 6vw, 5rem);
}
.bsp-quote-cta__inner {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: 0 var(--bsp-px);
}
@media (min-width: 960px) {
	.bsp-quote-cta__inner {
		grid-template-columns: 5fr 7fr;
		gap: 3rem;
	}
}
.bsp-quote-cta__copy h2 {
	color: var(--wp--preset--color--ink);
	margin: 0 0 1rem;
}
.bsp-quote-cta__copy p {
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 1.25rem;
	max-width: 56ch;
}
.bsp-quote-cta__bullets {
	color: var(--wp--preset--color--ink-soft);
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsp-quote-cta__bullets li {
	padding-left: 1.5rem;
	position: relative;
}
.bsp-quote-cta__bullets li::before {
	color: var(--wp--preset--color--primary);
	content: '✓';
	font-weight: 700;
	left: 0;
	position: absolute;
}
.bsp-quote-cta__bullets strong { color: var(--wp--preset--color--ink); }
.bsp-quote-cta__form {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	padding: 1.5rem clamp(1rem, 3vw, 2rem);
}
@media (min-width: 960px) {
	.bsp-quote-cta__form {
		padding: 2rem;
	}
}

/* ============================================================
   Final CTA
   ============================================================ */
.bsp-final-cta {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
	padding-block: clamp(3rem, 6vw, 4rem);
	text-align: center;
}
.bsp-final-cta__inner {
	margin: 0 auto;
	max-width: 640px;
	padding: 0 var(--bsp-px);
}
.bsp-final-cta h2 {
	color: var(--wp--preset--color--accent-ink);
	margin: 0 0 0.75rem;
}
.bsp-final-cta p {
	color: rgba(255, 255, 255, 0.92);
	margin: 0 0 1.5rem;
}
/* Plain inline links on red background — default site-blue is unreadable
   here. White text + an underline that thickens on hover keeps them
   discoverable without needing a custom color. Buttons inside still
   override below. */
.bsp-final-cta a:not(.bsp-button) {
	color: var(--wp--preset--color--accent-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.bsp-final-cta a:not(.bsp-button):hover,
.bsp-final-cta a:not(.bsp-button):focus-visible {
	color: var(--wp--preset--color--accent-ink);
	text-decoration-thickness: 2px;
}
.bsp-final-cta__buttons {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}
.bsp-final-cta__buttons .bsp-button {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
}
.bsp-final-cta__buttons .bsp-button:hover,
.bsp-final-cta__buttons .bsp-button:focus-visible {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}
.bsp-final-cta__buttons .bsp-button--ghost {
	background: transparent;
	border-color: var(--wp--preset--color--accent-ink);
	color: var(--wp--preset--color--accent-ink);
}
.bsp-final-cta__buttons .bsp-button--ghost:hover,
.bsp-final-cta__buttons .bsp-button--ghost:focus-visible {
	background: var(--wp--preset--color--accent-ink);
	color: var(--wp--preset--color--accent);
}

/* ============================================================
   Breadcrumbs
   ============================================================ */
.bsp-breadcrumbs {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0 0 1.25rem;
}
.bsp-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsp-breadcrumbs li:not(:last-child)::after {
	color: var(--wp--preset--color--ink-muted);
	content: " / ";
	margin-left: 0.5rem;
}
.bsp-breadcrumbs a {
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}
.bsp-breadcrumbs a:hover,
.bsp-breadcrumbs a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}
.bsp-breadcrumbs [aria-current="page"] {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* ============================================================
   Product detail
   ============================================================ */
.bsp-product__inner {
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: clamp(1.5rem, 4vw, 3rem) var(--bsp-px);
}
.bsp-product__header {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	margin-bottom: 2.5rem;
	padding-bottom: 2rem;
}
.bsp-product__brand-eyebrow {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}
.bsp-product__brand-eyebrow a {
	color: inherit;
	text-decoration: none;
}
.bsp-product__brand-eyebrow a:hover,
.bsp-product__brand-eyebrow a:focus-visible {
	text-decoration: underline;
}
.bsp-product__title {
	margin: 0 0 1rem;
}
.bsp-product__identifiers {
	color: var(--wp--preset--color--ink-soft);
	display: grid;
	font-size: var(--wp--preset--font-size--sm);
	gap: 0.25rem 1rem;
	grid-template-columns: auto 1fr;
	margin: 0 0 1rem;
	max-width: 480px;
}
.bsp-product__identifiers dt {
	color: var(--wp--preset--color--ink-muted);
	font-weight: 600;
}
.bsp-product__identifiers dd {
	margin: 0;
}
.bsp-product__identifiers code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.95em;
}
.bsp-product__stock {
	align-items: center;
	color: var(--wp--preset--color--ink);
	display: flex;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}
.bsp-product__stock-dot {
	border-radius: 50%;
	display: inline-block;
	height: 8px;
	width: 8px;
}
.bsp-product__stock-dot--in {
	background: var(--wp--preset--color--success);
}
.bsp-product__stock-dot--out {
	background: var(--wp--preset--color--ink-muted);
}
.bsp-product__body {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
	margin-bottom: 3rem;
}
@media (min-width: 768px) {
	.bsp-product__body {
		grid-template-columns: 1fr 320px;
	}
}
/* Main column container — image on top, then optional description, then
   specs. Sits in the left half of bsp-product__body's 2-col grid. */
.bsp-product__main {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
/* Product detail page hero — 4:3 canvas, image fit-contain so the
   whole product is visible regardless of source aspect ratio.
   Whitespace background (--surface) reads as a neutral product
   photo backdrop, not a missing image. */
.bsp-product__media {
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 8px;
	margin: 0;
	max-width: 586px;
	overflow: hidden;
	width: 100%;
}
.bsp-product__image {
	background: transparent;
	border: 0;
	border-radius: 0;
	display: block;
	height: 100%;
	object-fit: contain;
	object-position: center;
	width: 100%;
}
.bsp-product__media-placeholder {
	align-items: center;
	background: var(--wp--preset--color--surface);
	border: 1px dashed var(--wp--preset--color--rule-strong);
	border-radius: 8px;
	color: var(--wp--preset--color--ink-muted);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	justify-content: center;
	min-height: 280px;
	padding: 2rem 1.5rem;
	text-align: center;
}
.bsp-product__media-placeholder svg { color: var(--wp--preset--color--rule-strong); }
.bsp-product__media-placeholder p {
	color: var(--wp--preset--color--ink-soft);
	font-weight: 600;
	margin: 0.25rem 0 0;
}
.bsp-product__media-placeholder-help {
	color: var(--wp--preset--color--ink-muted) !important;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400 !important;
}
.bsp-product__description {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.65;
}
.bsp-product__description h2 {
	font-size: var(--wp--preset--font-size--lg);
	margin: 0 0 0.75rem;
}

/* Specs key-value list — uses a 2-col CSS grid so dt/dd line up cleanly
   without a real <table>, which breaks too easily on narrow viewports. */
.bsp-product__specs h2 {
	font-size: var(--wp--preset--font-size--lg);
	margin: 0 0 0.75rem;
}
.bsp-product__spec-list {
	border-top: 1px solid var(--wp--preset--color--rule);
	display: grid;
	gap: 0.5rem 1rem;
	grid-template-columns: max-content 1fr;
	margin: 0;
	padding-top: 0.75rem;
}
.bsp-product__spec-list dt {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin: 0;
}
.bsp-product__spec-list dd {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}
.bsp-product__spec-list a {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.bsp-product__spec-list a:hover { text-decoration-thickness: 2px; }
.bsp-product__spec-muted { color: var(--wp--preset--color--ink-muted); font-style: italic; }
.bsp-product__cta {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	display: grid;
	gap: 0.75rem;
	height: -moz-fit-content;
	height: fit-content;
	padding: 1.5rem;
}
.bsp-product__cta-eyebrow {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 0;
	text-transform: uppercase;
}
.bsp-product__cta-help {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	margin: 0;
}
.bsp-product__related {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: 2rem;
}
/* Tone the section heading down to match the other in-page h2s
   (Description, Details). Stays semantically h2 — it's a real top-level
   section whose children are h3 product cards — but the visual weight
   matches its actual page importance. */
.bsp-product__related h2 {
	font-size: var(--wp--preset--font-size--lg);
	margin: 0 0 1.25rem;
}
.bsp-related-grid {
	display: grid;
	gap: 1rem;
	grid-auto-rows: 1fr;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsp-related-card { display: flex; height: 100%; min-width: 0; }
.bsp-related-card a { height: 100%; width: 100%; min-width: 0; }
.bsp-related-card a {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink);
	display: block;
	padding: 1rem;
	text-decoration: none;
	transition: border-color 120ms ease-out;
}
.bsp-related-card a:hover,
.bsp-related-card a:focus-visible {
	border-color: var(--wp--preset--color--primary);
}
.bsp-related-card__title {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin: 0 0 0.25rem;
}
.bsp-related-card__sku {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	margin: 0;
}

/* ============================================================
   Brand detail + brand archive
   ============================================================ */
.bsp-brand__hero {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
.bsp-brand__hero-inner {
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: 0 var(--bsp-px);
}
.bsp-brand__hero-eyebrow {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	margin: 0 0 1rem;
	text-transform: uppercase;
}
.bsp-brand__hero-title {
	color: var(--wp--preset--color--ink);
	font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 0 0 1rem;
}
.bsp-brand__hero-tagline {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.5;
	margin: 0 0 2rem;
	max-width: 56ch;
}
.bsp-brand__hero-meta {
	display: grid;
	gap: 1rem 2.5rem;
	/* max-content was overflowing on long brand names — capped at 1fr
	   so the row reflows instead of escaping the container. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
	margin: 0;
}
.bsp-brand__hero-meta dt {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 0 0 0.25rem;
	text-transform: uppercase;
}
.bsp-brand__hero-meta dd {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin: 0;
}
.bsp-brand__hero-meta dd small {
	color: var(--wp--preset--color--ink-muted);
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	margin-top: 0.1rem;
}
.bsp-brand__hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

/* Category chip row — quick scan of which categories the brand spans. */
.bsp-brand__category-chips {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 2rem;
	padding: 1rem 1.25rem;
}
.bsp-brand__chip-label {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0;
	text-transform: uppercase;
}
.bsp-brand__category-chips ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsp-brand__category-chips a {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	display: inline-block;
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.35rem 0.85rem;
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s;
}
.bsp-brand__category-chips a:hover,
.bsp-brand__category-chips a:focus-visible {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

/* Top picks: 4-up featured row, more visual than the dense product grid below. */
.bsp-brand__top-picks { margin-bottom: 2.5rem; }
/* Section headings on brand pages — smaller than the page H1 hero title and
   spaced from the grid that follows so each section reads as its own block. */
.bsp-brand__top-picks h2,
.bsp-brand__products h2 {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0 0 1.25rem;
}
.bsp-brand__top-lede {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0 0 1rem;
}
.bsp-brand__top-grid {
	display: grid;
	gap: 1rem;
	grid-auto-rows: 1fr;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 600px) { .bsp-brand__top-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .bsp-brand__top-grid { grid-template-columns: repeat(4, 1fr); } }
.bsp-brand__top-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
	min-width: 0;
	transition: border-color 0.15s, transform 0.15s;
}
.bsp-brand__top-card a {
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	height: 100%;
	min-width: 0;
	padding: 1.1rem 1.2rem;
	text-decoration: none;
}
.bsp-brand__top-card:hover { border-color: var(--wp--preset--color--ink); transform: translateY(-1px); }
.bsp-brand__top-card h3 {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
}
.bsp-brand__top-sku {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	margin: 0;
}
.bsp-brand__top-stock {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	margin: auto 0 0;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.bsp-brand__top-stock.is-in  { color: #007017; }
.bsp-brand__top-stock.is-out { color: #b88600; }

/* FAQ — definition list with subtle dividers, FAQPage JSON-LD on the page. */
.bsp-brand__faq {
	margin-top: 2.5rem;
}
.bsp-brand__faq h2 { margin: 0 0 1rem; }
.bsp-brand__faq-list {
	border-top: 1px solid var(--wp--preset--color--rule);
	margin: 0;
}
.bsp-brand__faq-list > div {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding: 1.25rem 0;
}
.bsp-brand__faq-list dt {
	color: var(--wp--preset--color--ink);
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0 0 0.4rem;
}
.bsp-brand__faq-list dd {
	color: var(--wp--preset--color--ink-soft);
	font-size: 0.95rem;
	line-height: 1.55;
	margin: 0;
}

/* Footnote when grid is capped. */
.bsp-brand__products-more {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	font-style: italic;
	margin-top: 1rem;
}

/* ============================================================
   Sortable tables — progressive-enhancement script adds aria-sort
   on click; CSS shows a triangle indicator + hover/focus state.
   Applies to any <th> with .is-sortable.
   ============================================================ */
table.bsp-bi__table thead th.is-sortable {
	cursor: pointer;
	padding-right: 1.4rem;
	position: relative;
	user-select: none;
}
table.bsp-bi__table thead th.is-sortable:hover {
	background: rgba(0, 0, 0, 0.03);
}
table.bsp-bi__table thead th.is-sortable:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}
/* Default neutral indicator — two faint chevrons. */
table.bsp-bi__table thead th.is-sortable::after {
	border-bottom: 4px solid currentColor;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	box-sizing: content-box;
	content: "";
	display: inline-block;
	height: 0;
	margin-left: 0.4rem;
	opacity: 0.25;
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
}
table.bsp-bi__table thead th[aria-sort="ascending"]::after {
	border-bottom: 5px solid currentColor;
	border-top: none;
	opacity: 1;
}
table.bsp-bi__table thead th[aria-sort="descending"]::after {
	border-bottom: none;
	border-top: 5px solid currentColor;
	opacity: 1;
}
.bsp-brand__hero-meta a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}
.bsp-brand__inner {
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: clamp(1.5rem, 4vw, 3rem) var(--bsp-px);
}
/* What-we-stock + Why-we-stock now sit side-by-side at desktop and
   stack on mobile, so the product grid below isn't pushed an extra
   screen down. Smaller body type to match the supporting-text role. */
.bsp-brand__intro-grid {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	display: grid;
	gap: 1.5rem 2.5rem;
	grid-template-columns: 1fr;
	margin-bottom: 1.75rem;
	padding-bottom: 1.5rem;
}
@media (min-width: 768px) {
	.bsp-brand__intro-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}
.bsp-brand__intro,
.bsp-brand__why {
	margin: 0;
	max-width: none;
}
.bsp-brand__intro h2,
.bsp-brand__why h2 {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}
.bsp-brand__intro p {
	color: var(--wp--preset--color--ink);
	font-size: 0.95rem;
	line-height: 1.55;
	margin: 0;
}
.bsp-brand__why .bsp-prose,
.bsp-brand__why p {
	color: var(--wp--preset--color--ink);
	font-size: 0.95rem;
	line-height: 1.55;
}
.bsp-brand__cta {
	background: var(--wp--preset--color--primary-soft);
	border-left: 3px solid var(--wp--preset--color--primary);
	padding: 1.5rem 2rem;
}
.bsp-brand__cta h2 {
	margin: 0 0 0.5rem;
}
.bsp-brand__cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1rem;
}
.bsp-brands-archive__inner,
.bsp-products-archive__inner,
.bsp-category-archive__inner {
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: clamp(1.5rem, 4vw, 3rem) var(--bsp-px);
}
.bsp-brands-archive__header,
.bsp-products-archive__header,
.bsp-category-archive__header {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	margin-bottom: 2.5rem;
	padding-bottom: 1.5rem;
}
.bsp-brands-archive__lede,
.bsp-products-archive__lede,
.bsp-category-archive__lede {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--md);
	margin: 0;
	max-width: 70ch;
}
.bsp-brand-grid {
	display: grid;
	gap: 0.625rem;
	grid-auto-rows: 1fr; /* equal-height rows across the grid */
	grid-template-columns: repeat(2, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 640px) {
	.bsp-brand-grid { gap: 0.875rem; grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
	.bsp-brand-grid { gap: 1rem; grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1200px) {
	.bsp-brand-grid { grid-template-columns: repeat(5, 1fr); }
}
.bsp-brand-card {
	display: flex;
	height: 100%;
	min-width: 0;
	/* Clip the logo's intentional -1.25rem horizontal margin (which is sized
	   to bleed exactly to the card's inner padding edge) so it never escapes
	   the card on narrow viewports — was a horizontal-scroll source on mobile. */
	overflow: hidden;
}
.bsp-brand-card__link {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.25rem;
	position: relative;
	text-decoration: none;
	transition: border-color 120ms ease-out;
	width: 100%;
}
.bsp-brand-card__logo {
	align-items: center;
	aspect-ratio: 16 / 9;
	background: #fff;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	display: flex;
	justify-content: center;
	margin: -1.25rem -1.25rem 1rem;
	padding: 0.875rem 1rem;
}
.bsp-brand-card__logo-img,
.bsp-brand-card__logo img {
	display: block;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}
.bsp-brand-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bsp-brand-card__cta {
	margin-top: auto;
}
/* Anchor-brand badge hidden for now — Tim's call. The .is-anchor border
   on the card is enough visual indicator. */
.bsp-brand-card__badge { display: none; }
.bsp-brand-card.is-anchor .bsp-brand-card__link {
	border-top: 3px solid var(--wp--preset--color--accent);
}
.bsp-brand-card__link:hover,
.bsp-brand-card__link:focus-visible {
	border-color: var(--wp--preset--color--primary);
}
.bsp-brand-card__badge {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	padding: 0.125rem 0.5rem;
	position: absolute;
	right: 1rem;
	top: 1rem;
	text-transform: uppercase;
}
.bsp-brand-card__title {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0 0 0.4rem;
}
.bsp-brand-card__tagline {
	color: var(--wp--preset--color--ink-soft);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	line-height: 1.4;
	margin: 0 0 0.75rem;
	overflow: hidden;
}
.bsp-brand-card__excerpt {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
	margin: 0 0 1rem;
}
.bsp-brand-card__cta {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

/* ============================================================
   Product grid (used on brand, archive, category)
   2 cols mobile · 3 tablet · 4 mid · 5 desktop. Image-led card.
   ============================================================ */
.bsp-product-grid {
	display: grid;
	gap: 1rem;
	grid-auto-rows: 1fr; /* equal-height rows */
	grid-template-columns: repeat(2, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Grid items that are themselves flex containers default to
   min-width: auto, which lets their content's intrinsic size win and
   push the grid track wider than 1fr. min-width: 0 (and min-height: 0
   when relevant) makes the flex card behave as a true grid 1fr cell. */
.bsp-product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
}
.bsp-product-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (min-width: 640px) {
	.bsp-product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
	.bsp-product-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Capped at 4-up. Five-up was too tight once the filters sidebar was in
   play — title + brand eyebrow wrapped to 3 lines and Add-to-Quote
   broke onto two lines per card. */
.bsp-product-card__link {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	height: 100%;
	overflow: hidden;
	padding: 0;
	text-decoration: none;
	transition: border-color 120ms ease-out;
}
/* Product card thumbs — 4:3 canvas, object-fit: cover so the photo
   fills the frame edge-to-edge (Home Depot-style product photography
   tile). Edges may crop on extreme aspect-ratio sources, but the
   visual rhythm across the grid reads cleaner than letterboxed contain. */
.bsp-product-card__media {
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--surface);
	margin: 0;
	overflow: hidden;
	width: 100%;
}
.bsp-product-card__media .bsp-product-card__img,
.bsp-product-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 320ms ease-out;
	width: 100%;
}
.bsp-product-card__link:hover .bsp-product-card__media img,
.bsp-product-card__link:focus-visible .bsp-product-card__media img {
	transform: scale(1.04);
}
.bsp-product-card__link > :not(.bsp-product-card__media) {
	margin-left: 1.25rem;
	margin-right: 1.25rem;
}
.bsp-product-card__link > .bsp-product-card__brand { margin-top: 1rem; }
.bsp-product-card__link > .bsp-product-card__stock { margin-bottom: 1rem; }
@media (prefers-reduced-motion: reduce) {
	.bsp-product-card__media .bsp-product-card__img,
	.bsp-product-card__media img {
		transition: none;
	}
}
.bsp-product-card__link:hover,
.bsp-product-card__link:focus-visible {
	border-color: var(--wp--preset--color--primary);
}
.bsp-product-card__brand {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
	/* Cap to a single line — brands like "ECR International (Utica Boilers)"
	   were wrapping to 3 lines and breaking card-row alignment. The full
	   brand name is still on the linked brand page; the eyebrow is just
	   a chip. */
	white-space: nowrap;
}
.bsp-product-card__title {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1.35;
	margin: 0;
	min-height: calc(1.35em * 2); /* reserves space for the 2-line clamp so all cards align */
}
.bsp-product-card__sku {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bsp-product-card__stock {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	margin: auto 0 0;
}

/* The link wrapper grows so the stock-status line + the cart-buttons row
   below it sit at the SAME vertical position across every card in a row.
   Without this, taller titles push the buttons down inconsistently. */
.bsp-product-card__link { flex: 1; }

/* Cart buttons row — keep "Add to Quote" on a single line so the row
   reads as the same height across cards. The full label fits within
   the 4-up grid; switches to icon-only at very narrow card widths. */
.bsp-cart-buttons--card {
	margin-top: auto;
}
.bsp-cart-buttons--card .bsp-cart-btn--add {
	flex: 1;
	white-space: nowrap;
}
.bsp-product-card__stock.is-in {
	color: var(--wp--preset--color--success);
}
.bsp-product-card__stock.is-out {
	color: var(--wp--preset--color--ink-muted);
}

/* Category pills */
.bsp-products-archive__cats,
.bsp-category-archive__children {
	margin: 0 0 2rem;
}
.bsp-products-archive__cats ul,
.bsp-category-archive__children ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsp-chip,
.bsp-products-archive__cats a,
.bsp-category-archive__children a {
	background: var(--wp--preset--color--primary-soft);
	border: 1px solid var(--wp--preset--color--primary-soft);
	border-radius: 999px;
	color: var(--wp--preset--color--primary);
	display: inline-block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	padding: 0.375rem 1rem;
	text-decoration: none;
}
.bsp-chip:hover,
.bsp-chip:focus-visible,
.bsp-products-archive__cats a:hover,
.bsp-category-archive__children a:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-ink);
}

/* Pagination */
.bsp-pagination {
	align-items: center;
	border-top: 1px solid var(--wp--preset--color--rule);
	display: flex;
	gap: 1.5rem;
	justify-content: space-between;
	margin: 3rem 0 0;
	padding-top: 1.5rem;
}
.bsp-pagination__info {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
}
.bsp-pagination a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: none;
}

/* ============================================================
   Quote Request form
   ============================================================ */
.bsp-quote-form-section {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
.bsp-quote-form-section__inner {
	margin: 0 auto;
	max-width: 720px;
	padding: 0 var(--bsp-px);
}
.bsp-quote-form-section__header {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	margin-bottom: 2.5rem;
	padding-bottom: 1.5rem;
}
.bsp-quote-form-section__header h1 {
	margin: 0 0 0.75rem;
}
.bsp-quote-form-section__lede {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--md);
	margin: 0;
}
/* ============================================================
   .bsp-quote-form — global form chrome (used by every form on the site:
   request-a-quote, cart drawer, register/login, credit application,
   contractors page, etc.). Built for WCAG AA: 44px touch targets,
   visible 2px focus outlines, 4.5:1+ text/control contrast, real
   <label>/<legend>/<fieldset> hierarchy, no hover-only signals.
   ============================================================ */
.bsp-quote-form {
	display: grid;
	gap: 1.4rem;
}
.bsp-quote-form__honeypot {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

/* Fieldset = section. Catalyst-inspired: a real heading-weight legend
   instead of the tiny tracked eyebrow, separated from the section above
   by a hairline rule with comfortable breathing room. The first section
   sits flush. */
.bsp-quote-form__group {
	border: 0;
	border-top: 1px solid rgba(15, 22, 30, 0.12);
	display: grid;
	gap: 0.9rem;
	margin: 0;
	min-width: 0; /* allow grid children to shrink */
	padding: 1.35rem 0 0;
}
.bsp-quote-form__group:first-of-type {
	border-top: 0;
	padding-top: 0;
}
.bsp-quote-form__group > legend {
	color: var(--wp--preset--color--ink);
	float: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin: 0 0 0.85rem;
	padding: 0;
	width: 100%;
}

/* Field row — defaults to single column, stretches to two equal cols at
   600px+. Add --3 for a 3-column variant (city/state/zip), or --tight
   when the children should sit on a single row at any width. The grid
   fills row-by-row, so adding more fields than columns just wraps. */
.bsp-quote-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}
.bsp-quote-form__row {
	display: grid;
	gap: 0.9rem;
	min-width: 0;
}
@media (min-width: 600px) {
	.bsp-quote-form__row {
		/* min-content prevents children from forcing horizontal overflow when
		   their labels are long; minmax(0, 1fr) lets them shrink under the
		   intrinsic min size of inputs, which would otherwise push the row
		   wider than its container. */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.bsp-quote-form__row--3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
	.bsp-quote-form__row--3-equal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
}
/* Optional/required hint inside a label: stays inline if it fits, breaks
   to a new line below the label text if the column is too narrow. Avoids
   the "(if applicable)" → orphan-line-above-input artifact. */
.bsp-quote-form__field > label {
	display: block;
}
.bsp-quote-form__optional,
.bsp-quote-form__required {
	display: inline-block;
}
.bsp-quote-form__field--narrow { /* legacy modifier, still respected */ max-width: 100%; }

.bsp-quote-form__field > label,
.bsp-quote-form__field > .bsp-quote-form__field-legend {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.3;
}
.bsp-quote-form__optional {
	color: var(--wp--preset--color--ink-muted);
	font-weight: 400;
	margin-left: 0.25rem;
}
.bsp-quote-form__required {
	color: #b32d2e;
	font-weight: 700;
	margin-left: 0.15rem;
}

/* Inputs: subtle Catalyst-inspired chrome — 10% black border, rounded 6px,
   white background with a 1px inset highlight, ~16px text (prevents iOS
   zoom-on-focus), a 2px blue ring offset on focus instead of a halo so
   the ring sits *outside* the input edge for clearer visual hierarchy.
   44px+ touch target on every text-y control. */
.bsp-quote-form__field input,
.bsp-quote-form__field select,
.bsp-quote-form__field textarea {
	background: #fff;
	border: 1px solid rgba(15, 22, 30, 0.28);
	border-radius: 6px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem; /* 16px — prevents iOS zoom on focus, accessibility win */
	line-height: 1.4;
	min-height: 42px;
	padding: 0.5rem 0.75rem;
	transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
	width: 100%;
}
.bsp-quote-form__field textarea { min-height: 6rem; resize: vertical; }
.bsp-quote-form__field select {
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2364748b' fill='none' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-position: right 0.75rem center;
	background-repeat: no-repeat;
	background-size: 0.7rem;
	padding-right: 2.1rem;
}
.bsp-quote-form__field input::placeholder,
.bsp-quote-form__field textarea::placeholder {
	color: rgba(15, 22, 30, 0.45);
	opacity: 1;
}
.bsp-quote-form__field input:hover,
.bsp-quote-form__field select:hover,
.bsp-quote-form__field textarea:hover {
	border-color: rgba(15, 22, 30, 0.42);
}
.bsp-quote-form__field input:focus,
.bsp-quote-form__field select:focus,
.bsp-quote-form__field textarea:focus,
.bsp-quote-form__field input:focus-visible,
.bsp-quote-form__field select:focus-visible,
.bsp-quote-form__field textarea:focus-visible {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px var(--wp--preset--color--primary-soft, rgba(15, 80, 145, 0.25));
	outline: 2px solid transparent; /* forced-colors fallback */
	outline-offset: 0;
}
.bsp-quote-form__field input[aria-invalid="true"],
.bsp-quote-form__field select[aria-invalid="true"],
.bsp-quote-form__field textarea[aria-invalid="true"] {
	border-color: #dc2626;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}
.bsp-quote-form__field input:disabled,
.bsp-quote-form__field select:disabled,
.bsp-quote-form__field textarea:disabled {
	background: rgba(15, 22, 30, 0.04);
	cursor: not-allowed;
	opacity: 0.7;
}

/* File input: native control with Catalyst chrome. The "Choose File" button
   gets a soft secondary style (vs. the input's white) so it reads as an
   action without being loud. */
.bsp-quote-form__field input[type="file"] {
	background: #fff;
	cursor: pointer;
	font-size: 0.92rem;
	padding: 0.4rem 0.55rem;
}
.bsp-quote-form__field input[type="file"]::file-selector-button {
	background: rgba(15, 22, 30, 0.06);
	border: 1px solid rgba(15, 22, 30, 0.1);
	border-radius: 4px;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	margin-right: 0.85rem;
	min-height: 36px;
	padding: 0.4rem 0.95rem;
	transition: background 120ms ease-out, border-color 120ms ease-out;
}
.bsp-quote-form__field input[type="file"]::file-selector-button:hover,
.bsp-quote-form__field input[type="file"]::file-selector-button:focus-visible {
	background: rgba(15, 22, 30, 0.1);
	border-color: rgba(15, 22, 30, 0.2);
}

/* Checkboxes + radios — Catalyst pattern: a 2-column grid with the control
   in column 1 (fixed width) and the label text in column 2 (fills the
   row). Description text wraps under the label aligned to col 2.
   The control uses native <input> with accent-color so the OS widget
   picks up our brand without a custom JS widget — accessible by default
   and zero JS. */
.bsp-quote-form__checkbox,
.bsp-quote-form__radio {
	align-items: start;
	column-gap: 0.7rem;
	cursor: pointer;
	display: grid;
	font-size: 0.95rem;
	font-weight: 500 !important;
	grid-template-columns: 1.15rem 1fr;
	line-height: 1.45;
	margin: 0;
	padding: 0.4rem 0;
	row-gap: 0.15rem;
}
.bsp-quote-form__checkbox input[type="checkbox"],
.bsp-quote-form__radio input[type="radio"] {
	accent-color: var(--wp--preset--color--primary);
	background: #fff;
	border: 1px solid rgba(15, 22, 30, 0.42);
	height: 1.05rem;
	margin: 0.2rem 0 0;
	min-height: 0;
	min-width: 0;
	padding: 0;
	width: 1.05rem;
}
.bsp-quote-form__radio input[type="radio"] {
	border-radius: 50%;
}
.bsp-quote-form__checkbox input[type="checkbox"] {
	border-radius: 4px;
}
.bsp-quote-form__checkbox input[type="checkbox"]:focus-visible,
.bsp-quote-form__radio input[type="radio"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
.bsp-quote-form__check-label {
	color: var(--wp--preset--color--ink);
	grid-column: 2;
	min-width: 0;
}
.bsp-quote-form__check-label .bsp-quote-form__optional { display: inline; }

/* Group of radios in a horizontal layout: each radio label gets
   white-space: nowrap so multi-word options don't break mid-phrase, and
   the legend spans the full row above the controls. */
.bsp-quote-form__radio-group {
	border: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 1.6rem;
	margin: 0;
	padding: 0;
}
.bsp-quote-form__radio-group > .bsp-quote-form__field-legend {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin: 0 0 0.25rem;
	padding: 0;
	width: 100%;
}
.bsp-quote-form__radio-group .bsp-quote-form__radio {
	flex-shrink: 0;
	padding: 0.25rem 0;
	white-space: nowrap;
}

/* Help text + error text live below an input, linked via aria-describedby
   from the markup. */
.bsp-quote-form__help,
.bsp-quote-form__error {
	font-size: var(--wp--preset--font-size--sm);
	margin: 0.35rem 0 0;
}
.bsp-quote-form__help { color: var(--wp--preset--color--ink-muted); }
.bsp-quote-form__error { color: #b32d2e; font-weight: 600; }
.bsp-quote-form__actions {
	align-items: center;
	border-top: 1px solid rgba(15, 22, 30, 0.12);
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem 1.4rem;
	justify-content: space-between;
	margin-top: 0.4rem;
	padding-top: 1.15rem;
}
.bsp-quote-form__alt {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}
.bsp-quote-form__status {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
	min-height: 1em;
}
.bsp-quote-form__status.is-pending {
	color: var(--wp--preset--color--primary);
}
.bsp-quote-form__status.is-error {
	color: var(--wp--preset--color--alert);
}
.bsp-quote-form__success {
	background: var(--wp--preset--color--success-soft);
	border-left: 4px solid var(--wp--preset--color--success);
	padding: 2rem;
}
.bsp-quote-form__success-eyebrow {
	color: var(--wp--preset--color--success-deep);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}
.bsp-quote-form__success-title {
	margin: 0 0 1rem;
}
.bsp-quote-form__success p {
	color: var(--wp--preset--color--ink);
	margin: 0;
}

/* ============================================================
   Contact page
   ============================================================ */
.bsp-contact { padding-block: clamp(1.75rem, 4vw, 3rem); }
.bsp-contact__inner {
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: 0 var(--bsp-px);
}
.bsp-contact__header {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	margin-bottom: 2.5rem;
	padding-bottom: 1.5rem;
}
.bsp-contact__header h1 { margin: 0 0 0.75rem; }
.bsp-contact__lede {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--md);
	margin: 0;
	max-width: 60ch;
}
.bsp-contact__grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.bsp-contact__grid {
		gap: 1.5rem;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	}
}
/* Catalyst card chrome on the contact column + map. Same vocabulary as
   the auth + credit-app + account portal cards. */
.bsp-contact__primary,
.bsp-contact__map {
	background: #fff;
	border: 1px solid rgba(15, 22, 30, 0.08);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 22, 30, 0.04), 0 4px 24px -8px rgba(15, 22, 30, 0.06);
	overflow: hidden;
}
.bsp-contact__primary { padding: clamp(1.25rem, 3vw, 1.75rem); }
.bsp-contact__map { display: flex; flex-direction: column; }
.bsp-contact__details {
	display: grid;
	gap: 1.5rem;
	margin: 0;
}
.bsp-contact__detail dt {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	margin: 0 0 0.4rem;
	text-transform: uppercase;
}
.bsp-contact__detail dd {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
	margin: 0;
}
.bsp-contact__detail dd a {
	color: inherit;
	text-decoration: none;
}
.bsp-contact__detail dd a:hover,
.bsp-contact__detail dd a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}
.bsp-contact__phone {
	color: var(--wp--preset--color--accent) !important;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 800;
	letter-spacing: -0.02em;
}
.bsp-contact__detail-meta {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
}
.bsp-contact__cta {
	border-top: 1px solid var(--wp--preset--color--rule);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
}
.bsp-contact__map iframe {
	aspect-ratio: 4 / 3;
	border: 0;
	display: block;
	flex: 1;
	min-height: 320px;
	width: 100%;
}
@media (min-width: 768px) {
	.bsp-contact__map iframe { aspect-ratio: auto; height: 100%; }
}
.bsp-contact__map-caption {
	background: rgba(15, 22, 30, 0.025);
	border-top: 1px solid rgba(15, 22, 30, 0.06);
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.85rem;
	margin: 0;
	padding: 0.6rem 1rem;
}
.bsp-contact__map-caption a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: none;
}
.bsp-contact__map-caption a:hover { text-decoration: underline; }

.bsp-contact__faq {
	background: #fff;
	border: 1px solid rgba(15, 22, 30, 0.08);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 22, 30, 0.04);
	margin-top: 1.5rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
}
.bsp-contact__faq h2 { margin: 0 0 1.5rem; }
.bsp-faq {
	display: grid;
	gap: 1.5rem;
	margin: 0;
}
.bsp-faq__item {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding-bottom: 1.5rem;
}
.bsp-faq__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.bsp-faq__item dt {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 0.5rem;
}
.bsp-faq__item dd {
	margin: 0;
}
.bsp-faq__item p {
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.6;
	margin: 0;
}

/* ============================================================
   About page — neutral hero, no colored fill
   ============================================================ */
.bsp-about__hero {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
.bsp-about__hero-inner,
.bsp-about__inner {
	margin: 0 auto;
	max-width: 800px;
	padding: 0 var(--bsp-px);
}
.bsp-about__inner {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
.bsp-about__hero .bsp-section-eyebrow {
	color: var(--wp--preset--color--ink-muted);
}
.bsp-about__title {
	color: var(--wp--preset--color--ink);
	font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 0 1rem;
	text-wrap: balance;
}
.bsp-about__lede {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.55;
	margin: 0;
	max-width: 56ch;
}
.bsp-about__section {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding: 2.5rem 0;
}
.bsp-about__section:first-of-type {
	border-top: 0;
	padding-top: 0;
}
.bsp-about__section h2 { margin: 0 0 1rem; }
.bsp-about__section p {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.65;
	margin: 0 0 1rem;
	max-width: 70ch;
}
.bsp-about__section p:last-child { margin-bottom: 0; }
.bsp-about__values {
	display: grid;
	gap: 1.5rem;
	margin: 0;
}
.bsp-about__values > div {
	border-left: 3px solid var(--wp--preset--color--accent);
	padding: 0.5rem 1.25rem;
}
.bsp-about__values dt {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 0.4rem;
}
.bsp-about__values dd {
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}
.bsp-about__section--cta {
	background: var(--wp--preset--color--primary-soft);
	border-top: 0;
	margin-top: 2.5rem;
	padding: 2rem;
}
.bsp-about__section--cta h2 { margin: 0 0 0.75rem; }
.bsp-about__cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.25rem;
}

/* ============================================================
   Contractors page
   ============================================================ */
.bsp-contractors__hero {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
.bsp-contractors__hero-inner {
	margin: 0 auto;
	max-width: 800px;
	padding: 0 var(--bsp-px);
}
.bsp-contractors__hero .bsp-section-eyebrow {
	color: var(--wp--preset--color--ink-muted);
}
.bsp-contractors__title {
	color: var(--wp--preset--color--ink);
	font-size: clamp(1.875rem, 1.4rem + 2.5vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 0 1rem;
	text-wrap: balance;
}
.bsp-contractors__lede {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.55;
	margin: 0 0 1.5rem;
	max-width: 56ch;
}
.bsp-contractors__hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.bsp-contractors__inner {
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: clamp(2.5rem, 5vw, 4rem) var(--bsp-px);
}
.bsp-contractors__benefits {
	margin-bottom: 4rem;
}
.bsp-contractors__benefits h2 {
	margin: 0 0 2rem;
}
.bsp-contractors__benefits-grid {
	display: grid;
	gap: 1.25rem;
	grid-auto-rows: 1fr;
	grid-template-columns: 1fr;
	margin: 0;
}
@media (min-width: 640px) {
	.bsp-contractors__benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.bsp-contractors__benefits-grid { grid-template-columns: repeat(3, 1fr); }
}
.bsp-contractors__benefits-grid > div {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	padding: 1.5rem;
}
.bsp-contractors__benefits-grid dt {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 0.5rem;
}
.bsp-contractors__benefits-grid dd {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
	margin: 0;
}
.bsp-contractors__form-section {
	background: var(--wp--preset--color--primary-soft);
	margin: 0 calc(-1 * var(--bsp-px));
	padding: clamp(2.5rem, 5vw, 4rem) var(--bsp-px);
}
.bsp-contractors__form-section .bsp-quote-form,
.bsp-contractors__form-header {
	margin-left: auto;
	margin-right: auto;
	max-width: 720px;
}
.bsp-contractors__form-header {
	margin-bottom: 2rem;
	text-align: left;
}
.bsp-contractors__form-header h2 { margin: 0 0 0.75rem; }
.bsp-contractors__form-header p {
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 1rem;
}
.bsp-contractors__form-header p:last-child { margin-bottom: 0; }
.bsp-contractors__pdf-link {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-left: 3px solid var(--wp--preset--color--primary);
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 1.25rem 0 0;
	padding: 0.875rem 1rem;
}
.bsp-contractors__pdf-link a {
	align-items: center;
	color: var(--wp--preset--color--primary);
	display: inline-flex;
	font-weight: 600;
	gap: 0.5rem;
	text-decoration: none;
}
.bsp-contractors__pdf-link a:hover { text-decoration: underline; }
.bsp-contractors__pdf-help {
	color: var(--wp--preset--color--ink-muted);
	display: block;
	font-size: var(--wp--preset--font-size--sm);
}

/* ============================================================
   Service Area page
   ============================================================ */
.bsp-service-area__hero {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
.bsp-service-area__hero-inner {
	margin: 0 auto;
	max-width: 800px;
	padding: 0 var(--bsp-px);
}
.bsp-service-area__hero .bsp-section-eyebrow {
	color: var(--wp--preset--color--ink-muted);
}
.bsp-service-area__title {
	color: var(--wp--preset--color--ink);
	font-size: clamp(1.875rem, 1.4rem + 2.5vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 0 1rem;
	text-wrap: balance;
}
.bsp-service-area__lede {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.55;
	margin: 0;
	max-width: 60ch;
}
.bsp-service-area__inner {
	margin: 0 auto;
	max-width: 960px;
	padding: clamp(2.5rem, 5vw, 4rem) var(--bsp-px);
}
.bsp-service-area__section {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding: 2.5rem 0;
}
.bsp-service-area__section:first-of-type {
	border-top: 0;
	padding-top: 0;
}
.bsp-service-area__section h2 { margin: 0 0 0.75rem; }
.bsp-service-area__section-lede {
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 2rem;
	max-width: 70ch;
}
.bsp-service-area__cols {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.bsp-service-area__cols {
		grid-template-columns: 1fr 1fr;
	}
}
.bsp-service-area__col h3 {
	border-bottom: 2px solid var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--md);
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
}
.bsp-towns {
	color: var(--wp--preset--color--ink-soft);
	column-gap: 1.5rem;
	column-width: 160px;
	font-size: var(--wp--preset--font-size--sm);
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsp-towns li {
	break-inside: avoid;
	padding: 0.25rem 0;
}
.bsp-service-area__section--cta {
	background: var(--wp--preset--color--primary-soft);
	border-top: 0;
	margin-top: 2.5rem;
	padding: 2rem;
}

/* ============================================================
   Business Intelligence dashboard (/intelligence/)
   ============================================================ */
.bsp-bi {
	padding-block: clamp(1.5rem, 3vw, 3rem);
}
.bsp-bi__inner {
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: 0 var(--bsp-px);
}
.bsp-bi__header {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
}
.bsp-bi__header h1 { margin: 0 0 0.5rem; }
.bsp-bi__lede {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
	max-width: 64ch;
}
.bsp-bi__data-window {
	align-items: baseline;
	color: var(--wp--preset--color--ink-soft);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--sm);
	gap: 0.25rem 1rem;
	margin: 0;
}
.bsp-bi__as-of {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
}

/* Narrative summary card — sits at the top of the BI page so the owner can
   take in the shape of the business in 30 seconds without parsing tables. */
.bsp-bi__narrative {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 12px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.04);
	margin-bottom: 1.5rem;
	padding: 1.5rem 1.75rem;
}
.bsp-bi__narrative-title {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}
.bsp-bi__narrative-headline {
	color: var(--wp--preset--color--ink);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.4;
	margin: 0 0 0.75rem;
	max-width: 72ch;
}
.bsp-bi__narrative-line {
	color: var(--wp--preset--color--ink-soft);
	font-size: 1rem;
	line-height: 1.5;
	margin: 0 0 0.5rem;
	max-width: 72ch;
}
.bsp-bi__narrative-line:last-child { margin-bottom: 0; }

/* Three-column bullet layout in the narrative card — wins / attention /
   opportunity. Bullets are the legibility win Tim asked for. */
.bsp-bi__narrative-cols {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	margin-top: 0.5rem;
}
@media (min-width: 760px) {
	.bsp-bi__narrative-cols { grid-template-columns: repeat(3, 1fr); }
}
.bsp-bi__narrative-col h3 {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}
.bsp-bi__narrative-col ul {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	list-style: disc;
	margin: 0;
	padding-left: 1.25rem;
}
.bsp-bi__narrative-col li {
	color: var(--wp--preset--color--ink);
	font-size: 0.95rem;
	line-height: 1.5;
}
.bsp-bi__narrative-col li strong { font-weight: 600; }
.bsp-bi__narrative-col--wins      li::marker { color: #007017; }
.bsp-bi__narrative-col--attention li::marker { color: #b88600; }
.bsp-bi__narrative-col--opps      li::marker { color: #2a4cd1; }

/* 8 stat cards land as 4×2 at desktop (was 6 cards as 6×1 + the orphan
   "Catalog mix" wrapping). Mid-tablet keeps the 4-up rule already
   defined at 4195. */
@media (min-width: 1100px) {
	.bsp-bi__stats { grid-template-columns: repeat(4, 1fr); }
}

/* Dead-stock unload playbook — a 2-col bulleted callout that lives
   inside the Dead Stock section, sourced from the Gemini strategic
   review. Square left edge; warning-orange accent. */
.bsp-bi__playbook {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-left: 4px solid #b88600;
	border-radius: 8px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	margin-top: 1rem;
	padding: 1.25rem 1.5rem;
}
.bsp-bi__playbook h3 {
	font-size: 1.05rem;
	margin: 0 0 0.5rem;
}
.bsp-bi__playbook-lede {
	color: var(--wp--preset--color--ink-soft);
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0 0 1rem;
	max-width: 72ch;
}
.bsp-bi__playbook-list {
	display: grid;
	gap: 0.75rem 1.5rem;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 760px) {
	.bsp-bi__playbook-list { grid-template-columns: repeat(2, 1fr); }
}
.bsp-bi__playbook-list li {
	color: var(--wp--preset--color--ink);
	font-size: 0.95rem;
	line-height: 1.5;
	padding-left: 1rem;
	position: relative;
}
.bsp-bi__playbook-list li::before {
	background: #b88600;
	border-radius: 50%;
	content: "";
	height: 6px;
	left: 0;
	position: absolute;
	top: 0.55rem;
	width: 6px;
}
.bsp-bi__playbook-list li strong { font-weight: 600; }
.bsp-bi__playbook-list li em {
	color: var(--wp--preset--color--ink-muted);
	display: block;
	font-size: 0.85rem;
	font-style: normal;
	margin-top: 0.15rem;
}

/* Capital-recovery target panel — sits at top of Dead Stock section,
   shows current dead capital and the realistic recovery range. */
.bsp-bi__target {
	align-items: center;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-left: 4px solid #2a4cd1;
	border-radius: 8px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	margin-top: 1rem;
	padding: 1.1rem 1.4rem;
}
@media (min-width: 720px) {
	.bsp-bi__target { grid-template-columns: auto 1fr; align-items: center; }
}
.bsp-bi__target-num {
	color: var(--wp--preset--color--ink);
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.1;
	margin: 0;
}
.bsp-bi__target-num small {
	color: var(--wp--preset--color--ink-muted);
	display: block;
	font-size: 0.85rem;
	font-weight: 400;
	margin-top: 0.15rem;
}
.bsp-bi__target-body {
	color: var(--wp--preset--color--ink-soft);
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0;
}

/* Decision-tree priority cards — what to act on this week. */
.bsp-bi__priorities {
	display: grid;
	gap: 0.875rem;
	grid-auto-rows: 1fr;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 700px) {
	.bsp-bi__priorities { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
	.bsp-bi__priorities { grid-template-columns: repeat(4, 1fr); }
}
.bsp-bi__priority {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-left-width: 4px;
	border-radius: 10px;
	/* Keep the accented left edge crisp — never round the corners on a
	   border-left accent. Right corners stay rounded. */
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	box-shadow: 0 4px 24px rgba(0,0,0,0.04);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
	padding: 1.1rem 1.2rem 1.2rem;
}
.bsp-bi__priority--alert { border-left-color: #b32d2e; }
.bsp-bi__priority--warn  { border-left-color: #b88600; }
.bsp-bi__priority--info  { border-left-color: #007017; }

/* ============================================================
   Global rule — any time an element has a colored border-left
   accent, its left corners must stay square. Override per-component
   wherever a border-left is applied alongside border-radius.
   ============================================================ */
.bsp-cart-drawer__success,
.bsp-account__notice {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}
.bsp-bi__priority-title {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0;
	text-transform: uppercase;
}
.bsp-bi__priority-number {
	color: var(--wp--preset--color--ink);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.1;
	margin: 0;
}
.bsp-bi__priority-desc {
	color: var(--wp--preset--color--ink-soft);
	font-size: 0.95rem;
	line-height: 1.45;
	margin: 0;
}
.bsp-bi__priority-cta {
	color: var(--wp--preset--color--ink);
	font-size: 0.9rem;
	font-weight: 600;
	margin-top: auto;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.bsp-bi__priority-cta:hover { text-decoration-thickness: 2px; }
.bsp-bi__filters {
	align-items: center;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding: 0.75rem 1rem;
}
.bsp-bi__filters label {
	align-items: center;
	display: flex;
	gap: 0.5rem;
}
.bsp-bi__filters label > span {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.bsp-bi__filters select {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule-strong);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.4rem 0.6rem;
}
.bsp-bi__clear {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin-left: auto;
}
.bsp-bi__section {
	margin-bottom: 2.5rem;
}
.bsp-bi__section-header {
	margin-bottom: 1rem;
}
.bsp-bi__section-header h2 {
	font-size: var(--wp--preset--font-size--md);
	margin: 0 0 0.25rem;
}
.bsp-bi__section-lede {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}
.bsp-bi__row {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
	margin-bottom: 2.5rem;
}
@media (min-width: 960px) {
	.bsp-bi__row { grid-template-columns: 1fr 1fr; }
	.bsp-bi__row .bsp-bi__section { margin-bottom: 0; }
}

/* Stats grid */
.bsp-bi__stats {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 768px) {
	.bsp-bi__stats { grid-template-columns: repeat(4, 1fr); }
}
.bsp-bi__stat {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-top: 3px solid var(--wp--preset--color--primary);
	padding: 1.25rem 1.25rem 1rem;
}
.bsp-bi__stat.is-warning {
	border-top-color: var(--wp--preset--color--accent);
}
.bsp-bi__stat-label {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}
.bsp-bi__stat-value {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.05;
	margin: 0 0 0.5rem;
	font-variant-numeric: tabular-nums;
}
.bsp-bi__stat-sub {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
	margin: 0;
}

/* Tables */
.bsp-bi__table-wrap {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	overflow-x: auto;
}
.bsp-bi__table {
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--sm);
	width: 100%;
}
.bsp-bi__table thead th {
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 0.625rem 1rem;
	text-align: left;
	text-transform: uppercase;
}
.bsp-bi__table th.num,
.bsp-bi__table td.num {
	font-variant-numeric: tabular-nums;
	text-align: right;
}
.bsp-bi__table tbody td {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding: 0.625rem 1rem;
	vertical-align: top;
}
.bsp-bi__table tbody tr:last-child td { border-bottom: 0; }
.bsp-bi__table tbody tr:hover { background: var(--wp--preset--color--base); }
.bsp-bi__table tbody tr.is-loss td { color: var(--wp--preset--color--accent); }
.bsp-bi__table code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9em;
}
.bsp-bi__table a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.bsp-bi__table a:hover { color: var(--wp--preset--color--primary); }
.bsp-bi__empty {
	background: var(--wp--preset--color--success-soft);
	border-left: 3px solid var(--wp--preset--color--success);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
	padding: 1rem 1.25rem;
}

/* Ranked list (top revenue / top velocity) */
.bsp-bi__ranked {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsp-bi__ranked li {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	display: grid;
	gap: 0.875rem;
	grid-template-columns: 32px 1fr;
	padding: 0.75rem 1rem;
}
.bsp-bi__ranked li:last-child { border-bottom: 0; }
.bsp-bi__rank {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
}
.bsp-bi__ranked-title {
	color: var(--wp--preset--color--ink);
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}
.bsp-bi__ranked-title:hover { color: var(--wp--preset--color--primary); }
.bsp-bi__ranked-meta {
	color: var(--wp--preset--color--ink-soft);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	margin: 0.25rem 0 0;
}

/* Bars (top brands) */
.bsp-bi__bars {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	display: grid;
	gap: 0.875rem;
	list-style: none;
	margin: 0;
	padding: 1rem;
}
.bsp-bi__bar-row {
	align-items: baseline;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
}
.bsp-bi__bar-label {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}
.bsp-bi__bar-value {
	color: var(--wp--preset--color--ink-soft);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--sm);
	font-variant-numeric: tabular-nums;
}
.bsp-bi__bar-track {
	background: var(--wp--preset--color--rule);
	height: 6px;
	margin-top: 0.375rem;
}
.bsp-bi__bar-fill {
	background: var(--wp--preset--color--primary);
	height: 100%;
	transition: width 240ms ease-out;
}
.bsp-bi__bar-meta {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	margin: 0.25rem 0 0;
}

/* ============================================================
   Archive layout: sticky facet sidebar + results column
   Used on /products/ and /category/<slug>/.
   Mobile: stacked, sidebar collapses into a <dialog> bottom-sheet
   triggered by the .bsp-archive__filter-btn.
   ============================================================ */
.bsp-archive__layout {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
	.bsp-archive__layout {
		/* Bumped sidebar 260 → 280 so long brand names like
		   "ECR International (Utica Boilers)" + their counts both fit
		   without visual truncation against the right edge. */
		grid-template-columns: 280px minmax(0, 1fr);
		gap: 2.5rem;
	}
}
.bsp-archive__results { min-width: 0; }
.bsp-archive__results-bar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.bsp-archive__count {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}
.bsp-archive__filter-btn {
	align-items: center;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	gap: 0.5rem;
	padding: 0.5rem 0.875rem;
}
.bsp-archive__filter-btn:hover {
	border-color: var(--wp--preset--color--primary);
}
.bsp-archive__filter-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
.bsp-archive__filter-badge {
	background: var(--wp--preset--color--primary);
	border-radius: 999px;
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	min-width: 1.25rem;
	padding: 0.0625rem 0.4375rem;
	text-align: center;
}
@media (min-width: 1024px) {
	.bsp-archive__filter-btn { display: none; }
}

/* Active-filter chip strip */
.bsp-archive__active-chips {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
}
.bsp-archive__chip {
	align-items: center;
	background: #f1f3f7;
	border: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--sm);
	gap: 0.375rem;
	line-height: 1;
	padding: 0.375rem 0.625rem;
	text-decoration: none;
	transition: border-color 120ms ease-out, background-color 120ms ease-out;
}
.bsp-archive__chip:hover {
	background: #fff;
	border-color: var(--wp--preset--color--primary);
}
.bsp-archive__chip-x {
	color: var(--wp--preset--color--ink-muted);
	font-size: 1rem;
	line-height: 1;
}
.bsp-archive__clear {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: underline;
}

/* ============================================================
   Facets sidebar (.bsp-facets) — shared between desktop sidebar
   and mobile <dialog>. Variant classes:
     .bsp-facets--sidebar  → desktop sticky aside
     .bsp-facets--dialog   → inside <dialog> (mobile bottom-sheet)
   ============================================================ */
.bsp-facets { color: var(--wp--preset--color--ink); }
.bsp-facets--sidebar { display: none; }
@media (min-width: 1024px) {
	.bsp-facets--sidebar {
		display: block;
		position: sticky;
		top: 96px; /* clears header (top bar + main header) */
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		padding-right: 0.5rem;
	}
}
.bsp-facets__form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin: 0;
}
.bsp-facets__head {
	align-items: baseline;
	display: flex;
	justify-content: space-between;
}
.bsp-facets__heading {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0;
	text-transform: uppercase;
}
.bsp-facets__clear {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--xs);
}
.bsp-facets__group {
	border: 0;
	margin: 0;
	padding: 0;
}
.bsp-facets__legend {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0 0 0.4rem;
	padding: 0;
	text-transform: uppercase;
}
.bsp-facets__search {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--xs);
	margin-bottom: 0.4rem;
	padding: 0.35rem 0.55rem;
	width: 100%;
}
.bsp-facets__search:focus-visible {
	border-color: var(--wp--preset--color--primary);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -1px;
}
.bsp-facets__list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	max-height: 340px;
	overflow-y: auto;
	padding: 0;
}
.bsp-facets__item {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	line-height: 1.3;
	padding: 0.25rem 0;
}
.bsp-facets__item input[type="checkbox"] {
	accent-color: var(--wp--preset--color--primary);
	flex: 0 0 auto;
	height: 1rem;
	margin: 0;
	width: 1rem;
}
.bsp-facets__item label {
	align-items: baseline;
	cursor: pointer;
	display: flex;
	flex: 1 1 auto;
	font-size: var(--wp--preset--font-size--sm);
	gap: 0.375rem;
	justify-content: space-between;
	min-width: 0;
}
/* Name takes remaining space and truncates if needed; count is the
   non-shrinking flush-right element. flex:1 1 0 forces the name to
   absorb whatever room is left — without this, long names + counts
   were pushing the count past the column edge on 280px sidebars. */
.bsp-facets__label-text {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bsp-facets__count {
	color: var(--wp--preset--color--ink-muted);
	flex: 0 0 auto;
	font-size: var(--wp--preset--font-size--xs);
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   Facets <dialog> (mobile bottom-sheet)
   ============================================================ */
.bsp-facets-dialog {
	background: var(--wp--preset--color--surface);
	border: 0;
	border-radius: 14px 14px 0 0;
	bottom: 0;
	height: 90vh;
	left: 0;
	margin: 0;
	max-height: 90vh;
	max-width: 100vw;
	padding: 0;
	right: 0;
	top: auto;
	width: 100%;
}
.bsp-facets-dialog::backdrop {
	background: rgba(15, 25, 50, 0.45);
}
@media (min-width: 1024px) {
	/* If somehow opened at desktop width (shouldn't, since the trigger
	   button is hidden) — render as a normal centered modal, not a sheet. */
	.bsp-facets-dialog {
		border-radius: 12px;
		bottom: auto;
		height: auto;
		left: auto;
		margin: auto;
		max-height: 80vh;
		max-width: 480px;
		right: auto;
	}
}
.bsp-facets--dialog {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}
.bsp-facets-dialog__head {
	align-items: center;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	display: flex;
	flex: 0 0 auto;
	justify-content: space-between;
	padding: 1rem 1.25rem;
}
.bsp-facets-dialog__close {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font-size: 1.75rem;
	line-height: 1;
	padding: 0.25rem 0.5rem;
}
.bsp-facets-dialog__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 1.5rem;
	min-height: 0;
	overflow-y: auto;
	padding: 1.25rem;
}
.bsp-facets-dialog__foot {
	border-top: 1px solid var(--wp--preset--color--rule);
	display: flex;
	flex: 0 0 auto;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
}
.bsp-facets-dialog__foot .bsp-button { flex: 1 1 0; text-align: center; }
.bsp-button--block { display: block; width: 100%; }

/* Lock background scroll while dialog is open (matches body class set by JS). */
body.bsp-facets-dialog-open { overflow: hidden; }

/* ============================================================
   Account portal (/account/)
   Two-column on desktop: quote history on the left, account info on
   the right. Stacked on mobile.
   ============================================================ */
.bsp-account__inner {
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size, 1480px);
	padding: clamp(1.5rem, 4vw, 2rem) var(--bsp-px, 1.5rem) clamp(2rem, 6vw, 4rem);
}
.bsp-account__header { margin-bottom: 1.75rem; }
.bsp-account__lede {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--md);
	margin: 0.5rem 0 0;
	max-width: 64ch;
}
.bsp-account__cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1rem 0 0;
}
.bsp-account__help {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin-top: 1rem;
}
.bsp-account__notice {
	background: #fff7e0;
	border: 1px solid #f0d27a;
	border-left-width: 4px;
	color: #6b4d00;
	margin-bottom: 1.5rem;
	padding: 0.875rem 1rem;
}
.bsp-account__notice p { margin: 0; }
.bsp-account__layout {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}
@media (min-width: 960px) {
	.bsp-account__layout {
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: 2.5rem;
	}
	/* Multiple main sections (cart, saved, history) stack in column 1; the
	   side column spans every row in column 2. */
	.bsp-account__col--main { grid-column: 1; }
	.bsp-account__col--side { grid-column: 2; grid-row: 1 / -1; }
}
/* Catalyst-inspired card chrome for every section in the portal — white
   bg, rounded 12px, soft 8% border, subtle 24px-blur shadow. Same
   vocabulary as the auth + credit-app forms so the whole logged-in
   surface reads as one product. */
.bsp-account__col {
	background: #fff;
	border: 1px solid rgba(15, 22, 30, 0.08);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 22, 30, 0.04), 0 4px 24px -8px rgba(15, 22, 30, 0.06);
	padding: clamp(1.1rem, 3vw, 1.5rem);
}
.bsp-account__col-header {
	display: flex;
	align-items: baseline;
	gap: 0.6rem 1rem;
	flex-wrap: wrap;
	margin: 0 0 0.85rem;
}
.bsp-account__col--main .bsp-account__col-header h2 {
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
}
.bsp-account__col-sub {
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.88rem;
	line-height: 1.5;
	margin: 0;
}
.bsp-account__empty {
	background: rgba(15, 22, 30, 0.025);
	border: 1px solid rgba(15, 22, 30, 0.08);
	border-radius: 8px;
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.92rem;
	padding: 1rem 1.1rem;
}

/* Welcome strip — name + at-a-glance stats. Replaces the old eyebrow
   + h1 + lede block with a compact dashboard header. */
.bsp-account__welcome {
	align-items: center;
	background: #fff;
	border: 1px solid rgba(15, 22, 30, 0.08);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 22, 30, 0.04);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: space-between;
	margin-bottom: 1.5rem;
	padding: 1.1rem 1.4rem;
}
.bsp-account__welcome-greet h1 {
	font-size: clamp(1.35rem, 3vw, 1.65rem);
	margin: 0;
}
.bsp-account__welcome-greet .bsp-section-eyebrow {
	margin: 0;
}
.bsp-account__welcome-stats {
	display: flex;
	gap: 1.5rem;
	margin: 0;
}
.bsp-account__welcome-stats > div {
	text-align: right;
}
.bsp-account__welcome-stats dt {
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0;
	text-transform: uppercase;
}
.bsp-account__welcome-stats dd {
	color: var(--wp--preset--color--ink);
	font-size: 1.5rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	margin: 0.1rem 0 0;
}

/* Logged-out welcome card */
.bsp-account__welcome-card {
	background: #fff;
	border: 1px solid rgba(15, 22, 30, 0.08);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 22, 30, 0.04);
	padding: clamp(1.25rem, 4vw, 1.75rem);
}
.bsp-account__welcome-card .bsp-account__cta-row {
	margin-bottom: 0.75rem;
}
.bsp-account__welcome-card .bsp-account__help { margin: 0; font-size: 0.92rem; }
.bsp-account__quotes {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsp-account__quote {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-left: 4px solid var(--wp--preset--color--primary);
	padding: 1rem 1.125rem;
}
.bsp-account__quote--status-responded { border-left-color: #1a7f37; }
.bsp-account__quote--status-won       { border-left-color: #1a7f37; background: #f5fbf5; }
.bsp-account__quote--status-lost      { border-left-color: var(--wp--preset--color--rule-strong); opacity: 0.85; }
.bsp-account__quote-head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}
.bsp-account__quote-meta {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}
.bsp-account__quote-job {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}
.bsp-account__quote-status {
	background: #eef2fb;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	margin: 0;
	padding: 0.125rem 0.5rem;
	text-transform: uppercase;
}
.bsp-account__quote--status-responded .bsp-account__quote-status,
.bsp-account__quote--status-won .bsp-account__quote-status {
	background: #e6f4ea;
	color: #1a7f37;
}
.bsp-account__quote--status-lost .bsp-account__quote-status {
	background: #f1f3f7;
	color: var(--wp--preset--color--ink-muted);
}
.bsp-account__quote-body {
	display: grid;
	gap: 0.25rem 1rem;
	grid-template-columns: max-content 1fr;
	margin: 0.5rem 0 0;
}
.bsp-account__quote-body dt {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
}
.bsp-account__quote-body dd {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}
.bsp-account__quote-blurb {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	font-style: italic;
	margin: 0.625rem 0 0;
}

.bsp-account__col--side {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	padding: 1.25rem;
}
.bsp-account__col--side .bsp-account__col-header {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	font-size: var(--wp--preset--font-size--md);
	margin: 0 0 0.875rem;
	padding-bottom: 0.5rem;
}
.bsp-account__info {
	display: grid;
	gap: 0.5rem 0.875rem;
	grid-template-columns: max-content 1fr;
	margin: 0;
}
.bsp-account__info dt {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
}
.bsp-account__info dd {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
	word-break: break-word;
}
.bsp-account__side-help,
.bsp-account__logout {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 1rem 0 0;
}
.bsp-account__logout a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* ============================================================
   Quote cart — pill, drawer, line items, product-card buttons
   ============================================================ */

.bsp-cart-pill {
	align-items: center;
	background: transparent;
	border: 1px solid var(--wp--preset--color--rule-strong);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0.5rem 0.85rem;
	position: relative;
	white-space: nowrap;
}
.bsp-cart-pill:hover,
.bsp-cart-pill:focus-visible {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--primary);
}
.bsp-cart-pill__count {
	background: var(--wp--preset--color--accent);
	border-radius: 999px;
	color: var(--wp--preset--color--accent-ink);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	min-width: 1.25rem;
	padding: 0.2rem 0.4rem;
	text-align: center;
}
.bsp-cart-pill.is-peeking {
	animation: bsp-cart-peek 0.6s ease-out;
}
@keyframes bsp-cart-peek {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.08); }
	100% { transform: scale(1); }
}
@media (max-width: 640px) {
	.bsp-cart-pill__label { display: none; }
	.bsp-cart-pill { padding: 0.65rem; }
}

/* Add-to-quote / save-for-later buttons (product card + product detail) */
.bsp-cart-buttons {
	display: flex;
	gap: 0.5rem;
}
.bsp-cart-buttons--card {
	/* Horizontal padding matches .bsp-product-card__link's content margin
	   (1.25rem) so the Add-to-Quote + Save row lines up with the brand,
	   title, SKU, and stock text in the card above. */
	border-top: 1px solid var(--wp--preset--color--rule);
	padding: 0.6rem 1.25rem 0.85rem;
}
.bsp-cart-buttons--detail {
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}
.bsp-cart-buttons--detail .bsp-cart-btn { justify-content: center; }

.bsp-cart-btn {
	align-items: center;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule-strong);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.82rem;
	font-weight: 600;
	gap: 0.35rem;
	min-height: 36px;
	padding: 0.4rem 0.7rem;
	position: relative;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bsp-cart-btn:hover,
.bsp-cart-btn:focus-visible {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.bsp-cart-btn--add {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	flex: 1;
}
.bsp-cart-btn--add:hover,
.bsp-cart-btn--add:focus-visible {
	background: var(--wp--preset--color--primary-deep, var(--wp--preset--color--ink));
	border-color: var(--wp--preset--color--primary-deep, var(--wp--preset--color--ink));
	color: var(--wp--preset--color--base);
}
.bsp-cart-btn--save {
	flex: 0 0 auto;
}
.bsp-cart-btn--save.is-saved {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
}
.bsp-cart-btn--save.is-saved svg { fill: currentColor; }

.bsp-cart-btn__icon { flex-shrink: 0; }
.bsp-cart-btn__icon--check { display: none; }
.bsp-cart-btn.is-added .bsp-cart-btn__icon--cart { display: none; }
.bsp-cart-btn.is-added .bsp-cart-btn__icon--check { display: inline-block; }
.bsp-cart-btn.is-added,
.bsp-cart-btn.is-saved.is-saved {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-ink);
}
.bsp-cart-btn.is-error {
	background: #fff;
	border-color: #b94a3a;
	color: #b94a3a;
}

/* Cart drawer (<dialog>) */
.bsp-cart-drawer {
	background: var(--wp--preset--color--base);
	border: 0;
	border-left: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink);
	/* dvh shrinks with the iOS keyboard so the drawer body can scroll
	   to the bottom; 100vh fallback for browsers without dvh. */
	height: 100vh;
	height: 100dvh;
	margin: 0 0 0 auto;
	max-height: 100vh;
	max-height: 100dvh;
	max-width: 480px;
	padding: 0;
	width: 100%;
}
/* Body scroll lock while the drawer is open — without this, iOS scrolls
   the page behind the drawer instead of the drawer's own pane. */
body:has(.bsp-cart-drawer[open]) {
	overflow: hidden;
}
.bsp-cart-drawer::backdrop {
	background: rgba(15, 22, 30, 0.45);
}
.bsp-cart-drawer[open] {
	animation: bsp-cart-slide 0.22s ease-out;
}
@keyframes bsp-cart-slide {
	from { transform: translateX(20px); opacity: 0; }
	to   { transform: translateX(0);    opacity: 1; }
}
.bsp-cart-drawer__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.bsp-cart-drawer__header {
	align-items: center;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	padding: 1.5rem 1.5rem 1rem;
}
.bsp-cart-drawer__title {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	margin: 0;
}
.bsp-cart-drawer__close {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--ink-muted);
	cursor: pointer;
	padding: 0.25rem;
}
.bsp-cart-drawer__close:hover,
.bsp-cart-drawer__close:focus-visible {
	color: var(--wp--preset--color--ink);
}
.bsp-cart-drawer__tabs {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	display: flex;
	padding: 0 1.5rem;
}
.bsp-cart-drawer__tab {
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--wp--preset--color--ink-muted);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin-bottom: -1px;
	padding: 0.85rem 1rem;
}
.bsp-cart-drawer__tab.is-active {
	border-bottom-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--ink);
}
.bsp-cart-drawer__tab:hover { color: var(--wp--preset--color--ink); }

.bsp-cart-drawer__pane {
	flex: 1;
	overflow-y: auto;
	padding: 1rem 1.5rem 1.5rem;
}
.bsp-cart-drawer__empty {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 1rem 0;
	text-align: center;
}
.bsp-cart-drawer__items {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bsp-cart-item {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 64px 1fr;
	padding-bottom: 1rem;
}
.bsp-cart-item:last-child { border-bottom: 0; padding-bottom: 0; }
.bsp-cart-item__media {
	background: var(--wp--preset--color--surface);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	overflow: hidden;
}
.bsp-cart-item__media img {
	display: block;
	max-height: 100%;
	max-width: 100%;
	object-fit: cover;
}
.bsp-cart-item__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}
.bsp-cart-item__brand {
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	margin: 0;
	text-transform: uppercase;
}
.bsp-cart-item__title {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin: 0;
}
.bsp-cart-item__title a {
	color: inherit;
	text-decoration: none;
}
.bsp-cart-item__title a:hover { text-decoration: underline; }
.bsp-cart-item__sku {
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.78rem;
	margin: 0;
}
.bsp-cart-item__sku code {
	background: transparent;
	font-family: var(--wp--preset--font-family--mono, monospace);
}
.bsp-cart-item__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin-top: 0.4rem;
}
.bsp-cart-item__qty {
	align-items: stretch;
	border: 1px solid var(--wp--preset--color--rule-strong);
	display: inline-flex;
}
.bsp-cart-item__qty button {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	padding: 0.3rem 0.6rem;
}
.bsp-cart-item__qty button:hover { background: var(--wp--preset--color--surface); }
.bsp-cart-item__qty input {
	background: transparent;
	border: 0;
	border-left: 1px solid var(--wp--preset--color--rule);
	border-right: 1px solid var(--wp--preset--color--rule);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.3rem 0.4rem;
	text-align: center;
	width: 3rem;
	-moz-appearance: textfield;
}
.bsp-cart-item__qty input::-webkit-outer-spin-button,
.bsp-cart-item__qty input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.bsp-cart-item__link-btn {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.85rem;
	padding: 0;
	text-decoration: underline;
}
.bsp-cart-item__link-btn:hover { color: var(--wp--preset--color--ink); }

.bsp-cart-drawer__form-section {
	border-top: 1px solid var(--wp--preset--color--rule);
	margin-top: 1.5rem;
	padding-top: 1.25rem;
}
.bsp-cart-drawer__account-prompt {
	background: var(--wp--preset--color--surface);
	border-left: 3px solid var(--wp--preset--color--primary);
	font-size: 0.85rem;
	margin-bottom: 1rem;
	padding: 0.75rem 0.9rem;
}
.bsp-cart-drawer__account-prompt p { margin: 0; }
.bsp-cart-drawer__account-prompt a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	margin-left: 0.4rem;
}
.bsp-cart-drawer__form-eyebrow {
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}
.bsp-cart-drawer__actions {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	justify-content: space-between;
	margin-top: 0.5rem;
}
.bsp-cart-drawer__clear {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--ink-muted);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.85rem;
	padding: 0;
	text-decoration: underline;
}
.bsp-cart-drawer__clear:hover { color: var(--wp--preset--color--ink); }

.bsp-cart-drawer__success {
	background: var(--wp--preset--color--success-soft, rgba(0, 112, 23, 0.08));
	border-left: 4px solid var(--wp--preset--color--success, #007017);
	margin-top: 1rem;
	padding: 1.25rem;
	text-align: center;
}
.bsp-cart-drawer__success-eyebrow {
	color: var(--wp--preset--color--primary);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}
.bsp-cart-drawer__success-title {
	font-size: var(--wp--preset--font-size--md);
	margin: 0.25rem 0 0.75rem;
}

@media (max-width: 480px) {
	.bsp-cart-drawer { max-width: 100%; }
	/* Pad the bottom of the scrolling pane so the submit button isn't
	   trapped under the iOS home indicator / keyboard. */
	.bsp-cart-drawer__pane {
		padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
	}
}

/* Product card with cart buttons — link grows to push buttons to the bottom
   regardless of title length. (.bsp-product-card itself is flex-column above.) */
.bsp-product-card__link {
	flex: 1;
}

/* Account-portal cart + saved-items rows */
.bsp-account__cart-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsp-account__cart-row {
	align-items: center;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	display: grid;
	gap: 1rem;
	grid-template-columns: 72px 1fr auto;
	padding-bottom: 1rem;
}
.bsp-account__cart-row:last-child { border-bottom: 0; padding-bottom: 0; }
.bsp-account__cart-media {
	background: var(--wp--preset--color--surface);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	overflow: hidden;
	width: 72px;
}
.bsp-account__cart-media img {
	display: block;
	max-height: 100%;
	max-width: 100%;
	object-fit: cover;
}
.bsp-account__cart-body { min-width: 0; }
.bsp-account__cart-brand {
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	margin: 0 0 0.15rem;
	text-transform: uppercase;
}
.bsp-account__cart-title {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin: 0 0 0.2rem;
}
.bsp-account__cart-title a { color: inherit; text-decoration: none; }
.bsp-account__cart-title a:hover { text-decoration: underline; }
.bsp-account__cart-meta {
	color: var(--wp--preset--color--ink-muted);
	display: flex;
	font-size: 0.78rem;
	gap: 0.75rem;
	margin: 0;
}
.bsp-account__cart-meta code {
	background: transparent;
	font-family: var(--wp--preset--font-family--mono, monospace);
}
.bsp-account__cart-actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
@media (max-width: 640px) {
	.bsp-account__cart-row {
		grid-template-columns: 56px 1fr;
		grid-template-rows: auto auto;
	}
	.bsp-account__cart-media { height: 56px; width: 56px; }
	.bsp-account__cart-actions {
		flex-direction: row;
		grid-column: 1 / -1;
		gap: 1rem;
	}
}

/* Quote-history line items table (rendered server-side) */
.bsp-account__quote-line-items {
	border-top: 1px solid var(--wp--preset--color--rule);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0.75rem 0 0;
	padding-top: 0.5rem;
	width: 100%;
}
.bsp-account__quote-line-items caption {
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	margin-bottom: 0.4rem;
	text-align: left;
	text-transform: uppercase;
}
.bsp-account__quote-line-items td,
.bsp-account__quote-line-items th {
	padding: 0.3rem 0.5rem 0.3rem 0;
	text-align: left;
	vertical-align: top;
}
.bsp-account__quote-line-items td:first-child {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	width: 3rem;
}
.bsp-account__quote-line-items code {
	background: transparent;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.78rem;
}

/* Single product CTA spacing tweak — divider word between cart buttons and
   single-item quote link. */
.bsp-product__cta-or {
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	margin: 0.4rem 0;
	text-align: center;
	text-transform: uppercase;
}

/* ============================================================
   Customer-facing quote view (/account/quote/{number}/)
   Mirrors the printable PDF Matt currently produces from DDI.
   ============================================================ */
.bsp-customer-quote {
	padding: clamp(1.5rem, 4vw, 3rem) var(--bsp-px);
}
.bsp-customer-quote__inner {
	margin: 0 auto;
	max-width: 56rem;
}
.bsp-customer-quote__header {
	margin-bottom: 1.5rem;
}
.bsp-customer-quote__header h1 {
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	margin: 0.25rem 0 0.5rem;
}
.bsp-customer-quote__meta {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0 0 0.5rem;
}
.bsp-customer-quote__back {
	font-size: var(--wp--preset--font-size--sm);
	margin: 0.75rem 0 0;
}
.bsp-customer-quote__back a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.bsp-customer-quote__banner {
	border-left: 3px solid var(--wp--preset--color--primary);
	margin-bottom: 1.5rem;
	padding: 0.85rem 1rem;
	background: var(--wp--preset--color--surface);
}
.bsp-customer-quote__banner strong { display: block; margin-bottom: 0.15rem; }
.bsp-customer-quote__banner--ok       { border-color: #007017; }
.bsp-customer-quote__banner--declined { border-color: #b32d2e; }
.bsp-customer-quote__banner--expired  { border-color: #646970; }

.bsp-customer-quote__section { margin-bottom: 1.5rem; }
.bsp-customer-quote__section-name {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--rule-strong);
	font-size: var(--wp--preset--font-size--md);
	letter-spacing: 0.04em;
	margin: 0;
	padding: 0.6rem 0.9rem;
	text-transform: uppercase;
}
.bsp-customer-quote__table {
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
	width: 100%;
}
.bsp-customer-quote__table thead th {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	padding: 0.5rem 0.75rem;
	text-align: left;
	text-transform: uppercase;
}
.bsp-customer-quote__table td {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding: 0.85rem 0.75rem;
	vertical-align: top;
}
.bsp-customer-quote__col-img    { width: 80px; }
.bsp-customer-quote__col-img img {
	background: var(--wp--preset--color--surface);
	display: block;
	height: 60px;
	object-fit: cover;
	width: 60px;
}
.bsp-customer-quote__col-qty,
.bsp-customer-quote__col-unit,
.bsp-customer-quote__col-ext {
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
	width: 90px;
}
.bsp-customer-quote__brand {
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	margin: 0;
	text-transform: uppercase;
}
.bsp-customer-quote__sku {
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.78rem;
	margin: 0.1rem 0;
}
.bsp-customer-quote__sku code {
	background: transparent;
	font-family: var(--wp--preset--font-family--mono, monospace);
}
.bsp-customer-quote__title {
	font-weight: 600;
	margin: 0;
}
.bsp-customer-quote__title a { color: inherit; text-decoration: none; }
.bsp-customer-quote__title a:hover { text-decoration: underline; }
.bsp-customer-quote__avail {
	color: #4a3700;
	font-size: 0.78rem;
	margin: 0.25rem 0 0;
}
.bsp-customer-quote__note {
	background: #fff8e1;
	border-left: 2px solid #b88600;
	color: #4a3700;
	font-size: 0.78rem;
	margin: 0.35rem 0 0;
	padding: 0.25rem 0.5rem;
}

.bsp-customer-quote__totals {
	background: var(--wp--preset--color--surface);
	margin-top: 1.5rem;
	padding: 1.25rem 1.5rem;
}
.bsp-customer-quote__totals dl {
	display: grid;
	gap: 0.4rem 1.5rem;
	grid-template-columns: 1fr auto;
	margin: 0 0 0.75rem;
}
.bsp-customer-quote__totals dt {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
}
.bsp-customer-quote__totals dd {
	font-variant-numeric: tabular-nums;
	margin: 0;
	text-align: right;
}
.bsp-customer-quote__total-label {
	border-top: 1px solid var(--wp--preset--color--rule-strong);
	color: var(--wp--preset--color--ink) !important;
	font-size: var(--wp--preset--font-size--md) !important;
	font-weight: 700 !important;
	padding-top: 0.5rem;
}
.bsp-customer-quote__total-value {
	border-top: 1px solid var(--wp--preset--color--rule-strong);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	padding-top: 0.5rem;
}
.bsp-customer-quote__terms {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}

.bsp-customer-quote__footer {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}
.bsp-customer-quote__call {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0 0 0 auto;
}
.bsp-customer-quote__call a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

@media print {
	body { background: #fff; color: #000; }
	.bsp-site-header, .bsp-top-bar, .bsp-site-footer, .bsp-customer-quote__back,
	.bsp-customer-quote__footer, .bsp-cart-pill, .bsp-cart-drawer,
	.bsp-mobile-menu, .bsp-primary-nav, .bsp-category-strip,
	[data-bsp-cart-open], .bsp-customer-quote__banner--declined,
	.bsp-customer-quote__banner--expired { display: none !important; }
	.bsp-customer-quote { padding: 0; }
	.bsp-customer-quote__inner { max-width: none; }
	.bsp-customer-quote__totals { background: transparent; padding: 1rem 0; }
	.bsp-customer-quote__section-name { background: transparent; padding: 0.5rem 0; }
	.bsp-customer-quote__table thead th { color: #555; }
	a { color: #000; text-decoration: none; }
	.bsp-customer-quote__col-img img {
		background: #fff;
	}
}

/* ============================================================
   Branded auth pages — /account/login/ + /account/register/
   ============================================================ */
.bsp-auth {
	padding: clamp(2.5rem, 6vw, 4.5rem) var(--bsp-px);
}
.bsp-auth__inner {
	margin: 0 auto;
	max-width: 32rem;
}
.bsp-auth__header {
	margin-bottom: 1.75rem;
	text-align: center;
}
.bsp-auth__header h1 {
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	margin: 0.25rem 0 0.5rem;
}
.bsp-auth__lede {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0 0 0.5rem;
}
.bsp-auth__form {
	background: #fff;
	border: 1px solid rgba(15, 22, 30, 0.08);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 22, 30, 0.04), 0 4px 24px -8px rgba(15, 22, 30, 0.06);
	padding: clamp(1.25rem, 4vw, 2rem);
}
@media (max-width: 480px) {
	.bsp-auth { padding-top: clamp(1.5rem, 4vw, 2.5rem); }
	.bsp-auth__form {
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		margin-inline: calc(-1 * var(--bsp-px));
	}
}
.bsp-auth__remember label {
	align-items: center;
	color: var(--wp--preset--color--ink-muted);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--wp--preset--font-size--sm);
	gap: 0.5rem;
}
.bsp-auth__alt {
	font-size: 0.85rem;
	margin: 0;
}
.bsp-auth__alt a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}
.bsp-auth__switch {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 1.5rem 0 0;
	text-align: center;
}
.bsp-auth__switch a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}
.bsp-auth__switch-or {
	color: var(--wp--preset--color--rule-strong);
	margin: 0 0.4rem;
}
.bsp-auth__upgrade {
	background: var(--wp--preset--color--surface);
	border-left: 3px solid var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--sm);
	margin-top: 1.5rem;
	padding: 1rem 1.1rem;
}
.bsp-auth__upgrade p { margin: 0; }
.bsp-auth__upgrade a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

/* ============================================================
   Trade Credit Application — /credit/
   ============================================================ */
.bsp-creditapp {
	padding: clamp(1.5rem, 5vw, 4rem) var(--bsp-px);
}
.bsp-creditapp__inner {
	margin: 0 auto;
	max-width: 48rem;
}
.bsp-creditapp__header {
	margin-bottom: 2rem;
}
.bsp-creditapp__title {
	font-size: clamp(1.65rem, 4vw, 2.25rem);
	margin: 0.4rem 0 0.6rem;
}
.bsp-creditapp__lede {
	color: var(--wp--preset--color--ink-muted);
	margin: 0 0 1rem;
}
.bsp-creditapp__ssn-notice {
	align-items: flex-start;
	background: rgba(15, 80, 145, 0.06);
	border: 1px solid rgba(15, 80, 145, 0.18);
	border-radius: 8px;
	color: var(--wp--preset--color--ink);
	display: flex;
	font-size: 0.92rem;
	gap: 0.85rem;
	line-height: 1.5;
	margin: 1.25rem 0 0.75rem;
	padding: 1rem 1.1rem;
}
.bsp-creditapp__ssn-notice svg {
	color: var(--wp--preset--color--primary);
	flex-shrink: 0;
	margin-top: 0.1rem;
}
.bsp-creditapp__ssn-notice p { margin: 0; }
.bsp-creditapp__ssn-notice strong { color: var(--wp--preset--color--ink); display: inline; margin-right: 0.25rem; }
.bsp-creditapp__pdf-link {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0.75rem 0 0;
}
.bsp-creditapp__pdf-link a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.bsp-creditapp__form {
	background: #fff;
	border: 1px solid rgba(15, 22, 30, 0.08);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 22, 30, 0.04), 0 4px 24px -8px rgba(15, 22, 30, 0.06);
	padding: clamp(1.25rem, 4vw, 2.25rem);
}
@media (max-width: 480px) {
	.bsp-creditapp__form {
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		margin-inline: calc(-1 * var(--bsp-px));
	}
}
.bsp-creditapp__group-help {
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.92rem;
	line-height: 1.5;
	margin: -0.5rem 0 0.5rem;
}
.bsp-creditapp__owner-card,
.bsp-creditapp__ref-card {
	background: rgba(15, 22, 30, 0.025);
	border: 1px solid rgba(15, 22, 30, 0.12);
	border-radius: 8px;
	display: grid;
	gap: 0.8rem;
	margin: 0 0 0.7rem;
	padding: 0.95rem 1.05rem;
}
.bsp-creditapp__owner-card:last-child,
.bsp-creditapp__ref-card:last-child {
	margin-bottom: 0;
}
.bsp-creditapp__card-legend {
	color: var(--wp--preset--color--ink);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0;
	padding: 0;
	text-transform: none;
}
.bsp-creditapp__card-legend .bsp-quote-form__optional {
	color: var(--wp--preset--color--ink-muted);
	font-weight: 400;
	margin-left: 0.4rem;
	text-transform: none;
}

.bsp-creditapp__legal {
	background: rgba(15, 22, 30, 0.025);
	border: 1px solid rgba(15, 22, 30, 0.08);
	border-radius: 8px;
	padding: 1.4rem 1.5rem;
}
.bsp-creditapp__legal-text {
	color: var(--wp--preset--color--ink);
	font-size: 0.9rem;
	line-height: 1.55;
	margin-bottom: 0.85rem;
}
.bsp-creditapp__legal-text p { margin: 0; }
.bsp-creditapp__legal-text strong { color: var(--wp--preset--color--ink); }
.bsp-quote-form__checkbox {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	font-size: var(--wp--preset--font-size--sm);
	gap: 0.6rem;
	line-height: 1.45;
}
.bsp-quote-form__checkbox input[type="checkbox"] {
	flex-shrink: 0;
	margin-top: 0.2rem;
}
.bsp-quote-form__field--narrow { max-width: 7rem; }
.bsp-creditapp__cert-upload { margin-top: 0; }
.bsp-creditapp__success {
	background: var(--wp--preset--color--surface);
	border-left: 3px solid var(--wp--preset--color--primary);
	padding: 1.5rem;
}

/* Contractors page: Apply CTA block */
.bsp-contractors__apply-cta {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 1rem;
}
.bsp-contractors__apply-cta .bsp-button {
	align-self: flex-start;
}

/* The legacy primary-nav element is now duplicate chrome — the mega menu
   handles desktop navigation and site-header.php has the hamburger. We
   keep the file rendered (it carries the mobile-drawer markup the burger
   targets) but hide the visible nav strip. */
.bsp-primary-nav { display: none; }

/* ============================================================
   Mega menu — replaces the legacy text-chip category strip.
   Desktop: hover/focus-within pops a full-width panel under the bar.
   Mobile: hidden (the burger menu's accordion handles narrow widths).
   ============================================================ */
.bsp-mega {
	background: #fff;
	border-bottom: 1px solid rgba(15, 22, 30, 0.1);
	border-top: 1px solid rgba(15, 22, 30, 0.06);
	display: none; /* mobile uses the burger menu */
	position: relative;
	z-index: 50;
}
@media (min-width: 960px) {
	.bsp-mega { display: block; }
}
.bsp-mega__inner {
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: 0 var(--bsp-px);
}
.bsp-mega__bar {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsp-mega__item {
	position: static; /* panels are full-bar width; positioning happens on .bsp-mega itself */
}
.bsp-mega__anchor {
	align-items: center;
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.92rem;
	font-weight: 600;
	gap: 0.35rem;
	letter-spacing: -0.005em;
	min-height: 44px;
	padding: 0.65rem 0.95rem;
	position: relative;
	text-decoration: none;
	transition: color 120ms ease-out;
}
.bsp-mega__anchor:hover,
.bsp-mega__anchor:focus-visible {
	color: var(--wp--preset--color--primary);
}
.bsp-mega__chevron {
	opacity: 0.6;
	transition: transform 160ms ease-out;
}
.bsp-mega__item:hover  .bsp-mega__chevron,
.bsp-mega__item:focus-within .bsp-mega__chevron {
	opacity: 1;
	transform: rotate(180deg);
}
/* Underline indicator on the active anchor (CSS-only via :hover/focus-within). */
.bsp-mega__item:hover .bsp-mega__anchor,
.bsp-mega__item:focus-within .bsp-mega__anchor {
	color: var(--wp--preset--color--primary);
}
.bsp-mega__item:hover .bsp-mega__anchor::after,
.bsp-mega__item:focus-within .bsp-mega__anchor::after {
	background: var(--wp--preset--color--primary);
	bottom: -1px;
	content: "";
	height: 2px;
	left: 0.95rem;
	position: absolute;
	right: 0.95rem;
}

/* Panel — pure-CSS show on hover/focus-within. The panel sits absolutely
   under the bar at full container width. JS handles the hover delay +
   keyboard ESC + aria-expanded sync. */
.bsp-mega__panel {
	background: #fff;
	border-top: 1px solid rgba(15, 22, 30, 0.1);
	box-shadow: 0 18px 40px -20px rgba(15, 22, 30, 0.18);
	display: none;
	left: 0;
	position: absolute;
	right: 0;
	top: 100%;
}
.bsp-mega__item:hover .bsp-mega__panel,
.bsp-mega__item:focus-within .bsp-mega__panel,
.bsp-mega__item.is-open .bsp-mega__panel {
	display: block;
}
.bsp-mega__panel-inner {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: 1.75rem var(--bsp-px) 2rem;
}
@media (min-width: 1080px) {
	.bsp-mega__panel-inner:has(.bsp-mega__featured) {
		grid-template-columns: minmax(0, 1fr) 280px;
	}
}
.bsp-mega__columns {
	display: grid;
	gap: 1.75rem 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.bsp-mega__column-heading {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 0.65rem;
	text-transform: uppercase;
}
.bsp-mega__links {
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsp-mega__links a {
	align-items: center;
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	font-size: 0.92rem;
	gap: 0.4rem;
	padding: 0.35rem 0;
	text-decoration: none;
	transition: color 120ms ease-out;
}
.bsp-mega__links a:hover,
.bsp-mega__links a:focus-visible {
	color: var(--wp--preset--color--primary);
}
.bsp-mega__badge {
	background: var(--wp--preset--color--accent, #b88600);
	border-radius: 2px;
	color: var(--wp--preset--color--accent-ink, #fff);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 1px 6px;
	text-transform: uppercase;
}
.bsp-mega__featured {
	background: rgba(15, 22, 30, 0.03);
	border: 1px solid rgba(15, 22, 30, 0.08);
	border-radius: 8px;
	padding: 1.1rem 1.2rem;
}
.bsp-mega__featured-title {
	color: var(--wp--preset--color--ink);
	font-size: 0.95rem;
	font-weight: 700;
	margin: 0 0 0.4rem;
}
.bsp-mega__featured-body {
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.86rem;
	line-height: 1.5;
	margin: 0 0 0.85rem;
}
.bsp-mega__featured-cta {
	color: var(--wp--preset--color--primary);
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
}
.bsp-mega__featured-cta:hover,
.bsp-mega__featured-cta:focus-visible {
	text-decoration: underline;
}

/* Mobile burger-menu accordion — extends the existing primary-nav drawer.
   When a category has children, tapping it expands the subcategory list
   inline instead of routing. */
.bsp-mobile-menu__accordion {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}
.bsp-mobile-menu__accordion details {
	border-bottom: 1px solid rgba(15, 22, 30, 0.06);
}
.bsp-mobile-menu__accordion details:last-child { border-bottom: 0; }
/* Flat top-level links (Home, Search, anchors without subnav) sit
   inline with the accordion items so the whole list flows as one menu. */
.bsp-mobile-menu__top-link {
	border-bottom: 1px solid rgba(15, 22, 30, 0.06);
	color: var(--wp--preset--color--ink);
	display: flex;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	min-height: 48px;
	padding: 0.85rem 0;
	text-decoration: none;
	align-items: center;
}
.bsp-mobile-menu__top-link:last-child { border-bottom: 0; }
.bsp-mobile-menu__top-link:hover,
.bsp-mobile-menu__top-link:focus-visible { color: var(--wp--preset--color--primary); }
.bsp-mobile-menu__accordion-all {
	margin: 0.85rem 0 0.25rem;
}
.bsp-mobile-menu__accordion-all a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}
.bsp-mobile-menu__cta-row {
	margin: 1.25rem 0 0;
}
.bsp-mobile-menu__cta-row .bsp-button {
	display: inline-flex;
	width: 100%;
}
.bsp-mobile-menu__accordion summary {
	align-items: center;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: flex;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	gap: 0.5rem;
	justify-content: space-between;
	list-style: none;
	min-height: 48px;
	padding: 0.85rem 0;
}
.bsp-mobile-menu__accordion summary::-webkit-details-marker { display: none; }
.bsp-mobile-menu__accordion summary::after {
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	content: "";
	display: inline-block;
	height: 0.45rem;
	transform: rotate(45deg);
	transition: transform 160ms ease-out;
	width: 0.45rem;
}
.bsp-mobile-menu__accordion details[open] summary::after {
	transform: rotate(-135deg);
}
.bsp-mobile-menu__accordion-body {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 0 0 1rem 0.5rem;
}
.bsp-mobile-menu__accordion-col-heading {
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0.4rem 0 0.25rem;
	text-transform: uppercase;
}
.bsp-mobile-menu__accordion-body ul {
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsp-mobile-menu__accordion-body a {
	color: var(--wp--preset--color--ink);
	display: block;
	font-size: 0.95rem;
	min-height: 36px;
	padding: 0.45rem 0;
	text-decoration: none;
}
.bsp-mobile-menu__accordion-body a:hover,
.bsp-mobile-menu__accordion-body a:focus-visible {
	color: var(--wp--preset--color--primary);
}

/* ============================================================
   Customer-facing quote comment thread
   ============================================================ */
.bsp-quote-thread {
	border-top: 1px solid rgba(15, 22, 30, 0.08);
	margin-top: 2rem;
	padding-top: 1.5rem;
}
.bsp-quote-thread__header { margin-bottom: 1rem; }
.bsp-quote-thread__title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
}
.bsp-quote-thread__sub {
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.92rem;
	margin: 0;
}
.bsp-quote-thread__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}
.bsp-quote-thread__empty {
	background: rgba(15, 22, 30, 0.03);
	border-radius: 6px;
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.92rem;
	margin: 0 0 1rem;
	padding: 1rem;
	text-align: center;
}
.bsp-quote-thread__item {
	background: #fff;
	border: 1px solid rgba(15, 22, 30, 0.1);
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: 6px;
	padding: 0.85rem 1rem;
}
.bsp-quote-thread__item--staff {
	background: rgba(0, 112, 23, 0.04);
	border-left-color: #007017;
}
.bsp-quote-thread__item-head {
	color: var(--wp--preset--color--ink-muted);
	display: flex;
	font-size: 0.78rem;
	gap: 0.75rem;
	justify-content: space-between;
	letter-spacing: 0.04em;
	margin-bottom: 0.4rem;
	text-transform: uppercase;
}
.bsp-quote-thread__author {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}
.bsp-quote-thread__body {
	color: var(--wp--preset--color--ink);
	font-size: 0.95rem;
	line-height: 1.5;
}
.bsp-quote-thread__form {
	background: rgba(15, 22, 30, 0.03);
	border-radius: 6px;
	padding: 1rem;
}
.bsp-quote-thread__form-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.6rem;
}

/* ============================================================
   Customer quote — active staff indicator
   ============================================================ */
.bsp-customer-quote__active-staff {
	align-items: center;
	background: rgba(0, 112, 23, 0.08);
	border-left: 3px solid #007017;
	color: #00541d;
	display: inline-flex;
	font-size: 0.92rem;
	font-weight: 600;
	gap: 0.55rem;
	margin: 0.75rem 0 0.5rem;
	padding: 0.55rem 0.85rem;
}
.bsp-customer-quote__active-dot {
	background: #007017;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(0, 112, 23, 0.6);
	display: inline-block;
	height: 0.55rem;
	width: 0.55rem;
}
@media (prefers-reduced-motion: no-preference) {
	.bsp-customer-quote__active-dot { animation: bsp-pulse 1.6s ease-in-out infinite; }
	@keyframes bsp-pulse {
		0%   { box-shadow: 0 0 0 0 rgba(0, 112, 23, 0.55); }
		60%  { box-shadow: 0 0 0 0.55rem rgba(0, 112, 23, 0); }
		100% { box-shadow: 0 0 0 0 rgba(0, 112, 23, 0); }
	}
}

/* Reorder-this-quote button + inline status text */
.bsp-account__quote-cta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
}
.bsp-account__quote-cta-status {
	font-size: 0.85rem;
}

/* Service-area "What we're known for" anchor brand list */
.bsp-service-area__brand-list {
	display: grid;
	gap: 0.4rem;
	list-style: disc;
	margin: 0.5rem 0 1rem;
	padding-left: 1.25rem;
}
.bsp-service-area__brand-list li { line-height: 1.5; }
.bsp-service-area__brand-list a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ============================================================
   .bsp-page-stub — friendly "page exists but content is light"
   layout used by /bath-showroom/ and /resources/ until full
   editorial content lands. Centered column, eyebrow + h1 +
   lede, optional meta dl, optional 3-up cards, CTA row.
   ============================================================ */
.bsp-page-stub {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.bsp-page-stub__inner {
	margin: 0 auto;
	max-width: 880px;
	padding: 0 var(--bsp-px);
}
.bsp-page-stub__inner h1 {
	margin: 0 0 1rem;
}
.bsp-page-stub__lede {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.5;
	margin: 0 0 2rem;
	max-width: 64ch;
}
.bsp-page-stub__meta {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 8px;
	display: grid;
	gap: 0.5rem 1.25rem;
	grid-template-columns: max-content 1fr;
	margin: 0 0 2rem;
	padding: 1.25rem 1.5rem;
}
.bsp-page-stub__meta dt {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin: 0;
}
.bsp-page-stub__meta dd {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}
.bsp-page-stub__meta a { color: var(--wp--preset--color--ink); text-decoration: underline; text-underline-offset: 2px; }
.bsp-page-stub__cta-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
}
.bsp-page-stub__note {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	font-style: italic;
	margin: 0;
}
.bsp-page-stub__cards {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	margin-top: 1rem;
}
@media (min-width: 720px) {
	.bsp-page-stub__cards { grid-template-columns: repeat(3, 1fr); }
}
.bsp-page-stub__card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.04);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
	padding: 1.25rem;
}
.bsp-page-stub__card h2 {
	font-size: var(--wp--preset--font-size--md);
	margin: 0;
}
.bsp-page-stub__card p {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
	margin: 0;
}
.bsp-page-stub__card p:last-child { margin-top: auto; }

/* ============================================================
   .bsp-cat-icons — homepage 6-up category strip with real product
   photos on white tiles (Home Depot pattern). Photos pull from each
   top-level category's default image option; the row mirrors the
   6 categories in the deeper category-grid section but reads as
   fast-scan navigation rather than rich cards (no count, no CTA,
   no description — photo + label only).
   ============================================================ */
.bsp-cat-icons {
	background: var(--wp--preset--color--base);
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.bsp-cat-icons__inner {
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: 0 var(--bsp-px);
}
.bsp-cat-icons__grid {
	display: grid;
	gap: 1rem;
	grid-auto-rows: 1fr;
	grid-template-columns: repeat(2, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 600px) { .bsp-cat-icons__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .bsp-cat-icons__grid { grid-template-columns: repeat(6, 1fr); } }
.bsp-cat-icons__item { min-width: 0; }
.bsp-cat-icons__item a {
	align-items: center;
	background: transparent;
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	height: 100%;
	min-width: 0;
	padding: 0.25rem;
	text-align: center;
	text-decoration: none;
}
.bsp-cat-icons__media {
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 12px;
	display: block;
	margin: 0;
	overflow: hidden;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	width: 100%;
}
.bsp-cat-icons__media .bsp-cat-icons__img,
.bsp-cat-icons__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}
.bsp-cat-icons__item a:hover .bsp-cat-icons__media,
.bsp-cat-icons__item a:focus-visible .bsp-cat-icons__media {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 8px 18px -10px rgb(0 0 0 / 0.15);
	transform: translateY(-2px);
}
.bsp-cat-icons__placeholder {
	align-items: center;
	color: var(--wp--preset--color--ink-muted);
	display: flex;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 2rem;
	font-weight: 700;
	height: 100%;
	justify-content: center;
}
.bsp-cat-icons__label {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.2;
}

/* ============================================================
   .bsp-trade-pro — "Are you a Pro?" trade-account merch hero block.
   Two-column layout: copy + perks on left, photo grid on right.
   Photo column is currently 4 placeholder portrait cards; swap to
   real BSP-staff <img> tags once Matt provides photos.
   ============================================================ */
.bsp-trade-pro {
	background: var(--wp--preset--color--primary-soft);
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.bsp-trade-pro__inner {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: 0 var(--bsp-px);
}
@media (min-width: 900px) {
	.bsp-trade-pro__inner { grid-template-columns: 1.1fr 1fr; align-items: center; }
}
.bsp-trade-pro__eyebrow {
	color: var(--wp--preset--color--primary-deep);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}
.bsp-trade-pro__title {
	color: var(--wp--preset--color--primary-deep);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	line-height: 1.05;
	margin: 0 0 1rem;
}
.bsp-trade-pro__lede {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.5;
	margin: 0 0 1.5rem;
	max-width: 56ch;
}
.bsp-trade-pro__perks {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
}
.bsp-trade-pro__perks li {
	align-items: flex-start;
	display: grid;
	gap: 0.65rem;
	grid-template-columns: 22px 1fr;
}
.bsp-trade-pro__perks svg {
	color: var(--wp--preset--color--success);
	flex-shrink: 0;
	height: 22px;
	width: 22px;
}
.bsp-trade-pro__perks strong {
	color: var(--wp--preset--color--ink);
	display: block;
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 0.1rem;
}
.bsp-trade-pro__perks span {
	color: var(--wp--preset--color--ink-soft);
	display: block;
	font-size: 0.95rem;
	line-height: 1.45;
}
.bsp-trade-pro__ctas {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.bsp-trade-pro__ctas .bsp-button small {
	display: block;
	font-size: 0.7rem;
	font-weight: 400;
	margin-top: 0.15rem;
	opacity: 0.85;
	text-transform: none;
	letter-spacing: 0;
}

/* Photo column — placeholder grid until Matt sends real BSP staff
   portraits. Each "card" is an <svg> avatar inside a softly-shadowed
   frame, captioned with name + role. Swap the .bsp-trade-pro__photo-frame
   inner for an <img> once photos arrive. */
/* Five-card team grid — 3 across the top, 2 centered on the bottom row.
   Achieved by using a 6-column track at md+ and spanning each card across
   two columns; cards 4 + 5 (5 total) automatically wrap and center
   because the bottom row only fills 4 of 6 columns. Mobile collapses to
   2-up like before. */
.bsp-trade-pro__photo-grid {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(2, 1fr);
	justify-content: center;
}
@media (min-width: 600px) {
	.bsp-trade-pro__photo-grid { grid-template-columns: repeat(6, 1fr); }
	.bsp-trade-pro__photo-grid > .bsp-trade-pro__photo-card { grid-column: span 2; }
	/* Bottom-row centering: cards 4 + 5 of 5 shift one column right so
	   the orphan pair sits centered under the 3 above. */
	.bsp-trade-pro__photo-grid > .bsp-trade-pro__photo-card:nth-child(4) { grid-column: 2 / span 2; }
	.bsp-trade-pro__photo-grid > .bsp-trade-pro__photo-card:nth-child(5) { grid-column: 4 / span 2; }
}
.bsp-trade-pro__photo-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
	overflow: hidden;
	padding: 0.85rem 0.85rem 0.6rem;
	text-align: center;
}
.bsp-trade-pro__photo-frame {
	align-items: center;
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--surface);
	border: 1px dashed var(--wp--preset--color--rule-strong);
	border-radius: 8px;
	color: var(--wp--preset--color--rule-strong);
	display: flex;
	justify-content: center;
	margin: 0 0 0.5rem;
}
.bsp-trade-pro__photo-frame svg { height: 40%; width: 40%; }
.bsp-trade-pro__photo-frame--filled {
	border: 0;
	overflow: hidden;
	padding: 0;
}
.bsp-trade-pro__photo-frame--filled picture,
.bsp-trade-pro__photo-frame--filled img {
	display: block;
	height: 100%;
	width: 100%;
}
.bsp-trade-pro__photo-frame--filled img {
	object-fit: cover;
	object-position: center top;
}
.bsp-trade-pro__photo-name {
	color: var(--wp--preset--color--ink);
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0;
}
.bsp-trade-pro__photo-role {
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.8rem;
	margin: 0;
}
.bsp-trade-pro__photo-caption {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	font-style: italic;
	margin: 0.85rem 0 0;
	text-align: center;
}

/* ============================================================
   .bsp-pillars — 4-pillar value-prop strip below the parts finder.
   Replaced the prior wordmark fallback (waiting on real brand
   logo SVGs from Matt). Mirrors SupplyHouse's "FREE SHIPPING /
   FAST DELIVERY / FREE RETURNS" pillar row, tuned to local-distributor
   value props.
   ============================================================ */
.bsp-pillars {
	background: var(--wp--preset--color--base);
	border-block: 1px solid var(--wp--preset--color--rule);
	padding-block: 2rem;
}
.bsp-pillars__inner {
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: 0 var(--bsp-px);
}
.bsp-pillars__grid {
	display: grid;
	gap: 1.25rem;
	grid-auto-rows: 1fr;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 600px) { .bsp-pillars__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .bsp-pillars__grid { grid-template-columns: repeat(4, 1fr); } }
.bsp-pillars__item {
	align-items: flex-start;
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
	padding: 0.5rem;
}
.bsp-pillars__item svg {
	color: var(--wp--preset--color--primary);
	height: 32px;
	width: 32px;
}
.bsp-pillars__num {
	color: var(--wp--preset--color--ink);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.05;
	margin: 0.15rem 0 0.1rem;
}
.bsp-pillars__num small {
	color: var(--wp--preset--color--ink-muted);
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0;
	margin-left: 0.15rem;
}
.bsp-pillars__copy {
	color: var(--wp--preset--color--ink-soft);
	font-size: 0.95rem;
	line-height: 1.45;
	margin: 0;
}

/* ============================================================
   .bsp-parts-finder — homepage "Quickly find parts" replacement-part
   wizard. Two-column at desktop (visual collage + form), single-column
   on mobile. The form GETs to /search/ which already runs Typesense
   instant search; the brand+q params get the result narrowed to the
   chosen brand's SKU set.
   ============================================================ */
.bsp-parts-finder {
	background: var(--wp--preset--color--surface);
	border-block: 1px solid var(--wp--preset--color--rule);
	padding-block: clamp(2rem, 5vw, 3.5rem);
}
.bsp-parts-finder__inner {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
	padding: 0 var(--bsp-px);
}
@media (min-width: 900px) {
	.bsp-parts-finder__inner {
		align-items: center;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}
.bsp-parts-finder__visual {
	min-width: 0;
}
.bsp-parts-finder__visual-figure {
	aspect-ratio: 3 / 2;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 12px;
	margin: 0;
	overflow: hidden;
}
.bsp-parts-finder__visual-figure picture,
.bsp-parts-finder__visual-figure img {
	display: block;
	height: 100%;
	width: 100%;
}
.bsp-parts-finder__visual-img {
	object-fit: cover;
	object-position: center;
}
.bsp-parts-finder__copy {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.bsp-parts-finder__eyebrow {
	align-items: center;
	color: var(--wp--preset--color--ink-muted);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	gap: 0.5rem;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}
.bsp-parts-finder__badge {
	background: var(--wp--preset--color--accent);
	border-radius: 999px;
	color: var(--wp--preset--color--accent-ink);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 0.15rem 0.5rem;
	text-transform: uppercase;
}
.bsp-parts-finder__title {
	color: var(--wp--preset--color--ink);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.05;
	margin: 0.25rem 0 0.5rem;
}
.bsp-parts-finder__lede {
	color: var(--wp--preset--color--ink-soft);
	font-size: 1rem;
	line-height: 1.5;
	margin: 0 0 1.25rem;
	max-width: 56ch;
}
.bsp-parts-finder__form {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
	display: grid;
	gap: 0;
	overflow: hidden;
}
.bsp-parts-finder__step {
	align-items: center;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	display: grid;
	gap: 0 1rem;
	grid-template-columns: 32px 1fr;
	padding: 0.85rem 1rem;
}
.bsp-parts-finder__step:last-of-type { border-bottom: 0; }
.bsp-parts-finder__step-num {
	align-items: center;
	background: var(--wp--preset--color--primary-soft);
	border-radius: 50%;
	color: var(--wp--preset--color--primary-deep);
	display: flex;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85rem;
	font-weight: 700;
	grid-row: span 2;
	height: 32px;
	justify-content: center;
	width: 32px;
}
.bsp-parts-finder__step-label {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.bsp-parts-finder__select,
.bsp-parts-finder__input {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	min-height: 28px;
	outline: none;
	padding: 0;
	width: 100%;
}
.bsp-parts-finder__select { appearance: none; cursor: pointer; padding-right: 1.25rem; }
.bsp-parts-finder__step:focus-within { background: var(--wp--preset--color--primary-soft); }
.bsp-parts-finder__submit {
	align-items: center;
	background: var(--wp--preset--color--primary);
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--primary-ink);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	gap: 0.5rem;
	justify-content: center;
	min-height: 56px;
	padding: 0.85rem 1.5rem;
	width: 100%;
}
.bsp-parts-finder__submit:hover,
.bsp-parts-finder__submit:focus-visible {
	background: var(--wp--preset--color--primary-deep);
}
.bsp-parts-finder__help {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 1rem 0 0;
}
.bsp-parts-finder__help a {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}