/* Boundary Omega Vehicle-First Picker — "Find Your Parts"
   On-brand, mobile-first. Uses the shared brand tokens (--bp-red / --bp-navy / --bp-line …)
   with hard fallbacks so it renders even if brand.css is not present. */
.bp-omega {
	--o-red: var(--bp-red, #b81a25);
	--o-red-dark: var(--bp-red-dark, #9a141d);
	--o-navy: var(--bp-navy, #24272d);
	--o-ink: var(--bp-ink-soft, #5a6472);
	--o-line: var(--bp-line, #e3e6eb);
	--o-panel: var(--bp-panel, #f7f8fa);
	max-width: 1120px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--o-navy);
}

.bp-omega__head { text-align: center; margin-bottom: 1.25rem; }
.bp-omega__title { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; margin: 0 0 .35rem; color: var(--o-navy); }
.bp-omega__sub { margin: 0; color: var(--o-ink); font-size: 1rem; }

/* cascade bar */
.bp-omega__bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .75rem;
	background: var(--o-panel);
	border: 1px solid var(--o-line);
	border-radius: 14px;
	padding: 1rem;
}
.bp-omega__field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.bp-omega__label {
	font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--o-ink);
}
.bp-omega__select {
	appearance: none;
	-webkit-appearance: none;
	/* The Blocksy theme forces every form control to a fixed height
	   (var(--theme-form-field-height, 40px)) AND inherits a tall form line-height
	   (~25.9px). With our padding that left a ~15.6px content box clipping a ~25.9px
	   line box — shaving the tops/bottoms off the selected value. Release the fixed
	   height, give a comfortable min-height, and set an explicit sane line-height so
	   the value (and long labels like "VQ35HR / VQ37VHR") render fully. */
	box-sizing: border-box;
	width: 100%;
	min-height: 2.75rem;
	height: auto;
	padding: .6rem 2.1rem .6rem .8rem;
	line-height: 1.3;
	border: 1px solid var(--o-line);
	border-radius: 10px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a6472' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .8rem center;
	font-size: .98rem;
	color: var(--o-navy);
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
.bp-omega__select:not(:disabled):hover { border-color: var(--o-red); }
.bp-omega__select:focus { outline: none; border-color: var(--o-red); box-shadow: 0 0 0 3px rgba(184, 26, 37, .15); }
.bp-omega__select:disabled { background-color: #f0f1f4; color: #aab0ba; cursor: not-allowed; }
.bp-omega__select.is-busy { opacity: .6; }

/* status line */
.bp-omega__status { min-height: 1.4rem; margin: 1rem 0 0; text-align: center; color: var(--o-ink); font-size: .95rem; }
.bp-omega__status a { color: var(--o-red); font-weight: 600; }
.bp-omega__status.is-loading::before {
	content: ""; display: inline-block; width: 14px; height: 14px; margin-right: .5rem; vertical-align: -2px;
	border: 2px solid var(--o-line); border-top-color: var(--o-red); border-radius: 50%;
	animation: bp-omega-spin .7s linear infinite;
}
@keyframes bp-omega-spin { to { transform: rotate(360deg); } }
.bp-omega__status.is-error { color: var(--o-red-dark); }

/* results */
.bp-omega__results { margin-top: 1.25rem; }
.bp-omega-summary {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
	padding: .8rem 1rem; margin-bottom: 1.25rem;
	background: var(--o-navy); color: #fff; border-radius: 10px; font-size: 1.05rem;
}
.bp-omega-summary__eng {
	font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	background: var(--o-red); padding: .15rem .55rem; border-radius: 6px;
}
.bp-omega-summary__count { margin-left: auto; font-size: .85rem; color: #c7ccd4; }

/* guided-build CTAs (top of results) */
.bp-omega-build {
	margin: 0 0 1.75rem;
	padding: 1.1rem 1.1rem 1.2rem;
	background: var(--o-panel);
	border: 1px solid var(--o-line);
	border-radius: 14px;
}
.bp-omega-build__lead {
	margin: 0 0 .8rem; text-align: center;
	font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--o-ink);
}
.bp-omega-build__row {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem;
}
.bp-omega-build__btn {
	display: flex; flex-direction: column; align-items: center; gap: .15rem;
	text-decoration: none; text-align: center;
	padding: .9rem 1rem; border-radius: 11px;
	border: 2px solid transparent; color: #fff;
	transition: transform .12s, box-shadow .15s, background .15s;
}
.bp-omega-build__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(36, 39, 45, .18); color: #fff; }
.bp-omega-build__btn--pump { background: var(--o-red); border-color: var(--o-red); }
.bp-omega-build__btn--pump:hover { background: var(--o-red-dark); border-color: var(--o-red-dark); }
.bp-omega-build__btn--gear { background: var(--o-navy); border-color: var(--o-navy); }
.bp-omega-build__btn--gear:hover { background: #15171b; border-color: #15171b; }
.bp-omega-build__lbl { font-size: 1.05rem; font-weight: 800; letter-spacing: .01em; }
.bp-omega-build__lbl::after { content: " \2192"; }
.bp-omega-build__sub { font-size: .78rem; opacity: .9; font-weight: 600; }

.bp-omega-group { margin-bottom: 2rem; }
.bp-omega-group__title {
	display: flex; align-items: center; gap: .55rem;
	font-size: 1.15rem; margin: 0 0 .25rem; color: var(--o-navy);
	border-bottom: 2px solid var(--o-red); padding-bottom: .4rem;
}
.bp-omega-group__count {
	font-size: .72rem; font-weight: 700; background: var(--o-panel); color: var(--o-ink);
	border: 1px solid var(--o-line); border-radius: 999px; padding: .05rem .5rem;
}
.bp-omega-group__note { margin: .5rem 0 .9rem; color: var(--o-ink); font-size: .9rem; }
.bp-omega-group__grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem;
}

.bp-omega-card {
	display: flex; flex-direction: column;
	border: 1px solid var(--o-line); border-radius: 12px; overflow: hidden; background: #fff;
	transition: box-shadow .15s, transform .15s;
}
.bp-omega-card:hover { box-shadow: 0 6px 22px rgba(36, 39, 45, .1); transform: translateY(-2px); }
.bp-omega-card__img { aspect-ratio: 4 / 3; background: var(--o-panel); display: flex; align-items: center; justify-content: center; }
.bp-omega-card__img img { width: 100%; height: 100%; object-fit: contain; }
.bp-omega-card__img--none { min-height: 120px; }
.bp-omega-card__body { display: flex; flex-direction: column; gap: .35rem; padding: .85rem .9rem 1rem; flex: 1; }
.bp-omega-card__kind {
	font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--o-red);
}
.bp-omega-card__title { font-size: .98rem; line-height: 1.25; margin: 0; }
.bp-omega-card__title a { color: var(--o-navy); text-decoration: none; }
.bp-omega-card__title a:hover { color: var(--o-red); }
.bp-omega-card__sku { font-size: .74rem; color: var(--o-ink); letter-spacing: .03em; }
.bp-omega-card__price { font-size: 1.05rem; font-weight: 700; color: var(--o-navy); margin-top: .15rem; }
.bp-omega-card__actions { display: flex; flex-direction: column; gap: .45rem; margin-top: auto; padding-top: .65rem; }
.bp-omega-card__btn {
	display: inline-block; text-align: center; text-decoration: none;
	padding: .55rem .8rem; border-radius: 8px; font-size: .9rem; font-weight: 600;
	border: 1px solid var(--o-line); color: var(--o-navy); background: #fff; transition: background .15s, border-color .15s, color .15s;
}
.bp-omega-card__btn:hover { border-color: var(--o-navy); }
.bp-omega-card__btn--primary { background: var(--o-red); border-color: var(--o-red); color: #fff; }
.bp-omega-card__btn--primary:hover { background: var(--o-red-dark); border-color: var(--o-red-dark); color: #fff; }

/* mobile */
@media (max-width: 720px) {
	.bp-omega__bar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 440px) {
	.bp-omega__bar { grid-template-columns: 1fr; }
	.bp-omega-group__grid { grid-template-columns: 1fr 1fr; }
	.bp-omega-card__title { font-size: .9rem; }
}