/* ==========================================================================
   RealOEM redesigned UI stylesheet (opt-in: ro_ui cookie / ?ui=v2)

   This REPLACES style.css rather than layering on top of it -- head.jspf loads
   exactly one of the two. That is deliberate: this sheet drops ~120 rules the
   classic sheet defines (body, html, *, table, h1, #partsList's table styling,
   .selcolumn, .mg-thumb, .tbl, .grid/#rightnav/#main, ...) and restyles others,
   so loading both leaves the old rules fighting these.

   common.css still loads in both UIs for the site banner; the body-class rules
   below outrank its bare `body` rule.
   ========================================================================== */

/* ==========================================================================
   RealOEM V2 Stylesheet
   All old grid/#rightnav/#main styles removed.
   Pages use body classes: .bmw-select-page | .v2-page | .home-page
   ========================================================================== */

/* ---- Diagram hotspot interaction (used by main.js) ---- */
#partsimg {
	position: relative;
	left: 0;
	top: 0;
	outline: none;
}

#partsimghl {
	content: " ";
	position: absolute;
	z-index: 1;
	width: 640px;
	height: 100%;
}

map area {
	outline: none;
}

.imghl {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	background-color: transparent;
	border: 2px solid #FF6600;
	border-radius: 4px;
	cursor: pointer;
}

.imghla {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background-color: transparent;
	cursor: pointer;
}

.not-avail {
	position: absolute;
	background-color: white;
	opacity: 0.85;
	border-radius: 4px;
	cursor: not-allowed;
}

div.poshl {
	border: 4px solid #F5CD02;
	margin: -2px;
	visibility: visible;
}

div.posselect {
	border: 2px solid #0c4a6e;
	visibility: visible;
	margin: 0;
}

/* ---- Photo icon ---- */
#partsList .aphoto {
	background: url("assets/photo.png") 0px 1px no-repeat;
	width: 16px;
	padding: 0;
}

#partsList .aphoto a {
	position: relative;
	display: block;
	width: 16px;
	height: 16px;
}

.partphoto {
	display: inline-block;
	background: url("assets/photo.png") 0 0 no-repeat;
	width: 16px;
	height: 16px;
	margin: 0 0 0 10px;
}

/* ---- Print ---- */
@media print {
	#partsimg, #partsimg img {
		width: 100%;
		height: auto;
	}
	.imghl, .imghlna, .searchBox, .lang, .noprint, .splinks,
	.gad-wide, .gad-tall-right, .gad-parts-square, .gad-select-square,
	.ad-rail, .search-form-ad, [data-freestar-ad] {
		display: none !important;
	}
}

/* ---- Loading animation ---- */
.loading-anim div {
	height: 2px;
	width: 2px;
	margin-left: 4px;
	display: inline-block;
	background-color: #333;
	border: 1px solid #111;
	animation: loading_anim_loader 1.3s linear infinite;
	opacity: 0;
}

.loading-anim div:nth-child(2) { animation-delay: 0.2s; }
.loading-anim div:nth-child(3) { animation-delay: 0.4s; }

@keyframes loading_anim_loader {
	0% { opacity: 1 }
	30% { opacity: 0 }
	100% { opacity: 0 }
}

/* ---- Ad containers ---- */
.splinks {
	font-size: 10px;
	margin: 4pt 0 0 0;
}

.gad-wide {
	max-width: 728px;
	display: inline-block;
	width: 728px;
}

.gad-wide-r-div { max-width: 728px; width: 100%; }
.gad-wide-r { display: none; }
.gad-select-square { display: inline-block; padding: 12px 0 0 50px; }
.gad-parts-square { display: inline-block; padding: 0 0 0 8px; }
.gad-tall-right { width: 160px; min-width: 160px; position: relative; }

@media (max-width: 589px) {
	.gad-wide { display: none }
	.gad-wide-r { display: block }
}
@media (max-width: 877px) {
	.gad-tall-right { display: none }
}
@media (max-width: 970px) {
	.gad-select-square { display: none }
}
@media (max-width: 1199px) {
	.gad-parts-square { display: none }
}

/* ---- Privacy Manager button ---- */
#pmLink {
	visibility: hidden;
	text-decoration: none;
	cursor: pointer;
	background: transparent;
	border: none;
	padding-right: 10px;
}

#pmLink:hover {
	visibility: visible;
	color: grey;
}

/* ---- FCP Euro (affiliate) ---- */
.fcp-euro-cta {
	margin: 8pt 0 10pt;
}

a.fcp-euro-button {
	display: inline-block;
	background-color: #0c4a6e;
	border: none;
	box-shadow: none;
	color: #ffffff;
	text-decoration: none;
	padding: 8pt 14pt;
	border-radius: 10px;
	font-weight: bold;
}

a.fcp-euro-button:hover {
	background-color: #0a3a57;
}

.fcp-euro-caption {
	font-size: 8.5pt;
	color: #555;
	margin-top: 4pt;
	max-width: 420px;
}

/* ---- Utility ---- */
.clear { clear: both; }
.error { font-weight: bold; color: #dc2626; }
.vs1 { padding: 12pt 0 0 12pt; }
.vs2 { padding: 16pt 0 0 0; }

/* ==========================================================================
   Shared: footer, spinner, layout primitives
   ========================================================================== */

.page-container {
	max-width: 880px;
	margin: 0 auto;
	padding: 24px 16px 40px;
}

.left_filter h2 {
	margin: 0 0 12px;
	font-size: 1.1em;
	color: #0c184a;
}

#left_filter {
	min-height: 120px;
}

.cssload-container {
	display: flex;
	justify-content: center;
	padding: 16px 0;
}

