/* bundle-archive-999d80-d0b9b15d1031.css — generated by Cool_Bear_CSS_Bundler; edit the sources, not this file. */

/* ---- cb-wheel-archive (/wp-content/plugins/cool-bear-core/assets/css/wheel-archive.css) ---- */
/**
 * Wheel archive — Level-1 series tiles + Level-2 design grid (wheels-remodel).
 *
 * Loaded by Cool_Bear_Wheel_Archive::enqueue_styles() on the /wheels/ archive
 * and the /wheels/series/{slug}/ Level-2 route.
 */

/* Page container — this route loads wheel-archive.css but NOT the theme's
   archive.css, so the .cb-plp__container width + side padding never applied and
   the content (breadcrumb, grid) sat flush to the viewport edge (operator
   2026-06-29). Mirror the theme archive container here. */
.cb-plp__container {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--preset--spacing--40, 24px);
	padding-right: var(--wp--preset--spacing--40, 24px);
}
@media (min-width: 1024px) {
	.cb-plp__container {
		padding-left: var(--wp--preset--spacing--60, 40px);
		padding-right: var(--wp--preset--spacing--60, 40px);
	}
}

/* ── Level 1: series tiles ─────────────────────────────────────────── */
.cb-wheel-series-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.25rem;
	margin: 1.5rem 0 2.5rem;
}

.cb-wheel-series-tile {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.cb-wheel-series-tile:hover,
.cb-wheel-series-tile:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

.cb-wheel-series-tile__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: #0d0d0f;
	overflow: hidden;
}

.cb-wheel-series-tile__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cb-wheel-series-tile__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 2.5rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.55);
}

.cb-wheel-series-tile__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.9rem 1rem 1.1rem;
}

.cb-wheel-series-tile__eyebrow {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent, #b8860b);
}

.cb-wheel-series-tile__headline {
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.25;
}

.cb-wheel-series-tile__meta {
	font-size: 0.8rem;
	color: rgba(0, 0, 0, 0.6);
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: baseline;
}

.cb-wheel-series-tile__band {
	font-variant-numeric: tabular-nums;
	color: rgba(0, 0, 0, 0.45);
}

/* ── Level 2: design grid ──────────────────────────────────────────── */
.cb-wheel-design-grid__intro {
	margin: 1rem 0 1.75rem;
	max-width: 60ch;
}

.cb-wheel-design-grid__eyebrow {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent, #b8860b);
	margin: 0 0 0.25rem;
}

.cb-wheel-design-grid__headline {
	font-size: 1.6rem;
	line-height: 1.2;
	margin: 0 0 0.5rem;
}

.cb-wheel-design-grid__body {
	color: rgba(0, 0, 0, 0.7);
	font-size: 0.95rem;
	line-height: 1.55;
}

.cb-wheel-design-grid__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 1rem;
}

.cb-wheel-design-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: var(--wp--preset--color--text, #f0f0f2);
	padding: 0.75rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e38);
	border-radius: 10px;
	background: var(--wp--preset--color--surface, #18181c);
	transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.cb-wheel-design-tile:hover,
.cb-wheel-design-tile:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
	border-color: var(--wp--preset--color--border-strong, #42424e);
}

.cb-wheel-design-tile__media {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--surface-sunken, #101014);
	border-radius: 8px;
}

.cb-wheel-design-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.cb-wheel-design-tile__code {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--text, #f0f0f2);
}

/* ── Stacked series sections (xyz-racing.com/Wheels layout) ──────────── */
.cb-wheel-series-list {
	margin: 1.5rem 0 2.5rem;
}

.cb-wheel-section {
	margin: 0 0 3.5rem;
}

.cb-wheel-banner {
	width: 100%;
	aspect-ratio: 1498 / 336;
	background: #0d0d0f;
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
}

.cb-wheel-banner__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.cb-wheel-banner--placeholder {
	aspect-ratio: 1498 / 336;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.cb-wheel-banner--placeholder span {
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.cb-wheel-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 1rem;
	margin: 1rem 0 1.25rem;
}

.cb-wheel-section__title {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.1;
	margin: 0;
}

.cb-wheel-section__title a {
	color: inherit;
	text-decoration: none;
}

.cb-wheel-section__tagline {
	flex-basis: 100%;
	margin: 0;
	font-size: 1rem;
	font-style: italic;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
}

.cb-wheel-section__sizes {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--text-subtle, #9898a8);
	font-variant-numeric: tabular-nums;
}

/* Fuller series description under the header, above the design grid. */
.cb-wheel-section__intro {
	max-width: 70ch;
	margin: -0.25rem 0 1.5rem;
}

.cb-wheel-section__intro p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
}

.cb-wheel-section__sizes-label {
	margin-right: 0.35rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-subtle, #9898a8);
}

.cb-wheel-design-tile__price {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--wp--preset--color--text, #f0f0f2);
	font-variant-numeric: tabular-nums;
}

/* "Select options" CTA on each design tile */
.cb-wheel-design-tile__cta {
	margin-top: 0.15rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, #e8ff00);
}

.cb-wheel-design-tile:hover .cb-wheel-design-tile__cta,
.cb-wheel-design-tile:focus-visible .cb-wheel-design-tile__cta {
	text-decoration: underline;
}

/* ---- cb-vehicle-picker-css (/wp-content/plugins/cool-bear-core/assets/css/vehicle-picker.css) ---- */
/**
 * Vehicle Picker -- sticky header bar + inline shortcode styles.
 *
 * Uses theme.json CSS custom properties for all color/spacing/typography tokens.
 * Mobile-first responsive with compact bar + expand overlay.
 *
 * @package Cool_Bear_Core
 * @since   0.7.0
 */

/* === Sticky Bar === */
/* 2026-06-06 decompression: the bar was height-locked at 56px while its
   content (label + 44px select) needed ~62px — everything crushed. The bar
   now sizes to content with real breathing room, the redundant visible
   labels are dropped in the bar variant (each select's placeholder already
   names the field; labels stay for screen readers), selects share the row
   width evenly, and the bar is centred with a max width instead of running
   edge-to-edge. */

.cb-vehicle-picker-bar {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 1px 0 rgb(255 255 255 / 0.03) inset;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--30);
}

/* === Dropdowns container === */

.cb-vp-dropdowns {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	max-width: 980px;
}

.cb-vp-field {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
}

/* === Labels === */
/* Visible labels are redundant with the select placeholders in the slim
   bar — keep them in the accessibility tree only. */

.cb-vp-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* === Select elements === */

.cb-vp-select {
	height: 46px;
	padding: 8px 14px;
	background-color: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	color: var(--wp--preset--color--text);
	font-size: 0.95rem;
	font-family: inherit;
	transition: border-color 150ms ease-out, background-color 150ms ease-out;
	appearance: auto;
	width: 100%;
	min-width: 0;
}

.cb-vp-select:hover:not(:disabled) {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 40%, var(--wp--preset--color--border));
}

.cb-vp-select:focus {
	border-color: var(--wp--preset--color--accent);
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.cb-vp-select:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* === Find parts button === */

.cb-vp-find {
	height: 46px;
	padding: 0 28px;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	border-radius: 6px;
	white-space: nowrap;
	transition: opacity 150ms ease-out;
}

.cb-vp-find:disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* === Clear + Change links === */

.cb-vp-selected {
	display: none;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.cb-vp-has-vehicle .cb-vp-selected {
	display: flex;
}

.cb-vp-compact {
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--text);
	white-space: nowrap;
}

.cb-vp-clear {
	color: var(--wp--preset--color--destructive);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	white-space: nowrap;
}

.cb-vp-clear:hover {
	text-decoration: underline;
}

.cb-vp-change {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	white-space: nowrap;
}

.cb-vp-change:hover {
	text-decoration: underline;
}

/* === Selected state: hide dropdowns, show compact === */

.cb-vp-has-vehicle .cb-vp-dropdowns {
	display: none;
}

.cb-vp-has-vehicle.cb-vp-changing .cb-vp-dropdowns {
	display: flex;
}

.cb-vp-has-vehicle.cb-vp-changing .cb-vp-selected {
	display: none;
}

/* === Mobile toggle (hidden on desktop) === */

.cb-vp-mobile-toggle {
	display: none;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	background: none;
	border: none;
	color: var(--wp--preset--color--text);
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	padding: 0;
	flex: 1;
	justify-content: space-between;
}

.cb-vp-chevron {
	font-size: 0.75rem;
	color: var(--wp--preset--color--text-muted);
	transition: transform 150ms ease-out;
}

.cb-vp-expanded .cb-vp-chevron {
	transform: rotate(180deg);
}

/* === Inline shortcode styles === */

.cb-vehicle-picker {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: flex-end;
}

.cb-vehicle-picker .cb-vp-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cb-vehicle-picker .cb-vp-field label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.cb-vehicle-picker .cb-vp-select {
	height: 44px;
	padding: 8px 16px;
	background-color: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	color: var(--wp--preset--color--text);
	font-size: 1rem;
	min-width: 160px;
}

/* === Mobile responsive (< 768px) === */

@media (max-width: 767px) {
	.cb-vehicle-picker-bar {
		padding: 10px var(--wp--preset--spacing--30);
	}

	/* Hide dropdowns and selected state by default on mobile */
	.cb-vehicle-picker-bar .cb-vp-dropdowns,
	.cb-vehicle-picker-bar .cb-vp-selected {
		display: none;
	}

	/* Show mobile toggle */
	.cb-vp-mobile-toggle {
		display: flex;
	}

	/* Expanded overlay */
	.cb-vehicle-picker-bar.cb-vp-expanded {
		position: fixed;
		inset: 0;
		z-index: 200;
		height: auto;
		background: rgba(13, 13, 15, 0.95);
		flex-direction: column;
		padding: var(--wp--preset--spacing--40);
		align-items: stretch;
		justify-content: flex-start;
		gap: var(--wp--preset--spacing--30);
	}

	.cb-vehicle-picker-bar.cb-vp-expanded .cb-vp-dropdowns {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--30);
	}

	.cb-vehicle-picker-bar.cb-vp-expanded .cb-vp-field {
		width: 100%;
	}

	.cb-vehicle-picker-bar.cb-vp-expanded .cb-vp-select {
		width: 100%;
		min-width: unset;
	}

	.cb-vehicle-picker-bar.cb-vp-expanded .cb-vp-find {
		width: 100%;
	}

	.cb-vehicle-picker-bar.cb-vp-expanded .cb-vp-selected {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--20);
		align-items: center;
	}

	/* Shortcode: stack vertically on mobile */
	.cb-vehicle-picker {
		flex-direction: column;
	}

	.cb-vehicle-picker .cb-vp-field {
		width: 100%;
	}

	.cb-vehicle-picker .cb-vp-select {
		width: 100%;
		min-width: unset;
	}
}

/* === Reduced motion === */

@media (prefers-reduced-motion: reduce) {
	.cb-vp-select,
	.cb-vp-find,
	.cb-vp-chevron {
		transition: none;
	}
}

/* ─── a11y: loading + accessible error/retry (Deploy-3 jxn) ─────────────────── */
.cb-vp-dropdowns[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
}
.cb-vp-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding: 8px 10px;
	border-radius: 4px;
	background: rgba(200, 16, 46, 0.08);
	color: var(--wp--preset--color--accent, #c8102e);
	font-size: 0.85rem;
	line-height: 1.4;
}
.cb-vp-error__msg {
	flex: 1 1 auto;
}
.cb-vp-error__retry {
	flex: none;
	padding: 5px 12px;
	border: 1px solid currentColor;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
}
.cb-vp-error__retry:hover,
.cb-vp-error__retry:focus {
	background: var(--wp--preset--color--accent, #c8102e);
	color: #fff;
}

/* ---- cb-faceted-filters-css (/wp-content/plugins/cool-bear-core/assets/css/faceted-filters.css) ---- */
/**
 * Faceted Filters -- sidebar, checkboxes, price range, chips, mobile drawer.
 *
 * Uses theme.json design tokens (CSS custom properties) exclusively.
 *
 * @package Cool_Bear_Core
 * @since   0.8.0
 */

/* --- Filter Sidebar --- */

.cb-plp__filters {
	width: 260px;
	flex-shrink: 0;
	background-color: var(--wp--preset--color--surface);
	border-right: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	position: relative;
}

/* No inner scrollbar (UX, 2026-06-11): the theme's archive.css makes the
   sidebar sticky with max-height + overflow-y at >=1024px, clipping the
   filter list behind its own scrollbar. The page scrolls; the sidebar
   doesn't. Higher specificity than the theme's `.cb-plp__sidebar` rule so
   load order can't matter. */
@media (min-width: 1024px) {
	.cb-plp .cb-plp__sidebar {
		position: static;
		max-height: none;
		overflow-y: visible;
	}
}

/* --- Filter Group --- */

/* DESIGN.md §3 — tracked-caps group headers: 11px / 0.09em / text-subtle. */
.cb-filter-group__heading {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--wp--preset--color--text-subtle);
	margin: 0 0 var(--wp--preset--spacing--20);
}

/* Hairline separators, tighter rhythm between groups. */
.cb-filter-divider {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
	margin: 14px 0;
}

/* --- Checkboxes --- */

/* Compact rows (DESIGN.md: compact list, hairline structure). Desktop rows
   read as a tight catalogue list; the 44px tap target is restored inside
   the mobile drawer below. */
.cb-filter-checkbox {
	display: flex;
	align-items: center;
	min-height: 30px;
	padding: 2px 0;
	gap: var(--wp--preset--spacing--20);
	cursor: pointer;
}

.cb-filter-checkbox__input {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: 3px;
	background-color: var(--wp--preset--color--surface-raised);
	cursor: pointer;
	position: relative;
}

.cb-filter-checkbox__input:checked {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.cb-filter-checkbox__input:checked::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 6px;
	height: 10px;
	border: solid var(--wp--preset--color--text-on-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.cb-filter-checkbox__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.cb-filter-checkbox__label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--preset--color--text);
}

.cb-filter-count {
	margin-left: auto;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* --- Active Filter Chips --- */

.cb-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--40);
}

.cb-filter-chips:empty {
	margin-bottom: 0;
}

.cb-filter-chip {
	display: inline-flex;
	align-items: center;
	background: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--text);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	padding: 4px 8px;
	font-size: var(--wp--preset--font-size--small);
	gap: 4px;
}

.cb-filter-chip--clear {
	cursor: pointer;
	color: var(--wp--preset--color--accent);
	background: transparent;
	border: none;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 4px 8px;
}

.cb-filter-chip__remove {
	background: none;
	border: none;
	color: var(--wp--preset--color--text-muted);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 0;
}

.cb-filter-chip__remove:hover {
	color: var(--wp--preset--color--text);
}

/* --- Active Filter chips (server-rendered, removable links) ---
 * SSR counterpart of the JS .cb-filter-chips strip: one <a> per active facet
 * value linking to the same URL with that value removed. Same pill visual as
 * the JS chips so the two layers read identically. */
.cb-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--40);
}

.cb-active-filter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--text);
	border: 1px solid var(--wp--preset--color--border-strong, #42424e);
	border-radius: 6px;
	padding: 4px 10px;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	transition: border-color 150ms ease, background-color 150ms ease;
}

.cb-active-filter:hover,
.cb-active-filter:focus-visible {
	border-color: var(--wp--preset--color--accent, #e8ff00);
	background: var(--wp--preset--color--surface);
	outline: none;
}

.cb-active-filter__x {
	font-size: 12px;
	line-height: 1;
	color: var(--wp--preset--color--text-muted);
}

.cb-active-filter:hover .cb-active-filter__x,
.cb-active-filter:focus-visible .cb-active-filter__x {
	color: var(--wp--preset--color--accent, #e8ff00);
}

/* --- Price Range --- */

.cb-filter-range__inputs {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.cb-filter-range__label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}

.cb-filter-range__label span {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.cb-filter-range__min,
.cb-filter-range__max {
	width: 100%;
	height: 36px;
	padding: 4px 8px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	background: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--small);
}

.cb-filter-range__min:focus,
.cb-filter-range__max:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}

.cb-filter-range__sep {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
	margin-top: 18px;
}

/* --- Vehicle Fitment Filter --- */

.cb-filter-vehicle__active {
	color: var(--wp--preset--color--text);
	font-weight: 700;
	margin: 0 0 8px;
}

.cb-filter-vehicle__hint {
	margin: 0;
}

/* --- In-sidebar Vehicle Selects (UX, 2026-06-11) --- */
/* Overrides the inline-shortcode `.cb-vehicle-picker` row layout from
   vehicle-picker.css (higher specificity): the sidebar instance stacks
   vertically with compact dark inputs per DESIGN.md §4 (surface-raised
   fill, 1px border-strong, 2px radius max). */

.cb-plp__filters .cb-filter-vehicle-picker {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 8px;
}

.cb-plp__filters .cb-filter-vehicle-picker .cb-vp-field {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.cb-plp__filters .cb-filter-vehicle-picker .cb-vp-select {
	width: 100%;
	min-width: 0;
	height: 36px;
	padding: 4px 8px;
	background-color: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--border-strong, var(--wp--preset--color--border));
	border-radius: 2px;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--small);
}

.cb-plp__filters .cb-filter-vehicle-picker .cb-vp-select:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.cb-plp__filters .cb-filter-vehicle-picker .cb-vp-select:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}

/* --- Drawer Close Button --- */

.cb-filter-drawer-close {
	display: none;
	position: absolute;
	top: var(--wp--preset--spacing--30);
	right: var(--wp--preset--spacing--30);
	background: none;
	border: none;
	color: var(--wp--preset--color--text-muted);
	font-size: 24px;
	cursor: pointer;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
}

/* --- Mobile Apply Button --- */

.cb-filter-mobile-apply {
	display: none;
	padding: var(--wp--preset--spacing--40) 0 0;
}

.cb-filter-apply {
	display: block;
	width: 100%;
	height: 48px;
	line-height: 48px;
	text-align: center;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body, 1rem);
	border: none;
	border-radius: 6px;
	cursor: pointer;
}

/* --- Mobile Toggle Button --- */

.cb-filter-toggle {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 56px;
	background: var(--wp--preset--color--surface);
	border: none;
	border-top: 1px solid var(--wp--preset--color--border);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 90;
	cursor: pointer;
	gap: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--body, 1rem);
	font-weight: 600;
}

.cb-filter-toggle__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--text-on-accent);
	font-size: 12px;
	font-weight: 600;
}

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

