/* =====================================================================
 * Space Offers — public stylesheet
 *
 * Intentionally minimal. We ship structure + modest visual hierarchy and
 * leave color + typography to the dealer's theme. Dealers on different
 * OEM brands (BMW, Nissan, Volvo) already have very different type
 * scales; we don't impose ours.
 *
 * Naming: BEM. Everything lives under `.space-offers*`.
 * Scope:  No resets. No universal selectors. No !important.
 * ===================================================================== */

.space-offers { display: block; width: 100%; }

/* ── Offer card — shared across every placement ──────────────────────── */

.space-offer-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	background: var(--space-offers-card-bg, #fff);
	color: var(--space-offers-card-fg, inherit);
	border: 1px solid var(--space-offers-card-border, rgba(0,0,0,0.08));
	border-radius: var(--space-offers-card-radius, 8px);
	overflow: hidden;
}

.space-offer-card__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.space-offer-card__body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.space-offer-card__headline {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0;
	opacity: 0.8;
}

.space-offer-card__highlight {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
}

.space-offer-card__details {
	list-style: none;
	padding: 0;
	margin: 0.25rem 0 0.5rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.5rem;
}

.space-offer-card__details li {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	font-size: 0.8125rem;
}

.space-offer-card__details span { opacity: 0.7; }
.space-offer-card__details strong { font-weight: 600; }

.space-offer-card__qualifier {
	font-size: 0.75rem;
	opacity: 0.75;
	margin: 0;
}

.space-offer-card__expires {
	font-size: 0.75rem;
	opacity: 0.75;
	margin: 0;
}

.space-offer-card__cta {
	display: inline-block;
	align-self: flex-start;
	margin-top: 0.5rem;
	padding: 0.625rem 1rem;
	background: var(--space-offers-cta-bg, currentColor);
	color: var(--space-offers-cta-fg, #fff);
	border-radius: var(--space-offers-cta-radius, 4px);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 600;
}

.space-offer-card__cta:hover,
.space-offer-card__cta:focus-visible {
	filter: brightness(1.05);
}

.space-offer-card__disclaimer {
	font-size: 0.6875rem;
	opacity: 0.7;
	margin-top: 0.5rem;
}

.space-offer-card__disclaimer summary {
	cursor: pointer;
	user-select: none;
}

.space-offer-card__disclaimer p {
	margin: 0.25rem 0 0;
	line-height: 1.4;
}

/* Compact modifier — SRP banner, SRP carousel slides, VDP inline insert */
.space-offer-card--compact .space-offer-card__body { padding: 0.875rem 1rem; gap: 0.375rem; }
.space-offer-card--compact .space-offer-card__highlight { font-size: 1.25rem; }
.space-offer-card--compact .space-offer-card__details { margin-top: 0; }

/* ── Homepage banner (single spotlight) ──────────────────────────────── */

.space-offers-banner .space-offer-card {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	min-height: 320px;
}

.space-offers-banner .space-offer-card__body { padding: 2rem; justify-content: center; }
.space-offers-banner .space-offer-card__highlight { font-size: 2.5rem; }

@media (max-width: 768px) {
	.space-offers-banner .space-offer-card { grid-template-columns: 1fr; }
	.space-offers-banner .space-offer-card__body { padding: 1.25rem; }
	.space-offers-banner .space-offer-card__highlight { font-size: 1.75rem; }
}

/* ── Homepage slideshow — scroll-snap, no-JS carousel ────────────────── */

.space-offers-slideshow__track {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 1rem;
	scrollbar-width: thin;
}

.space-offers-slideshow__slide {
	flex: 0 0 min(80vw, 520px);
	scroll-snap-align: start;
}

/* ── SRP banner (full-width single offer above inventory grid) ───────── */

.space-offers-srp-banner .space-offer-card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.5rem;
}

.space-offers-srp-banner .space-offer-card__image { width: 180px; }
.space-offers-srp-banner .space-offer-card__image img { aspect-ratio: 4 / 3; }

@media (max-width: 768px) {
	.space-offers-srp-banner .space-offer-card { grid-template-columns: 1fr; }
	.space-offers-srp-banner .space-offer-card__image { width: 100%; }
}

/* ── SRP carousel (multi-offer scroller) ─────────────────────────────── */

.space-offers-srp-carousel__header { margin-bottom: 0.75rem; }
.space-offers-srp-carousel__header h2 { font-size: 1.125rem; margin: 0; }

.space-offers-srp-carousel__track {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.space-offers-srp-carousel__slide {
	flex: 0 0 min(70vw, 320px);
	scroll-snap-align: start;
}

/* ── SRP card overlay chip ───────────────────────────────────────────── */

.space-offers-srp-overlay {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	background: var(--space-offers-overlay-bg, rgba(0,0,0,0.85));
	color: var(--space-offers-overlay-fg, #fff);
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.02em;
}

/* ── VDP banner ──────────────────────────────────────────────────────── */

.space-offers-vdp-banner .space-offer-card {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
}

.space-offers-vdp-banner .space-offer-card__highlight { font-size: 2rem; }

@media (max-width: 900px) {
	.space-offers-vdp-banner .space-offer-card { grid-template-columns: 1fr; }
	.space-offers-vdp-banner .space-offer-card__highlight { font-size: 1.5rem; }
}

/* ── VDP inline insert ───────────────────────────────────────────────── */

.space-offers-vdp-insert {
	display: grid;
	gap: 0.75rem;
	margin: 1rem 0;
}

/* ── Landing page (grouped grid) ─────────────────────────────────────── */

.space-offers-landing__oem-group { margin-bottom: 2.5rem; }
.space-offers-landing__oem       { margin: 0 0 1rem; font-size: 1.5rem; }
.space-offers-landing__type      { margin: 1.25rem 0 0.75rem; font-size: 1.125rem; opacity: 0.85; }

.space-offers-landing__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
}

/* ── Default / fallback grid ─────────────────────────────────────────── */

.space-offers__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
}