.cssload-speeding-wheel {
	width: 26px;
	height: 26px;
	border: 3px solid rgba(12, 24, 74, 0.2);
	border-top-color: #0c184a;
	border-radius: 50%;
	animation: spin 0.9s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.page-tools {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 6px;
}

/* The logo is the page banner: it leads the toolbar row and the tools stay right-aligned
   (margin-right:auto rather than space-between, so lang + searchBox keep their own gap). */
.page-tools .toolbar-logo {
	margin-right: auto;
	display: flex;
	align-items: center;
}

/* Sized by width like the select page's .hero-logo-img, just scaled down to sit on one
   toolbar line with the language select and search box (190px hero -> 120px banner). */
.page-tools .toolbar-logo-img {
	width: 120px;
	height: auto;
	max-width: 100%;
	display: block;
}

.page-tools .lang {
	text-align: right;
}

/* Toolbar quick links (Back to classic design / Other Brands): the v2 pill language one size
   down from the action buttons (28px vs 32px, 11px type), so they read as navigation rather
   than competing with Sign In / Donate at the other end of the row. */
.page-tools .lang a {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 6px 14px;
	margin-right: 12px;
	border: 1px solid #0c4a6e;
	border-radius: 999px;
	background: #ffffff;
	color: #0c4a6e;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
}

.page-tools .lang a:hover {
	background: rgba(12, 74, 110, 0.08);
	text-decoration: none;
}

/* Account nav at the toolbar's left end, opposite the lang links (select page). The auto
   margin does the splitting because .page-tools justifies flex-end; width/margin resets undo
   account-nav.css's full-width block layout so the nav packs like a toolbar cluster. */
.page-tools .toolbar-acct {
	margin-right: auto;
}

.page-tools .toolbar-acct .ro-acct-nav {
	width: auto;
	margin: 0;
	gap: 10px;
}

.page-tools .toolbar-acct .ro-acct-cta {
	margin-left: 0;
	gap: 10px;
}

.bmw-select-page .page-tools {
	align-items: center;
}

.page-tools .lang-label {
	margin-right: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #0c4a6e;
}

/* The language <select>, in the same pill spec as the toolbar links beside it. appearance:none
   drops the native widget chrome, so the chevron comes back as an inline SVG background --
   padding-right reserves its lane. No text-transform: option labels are language names
   ("Deutsch"), and shouting them would be wrong in any of them. */
.page-tools .lang select {
	appearance: none;
	-webkit-appearance: none;
	min-height: 28px;
	padding: 5px 30px 5px 14px;
	border: 1px solid #0c4a6e;
	border-radius: 999px;
	background: #ffffff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path fill='%230c4a6e' d='M0 0l4 5 4-5z'/></svg>") no-repeat right 12px center;
	color: #0c4a6e;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1;
	cursor: pointer;
	font-family: inherit;
}

.page-tools .lang select:hover {
	background-color: #eef3f6;
}

.page-tools .lang select:focus-visible {
	outline: 2px solid rgba(12, 74, 110, 0.5);
	outline-offset: 2px;
}

.ad-rail {
	width: 160px;
	min-width: 160px;
}

.site-footer {
	margin-top: 32px;
	padding: 20px 0 0;
	border-top: 1px solid rgba(12, 24, 74, 0.12);
}

.site-footer .footer-inner {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.site-footer .footer-link {
	color: #0c184a;
	text-decoration: none;
	font-size: 0.9em;
}

@media (max-width: 1024px) {
	.withleftmenu {
		flex-direction: column;
	}
	.left_filter, .ad-rail {
		width: 100%;
	}
	.ad-rail {
		min-width: 0;
	}
}

/* ==========================================================================
   Select page  (body.bmw-select-page)
   ========================================================================== */

.bmw-select-page {
	background-color: #f8f8f8;
	color: #1d4f6f;
	margin: 0;
	font-family: "Helvetica Neue", Arial, sans-serif;
}

.bmw-select-page *,
.bmw-select-page *:after,
.bmw-select-page *:before {
	box-sizing: border-box;
}

.bmw-select-page .withleftmenu { display: block; }
.bmw-select-page .left_filter { display: none; }
.bmw-select-page .main-container { width: 100%; }
.bmw-select-page .content { text-align: center; }

.bmw-select-page .page-container {
	max-width: 1200px;
}

.bmw-select-page #center {
	max-width: 1120px;
	margin: 0 auto;
}

.hero { padding: 24px 0 8px; }

/* The select page is the one place the logo is centred, with the rest of that page's
   centred content. Every other page shows it left-aligned in the toolbar instead
   (.page-tools .toolbar-logo). */
.hero-logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-logo-img {
	width: 360px;
	max-width: 100%;
	height: auto;
	display: block;
}

.bmw-select-page h1 {
	margin: 4px 0 10px;
	font-size: 2.1em;
	font-weight: 500;
}

.bmw-select-page .select-subtitle {
	margin: 0 auto 24px;
	font-size: 1.05em;
	font-weight: normal;
	max-width: 560px;
	color: #2f5873;
}

.search_forms {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding: 0;
	margin: 12px 0 28px;
	justify-content: center;
}

.search_form {
	flex: 1 1 320px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.search_form form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	position: relative;
}

.search_form .field-row {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
}

.search_form .field-row label {
	background: #0c4a6e;
	color: #ffffff;
	border-radius: 999px;
	padding: 12px 24px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.78em;
	white-space: nowrap;
}

.search_form .field-row input[type="text"],
.search_form .field-row input[type="search"],
.search_form .field-row input[type="tel"],
.search_form .field-row input[type="number"] {
	flex: 0 0 auto;
	width: 260px;
	max-width: 100%;
	padding: 12px 18px;
	border: none;
	border-radius: 999px;
	background: #ededed;
	font-size: 0.95em;
	height: 42px;
}

.search_form .search-submit {
	position: absolute;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); border: 0;
}

.search_form .catalog-version {
	font-size: 0.9em;
	color: #2f5873;
}

#selectForm { margin-top: 10px; }

#bmw_selections {
	background: transparent;
	border: none;
	padding: 0;
}

#bmw_selects {
	display: grid;
	grid-template-columns: repeat(3, minmax(180px, 1fr));
	gap: 18px 16px;
	align-items: start;
}

#bmw_selects > .bmw_select_table {
	order: 0;
}

#bmw_selects > .bmw_select_box_parent {
	order: 1;
}

#bmw_selects > .bmw_select_table,
#bmw_selects > .selcolumn.note,
#bmw_selects > .select-square-ad {
	grid-column: 1 / -1;
}

#bmw_selects > .selcolumn.note {
	order: 2;
}

#bmw_selects > .select-square-ad {
	order: 3;
}

#bmw_selects > .select-square-ad {
	display: flex;
	justify-content: center;
}

.bmw_select_table {
	display: flex;
	gap: 32px;
	justify-content: center;
	max-width: 600px;
	margin: 0 auto;
}

.bmw-select-page .selcolumn {
	min-width: 260px;
	flex: 1 1 260px;
	padding: 0;
	text-align: left;
	display: inline-block;
	vertical-align: top;
}

.bmw_select_table .selcolumn {
	flex: 1 1 280px;
	max-width: 280px;
}

.bmw-select-page .selcolumn label {
	display: block;
	font-weight: 700;
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.78em;
	color: #2f5873;
}

.bmw_select_table .selcolumn label {
	font-size: 1.2em;
	font-weight: 700;
	color: #1d4f6f;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.bmw_select_box {
	border: none;
	border-radius: 18px;
	background: #ededed;
	padding: 12px;
	min-width: 0;
}

.bmw_select_box select {
	width: 100%;
	border: none;
	background: transparent;
	padding: 6px 8px;
	font-size: 0.95em;
	border-radius: 12px;
	min-width: 0;
}

.bmw_select_table .bmw_select_box {
	background: #e8e8e8;
	border-radius: 16px;
	padding: 16px;
	min-height: 100px;
}