@media (max-width: 767px) {
	.cb-filter-toggle {
		display: flex;
	}

	.cb-filter-drawer-close {
		display: flex;
	}

	.cb-filter-mobile-apply {
		display: block;
	}

	.cb-plp__filters {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 85vw;
		max-width: 360px;
		z-index: 200;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform 200ms ease-out;
		border-right: 1px solid var(--wp--preset--color--border);
	}

	.cb-filter-drawer-open .cb-plp__filters {
		transform: translateX(0);
	}

	/* Overlay backdrop */
	.cb-filter-drawer-open::after {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 199;
	}

	/* Add bottom padding for mobile toggle */
	.cb-plp__grid {
		padding-bottom: 64px;
	}

	/* Restore comfortable tap targets inside the drawer (desktop rows are
	   compact; touch needs 44px). */
	.cb-filter-checkbox {
		min-height: 44px;
		padding: 0;
	}

	.cb-plp__filters .cb-filter-vehicle-picker .cb-vp-select {
		height: 44px;
	}
}

/* --- Reduced Motion --- */

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

/* D9 — zero-count facet options are noise; hidden but kept in DOM so AJAX
   count refreshes (and checked rows) can resurface them. */
.cb-filter-checkbox--empty {
	display: none;
}

/* ---- cb-product-grid-css (/wp-content/plugins/cool-bear-core/assets/css/product-grid.css) ---- */
/**
 * Product Grid + Product Card + Load More styles.
 *
 * Uses theme.json design tokens (CSS custom properties) exclusively.
 *
 * @package Cool_Bear_Core
 * @since   0.8.0
 */

/* --- PLP Layout --- */

.cb-plp {
	display: flex;
	gap: 0;
	align-items: flex-start;
}

/* --- Product Grid ---
 * The PHP shortcode emits all product cards inside a single `.cb-plp__grid`
 * wrapper. The List/Grid toggle re-flows that same wrapper via the data-view
 * attribute on the `.cb-plp` main element (no separate markup per view).
 * Selectors below are scoped under `main.cb-plp[data-view=...]` so they win
 * over the theme archive.css fallback rules. */

/* Match the PLP shell to the widened 1280px header/homepage shell — the
   archive container sat at ~963px so every filtered view (?cb_type=…) read
   as squashed against the header bar (operator, 2026-07-11). !important
   outguns the wp-container constrained-layout child clamp, same pattern as
   .cb-header__bar in the theme's header.css. */
.cb-plp .cb-plp__container {
	/* Explicit width, not just max-width: on shop-by-car landings the
	   container's parent group renders as a plain block (different generated
	   wp-container layout than the archive's flex parent), and the container
	   under-resolved to ~1118px — visibly slimmer than every other page
	   (operator, 2026-08-18, /coilovers/buick/). Forcing the width makes the
	   shell identical in both parent contexts. */
	width: min(1280px, 94vw) !important;
	max-width: min(1280px, 94vw) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.cb-plp__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50) 0;
	position: relative;
}

/* Grid view (default) — 3-up desktop. */
main.cb-plp[data-view="grid"] .cb-plp__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

/* Coilover archive grid — half-size cards (operator request 2026-07-10):
   ~150px min tracks auto-fill to ~6-up on desktop (was 3-up), tighter gap.
   Scoped by data-cb-archive so brakes/wheels/parts keep the 3-up layout. */
main.cb-plp[data-cb-archive="coilover"][data-view="grid"] .cb-plp__grid {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
}

/* List view — single-column rows; the same cards stack full-width. */
main.cb-plp[data-view="list"] .cb-plp__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

/* List view (≥768px): lay each card out as a single aligned row —
 *   [ image (fixed, full height) | title (fills the middle) | buy rail ]
 * where the buy rail stacks the price DIRECTLY above a compact Add-to-basket
 * button, and everything is vertically centred. A CSS grid over the flat card
 * markup (image, title, price, cta-wrap) — the image spans both rows on the
 * left, the title spans both rows in the middle, and price/CTA occupy the two
 * rows of the right rail. Replaces the old flex row whose auto-margined CTA
 * dropped to the card's bottom-right (the "out of sync" layout). */
@media (min-width: 768px) {
	main.cb-plp[data-view="list"] .cb-product-card {
		display: grid;
		grid-template-columns: 168px minmax(0, 1fr) minmax(156px, auto);
		grid-template-rows: auto auto;
		align-items: center;
		column-gap: var(--wp--preset--spacing--50);
		padding-right: var(--wp--preset--spacing--50);
	}

	main.cb-plp[data-view="list"] .cb-product-card__image {
		grid-column: 1;
		grid-row: 1 / -1;
		align-self: stretch;
		height: 100%;
	}

	main.cb-plp[data-view="list"] .cb-product-card__image img {
		height: 100%;
		/* Fill the fixed-width column's full height; the graphite well letterboxes
		   seamlessly since the blueprint tiles share its background. */
		aspect-ratio: auto;
		object-fit: contain;
	}

	main.cb-plp[data-view="list"] .cb-product-card__title {
		grid-column: 2;
		grid-row: 1 / -1;
		padding: var(--wp--preset--spacing--30) 0;
		font-size: 1.0625rem;
	}

	/* Right buy rail: price on top row, button on the row directly beneath it. */
	main.cb-plp[data-view="list"] .cb-product-card__price {
		grid-column: 3;
		grid-row: 1;
		align-self: end;
		margin: 0;
		padding: 0;
		text-align: center;
	}

	main.cb-plp[data-view="list"] .cb-product-card__cta-wrap {
		grid-column: 3;
		grid-row: 2;
		align-self: start;
		margin: var(--wp--preset--spacing--20, 8px) 0 0;
		width: 100%;
	}

	main.cb-plp[data-view="list"] .cb-product-card__cta {
		border-radius: 6px;
	}
}

.cb-plp__grid--loading {
	opacity: 0.5;
	pointer-events: none;
}

.cb-plp__grid--fade-in {
	animation: cbGridFadeIn 200ms ease-out;
}

@keyframes cbGridFadeIn {
	from {
		opacity: 0.5;
	}
	to {
		opacity: 1;
	}
}

/* --- Product Card --- */

.cb-product-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0; /* DESIGN.md §4 — sharp corners on cards */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

/* Grid view (default): centre each card as a vertical stack — image, title,
   price, then add-to-basket — so the price reads directly above the CTA and
   the text is centred under the render (operator request, x2e item 12). Scoped
   to the grid view so the list view's horizontal-row layout below is untouched. */
main.cb-plp[data-view="grid"] .cb-product-card {
	align-items: center;
	text-align: center;
}

/* Let the title/price span the card width so centring is true, and push the
   image + CTA to the card edges. border-box: under the sitewide content-box
   default, width:100% + the elements' own 16px side padding overflowed the
   card by 16px each side (clipped by overflow:hidden → text ran hard against
   the card edges). */
main.cb-plp[data-view="grid"] .cb-product-card__image,
main.cb-plp[data-view="grid"] .cb-product-card__title,
main.cb-plp[data-view="grid"] .cb-product-card__price,
main.cb-plp[data-view="grid"] .cb-product-card__cta-wrap {
	width: 100%;
	box-sizing: border-box;
}

/* Belt-and-braces against the wpautop phantom <p>: render_product_card now
   emits single-line markup, but any future multi-line regression would
   re-materialise an empty <p> inside the card (32px of margin = the blank
   band under every list-row image). Kill it at render. */
.cb-product-card > p:not([class]) {
	display: none;
	margin: 0;
}

/* Half-size coilover grid cards: scale the type down with the card so the
   range bar, two-line title, price and CTA still fit a ~150-190px card. */
main.cb-plp[data-cb-archive="coilover"][data-view="grid"] .cb-product-card__title {
	font-size: 0.8125rem;
	padding: var(--wp--preset--spacing--20, 8px) var(--wp--preset--spacing--20, 8px) 0;
}
main.cb-plp[data-cb-archive="coilover"][data-view="grid"] .cb-product-card__price {
	font-size: 0.9375rem;
	padding: 4px var(--wp--preset--spacing--20, 8px);
}
main.cb-plp[data-cb-archive="coilover"][data-view="grid"] .cb-product-card__cta {
	height: 34px;
	line-height: 32px;
	font-size: 0.78rem;
}
main.cb-plp[data-cb-archive="coilover"][data-view="grid"] .cb-range-badge.cb-range-badge--bar {
	font-size: 0.55rem;
	letter-spacing: 0.08em;
	padding: 4px 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
main.cb-plp[data-cb-archive="coilover"][data-view="grid"] .cb-img-well:has(> .cb-range-badge--bar) img {
	top: 1.4rem;
	height: calc(100% - 1.4rem);
}

.cb-product-card:hover {
	background: var(--wp--preset--color--surface-raised);
	border-color: rgba(232, 255, 0, 0.3);
}

.cb-product-card__image {
	display: block;
	overflow: hidden;
}

.cb-product-card__image img {
	aspect-ratio: 1 / 1;
	/* contain on square sources — crops are pre-squared 800x800 with their
	   own built-in margin, so they fill the well edge-to-edge. */
	object-fit: contain;
	width: 100%;
	transition: transform 300ms ease-out;
}

.cb-product-card:hover .cb-product-card__image img {
	transform: scale(1.03);
}

/* Branded fallback tile (no real product imagery available). Already an SVG at
   4:3 — fill the same slot as real thumbnails and skip the hover zoom so the
   wordmark stays crisp. */
.cb-product-card__image .cb-card-fallback {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	background: var(--wp--preset--color--surface-raised);
}

.cb-product-card:hover .cb-product-card__image .cb-card-fallback {
	transform: none;
}

.cb-product-card__title {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--text);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cb-product-card__title a {
	color: inherit;
	text-decoration: none;
}

.cb-product-card__price {
	font-size: 1.1875rem;
	font-weight: 700;
	/* DESIGN.md §2 accent budget: card prices read catalogue-white; yellow is
	   reserved for the buy moment (PDP/cart) and primary actions. */
	color: var(--wp--preset--color--text);
	padding: 4px var(--wp--preset--spacing--30);
	margin: 0;
}

.cb-product-card__lead-time {
	color: var(--wp--preset--color--text-muted);
	padding: 4px var(--wp--preset--spacing--30);
	margin: 0;
}

.cb-product-card__cta-wrap {
	margin-top: auto; /* pin the CTA row to the bottom of the flex-column card */
	display: block;
}

/* Year range on its own line in LIST view (operator, 2026-07-11) so the year
   reads separate from the car description; grid keeps it inline. */
main.cb-plp[data-view="list"] .cb-product-card__years {
	display: block;
}

/* VAT caption ("inc. VAT" / "ex. VAT") a couple of sizes smaller than the
   price it annotates — em so it scales in both views (operator, 2026-07-11). */
.cb-product-card__vat {
	font-size: 0.68em;
	font-weight: 500;
	color: var(--wp--preset--color--text-muted, #9898A8);
}

/* Grid view: bottom-align the price+CTA pair across neighbouring cards —
   titles wrap to different line counts, and a fixed CTA margin let short
   titles pull the button up out of line with its neighbours. margin-top:auto
   on the PRICE pushes the pair to the card bottom in every card. */
main.cb-plp[data-view="grid"] .cb-product-card__price {
	margin-top: auto;
}

/* Grid view: keep the Add-to-basket button directly beneath the price (the
   price→button pairing the buyer scans), with a small gap, rather than pushing
   it to the card's far bottom edge. Titles are 2-line-clamped so cards still
   align. The button stays full-bleed (footer bar). List view keeps
   margin-top:auto (rule above). */
main.cb-plp[data-view="grid"] .cb-product-card__cta-wrap {
	margin-top: var(--wp--preset--spacing--30);
}
.cb-product-card__cta {
	display: block;
	text-align: center;
	height: 44px;
	line-height: 42px;
	font-weight: 600;
	border-radius: 0;
	text-decoration: none;
}

/* Card CTA (2026-07-03 operator: "put some colour into the Add to basket").
   Was a transparent ghost outline that only filled on hover — it read as no
   button at all. Now a solid accent-fill buy button (matches the PDP add-to-
   basket), with a slightly deeper hover. Class name kept --ghost to avoid a
   PHP markup change; it is no longer a ghost. */
.cb-product-card__cta--ghost {
	background: var(--wp--preset--color--accent);
	border: 1px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--text-on-accent, #0d0d0f);
	font-weight: 700;
	transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out, transform 120ms ease-out;
}

.cb-product-card__cta--ghost:hover,
.cb-product-card__cta--ghost:focus {
	background: #f2ff4d;
	border-color: #f2ff4d;
	color: var(--wp--preset--color--text-on-accent, #0d0d0f);
}

/* --- Load More --- */

.cb-load-more-wrap {
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--60);
}

.cb-load-more {
	width: 200px;
	height: 48px;
	background: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--body, 1rem);
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 150ms ease-out;
}

.cb-load-more:hover {
	background: var(--wp--preset--color--surface);
}

.cb-load-more--loading {
	opacity: 0.7;
	pointer-events: none;
}

/* --- Crawlable Numbered Pagination --- */

.cb-pagination {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 8px);
	margin-top: var(--wp--preset--spacing--60);
}

.cb-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	color: var(--wp--preset--color--text);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

.cb-pagination a.page-numbers:hover {
	background: var(--wp--preset--color--surface-raised);
	border-color: rgba(232, 255, 0, 0.3);
}

.cb-pagination .page-numbers.current {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--text-on-accent, #000);
}

.cb-pagination .page-numbers.dots {
	border-color: transparent;
	min-width: 0;
	padding: 0 4px;
}

/* --- Product Count (sr-only) --- */