/* =====================================================================
 * SRP / VDP integration (client-side enhancer)
 *
 * Injected by public/assets/offers-srp-vdp.js on top of the existing
 * srp-v5 / vdp-fullscreen DOM. Styling here is written to coexist with
 * srp-v5.css and vdp-fullscreen.css without touching their selectors.
 * ===================================================================== */

/* SRP card chip — absolutely positioned inside each `.vehicle.card` .vehicle-images */
.srp-v5-vehicles .vehicle.card .vehicle-images { position: relative; }

.space-offers-srp-chip {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 10px;
	background: var(--space-offers-chip-bg, rgba(15, 23, 42, 0.92));
	color: var(--space-offers-chip-fg, #fff);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(0,0,0,0.15);
	max-width: calc(100% - 20px);
	pointer-events: auto;
}

.space-offers-srp-chip:hover,
.space-offers-srp-chip:focus-visible {
	background: var(--space-offers-chip-bg-hover, rgba(15, 23, 42, 1));
	color: var(--space-offers-chip-fg, #fff);
	text-decoration: none;
}

.space-offers-srp-chip--lease   { --space-offers-chip-bg: var(--space-offers-lease-bg,   rgba(15, 23, 42, 0.92)); }
.space-offers-srp-chip--finance { --space-offers-chip-bg: var(--space-offers-finance-bg, rgba(5, 46, 22, 0.92));  }
.space-offers-srp-chip--cash-off,
.space-offers-srp-chip--cash-off-upto,
.space-offers-srp-chip--as-low-as { --space-offers-chip-bg: var(--space-offers-cash-bg, rgba(124, 45, 18, 0.92)); }

.space-offers-srp-chip__highlight {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 180px;
}

.space-offers-srp-chip__info {
	appearance: none;
	border: none;
	background: rgba(255,255,255,0.15);
	color: inherit;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	font-family: Georgia, serif;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}

.space-offers-srp-chip__info:hover { background: rgba(255,255,255,0.28); }

.space-offers-srp-chip__popover,
.space-offers-disclaimer-popover {
	position: absolute;
	top: 38px;
	right: 10px;
	z-index: 10;
	/* Explicit width beats `max-width` here — the popover's positioning
	 * parent on the VDP pricing tile is the narrow `.space-offers-vdp-
	 * pricing__label` pill (`width: max-content`, ~60-80px). With only
	 * `max-width` set, the browser's shrink-to-fit algorithm collapses
	 * the popover to roughly the width of its longest unbreakable token,
	 * producing the one-word-per-line stacked look dealers were seeing.
	 * Forcing `width` to an explicit value, clamped against the viewport
	 * for phones, gives predictable paragraph wrapping everywhere the
	 * popover renders (SRP chip, VDP pricing, FS VDP pricing). */
	width: 340px;
	max-width: calc(100vw - 24px);
	max-height: 280px;
	box-sizing: border-box;
	padding: 10px 28px 10px 12px;
	background: #fff;
	color: #111827;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.12);
	/* Body copy sizing — prior 12px was fine on desktop but felt bulky
	 * when stacked 12–15 lines deep for a long OEM legal disclaimer. */
	font-size: 11px;
	line-height: 1.5;
	/* Reset text props the popover inherits from its parent pill
	 * (`.space-offers-vdp-pricing__label`, `.space-offers-card-pricing`,
	 * `.space-offers-srp-chip`). Those pills intentionally uppercase /
	 * letter-space their badge text — the popover is prose, not a chip,
	 * so strip them. */
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
	text-align: left;
	white-space: normal;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.space-offers-srp-chip__popover p,
.space-offers-disclaimer-popover p { margin: 0; }

.space-offers-srp-chip__popover-close {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 20px;
	height: 20px;
	border: none;
	background: transparent;
	color: #6b7280;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

/* Compact variant for very small cards (e.g. srp-v5-mini, vehicle-carousel) */
.v5-srp-mini .vehicle.card .space-offers-srp-chip,
.v3-vehicle-carousel .vehicle.card .space-offers-srp-chip {
	top: 6px;
	right: 6px;
	padding: 4px 8px;
	font-size: 11px;
}

/* VDP banner — injected as the first child of .vdp-right-col-wrap-inner */
.vdp-col-right .space-offers-vdp-banner {
	margin: 0 0 16px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--space-offers-vdp-banner-bg, #f8fafc);
	border: 1px solid var(--space-offers-vdp-banner-border, rgba(15, 23, 42, 0.08));
}

.vdp-col-right .space-offers__card {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.vdp-col-right .space-offers__card-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.vdp-col-right .space-offers__card-body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vdp-col-right .space-offers__card-headline {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.75;
	margin: 0;
}

/* Type badge — replaces the YMMT headline on the VDP banner. The VDP
 * already shows the year/make/model/trim in its hero, so repeating it
 * inside the offer card was duplicative. The badge tells the shopper
 * at a glance what kind of offer they're looking at (Lease / Finance
 * / Savings). Colors are inherited from the payment-kind modifiers on
 * the banner root (`.space-offers-payment--*`). */
.vdp-col-right .space-offers__card-badge,
.fs-vdp-sidebar-ctas .space-offers__card-badge {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	width: max-content;
	padding: 3px 9px;
	border-radius: var(--border-radius);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--space-offers-vdp-pricing-label-fg, #fff);
	background: var(--primary-color);
	margin: 0 0 4px;
}

.vdp-col-right .space-offers__card-highlight {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
}

.vdp-col-right .space-offers__card-details {
	font-size: 13px;
	opacity: 0.8;
}

.vdp-col-right .space-offers__card-cta {
	align-self: flex-start;
	margin-top: 6px;
	padding: 9px 14px;
	background: var(--space-offers-cta-bg, #0f172a);
	color: var(--space-offers-cta-fg, #fff);
	border-radius: 6px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
}

/* Base rules for the inline `<details>` disclaimer — applied
 * everywhere the banner template renders. Scoped contexts below
 * (vdp-col-right, fs-vdp-sidebar-ctas) only override size/margin.
 *
 * Two resets matter here:
 *   1. The summary sits next to / inside elements that uppercase and
 *      letterspace their text (pricing pills, type badges). Without an
 *      explicit reset the word "Disclaimer" renders "DISCLAIMER" with
 *      2px tracking, which reads as an unintentional shouty chip.
 *   2. When the disclaimer expands, the `<p>` can be 1500+ characters
 *      (OEM legal text). We cap it with max-height + scroll so the
 *      card doesn't balloon to the length of the disclaimer.
 *
 * The native `▶` marker is replaced with a hand-rolled SVG chevron so
 * it flips cleanly on expand and shares the card's color. `list-style:
 * none` handles Firefox; `::-webkit-details-marker` handles the rest. */
.space-offers__card-disclaimer {
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
}

.space-offers__card-disclaimer summary {
	cursor: pointer;
	user-select: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	text-transform: none;
	letter-spacing: normal;
	color: inherit;
}

.space-offers__card-disclaimer summary::-webkit-details-marker { display: none; }

.space-offers__card-disclaimer summary::before {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	background-color: currentColor;
	mask-image:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/></svg>");
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/></svg>");
	mask-size:         contain;
	-webkit-mask-size: contain;
	mask-repeat:         no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position:         center;
	-webkit-mask-position: center;
	transition: transform 120ms ease;
}

.space-offers__card-disclaimer[open] summary::before {
	transform: rotate(90deg);
}

.space-offers__card-disclaimer p {
	margin: 6px 0 0;
	max-height: 220px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px 10px;
	background: rgba(15, 23, 42, 0.04);
	border-radius: 4px;
	font-size: 11px;
	line-height: 1.45;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
	white-space: pre-line; /* preserve OEM paragraph breaks (\r\n pairs) */
}

.vdp-col-right .space-offers__card-disclaimer {
	font-size: 11px;
	opacity: 0.85;
	margin-top: 4px;
}

/* =====================================================================
 * SRP card pricing row — injected under `.vehicle-title-flex`
 *
 * The conversion-driving placement on the grid. Shows the strongest
 * available payment hook (monthly / APR / cash-off) in a single
 * horizontal strip that sits on the card like a real pricing chip,
 * not an overlay. Themes can restyle via the CSS custom properties.
 * ===================================================================== */

.space-offers-card-pricing {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
	margin: 6px 0;
	padding: 8px 12px;
	border-radius: 6px;
	background: var(--space-offers-card-pricing-bg, rgba(15, 23, 42, 0.04));
	border: 1px solid var(--space-offers-card-pricing-border, rgba(15, 23, 42, 0.08));
	color: var(--space-offers-card-pricing-fg, inherit);
	text-decoration: none;
	line-height: 1.1;
	font-size: 12px;
	transition: background 120ms ease, border-color 120ms ease;
}

.space-offers-card-pricing:hover,
.space-offers-card-pricing:focus-visible {
	background: var(--space-offers-card-pricing-bg-hover, rgba(15, 23, 42, 0.07));
	border-color: var(--space-offers-card-pricing-border-hover, rgba(15, 23, 42, 0.16));
	text-decoration: none;
}

.space-offers-card-pricing__label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 2px 6px;
	border-radius: 999px;
	background: var(--space-offers-card-pricing-label-bg, rgba(15, 23, 42, 0.85));
	color: var(--space-offers-card-pricing-label-fg, #fff);
	flex: 0 0 auto;
}

.space-offers-card-pricing__primary {
	font-size: 14px;
	font-weight: 700;
	flex: 0 0 auto;
}

.space-offers-card-pricing__secondary {
	font-size: 11px;
	opacity: 0.75;
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.space-offers-card-pricing__info {
	appearance: none;
	border: none;
	background: rgba(15,23,42,0.08);
	color: inherit;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	font-family: Georgia, serif;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	flex: 0 0 auto;
}

.space-offers-card-pricing__info:hover { background: rgba(15,23,42,0.16); }

/* Type-specific accent colors on the label pill (matches chip palette). */
.space-offers-card-pricing.space-offers-payment--lease   .space-offers-card-pricing__label { background: var(--space-offers-lease-bg,   rgba(15, 23, 42, 0.92)); }
.space-offers-card-pricing.space-offers-payment--finance .space-offers-card-pricing__label { background: var(--space-offers-finance-bg, rgba(5, 46, 22, 0.92));  }
.space-offers-card-pricing.space-offers-payment--cash    .space-offers-card-pricing__label { background: var(--space-offers-cash-bg,    rgba(124, 45, 18, 0.92)); }

/* Compact variant — mini SRP (vdp-recommended) + carousels. */
.v5-srp-mini .vehicle.card .space-offers-card-pricing,
.v3-vehicle-carousel .vehicle.card .space-offers-card-pricing {
	padding: 6px 9px;
	gap: 5px;
	font-size: 11px;
}
.v5-srp-mini .vehicle.card .space-offers-card-pricing__primary,
.v3-vehicle-carousel .vehicle.card .space-offers-card-pricing__primary {
	font-size: 13px;
}

/* =====================================================================
 * VDP pricing insert — injected directly under `.vdp-price-wrap`
 *
 * A full-width payment card that complements the sticker price. Gives
 * the shopper an immediate "or pay $X/mo" choice at the exact moment
 * they're evaluating the list price.
 * ===================================================================== */

.vdp-col-right .space-offers-vdp-pricing {
	position: relative;
	display: grid;
	gap: 4px;
	margin: 12px 0 16px;
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--space-offers-vdp-pricing-bg, rgba(15, 23, 42, 0.04));
	border: 1px solid var(--space-offers-vdp-pricing-border, rgba(15, 23, 42, 0.08));
}

.vdp-col-right .space-offers-vdp-pricing__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--space-offers-vdp-pricing-label-fg, #fff);
	background: var(--space-offers-vdp-pricing-label-bg, rgba(15, 23, 42, 0.92));
	padding: 3px 8px;
	border-radius: 999px;
	width: max-content;
	margin-bottom: 2px;
}

.vdp-col-right .space-offers-vdp-pricing__primary {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.1;
}

.vdp-col-right .space-offers-vdp-pricing__secondary {
	font-size: 13px;
	opacity: 0.8;
}

.vdp-col-right .space-offers-vdp-pricing__headline {
	font-size: 12px;
	font-weight: 600;
	opacity: 0.75;
	margin-top: 4px;
}

.vdp-col-right .space-offers-vdp-pricing__cta {
	align-self: start;
	margin-top: 8px;
	padding: 9px 14px;
	background: var(--space-offers-cta-bg, #0f172a);
	color: var(--space-offers-cta-fg, #fff);
	border-radius: 6px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	width: max-content;
}

.vdp-col-right .space-offers-vdp-pricing__info {
	appearance: none;
	border: none;
	background: rgba(255,255,255,0.25);
	color: inherit;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	font-family: Georgia, serif;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	margin-left: 2px;
}

.vdp-col-right .space-offers-vdp-pricing__info:hover { background: rgba(255,255,255,0.4); }

.vdp-col-right .space-offers-vdp-pricing.space-offers-payment--lease   .space-offers-vdp-pricing__label { background: var(--space-offers-lease-bg,   rgba(15, 23, 42, 0.92)); }
.vdp-col-right .space-offers-vdp-pricing.space-offers-payment--finance .space-offers-vdp-pricing__label { background: var(--space-offers-finance-bg, rgba(5, 46, 22, 0.92));  }
.vdp-col-right .space-offers-vdp-pricing.space-offers-payment--cash    .space-offers-vdp-pricing__label { background: var(--space-offers-cash-bg,    rgba(124, 45, 18, 0.92)); }

/* Full-screen VDP layout — anchors the same pricing block under the
 * fullscreen pricing bar. Scope by `body.vdp-fullscreen` so the
 * default VDP styling above isn't weakened. */
body.vdp-fullscreen .space-offers-vdp-pricing {
	margin: 8px 0 12px;
	padding: 12px 14px;
	border-radius: 8px;
}
body.vdp-fullscreen .space-offers-vdp-pricing__primary { font-size: 20px; }

/* =====================================================================
 * Fullscreen VDP — `.fs-vdp-layout` placements
 *
 * Two slots, both injected by offers-srp-vdp.js:
 *
 *   1. `.space-offers-fs-pricing` replaces the stock
 *      `.fs-vdp-pricing-payment` block inside `.fs-vdp-pricing-bar`.
 *      We don't remove the original element (DeskingService may
 *      still write into it); instead we hide it via the gating class
 *      `.has-space-offers-fs-pricing` on `.fs-vdp-layout`. That keeps
 *      the hide sticky across async payment rebuilds.
 *
 *   2. `.space-offers-vdp-banner--fs-sidebar` sits as the first child
 *      of `.fs-vdp-sidebar-ctas`, above the CTA buttons. It uses the
 *      same banner HTML as the standard VDP banner so theme overrides
 *      carry through.
 *
 * Selector scope: we use `.fs-vdp-layout` as the anchor instead of
 * `body.vdp-fullscreen` so these rules still win when a page-wide
 * class isn't applied (some themes skip the body class toggle).
 * ===================================================================== */

.fs-vdp-layout.has-space-offers-fs-pricing .fs-vdp-pricing-payment {
	display: none !important;
}

.fs-vdp-layout .space-offers-fs-pricing.space-offers-vdp-pricing {
	/* Mirror the `.fs-vdp-pricing-payment` slot (flex item in
	 * `.fs-vdp-pricing-bar-inner`) — padding is what the original
	 * block used, so visually the offer sits in the same spot.
	 * We use inline-grid inside so the card stays naturally sized. */
	position: relative;
	flex: 0 0 auto;
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0 32px;
	background: transparent;
	border: none;
	border-radius: 0;
}

@media (max-width: 900px) {
	.fs-vdp-layout .space-offers-fs-pricing.space-offers-vdp-pricing {
		padding: 0 20px;
	}
}

@media (max-width: 600px) {
	.fs-vdp-layout .space-offers-fs-pricing.space-offers-vdp-pricing {
		padding: 12px 0 0;
	}
}

.fs-vdp-layout .space-offers-fs-pricing .space-offers-vdp-pricing__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--space-offers-vdp-pricing-label-fg, #fff);
    background: var(--primary-color);
    padding: 2px 7px;
    border-radius: var(--border-radius);
    width: max-content;
    margin-bottom: 2px;
}

.fs-vdp-layout .space-offers-fs-pricing .space-offers-vdp-pricing__primary {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.1;
}

.fs-vdp-layout .space-offers-fs-pricing .space-offers-vdp-pricing__secondary {
	font-size: 12px;
	opacity: 0.8;
}

.fs-vdp-layout .space-offers-fs-pricing .space-offers-vdp-pricing__headline {
	font-size: 11px;
	font-weight: 600;
	opacity: 0.75;
	margin-top: 4px;
}

.fs-vdp-layout .space-offers-fs-pricing .space-offers-vdp-pricing__cta {
	align-self: start;
	margin-top: 6px;
	padding: 7px 12px;
	background: var(--space-offers-cta-bg, #0f172a);
	color: var(--space-offers-cta-fg, #fff);
	border-radius: 6px;
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
	width: max-content;
}

.fs-vdp-layout .space-offers-fs-pricing .space-offers-vdp-pricing__info {
	appearance: none;
	border: none;
	background: rgba(255, 255, 255, 0.25);
	color: inherit;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	font-family: Georgia, serif;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	margin-left: 2px;
}

.fs-vdp-layout .space-offers-fs-pricing .space-offers-vdp-pricing__info:hover {
	background: rgba(255, 255, 255, 0.4);
}



/* Sidebar-CTA banner variant — narrower column than the standard VDP
 * banner, so we collapse to a single column and trim the inner padding
 * regardless of viewport. */
.fs-vdp-sidebar-ctas .space-offers-vdp-banner--fs-sidebar {
	margin: 0 0 12px;
	overflow: hidden;
	border-radius: var(--border-radius);
	background: #fff;
	border: 1px solid rgb(232 232 232);
}

.fs-vdp-sidebar-ctas .space-offers-vdp-banner--fs-sidebar .space-offer-card,
.fs-vdp-sidebar-ctas .space-offers-vdp-banner--fs-sidebar .space-offers__card {
	display: block;
	padding: 10px 12px;
}

.fs-vdp-sidebar-ctas .space-offers-vdp-banner--fs-sidebar .space-offers__card-media {
	margin-bottom: 8px;
}

.fs-vdp-sidebar-ctas .space-offers-vdp-banner--fs-sidebar .space-offers__card-media img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	display: block;
}

.fs-vdp-sidebar-ctas .space-offers-vdp-banner--fs-sidebar .space-offers__card-headline {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 4px;
}

.fs-vdp-sidebar-ctas .space-offers-vdp-banner--fs-sidebar .space-offers__card-highlight {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.1;
	margin-bottom: 4px;
}

.fs-vdp-sidebar-ctas .space-offers-vdp-banner--fs-sidebar .space-offers__card-details {
	font-size: 11px;
	opacity: 0.75;
	margin-bottom: 8px;
}

.fs-vdp-sidebar-ctas .space-offers-vdp-banner--fs-sidebar .space-offers__card-cta {
	display: inline-block;
	padding: 7px 12px;
	background: var(--space-offers-cta-bg, #0f172a);
	color: var(--space-offers-cta-fg, #fff);
	border-radius: 6px;
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
}

.fs-vdp-sidebar-ctas .space-offers-vdp-banner--fs-sidebar .space-offers__card-disclaimer {
	margin-top: 8px;
	font-size: 11px;
	opacity: 0.85;
}

/* =====================================================================
 * Banner-group wrapper — multi-kind banner placements
 *
 * When a vehicle has both a lease and a finance offer in the `banner`
 * bucket, both cards render stacked in the same slot. Each card keeps
 * its existing chrome (border, padding, badge); the wrapper owns the
 * vertical rhythm between them and strips the per-card bottom margin
 * that would otherwise double up.
 *
 * The variant classes (`--vdp-banner`, `--fs-sidebar-banner`) are
 * intentionally mutually exclusive with the solo-card layout rules
 * above — the wrapper uses the same margin as the solo banner did,
 * and we reset per-child margin here rather than pushing it onto
 * the existing card selectors.
 * ===================================================================== */

.space-offers-banner-group {
	display: flex;
	flex-direction: column;
}

.space-offers-banner-group > .space-offers-vdp-banner {
	margin: 0;
}

/* Standard VDP right-column stack — inherit the 16px bottom margin
 * the solo banner uses so single and stacked layouts take equal
 * vertical space under `.vdp-right-col-wrap-inner`. */
.vdp-col-right .space-offers-banner-group--vdp-banner {
	gap: 10px;
	margin: 0 0 16px;
}

/* Fullscreen sidebar stack — sits above the lead CTAs. Gap matches
 * the card's 12px bottom margin so stacked and solo feel identical
 * to the shopper's eye, and the last card's trailing margin is the
 * block's own rather than the card's. */
.fs-vdp-sidebar-ctas .space-offers-banner-group--fs-sidebar-banner {
	gap: 8px;
	margin: 0 0 12px;
}

/* Inside the sidebar group, each card still carries
 * `.space-offers-vdp-banner--fs-sidebar` (applied at inject time),
 * so every existing per-card rule above continues to apply — we
 * just null out the solo card's bottom margin since the group
 * wrapper owns spacing now. */
.fs-vdp-sidebar-ctas .space-offers-banner-group--fs-sidebar-banner > .space-offers-vdp-banner--fs-sidebar {
	margin: 0;
}

/* =====================================================================
 * Price-breakdown insert
 *
 * Sits inside `.v4-pricing-breakdown`, immediately after
 * `.pricing-disclaimer-wrap`. Unlike the fs-pricing-bar slot (which
 * has to match a flex-row pricing strip), this lives in a block-flow
 * list of pricing rows, so the card gets full width and its own
 * visual emphasis. Works in both the standard VDP and the fullscreen
 * VDP since both render the same `.v4-pricing-breakdown` markup.
 * ===================================================================== */

.v4-pricing-breakdown > .space-offers-breakdown-insert.space-offers-vdp-pricing {
	position: relative;
	display: grid;
	gap: 4px;
	margin: 12px 0 0;
	padding: 12px 14px;
	border-radius: 8px;
	background: var(--space-offers-vdp-pricing-bg, rgba(15, 23, 42, 0.04));
	border: 1px solid var(--space-offers-vdp-pricing-border, rgba(15, 23, 42, 0.08));
}

.space-offers-breakdown-insert .space-offers-vdp-pricing__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: max-content;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 400;

	letter-spacing: 0.06em;
	color: var(--space-offers-vdp-pricing-label-fg, #fff);
	margin-bottom: 2px;
	background: var(--primary-color);
    text-transform: none;
    padding: 4px 8px;
    border-radius: var(--border-radius);
}

.space-offers-breakdown-insert .space-offers-vdp-pricing__primary {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.1;
}

.space-offers-breakdown-insert .space-offers-vdp-pricing__secondary {
	font-size: 12px;
	opacity: 0.8;
}

.space-offers-breakdown-insert .space-offers-vdp-pricing__info {
	appearance: none;
	border: none;
	background: rgba(255, 255, 255, 0.25);
	color: inherit;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	font-family: Georgia, serif;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	margin-left: 2px;
}

.space-offers-breakdown-insert .space-offers-vdp-pricing__info:hover {
	background: rgba(255, 255, 255, 0.4);
}

.space-offers-breakdown-insert.space-offers-payment--lease   .space-offers-vdp-pricing__label { background: var(--space-offers-lease-bg,   rgba(15, 23, 42, 0.92)); }
.space-offers-breakdown-insert.space-offers-payment--finance .space-offers-vdp-pricing__label { background: var(--space-offers-finance-bg, rgba(5, 46, 22, 0.92));  }
.space-offers-breakdown-insert.space-offers-payment--cash    .space-offers-vdp-pricing__label { background: var(--space-offers-cash-bg,    rgba(124, 45, 18, 0.92)); }

/* Neutralize any ambient `.v4-pricing-breakdown > *` rules that add
 * a trailing border or tight vertical padding to every row. The
 * offer card is already self-contained. Scoping to `.v4-pricing-breakdown`
 * so we only override the row-rhythm, not a user-owned layout. */
.v4-pricing-breakdown > .space-offers-breakdown-insert,
.v4-pricing-breakdown > .space-offers-payment-group--breakdown {
	border-bottom: none !important;
}

/* =====================================================================
 * Payment-group wrapper
 *
 * Rendered only when a vehicle has >1 payment-kind match (typical
 * case: a lease AND a finance offer on the same YMMT). The wrapper
 * is a flex container; each tile keeps its existing per-kind styles
 * (same classes as the single-offer path), so the color language
 * and typographic rhythm stay consistent regardless of how many
 * offers are showing.
 *
 * Variants:
 *   --card       SRP `.vehicle-details` strip. Stacked vertically
 *                because the card is narrow; each chip is already
 *                a horizontal pill so stacking reads cleanly.
 *   --vdp        VDP right column. Stacked vertically for the same
 *                reason — right column widths range from ~280–380px
 *                across themes.
 *   --fs         Fullscreen VDP pricing bar. Horizontal flex-row
 *                so the tiles sit side-by-side in the pricing
 *                strip next to `.fs-vdp-pricing-price`.
 *   --breakdown  Pricing-breakdown insert. Block-flow, so we use
 *                a responsive grid that snaps to two columns when
 *                there's room.
 * ===================================================================== */

.space-offers-payment-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Reset per-tile margin that the solo paths add — the group wrapper
 * owns the outer spacing now. */
.space-offers-payment-group > .space-offers-card-pricing,
.space-offers-payment-group > .space-offers-vdp-pricing {
	margin: 0;
}

/* SRP card strip — sits under `.vehicle-title-flex`. Match the chip's
 * surrounding whitespace so the dual stack feels integrated with the
 * card, not bolted on. */
.space-offers-payment-group--card {
	margin: 4px 0 6px;
}

/* VDP right-column stack — same vertical margin as the solo pricing
 * insert so single-offer and dual-offer layouts take equal vertical
 * space above and below. */
.vdp-col-right .space-offers-payment-group--vdp {
	margin: 12px 0 16px;
}

/* Fullscreen VDP pricing bar — the pricing bar is flex-row, so we
 * become a flex-row with the same padding the solo `.space-offers-fs-pricing`
 * uses (0 32px → 0 20px at the bar's own breakpoints). Horizontal layout
 * keeps both tiles visible without doubling the bar's height. */
.fs-vdp-layout .space-offers-payment-group--fs {
	flex: 0 0 auto;
	flex-direction: row;
	gap: 20px;
	padding: 0 32px;
	margin: 0;
}

@media (max-width: 900px) {
	.fs-vdp-layout .space-offers-payment-group--fs { padding: 0 20px; gap: 16px; }
}

@media (max-width: 600px) {
	.fs-vdp-layout .space-offers-payment-group--fs {
		flex-direction: column;
		padding: 12px 0 0;
		gap: 10px;
	}
}

/* Inside the fs-pricing group, each tile is already carrying
 * `.space-offers-fs-pricing` — the per-tile styles handle their own
 * padding/background. Null out the shared group's padding so we
 * don't double-pad. */
.fs-vdp-layout .space-offers-payment-group--fs > .space-offers-fs-pricing {
	padding: 0;
}

/* Pricing-breakdown insert — block-flow context. Use a responsive
 * grid so tiles sit side-by-side when the breakdown column is wide
 * (modal, desktop VDP) and stack on narrow columns. */
.v4-pricing-breakdown > .space-offers-payment-group--breakdown {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
	margin: 12px 0 0;
}

.v4-pricing-breakdown > .space-offers-payment-group--breakdown > .space-offers-breakdown-insert {
	margin: 0;
}

/* ── Quick Filters — category tile bar (BB module + SD component) ────────
 *
 * Renders above a builder-widget / landing-page offers list. Each tile is
 * a deep-link to an SRP filter chosen by the dealer. Images are dealer-
 * uploaded hero shots; we don't impose aspect constraints — just stretch
 * them into a uniform 16:10 container so a mixed set (horizontal wagon
 * shot vs. square crossover shot) doesn't look ragged side-by-side.
 *
 * Grid uses CSS custom properties `--sqf-cols-{desktop,mobile}` set inline
 * by the render helper. 6-column desktop / 2-column mobile matches the
 * BMW reference design that prompted this feature.
 * ─────────────────────────────────────────────────────────────────────── */

.space-offers-quick-filters {
	display: block;
	width: 100%;
	margin: 0 0 20px;
	font-family: inherit;
}

.space-offers-quick-filters__heading {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--space-offers-quick-filters-heading-fg, rgba(0, 0, 0, 0.55));
	margin: 0 0 10px;
	text-transform: none;
}

.space-offers-quick-filters__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(var(--sqf-cols-mobile, 2), minmax(0, 1fr));
	gap: 16px;
}

@media (min-width: 768px) {
	.space-offers-quick-filters__list {
		grid-template-columns: repeat(var(--sqf-cols-desktop, 6), minmax(0, 1fr));
		gap: 20px;
	}
}

.space-offers-quick-filters__item {
	margin: 0;
	padding: 0;
	min-width: 0;
}

.space-offers-quick-filters__tile {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	text-decoration: none;
	color: var(--space-offers-quick-filters-fg, inherit);
	transition: transform 120ms ease, opacity 120ms ease;
}

.space-offers-quick-filters__tile:hover,
.space-offers-quick-filters__tile:focus-visible {
	transform: translateY(-2px);
}

.space-offers-quick-filters__tile:focus-visible {
	outline: 2px solid var(--space-offers-focus-ring, #2563eb);
	outline-offset: 3px;
	border-radius: 6px;
}

.space-offers-quick-filters__image-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 6px;
	background: var(--space-offers-quick-filters-tile-bg, #f3f4f6);
}

/* aspect-ratio fallback for older browsers (Safari < 15, etc.) */
@supports not (aspect-ratio: 16 / 10) {
	.space-offers-quick-filters__image-wrap {
		padding-top: 62.5%;
		height: 0;
	}
	.space-offers-quick-filters__image,
	.space-offers-quick-filters__image-placeholder {
		position: absolute;
		inset: 0;
	}
}

.space-offers-quick-filters__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border: 0;
}

.space-offers-quick-filters__image-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(
			135deg,
			var(--space-offers-quick-filters-placeholder-a, #e5e7eb) 0%,
			var(--space-offers-quick-filters-placeholder-b, #d1d5db) 100%
		);
}

.space-offers-quick-filters__label {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--space-offers-quick-filters-label-fg, inherit);
	text-align: center;
	/* Two-line clamp keeps "Sedans & Gran Coupes" readable without
	 * pushing a single-word neighbor's tile out of alignment. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── Model / Trim Grid — BMW-style showcase (BB module + SD component) ────
 *
 * One tile per YMMT, stacking lease / finance / additional-credit sections.
 * Column counts are driven by CSS custom properties so the BB and SD
 * wrappers can override without duplicating the stylesheet:
 *
 *   --stg-cols-desktop (default 3)
 *   --stg-cols-mobile  (default 1)
 *
 * Intentionally neutral styling — inherits the surrounding theme's fonts
 * and dark/light mode via `currentColor`. The BMW reference uses a muted
 * grey photo stage with a large faded series watermark; we keep the same
 * composition so dealers can drop it onto any template without theme work.
 */

/* Column overrides intentionally live on the `var()` fallback, not as
 * declarations on `.space-offers-trim-grid` — declaring them on the
 * container would block BB/SD wrappers from cascading in their chosen
 * counts via inline style. Non-column tokens (photo bg, muted text)
 * have no override surface, so they can be declared directly. */

.space-offers-trim-grid {
	--stg-photo-bg: var(--space-offers-trim-grid-photo-bg, #f3f4f6);
	--stg-muted: var(--space-offers-trim-grid-muted, rgba(0, 0, 0, 0.55));

	display: grid;
	grid-template-columns: repeat(var(--stg-cols-mobile, 1), minmax(0, 1fr));
	gap: 24px;
	width: 100%;
	margin: 0 0 24px;
	font-family: inherit;
}

@media (min-width: 768px) {
	.space-offers-trim-grid {
		grid-template-columns: repeat(var(--stg-cols-desktop, 3), minmax(0, 1fr));
	}
}

.space-offers-trim-grid__tile {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: transparent;
	color: inherit;
}

/* Photo stage — matches the BMW layout: uniform light backdrop, large
 * faded watermark behind the product shot, rounded corners off so the
 * imagery bleeds to the tile edge. */

.space-offers-trim-grid__photo-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.space-offers-trim-grid__photo {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: var(--stg-photo-bg);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

@supports not (aspect-ratio: 16 / 10) {
	.space-offers-trim-grid__photo::before {
		content: '';
		display: block;
		padding-top: 62.5%;
	}
}

.space-offers-trim-grid__photo img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: center;
	position: relative;
	z-index: 2;
}

.space-offers-trim-grid__watermark {
	position: absolute;
	left: 8px;
	top: 4px;
	z-index: 1;
	font-size: clamp(40px, 6vw, 80px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: rgba(0, 0, 0, 0.08);
	pointer-events: none;
	user-select: none;
	text-transform: none;
}

.space-offers-trim-grid__photo-placeholder {
	position: relative;
	z-index: 2;
	color: rgba(0, 0, 0, 0.25);
}

/* Body — the typography-heavy column that holds year / trim / stacked
 * offer sections. Tight vertical rhythm so two- and three-section tiles
 * feel equal-weight in a row. */

/* Typography tuned against BMW's production offers page (bmwusa.com
 * /special-offers/new-iframe-html/offers):
 *
 *   - Year:     12-13px, muted, normal weight.
 *   - Headline: 22px, weight 700, zero letter-spacing. Earlier we used
 *               600 + slight negative tracking which read too airy next
 *               to BMW's bolder condensed type.
 *   - Spec:     13-14px muted, tucked under the headline by ~6px so
 *               it reads as a subtitle, not a separate line.
 *   - Term:     15px, weight 700 on the whole bolded phrase ("Lease at
 *               $699/month"). BMW emphasizes the full hero line, not
 *               just the amount.
 *   - Sub:      13px muted.
 *
 * Sections use a 12px vertical gap (tightened from 14px) so lease /
 * finance / credit stack feels as dense as BMW's three-section tile
 * without visibly cramping.
 */

.space-offers-trim-grid__body {
	padding: 14px 0 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.space-offers-trim-grid__year {
	font-size: 12px;
	line-height: 1.2;
	color: var(--stg-muted);
	text-transform: none;
	letter-spacing: 0;
	margin-bottom: -6px; /* tighten the year → headline pair */
}

.space-offers-trim-grid__headline {
	margin: 0;
	padding: 0;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0;
	color: inherit;
}

.space-offers-trim-grid__headline a {
	color: inherit;
	text-decoration: none;
}

.space-offers-trim-grid__headline a:hover,
.space-offers-trim-grid__headline a:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.space-offers-trim-grid__spec {
	font-size: 13px;
	line-height: 1.4;
	color: var(--stg-muted);
	margin-top: -6px; /* tuck against the headline */
}

.space-offers-trim-grid__section {
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.space-offers-trim-grid__term {
	margin: 0;
	font-size: 15px;
	line-height: 1.35;
	color: inherit;
	font-weight: 400;
}

.space-offers-trim-grid__term strong {
	font-weight: 700;
}

.space-offers-trim-grid__sub {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--stg-muted);
}

/* Credit block sits slightly indented against a muted background so it
 * reads as a secondary call-out ("loyalty credit off MSRP"). */

.space-offers-trim-grid__credit {
	margin: 2px 0 0;
	padding: 10px 12px;
	background: var(--space-offers-trim-grid-credit-bg, rgba(0, 0, 0, 0.04));
	border-radius: 2px;
	font-size: 12px;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.space-offers-trim-grid__credit p {
	margin: 0;
	color: inherit;
}

.space-offers-trim-grid__credit strong {
	font-weight: 700;
}

.space-offers-trim-grid__muted {
	color: var(--stg-muted);
	font-weight: 400;
}

/* "Important Info" trigger — underlined muted link-style button, matches
 * BMW's treatment. The actual popover is drawn by the shared disclaimer
 * handler in offers-srp-vdp.js. */

.space-offers-trim-grid__info {
	align-self: flex-start;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: 11px;
	color: var(--stg-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
}

.space-offers-trim-grid__info:hover,
.space-offers-trim-grid__info:focus-visible {
	color: inherit;
	outline: none;
	background: inherit;
	border:inherit;
}

/* The shared popover handler anchors to the nearest wide offer card
 * root. Giving the tile position:relative ensures the popover sits
 * inside the tile column rather than escaping upward into the grid. */

.space-offers-trim-grid__tile {
	position: relative;
}