.bmw_select_table .bmw_select_box select {
	background: transparent;
	border: none;
	padding: 0;
	font-size: 1em;
	line-height: 1.6;
	color: #333;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	outline: none;
	width: 100%;
	height: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.bmw_select_table .bmw_select_box select::-webkit-scrollbar { display: none; }
.bmw_select_table .bmw_select_box select::-ms-expand { display: none; }

.bmw_select_table .bmw_select_box select option {
	padding: 8px 12px;
	margin: 2px 0;
	background: transparent;
	color: #333;
}

.bmw_select_table .bmw_select_box select option:checked,
.bmw_select_table .bmw_select_box select option[selected] {
	background-color: #b8b8b8;
	color: #333;
	font-weight: 500;
	border-radius: 8px;
}

.bmw_select_box_parent {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
	min-width: 0;
	width: 100%;
	max-width: none;
	margin: 0;
}

.bmw_select_box_parent .bmw_select_box { min-height: 150px; }

.bmw-select-page .selcolumn.note {
	max-width: 320px;
	padding-top: 8px;
	color: #2f5873;
	text-align: left;
	margin: 0 auto;
}

.select-square-ad { margin-top: 16px; }

.searchResults {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	background: #d6d6d6;
	border: none;
	border-radius: 12px;
	padding: 12px 16px;
	margin: 16px auto 0;
	font-weight: 500;
	font-size: 0.9em;
	color: #1d4f6f;
	width: 100%;
	max-width: 760px;
}

.searchResults .column {
	padding: 0;
	display: inline-block;
	vertical-align: baseline;
	text-align: left;
}

.searchResults-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.searchResults-line {
	line-height: 1.25;
}

.searchResults-label {
	font-weight: 600;
}

.searchResults-value {
	font-weight: 700;
}

.searchResults-action form {
	margin: 0;
}

.searchResults-button {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	border: 1px solid #0c4a6e;
	background-color: #0c4a6e;
	color: #ffffff;
	padding: 8px 22px;
	border-radius: 999px;
	font-size: 0.74em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: 0 1px 0 rgba(12, 24, 74, 0.12);
	font-family: inherit;
	line-height: 1;
}

.searchResults-button:hover {
	filter: brightness(1.05);
}

.searchResults-button:focus-visible {
	outline: 2px solid rgba(12, 74, 110, 0.5);
	outline-offset: 2px;
}

/* Select page responsive */
@media (max-width: 1024px) {
	#bmw_selects {
		grid-template-columns: repeat(2, minmax(180px, 1fr));
	}
	.bmw_select_table {
		flex-direction: column;
		gap: 20px;
	}
	.bmw_select_table .selcolumn {
		max-width: none;
		flex: 1 1 auto;
	}
	.searchResults {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}
}

@media (max-width: 768px) {
	.search_forms { flex-direction: column; }
	.bmw_select_table { flex-direction: column; gap: 20px; }
	.bmw_select_table .selcolumn { max-width: none; }
	.bmw_select_table .bmw_select_box { min-height: 90px; }
	.bmw_select_box_parent .bmw_select_box { min-height: auto; }
	.hero-logo-img { width: 260px; }
	.search_form .field-row { flex-direction: column; align-items: center; }
	.search_form .field-row label { text-align: center; }
}

@media (max-width: 640px) {
	#bmw_selects {
		grid-template-columns: 1fr;
	}

	.searchResults {
		flex-direction: column;
		align-items: stretch;
	}

	.searchResults-action form {
		width: 100%;
	}

	.searchResults-button {
		width: 100%;
	}
}

/* ==========================================================================
   V2 pages  (body.v2-page)
   Part Groups, Show Parts, Part Xref, Part Search
   ========================================================================== */

.v2-page {
	background-color: #f5f6f8;
	color: #1a1a2e;
	margin: 0;
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.55;
}

.v2-page *,
.v2-page *:after,
.v2-page *:before {
	box-sizing: border-box;
}

.v2-page .withleftmenu { display: block; }
.v2-page .left_filter { display: none; }
.v2-page .main-container { width: 100%; }
.v2-page .content { text-align: left; }
.v2-page #center { max-width: 100%; }

.v2-page .page-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px 48px;
}

/* ---- Toolbar ---- */
.v2-page .page-tools {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	margin-bottom: 4px;
	border-bottom: 1px solid #e2e5ea;
}

.v2-page .page-tools .lang {
	text-align: right;
	font-size: 0.92em;
}

.v2-page .page-tools .lang a {
	margin-right: 14px;
	color: #0c4a6e;
	text-decoration: none;
}

.v2-page .page-tools .lang select {
	padding: 6px 10px;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	background: #fff;
	font-size: 0.92em;
}

.v2-page .page-tools .searchBox { float: none; }

.v2-page .page-tools .searchBox form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	margin: 0;
}

.v2-page .page-tools .searchBox input[type="text"] {
	padding: 10px 16px;
	border: 1px solid #d0d5dd;
	border-radius: 10px;
	background: #fff;
	font-size: 0.92em;
	height: 40px;
	width: 200px;
	margin: 0;
}

.v2-page .page-tools .searchBox input[type="text"]:focus {
	outline: none;
	border-color: #0c4a6e;
	box-shadow: 0 0 0 3px rgba(12, 74, 110, 0.12);
}

.v2-page .page-tools .searchBox input[type="submit"] {
	padding: 10px 18px;
	background: #0c4a6e;
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 0.85em;
	font-weight: 700;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	height: 40px;
}

.v2-page .page-tools .searchBox input[type="submit"]:hover {
	background: #0a3a57;
}

/* ---- Typography ---- */
.v2-page h1 {
	margin: 16px 0 8px;
	font-size: 1.75em;
	font-weight: 700;
	color: #0c184a;
}

.v2-page h2 {
	margin: 12px 0 8px;
	font-size: 1.4em;
	font-weight: 600;
	color: #0c184a;
}