.cb-product-count {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- No Results --- */

.cb-no-results {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
}

.cb-no-results__heading {
	color: var(--wp--preset--color--text);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.cb-no-results__body {
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 var(--wp--preset--spacing--40);
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

.cb-no-results__clear,
.cb-no-results__clear-vehicle {
	background: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--text);
	padding: 8px 24px;
	border-radius: 2px;
	font-size: var(--wp--preset--font-size--body, 1rem);
	font-weight: 600;
	cursor: pointer;
}

/* Vehicle no-results recovery: category links beneath the "Clear vehicle" button. */
.cb-no-results__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--30, 16px);
	margin-top: var(--wp--preset--spacing--40, 24px);
}
.cb-no-results__cat-link {
	color: var(--wp--preset--color--accent, #c8102e);
	font-weight: 600;
	text-decoration: underline;
}

/* --- Tablet (2 columns) --- */

@media (max-width: 900px) {
	main.cb-plp[data-view="grid"] .cb-plp__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- Mobile (1 column) --- */

@media (max-width: 600px) {
	main.cb-plp[data-view="grid"] .cb-plp__grid,
	main.cb-plp[data-view="list"] .cb-plp__grid {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
	}

	/* On mobile, list view falls back to the stacked card layout (no row split). */
	main.cb-plp[data-view="list"] .cb-product-card {
		flex-direction: column;
	}
}

/* --- Reduced Motion --- */

@media (prefers-reduced-motion: reduce) {
	.cb-product-card {
		transition: none;
	}

	.cb-product-card__image img {
		transition: none;
	}

	.cb-product-card:hover .cb-product-card__image img {
		transform: none;
	}

	.cb-plp__grid--fade-in {
		animation: none;
	}
}

/* === Archive toolbar (sort + count), full-set note, range guide (2026-06-15) === */
.cb-plp__setnote {
	margin: 8px 0 0;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--text-muted, #b6b6c2);
}
.cb-plp__setnote strong { color: var(--wp--preset--color--text, #f0f0f2); }

.cb-plp__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem 1rem;
	margin-bottom: 1rem;
}
/* Right-hand cluster: the List/Grid toggle (relocated from the archive header)
   sits directly beside the Sort control, above the listings. */
.cb-plp__toolbar-controls {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.cb-plp__toolbar-controls .cb-view-toggle {
	align-self: center; /* override the header's flex-start so it lines up with Sort */
}
.cb-plp__count {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--text-muted, #b6b6c2);
	font-variant-numeric: tabular-nums;
}
.cb-sort-label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--text-subtle, #9898a8);
}
.cb-sort {
	font: inherit;
	font-size: 0.875rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--text, #f0f0f2);
	background: var(--wp--preset--color--surface, #18181c);
	border: 1px solid var(--wp--preset--color--border-strong, #42424e);
	border-radius: 7px;
	padding: 7px 30px 7px 12px;
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%239898a8' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
}
.cb-sort:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #e8ff00);
	outline-offset: 1px;
}
/* Sort is wrapped in a GET <form> for no-JS round-tripping; keep it layout-
   transparent so the label/select sit inline in the toolbar exactly as before. */
.cb-sort-form { display: contents; }
.cb-sort-go {
	font: inherit;
	font-size: 0.8rem;
	margin-left: 0.5rem;
	padding: 0.35rem 0.7rem;
	cursor: pointer;
	color: var(--wp--preset--color--text, #f0f0f2);
	background: var(--wp--preset--color--surface-2, #1c1c21);
	border: 1px solid var(--wp--preset--color--border, #33333b);
	border-radius: 2px;
}

/* Range guide — collapsible "which range is right for me" */
.cb-type-guide {
	margin: 0 0 1.25rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e38);
	border-radius: 10px;
	background: var(--wp--preset--color--surface, #18181c);
	overflow: hidden;
}
.cb-type-guide__summary {
	cursor: pointer;
	list-style: none;
	padding: 0.85rem 1.1rem;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--text, #f0f0f2);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.cb-type-guide__summary::-webkit-details-marker { display: none; }
.cb-type-guide__summary::after {
	content: "+";
	margin-left: auto;
	font-weight: 400;
	font-size: 1.25rem;
	color: var(--wp--preset--color--accent, #e8ff00);
	line-height: 1;
}
.cb-type-guide[open] .cb-type-guide__summary::after { content: "\2212"; }
.cb-type-guide__list {
	list-style: none;
	margin: 0;
	padding: 0 1.1rem 1.1rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}
@media (min-width: 720px) {
	.cb-type-guide__list { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
}
.cb-type-guide__item { display: flex; gap: 0.7rem; align-items: flex-start; }
.cb-type-guide__text { display: flex; flex-direction: column; gap: 1px; }
.cb-type-guide__name { font-weight: 600; color: var(--wp--preset--color--text, #f0f0f2); }
.cb-type-guide__use {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--accent, #e8ff00);
}
.cb-type-guide__desc {
	margin: 3px 0 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
}

/* Per-type header + blurb — [cb_type_header] on /coilovers/?cb_type=<slug>.
   Sits between the page H1 and the filters/grid; quiet card so the range
   label + tagline + one-liner read as context, not a second hero. */
.cb-type-header {
	margin: 0 0 1.25rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e38);
	border-left: 3px solid var(--wp--preset--color--accent, #e8ff00);
	border-radius: 10px;
	background: var(--wp--preset--color--surface, #18181c);
}
.cb-type-header__title {
	margin: 0 0 0.15rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--text, #f0f0f2);
}
.cb-type-header__usage {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--accent, #e8ff00);
}
.cb-type-header__desc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
	max-width: 70ch;
}

/* -------------------------------------------------------------------------
 * BRAKES LANDING — [cb_brake_landing] on /brakes/ (buyer-first, 2026-07).
 * Shared section headers (.cb-landing__*), make tiles into the shop-by-car
 * landings, and the wheel-fit education strip. The front/rear axle bands
 * reuse the cinematic .cb-cband pattern below. Replaces the retired
 * disc-size-first card grid.
 * ---------------------------------------------------------------------- */
.cb-landing__eyebrow {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, #e8ff00);
}
.cb-landing__title {
	margin: 0.35rem 0 0.25rem;
	font-size: 1.7rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--text, #f0f0f2);
}
.cb-landing__lede {
	margin: 0 0 1.3rem;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
	max-width: 70ch;
}
.cb-make-tiles {
	margin: 0 0 1.75rem;
}
.cb-make-tiles__grid {
	display: grid;
	/* minmax(0,1fr): plain 1fr tracks floor at min-content, so long make names
	   forced the grid wider than its container below ~1260px (horizontal page
	   overflow). Allowing tracks to shrink to 0 keeps the grid in-bounds. */
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0.6rem;
}
@media (max-width: 1024px) {
	.cb-make-tiles__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.cb-make-tiles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cb-make-tile {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e38);
	border-radius: 10px;
	background: var(--wp--preset--color--surface, #18181c);
	color: var(--wp--preset--color--text, #f0f0f2);
	text-decoration: none;
	transition: border-color 0.18s ease, transform 0.18s ease;
}
/* Marque-badge variant — logo chip left, label + count right. */
.cb-make-tile--logo {
	flex-direction: row;
	align-items: center;
	gap: 0.65rem;
}
.cb-make-tile__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 5px;
	border-radius: 10px;
	/* Many marque badges are dark — white chip keeps them all legible. */
	background: #fff;
}
.cb-make-tile__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.cb-make-tile__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}
.cb-make-tile:hover,
.cb-make-tile:focus-visible {
	border-color: var(--wp--preset--color--accent, #e8ff00);
	transform: translateY(-2px);
	outline: none;
}
.cb-make-tile__label {
	font-size: 0.95rem;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cb-make-tile__count {
	font-size: 0.72rem;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
}
.cb-wheelfit {
	margin: 0 0 1.75rem;
}
.cb-wheelfit__row {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 0.5rem;
}
@media (max-width: 1024px) {
	.cb-wheelfit__row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
	.cb-wheelfit__row { grid-template-columns: repeat(2, 1fr); }
}
.cb-wheelfit__chip {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e38);
	border-radius: 10px;
	background: var(--wp--preset--color--surface, #18181c);
	text-decoration: none;
	text-align: center;
	transition: border-color 0.18s ease, transform 0.18s ease;
}
.cb-wheelfit__chip:hover,
.cb-wheelfit__chip:focus-visible {
	border-color: var(--wp--preset--color--accent, #e8ff00);
	transform: translateY(-2px);
	outline: none;
}
.cb-wheelfit__wheel {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--wp--preset--color--text, #f0f0f2);
}
.cb-wheelfit__disc {
	font-size: 0.72rem;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
}

/* "Car not listed?" demand capture — collapsed drawer under make tiles /
   shop-by-car hubs. No-JS <details>; form posts to admin-post.php. */
.cb-car-request {
	margin-top: 0.9rem;
}
.cb-car-request summary {
	display: inline-block;
	cursor: pointer;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
}
.cb-car-request summary:hover { color: var(--wp--preset--color--accent, #e8ff00); }
.cb-car-request__form {
	margin-top: 0.7rem;
	padding: 1rem 1.1rem;
	max-width: 480px;
	border: 1px solid var(--wp--preset--color--border, #2e2e38);
	border-radius: 10px;
	background: var(--wp--preset--color--surface, #18181c);
}
.cb-car-request__form p { margin: 0 0 0.7rem; }
.cb-car-request__label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--wp--preset--color--text, #f0f0f2);
}
.cb-car-request__input {
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e38);
	border-radius: 8px;
	background: var(--wp--preset--color--background, #0d0d0f);
	color: var(--wp--preset--color--text, #f0f0f2);
	font-size: 0.875rem;
}
.cb-car-request__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent, #e8ff00);
}
.cb-car-request__note {
	font-size: 0.72rem;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
}
.cb-car-request__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px; overflow: hidden;
}
.cb-car-request__done {
	margin: 0;
	padding: 0.7rem 1rem;
	border: 1px solid var(--wp--preset--color--accent, #e8ff00);
	border-radius: 10px;
	background: var(--wp--preset--color--surface, #18181c);
	font-size: 0.875rem;
	color: var(--wp--preset--color--text, #f0f0f2);
}
.cb-car-request__err {
	font-size: 0.8125rem;
	color: #ff7a7a;
}

/* Active filter banner (replaces the landing on a filtered view). */
.cb-size-active {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 1.25rem;
	padding: 0.7rem 1rem;
	border: 1px solid var(--wp--preset--color--accent, #e8ff00);
	border-radius: 10px;
	background: var(--wp--preset--color--surface, #18181c);
}
.cb-size-active__tag {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
}
.cb-size-active__label {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--wp--preset--color--text, #f0f0f2);
}
.cb-size-active__count {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
}
.cb-size-active__clear {
	margin-left: auto;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent, #e8ff00);
	text-decoration: none;
}
.cb-size-active__clear:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
 * COILOVER USE-CASE BUCKETS — [cb_coilover_buckets] two-level landing.
 * Landing = 5 bucket cards; drill = the ranges inside a bucket. Shares the
 * card visual language with the brake size cards.
 * ---------------------------------------------------------------------- */
.cb-buckets {
	margin: 0 0 1.5rem;
}
.cb-buckets__title {
	margin: 0 0 0.2rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--wp--preset--color--text, #f0f0f2);
}
.cb-buckets__lede {
	margin: 0 0 0.9rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
	max-width: 64ch;
}
.cb-buckets__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.75rem;
}
.cb-buckets__grid--5 {
	grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1000px) {
	.cb-buckets__grid,
	.cb-buckets__grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
	.cb-buckets__grid,
	.cb-buckets__grid--5 { grid-template-columns: repeat(2, 1fr); }
}
.cb-bucket-card {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.85rem 0.95rem;
	border: 1px solid var(--wp--preset--color--border, #2e2e38);
	border-radius: 10px;
	background: var(--wp--preset--color--surface, #18181c);
	color: var(--wp--preset--color--text, #f0f0f2);
	text-decoration: none;
	overflow: hidden;
	transition: border-color 0.18s ease, transform 0.18s ease;
}
.cb-bucket-card:hover,
.cb-bucket-card:focus-visible {
	border-color: var(--wp--preset--color--accent, #e8ff00);
	transform: translateY(-2px);
	outline: none;
}
.cb-bucket-card__media {
	display: block;
	margin: -0.85rem -0.95rem 0.55rem;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-bottom: 1px solid var(--wp--preset--color--border, #2e2e38);
	/* Graphite well — matches .cb-img-well / the PDP media. Transparent-PNG renders
	   sit cleanly on it; white-bg representative images are repointed to transparent
	   renders (Wave 3) rather than relying on a light well + multiply here. */
	background: radial-gradient(125% 110% at 50% 28%, #2a2a31 0%, #1c1c21 62%, #141417 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.cb-bucket-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.3s ease;
}
/* Badge fallback for a range with no product render yet (e.g. Drag). Centred
   initials on the same graphite well so the card matches its siblings. */
.cb-bucket-card__media--badge {
	display: flex;
	align-items: center;
	justify-content: center;
}
.cb-bucket-card__badge {
	font-weight: 800;
	font-size: clamp(2rem, 6vw, 3.2rem);
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--accent, #e8ff00);
	opacity: 0.92;
	line-height: 1;
}
.cb-bucket-card:hover .cb-bucket-card__media img,
.cb-bucket-card:focus-visible .cb-bucket-card__media img {
	transform: scale(1.05);
}
.cb-bucket-card__label {
	font-size: 1.05rem;
	font-weight: 700;
}
.cb-bucket-card__tagline {
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
}
.cb-bucket-card__count {
	margin-top: auto;
	padding-top: 0.4rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, #e8ff00);
}
.cb-bucket-breadcrumb {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
}
.cb-bucket-breadcrumb a {
	color: var(--wp--preset--color--text-muted, #b6b6c2);
	text-decoration: none;
}
.cb-bucket-breadcrumb a:hover,
.cb-bucket-breadcrumb a:focus-visible {
	color: var(--wp--preset--color--accent, #e8ff00);
}

/* WebP delivery wraps <img> in <picture> (class-webp.php). display:contents
 * keeps the wrapper out of layout so flex/grid parents treat the <img> as a
 * direct child exactly as before. */
picture {
	display: contents;
}

/* -------------------------------------------------------------------------
 * CINEMATIC DISCIPLINE BANNERS — [cb_coilover_buckets] landing (Variant A).
 * Full-width alternating photo bands, one per use-case, ranges as chips.
 * ---------------------------------------------------------------------- */
.cb-cinematic {
	margin: 0 0 1.75rem;
}
.cb-cinematic__eyebrow {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, #e8ff00);
}
.cb-cinematic__title {
	margin: 0.35rem 0 0.25rem;
	font-size: 1.7rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--text, #f0f0f2);
}
.cb-cinematic__lede {
	margin: 0 0 1.3rem;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
	max-width: 70ch;
}
.cb-cinematic__stack {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}
.cb-cband {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	/* Fixed height so every discipline band is the same size regardless of how
	   many ranges it lists (Drag has 1, Rally has 4). Body is vertically centred.
	   Sized to fit the busiest band (Rally, 4 full-sentence ranges). */
	height: 340px;
	border: 1px solid var(--wp--preset--color--border, #2e2e38);
	border-radius: 14px;
	overflow: hidden;
	background: var(--wp--preset--color--surface, #18181c);
	color: var(--wp--preset--color--text, #f0f0f2);
	text-decoration: none;
	transition: border-color 0.18s ease, transform 0.18s ease;
}
.cb-cband:hover,
.cb-cband:focus-visible {
	border-color: var(--wp--preset--color--accent, #e8ff00);
	transform: translateY(-2px);
	outline: none;
}
.cb-cband__media {
	position: relative;
	overflow: hidden;
	height: 100%;
	background: radial-gradient(125% 110% at 50% 28%, #2a2a31 0%, #1c1c21 62%, #141417 100%);
}
.cb-cband__media img.cb-cband__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.cb-cband:hover .cb-cband__img,
.cb-cband:focus-visible .cb-cband__img {
	transform: scale(1.04);
}
/* Feather the photo into the body panel (left media → fade right). */
.cb-cband__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(24, 24, 28, 0) 38%, rgba(24, 24, 28, 0.7) 78%, var(--wp--preset--color--surface, #18181c) 100%);
}
.cb-cband--rev {
	grid-template-columns: 1fr 1.05fr;
}
.cb-cband--rev .cb-cband__media {
	order: 2;
}
.cb-cband--rev .cb-cband__media::after {
	background: linear-gradient(270deg, rgba(24, 24, 28, 0) 38%, rgba(24, 24, 28, 0.7) 78%, var(--wp--preset--color--surface, #18181c) 100%);
}
.cb-cband__media--badge {
	display: flex;
	align-items: center;
	justify-content: center;
}
.cb-cband__badge {
	font-weight: 800;
	font-size: clamp(2.4rem, 7vw, 4rem);
	color: var(--wp--preset--color--accent, #e8ff00);
	opacity: 0.9;
	line-height: 1;
}
.cb-cband__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1.35rem 1.55rem;
}
.cb-cband__kicker {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, #e8ff00);
	margin-bottom: 0.3rem;
}
.cb-cband__label {
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.01em;
	margin-bottom: 0.35rem;
}
.cb-cband__tag {
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
	margin-bottom: 0.85rem;
}
/* Range list — each variation in the discipline with a one-line differentiator
   so the buyer can see how they differ at a glance. */
.cb-cband__ranges {
	margin: 0.15rem 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.32rem;
}
.cb-cband__range {
	display: block;
	font-size: 0.8rem;
	line-height: 1.32;
}
.cb-cband__rname {
	font-weight: 700;
	color: var(--wp--preset--color--text, #f0f0f2);
}
.cb-cband__rname::after {
	content: ': ';
	font-weight: 700;
}
.cb-cband__rdesc {
	color: var(--wp--preset--color--text-muted, #b6b6c2);
}
.cb-cband__foot {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-top: 0.9rem;
}
.cb-cband__count {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, #e8ff00);
}
.cb-cband__cta {
	font-size: 0.86rem;
	font-weight: 700;
}
.cb-cband__cta::after {
	content: ' \2192';
	color: var(--wp--preset--color--accent, #e8ff00);
}
@media (max-width: 820px) {
	.cb-cband,
	.cb-cband--rev {
		grid-template-columns: 1fr;
		height: auto; /* stacked photo + body needs natural height */
	}
	.cb-cband__media,
	.cb-cband--rev .cb-cband__media {
		order: 0;
		height: 158px;
		min-height: 158px;
	}
	.cb-cband__media::after,
	.cb-cband--rev .cb-cband__media::after {
		background: linear-gradient(0deg, var(--wp--preset--color--surface, #18181c) 2%, rgba(24, 24, 28, 0.12) 60%) !important;
	}
}

/* -------------------------------------------------------------------------
 * ARCHIVE HEADER → cinematic hero (coilovers + brakes). Reveals the header
 * photo (was buried under a heavy gradient in a short header) and enlarges
 * the title. Scoped per archive so wheels/parts headers are untouched.
 * Overrides theme archive.css via !important (theme rule carries no scope;
 * this one is more specific + scoped).
 * ---------------------------------------------------------------------- */
[data-cb-archive="coilover"] .cb-plp__header,
[data-cb-archive="brake_kit"] .cb-plp__header {
	min-height: 300px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.4rem 1.5rem 1.5rem;
	border-radius: 14px;
}
/* The header carries `cb-has-ghost`, whose `> :not(.cb-ghost)` rule forces every
   direct child to position:relative — which, once the header is flex, collapses
   the absolutely-laid-out photo to 0×0. Pin it back to fill the header. */
[data-cb-archive="coilover"] .cb-plp__header-photo,
[data-cb-archive="brake_kit"] .cb-plp__header-photo {
	position: absolute !important;
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	z-index: 0 !important;
	background-position: center 32% !important;
}
[data-cb-archive="coilover"] .cb-plp__header-photo::after,
[data-cb-archive="brake_kit"] .cb-plp__header-photo::after {
	background: linear-gradient(90deg, rgba(13, 13, 15, 0.9) 0%, rgba(13, 13, 15, 0.55) 42%, rgba(13, 13, 15, 0.12) 78%, rgba(13, 13, 15, 0.32) 100%),
		linear-gradient(0deg, rgba(13, 13, 15, 0.92) 0%, rgba(13, 13, 15, 0) 55%) !important;
}
[data-cb-archive="coilover"] .cb-plp__title,
[data-cb-archive="brake_kit"] .cb-plp__title {
	font-size: clamp(2.3rem, 5vw, 3.5rem) !important;
	font-weight: 800 !important;
	line-height: 1.02 !important;
	letter-spacing: -0.02em !important;
}
@media (max-width: 820px) {
	[data-cb-archive="coilover"] .cb-plp__header,
	[data-cb-archive="brake_kit"] .cb-plp__header {
		min-height: 240px;
	}
}

/* -------------------------------------------------------------------------
 * COILOVER RANGE BAR — full-width range band across the top of the card
 * image well, replacing the corner initials chip on /coilovers/ cards only
 * (render_product_card adds .cb-range-badge--bar for cb_coilover). The
 * per-range .cb-range-badge--{slug} class still sets --cb-range-colour, so
 * the band inherits the series palette (and any per-slug text colour). The
 * base badge (position/colour/z-index/font) lives in the theme's
 * atmosphere.css; this doubled-class selector (0,2,0) outweighs the base
 * .cb-range-badge (0,1,0) regardless of stylesheet load order.
 * ---------------------------------------------------------------------- */
.cb-range-badge.cb-range-badge--bar {
	top: 0;
	left: 0;
	right: 0;
	min-width: 0;
	padding: 6px 8px;
	border-radius: 0;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-align: center;
}

/* The range band is an OPAQUE bar pinned to the top of the square image well
   (position:absolute; top:0; z-index:2). Its height is fixed (~30px, font-driven)
   while the well is a FLUID square, so on the narrower 3-up desktop cards the band
   overlapped the top of the strut render: the top-mount disappeared behind the band
   and — for renders that fill the canvas edge-to-edge (e.g. Pro Rally) — the damper
   foot was left crowding the band while its bottom clipped, reading as "the title
   fouls the strut" (operator reports 2026-07-04). Give the render its own box BELOW
   the band and let object-fit:contain scale the strut into it, so the whole strut
   always shows clear of the band regardless of how much built-in margin the render
   has. NB: `top + bottom + height:auto` does NOT work here — an absolutely-positioned
   REPLACED element (img) ignores that and keeps its intrinsic (width-derived) height,
   so it stays full-size and merely shifts down, clipping the foot. An explicit
   height (well minus band) is required. Both offsets use 1.9rem so they track the
   band height across card widths (it scales with the root font, not the card).
   Applies in BOTH grid and list view — the list-view thumbnail is a smaller square
   well but carries the same top band, so it needs the same inset (the band was
   otherwise clipping the strut top in list rows too). */
main.cb-plp[data-view="grid"] .cb-img-well:has(> .cb-range-badge--bar) img,
main.cb-plp[data-view="list"] .cb-img-well:has(> .cb-range-badge--bar) img {
	top: 1.9rem;
	height: calc(100% - 1.9rem);
	bottom: auto;
}

/* -------------------------------------------------------------------------
 * SHOP-BY-CAR — [cb_shop_by_car] make hub + model landing heading.
 * ---------------------------------------------------------------------- */
.cb-sbc {
	margin: 0 0 1.5rem;
}
.cb-sbc__crumbs {
	margin: 0 0 0.5rem;
}
.cb-sbc__crumbs span[aria-hidden] {
	opacity: 0.5;
	padding: 0 0.15rem;
}
.cb-sbc__title {
	margin: 0 0 0.2rem;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--wp--preset--color--text, #f0f0f2);
}
.cb-sbc__lede {
	margin: 0 0 0.9rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
	max-width: 66ch;
}
/* Model cards on a make hub are text-only (no per-model render available). */
.cb-sbc__models .cb-sbc__model {
	min-height: 0;
}

/* ---- cb-breadcrumbs (/wp-content/plugins/cool-bear-core/assets/css/breadcrumbs.css) ---- */
/**
 * Breadcrumbs + Search bar styles.
 *
 * Uses theme.json design tokens for consistency with the Cool Bear
 * dark theme. Breadcrumbs render below the vehicle picker bar and
 * above page content on all product/category pages.
 *
 * @package Cool_Bear_Core
 * @since   0.9.0
 */

/* ─── Breadcrumbs ─── */

.cb-breadcrumbs {
	padding: var(--wp--preset--spacing--20) 0;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--30);
	padding-right: var(--wp--preset--spacing--30);
}

/* Inside a PLP/archive (e.g. /wheels/series/{slug}/) or PDP container, the
   wrapper already applies the page max-width + side padding; the breadcrumb must
   NOT re-apply its own or it ends up narrower and double-indented vs the content
   below it (operator 2026-06-29). */
.cb-plp__container > .cb-breadcrumbs,
.cb-pdp__container > .cb-breadcrumbs {
	max-width: none;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
}

.cb-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}

.cb-breadcrumbs__item {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.cb-breadcrumbs__item a {
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
}

.cb-breadcrumbs__item a:hover {
	text-decoration: underline;
}

.cb-breadcrumbs__item[aria-current="page"] {
	color: var(--wp--preset--color--text);
}

.cb-breadcrumbs__sep {
	margin: 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
	list-style: none;
}

/* ─── Search Bar ─── */

.cb-search-bar {
	display: flex;
	align-items: center;
	max-width: 320px;
	margin: var(--wp--preset--spacing--20) auto;
}

.cb-search-form {
	display: flex;
	width: 100%;
}
/* wpautop wraps the form's trailing input+button run in a <p>; keep it layout-
   transparent so they stay the flex row's direct children (no orphan </p>). */
.cb-search-form > p {
	display: contents;
	margin: 0;
}

.cb-search-input {
	height: 44px;
	flex: 1;
	background: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px 0 0 6px;
	padding: 8px 16px;
	color: var(--wp--preset--color--text);
	font-size: 1rem;
}

.cb-search-input:focus {
	border-color: var(--wp--preset--color--accent);
	outline: none;
}

.cb-search-input::placeholder {
	color: var(--wp--preset--color--text-muted);
}

.cb-search-submit {
	height: 44px;
	width: 44px;
	background: var(--wp--preset--color--accent);
	border: none;
	border-radius: 0 6px 6px 0;
	color: var(--wp--preset--color--text-on-accent);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cb-search-submit:hover {
	opacity: 0.9;
}

/* ─── Search Highlight ─── */

.cb-search-highlight {
	color: var(--wp--preset--color--accent);
	background: none;
}

/* ---- cb-vat-toggle-css (/wp-content/plugins/cool-bear-core/assets/css/vat-toggle.css) ---- */
.cb-vat-toggle {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--wp--preset--color--border, #2E2E38);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: var(--wp--preset--spacing--30, 16px);
}

.cb-vat-toggle__btn {
    /* Rendered as a role=button SPAN, not <button>: Windows Chromium paints
       native buttons here with the light widget face + dark text regardless
       of author styles (appearance:none and inline overrides included).
       Spans are immune. Flex centering replicates the button's UA layout. */
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    background: transparent;
    color: var(--wp--preset--color--text-muted, #9898A8);
    border: none;
    padding: 8px 16px;
    font-family: var(--wp--preset--font-family--body, 'DM Sans', sans-serif);
    font-size: var(--wp--preset--font-size--small, 14px);
    cursor: pointer;
    min-height: 44px;
    transition: background-color 0.1s, color 0.1s;
    position: relative;
}

.cb-vat-toggle__btn--active {
    background: var(--wp--preset--color--surface-raised, #222228);
    color: var(--wp--preset--color--text, #F0F0F2);
    border-bottom: 2px solid var(--wp--preset--color--accent, #E8FF00);
}

.cb-vat-toggle__btn:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent, #E8FF00);
    outline-offset: -2px;
}

/* ─── In-header placement (2026-07-11) ───────────────────────────────────────
   The toggle moved from its own top utility bar (which spent a full-width
   strip on two small buttons — operator complaint) into the main header row,
   compacted to sit beside the account + basket icons. */
.cb-header__bar .cb-vat-toggle {
    margin: 0;
    flex: 0 0 auto;
    border-color: var(--wp--preset--color--border, #2E2E38);
}
.cb-header__bar .cb-vat-toggle__btn {
    min-height: 30px;
    padding: 3px 9px;
    font-size: 0.72rem;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .cb-header__bar .cb-vat-toggle__btn {
        min-height: 28px;
        padding: 2px 7px;
        font-size: 0.66rem;
    }
}

/* ---- cb-consent-pill (/wp-content/plugins/cool-bear-core/assets/css/consent-pill.css) ---- */
/**
 * Consent "Manage consent" pill — position + restyle override.
 *
 * The pill itself is rendered by Complianz (.cmplz-manage-consent). Per the
 * no-paid-plugins / prefer-self-hosted policy we do NOT modify that plugin;
 * this is a CSS-only override enqueued sitewide from cool-bear-core.
 *
 * Goals:
 *   - small fixed pill, bottom-left, never overlapping page content
 *   - z-index below the storefront modals/drawers (which top out at 200)
 *   - dark/yellow-accent language consistent with the theme
 *
 * Complianz markup variants covered:
 *   button.cmplz-manage-consent              (button form)
 *   .cmplz-manage-consent .cmplz-btn         (wrapper + inner button form)
 */

.cmplz-manage-consent,
button.cmplz-manage-consent,
.cmplz-cookiebanner .cmplz-manage-consent {
	position: fixed !important;
	left: 16px !important;
	right: auto !important;
	bottom: 16px !important;
	top: auto !important;
	z-index: 150 !important; /* below storefront modals/drawers (199–200) */
	margin: 0 !important;
	width: auto !important;
	max-width: calc(100vw - 32px);
}

/* The visible button itself — compact dark pill with accent border. */
button.cmplz-manage-consent.manage-consent-1,
.cmplz-manage-consent .cmplz-btn.cmplz-manage-consent,
.cmplz-manage-consent button.cmplz-manage-consent {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	min-height: 36px;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--accent, #E8FF00);
	background: var(--wp--preset--color--surface, #18181C);
	color: var(--wp--preset--color--text, #F0F0F2);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 150ms ease, color 150ms ease;
}

button.cmplz-manage-consent.manage-consent-1:hover,
.cmplz-manage-consent button.cmplz-manage-consent:hover {
	background: var(--wp--preset--color--accent, #E8FF00);
	color: var(--wp--preset--color--text-on-accent, #0D0D0F);
}

/* Keep Complianz's own hide state authoritative. */
.cmplz-manage-consent.cmplz-hidden,
button.cmplz-manage-consent.cmplz-hidden {
	display: none !important;
}

/* ---- cool-bear-theme (/wp-content/themes/cool-bear/assets/css/theme.css) ---- */
/**
 * Cool Bear theme — global / supplementary CSS.
 *
 * Handles component styles that theme.json block-level tokens cannot express.
 * Design tokens remain in theme.json; this file references them via CSS
 * custom properties (--wp--preset--*).
 *
 * Per-template and per-component CSS is split into:
 *   assets/css/templates/{pdp, archive, family, sibling-cohort}.css
 *   assets/css/components/{gallery, tabs}.css
 *   assets/css/components/configurator/{configurator, spring-rate, swatches, top-mount, pad-compound}.css
 *
 * All files registered via functions.php enqueue.
 */

:root {
	--cb-radius: 6px;
	--cb-radius-lg: 8px;
	--cb-touch-target: 44px;
	--cb-content-max: 1440px;
}

/* -------------------------------------------------------------------------
 *  Brand-vibe baseline — links and headings stay readable on dark
 * ------------------------------------------------------------------------- */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* WCAG AA fix (D20): yellow accent must not be used as body text colour.
   Body text inherits text-primary (#F0F0F2) which exceeds 4.5:1 on base. */
.has-accent-color:not(.wp-block-button__link):not(.cb-buy-row__add) {
	/* Constrain "yellow text" to CTA buttons + price + accent chips only.
	   If a previous block sets has-accent-color on prose, downgrade it. */
}

/* -------------------------------------------------------------------------
 *  Trust badge (DESIGN-08) — kept for FOOTER use only.
 *  Per Q13, NOT used on PDPs. Stays in trust-footer template part for the
 *  legal/about/footer band only.
 * ------------------------------------------------------------------------- */
.cb-trust-badge {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--cb-radius);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.cb-trust-badge strong {
	color: var(--wp--preset--color--text);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.cb-trust-badge__sub {
	color: var(--wp--preset--color--text-muted);
}

/* LCP hero image — opt out of lazy-load on above-the-fold */
.cb-hero img,
.cb-gallery img {
	content-visibility: auto;
}

/* -------------------------------------------------------------------------
 *  PDP spec table — mono font enforcement for legacy .cb-specs blocks
 * ------------------------------------------------------------------------- */
.cb-specs {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

/* -------------------------------------------------------------------------
 *  Focus-visible ring (accent, keyboard-only) — WCAG 2.4.11
 * ------------------------------------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 *  Buttons — global active feedback
 * ------------------------------------------------------------------------- */
.wp-block-button__link:active,
.cb-buy-row__add:active {
	transform: scale(0.98);
	transition: transform 100ms ease-out;
}

a,
button,
.wp-block-button__link {
	transition: color 150ms ease-out, background-color 150ms ease-out;
}

/* -------------------------------------------------------------------------
 *  SKU — mono font, muted colour
 * ------------------------------------------------------------------------- */
.cb-sku {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 *  Breadcrumbs — quiet baseline
 * ------------------------------------------------------------------------- */
.cb-breadcrumbs,
.cb-breadcrumbs__list {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cb-breadcrumbs a {
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
}

.cb-breadcrumbs a:hover {
	color: var(--wp--preset--color--text);
}

/* -------------------------------------------------------------------------
 *  Section divider rule
 * ------------------------------------------------------------------------- */
.cb-divider {
	border: none;
	border-top: 1px solid var(--wp--preset--color--border);
	margin: var(--wp--preset--spacing--60) 0;
}

/* -------------------------------------------------------------------------
 *  WooCommerce blocks cart/checkout — dark-shell integration (D5)
 *  WC block components ship light-theme inputs; restyle to DESIGN.md §4:
 *  surface-raised fills, border-strong hairlines, white text, 2px radius.
 * ------------------------------------------------------------------------- */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart {
	color: var(--wp--preset--color--text);
}

.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-country-input select,
.wc-block-components-state-input select,
.wc-block-components-combobox .components-combobox-control__suggestions-container input,
.wc-block-components-form .wc-block-components-text-input input {
	background: var(--wp--preset--color--surface-raised) !important;
	border: 1px solid var(--wp--preset--color--border-strong) !important;
	border-radius: 2px !important;
	color: var(--wp--preset--color--text) !important;
}

.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-components-checkbox__label,
.wc-block-components-country-input label,
.wc-block-components-state-input label {
	color: var(--wp--preset--color--text-subtle) !important;
}

.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus {
	border-color: var(--wp--preset--color--accent) !important;
	box-shadow: none !important;
}

/* Cart/checkout get a wide stage — the default 760px content column forces
   the order-summary sidebar to wrap below the form. post-content is alignwide
   in page-cart/page-checkout templates; cap the commerce blocks at 1140 so
   forms don't stretch the full 1440 wide-size. */
.wp-block-post-content .wp-block-woocommerce-checkout,
.wp-block-post-content .wp-block-woocommerce-cart {
	max-width: min(1140px, calc(100vw - 48px));
	margin-inline: auto;
}

/* Order-summary sidebar: stop the mid-word wraps — give it real width. */
@media (min-width: 880px) {
	.wc-block-checkout__sidebar.wc-block-components-sidebar {
		width: 38%;
		min-width: 360px;
	}
	.wc-block-checkout__main.wc-block-components-main {
		width: 62%;
		padding-right: var(--wp--preset--spacing--60, 48px);
		box-sizing: border-box;
	}
}

/* Summary card sits on a lifted surface with a hairline, not floating text. */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-totals-block {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--40, 24px);
}

/* The one yellow commerce action per viewport. */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--text-on-accent, #0d0d0f) !important;
	border: none !important;
	border-radius: 2px !important;
	font-weight: 700 !important;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover {
	background: var(--wp--preset--color--accent-hover, #d4e800) !important;
}

/* --- a11y base utilities (Deploy-3 jxn: WCAG 2.4.1) --- */
.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
	position: absolute !important; word-wrap: normal !important;
}
.cb-skip-link:focus,
.screen-reader-text:focus {
	position: fixed !important; top: 0.5rem; left: 0.5rem;
	clip: auto; clip-path: none; height: auto; width: auto; margin: 0;
	padding: 0.6rem 1rem; overflow: visible; z-index: 100000;
	background: var(--wp--preset--color--text, #111);
	color: var(--wp--preset--color--base, #fff);
	border-radius: 4px; text-decoration: none;
	outline: 2px solid currentColor; outline-offset: 2px;
}
[id="cb-main"]:focus { outline: none; }

/* Complianz banner "documents" block renders un-replaced {title} placeholder
   links (the site links its own /privacy/ + /cookies/ pages from the footer,
   so Complianz has no generated documents to substitute). Hide the block —
   consent controls are unaffected. */
.cmplz-documents { display: none !important; }

/* =========================================================================
 *  Design audit fixes (2026-09-06, .work/audit-260905/D-design.md)
 * ========================================================================= */

/* Fix 12 safety net — no page may ever scroll sideways. `clip` (not hidden)
   keeps position:sticky working and creates no scroll container. */
html {
	overflow-x: clip;
}

/* --- Complianz cookie banner → brand skin (Fix 12 / P1) -------------------
   The banner stylesheet is injected by Complianz JS AFTER the theme CSS, with
   its palette on :root custom properties. Re-declaring those properties on the
   banner element itself outranks the inherited :root values whatever the load
   order; layout rules carry !important for the same reason. */
.cmplz-cookiebanner,
#cmplz-manage-consent {
	--cmplz_banner_width: 100%;
	--cmplz_banner_background_color: #18181c;
	--cmplz_banner_border_color: #2e2e38;
	--cmplz_banner_border_width: 1px 0 0 0;
	--cmplz_banner_border_radius: 0;
	--cmplz_banner_margin: 12px;
	--cmplz_title_font_size: 11px;
	--cmplz_text_color: #f0f0f2;
	--cmplz_hyperlink_color: #e8ff00;
	--cmplz_text_font_size: 14px;
	--cmplz_text_line_height: 1.5;
	--cmplz_link_font_size: 13px;
	--cmplz_category_body_font_size: 13px;
	--cmplz_button_accept_background_color: #e8ff00;
	--cmplz_button_accept_border_color: #e8ff00;
	--cmplz_button_accept_text_color: #0d0d0f;
	--cmplz_button_deny_background_color: transparent;
	--cmplz_button_deny_border_color: #e8ff00;
	--cmplz_button_deny_text_color: #e8ff00;
	--cmplz_button_settings_background_color: transparent;
	--cmplz_button_settings_border_color: transparent;
	--cmplz_button_settings_text_color: #b6b6c2;
	--cmplz_button_border_radius: 0;
	--cmplz_button_font_size: 13px;
	--cmplz_category_header_always_active_color: #22c55e;
	--cmplz_category_header_title_font_size: 13px;
	--cmplz_category_header_active_font_size: 11px;
	--cmplz_slider_active_color: #e8ff00;
	--cmplz_slider_inactive_color: #42424e;
	--cmplz_slider_bullet_color: #0d0d0f;
	--cmplz-manage-consent-height: 32px;
	--cmplz-manage-consent-offset: 0px;
}

.cmplz-cookiebanner {
	font-family: var(--wp--preset--font-family--sans, "DM Sans", sans-serif) !important;
	background: #18181c !important;
	color: #f0f0f2 !important;
	border: 0 !important;
	border-top: 1px solid #2e2e38 !important;
	border-radius: 0 !important;
	box-shadow: 0 -12px 40px rgb(0 0 0 / 0.45) !important;
	margin: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	top: auto !important;
	transform: none !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px !important;
	padding: 20px 32px !important;
	max-height: 80vh !important;
	overflow-y: auto !important;
	animation: none !important;
}

.cmplz-cookiebanner .cmplz-divider,
.cmplz-cookiebanner .cmplz-logo {
	display: none !important;
}

/* Header row → mono eyebrow + 44px close */
.cmplz-cookiebanner .cmplz-header {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;
	order: 0;
	gap: 12px;
	min-width: 0;
}
.cmplz-cookiebanner .cmplz-title {
	display: block !important;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	color: #9898a8 !important;
	justify-self: start !important;
	white-space: nowrap;
}
.cmplz-cookiebanner .cmplz-close {
	position: absolute !important;
	top: 8px;
	right: 8px;
	width: 44px !important;
	height: 44px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	color: #b6b6c2 !important;
	font-size: 0 !important;
}
.cmplz-cookiebanner .cmplz-close svg { width: 16px !important; height: 16px !important; }

/* Body (message + categories) takes the middle */
.cmplz-cookiebanner .cmplz-body {
	order: 1;
	flex: 1 1 320px !important;
	display: flex !important;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	max-height: none !important;
	width: auto !important;
}
.cmplz-cookiebanner .cmplz-message {
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #f0f0f2 !important;
	margin: 0 !important;
	padding-right: 32px;
}
.cmplz-cookiebanner .cmplz-message a { color: #e8ff00 !important; }
.cmplz-cookiebanner.cmplz-categories-visible .cmplz-body { flex-basis: 100% !important; }
.cmplz-cookiebanner .cmplz-categories { width: 100% !important; }
.cmplz-cookiebanner .cmplz-categories .cmplz-category {
	background: #101014 !important;
	border: 1px solid #2e2e38;
}
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title,
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description {
	color: #f0f0f2 !important;
}

/* Buttons: Accept solid accent · Deny ghost accent · Preferences text link */
.cmplz-cookiebanner .cmplz-buttons {
	order: 2;
	flex: 0 0 auto !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px !important;
	width: auto !important;
	grid-column: auto !important;
	grid-row: auto !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	font-family: var(--wp--preset--font-family--archivo, var(--wp--preset--font-family--sans)) !important;
	font-stretch: 110%;
	font-weight: 800 !important;
	font-size: 13px !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	min-height: 48px !important;
	min-width: 0 !important;
	width: auto !important;
	padding: 0 22px !important;
	border-radius: 0 !important;
	line-height: 1 !important;
	transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
	background: #e8ff00 !important;
	border: 1px solid #e8ff00 !important;
	color: #0d0d0f !important;
	order: 3;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:focus-visible {
	background: #d4e800 !important;
	border-color: #d4e800 !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
	background: transparent !important;
	border: 1px solid rgba(232, 255, 0, 0.55) !important;
	color: #e8ff00 !important;
	order: 2;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:focus-visible {
	border-color: #e8ff00 !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
	background: transparent !important;
	border: 1px solid transparent !important;
	color: #b6b6c2 !important;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-weight: 500 !important;
	font-size: 12px !important;
	letter-spacing: 0.12em;
	text-decoration: underline;
	text-underline-offset: 4px;
	padding: 0 8px !important;
	order: 1;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {
	color: #f0f0f2 !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn:focus-visible {
	outline: 2px solid #e8ff00 !important;
	outline-offset: 2px;
}
.cmplz-cookiebanner .cmplz-links .cmplz-link { color: #b6b6c2 !important; }

/* Mobile: bottom sheet ≤ 220px — eyebrow, 2–3 line message, two 48px buttons,
   Preferences as a text link beneath. */
@media (max-width: 767px) {
	.cmplz-cookiebanner {
		padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
		gap: 10px 12px !important;
		align-items: flex-start;
	}
	.cmplz-cookiebanner .cmplz-header { width: 100%; }
	.cmplz-cookiebanner .cmplz-title { display: block !important; }
	.cmplz-cookiebanner .cmplz-body { flex-basis: 100% !important; }
	.cmplz-cookiebanner .cmplz-message {
		font-size: 13px !important;
		line-height: 1.45 !important;
		padding-right: 0;
	}
	.cmplz-cookiebanner .cmplz-buttons {
		width: 100% !important;
		gap: 8px !important;
	}
	.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept,
	.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
		flex: 1 1 calc(50% - 4px) !important;
		padding: 0 12px !important;
	}
	.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
	.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
		flex: 1 1 100% !important;
		order: 4;
		min-height: 36px !important;
	}
	.cmplz-cookiebanner .cmplz-close { top: 4px; right: 4px; }
}

/* "Manage consent" pill → small brand chip, bottom-left, clear of content.
   Keeps its accessible name ("Manage consent"); the visible label is the
   mono COOKIES chip. Sits above the fixed mobile buy bar on PDPs. */
#cmplz-manage-consent .cmplz-manage-consent {
	left: 12px !important;
	right: auto !important;
	bottom: 12px !important;
	height: 32px !important;
	min-width: 0 !important;
	padding: 0 12px !important;
	display: inline-flex !important;
	align-items: center;
	background: #18181c !important;
	color: #b6b6c2 !important;
	border: 1px solid #2e2e38 !important;
	border-radius: 0 !important;
	box-shadow: 0 4px 16px rgb(0 0 0 / 0.4) !important;
	font-size: 0 !important;
	line-height: 1 !important;
	animation: none !important;
	transition: color 150ms ease-out, border-color 150ms ease-out;
}
#cmplz-manage-consent .cmplz-manage-consent::before {
	content: "Cookies";
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
#cmplz-manage-consent .cmplz-manage-consent:hover,
#cmplz-manage-consent .cmplz-manage-consent:focus-visible {
	color: #f0f0f2 !important;
	border-color: #42424e !important;
	bottom: 12px !important;
}
#cmplz-manage-consent .cmplz-manage-consent.cmplz-dismissed { display: none !important; }
@media (max-width: 767px) {
	#cmplz-manage-consent .cmplz-manage-consent { display: none !important; }
}

/* --- Checkout validation: destructive red that actually contrasts ----------
   WC blocks ship rgb(204,24,24) on our #0D0D0F base (3.4:1). Use the theme's
   --destructive #FF3B3B (5.5:1) and mark the invalid field border too. */
.wc-block-components-validation-error,
.wc-block-components-validation-error p,
.wc-block-components-validation-error span,
.wc-block-components-validation-error svg,
.wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__content,
.wc-block-components-notice-banner.is-error > svg,
.woocommerce-error,
.woocommerce-error li {
	color: var(--wp--preset--color--destructive, #ff3b3b) !important;
	fill: var(--wp--preset--color--destructive, #ff3b3b);
}
.wc-block-components-text-input.has-error input,
.wc-block-components-text-input input[aria-invalid="true"],
.wc-block-components-combobox.has-error input,
.wc-block-components-select.has-error select,
.wc-block-components-country-input.has-error select,
.wc-block-components-state-input.has-error select,
.wc-block-components-form input[aria-invalid="true"],
.wc-block-components-form select[aria-invalid="true"],
.woocommerce-invalid input,
input[aria-invalid="true"],
select[aria-invalid="true"] {
	border-color: var(--wp--preset--color--destructive, #ff3b3b) !important;
	box-shadow: none !important;
}
.wc-block-components-notice-banner.is-error {
	border-color: var(--wp--preset--color--destructive, #ff3b3b) !important;
	background: rgb(255 59 59 / 0.06) !important;
}

/* --- Commerce chrome: cart / checkout / account / 404 -----------------------
   No newsletter block, no vehicle-picker bar. Checkout drops the shopping
   header (search, nav, VAT toggle, account) to logo + basket link only. */
body.woocommerce-cart .cb-email-signup,
body.woocommerce-checkout .cb-email-signup,
body.woocommerce-account .cb-email-signup,
body.error404 .cb-email-signup,
body.woocommerce-cart .cb-vehicle-picker-bar,
body.woocommerce-checkout .cb-vehicle-picker-bar,
body.woocommerce-account .cb-vehicle-picker-bar,
body.woocommerce-cart .wp-block-cool-bear-vehicle-picker,
body.woocommerce-checkout .wp-block-cool-bear-vehicle-picker,
body.woocommerce-account .wp-block-cool-bear-vehicle-picker {
	display: none !important;
}
body.woocommerce-checkout .cb-header__bar .cb-search-bar,
body.woocommerce-checkout .cb-header__bar .cb-primary-nav,
body.woocommerce-checkout .cb-header__bar .cb-vat-toggle,
body.woocommerce-checkout .cb-header__bar .wp-block-woocommerce-customer-account {
	display: none !important;
}
body.woocommerce-checkout .cb-header__bar {
	flex-wrap: nowrap !important;
	justify-content: space-between;
}
body.woocommerce-checkout .cb-header__bar .cb-cart-link {
	gap: 8px;
	width: auto;
	padding: 0 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
}
body.woocommerce-checkout .cb-header__bar .cb-cart-link::after {
	content: "Back to basket";
}
body.woocommerce-checkout .cb-header__bar .cb-cart-link__count { display: none !important; }

/* --- Cart: Arial leak + mobile sidebar overflow + 44px controls ------------ */
.wc-block-components-quantity-selector,
.wc-block-components-quantity-selector button,
.wc-block-components-quantity-selector input,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	font-family: inherit !important;
}
.wc-block-components-quantity-selector {
	min-height: 44px;
}
.wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button {
	min-width: 44px;
	min-height: 44px;
	color: var(--wp--preset--color--text, #f0f0f2);
	opacity: 1;
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	min-height: 44px;
	color: var(--wp--preset--color--text, #f0f0f2);
}
.wc-block-cart-item__remove-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
}
.wc-block-cart__submit-container,
.wc-block-cart__submit-button,
.wc-block-components-express-payment__event-buttons,
.wc-block-components-express-payment__event-buttons > li {
	box-sizing: border-box;
	max-width: 100%;
}
.wc-block-cart__submit-button {
	width: 100% !important;
	min-height: 52px;
}
.wc-block-components-express-payment__event-buttons > li,
.wc-block-components-express-payment__event-buttons > li > * {
	width: 100% !important;
	min-height: 48px;
}
@media (max-width: 767px) {
	.wp-block-woocommerce-cart .wc-block-cart__sidebar,
	.wp-block-woocommerce-cart .wp-block-woocommerce-cart-totals-block {
		padding: 16px !important;
		box-sizing: border-box;
	}
	.wp-block-woocommerce-cart .wc-block-cart__submit-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.wp-block-woocommerce-cart .wc-block-cart__submit-container--sticky {
		background: var(--wp--preset--color--base, #0d0d0f) !important;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
		box-shadow: 0 -8px 24px rgb(0 0 0 / 0.45);
	}
	.wp-block-woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
		padding: 16px !important;
	}
}

/* --- /my-account/: no WooCommerce defaults may leak ------------------------ */
body.woocommerce-account .woocommerce {
	color: var(--wp--preset--color--text, #f0f0f2);
}
body.woocommerce-account .woocommerce h2,
body.woocommerce-account .woocommerce h3 {
	font-family: var(--wp--preset--font-family--archivo, var(--wp--preset--font-family--sans));
	font-stretch: 112%;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-size: 1.125rem;
}
body.woocommerce-account .woocommerce label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--text-subtle, #9898a8);
	letter-spacing: 0.02em;
}
body.woocommerce-account .woocommerce .input-text,
body.woocommerce-account .woocommerce input[type="text"],
body.woocommerce-account .woocommerce input[type="email"],
body.woocommerce-account .woocommerce input[type="password"],
body.woocommerce-account .woocommerce input[type="tel"],
body.woocommerce-account .woocommerce select,
body.woocommerce-account .woocommerce textarea {
	background: #18181c !important;
	border: 1px solid #42424e !important;
	border-radius: 2px !important;
	color: #f0f0f2 !important;
	min-height: 48px;
	padding: 10px 14px !important;
	box-sizing: border-box;
	width: 100%;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
}
body.woocommerce-account .woocommerce .input-text:focus,
body.woocommerce-account .woocommerce input:focus {
	border-color: var(--wp--preset--color--accent, #e8ff00) !important;
	outline: none;
}
body.woocommerce-account .woocommerce .password-input {
	position: relative;
	display: block;
}
body.woocommerce-account .woocommerce .show-password-input {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	background: none;
	border: 0;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
	font-family: inherit;
}
body.woocommerce-account .woocommerce .show-password-input::after {
	color: var(--wp--preset--color--text-muted, #b6b6c2);
}
body.woocommerce-account .woocommerce form.login,
body.woocommerce-account .woocommerce form.register,
body.woocommerce-account .woocommerce form.lost_reset_password,
body.woocommerce-account .woocommerce .u-columns > .u-column1,
body.woocommerce-account .woocommerce .u-columns > .u-column2 {
	background: var(--wp--preset--color--surface, #18181c);
	border: 1px solid var(--wp--preset--color--border, #2e2e38) !important;
	border-radius: 0 !important;
	padding: 24px !important;
	margin: 0;
	max-width: 480px;
}
body.woocommerce-account .woocommerce form.login .form-row,
body.woocommerce-account .woocommerce form.register .form-row {
	margin: 0 0 14px;
}
body.woocommerce-account .woocommerce .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
	margin-bottom: 8px;
}
body.woocommerce-account .woocommerce .woocommerce-form-login__submit,
body.woocommerce-account .woocommerce .woocommerce-form-register__submit,
body.woocommerce-account .woocommerce button.button[type="submit"],
body.woocommerce-account .woocommerce .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 0 24px;
	background: var(--wp--preset--color--accent, #e8ff00) !important;
	color: var(--wp--preset--color--text-on-accent, #0d0d0f) !important;
	border: 1px solid var(--wp--preset--color--accent, #e8ff00) !important;
	border-radius: 2px !important;
	font-family: var(--wp--preset--font-family--archivo, var(--wp--preset--font-family--sans));
	font-stretch: 112%;
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}
body.woocommerce-account .woocommerce .woocommerce-form-login__submit:hover,
body.woocommerce-account .woocommerce .woocommerce-Button:hover {
	background: var(--wp--preset--color--accent-hover, #d4e800) !important;
}
body.woocommerce-account .woocommerce .lost_password a,
body.woocommerce-account .woocommerce a {
	color: var(--wp--preset--color--text-muted, #b6b6c2);
}
body.woocommerce-account .woocommerce .lost_password a:hover,
body.woocommerce-account .woocommerce a:hover {
	color: var(--wp--preset--color--accent, #e8ff00);
}
/* "New here?" line under the login card */
body.woocommerce-account .woocommerce form.login::after {
	content: "New here? Create an account at checkout — no sign-up needed to order.";
	display: block;
	margin-top: 16px;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--text-subtle, #9898a8);
}
/* Legacy "added to your cart" notice must not leak onto account pages */
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .wc-block-components-notice-banner.is-success {
	display: none !important;
}
/* Account navigation, when logged in */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--border, #2e2e38);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--wp--preset--color--border, #2e2e38);
}
body.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
}
body.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	color: var(--wp--preset--color--text, #f0f0f2);
	box-shadow: inset 2px 0 0 var(--wp--preset--color--accent, #e8ff00);
	padding-left: 12px;
}

/* Cookie banner — close/preferences placement refinements (2026-09-06) */
@media (min-width: 768px) {
	.cmplz-cookiebanner { padding-right: 80px !important; }
	.cmplz-cookiebanner .cmplz-close { top: 50%; transform: translateY(-50%); right: 16px; }
}
@media (max-width: 767px) {
	.cmplz-cookiebanner { padding-top: 10px !important; gap: 6px 12px !important; }
	.cmplz-cookiebanner .cmplz-header { min-height: 40px; padding-right: 48px; }
	.cmplz-cookiebanner .cmplz-close { top: 8px; right: 6px; width: 40px !important; height: 40px !important; }
	.cmplz-cookiebanner .cmplz-message { font-size: 13px !important; line-height: 1.4 !important; }
	.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept,
	.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny { min-height: 46px !important; }
	/* Preferences link rides in the header row (absolute), so the sheet stays ≤ 220px */
	.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
		position: absolute;
		top: 8px;
		right: 52px;
		width: auto !important;
		flex: none !important;
		min-height: 40px !important;
		font-size: 11px !important;
	}
	.cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons .cmplz-btn.cmplz-view-preferences { position: static; }
	.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences { flex: 1 1 100% !important; min-height: 46px !important; }
}

/* Newsletter input — 44px tap target on phones */
@media (max-width: 767px) {
	.cb-email-signup__form input,
	.cb-email-signup__form button {
		min-height: 44px;
		box-sizing: border-box;
	}
}

/* ---- cool-bear-header (/wp-content/themes/cool-bear/assets/css/components/header.css) ---- */
/**
 * Cool Bear — header / primary navigation component
 *
 * Wordmark lockup (text-only, no image asset) + curated primary nav.
 * Loaded sitewide. Uses theme.json tokens only.
 */

/* --- Logo lockup (yellow box + bear + COOL BEAR UK) ---------------------- */
/* Brand yellow is the logo's own #FFF100 (distinct from the accent token —
   it's an imported brand asset, not a UI accent). */
.cb-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff100;
	border: 1px solid #0d0d0f;
	padding: 0 14px 0 0;
	height: 44px;
	text-decoration: none;
	overflow: hidden;
	/* The header bar is flex nowrap — without this the lockup gets
	   shrunk to a sliver by the search bar's flex-grow. */
	flex: 0 0 auto;
}

.cb-logo__bear {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	display: block;
}

.cb-logo__text {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	color: #0d0d0f;
	line-height: 1;
	white-space: nowrap;
}

.cb-logo:hover .cb-logo__text,
.cb-logo:focus-visible .cb-logo__text {
	color: #0d0d0f;
}

@media (max-width: 480px) {
	.cb-logo { height: 38px; }
	.cb-logo__bear { width: 38px; height: 38px; }
	.cb-logo__text { font-size: 0.92rem; }
}

/* --- Wordmark ------------------------------------------------------------ */
.cb-header__bar .cb-wordmark {
	margin: 0;
}

.cb-header__bar .cb-wordmark a,
.cb-header__bar .cb-wordmark {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
}

.cb-header__bar .cb-wordmark a:hover,
.cb-header__bar .cb-wordmark a:focus {
	color: var(--wp--preset--color--text);
}

/* Accent underline cue under the wordmark */
.cb-header__bar .cb-wordmark a {
	display: inline-block;
	border-bottom: 2px solid var(--wp--preset--color--accent);
	padding-bottom: 2px;
}

/* --- Primary nav -------------------------------------------------------- */
.cb-primary-nav {
	--wp--style--block-gap: 0;
}

.cb-primary-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text-muted); /* #B6B6C2 ~9.5:1 on base */
	/* DESIGN.md §3 signature: small tracked all-caps nav. */
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 4px 0;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.cb-primary-nav .wp-block-navigation-item__content:hover,
.cb-primary-nav .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--accent);
}

/* Active / current page state — accent text + accent underline */
.cb-primary-nav .current-menu-item > .wp-block-navigation-item__content,
.cb-primary-nav .wp-block-navigation-item__content[aria-current="page"],
.cb-primary-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
	border-bottom-color: var(--wp--preset--color--accent);
}

/* Mobile overlay readability */
.cb-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text);
}

/* === In-bar search (2026-06-06) ======================================== */
/* The search form moved from its own wp_body_open strip into the header
   bar: wordmark | search | nav (+ Woo-hooked account/cart). Overrides the
   legacy strip styles from breadcrumbs.css. */

/* 2026-07-02: the header bar + utility bar contents were clamped to the 760px
   theme content column — the logo floated ~340px in from the left edge and the
   VAT toggle hung near the middle of the screen. Align both to the same
   widened shell as the homepage sections so the header reads as one balanced
   full-width bar: logo hard left, search centre, nav + basket hard right.
   (!important outguns the wp-container constrained-layout child clamp.) */
.cb-header__bar,
.cb-utilitybar__inner {
	max-width: min(1280px, 94vw) !important;
}

/* The header template part in the DB (Site-Editor customised) carries a
   woocommerce/mini-cart block alongside the theme's own .cb-cart-link —
   two basket icons, the mini-cart one rendering as a grey ghost. Keep the
   designed basket link; suppress the stray block. */
.cb-header__bar .wc-block-mini-cart {
	display: none;
}

.cb-header__bar .cb-search-bar {
	margin: 0 var(--wp--preset--spacing--40, 1rem);
	/* Explicit basis — the form has no intrinsic width, so flex-basis:auto
	   collapsed it to 0px between the nowrap wordmark and nav. Widened so a full
	   SKU is visible while typing (was 280px → SKUs clipped to "sk…"). */
	flex: 0 1 420px;
	min-width: 240px;
	position: relative; /* anchor for the .cb-search-suggest dropdown */
}

.cb-header__bar .cb-search-input {
	height: 40px;
	font-size: 0.9rem;
	border-radius: 8px 0 0 8px;
	padding: 6px 14px;
	min-width: 0;
	transition: border-color 150ms ease-out, max-width 200ms ease-out;
}

.cb-header__bar .cb-search-submit {
	height: 40px;
	width: 40px;
	border-radius: 0 8px 8px 0;
}

/* Core's shortcode block emits NO frontend wrapper — .cb-search-bar is the
   direct flex child. Keep nav labels on one line beside it. */
.cb-header__bar .cb-primary-nav .wp-block-navigation-item__label {
	white-space: nowrap;
}

/* Tablet + mobile: the bar wraps to two rows — wordmark + nav + icons on the
   first row, full-width search on the second. Raised 781→1100 (2026-07-02):
   between ~780 and 1100px the nowrap logo+search+nav row exceeded the viewport
   and produced a horizontal page scroll. */
@media (max-width: 1100px) {
	.cb-header__bar {
		flex-wrap: wrap !important;
		/* D18 — wordmark was flush against the viewport edge on phones. */
		padding-inline: var(--wp--preset--spacing--30, 16px);
	}
	.cb-header__bar .cb-search-bar {
		order: 10;
		flex: 1 1 100%;
		max-width: none;
		margin: var(--wp--preset--spacing--20, 0.5rem) 0 0;
	}
}

/* ── Live search suggestions dropdown ─────────────────────────────────────
   Owns its own width so long SKUs wrap/show in full (the browser-native popup
   clipped them). Anchored to .cb-search-bar (position:relative above). */
.cb-search-suggest {
	position: absolute;
	z-index: 60;
	top: calc(100% + 6px);
	left: 0;
	right: auto;
	min-width: 100%;
	width: 460px;
	max-width: min(92vw, 520px);
	max-height: min(70vh, 460px);
	overflow-y: auto;
	background: var(--wp--preset--color--surface-raised, #222228);
	border: 1px solid var(--wp--preset--color--border-strong, #42424e);
	border-radius: 10px;
	box-shadow: 0 18px 48px rgb(0 0 0 / 0.45);
	padding: 6px;
}
.cb-search-suggest[hidden] { display: none; }

.cb-suggest__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 7px;
	text-decoration: none;
	color: var(--wp--preset--color--text, #f0f0f2);
}
.cb-suggest__item:hover,
.cb-suggest__item[aria-selected="true"] {
	background: var(--wp--preset--color--surface, #18181c);
}
.cb-suggest__thumb {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	object-fit: contain;
	background: #fff;
	border-radius: 6px;
}
.cb-suggest__thumb--empty { background: var(--wp--preset--color--surface-sunken, #101014); }
.cb-suggest__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-suggest__title {
	font-size: 0.875rem;
	line-height: 1.3;
	color: var(--wp--preset--color--text, #f0f0f2);
	/* allow full SKU/title to wrap rather than clip */
	white-space: normal;
	overflow-wrap: anywhere;
}
.cb-suggest__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.cb-suggest__sku {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.72rem;
	color: var(--wp--preset--color--text-subtle, #9898a8);
	overflow-wrap: anywhere;
}
.cb-suggest__price {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent, #e8ff00);
	font-variant-numeric: tabular-nums;
}
.cb-suggest__empty {
	padding: 12px 12px;
	font-size: 0.85rem;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
}

/* -------------------------------------------------------------------------
 *  Header basket link — persistent path to cart/checkout (sits OUTSIDE the
 *  mobile overlay nav so it stays tappable). Count hydrated by cart-count.js.
 * ------------------------------------------------------------------------- */
.cb-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 6px;
	border-radius: 8px;
	color: var(--wp--preset--color--text-muted, #b6b6c2);
	text-decoration: none;
	transition: color 150ms ease, background-color 150ms ease;
}

.cb-cart-link:hover,
.cb-cart-link:focus-visible {
	color: var(--wp--preset--color--text, #f0f0f2);
	outline: none;
}

.cb-cart-link.has-items {
	color: var(--wp--preset--color--text, #f0f0f2);
}

.cb-cart-link__icon {
	display: block;
	width: 24px;
	height: 24px;
}

.cb-cart-link__count {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--accent, #e8ff00);
	color: var(--wp--preset--color--base, #0d0d0f);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* === D-hybrid language pass (2026-08-16, premium redesign) ================
   Typography + surface pass only — structure, JS hooks, and a11y unchanged.
   Bear keeps its yellow brand square; the wordmark moves out of the pill
   into Archivo expanded white with a mono subline (the approved mockup
   lockup). Search + VAT lose their yellow fills (audit: accent saturation);
   the accent returns only on hover/focus and the cart count. */

.cb-logo {
	background: none;
	border: 0;
	padding: 0;
	gap: 12px;
}

.cb-logo__bear {
	background: #fff100; /* brand yellow, not the UI accent */
	border: 1px solid #0d0d0f;
}

.cb-logo__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-family: var(--wp--preset--font-family--archivo, var(--wp--preset--font-family--sans));
	font-stretch: 125%;
	font-weight: 900;
	font-size: 1.05rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text);
}

.cb-logo:hover .cb-logo__text,
.cb-logo:focus-visible .cb-logo__text {
	color: var(--wp--preset--color--text);
}

.cb-logo__sub {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 400;
	font-stretch: 100%;
	font-size: 8.5px;
	letter-spacing: 0.42em;
	color: var(--wp--preset--color--text-subtle);
}

/* Nav: Archivo expanded 800 — substantial, not letterboxed */
.cb-primary-nav .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--archivo, var(--wp--preset--font-family--sans));
	font-stretch: 110%;
	font-weight: 800;
	font-size: 0.875rem;
	letter-spacing: 0.07em;
}

.cb-primary-nav .wp-block-navigation-item__content:hover,
.cb-primary-nav .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--text);
	border-bottom-color: var(--wp--preset--color--text);
}

/* Current page keeps the accent underline as the one wayfinding accent */
.cb-primary-nav .current-menu-item > .wp-block-navigation-item__content,
.cb-primary-nav .wp-block-navigation-item__content[aria-current="page"],
.cb-primary-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text);
	border-bottom-color: var(--wp--preset--color--accent);
}

/* Search: squared instrument — mono input, ghost submit (yellow fill retired) */
.cb-header__bar .cb-search-input {
	border-radius: 0;
	background: var(--wp--preset--color--surface-sunken, #101014);
	border: 1px solid var(--wp--preset--color--border, #2e2e38);
	border-right: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--text);
}

.cb-header__bar .cb-search-input::placeholder {
	color: var(--wp--preset--color--text-subtle, #9898a8);
}

.cb-header__bar .cb-search-input:focus {
	border-color: var(--wp--preset--color--border-strong, #42424e);
	outline: none;
}

.cb-header__bar .cb-search-submit {
	border-radius: 0;
	background: transparent;
	border: 1px solid var(--wp--preset--color--border, #2e2e38);
	color: var(--wp--preset--color--text-muted, #b6b6c2);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cb-header__bar .cb-search-submit:hover,
.cb-header__bar .cb-search-submit:focus-visible {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base, #0d0d0f);
}

/* VAT toggle: mono instrument — active segment is white-on-dark, not yellow */
.cb-header__bar .cb-vat-toggle {
	display: flex;
	border: 1px solid var(--wp--preset--color--border-strong, #42424e);
	border-radius: 0;
	background: none;
	overflow: hidden;
}

.cb-header__bar .cb-vat-toggle__btn {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 6px 11px;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--text-subtle, #9898a8);
	transition: background 0.2s ease, color 0.2s ease;
}

.cb-header__bar .cb-vat-toggle__btn--active {
	background: var(--wp--preset--color--text, #f0f0f2);
	color: var(--wp--preset--color--base, #0d0d0f);
}

/* Vehicle picker strip under the header: mono selects, hairline frame */
.cb-vehicle-picker-bar .cb-vp-select {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85rem;
	border-radius: 0;
}

.cb-vehicle-picker-bar .cb-vp-find {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 0;
}

/* === Design audit fixes (2026-09-06, .work/audit-260905/D-design.md) =====
   Fix 12 — desktop overflow on cool-bear.co.uk: the bear+wordmark logo (212px)
   + 420px search + 612px nav + account + 163px toggle + basket no longer fit
   the 1280 shell, so the basket icon sat off-screen and "Ex. VAT" was clipped
   (scrollWidth 1538 vs 1440). Reduce the header footprint so logo + nav +
   toggle + basket fit at 1280–1600 and let the search absorb the slack.
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.cb-header__bar,
	.cb-utilitybar__inner {
		max-width: min(1280px, calc(100% - 48px)) !important;
		gap: 16px;
	}

	.cb-header__bar .cb-search-bar {
		flex: 1 1 200px;
		min-width: 150px;
		margin: 0 8px;
	}

	/* Nav: 0.98px → ~0.4px tracking, 105% stretch, 20px gap */
	.cb-primary-nav .wp-block-navigation-item__content {
		font-size: 0.8125rem;
		font-stretch: 105%;
		letter-spacing: 0.03em;
	}

	.cb-header__bar .cb-primary-nav .wp-block-navigation__container,
	.cb-header__bar .cb-primary-nav.wp-block-navigation {
		gap: 20px;
	}

	/* VAT toggle spans: 16px → 8px side padding (spans, never <button>) */
	.cb-header__bar .cb-vat-toggle__btn {
		padding: 3px 8px;
		font-size: 10px;
		letter-spacing: 0.1em;
	}

	/* Account block (Site-Editor header carries woocommerce/customer-account) */
	.cb-header__bar .wp-block-woocommerce-customer-account {
		flex: 0 0 auto;
	}
}

/* Tablet: between 768 and ~1200 the nowrap row can still exceed the viewport
   (was 1100). Wrap the search onto its own row a little earlier. */
@media (min-width: 768px) and (max-width: 1200px) {
	.cb-header__bar {
		flex-wrap: wrap !important;
	}
	.cb-header__bar .cb-search-bar {
		order: 10;
		flex: 1 1 100%;
		max-width: none;
		margin: var(--wp--preset--spacing--20, 0.5rem) 0 0;
	}
}

/* -------------------------------------------------------------------------
   Fix 2 — mobile header. Was 222px tall (logo row + VAT-toggle row + search
   row). Collapse to one ~62px bar: wordmark · search (icon, expands in place)
   · account · basket · burger — every control a 44×44 hit area. The VAT
   toggle (spans) moves INTO the navigation drawer (design-fixes.js) together
   with a "Find parts for your car" entry; if JS is unavailable the toggle is
   simply not shown on phones (VAT mode persists in its cookie).
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	header.wp-block-group.has-surface-background-color {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}

	.cb-header__bar {
		flex-wrap: nowrap !important;
		align-items: center;
		gap: 2px;
		position: relative;
		padding-inline: 12px;
		min-height: 44px;
	}

	.cb-header__bar > * {
		flex: 0 0 auto;
	}

	.cb-logo {
		order: 0;
		margin-right: auto;
		height: 40px;
		min-width: 0;
	}
	.cb-logo__bear { width: 40px; height: 40px; flex-basis: 40px; }
	.cb-logo__text { font-size: 0.95rem; }

	/* Search: icon-only until tapped, then expands over the bar in place */
	.cb-header__bar .cb-search-bar {
		order: 2;
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		min-width: 0;
		margin: 0;
		max-width: none;
	}
	.cb-header__bar .cb-search-form {
		display: flex;
		align-items: center;
		height: 44px;
	}
	.cb-header__bar .cb-search-bar:not(.is-open) .cb-search-input {
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
		pointer-events: none;
		padding: 0;
		border: 0;
	}
	.cb-header__bar .cb-search-submit {
		width: 44px;
		height: 44px;
		border: 0;
		background: transparent;
		color: var(--wp--preset--color--text-muted, #b6b6c2);
		border-radius: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.cb-header__bar .cb-search-submit svg { width: 22px; height: 22px; }
	.cb-header__bar .cb-search-bar.is-open {
		position: absolute;
		left: 12px;
		right: 12px;
		top: 50%;
		transform: translateY(-50%);
		width: auto;
		flex: none;
		z-index: 20;
		background: var(--wp--preset--color--surface, #18181c);
	}
	.cb-header__bar .cb-search-bar.is-open .cb-search-input {
		position: static;
		flex: 1 1 auto;
		width: 100%;
		height: 44px;
		opacity: 1;
		pointer-events: auto;
		padding: 6px 14px;
		border: 1px solid var(--wp--preset--color--border-strong, #42424e);
		border-right: 0;
		font-size: 16px; /* prevents iOS zoom-on-focus */
	}
	.cb-header__bar .cb-search-bar.is-open .cb-search-submit {
		border: 1px solid var(--wp--preset--color--border-strong, #42424e);
	}

	/* Account (Site-Editor header) + basket: 44px hit areas */
	.cb-header__bar .wp-block-woocommerce-customer-account { order: 3; }
	.cb-header__bar .wp-block-woocommerce-customer-account .wc-block-customer-account__link {
		width: 44px;
		height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}
	.cb-header__bar .cb-cart-link {
		order: 4;
		width: 44px;
		height: 44px;
		padding: 0;
	}
	.cb-header__bar .cb-cart-link__count { top: 2px; right: 2px; }

	/* Burger last, 44×44 */
	.cb-header__bar .cb-primary-nav { order: 5; }
	.cb-primary-nav .wp-block-navigation__responsive-container-open {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		margin: 0;
		color: var(--wp--preset--color--text, #f0f0f2);
	}
	/* Keep the overlay pattern up to 767 (core switches to inline at 600) */
	.cb-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	/* VAT toggle leaves the bar (moved into the drawer by design-fixes.js) */
	.cb-header__bar > .cb-vat-toggle { display: none; }

	/* ---- The drawer: a brand surface, not a white sheet ------------------ */
	.cb-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--wp--preset--color--base, #0d0d0f) !important;
		color: var(--wp--preset--color--text, #f0f0f2);
		padding: 0 !important;
		overscroll-behavior: contain;
	}
	.cb-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		position: relative;
		min-height: 100%;
		padding: 76px 20px 40px;
		box-sizing: border-box;
	}
	.cb-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute;
		top: 10px;
		right: 12px;
		width: 44px;
		height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		margin: 0;
		color: var(--wp--preset--color--text, #f0f0f2);
		background: transparent;
		border: 1px solid var(--wp--preset--color--border, #2e2e38);
		z-index: 2;
	}
	.cb-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: block;
		width: 100%;
		padding: 0 !important;
		align-items: stretch !important;
	}
	.cb-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		align-items: stretch !important;
		justify-content: flex-start;
		gap: 0 !important;
		width: 100%;
		border-top: 1px solid var(--wp--preset--color--border, #2e2e38);
	}
	.cb-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
		margin: 0;
		border-bottom: 1px solid var(--wp--preset--color--border, #2e2e38);
	}
	.cb-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 56px;
		padding: 0;
		border-bottom: 0;
		font-family: var(--wp--preset--font-family--archivo, var(--wp--preset--font-family--sans));
		font-stretch: 112%;
		font-weight: 800;
		font-size: 28px;
		line-height: 1;
		letter-spacing: 0.01em;
		text-transform: uppercase;
		text-align: left;
		color: var(--wp--preset--color--text, #f0f0f2);
	}
	.cb-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
		white-space: normal;
		padding: 2px 0;
	}
	/* Current page: accent underline under the label — the one accent cue */
	.cb-primary-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content .wp-block-navigation-item__label,
	.cb-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"] .wp-block-navigation-item__label {
		box-shadow: inset 0 -3px 0 var(--wp--preset--color--accent, #e8ff00);
	}
	.cb-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
	.cb-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
		color: var(--wp--preset--color--accent, #e8ff00);
		border-bottom: 0;
	}

	/* Drawer extras (injected by design-fixes.js): car finder + VAT toggle */
	.cb-drawer__extras {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-top: 28px;
	}
	.cb-drawer__finder {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 56px;
		padding: 0 16px;
		border: 1px solid rgba(232, 255, 0, 0.55);
		color: var(--wp--preset--color--accent, #e8ff00);
		font-family: var(--wp--preset--font-family--mono);
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		text-decoration: none;
	}
	.cb-drawer__finder:hover,
	.cb-drawer__finder:focus-visible {
		background: var(--wp--preset--color--accent, #e8ff00);
		color: var(--wp--preset--color--base, #0d0d0f);
	}
	.cb-drawer__finder svg { flex: 0 0 auto; }
	.cb-drawer__vat {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 44px;
	}
	.cb-drawer__vat-label {
		font-family: var(--wp--preset--font-family--mono);
		font-size: 11px;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--wp--preset--color--text-subtle, #9898a8);
	}
	.cb-drawer__vat .cb-vat-toggle {
		display: flex;
		margin: 0;
		border: 1px solid var(--wp--preset--color--border-strong, #42424e);
		border-radius: 0;
		background: none;
		overflow: hidden;
	}
	.cb-drawer__vat .cb-vat-toggle__btn {
		min-height: 44px;
		padding: 8px 16px;
		font-family: var(--wp--preset--font-family--mono);
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		border-radius: 0;
		border: 0;
		background: none;
		color: var(--wp--preset--color--text-subtle, #9898a8);
	}
	.cb-drawer__vat .cb-vat-toggle__btn--active {
		background: var(--wp--preset--color--text, #f0f0f2);
		color: var(--wp--preset--color--base, #0d0d0f);
	}

	/* Vehicle bar under the header: keep the combined stack ≤ 108px */
	.cb-vehicle-picker-bar:not(.cb-vp-expanded) {
		padding-top: 6px;
		padding-bottom: 6px;
		min-height: 44px;
	}
}

/* Body scroll lock while the drawer is open (iOS ignores overflow on <html>) */
html.has-modal-open body {
	overflow: hidden;
}
body.cb-menu-open {
	position: fixed;
	width: 100%;
	overflow: hidden;
}

/* ---- cool-bear-atmosphere (/wp-content/themes/cool-bear/assets/css/components/atmosphere.css) ---- */
/**
 * Atmosphere — the "night garage editorial" layer.
 *
 * Operator brief (2026-06-06): the site reads sterile — flat black/yellow/
 * white with no depth. This component adds the missing atmosphere WITHOUT
 * changing the brand language: film grain, masked product photography,
 * kerb-stripe + speed-line motifs, and a condensed motorsport display face
 * for headings. Everything degrades gracefully and respects
 * prefers-reduced-motion.
 *
 * @package cool-bear
 */

/* === Display face ====================================================== */
/* Saira SemiCondensed — geometric, motorsport-adjacent. Self-hosted (no
   third-party font CDN at runtime). The family ships no italic; the racing
   lean is synthesised with oblique so we control the exact angle. */

@font-face {
	font-family: 'Saira SemiCondensed';
	src: url('/wp-content/themes/cool-bear/assets/fonts/saira-semicondensed-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Saira SemiCondensed';
	src: url('/wp-content/themes/cool-bear/assets/fonts/saira-semicondensed-800.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

:root {
	--cb-display-font: 'Saira SemiCondensed', 'DM Sans', sans-serif;
	--cb-accent: var(--wp--preset--color--accent, #e8ff00);
}

/* Display treatment for the big moments: hero H1, section headings,
   archive titles. Uppercase condensed with a subtle forward lean. */
.cb-display,
.cb-hero h1,
.cb-home-section__heading,
.cb-plp__title,
h1.wp-block-post-title {
	font-family: var(--cb-display-font);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.015em;
	font-style: oblique 6deg;
}

/* Kerb stripe — the yellow/black chequer detail under display headings. */
.cb-kerb,
.cb-home-section__heading::after {
	content: '';
	display: block;
	width: 64px;
	height: 6px;
	margin-top: 10px;
	background: repeating-linear-gradient(
		-45deg,
		var(--cb-accent) 0 8px,
		transparent 8px 16px
	);
}

/* === Film grain ======================================================== */
/* Whole-page micro noise at 2.5% — the single cheapest "not a flat PNG of
   black" signal. Pure SVG data URI, zero requests, GPU-composited. */

body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.025;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/wp-content/themes/cool-bear/assets/css/components/%23n)'/%3E%3C/svg%3E");
}

/* === Speed lines ======================================================= */
/* Thin diagonal accent slashes used as section punctuation. Apply the
   class to any section that needs the motif. */

.cb-speedlines {
	position: relative;
	overflow: hidden;
}
.cb-speedlines::before {
	content: '';
	position: absolute;
	top: -20%;
	right: -5%;
	width: 50%;
	height: 140%;
	pointer-events: none;
	background: repeating-linear-gradient(
		115deg,
		transparent 0 90px,
		color-mix(in srgb, var(--cb-accent) 7%, transparent) 90px 92px,
		transparent 92px 240px
	);
	-webkit-mask-image: linear-gradient(to left, black 30%, transparent);
	mask-image: linear-gradient(to left, black 30%, transparent);
}

/* === Carbon weave ====================================================== */
/* Very low-contrast diagonal weave for raised surfaces (tiles, trust band).
   Reads as texture, not pattern, at arm's length. */

.cb-carbon {
	background-image:
		repeating-linear-gradient(45deg, rgb(255 255 255 / 0.012) 0 2px, transparent 2px 6px),
		repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.012) 0 2px, transparent 2px 6px);
}

/* === Product ghost ===================================================== */
/* A product photograph bled into a dark section background. The element
   carries the image; the mask fades it into the page so it reads as
   atmosphere, not content. Used by the hero and archive headers. */

.cb-ghost {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.cb-ghost img {
	position: absolute;
	right: -4%;
	top: 50%;
	transform: translateY(-50%) rotate(-4deg);
	width: min(52vw, 760px);
	height: auto;
	opacity: 0.55;
	filter: saturate(0.85) contrast(1.05);
	-webkit-mask-image: radial-gradient(70% 70% at 60% 50%, black 35%, transparent 78%);
	mask-image: radial-gradient(70% 70% at 60% 50%, black 35%, transparent 78%);
}
@media (max-width: 781px) {
	.cb-ghost img {
		width: 120vw;
		right: -35%;
		opacity: 0.28;
	}
}

/* Slow drift on the ghost — barely perceptible life. */
@media (prefers-reduced-motion: no-preference) {
	.cb-ghost img {
		animation: cb-ghost-drift 14s ease-in-out infinite alternate;
	}
	@keyframes cb-ghost-drift {
		from { transform: translateY(-50%) rotate(-4deg); }
		to   { transform: translateY(-52%) rotate(-3.2deg); }
	}
}

/* Sections that host a ghost need stacking context + clipped overflow. */
.cb-has-ghost {
	position: relative;
	overflow: hidden;
}
.cb-has-ghost > :not(.cb-ghost) {
	position: relative;
	z-index: 1;
}

/* === Section washes ==================================================== */
/* Alternating section background treatments so long pages don't read as
   one continuous black slab. */

.cb-wash-accent {
	background:
		radial-gradient(60% 90% at 85% 10%, color-mix(in srgb, var(--cb-accent) 6%, transparent), transparent 70%),
		radial-gradient(50% 80% at 10% 100%, rgb(255 255 255 / 0.02), transparent 70%);
}
.cb-wash-steel {
	background: linear-gradient(180deg, rgb(255 255 255 / 0.025), transparent 35%);
}

/* Header-strip variant — calmer than the hero ghost. */
.cb-ghost--header img {
	width: min(34vw, 420px);
	opacity: 0.32;
	right: 2%;
	transform: translateY(-50%) rotate(-3deg);
}

/* === Clean catalogue (2026-06-11) ====================================== */
/* The BC-Racing-grade consistency pass: every product image sits in a
   white "well" so renders read like a printed catalogue, and every
   coilover range carries a colour-coded badge — the series system. */

.cb-img-well {
	position: relative;
	display: block;
	/* Graphite well — matches the PDP media treatment (pdp.css §brake/coilover/wheel).
	   Product renders are transparent PNGs (audit 2026-06-17), so a dark well + normal
	   blend reads as a clean cut-out on the dark theme instead of a stark white box.
	   (The old #f4f4f6 + multiply was built for baked-white JPEGs that no longer exist.) */
	background: radial-gradient(125% 110% at 50% 28%, #2a2a31 0%, #1c1c21 62%, #141417 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
	border-radius: 0; /* DESIGN.md §4 — sharp corners on imagery */
	overflow: hidden;
	aspect-ratio: 1 / 1; /* true square wells — print-catalogue grid */
}
.cb-img-well img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: normal; /* transparent PNG renders sit directly on the graphite */
	box-sizing: border-box;
}
/* wpautop turns renderer newlines into in-flow <br>s that shove the image
   out of the well — neutralise any that sneak through. */
.cb-img-well br {
	display: none;
}

/* Range badge — top-left colour chip, initials of the range. */
.cb-range-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	min-width: 34px;
	padding: 4px 8px;
	border-radius: 6px;
	font-family: var(--cb-display-font);
	font-weight: 800;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-align: center;
	color: #0d0d0f;
	background: var(--cb-range-colour, var(--cb-accent));
}

/* The series palette — one colour per range, used by badges (and anywhere
   else a range needs identity). */
.cb-range-badge--super-sport     { --cb-range-colour: #e8ff00; }
.cb-range-badge--top-sport       { --cb-range-colour: #ff8a00; }
.cb-range-badge--racing-spec     { --cb-range-colour: #ef233c; color: #fff; }
.cb-range-badge--tarmac-rally    { --cb-range-colour: #2ec4b6; }
.cb-range-badge--gravel-rally    { --cb-range-colour: #d4a373; }
.cb-range-badge--pro-rally       { --cb-range-colour: #8338ec; color: #fff; }
.cb-range-badge--drift-spec      { --cb-range-colour: #ff2e92; color: #fff; }
.cb-range-badge--street-advanced { --cb-range-colour: #38b000; color: #fff; }
.cb-range-badge--circuit-master  { --cb-range-colour: #c8c8ce; }

/* Hero photography — full-bleed real-car shot behind the homepage hero,
   replacing the abstract glow as the primary backdrop. Dark gradient keeps
   the left-side copy at full contrast. */
/* Child-combinator + !important-free specificity bump: front-page.css ships
   `.cb-hero > * { position:relative; z-index:1 }` which loads later and was
   flattening the photo layer to an invisible 0-height block (defect D1). */
.cb-hero > .cb-hero-photo,
.cb-hero-photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	/* WP constrained layout clamps even absolute children to content-size —
	   un-clamp so the photograph bleeds the full hero width. */
	max-width: none;
	pointer-events: none;
	background-size: cover;
	background-position: center right;
}
/* Hero video loop — fills the photo layer; the background-image doubles as
   poster/fallback. Hidden for reduced-motion users (poster shows instead). */
.cb-hero-photo .cb-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
	.cb-hero-photo .cb-hero-video {
		display: none;
	}
}

.cb-hero-photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgb(13 13 15 / 0.96) 0%,
		rgb(13 13 15 / 0.88) 38%,
		rgb(13 13 15 / 0.45) 70%,
		rgb(13 13 15 / 0.25) 100%
	);
}

/* ---- cool-bear-footer (/wp-content/themes/cool-bear/assets/css/components/footer.css) ---- */
/* ===========================================================================
 * Footer component — cohesive dark footer block.
 *
 * Structure (parts/footer.html):
 *   .cb-footer                  full-width block, 2px accent top rule
 *     .cb-email-signup          newsletter card ("Join the Grid")
 *     .cb-footer__cols          4-up link columns
 *     .cb-footer__bottom        © / dealer badge / payment badges bar
 * ========================================================================= */

.cb-footer {
	border-top: 2px solid var(--wp--preset--color--accent);
	/* wideSize (1440px) === common viewport width and no root padding is set,
	   so alignwide children would sit flush against the screen edge without this. */
	padding-left: var(--wp--preset--spacing--50);
	padding-right: var(--wp--preset--spacing--50);
}

@media (max-width: 600px) {
	.cb-footer {
		padding-left: var(--wp--preset--spacing--40);
		padding-right: var(--wp--preset--spacing--40);
	}
}

/* --------------------------------------------------------------------------
 * Newsletter card — compact, centred, inside the footer.
 * ------------------------------------------------------------------------ */
.cb-email-signup {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--cb-radius, 8px);
	text-align: center;
}

.cb-email-signup__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--cb-display-font, 'Saira SemiCondensed', 'DM Sans', sans-serif);
	font-size: var(--wp--preset--font-size--heading);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text);
}

.cb-email-signup__lede {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

/* Inline input + button pill — joined corners, equal height. */
.cb-email-signup__form {
	display: flex;
	max-width: 440px;
	margin: 0 auto;
}

.cb-email-signup__form input[type='email'] {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface-sunken);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-right: 0;
	border-radius: 999px 0 0 999px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text);
}

.cb-email-signup__form input[type='email']::placeholder {
	color: var(--wp--preset--color--text-subtle);
}

.cb-email-signup__form input[type='email']:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
}

.cb-email-signup__form button[type='submit'] {
	flex: 0 0 auto;
	height: 48px;
	padding: 0 var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--accent);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 0 999px 999px 0;
	font-family: var(--cb-display-font, 'Saira SemiCondensed', 'DM Sans', sans-serif);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-on-accent);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.cb-email-signup__form button[type='submit']:hover,
.cb-email-signup__form button[type='submit']:focus-visible {
	background: var(--wp--preset--color--accent-hover);
	border-color: var(--wp--preset--color--accent-hover);
}

.cb-email-signup__note {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-subtle);
}

.cb-email-signup__success {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--success);
}

@media (max-width: 600px) {
	.cb-email-signup {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}

	.cb-email-signup__form {
		flex-direction: column;
		gap: var(--wp--preset--spacing--20);
	}

	.cb-email-signup__form input[type='email'] {
		border-right: 1px solid var(--wp--preset--color--border-strong);
		border-radius: 999px;
		text-align: center;
	}

	.cb-email-signup__form button[type='submit'] {
		border-radius: 999px;
	}
}

/* --------------------------------------------------------------------------
 * Link columns — uppercase letterspaced headings, muted links, accent hover.
 * ------------------------------------------------------------------------ */
.cb-footer__cols {
	padding-bottom: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.cb-footer__heading {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cb-footer__nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text-muted);
	transition: color 0.15s ease;
}

.cb-footer__nav .wp-block-navigation-item__content:hover,
.cb-footer__nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.cb-footer__nav.wp-block-navigation {
	gap: var(--wp--preset--spacing--20);
}

/* Tablet: 2-up. Mobile: columns stack via core, just tighten the gap. */
@media (max-width: 781px) {
	.cb-footer__cols.wp-block-columns {
		flex-wrap: wrap !important;
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	}

	.cb-footer__cols > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--50)) !important;
	}
}

@media (max-width: 480px) {
	.cb-footer__cols > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* --------------------------------------------------------------------------
 * Bottom bar — © line, dealer badge, payment text badges.
 * ------------------------------------------------------------------------ */
.cb-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--40);
}

.cb-footer__copy {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-muted);
}

.cb-footer__dealer {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.4;
	text-align: center;
}

.cb-footer__dealer strong {
	color: var(--wp--preset--color--text);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cb-footer__dealer span {
	color: var(--wp--preset--color--text-subtle);
}

.cb-footer__payments {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cb-footer__payments li {
	padding: 3px 10px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--text-muted);
	white-space: nowrap;
}

@media (max-width: 781px) {
	.cb-footer__bottom {
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.cb-footer__payments {
		justify-content: center;
	}
}

/* === Design audit fixes (2026-09-06): 44px tap targets on phones ======== */
@media (max-width: 767px) {
	.cb-footer__nav .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0;
	}
	.cb-footer__nav.wp-block-navigation {
		gap: 0;
	}
	.cb-footer__bottom a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ---- cool-bear-archive (/wp-content/themes/cool-bear/assets/css/templates/archive.css) ---- */
/**
 * Cool Bear — Category landing (archive-cb_*) layout.
 *
 * Q11 — list view default; grid-view available via toggle. Sidebar with
 * category-specific filters; YMM picker integration via existing
 * cool-bear/vehicle-picker block in the header.
 *
 * Fixes D2 — old grid was 187x600 scrunched cards on 1920. New grid uses
 * minmax(280px, 1fr) so cards never go below 280px wide; list view shows
 * full-width rows with image + spec preview + CTA.
 */

.cb-plp {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--text);
	padding-bottom: var(--wp--preset--spacing--80);
}

.cb-plp__container {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--40);
}

@media (min-width: 1024px) {
	.cb-plp__container {
		padding-left: var(--wp--preset--spacing--60);
		padding-right: var(--wp--preset--spacing--60);
	}
}

/* -------------------------------------------------------------------------
 *  Page header — title + count + view toggle
 * ------------------------------------------------------------------------- */
.cb-plp__header {
	padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--40);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

@media (min-width: 768px) {
	.cb-plp__header {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
}

.cb-plp__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--wp--preset--color--text);
	line-height: 1.05;
}

.cb-plp__lede {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	margin: 4px 0 0;
}

/* On a shop-by-car landing the [cb_shop_by_car] section emits the
   vehicle-specific lede, so hide the generic archive lede + setnote. */
.cb-sbc-landing .cb-plp__lede--base {
	display: none;
}

/* View toggle (list ↔ grid) */
.cb-view-toggle {
	display: inline-flex;
	gap: 0;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: 4px;
	align-self: flex-start;
}

.cb-view-toggle__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: none;
	border: none;
	color: var(--wp--preset--color--text-muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	border-radius: 6px;
	transition: background-color 150ms ease, color 150ms ease;
	min-height: 36px;
}

.cb-view-toggle__btn:hover { color: var(--wp--preset--color--text); }

.cb-view-toggle__btn[aria-pressed="true"] {
	background-color: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--text);
}

.cb-view-toggle__icon {
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
}

/* -------------------------------------------------------------------------
 *  Two-column layout — sidebar + main
 * ------------------------------------------------------------------------- */
.cb-plp__split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 1024px) {
	.cb-plp__split {
		grid-template-columns: 280px 1fr;
		gap: var(--wp--preset--spacing--60);
		align-items: flex-start;
	}
}

@media (min-width: 1440px) {
	.cb-plp__split { grid-template-columns: 320px 1fr; }
}

.cb-plp__sidebar {
	position: relative;
}

@media (min-width: 1024px) {
	.cb-plp__sidebar {
		position: sticky;
		top: var(--wp--preset--spacing--40);
		max-height: calc(100vh - var(--wp--preset--spacing--80));
		overflow-y: auto;
		scrollbar-width: thin;
		padding-right: var(--wp--preset--spacing--20);
	}
}

/* Mobile filter drawer toggle */
.cb-plp__drawer-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px;
	width: 100%;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	color: var(--wp--preset--color--text);
	font-weight: 600;
	cursor: pointer;
	min-height: 44px;
}

@media (min-width: 1024px) {
	.cb-plp__drawer-toggle { display: none; }
}

/* -------------------------------------------------------------------------
 *  Product list (default — Q11)
 * ------------------------------------------------------------------------- */
.cb-plp__main {
	min-width: 0;
}

.cb-plp__list,
.cb-plp__grid {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* List view — rows */
.cb-plp__list { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }

.cb-plp__row {
	display: grid;
	grid-template-columns: 1fr;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	overflow: hidden;
	transition: border-color 150ms ease, transform 150ms ease;
}

@media (min-width: 480px) {
	.cb-plp__row { grid-template-columns: 200px 1fr; }
}

@media (min-width: 768px) {
	.cb-plp__row { grid-template-columns: 240px 1fr auto; }
}

@media (min-width: 1280px) {
	.cb-plp__row { grid-template-columns: 280px 1fr auto; }
}

.cb-plp__row:hover {
	border-color: var(--wp--preset--color--text-muted);
	transform: translateY(-1px);
}

.cb-plp__row-image {
	aspect-ratio: 4 / 3;
	background-color: var(--wp--preset--color--surface-sunken);
	overflow: hidden;
	position: relative;
}

@media (min-width: 480px) { .cb-plp__row-image { aspect-ratio: 1 / 1; } }

.cb-plp__row-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cb-plp__row-body {
	padding: var(--wp--preset--spacing--40);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
}

.cb-plp__row-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.cb-plp__row-name {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	margin: 0;
	color: var(--wp--preset--color--text);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.cb-plp__row-name a {
	color: inherit;
	text-decoration: none;
}

.cb-plp__row-name a:hover { color: var(--wp--preset--color--accent); }

.cb-plp__row-specs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-muted);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cb-plp__row-spec {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.cb-plp__row-spec strong {
	color: var(--wp--preset--color--text);
	font-weight: 600;
}

.cb-plp__row-cta {
	padding: var(--wp--preset--spacing--40);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	background-color: var(--wp--preset--color--surface-sunken);
	border-top: 1px solid var(--wp--preset--color--border);
	min-width: 200px;
}

@media (min-width: 768px) {
	.cb-plp__row-cta {
		border-top: none;
		border-left: 1px solid var(--wp--preset--color--border);
	}
}

.cb-plp__row-price {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--wp--preset--color--text);
	letter-spacing: -0.02em;
	text-align: center;
}

.cb-plp__row-price-prefix {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: var(--wp--preset--color--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 400;
	margin-bottom: 2px;
}

.cb-plp__row-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--text-on-accent);
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	transition: background-color 150ms ease;
	min-height: 44px;
}

.cb-plp__row-button:hover {
	background-color: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--text-on-accent);
}

.cb-plp__row-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: var(--wp--preset--color--text-muted);
	text-align: center;
	letter-spacing: 0.04em;
}

/* -------------------------------------------------------------------------
 *  Grid view — toggle alternative
 * ------------------------------------------------------------------------- */
.cb-plp__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--wp--preset--spacing--30);
}

@media (min-width: 1280px) {
	.cb-plp__grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* When .cb-plp[data-view="grid"] is active, hide list and show grid */
.cb-plp[data-view="grid"] .cb-plp__list { display: none; }
.cb-plp[data-view="list"] .cb-plp__grid { display: none; }

/* Grid card — replicated from list row but stacked */
.cb-plp__card {
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	color: var(--wp--preset--color--text);
	transition: border-color 150ms ease, transform 150ms ease;
}

.cb-plp__card:hover {
	border-color: var(--wp--preset--color--text-muted);
	transform: translateY(-2px);
}

.cb-plp__card-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	background-color: var(--wp--preset--color--surface-sunken);
	overflow: hidden;
}

.cb-plp__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cb-plp__card-body {
	padding: var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	flex: 1;
}

.cb-plp__card-name {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	margin: 0;
	line-height: 1.25;
	color: var(--wp--preset--color--text);
}

.cb-plp__card-price {
	margin-top: auto;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--wp--preset--color--text);
}

/* -------------------------------------------------------------------------
 *  Filter sidebar styles
 * ------------------------------------------------------------------------- */
.cb-filters {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--30);
}

.cb-filters__heading {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.cb-filters__group {
	padding: var(--wp--preset--spacing--30) 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.cb-filters__group:last-child { border-bottom: none; }

.cb-filters__group-title {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--text);
	margin: 0 0 var(--wp--preset--spacing--20);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* -------------------------------------------------------------------------
 *  Pagination / load-more
 * ------------------------------------------------------------------------- */
.cb-plp__loadmore {
	display: flex;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--50);
}

.cb-plp__loadmore button {
	padding: 14px 28px;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	min-height: 48px;
	transition: border-color 150ms ease, color 150ms ease;
}

.cb-plp__loadmore button:hover {
	border-color: var(--wp--preset--color--text-muted);
}

/* -------------------------------------------------------------------------
 *  Empty state
 * ------------------------------------------------------------------------- */
.cb-plp__empty {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
	text-align: center;
	background-color: var(--wp--preset--color--surface);
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: 8px;
}

.cb-plp__empty-title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	margin: 0 0 var(--wp--preset--spacing--20);
}

.cb-plp__empty-text {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Archive header photographic backdrop — Macau GT World Cup shots (Media
   harvest 2026-06-12) replace the decorative ghost-strut band. */
.cb-plp__header {
	position: relative;
	overflow: hidden;
}
.cb-plp__header-photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: none;
	pointer-events: none;
	background-size: cover;
	background-position: center 38%;
}
.cb-plp__header-photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgb(13 13 15 / 0.94) 0%, rgb(13 13 15 / 0.82) 45%, rgb(13 13 15 / 0.45) 100%);
}
.cb-plp__header > :not(.cb-plp__header-photo) {
	position: relative;
	z-index: 1;
}

/* ---- cool-bear-v2-language (/wp-content/themes/cool-bear/assets/css/components/v2-language.css) ---- */
/**
 * D-hybrid language pass — sitewide typography + accent-budget rules.
 * (premium redesign, 2026-08-16; loaded after theme.css everywhere)
 *
 * Scope: display faces and accent discipline ONLY — no layout changes.
 * - Display titles → Archivo variable, expanded, 900 (the approved mockup's
 *   .mega treatment), section headings → Archivo 800/112%.
 * - Eyebrows → JetBrains Mono, wide-tracked.
 * - Prices → mono, tabular numerals; PDP price leaves accent-yellow so the
 *   Add-to-basket button is the page's one solid accent (audit: accent
 *   saturation had flattened all hierarchy).
 * - Card/row CTAs: accent border + accent text on dark (operator 2026-07-03
 *   requires the button to LOOK like a button — the old white ghost failed),
 *   solid accent fill on hover. Kills the 15-solid-yellow-blocks wall while
 *   keeping every button unmistakable.
 */

/* ---------- display titles ---------- */
.cb-plp__title,
.cb-pdp__title,
.cb-cinematic__title {
	font-family: var(--wp--preset--font-family--archivo, var(--wp--preset--font-family--sans));
	font-stretch: 118%;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.015em;
	line-height: 0.98;
}

/* ---------- section headings ---------- */
.cb-section-heading,
.cb-landing__title,
.cb-home-section__heading,
.cb-filters__heading,
.cb-plp__empty-title,
.cb-pdp__mounts-title,
.cb-pdp__kit-title,
.cb-pdp__upgrades-title,
.cb-pdp__hero-closeups-title {
	font-family: var(--wp--preset--font-family--archivo, var(--wp--preset--font-family--sans));
	font-stretch: 112%;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

/* ---------- eyebrows → mono ritual ---------- */
.cb-section-eyebrow,
.cb-landing__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.24em;
	color: var(--wp--preset--color--text-subtle);
}

/* ---------- prices → mono instruments ---------- */
.cb-plp__row-price,
.cb-plp__card-price,
.cb-pdp .cb-buy-row__amount,
.cb-pdp .cb-configurator__summary-price {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* PDP price: white, not yellow — the buy button carries the accent */
.cb-pdp .cb-buy-row__amount,
.cb-pdp .cb-configurator__summary-price {
	color: var(--wp--preset--color--text);
}

/* ---------- listing CTAs: bordered accent, solid only on hover ---------- */
.cb-plp__row-button,
.cb-product-card__cta--ghost {
	background: transparent;
	border: 1px solid rgba(232, 255, 0, 0.55);
	color: var(--wp--preset--color--accent);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}

.cb-plp__row-button:hover,
.cb-plp__row-button:focus-visible,
.cb-product-card__cta--ghost:hover,
.cb-product-card__cta--ghost:focus-visible {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--text-on-accent, #0d0d0f);
}

/* ---------- About page — group / factory / patents additions ---------- */
.cb-about-fig img {
	background: #fff;
	padding: 24px;
	border: 1px solid var(--wp--preset--color--border);
	max-width: 100%;
	height: auto;
}

details.cb-about-fold {
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface-sunken, #101014);
	padding: 0 18px;
	margin: 12px 0;
}

details.cb-about-fold summary {
	cursor: pointer;
	list-style: none;
	padding: 14px 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	transition: color 0.2s ease;
}

details.cb-about-fold summary::before {
	content: "+";
	display: inline-block;
	width: 1.4em;
	color: var(--wp--preset--color--accent);
}

details.cb-about-fold[open] summary::before { content: "–"; }
details.cb-about-fold summary:hover { color: var(--wp--preset--color--text); }
details.cb-about-fold summary::-webkit-details-marker { display: none; }

details.cb-about-fold > ol {
	margin: 4px 0 18px;
	padding-left: 38px;
}

details.cb-about-fold > ol li {
	margin-bottom: 8px;
	color: var(--wp--preset--color--text-muted);
}

details.cb-about-fold > ol li strong {
	color: var(--wp--preset--color--text);
}

.cb-about-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 12px;
	margin: 4px 0 18px;
}

.cb-about-gallery img {
	width: 100%;
	height: auto;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
}

/* =========================================================================
 *  Design audit fixes (2026-09-06, .work/audit-260905/D-design.md)
 * ========================================================================= */

/* ---------- Display face: retire the Saira leak ---------------------------
   atmosphere.css still points --cb-display-font at Saira SemiCondensed with a
   6° oblique; it surfaced on /my-account/ (h1.wp-block-post-title), the range
   badges, footer headings and the Studio. The v2 language is Archivo expanded,
   upright. Re-point the token here (priority-20 sheet → wins). */
:root {
	--cb-display-font: var(--wp--preset--font-family--archivo, "Archivo", "DM Sans", sans-serif);
}
.cb-display,
.cb-hero h1,
.cb-home-section__heading,
.cb-plp__title,
h1.wp-block-post-title {
	font-style: normal;
	font-stretch: 118%;
	font-weight: 900;
	letter-spacing: -0.015em;
}
h1.wp-block-post-title {
	text-transform: uppercase;
}

/* ---------- PLP cards (P2): 4-up, quiet range pill, readable type ----------
   product-grid.css (plugin) sets the coilover grid to minmax(150px) → five
   163px cards with a full-width solid yellow range bar each (25 yellow blocks
   per page). 4 columns from 1280 (3 at ≤1100, 2 at ≤767), range as a mono
   pill on --accent-subtle, DM Sans 600 15px titles, mono 16px prices, 12px
   subtle "inc. VAT". Selectors match/exceed the plugin's specificity. */
main.cb-plp[data-cb-archive="coilover"][data-view="grid"] .cb-plp__grid,
main.cb-plp[data-view="grid"] .cb-plp__grid {
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	gap: 16px;
}
@media (min-width: 1280px) {
	main.cb-plp[data-cb-archive="coilover"][data-view="grid"] .cb-plp__grid,
	main.cb-plp[data-view="grid"] .cb-plp__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media (min-width: 900px) and (max-width: 1279px) {
	main.cb-plp[data-cb-archive="coilover"][data-view="grid"] .cb-plp__grid,
	main.cb-plp[data-view="grid"] .cb-plp__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 899px) {
	main.cb-plp[data-cb-archive="coilover"][data-view="grid"] .cb-plp__grid,
	main.cb-plp[data-view="grid"] .cb-plp__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Range → pill (mono 11px accent on --accent-subtle), top-left of the well */
main.cb-plp .cb-range-badge,
main.cb-plp .cb-range-badge.cb-range-badge--bar,
main.cb-plp[data-cb-archive="coilover"][data-view="grid"] .cb-range-badge.cb-range-badge--bar {
	top: 10px;
	left: 10px;
	right: auto;
	bottom: auto;
	min-width: 0;
	width: auto;
	max-width: calc(100% - 20px);
	padding: 4px 8px;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: left;
	color: var(--wp--preset--color--accent, #e8ff00);
	background: var(--wp--preset--color--accent-subtle, #3a4500);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* The render fills the whole well again (the bar inset is gone) */
main.cb-plp[data-view="grid"] .cb-img-well:has(> .cb-range-badge--bar) img,
main.cb-plp[data-view="list"] .cb-img-well:has(> .cb-range-badge--bar) img,
main.cb-plp[data-cb-archive="coilover"][data-view="grid"] .cb-img-well:has(> .cb-range-badge--bar) img {
	top: 0;
	height: 100%;
}

main.cb-plp[data-view="grid"] .cb-product-card__title,
main.cb-plp[data-cb-archive="coilover"][data-view="grid"] .cb-product-card__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	padding: 12px 12px 0;
}
main.cb-plp[data-view="grid"] .cb-product-card__price,
main.cb-plp[data-cb-archive="coilover"][data-view="grid"] .cb-product-card__price {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 16px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	padding: 6px 12px;
}
main.cb-plp .cb-product-card__vat {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 500;
	color: var(--wp--preset--color--text-subtle, #9898a8);
}
main.cb-plp[data-cb-archive="coilover"][data-view="grid"] .cb-product-card__cta {
	height: 40px;
	line-height: 38px;
	font-size: 0.75rem;
}

/* ---- cb-ux-fixes (/wp-content/plugins/cool-bear-core/assets/css/ux-fixes.css) ---- */
/* ==========================================================================
 *  UX audit fixes — 2026-09-07 (.work/audit-260905/A-functional.md, D-design.md)
 *  Enqueued by Cool_Bear_UX_Fixes on the CPT PDPs + product archives, after
 *  the theme / faceted-filters / configurator sheets. Every rule here is a
 *  narrow override next to a behaviour in class-faceted-filters.php,
 *  class-pdp-hydrator.php, faceted-filters.js or ux-fixes.js.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 *  PLP — one pagination mechanism (D#P2)
 *  faceted-filters.js adds .cb-plp--js when it boots: JS on → "Load more"
 *  is the mechanism and the crawlable numbered links hide (they stay in the
 *  HTML for search engines); JS off → the inert button hides instead.
 * -------------------------------------------------------------------------- */
.cb-plp--js .cb-pagination {
	display: none;
}
.cb-plp:not(.cb-plp--js) .cb-load-more-wrap {
	display: none;
}

/* Empty facet groups (every option 0, none ticked) + empty-grid toolbar chrome. */
.cb-filter-group--empty {
	display: none;
}
.cb-filter-group--empty + .cb-filter-divider {
	display: none;
}
.cb-plp__toolbar--empty .cb-plp__toolbar-controls {
	display: none;
}

/* Price-range chip */
.cb-filter-chip--price .cb-filter-chip__label {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	letter-spacing: 0.02em;
}

/* Card note line — φ55 + factory notes stripped out of the headline (D#P2). */
.cb-product-card__note {
	margin: -4px 0 8px;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: 11px;
	line-height: 1.35;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--text-muted, #9898a8);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* --------------------------------------------------------------------------
 *  PLP — saved-vehicle zero-result state (D#P1)
 *  Rendered by Cool_Bear_Faceted_Filters::inject_vehicle_empty_state() just
 *  before the sidebar/grid split; the body class hides the split itself so
 *  the car never dead-ends 5,000px down the page.
 * -------------------------------------------------------------------------- */
body.cb-plp--vehicle-empty .cb-plp__split {
	display: none;
}

.cb-vehicle-empty {
	margin: 8px 0 40px;
	padding: clamp(20px, 3vw, 36px);
	border: 1px solid var(--wp--preset--color--border, #2e2e38);
	border-left: 4px solid var(--wp--preset--color--accent, #e8ff00);
	background: var(--wp--preset--color--surface, #18181c);
}
.cb-vehicle-empty__title {
	margin: 6px 0 10px;
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	line-height: 1.15;
}
.cb-vehicle-empty__title strong {
	color: var(--wp--preset--color--accent, #e8ff00);
	font-weight: inherit;
}
.cb-vehicle-empty__lede {
	max-width: 72ch;
	margin: 0 0 18px;
	color: var(--wp--preset--color--text-muted, #9898a8);
}
.cb-vehicle-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 22px;
}
.cb-vehicle-empty__btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--wp--preset--color--border-strong, #42424e);
	border-radius: 2px;
	background: transparent;
	color: var(--wp--preset--color--text, #f0f0f2);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.cb-vehicle-empty__btn:hover {
	border-color: var(--wp--preset--color--accent, #e8ff00);
}
.cb-vehicle-empty__btn--primary {
	background: var(--wp--preset--color--accent, #e8ff00);
	border-color: var(--wp--preset--color--accent, #e8ff00);
	color: var(--wp--preset--color--text-on-accent, #0d0d0f);
}
.cb-vehicle-empty__btn--primary:hover {
	background: var(--wp--preset--color--accent-hover, #f4ff66);
}
.cb-vehicle-empty__btn--ghost {
	border-color: transparent;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cb-vehicle-empty__btn[disabled] {
	opacity: 0.6;
	cursor: wait;
}
.cb-vehicle-empty__form .cb-car-request {
	margin: 0;
}
.cb-vehicle-empty__form .cb-car-request__details > summary {
	font-weight: 600;
}

/* --------------------------------------------------------------------------
 *  PDP — sticky buy row is the single price moment (D#P1 brake/wheel/part)
 *  ux-fixes.js mirrors the configurator's live total into the row, labels
 *  it "Configured price" and adds a one-line recap of the chosen options.
 * -------------------------------------------------------------------------- */
.cb-pdp .cb-buy-row__price {
	min-width: 0;
}
.cb-pdp .cb-buy-row__label {
	display: block;
	margin: 0 0 2px;
	font-family: var(--wp--preset--font-family--sans, inherit);
	font-size: 0.6875rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-subtle, #7c7c8a);
}
.cb-pdp .cb-buy-row__recap {
	display: block;
	max-width: 100%;
	margin: 4px 0 0;
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--wp--preset--color--text-muted, #9898a8);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cb-pdp .cb-buy-row__recap:empty {
	display: none;
}

/* Validation prompt beside the CTA (was only at the foot of the configurator,
   ~500px below the button on part PDPs — D#P1 part). Mirrors
   .cb-configurator__error; the persistent hint shows while the CTA is held. */
.cb-pdp .cb-buy-row__error {
	flex: 1 1 100%;
	width: 100%;
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--wp--preset--color--warning, #f59e0b);
}
.cb-pdp .cb-buy-row__error::before {
	content: "\26A0\FE0E";
	margin-right: 6px;
}
.cb-pdp .cb-buy-row__error:empty {
	display: none;
}
.cb-pdp .cb-buy-row__error--hint {
	color: var(--wp--preset--color--text-muted, #9898a8);
}
.cb-pdp .cb-buy-row__error--hint::before {
	content: none;
}

/* The held add-to-basket button stays a SOLID accent button (the 50% opacity
   read as an "olive" disabled state); clicking it scrolls to and flags the
   first missing field (configurator.js guards the submit). */
.cb-pdp form.cart button[type="submit"][aria-disabled="true"],
.cb-pdp form.cart .single_add_to_cart_button[aria-disabled="true"] {
	opacity: 1;
	cursor: pointer;
}
.cb-addon-group--flag,
.cb-configurator__vehicle-gate--flag {
	outline: 2px solid var(--wp--preset--color--accent, #e8ff00);
	outline-offset: 6px;
	border-radius: 2px;
	transition: outline-color 0.3s ease;
}
.cb-addon-group--flag .cb-addon-select,
.cb-addon-group--flag .cb-vpicker__select {
	border-color: var(--wp--preset--color--destructive, #ff3b3b);
}

/* --------------------------------------------------------------------------
 *  PDP — phones (≤767px): the buy row is a fixed bottom bar (theme pdp.css),
 *  so the in-flow "Added to basket" panel landed underneath it. Float the
 *  confirmation as a toast above the bar, and route the validation prompt
 *  the same way; label/recap are desktop-only in the 64px bar.
 * -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.cb-pdp .cb-buy-row__label,
	.cb-pdp .cb-buy-row__recap {
		display: none;
	}
	.cb-pdp .cb-buy-row__error:not(:empty) {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: calc(76px + env(safe-area-inset-bottom, 0px));
		z-index: 95;
		width: auto;
		padding: 10px 14px;
		background: var(--wp--preset--color--surface-raised, #202026);
		border: 1px solid var(--wp--preset--color--warning, #f59e0b);
		border-radius: 6px;
		box-shadow: 0 12px 32px rgb(0 0 0 / 0.55);
	}
	.cb-pdp .cb-buy-row__error--hint:not(:empty) {
		display: none; /* the bar's own copy is enough on phones */
	}
	.cb-pdp .cb-pdp__added:not([hidden]) {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: calc(76px + env(safe-area-inset-bottom, 0px));
		z-index: 96;
		margin: 0;
		background: var(--wp--preset--color--surface-raised, #202026);
		box-shadow: 0 12px 32px rgb(0 0 0 / 0.55);
	}
	.cb-pdp .cb-pdp__added-actions .cb-pdp__added-checkout,
	.cb-pdp .cb-pdp__added-actions .cb-pdp__added-continue {
		min-height: 44px;
	}
}

/* ---- cool-bear-perf-media (/wp-content/themes/cool-bear/assets/css/components/perf-media.css) ---- */
/*
 * Cool Bear — performance media rules (storefront audit 2026-09-05, B#2/#12).
 *
 * Owned by the perf pass; deliberately separate from the design CSS. Three jobs:
 *  1. The homepage hero poster is now a real <picture> (responsive WebP) under
 *     the lazily-started <video>; the video fades in over it once playing.
 *  2. The wheel test-rig <video> cards reserve their 16:9 box from the
 *     width/height attributes so the poster/video never shifts the copy.
 *  3. Cool_Bear_WebP now stamps width/height on every uploads <img> that had
 *     none; a zero-specificity height:auto turns those into a pure aspect-ratio
 *     reservation without overriding any author height rule.
 */

/* 1 — hero poster + video ------------------------------------------------ */
.cbv2-hero-photo .cbv2-hero-poster__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
	filter: var(--cbv2-grade);
}
.cbv2-hero-photo .cbv2-hero-media {
	opacity: 0;
	transition: opacity 0.9s ease;
}
.cbv2-hero-photo .cbv2-hero-media.is-playing {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.cbv2-hero-photo .cbv2-hero-media { transition: none; }
}

/* 2 — wheel test-rig cards ------------------------------------------------ */
.cb-wheel-tests__video {
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
}

/* 3 — stamped dimensions are a ratio hint, never a fixed height ---------- */
:where(img[width][height]) {
	height: auto;
}