/* ============================================================
   Livernois Pro Bench — smart faceted category UI
   Brand: #00aeef electric blue + black, Oswald (heads) / Saira (body)
   ============================================================ */
.lfb {
	--blue: #00aeef;
	--ink: #0c0f14;
	--ink2: #161b22;
	--line: #e3e7ec;
	--muted: #6b7682;
	--good: #16a34a;
	font-family: "Saira", system-ui, -apple-system, sans-serif;
	color: var(--ink);
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 16px 60px;
}
.lfb * { box-sizing: border-box; }

/* ---------- Vehicle bar (compact, matches the site-wide Shop By Vehicle bar) ---------- */
.lfb-veh { background: #15181d; border-radius: 10px; border-bottom: 3px solid var(--blue); margin: 16px 0 20px; }
.lfb-veh-in { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; }
.lfb-veh-label { color: #fff; font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; margin-right: 4px; white-space: nowrap; }
.lfb-vsel, .lfb-vinput {
	height: 40px; border: 1px solid #2a323b; border-radius: 6px;
	background: #11161b; color: #fff; padding: 0 12px; font-size: 14px; font-family: "Saira", sans-serif;
}
.lfb-vsel { min-width: 140px; cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 28px;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2300aeef' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 11px center;
}
.lfb-vinput { flex: 1 1 200px; min-width: 150px; }
.lfb-vinput::placeholder { color: #7d8893; }
.lfb-vsel:focus, .lfb-vinput:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,174,239,.18); }
.lfb-vbtn { height: 40px; padding: 0 22px; border: 0; border-radius: 6px; cursor: pointer; background: var(--blue); color: #00141d; font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
.lfb-vbtn:hover { filter: brightness(1.08); }
.lfb-vghost { background: transparent; color: #aebbc4; border: 1px solid #2a323b; }
.lfb-vghost:hover { color: #fff; border-color: var(--blue); }
.lfb-veh-chip {
	display: inline-flex; align-items: center; gap: 8px; margin: 0 16px 12px;
	background: rgba(0,174,239,.12); border: 1px solid rgba(0,174,239,.4);
	color: var(--ink); padding: 7px 14px; border-radius: 30px; font-size: 13.5px;
}
.lfb-veh-chip span { color: var(--muted); }
.lfb-veh-chip b { color: #0277a8; font-weight: 600; }

/* ---------- Layout ---------- */
.lfb-wrap { display: grid; grid-template-columns: 256px 1fr; gap: 24px; align-items: start; }
.lfb-filterbtn {
	display: none;
	font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .03em;
	width: 100%; padding: 13px; margin-bottom: 14px; border-radius: 9px;
	background: var(--ink); color: #fff; border: 0; font-size: 14px; cursor: pointer;
}

/* ---------- Refine sidebar (matches the Pro Bench gallery) ---------- */
/* Force Saira everywhere (Oswald on headings) so Storefront's body font can't leak in. */
.lfb-refine, .lfb-refine * { font-family: "Saira", -apple-system, "Segoe UI", sans-serif; }
.lfb-refine .lfb-refine-h, .lfb-refine .lfb-fg-h { font-family: "Oswald", sans-serif; }
/* Reset Storefront's default <button> styling (blue bg) on the facet controls. */
.lfb-refine .lfb-fg-h,
.lfb-refine .lfb-cat,
.lfb-refine .lfb-fo {
	background: transparent !important; box-shadow: none !important; text-shadow: none !important;
	min-height: 0; line-height: 1.3; width: 100%; text-align: left;
}
.lfb-refine .lfb-fg-h:hover, .lfb-refine .lfb-fg-h:focus,
.lfb-refine .lfb-cat:hover, .lfb-refine .lfb-cat:focus { background: transparent !important; }
.lfb-refine {
	position: sticky; top: 84px;
	background: #fff; border: 1px solid #e3e8ec; border-radius: 10px; padding: 4px 14px 12px;
}
.lfb-refine-h {
	font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .05em;
	font-size: 13px; font-weight: 600; color: #15181c;
	padding: 14px 0 11px; margin-bottom: 2px; border-bottom: 1px solid #eef1f4;
	display: flex; justify-content: space-between; align-items: center;
}
.lfb-refine-done { display: none; }

/* Universal / Build Essentials toggle */
.lfb-uni-toggle { padding: 12px 0; margin: 0; border-bottom: 1px solid #eef1f4; font-size: 13px; }
.lfb-uni-toggle label { display: flex; align-items: center; gap: 9px; cursor: pointer; color: #3a4149; }
.lfb-uni-toggle input { width: 16px; height: 16px; accent-color: var(--blue); flex: none; }
.lfb-uni-toggle b { color: #15181c; font-weight: 600; }

/* Facet group — blue left-accent heading like the gallery */
.lfb-fg { padding: 12px 0; border-bottom: 1px solid #eef1f4; }
.lfb-fg:last-child { border-bottom: 0; }
.lfb-fg-h {
	width: 100%; display: flex; align-items: center; gap: 8px;
	background: none; border: 0; border-left: 3px solid var(--blue); padding: 0 0 0 8px; cursor: pointer;
	font-family: "Oswald", sans-serif; font-size: 12px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .04em; color: #15181c;
}
.lfb-fg-h em {
	font-style: normal; font-weight: 600; font-size: 11px; color: #6b7682;
	background: #f0f3f6; border-radius: 20px; padding: 1px 8px; margin-left: 6px;
}
.lfb-fg-x { margin-left: auto; font-size: 16px; line-height: 1; color: #9aa3ad; width: 14px; text-align: center; font-weight: 400; }
.lfb-fg.open .lfb-fg-x { color: var(--blue); }
.lfb-fg-body { display: none; padding: 8px 0 0; max-height: 300px; overflow-y: auto; }
.lfb-fg.open .lfb-fg-body { display: block; }

/* Facet option row (radio/checkbox) */
.lfb-fo {
	display: flex; align-items: center; gap: 9px; padding: 5px 2px;
	cursor: pointer; font-size: 13px; color: #3a4149; transition: color .12s;
}
.lfb-fo:hover { color: var(--blue); }
.lfb-fo.on { color: var(--blue); font-weight: 600; }
.lfb-fo input { width: 16px; height: 16px; accent-color: var(--blue); flex: none; }
.lfb-fo span { flex: 1; line-height: 1.3; }
.lfb-fo em {
	font-style: normal; font-size: 11px; font-weight: 600; color: #6b7682;
	background: #f0f3f6; border-radius: 20px; padding: 1px 8px; min-width: 20px; text-align: center;
}
.lfb-fo.on em { background: rgba(0,174,239,.14); color: var(--blue); }
/* 0-count option: visible so you know it exists, but greyed + not clickable (no dead ends) */
.lfb-fo.off { color: #b3bcc6; cursor: not-allowed; pointer-events: none; opacity: .65; }
.lfb-fo.off:hover { color: #b3bcc6; }
.lfb-fo.off input { pointer-events: none; }
.lfb-fo.off em { background: #f4f6f8; color: #aeb6bf; }

/* Category list — clean text rows with count badge */
.lfb-catlist { display: flex; flex-direction: column; }
.lfb-cat {
	display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
	border: 0; background: none; padding: 5px 2px; cursor: pointer;
	font-family: "Saira", sans-serif; font-size: 13px; color: #3a4149; transition: color .12s;
}
.lfb-cat span { flex: 1; line-height: 1.3; }
.lfb-cat em {
	font-style: normal; font-size: 11px; font-weight: 600; color: #6b7682;
	background: #f0f3f6; border-radius: 20px; padding: 1px 8px; min-width: 20px; text-align: center;
}
.lfb-cat:hover { color: var(--blue); }
.lfb-cat.on { color: var(--blue); font-weight: 600; }
.lfb-cat.on em { background: rgba(0,174,239,.14); color: var(--blue); }

/* ---------- Toolbar ---------- */
.lfb-toolbar {
	display: flex; justify-content: space-between; align-items: center; gap: 14px;
	margin-bottom: 16px; flex-wrap: wrap;
}
.lfb-count { font-family: "Oswald", sans-serif; font-size: 17px; }
.lfb-count b { color: var(--blue); }
.lfb-tools { display: flex; gap: 10px; align-items: center; }
.lfb-tools select {
	font-family: "Saira", sans-serif; font-size: 13.5px; padding: 9px 12px;
	border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer;
}
.lfb-view { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.lfb-view button {
	background: #fff; border: 0; padding: 8px 12px; cursor: pointer; font-size: 16px; color: var(--muted);
	border-left: 1px solid var(--line);
}
.lfb-view button:first-child { border-left: 0; }
.lfb-view button.on { background: var(--blue); color: #fff; }

/* ---------- Results: grid ---------- */
.lfb-results.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.lfb-card {
	display: flex; flex-direction: column; background: #fff; text-decoration: none; color: inherit;
	border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
	transition: transform .16s, box-shadow .16s, border-color .16s;
}
.lfb-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.13); border-color: var(--blue); }
.lfb-card-img { aspect-ratio: 1; background: #fff; display: flex; align-items: center; justify-content: center; padding: 14px; }
.lfb-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.lfb-card-b { padding: 13px 14px 16px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.lfb-brand {
	font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .05em;
	font-size: 11px; color: var(--muted);
}
.lfb-card-b h3 { font-size: 14px; font-weight: 500; line-height: 1.35; margin: 0; flex: 1; }
.lfb-price { font-family: "Oswald", sans-serif; font-size: 18px; font-weight: 600; color: var(--ink); }
.lfb-price .amount { color: var(--ink); }
.lfb-sku { font-size: 11px; color: var(--muted); }
.lfb-fits, .lfb-uni {
	align-self: flex-start; font-family: "Oswald", sans-serif; text-transform: uppercase;
	letter-spacing: .03em; font-size: 10.5px; font-weight: 500; padding: 3px 8px; border-radius: 4px;
}
.lfb-fits { background: rgba(22,163,74,.12); color: var(--good); }
.lfb-uni { background: rgba(0,174,239,.12); color: #0277a8; }

/* ---------- Results: list ---------- */
.lfb-results.list { display: flex; flex-direction: column; gap: 12px; }
.lfb-row {
	display: grid; grid-template-columns: 84px 1fr auto; gap: 18px; align-items: center;
	background: #fff; text-decoration: none; color: inherit;
	border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px;
	transition: box-shadow .16s, border-color .16s, transform .16s;
}
.lfb-row:hover { box-shadow: 0 8px 22px rgba(0,0,0,.08); border-color: var(--blue); transform: translateY(-1px); }
.lfb-row-img { width: 84px; height: 84px; background: #fff; border: 1px solid #eef1f4; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 6px; flex: 0 0 auto; }
.lfb-row-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lfb-row-b { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lfb-row-b .lfb-brand { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #8a939e; font-weight: 600; }
.lfb-row-b h3 { font-size: 15.5px; font-weight: 600; margin: 0; line-height: 1.3; color: #14202b;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lfb-row-buy { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; white-space: nowrap; }
.lfb-row-buy .lfb-price { font-size: 18px; font-weight: 700; color: #14202b; }
.lfb-row .lfb-view-btn { background: var(--blue); color: #021016; font-weight: 600; font-size: 13px; padding: 7px 15px; border-radius: 7px; }
.lfb-view-btn {
	font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .03em;
	background: var(--blue); color: #fff; padding: 9px 16px; border-radius: 8px; font-size: 13px; white-space: nowrap;
}

/* ---------- Empty / pager ---------- */
.lfb-empty { grid-column: 1 / -1; text-align: center; padding: 50px 20px; color: var(--muted); font-size: 15px; }
.lfb-empty.sm { padding: 16px; font-size: 13px; }
.lfb-pager { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 30px; }
.lfb-pg {
	font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .03em;
	background: var(--ink); color: #fff; border: 0; padding: 11px 20px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.lfb-pg:disabled { opacity: .35; cursor: default; }
.lfb-pg-info { font-size: 14px; color: var(--muted); }

/* ---------- Mobile ---------- */
@media (max-width: 880px) {
	.lfb-wrap { grid-template-columns: 1fr; }
	.lfb-filterbtn { display: block; }
	.lfb-refine {
		position: fixed; inset: 0; z-index: 9999; background: #fff; padding: 20px;
		overflow-y: auto; transform: translateX(-100%); transition: transform .25s; top: 0;
	}
	.lfb-refine.open { transform: translateX(0); }
	.lfb-refine-done {
		display: inline-block; font-family: "Oswald", sans-serif; text-transform: uppercase;
		background: var(--blue); color: #fff; border: 0; padding: 8px 18px; border-radius: 8px;
		cursor: pointer; font-size: 13px;
	}
	.lfb-veh-title { font-size: 18px; }
	.lfb-veh-row select { flex-basis: calc(50% - 5px); }
}
@media (max-width: 520px) {
	.lfb-results.grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.lfb-row { grid-template-columns: 80px 1fr; }
	.lfb-row-img { width: 80px; height: 80px; }
	.lfb-row-buy { grid-column: 2; flex-direction: row; justify-content: space-between; width: 100%; align-items: center; }
}

/* ---- catalog source toggle: integrated INTO the dark vehicle bar (home-page style) ---- */
.lfb-cats{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0;padding:2px 16px 14px;background:transparent;border:0;border-radius:0}
.lfb-cats-label{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:12px;color:#9fb0c0}
.lfb-cats-pills{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
/* plain checkbox + label — NO button bubble */
.lfb-ccheck{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;position:relative;color:#c4d2de;font-weight:600;font-size:15px}
.lfb-ccheck input{position:absolute;opacity:0;width:0;height:0}
.lfb-ccheck .bx{width:22px;height:22px;border-radius:5px;border:2px solid #5a6b7a;background:#0a1118;flex:0 0 auto;position:relative;transition:.12s}
.lfb-ccheck:hover .bx{border-color:var(--c,#00aeef)}
.lfb-ccheck.on .bx{background:var(--c,#00aeef);border-color:var(--c,#00aeef)}
.lfb-ccheck.on .bx::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #021016;border-width:0 3px 3px 0;transform:rotate(45deg)}
.lfb-ccheck.on{color:#fff}
.lfb-ccheck .ct{font-size:13px;color:#7c8a99;font-weight:600}
.lfb-ccheck[data-src="livernois"]{--c:#00aeef}
.lfb-ccheck[data-src="motorstate"]{--c:#00aeef}
.lfb-ccheck[data-src="turn14"]{--c:#00aeef}
.lfb-call{font-size:12.5px;color:#9fb0c0;cursor:pointer;background:none;border:1px solid #1c2733;border-radius:7px;padding:8px 14px;font-weight:600}
.lfb-call:hover{color:#00aeef;border-color:#00aeef}

/* ---- prominent active-vehicle banner (above the results) ---- */
.lfb-active { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; padding: 15px 24px;
	border-radius: 10px; background: linear-gradient(90deg, #00aeef, #0089bc); color: #fff; box-shadow: 0 6px 18px rgba(0,174,239,.28); }
.lfb-active-lbl { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px; opacity: .9; }
.lfb-active-veh { font-family: 'Oswald', sans-serif; font-size: 23px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; line-height: 1; }
.lfb-active-x { margin-left: auto; background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.4);
	border-radius: 7px; padding: 8px 16px; font-weight: 600; cursor: pointer; font-size: 13px; }
.lfb-active-x:hover { background: rgba(255,255,255,.32); }

/* active banner: white clear button + count-up number + slide-in */
.lfb-active-x { background: #fff; color: #00658c; border-color: #fff; }
.lfb-active-x:hover { background: #eaf7ff; color: #0089bc; }
.lfb-active-count { font-family: 'Oswald', sans-serif; font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.lfb-active.in { animation: lfbActiveIn .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes lfbActiveIn { from { opacity: 0; transform: translateY(-10px) scale(.99); } to { opacity: 1; transform: none; } }

/* intro: checkbox pops as each catalog switches on */
.lfb-ccheck.pop { animation: lfbPop .45s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes lfbPop { 0% { transform: scale(.92); } 55% { transform: scale(1.13); } 100% { transform: scale(1); } }

/* ---- active filter chips + clear-all (above results) ---- */
.lfb-afilters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; padding: 12px 14px;
	background: #f4f7fa; border: 1px solid #e3e8ec; border-radius: 10px; }
.lfb-af-lbl { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .5px; font-size: 12px; color: #6b7682; margin-right: 2px; }
.lfb-afchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #c5d4e0; background: #fff; color: #15202b;
	font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 20px; cursor: pointer; transition: .12s; }
.lfb-afchip:hover { border-color: #f5365c; color: #f5365c; background: #fff5f7; }
.lfb-af-clear { margin-left: auto; border: 0; background: var(--ink, #0c0f14); color: #fff; font-weight: 600; font-size: 13px;
	padding: 8px 16px; border-radius: 8px; cursor: pointer; }
.lfb-af-clear:hover { background: #f5365c; }

/* ---- breadcrumbs (slim bar above the finder) ---- */
.lfb-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 20px 0 18px; font-size: 13px; color: #6b7682; }
.lfb-crumbs a { color: #6b7682; text-decoration: none; }
.lfb-crumbs a:hover { color: var(--blue); }
.lfb-crumbs span { color: #c0c8d0; }
.lfb-crumbs b { color: #15181c; font-weight: 600; }

/* ---- full-width vehicle band under the nav (rendered in header, outside .lfb) ---- */
.lfb-vehband { --blue: #00aeef; background: #15181d; border-bottom: 3px solid #00aeef; font-family: "Saira", system-ui, -apple-system, sans-serif; }
.lfb-vehband * { box-sizing: border-box; }
/* keep Year/Make/Model/Engine + keyword + buttons on ONE row (Engine added to the band 2026-07-04) */
.lfb-vehband .lfb-vsel { flex: 1 1 130px; min-width: 120px; max-width: 220px; }
.lfb-vehband .lfb-vinput { flex: 2 1 220px; }
.lfb-vehband .lfb-veh-in { max-width: 1320px; margin: 0 auto; }
.lfb-vehband .lfb-cats { max-width: 1320px; margin: 0 auto; }

/* finder pages: tighten the gap under the full-width band + kill any leftover WC breadcrumb */
body.lfb-finder .site-content { padding-top: 12px; }
body.lfb-finder .storefront-breadcrumb,
body.lfb-finder > .woocommerce-breadcrumb { display: none; }
.lfb-crumbs { margin: 20px 0 18px; }

/* sidebar Vehicle group selects (Year/Make mirror of the top band, 2026-07-10) */
.lfb-refine .lfb-sb-sel { width: 100%; max-width: none; min-width: 0; margin: 0 0 8px; display: block; }

/* ---- category chip row above the grid (2026-08-21) — navigation into child categories; on a child
   page it shows the siblings. Wraps on phone; the sidebar is collapsed there, so this IS the way in. ---- */
.lfb-subnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.lfb-subnav[hidden]{display:none}
.lfb-sn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid #d6dce1;border-radius:999px;background:#fff;color:#14181d;text-decoration:none;font-size:.88rem;line-height:1.1;font-weight:600;white-space:nowrap}
.lfb-sn em{font-style:normal;font-weight:500;font-size:.74rem;color:#5b636c;background:#eef1f4;padding:2px 7px;border-radius:999px}
.lfb-sn:hover{border-color:var(--blue);color:var(--blue)}
.lfb-sn.on{background:#14181d;border-color:#14181d;color:#fff}
.lfb-sn.on em{background:rgba(255,255,255,.16);color:#fff}
.lfb-sn-all{font-weight:700}
@media (max-width:640px){.lfb-subnav{gap:6px;margin-bottom:12px}.lfb-sn{padding:7px 11px;font-size:.82rem}}