.v2-page h3 { color: #0c184a; font-weight: 600; }
.v2-page h4 { color: #0c184a; }

/* ---- Breadcrumb ---- */
.v2-page .toplinks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	line-height: 1.8;
	font-size: 0.95em;
	padding: 12px 20px;
	margin: 0 0 16px;
	background: #ffffff;
	border: 1px solid #e2e5ea;
	border-radius: 12px;
}

.v2-page .toplinks a {
	color: #0c4a6e;
	text-decoration: none;
	font-weight: 500;
}

.v2-page .toplinks a:hover { text-decoration: underline; }
.v2-page .rpad2 { margin-left: 8px; }

/* ============================================================
   Part Group Thumbnail Cards
   ============================================================ */
.v2-page .mg-thumb {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	max-width: 200px;
	min-height: auto;
	padding: 10px;
	margin: 0;
	border-radius: 18px;
	background: #ffffff;
	border: 1px solid #e2e5ea;
	text-align: center;
	font-weight: bold;
	font-size: 9pt;
	transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}

/* Anchor for the group-id badge below. */
.v2-page .mg-thumb { position: relative; }

.v2-page .mg-thumb:hover {
	border-color: #0c4a6e;
	box-shadow: 0 4px 16px rgba(12, 74, 110, 0.12);
	transform: translateY(-2px);
}

.v2-page .mg-thumb a {
	text-decoration: none;
	color: #1a1a2e;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	height: 100%;
}

.v2-page .mg-thumb a div.image { text-align: center; width: 100%; }
.v2-page .mg-thumb a div.image span { display: block; margin: 0; }

.v2-page .mg-thumb a div.image img {
	border-radius: 12px;
	border: 1px solid transparent;
	width: auto;
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.v2-page .mg-thumb:hover a div.image span { background-color: transparent; }
.v2-page .mg-thumb:hover a img { opacity: 1; border-color: #0c4a6e; filter: none; }

.v2-page .mg-thumb a div.title {
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #0c184a;
}

/* ---- Diagram Thumbnails ---- */
.v2-page .diagThumbs { padding: 16px 0; }

.v2-page .diag-thumb {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	max-width: 220px;
	padding: 10px;
	margin: 0;
	border-radius: 18px;
	background: #ffffff;
	border: 1px solid #e2e5ea;
	text-align: center;
	font-weight: bold;
	font-size: 9pt;
	transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}

.v2-page .diag-thumb:hover {
	border-color: #0c4a6e;
	box-shadow: 0 4px 16px rgba(12, 74, 110, 0.12);
	transform: translateY(-2px);
}

.v2-page .diag-thumb a {
	text-decoration: none;
	color: #1a1a2e;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	height: 100%;
}

.v2-page .diag-thumb a div.image { text-align: center; width: 100%; }
.v2-page .diag-thumb a div.image span { display: block; }

.v2-page .diag-thumb a div.image img {
	border-radius: 12px;
	border: 1px solid transparent;
	width: auto;
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.v2-page .diag-thumb:hover a div.image span { background-color: transparent; }
.v2-page .diag-thumb:hover a img { opacity: 1; border-color: #0c4a6e; filter: none; }

.v2-page .diag-thumb a div.title {
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #0c184a;
}

.v2-page .diag-hdr {
	border-bottom: 2px solid #0c184a;
	padding-bottom: 6px;
	margin: 24px 0 12px;
	font-size: 1.1em;
}

.partgrp-page .partgrp-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 200px));
	justify-content: center;
	gap: 16px 20px;
	align-items: start;
}

.partgrp-page .diagThumbs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 220px));
	justify-content: center;
	gap: 16px 20px;
	align-items: start;
}

.partgrp-page .partgrp-grid > [data-freestar-ad],
.partgrp-page .diagThumbs > [data-freestar-ad] {
	grid-column: 1 / -1;
	justify-self: center;
}

.partgrp-page .diagThumbs > h3,
.partgrp-page .diagThumbs > a {
	grid-column: 1 / -1;
}

/* ============================================================
   Show Parts - Diagram + Parts Table
   ============================================================ */

.v2-page #partsimg {
	margin: 16px 0;
	background: #ffffff;
	border: 1px solid #e2e5ea;
	border-radius: 14px;
	padding: 16px;
	display: inline-block;
}

.v2-page #partsimg img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	vertical-align: top;
}

.v2-page #partsList {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	font-size: 10pt;
	background: #ffffff;
	border: 1px solid #e2e5ea;
	border-radius: 14px;
	overflow: hidden;
	margin: 16px 0;
}

/* Header row: th cells get dark navy */
.v2-page #partsList tr.r0 th {
	background-color: #0c184a !important;
	color: #ffffff;
	font-weight: 600;
	font-size: 0.82em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Data rows: light alternating */
.v2-page #partsList tr {
	background-color: #ffffff !important;
}

.v2-page #partsList tr.r0 {
	background-color: #f4f5f7 !important;
}

.v2-page #partsList tr.r1 {
	background-color: #ffffff !important;
}

.v2-page #partsList th { padding: 12px 12px; }

.v2-page #partsList td {
	padding: 10px 12px;
	vertical-align: top;
	border-bottom: 1px solid #eef0f3;
	color: #1a1a2e;
}

.v2-page #partsList td.price {
	text-align: right;
	font-weight: 700;
	white-space: nowrap;
}

.v2-page #partsList td.fcp-euro-cell { white-space: nowrap; }

.v2-page #partsList td a {
	color: #0c4a6e;
	text-decoration: none;
	font-weight: 600;
}

.v2-page #partsList td a:hover {
	text-decoration: underline;
	color: #0a3a57;
}

/* Hover from diagram hotspots */
.v2-page #partsList tr.poshl,
.v2-page #partsList tr.r0.poshl,
.v2-page #partsList tr.r1.poshl {
	background-color: #fef9e7 !important;
}

/* Click-selected from diagram hotspots */
.v2-page #partsList tr.posselect,
.v2-page #partsList tr.r0.posselect,
.v2-page #partsList tr.r1.posselect {
	background-color: #e8f0fe !important;
}

/* Edge grouping */
.v2-page #partsList td.edge1 {
	border-left: 3px solid #94a3b8;
	border-top: 1px solid #cbd5e1;
	border-top-left-radius: 4px;
	padding-left: 10px;
}

.v2-page #partsList td.edge2 {
	border-left: 3px solid #94a3b8;
	padding-left: 10px;
}

.v2-page #partsList td.edge3 {
	border-left: 3px solid #94a3b8;
	border-bottom: 1px solid #cbd5e1;
	border-bottom-left-radius: 4px;
	padding-left: 10px;
}

.v2-page #partsList a.fcp-euro-link {
	display: inline-block;
	background-color: #0c4a6e;
	color: #ffffff;
	text-decoration: none;
	border-radius: 8px;
	padding: 5px 12px;
	font-size: 8.5pt;
	font-weight: 600;
}

.v2-page #partsList a.fcp-euro-link:hover {
	background-color: #0a3a57;
}

/* ============================================================
   Part Detail / Cross-Reference
   ============================================================ */

.v2-page dl {
	font-size: 11pt;
	background: #ffffff;
	border: 1px solid #e2e5ea;
	border-radius: 14px;
	padding: 20px 28px;
	margin: 16px 0;
	/* dt/dd are floated (same as classic). Classic has no card so it never showed,
	   but here the card must contain them or it collapses to the height of the first
	   row and From/To/Weight spill out below it. */
	display: flow-root;
}

