/**
 * 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;
}