.v2-page dl dt {
	color: #0c184a;
	padding-top: 2pt;
	font-weight: bold;
	float: left;
	width: 100pt;
	clear: left;
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.v2-page dl dd {
	float: left;
	padding-top: 2pt;
	margin-left: 10pt;
}

.v2-page .partSearchResults { padding: 20px 0; }

.v2-page .partSearchResults ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.v2-page .partSearchResults ul li {
	padding: 8px 16px;
	margin: 4px 0;
	background: #ffffff;
	border: 1px solid #e2e5ea;
	border-radius: 10px;
	transition: border-color 0.15s;
}

.v2-page .partSearchResults ul li:hover {
	border-color: #0c4a6e;
}

.v2-page .partSearchResults ul li a {
	color: #0c4a6e;
	text-decoration: none;
	font-weight: 500;
}

.v2-page .partSearchResults ul li a:hover { text-decoration: underline; }

.v2-page .partSearchResults .diagram {
	padding: 8px 16px;
	margin: 4px 0;
	background: #ffffff;
	border: 1px solid #e2e5ea;
	border-radius: 10px;
}

.v2-page .partSearchResults .diagram a {
	color: #0c4a6e;
	text-decoration: none;
	font-weight: 500;
}

.v2-page .partSearchResults .diagram a:hover { text-decoration: underline; }
.v2-page .partSearchResults .diagram .part { padding: 3px 0 3px 12px; }

.v2-page .superseded,
.v2-page .supersedes {
	background: #ffffff;
	border: 1px solid #e2e5ea;
	border-radius: 14px;
	padding: 16px 24px;
	margin: 12px 0;
	clear: left;
}

.v2-page .superseded h3,
.v2-page .supersedes h3 {
	padding: 0 0 8px;
	margin: 0;
	color: #0c184a;
}

.v2-page .superseded dl,
.v2-page .supersedes dl {
	border: none;
	padding: 0;
	margin: 0;
	background: transparent;
}

/* ---- Search form (partxref retry) ---- */
.v2-page .searchForm {
	margin-top: 16px;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.v2-page .searchForm label {
	font-weight: 600;
	color: #0c184a;
}

.v2-page .searchForm input[type="text"] {
	padding: 10px 16px;
	border: 1px solid #d0d5dd;
	border-radius: 10px;
	background: #fff;
	font-size: 0.95em;
	height: 42px;
	margin: 0;
}

.v2-page .searchForm input[type="submit"] {
	padding: 10px 20px;
	background: #0c4a6e;
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 0.9em;
	font-weight: 700;
	cursor: pointer;
	height: 42px;
}

.v2-page .searchForm input[type="submit"]:hover {
	background: #0a3a57;
}

.v2-page .notes {
	padding: 16px 20px;
	margin: 12px 0;
	background: #ffffff;
	border: 1px solid #e2e5ea;
	border-radius: 14px;
	font-size: 10pt;
}

.v2-page .fcp-euro-cta {
	margin: 12px 0 16px;
	padding: 16px 20px;
	background: #ffffff;
	border: 1px solid #e2e5ea;
	border-radius: 14px;
}

/* ---- Ad layout ---- */
.v2-page .tbl {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.v2-page .blk {
	flex: 1;
	min-width: 0;
}

.v2-page .gad-tall-right { flex-shrink: 0; }
.v2-page .splinks { margin: 12px 0; }

/* ---- Responsive ---- */
@media (max-width: 877px) {
	.v2-page .tbl { flex-direction: column; }
	.v2-page .gad-tall-right { display: none; }
}

@media (max-width: 1024px) {
	.partgrp-page .partgrp-grid,
	.partgrp-page .diagThumbs {
		grid-template-columns: 1fr;
		justify-content: stretch;
	}

	.partgrp-page .mg-thumb,
	.partgrp-page .diag-thumb {
		max-width: 100%;
	}

	.partgrp-page .partgrp-grid > [data-freestar-ad],
	.partgrp-page .diagThumbs > [data-freestar-ad] {
		justify-self: stretch;
	}
}

@media (max-width: 768px) {
	.v2-page .page-container { padding: 0 12px 32px; }

	.v2-page .page-tools {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 10px 0;
	}

	.v2-page .page-tools .toolbar-logo { margin-right: 0; }
	.v2-page .page-tools .toolbar-logo-img { width: 100px; }
	.v2-page .page-tools .searchBox input[type="text"] { width: 160px; }
	.partgrp-page .mg-thumb { width: 100%; padding: 10px; margin: 0; }
	.partgrp-page .diag-thumb { width: 100%; padding: 10px; margin: 0; }
	.v2-page .toplinks { padding: 10px 14px; font-size: 0.9em; }
	.v2-page h1 { font-size: 1.4em; }
	.v2-page h2 { font-size: 1.2em; }

	.v2-page #partsList th,
	.v2-page #partsList td {
		padding: 6px 6px;
		font-size: 9pt;
	}
}

@media (max-width: 589px) {
	.v2-page #partsimg { padding: 8px; }
	.v2-page #partsimg img { width: 100%; height: auto; }
	.v2-page .toplinks { flex-direction: column; align-items: flex-start; }
	.v2-page .rpad2 { margin-left: 0; display: block; }
	.partgrp-page .mg-thumb { width: 100%; padding: 8px; margin: 0; }
	.partgrp-page .diag-thumb { width: 100%; padding: 8px; margin: 0; }
	.v2-page dl { padding: 14px 16px; }
	.v2-page .partSearchResults ul li { padding: 6px 12px; }
}

/* The search box keeps its translated <spring:message> label for the classic UI and for
   screen readers; the compact v2 toolbar shows the placeholder instead. */
.v2-page .page-tools .search-label,
.bmw-select-page .page-tools .search-label { display: none; }

/* ==========================================================================
   Carried over from the classic stylesheet: markup v3 added AFTER this redesign
   forked, so the redesign never had rules for it -- SEO blocks (breadcrumbs, FAQ,
   vehicle specs, category copy), the ECS/Rakuten affiliate CTAs, and the sticky
   ad rail. These are the classic definitions verbatim, so they render rather than
   fall back to browser defaults; restyle them to the new design during polish.
   ========================================================================== */

.faq { clear: left; padding: 12pt 0 0 0;}
.faq dl dt { float: none; width: auto; overflow: visible; white-space: normal; text-align: left;}
.faq dl dd { float: none; margin-left: 20pt;}
.breadcrumb-nav { padding: 2pt 0 4pt 0; font-size: 9pt; line-height: 16pt;}
.breadcrumb-nav a { text-decoration: none; color: #555;}
.breadcrumb-nav a:hover { text-decoration: underline;}
.ecs-tuning-cta {
	margin: 8pt 0 10pt;
}
a.ecs-tuning-button {
	display: inline-block;
	background-color: #e72b2c;
	border: none;
	box-shadow: none;
	color: #ffffff;
	text-decoration: none;
	padding: 6pt 10pt;
	border-radius: 0;
	font-weight: bold;
}
a.ecs-tuning-button:hover {
	background-color: #e72b2c;
}
#partsList td.ecs-tuning-cell { white-space: nowrap;}
#partsList a.ecs-tuning-link {
	display: inline-block;
	background-color: #e72b2c;
	color: #ffffff;
	text-decoration: none;
	padding: 3pt 6pt;
	border-radius: 0;
	font-size: 8.5pt;
}
#partsList a.ecs-tuning-link:hover {
	background-color: #e72b2c;
}
.part-nr-variations { color: #555; margin: 2pt 0 4pt 0;}
.cat-desc { margin: 4pt 0 8pt 0;}
.vehicle-specs { clear: both; padding: 12pt 0 0 0; overflow: hidden;}
.vehicle-specs h2 { font-size: 1.2em; margin: 0 0 4pt 0;}
.vehicle-specs dl { padding: 0; font-size: 10pt;}
.vehicle-specs dl dt { float: left; width: 80pt; font-weight: bold; clear: left; text-align: right; overflow: visible; white-space: normal; padding-top: 2pt;}
.vehicle-specs dl dd { float: left; margin-left: 10pt; padding-top: 2pt;}
.vehicle-specs dl::after { content: ""; display: block; clear: both;}
.faq-section { clear: both; padding: 12pt 0 0 0;}
.faq-section h2 { font-size: 1.2em; margin: 0 0 4pt 0;}
.faq-item { margin-bottom: 8pt;}
.faq-item h3 { font-size: 10pt; margin: 6pt 0 2pt 0;}
.faq-item p { margin: 0;}
.iad-mt {
	max-width: 728px;
	padding: 8px 0;
}
.iad-mt img {
	width: 100%;
	height: auto;
}

/* The right ad rail's sticky behaviour (classic keeps this inside its >=980px block). */
@media handheld, only screen and (min-width: 980px) {
	div.sticky {
		display: block !important;
		position: -webkit-sticky;
		position: sticky;
		top: 0px;
	}
}


/* ==========================================================================
   Select page: classic arrangement, new-ui styling

   The redesign laid the pickers out as a 3-column grid, which wrapped them onto
   two rows with tall boxes. The classic single compact row is the arrangement we
   want; only the look should be new. These override the grid rules above --
   same selectors, later in the file -- and keep the sizing content-driven so the
   `size` attribute on each <select> still decides its height, exactly as classic.
   ========================================================================== */

#bmw_selects {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
	justify-content: flex-start;
}

/* Product + Catalog stack into the first column, as they do in classic. */
#bmw_selects > .bmw_select_table {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 0 0 auto;
	max-width: none;
	margin: 0;
	justify-content: flex-start;
}

#bmw_selects > .bmw_select_box_parent {
	flex: 0 0 auto;
	width: auto;
	gap: 4px;
}

/* The series note is just another column in the row, as classic has it -- the
   `margin: 0 auto` it inherits would otherwise float it into the middle of the
   empty space left of the row. The square ad still gets its own line. */
#bmw_selects > .selcolumn.note {
	flex: 0 1 260px;
	max-width: 260px;
	margin: 0;
	padding-top: 20px;
}

#bmw_selects > .select-square-ad {
	flex: 1 0 100%;
}

/* Content-driven widths: no 260px floor, so columns stay as tight as classic. */
.bmw-select-page .selcolumn,
.bmw_select_table .selcolumn {
	min-width: 0;
	max-width: none;
	flex: 0 0 auto;
	display: block;
}

/* One label treatment everywhere (the redesign had a second, much larger one
   just for Product/Catalog, which broke the row rhythm). */
.bmw-select-page .selcolumn label,
.bmw_select_table .selcolumn label,
.bmw_select_box_parent label,
.ro-lb-label {
	display: block;
	font-weight: 700;
	margin: 0 0 4px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.72em;
	color: #2f5873;
	font-family: inherit;
}

/* Compact version of the redesign's rounded panel. */
.bmw_select_box,
.bmw_select_table .bmw_select_box,
.bmw_select_box_parent .bmw_select_box {
	background: #ededed;
	border: none;
	border-radius: 10px;
	padding: 6px;
	min-height: 0;
	min-width: 0;
}

.bmw_select_box + label { margin-top: 12px; }

/* Let the native list box size itself to its content and its `size` attribute. */
.bmw_select_box select,
.bmw_select_table .bmw_select_box select,
.bmw_select_box_parent .bmw_select_box select {
	width: auto;
	min-width: 100%;
	height: auto;
	border: none;
	background: transparent;
	border-radius: 8px;
	padding: 0;
	font-size: 0.95em;
	line-height: 1.45;
	color: #1a1a2e;
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	cursor: pointer;
}

.bmw_select_box select option {
	padding: 1px 6px;
	margin: 0;
	border-radius: 6px;
	background: transparent;
	color: #1a1a2e;
}

.bmw_select_box select option:checked,
.bmw_select_box select option[selected] {
	background-color: #c9d4dc;
	color: #10233a;
	font-weight: 600;
}

/* The 360px logo dwarfs a compact row; keep it as a modest mark. */
.hero-logo-img { width: 190px; }
.bmw-select-page .hero { margin-bottom: 4px; }
.bmw-select-page h1 { font-size: 1.6em; margin: 2px 0 6px; }

/* Everything below the logo reads as a left-aligned block, as in classic --
   the redesign centred the whole page, which left the two search forms floating
   in opposite halves with nothing lining up under them. */
.bmw-select-page .content { text-align: left; }

/* Top row: title + intro + serial number search on the left, part number search
   on the right. Classic keeps both to a single line each and pins them to the
   top of the row rather than spreading them down the page. */
.search_forms {
	justify-content: flex-start;
	align-items: flex-start;
	gap: 16px 48px;
	margin: 4px 0 20px;
}

/* Neither column grows: the part number search sits just past the intro text,
   where classic has it, instead of being pushed out to the page edge. */
.search_form { flex: 0 1 auto; gap: 8px; }
.search_form.search_form-vin { max-width: 560px; }

.search_form form {
	align-items: flex-start;
	gap: 8px;
	width: 100%;
}

.search_form .field-row {
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
}

.bmw-select-page .select-title {
	margin: 0 0 4px;
	font-size: 1.35em;
	font-weight: 700;
	color: #1d4f6f;
}

.bmw-select-page .select-subtitle {
	margin: 0 0 10px;
	max-width: none;
	font-size: 0.95em;
	text-align: left;
}

/* Compact controls: the pill label/input/button trio has to fit on one line
   next to the catalogue version, the way classic's row does. */
.search_form .field-row label {
	padding: 8px 16px;
	font-size: 0.7em;
}

.search_form .field-row input[type="text"],
.search_form .field-row input[type="search"],
.search_form .field-row input[type="tel"],
.search_form .field-row input[type="number"] {
	width: 200px;
	height: 36px;
	padding: 8px 14px;
}

.search_form .search-submit { padding: 8px 16px; }

.search_form .catalog-version {
	margin-left: 8px;
	white-space: nowrap;
}

.search_form .search-form-ad { align-self: flex-start; }

/* Below this the row genuinely can't fit; allow it to wrap instead of overflowing. */
@media (max-width: 1100px) {
	#bmw_selects { flex-wrap: wrap; }
	#bmw_selects > .bmw_select_box_parent { flex: 0 1 auto; }
}

/* The stacked-on-narrow rules earlier in the file centre the fields; keep the
   left edge instead so the forms still line up with the pickers below them. */
@media (max-width: 767px) {
	.search_form .field-row { align-items: flex-start; }
	.search_form .field-row label { text-align: left; }
	.search_form .catalog-version { margin-left: 0; }
}

/* The redesign hid the submit buttons (sr-only clip) and relied on Enter. Classic shows
   them, and a form with no visible submit is a real affordance loss -- bring them back,
   styled to match the dark pill labels. */
.search_form .search-submit {
	position: static;
	width: auto;
	height: auto;
	padding: 8px 18px;
	margin: 0;
	overflow: visible;
	clip: auto;
	border: none;
	border-radius: 999px;
	background: #10405c;
	color: #fff;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
}

.search_form .search-submit:hover { filter: brightness(1.12); }
.search_form .search-submit:focus-visible { outline: 2px solid #2f5873; outline-offset: 2px; }

/* ==========================================================================
   Part group pages: classic arrangement, new-ui styling

   The redesign pinned both thumbnail grids to two centred columns, which left
   the right half of the page empty on a wide screen. Classic flows the thumbs
   as inline blocks and fits as many per row as there is room for -- match that,
   while keeping the redesign's white rounded cards.
   ========================================================================== */

/* Responsive tile grid: auto-fill packs as many equal columns as the viewport
   allows, so the arrangement reflows on any screen size instead of being pinned
   to a fixed count. Every tile fills its cell and is the same fixed height, so
   a long group name can no longer make its tile wider or taller than the rest. */
.partgrp-page .partgrp-grid,
.partgrp-page .diagThumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
	align-items: stretch;
}

/* Diagram artwork is served at roughly 260x180, vs the 112x79 group icons, so the
   diagram grid gets wider columns -- at 150px the drawings were being scaled down to
   about half size and the detail was unreadable. Columns this wide let the thumbnail
   render at its native resolution, matching the classic UI. */
.partgrp-page .diagThumbs {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Sub-group headings span the row. So do the in-content ads (injected after every
   3rd/8th thumb) -- otherwise they'd occupy a tile cell and punch a hole in the grid. */
.partgrp-page .diagThumbs > h2,
.partgrp-page .diagThumbs > h3,
.partgrp-page .diagThumbs > a,
.partgrp-page .partgrp-grid > [data-freestar-ad],
.partgrp-page .diagThumbs > [data-freestar-ad] {
	grid-column: 1 / -1;
}

.partgrp-page .partgrp-grid > [data-freestar-ad],
.partgrp-page .diagThumbs > [data-freestar-ad] {
	justify-self: center;
}

/* An in-content slot that hasn't been filled would still consume a whole grid row
   and chop the tile flow into ragged 5-3-5-3 rows. Collapse it until the ad script
   actually puts something in it (the freestar branch emits a <script> child, so
   :has(*) is true exactly when the slot is live). */
.partgrp-page .partgrp-grid > [data-freestar-ad]:not(:has(*)),
.partgrp-page .diagThumbs > [data-freestar-ad]:not(:has(*)) {
	display: none;
}

/* Uniform tiles: one fixed height for all. The width below is for a tile standing
   on its own (the "Main Group:" tile on the drill-down isn't in a grid); tiles that
   ARE grid children fill their cell instead, so every column comes out equal. */
.v2-page .mg-thumb,
.v2-page .diag-thumb {
	display: block;
	width: 200px;
	max-width: 100%;
	height: 200px;
	margin: 0;
}

/* Taller/wider than a group tile for the same reason the columns above are wider:
   260x180 of artwork plus the three-line title area. */
.v2-page .diag-thumb {
	width: 282px;
	height: 262px;
}

.partgrp-page .partgrp-grid > .mg-thumb,
.partgrp-page .partgrp-grid > .diag-thumb,
.partgrp-page .diagThumbs > .mg-thumb,
.partgrp-page .diagThumbs > .diag-thumb {
	width: 100%;
	max-width: none;
}

/* "See Also" on the parts page shows the same diagram thumbnails, so it reuses the
   .diag-thumb card and gets the same grid: tiles flow left to right and wrap, instead
   of stacking one per row. Scoped to .see-also because showparts has no .partgrp-page. */
.v2-page .see-also .related-diagrams {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
	align-items: stretch;
}

.v2-page .see-also .related-diagrams > .diag-thumb {
	width: 100%;
	max-width: none;
}

.v2-page .mg-thumb a,
.v2-page .diag-thumb a {
	height: 100%;
	justify-content: flex-start;
}

/* The artwork takes whatever height the title doesn't, and is contained rather
   than stretched, so differently-shaped diagrams still line up. */
.v2-page .mg-thumb a div.image,
.v2-page .diag-thumb a div.image {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.v2-page .mg-thumb a div.image span,
.v2-page .diag-thumb a div.image span {
	display: flex;
	align-items: center;
	justify-content: center;
	max-height: 100%;
	min-height: 0;
}

.v2-page .mg-thumb a div.image img,
.v2-page .diag-thumb a div.image img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Titles reserve a constant three lines (and clamp past that) so the artwork area
   is identical in every tile. Covers both markups: h3.title and div.title. */
.v2-page .mg-thumb .title,
.v2-page .diag-thumb .title {
	flex: 0 0 auto;
	width: 100%;
	margin: 0;
	font-size: 0.78em;
	font-weight: 700;
	line-height: 1.25;
	min-height: 3.75em;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #0c184a;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Main-group number, pinned to the tile's top-left corner. Out of the flex flow so
   it can't shift the artwork or the title; the id is dropped from the title text in
   the v2 markup, so this badge is where the number lives now. */
.v2-page .mg-thumb .grp-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	padding: 1px 7px;
	border-radius: 999px;
	background: #eef2f7;
	color: #0c4a6e;
	font-size: 0.72em;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.03em;
}

.v2-page .mg-thumb:hover .grp-badge { background: #0c4a6e; color: #ffffff; }

/* ---- Scrolling list-box pickers -------------------------------------------
   Every long picker on the site used to be a bare OS <select size="N">: dated,
   unstylable, and on the parts drill-down the catalog number was an unlabelled
   prefix glued to the name. They are now cards of rows that keep the same
   scroll-a-long-list interaction.

   Two markups feed these rules:
     - parts drill-down: server-rendered links, two columns (id + name)
       -- fragments/partgrp-listbox.jspf
     - car selection page: built from the live <select> by main.js, one column
       -- .ro-lb-plain, hosted inside .bmw_select_box
   They are deliberately not scoped to a body class: .v2-page and
   .bmw-select-page both use them, and only v2 markup ever emits them. */
.v2-page .partgrp-selects {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 16px;
}

.partgrp-selects > .ro-listbox-card {
	flex: 1 1 320px;
	max-width: 440px;
}

.ro-listbox-card {
	min-width: 0;
	background: #ffffff;
	border: 1px solid #e2e5ea;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(12, 24, 74, 0.05);
}

.ro-lb-title {
	padding: 10px 14px 8px;
	font-size: 0.78em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #0c184a;
}

/* Column headers: the only thing that says what the leading number is. Shares the
   row grid below so the two columns line up -- in px, because the two rules run at
   different font sizes and em columns would not come out the same width. */
.ro-lb-head,
.ro-lb-row {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 10px;
	align-items: baseline;
}

.ro-lb-head {
	padding: 6px 14px;
	/* Two lines' worth: "Subgroup ID" wraps where "Group ID" does not, and without
	   this the two cards' lists would start at different heights. */
	min-height: 38px;
	align-content: center;
	border-top: 1px solid #e2e5ea;
	border-bottom: 1px solid #e2e5ea;
	background: #f8fafc;
	font-size: 0.68em;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #94a3b8;
}

/* Long translations wrap rather than spill into the name column. */
.ro-lb-head span { min-width: 0; overflow-wrap: break-word; }

.ro-listbox {
	list-style: none;
	margin: 0;
	padding: 6px;
	max-height: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}

.ro-listbox::-webkit-scrollbar { width: 8px; }
.ro-listbox::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border: 2px solid #ffffff;
	border-radius: 999px;
}

.ro-lb-row {
	padding: 7px 8px;
	border-radius: 8px;
	color: #1a1a2e;
	text-decoration: none;
	font-size: 0.92em;
	line-height: 1.35;
}

.ro-lb-row:hover,
.ro-lb-row:focus-visible {
	background: #eef2f7;
	text-decoration: none;
	outline: none;
}

.ro-lb-row.is-selected {
	background: #0c4a6e;
	color: #ffffff;
}

/* Same pill as the image-mode tiles' .grp-badge, so the number reads as the same
   piece of data in both drill-downs. */
.ro-lb-id {
	justify-self: start;
	padding: 1px 7px;
	border-radius: 999px;
	background: #eef2f7;
	color: #0c4a6e;
	font-size: 0.82em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.03em;
}

.ro-lb-row:hover .ro-lb-id { background: #ffffff; }
.ro-lb-row.is-selected .ro-lb-id { background: rgba(255, 255, 255, 0.18); color: #ffffff; }

.ro-lb-name { min-width: 0; }

/* ---- One-column variant: the car-selection cascade -------------------------
   Same card, but the options are plain labels ("Sedan", "118d"), so there is no
   id column and no header strip. The card replaces the .bmw_select_box panel that
   used to wrap each <select>, so those rules no longer apply to these pickers.
   Content-driven widths, as the native boxes were -- eight pickers have to fit on
   one row -- but not unboundedly so: some series labels are long enough to push
   the row off-screen on their own. */
.ro-lb-plain { max-width: 240px; }

.ro-lb-plain .ro-listbox { padding: 4px; }

.ro-lb-plain .ro-lb-row {
	display: block;
	width: 100%;
	padding: 5px 8px;
	text-align: left;
	font-size: 0.92em;
	/* A few series read "Rolls-Royce Phantom &emsp;(2003 &mdash; 2016)"; wrap them
	   rather than let the card's overflow:hidden cut the tail off. */
	overflow-wrap: break-word;
	cursor: pointer;
}

.ro-lb-plain .ro-lb-row:hover { background: #eef2f7; }
.ro-lb-plain .ro-lb-row.is-selected { background: #0c4a6e; color: #ffffff; }

/* Picker captions. Same treatment as the <label>s they replace -- see the select
   page block above, which these are added to. */
.ro-listbox-card + .ro-lb-label { margin-top: 12px; }

/* Production-date lists arrive grouped by year; keep the optgroup headings. */
.ro-lb-group {
	padding: 8px 8px 2px;
	font-size: 0.7em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #94a3b8;
}

.ro-lb-group:first-child { padding-top: 2px; }

@media (max-width: 640px) {
	.partgrp-selects > .ro-listbox-card { flex-basis: 100%; max-width: none; }
	.ro-listbox { max-height: 260px; }
}

/* Narrow screens: let the columns get smaller rather than capping tile width,
   so the grid keeps filling the row instead of leaving a ragged gap. */
@media (max-width: 640px) {
	.partgrp-page .partgrp-grid,
	.partgrp-page .diagThumbs {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
		gap: 12px;
	}
	.v2-page .mg-thumb,
	.v2-page .diag-thumb { height: 170px; }

	/* Phone: two 120px diagram columns would undo the point of the wider tiles, so
	   the drawings go one per row at whatever width is left. */
	.partgrp-page .diagThumbs,
	.v2-page .see-also .related-diagrams {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
	.v2-page .diag-thumb { width: 100%; height: 240px; }
}

/* ad-tall-right.jspf opens with <div class="blk gad-tall-right">, so the ad rail also
   matched `.v2-page .blk { flex: 1 }` and split the flex row 50/50 with the content --
   which is what squeezed the thumbnail grids down to two per row. Pin the rail to its
   own width and let the content take the rest. */
.v2-page .tbl > .gad-tall-right {
	flex: 0 0 auto;
	width: 160px;
	min-width: 160px;
}

/* The generic `.v2-page dl dt` is a fixed 100pt column with ellipsis + nowrap, which
   truncates supersede/superseded part numbers ("11420026787 - S..."). Classic carries
   the same override for exactly this reason; the redesign styled the containers but
   never brought it across. */
.v2-page .superseded dl dt,
.v2-page .supersedes dl dt {
	float: none;
	width: auto;
	overflow: visible;
	white-space: normal;
	text-overflow: clip;
	text-align: left;
}

.v2-page .superseded dl dd,
.v2-page .supersedes dl dd {
	float: none;
	margin-left: 20pt;
}

/* Visually-hidden brand heading: the select page's logo already reads "RealOEM",
   so the <h1> is kept for semantics/SEO but not shown twice. */
.v2-page .sr-only,
.bmw-select-page .sr-only,
.home-page .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Legacy shell inside the redesigned stylesheet

   vehicles.jsp has not been redesigned: it still uses the classic
   .grid / .tbl / .blk shell, but head.jspf serves THIS sheet in v2 -- and this
   sheet drops those rules. Without them the page loses its 1200px container and
   its table layout in v2. Restore them from classic, scoped to .legacy-page so
   they can't leak into redesigned pages. (Approach taken from O'ktamjon's
   redesign-on-v3 branch.) Delete once vehicles.jsp moves to the v2 structure.
   ========================================================================== */

.legacy-page .grid {
	width: 100%;
	max-width: 1200px;
	min-width: 640px;
	margin: 0 auto;
	position: relative;
}

.legacy-page .grid:after {
	content: "";
	display: table;
	clear: both;
}

.legacy-page .tbl { display: table; }

.legacy-page .blk {
	display: table-cell;
	vertical-align: top;
	width: 100%;
}

/* Classic releases the 640px floor below 720px; without this the legacy page
   forces horizontal overflow on phones. */
@media handheld, only screen and (max-width: 720px) {
	.legacy-page .grid {
		width: 100%;
		min-width: 0;
		padding: 0;
	}
}

@media handheld, only screen and (min-width: 980px) {
	.legacy-page div.blk > div { display: inline-block; }
}