/* Republic Wholesale Inventory: light gray page, white rounded cards with soft shadows,
   black panels and Republic red accents. Reads the theme's color tokens; the fallbacks are the brand colors. */

.ocwi {
	--ocwi-ink: var(--wp--preset--color--ink, #0b0c0e);
	--ocwi-ink-2: var(--wp--preset--color--ink-2, #1c1e22);
	--ocwi-muted: var(--wp--preset--color--muted, #5f6670);
	--ocwi-rule: var(--wp--preset--color--rule, #e4e6ea);
	--ocwi-soft: var(--wp--preset--color--soft, #f3f4f6);
	--ocwi-card: #fff;
	--ocwi-red: var(--wp--preset--color--red, #ed1c24);
	--ocwi-red-2: var(--wp--preset--color--red-dark, #c4121a);
	/* Deal and status colours; text passes 4.5:1 on its tint. */
	--ocwi-good: #166534;
	--ocwi-good-bg: #e7f5ec;
	--ocwi-pending: #f5b000;
	/* Glass black: controls that sit on photos. */
	--ocwi-glass: rgb(12 13 15 / 0.55);
	--ocwi-glass-hi: rgb(12 13 15 / 0.82);
	--ocwi-glass-edge: rgb(255 255 255 / 0.2);
	--ocwi-radius: 16px;
	--ocwi-radius-sm: 10px;
	--ocwi-shadow: 0 1px 2px rgb(11 12 14 / 0.06), 0 4px 16px rgb(11 12 14 / 0.06);
	--ocwi-shadow-hi: 0 2px 4px rgb(11 12 14 / 0.06), 0 14px 34px rgb(11 12 14 / 0.13);
	/* VINs and the deal text use the site font (equal-width numbers below), not a typewriter font. */
	--ocwi-mono: var(--wp--preset--font-family--inter, "Inter", system-ui, sans-serif);
	color: var(--ocwi-ink);
	padding-block: var(--wp--preset--spacing--40, 1.5rem) var(--wp--preset--spacing--50, 2.5rem);
}

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

.ocwi [hidden] {
	display: none !important;
}

.ocwi :where(a, button, input, select):focus-visible {
	outline: 2px solid var(--ocwi-ink);
	outline-offset: 2px;
}

.ocwi .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}

/* ---------- Search ---------- */

.ocwi-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem;
	background: var(--ocwi-card);
	border: 1px solid var(--ocwi-rule);
	border-radius: 999px;
	box-shadow: var(--ocwi-shadow);
}

.ocwi-hero .ocwi-search {
	border-color: transparent;
}

.ocwi-search__icon {
	flex: none;
	width: 22px;
	height: 22px;
	margin-left: 0.85rem;
	fill: none;
	stroke: var(--ocwi-muted);
	stroke-width: 2;
	stroke-linecap: round;
}

.ocwi-search input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 0 0.25rem;
	font: inherit;
	font-size: 1.0625rem;
	color: var(--ocwi-ink);
	background: none;
	border: 0;
	outline: 0;
}

/* The pill itself shows focus (below), so the field needs no outline of its own. */
.ocwi-search input:focus,
.ocwi-search input:focus-visible {
	outline: none;
}

.ocwi-search input::placeholder {
	color: #8a9099;
}

.ocwi-search:focus-within {
	box-shadow: 0 0 0 2px var(--ocwi-ink), var(--ocwi-shadow);
}

.ocwi-search__go {
	flex: none;
	min-height: 48px;
	padding: 0 1.5rem;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: var(--ocwi-ink);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ocwi-search__go:hover {
	background: var(--ocwi-ink-2);
}

@media (max-width: 520px) {
	.ocwi-search__go {
		padding: 0 1rem;
	}

	.ocwi-search input {
		font-size: 1rem;
	}

	.ocwi-search__icon {
		display: none;
	}

	.ocwi-search input {
		padding-left: 0.85rem;
	}
}

.ocwi-exact {
	margin: 1rem 0 0;
	padding: 0.85rem 1.1rem;
	font-weight: 600;
	color: #fff;
	background: var(--ocwi-ink);
	border-radius: var(--ocwi-radius-sm);
}

.ocwi-exact a {
	margin-left: 0.5rem;
	color: #ff8a8d;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Layout: filters sidebar + results ---------- */

.ocwi-layout {
	display: grid;
	gap: 1rem 1.75rem;
	margin-top: 1.5rem;
}

@media (min-width: 1000px) {
	.ocwi-layout {
		grid-template-columns: 270px minmax(0, 1fr);
		align-items: start;
	}

	.ocwi-side {
		position: sticky;
		top: calc(24px + var(--ocwi-staff-shift, 0px));
	}
}

.ocwi-results {
	min-width: 0;
}

/* ---------- Filters ---------- */

.ocwi-filters {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.25rem;
	background: var(--ocwi-card);
	border: 1px solid var(--ocwi-rule);
	border-radius: var(--ocwi-radius);
}

.ocwi-side__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 0.85rem;
	border-bottom: 2px solid var(--ocwi-ink);
}

.ocwi-side__head h2 {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.ocwi-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.ocwi-field label,
.ocwi-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ocwi-ink);
}

.ocwi-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

.ocwi-filters select,
.ocwi-sort {
	width: 100%;
	min-height: 44px;
	padding: 0.5rem 2.2rem 0.5rem 0.85rem;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--ocwi-ink);
	background: var(--ocwi-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0c0e' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 16px;
	border: 1px solid transparent;
	border-radius: var(--ocwi-radius-sm);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ocwi-filters select:hover,
.ocwi-sort:hover {
	border-color: #c5c9cf;
}

.ocwi-filters select:focus,
.ocwi-sort:focus {
	background-color: #fff;
	border-color: var(--ocwi-ink);
	outline: 0;
}

/* Rounded "bubble" option lists where the browser allows styling them
   (Chrome/Edge 135+); other browsers keep their own list. */
@supports (appearance: base-select) {
	.ocwi-filters select,
	.ocwi-sort,
	.ocwi-filters select::picker(select),
	.ocwi-sort::picker(select) {
		appearance: base-select;
	}

	.ocwi-filters select::picker-icon,
	.ocwi-sort::picker-icon {
		display: none;
	}

	.ocwi-filters select::picker(select),
	.ocwi-sort::picker(select) {
		min-width: anchor-size(width);
		max-height: min(360px, 60vh);
		margin-top: 6px;
		padding: 6px;
		background: #fff;
		border: 0;
		border-radius: 14px;
		box-shadow: 0 2px 6px rgb(11 12 14 / 0.08), 0 16px 40px rgb(11 12 14 / 0.16);
	}

	.ocwi-filters option,
	.ocwi-sort option {
		padding: 0.55rem 0.8rem;
		font-size: 0.9375rem;
		font-weight: 500;
		color: var(--ocwi-ink);
		border-radius: 10px;
		cursor: pointer;
	}

	.ocwi-filters option::checkmark,
	.ocwi-sort option::checkmark {
		display: none;
	}

	.ocwi-filters option:hover,
	.ocwi-filters option:focus-visible,
	.ocwi-sort option:hover,
	.ocwi-sort option:focus-visible {
		background: var(--ocwi-soft);
		outline: none;
	}

	.ocwi-filters option:checked,
	.ocwi-sort option:checked {
		font-weight: 600;
		color: #fff;
		background: var(--ocwi-ink);
	}
}

.ocwi-filter-toggle {
	display: none;
}

@media (max-width: 999px) {
	.ocwi-filter-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		min-height: 46px;
		padding: 0 1.25rem;
		font: inherit;
		font-weight: 600;
		color: var(--ocwi-ink);
		background: var(--ocwi-card);
		border: 0;
		border-radius: 999px;
		box-shadow: var(--ocwi-shadow);
		cursor: pointer;
	}

	.ocwi-filter-toggle svg {
		width: 18px;
		height: 18px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2.2;
		stroke-linecap: round;
	}

	.ocwi-side:not(.is-open) .ocwi-filters {
		display: none;
	}

	.ocwi-side.is-open .ocwi-filters {
		margin-top: 0.75rem;
	}

	.ocwi-side.is-open .ocwi-filter-toggle {
		color: #fff;
		background: var(--ocwi-ink);
	}
}

@media (min-width: 600px) and (max-width: 999px) {
	.ocwi-side.is-open .ocwi-filters {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}

	.ocwi-side__head {
		grid-column: 1 / -1;
	}
}

/* ---------- Toolbar ---------- */

.ocwi-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin: 0 0 1rem;
	min-height: 44px;
}

.ocwi-count {
	margin: 0;
	color: var(--ocwi-muted);
}

.ocwi-count strong {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--ocwi-ink);
	font-variant-numeric: tabular-nums;
}

.ocwi-toolbar__right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-left: auto;
}

.ocwi-view {
	display: inline-flex;
	padding: 3px;
	background: #e7e8eb;
	border-radius: 999px;
}

.ocwi-view button {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 36px;
	padding: 0 0.9rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ocwi-muted);
	background: none;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.ocwi-view button[aria-pressed="true"] {
	color: #fff;
	background: var(--ocwi-ink);
}

.ocwi-view svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

/* List rows need width; phones always get cards, so the switch would mislead there. */
@media (max-width: 899px) {
	.ocwi-view {
		display: none;
	}
}

.ocwi-sort-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ocwi-muted);
}

.ocwi-sort {
	width: auto;
	min-height: 42px;
	font-weight: 600;
	background-color: #fff;
	box-shadow: var(--ocwi-shadow);
}

.ocwi-reset,
.ocwi-linkbtn {
	min-height: 36px;
	padding: 0 0.25rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ocwi-ink);
	background: none;
	border: 0;
	cursor: pointer;
}

.ocwi-reset:hover,
.ocwi-linkbtn:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Cards (grid view) ---------- */

.ocwi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ocwi-card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--ocwi-card);
	border: 1px solid var(--ocwi-rule);
	border-radius: var(--ocwi-radius);
	overflow: hidden;
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ocwi-card:hover,
.ocwi-card:focus-within {
	border-color: #d6d9de;
	box-shadow: var(--ocwi-shadow-hi);
	transform: translateY(-2px);
}

.ocwi-card__media {
	position: relative;
}

.ocwi-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1rem 1.1rem 1.15rem;
}

.ocwi-card__main {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.ocwi-card__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

.ocwi-card__link {
	color: inherit;
	text-decoration: none;
}

/* The whole card opens the vehicle; photo arrows, thumbnails and buttons stay clickable above it. */
.ocwi-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ocwi-card__sub {
	margin: -0.25rem 0 0;
	font-size: 0.9375rem;
	color: var(--ocwi-muted);
	font-variant-numeric: tabular-nums;
}

.ocwi-card__ids {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.6;
}

.ocwi-card__ids span {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ocwi-muted);
}

.ocwi-card__ids code {
	font-family: var(--ocwi-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	color: var(--ocwi-ink-2);
	background: none;
}

.ocwi-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ocwi-chip {
	padding: 0.2rem 0.55rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #11632b;
	background: #e7f6ec;
	border-radius: 999px;
}

.ocwi-chip--warn {
	color: #7a4d00;
	background: #fff1d6;
}

.ocwi-chip--more {
	color: var(--ocwi-ink-2);
	background: var(--ocwi-soft);
}

/* List-only parts; the grid card keeps to photo, title, prices. */
.ocwi-allphotos,
.ocwi-card__specs,
.ocwi-card__title-status,
.ocwi-carfax,
.ocwi-card__acts {
	display: none;
}

.ocwi-card__price {
	margin-top: auto;
}

.ocwi-card__loc {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
}

.ocwi-card__loc svg {
	flex: none;
	width: 15px;
	height: 15px;
	fill: none;
	stroke: var(--ocwi-muted);
	stroke-width: 2;
}

/* ---------- Prices: ours and MMR ---------- */

.ocwi-prices {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: start;
	align-items: end;
	gap: 0.35rem 1.25rem;
}

.ocwi-prices > div {
	display: flex;
	flex-direction: column;
}

.ocwi-prices span {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ocwi-muted);
}

.ocwi-prices strong {
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.ocwi-prices__ours strong {
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--ocwi-ink);
}

.ocwi-prices__ours span {
	color: var(--ocwi-muted);
}

.ocwi-prices__mmr strong {
	font-size: 1rem;
	font-weight: 600;
	color: var(--ocwi-ink-2);
}

.ocwi-prices__under,
.ocwi-prices__saved {
	grid-column: 1 / -1;
	justify-self: start;
	margin: 0.15rem 0 0;
	padding: 0.2rem 0.6rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--ocwi-good);
	background: var(--ocwi-good-bg);
	border-radius: 999px;
}

.ocwi-locked {
	position: relative;
	z-index: 2;
	padding: 0.6rem 0;
	font-weight: 600;
	color: var(--ocwi-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Photo carousel ---------- */

.ocwi-carousel {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #e9eaed;
}

.ocwi-carousel__track {
	display: flex;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.ocwi-carousel__track::-webkit-scrollbar {
	display: none;
}

.ocwi-carousel__slide {
	flex: 0 0 100%;
	height: 100%;
	scroll-snap-align: start;
}

.ocwi-carousel__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ocwi-carousel__empty {
	display: grid;
	place-items: center;
	height: 100%;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ocwi-muted);
	text-decoration: none;
}

/* Swiping the photos works on touch; the track sits above the card link. */
.ocwi-carousel__track,
.ocwi-carousel__btn,
.ocwi-carousel__count {
	position: relative;
	z-index: 2;
}

.ocwi-carousel__btn {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: #fff;
	background: var(--ocwi-glass);
	border: 1px solid var(--ocwi-glass-edge);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgb(11 12 14 / 0.2);
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
	backdrop-filter: blur(10px) saturate(1.4);
	transform: translateY(-50%);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.ocwi-carousel__btn svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ocwi-carousel__btn:hover {
	background: var(--ocwi-glass-hi);
}

.ocwi-carousel__btn--prev {
	left: 0.6rem;
}

.ocwi-carousel__btn--next {
	right: 0.6rem;
}

.ocwi-carousel:hover .ocwi-carousel__btn,
.ocwi-carousel:focus-within .ocwi-carousel__btn {
	opacity: 1;
}

@media (hover: none) {
	.ocwi-carousel__btn {
		opacity: 1;
		width: 32px;
		height: 32px;
	}
}

.ocwi-carousel__count {
	position: absolute;
	right: 0.6rem;
	bottom: 0.6rem;
	padding: 0.15rem 0.55rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: #fff;
	background: var(--ocwi-glass);
	border: 1px solid var(--ocwi-glass-edge);
	border-radius: 999px;
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
	backdrop-filter: blur(10px) saturate(1.4);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.ocwi-badge {
	position: absolute;
	top: 0.7rem;
	left: 0.7rem;
	z-index: 3;
	padding: 0.25rem 0.65rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--ocwi-ink);
	background: var(--ocwi-pending);
	border-radius: 999px;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.ocwi-carousel__track {
		scroll-behavior: smooth;
	}
}

/* ---------- List view (default on desktop): one Simulcast-style row per car ---------- */

.ocwi-cols {
	display: none;
}

/*
 * List view. The layout follows the width the list actually gets (screen, zoom
 * and the filter sidebar all change it), not the screen width. The right column
 * holds the location on top and the pricing in the bottom-right corner.
 *   900 px and up:  Photo | Vehicle | Specs | Location over Pricing
 *   810 to 899 px:  Photo | Vehicle over Specs | Location over Pricing
 *   under 810 px:   the photo across the top, the details below it
 * Under 900 px of screen the list shows the phone cards instead.
 */
.ocwi-results {
	container: ocwi-results / inline-size;
}

@media (min-width: 900px) {
	.ocwi-directory.is-list .ocwi-cols,
	.ocwi-directory.is-list .ocwi-card {
		--ocwi-photo: clamp(240px, 30cqi, 380px);
		display: grid;
		grid-template-columns: var(--ocwi-photo) minmax(0, 1fr);
		gap: 20px;
	}

	.ocwi-directory.is-list .ocwi-cols {
		grid-template-columns: var(--ocwi-photo) minmax(172px, 1.15fr) minmax(130px, 1fr) 240px;
		margin-bottom: 0.6rem;
		padding: 0.7rem 12px;
		font-size: 0.6875rem;
		font-weight: 700;
		letter-spacing: 0.07em;
		text-transform: uppercase;
		color: #fff;
		background: var(--ocwi-ink);
		border-radius: 12px;
	}

	/* "Location" heads the right column; the pricing sits under the city there. */
	.ocwi-directory.is-list .ocwi-cols span:nth-child(5) {
		display: none;
	}

	.ocwi-directory.is-list .ocwi-grid {
		grid-template-columns: 1fr;
		gap: 0.6rem;
	}

	.ocwi-directory.is-list .ocwi-card {
		padding: 12px;
		align-items: stretch;
	}

	.ocwi-directory.is-list .ocwi-card:hover {
		transform: none;
	}

	/* Photo: one big photo with arrows, filling the row's height beside the details.
	   Every row the same height: the photos sit in a box pinned to the frame (a tall
	   phone photo can no longer stretch its row), and the frame is at least as tall
	   as the details usually are at this width (taller when the list is narrower). */
	.ocwi-directory.is-list .ocwi-card__media {
		display: flex;
		flex-direction: column;
	}

	.ocwi-directory.is-list .ocwi-carousel {
		flex: 1 0 auto;
		width: 100%;
		min-height: max(calc(var(--ocwi-photo) * 0.75), calc(555px - 30cqi));
		aspect-ratio: auto;
		border-radius: 12px;
		overflow: hidden;
	}

	.ocwi-directory.is-list .ocwi-carousel__track {
		position: absolute;
		inset: 0;
		height: auto;
	}

	.ocwi-directory.is-list .ocwi-carousel__btn {
		width: 30px;
		height: 30px;
		opacity: 1;
	}

	.ocwi-directory.is-list .ocwi-carousel__btn--prev { left: 6px; }
	.ocwi-directory.is-list .ocwi-carousel__btn--next { right: 6px; }

	.ocwi-directory.is-list .ocwi-carousel__count {
		right: auto;
		left: 6px;
		bottom: 6px;
	}

	.ocwi-directory.is-list .ocwi-badge {
		display: none;
	}

	.ocwi-directory.is-list .ocwi-allphotos {
		position: absolute;
		z-index: 3;
		top: 6px;
		right: 6px;
		display: block;
		padding: 0.25rem 0.6rem;
		font: inherit;
		font-size: 0.6875rem;
		font-weight: 700;
		color: #fff;
		background: var(--ocwi-glass);
		border: 1px solid var(--ocwi-glass-edge);
		border-radius: 999px;
		box-shadow: 0 1px 4px rgb(0 0 0 / 0.2);
		-webkit-backdrop-filter: blur(10px) saturate(1.4);
		backdrop-filter: blur(10px) saturate(1.4);
		cursor: pointer;
	}

	.ocwi-directory.is-list .ocwi-allphotos:hover {
		color: #fff;
		background: var(--ocwi-glass-hi);
	}

	/* Vehicle | Specs | Location, with Pricing under the location in the bottom-right
	   corner (the minimums keep a full VIN and the prices on one line). */
	.ocwi-directory.is-list .ocwi-card__body {
		display: grid;
		grid-template-columns: minmax(172px, 1.15fr) minmax(130px, 1fr) 240px;
		grid-template-areas:
			"main specs where"
			"main specs price";
		grid-template-rows: auto 1fr;
		gap: 0.9rem 20px;
		padding: 2px 0 0;
	}

	.ocwi-directory.is-list .ocwi-card__price {
		align-self: end;
	}

	.ocwi-directory.is-list .ocwi-card__main { grid-area: main; min-width: 0; }
	.ocwi-directory.is-list .ocwi-card__specs { grid-area: specs; min-width: 0; align-content: start; }
	.ocwi-directory.is-list .ocwi-card__where { grid-area: where; }
	.ocwi-directory.is-list .ocwi-card__price { grid-area: price; min-width: 0; }

	.ocwi-directory.is-list .ocwi-card__mi {
		display: none;
	}

	.ocwi-directory.is-list .ocwi-card__specs {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0.4rem 0.8rem;
		margin: 0.15rem 0 0;
		font-size: 0.84rem;
	}

	.ocwi-directory.is-list .ocwi-card__specs dt {
		color: var(--ocwi-muted);
	}

	.ocwi-directory.is-list .ocwi-card__specs dd {
		margin: 0;
		font-weight: 600;
		font-variant-numeric: tabular-nums;
	}

	.ocwi-directory.is-list .ocwi-card__where {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.3rem;
		min-width: 0;
	}

	/* The city starts under the "Location" heading; the pin hangs in the gap to its left.
	   Long names wrap inside the column instead of running into the price. */
	.ocwi-directory.is-list .ocwi-card__loc {
		position: relative;
		display: block;
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	.ocwi-directory.is-list .ocwi-card__loc svg {
		position: absolute;
		top: 0.2em;
		left: -19px;
	}

	.ocwi-directory.is-list .ocwi-card__title-status {
		display: block;
		margin: 0;
		font-size: 0.78rem;
		color: var(--ocwi-muted);
	}

	.ocwi-directory.is-list .ocwi-carfax {
		position: relative;
		z-index: 2;
		display: inline-block;
		margin-top: 0.35rem;
		padding: 0.3rem 0.6rem;
		font-size: 0.75rem;
		font-weight: 700;
		color: var(--ocwi-ink);
		text-decoration: none;
		border: 1px solid var(--ocwi-rule);
		border-radius: 8px;
	}

	.ocwi-directory.is-list .ocwi-carfax:hover {
		border-color: var(--ocwi-ink);
	}

	/* Pricing: MMR line, then our price, then "under MMR", then buttons. */
	.ocwi-directory.is-list .ocwi-card__price {
		margin: 0;
	}

	.ocwi-directory.is-list .ocwi-prices {
		grid-template-columns: 1fr;
		justify-content: stretch;
		gap: 0.2rem;
	}

	.ocwi-directory.is-list .ocwi-prices > div {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: 0.5rem;
	}

	.ocwi-directory.is-list .ocwi-prices__mmr {
		order: -1;
		padding-bottom: 0.35rem;
		border-bottom: 1px solid var(--ocwi-rule);
	}

	.ocwi-directory.is-list .ocwi-prices__mmr strong {
		font-size: 0.9rem;
	}

	.ocwi-directory.is-list .ocwi-prices__ours strong {
		font-size: 1.6rem;
	}

	.ocwi-directory.is-list .ocwi-prices__under,
	.ocwi-directory.is-list .ocwi-prices__saved {
		justify-self: end;
	}

	.ocwi-directory.is-list .ocwi-card__acts {
		position: relative;
		z-index: 2;
		display: flex;
		justify-content: flex-end;
		gap: 0.4rem;
		margin-top: 0.55rem;
	}
}

@media (min-width: 900px) {
	/* Specs move under the vehicle; the right column stays Location over Pricing. */
	@container ocwi-results (max-width: 899px) {
		.ocwi-directory.is-list .ocwi-cols,
		.ocwi-directory.is-list .ocwi-card {
			--ocwi-photo: clamp(240px, 34cqi, 340px);
		}

		/* Specs sit under the vehicle here, so the details are taller: rows match at this height. */
		.ocwi-directory.is-list .ocwi-carousel {
			min-height: max(calc(var(--ocwi-photo) * 0.75), 23.5rem);
		}

		.ocwi-directory.is-list .ocwi-cols {
			grid-template-columns: var(--ocwi-photo) minmax(0, 1fr) 240px;
		}

		.ocwi-directory.is-list .ocwi-cols span:nth-child(3) {
			display: none;
		}

		.ocwi-directory.is-list .ocwi-card__body {
			grid-template-columns: minmax(172px, 1fr) 240px;
			grid-template-areas:
				"main where"
				"specs price";
			grid-template-rows: auto 1fr;
		}
	}

	/* Too narrow for columns: the photo across the top, the details under it. */
	@container ocwi-results (max-width: 809px) {
		.ocwi-directory.is-list .ocwi-cols {
			display: none;
		}

		.ocwi-directory.is-list .ocwi-card {
			grid-template-columns: minmax(0, 1fr);
		}

		.ocwi-directory.is-list .ocwi-carousel {
			flex: none;
			min-height: 0;
			aspect-ratio: 16 / 10;
			max-height: 440px;
		}

		.ocwi-directory.is-list .ocwi-card__body {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			grid-template-areas:
				"main specs"
				"main where"
				"price price";
			grid-template-rows: auto 1fr auto;
			padding: 0 4px 2px;
		}

		.ocwi-directory.is-list .ocwi-card__price {
			padding-top: 0.7rem;
			border-top: 1px solid var(--ocwi-rule);
		}

		/* No column heading here, so the pin goes back in line with the city. */
		.ocwi-directory.is-list .ocwi-card__loc {
			display: flex;
		}

		.ocwi-directory.is-list .ocwi-card__loc svg {
			position: static;
		}
	}

	@container ocwi-results (max-width: 519px) {
		.ocwi-directory.is-list .ocwi-card__body {
			grid-template-columns: minmax(0, 1fr);
			grid-template-areas: "main" "specs" "where" "price";
		}
	}
}

.ocwi-act {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 0.95rem;
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
	border-radius: 999px;
	transition: background-color 0.15s ease;
}

.ocwi-act--dark {
	color: #fff;
	background: var(--ocwi-ink);
}

.ocwi-act--dark:hover {
	color: #fff;
	background: var(--ocwi-ink-2);
}

/* Call on each row: outlined, so a page of cars is not a column of solid buttons. */
.ocwi-act--outline {
	color: var(--ocwi-ink);
	background: #fff;
	box-shadow: inset 0 0 0 1.5px var(--ocwi-ink);
}

.ocwi-act--outline:hover {
	color: #fff;
	background: var(--ocwi-ink);
}

/* ---------- All photos viewer ---------- */

.ocwi-no-scroll {
	overflow: hidden;
}

.ocwi-viewer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	grid-template-rows: auto minmax(0, 1fr) auto;
	gap: 0.75rem;
	padding: 1.1rem clamp(0.75rem, 3vw, 2rem) 1.25rem;
	color: #fff;
	background: rgb(12 13 15 / 0.94);
	font-family: var(--wp--preset--font-family--inter, system-ui, sans-serif);
}

.ocwi-viewer.is-open {
	display: grid;
}

.ocwi-viewer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.ocwi-viewer__title {
	margin: 0;
	font-weight: 700;
}

.ocwi-viewer__title span {
	margin-left: 0.6rem;
	font-weight: 500;
	color: #b8bcc3;
}

.ocwi-viewer__x {
	flex: none;
	width: 42px;
	height: 42px;
	font-size: 1rem;
	font-weight: 800;
	color: var(--wp--preset--color--ink, #111);
	background: #fff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.ocwi-viewer__stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 0;
}

.ocwi-viewer__stage img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 14px;
	object-fit: contain;
}

.ocwi-viewer__nav {
	position: absolute;
	top: 50%;
	z-index: 1;
	width: 48px;
	height: 48px;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--wp--preset--color--ink, #111);
	background: #fff;
	border: 0;
	border-radius: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}

.ocwi-viewer__nav[data-d="-1"] { left: 0; }
.ocwi-viewer__nav[data-d="1"] { right: 0; }

.ocwi-viewer__strip {
	display: flex;
	gap: 8px;
	justify-content: safe center;
	overflow-x: auto;
	padding: 2px;
}

.ocwi-viewer__strip button {
	flex: none;
	width: 110px;
	padding: 0;
	aspect-ratio: 4 / 3;
	background: none;
	border: 0;
	border-radius: 8px;
	overflow: hidden;
	opacity: 0.55;
	cursor: pointer;
}

.ocwi-viewer__strip button[aria-current="true"] {
	opacity: 1;
	outline: 2px solid #fff;
}

.ocwi-viewer__strip img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Hero: photos that change, headline, search ---------- */

.ocwi-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(340px, 38vw, 470px);
	margin-top: var(--wp--preset--spacing--40, 1.5rem);
	padding: 0;
	overflow: hidden;
	color: #fff;
	background: var(--ocwi-ink);
	border-radius: 24px;
}

.ocwi-hero--plain {
	background:
		radial-gradient(110% 140% at 100% 0%, rgb(255 255 255 / 0.1) 0%, rgb(255 255 255 / 0) 55%),
		var(--ocwi-ink);
}

/*
 * Cinematic look: a film grade (a little more contrast and colour, slightly
 * darker), a slow push-in while a photo shows, a vignette, and fine grain.
 */
.ocwi-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;
	opacity: 0;
	filter: contrast(1.08) saturate(1.12) brightness(0.9);
	transform: scale(1);
	transition: opacity 1.2s ease, transform 9s cubic-bezier(0.2, 0, 0.3, 1);
}

.ocwi-hero__slide.is-on {
	opacity: 1;
	transform: scale(1.08);
}

/* The first photo is shown on load; start it at full size so it pushes in too. */
@starting-style {
	.ocwi-hero__slide.is-on {
		transform: scale(1);
	}
}

/* Fine film grain over the photo. */
.ocwi-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: 0.08;
	mix-blend-mode: overlay;
	pointer-events: none;
}

/* Centre shade for the text, darker top and bottom, and a vignette at the edges. */
.ocwi-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(70% 60% at 50% 55%, rgb(10 10 12 / 0.6) 0%, rgb(10 10 12 / 0.25) 70%, rgb(10 10 12 / 0) 100%),
		linear-gradient(180deg, rgb(10 10 12 / 0.45) 0%, rgb(10 10 12 / 0) 24%, rgb(10 10 12 / 0) 62%, rgb(10 10 12 / 0.7) 100%),
		radial-gradient(130% 110% at 60% 45%, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / 0.5) 100%);
	pointer-events: none;
}

/* Label, headline, search and button centred, one under the other. */
.ocwi-hero__in {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100%, 900px);
	margin-inline: auto;
	padding: clamp(1.5rem, 4vw, 3.4rem) 1.25rem;
	text-align: center;
}

.ocwi-hero__eyebrow {
	display: inline-block;
	margin: 0;
	padding: 0.35rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: rgb(255 255 255 / 0.14);
	border: 1px solid rgb(255 255 255 / 0.28);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-radius: 999px;
}

/* The size follows the screen on phones, so a short headline (30 characters
   or fewer) stays on one line; a longer one wraps instead of running off. */
.ocwi-hero h1 {
	margin: 0.9rem 0 0.6rem;
	font-size: clamp(1.5rem, 7.4vw, 3.6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: #fff;
	text-wrap: balance;
}

.ocwi-hero h1.ocwi-hero__one-line {
	white-space: nowrap;
}

.ocwi-hero__sub {
	margin: 0 0 1.5rem;
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	color: #e6e7ea;
}

.ocwi-hero .ocwi-search {
	box-shadow: 0 10px 30px rgb(0 0 0 / 0.3);
}

.ocwi-hero .ocwi-search__go {
	background: var(--ocwi-ink);
}

.ocwi-hero .ocwi-search__go:hover {
	background: var(--ocwi-ink-2);
}

/* Wide enough for the whole hint ("…make or model"). */
.ocwi-hero .ocwi-hero__search {
	width: min(760px, calc(100vw - 3rem));
	max-width: none;
	margin-inline: auto;
}

/* 25% larger than before 0.12.20 (client request); phones keep the old size below. */
.ocwi-hero__btn {
	display: inline-block;
	max-width: 100%;
	margin-top: 1.6rem;
	padding: 1.5rem 3.375rem;
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
	background: rgb(255 255 255 / 0.08);
	border: 1.5px solid rgb(255 255 255 / 0.85);
	border-radius: 999px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ocwi-hero__btn:hover {
	color: var(--ocwi-ink);
	background: #fff;
}

.ocwi-hero__btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* Phones: the box fills the hero; the script swaps in a shorter hint. */
@media (max-width: 700px) {
	.ocwi-hero .ocwi-hero__search {
		width: 100%;
	}

	/* The larger button would not fit "See All Inventory" on a phone. */
	.ocwi-hero__btn {
		margin-top: 1.4rem;
		padding: 1.2rem 2.4rem;
		font-size: 1.5rem;
	}
}

/* Phones: no magnifier (the button says Search), so the hint has room. */
@media (max-width: 600px) {
	.ocwi-search .ocwi-search__icon {
		display: none;
	}

	.ocwi-search input[type="search"] {
		padding-left: 0.9rem;
	}

	.ocwi-search input[type="search"]::placeholder {
		font-size: 0.875rem;
	}
}

.ocwi-hero__dots {
	position: absolute;
	right: 22px;
	bottom: 20px;
	z-index: 2;
	display: flex;
	gap: 6px;
}

.ocwi-hero__dots i {
	width: 9px;
	height: 9px;
	background: rgb(255 255 255 / 0.5);
	border-radius: 999px;
	transition: width 0.3s ease, background-color 0.3s ease;
}

.ocwi-hero__dots i.is-on {
	width: 24px;
	background: #fff;
}

@media (max-width: 600px) {
	.ocwi-hero {
		border-radius: 18px;
	}

	.ocwi-hero::after {
		background:
			linear-gradient(180deg, rgb(10 10 12 / 0.55) 0%, rgb(10 10 12 / 0.8) 100%),
			radial-gradient(140% 100% at 50% 40%, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.45) 100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ocwi-hero__slide,
	.ocwi-hero__slide.is-on {
		transform: none;
		transition: none;
	}
}

.ocwi-empty {
	padding: 2.5rem 1.5rem;
	text-align: center;
	color: var(--ocwi-muted);
	background: var(--ocwi-card);
	border: 1px solid var(--ocwi-rule);
	border-radius: var(--ocwi-radius);
}

.ocwi-more {
	display: flex;
	justify-content: center;
	margin-top: 1.75rem;
}

/* While the server answers a search, filter or "Show more". */
.ocwi-directory .ocwi-grid,
.ocwi-directory .ocwi-count {
	transition: opacity 0.15s ease;
}

.ocwi-directory.is-loading .ocwi-grid,
.ocwi-directory.is-loading .ocwi-count {
	opacity: 0.55;
}

.ocwi-directory.is-loading [data-ocwi-more] {
	cursor: progress;
}

/* ---------- Buttons ---------- */

.ocwi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 50px;
	padding: 0.75rem 1.5rem;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	background: var(--ocwi-ink);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.ocwi-btn:hover {
	color: #fff;
	background: var(--ocwi-ink-2);
}

.ocwi-btn--ghost {
	color: var(--ocwi-ink);
	background: #fff;
	box-shadow: inset 0 0 0 1.5px var(--ocwi-ink);
}

.ocwi-btn--ghost:hover {
	color: #fff;
	background: var(--ocwi-ink);
}

.ocwi-copy,
.ocwi-share {
	min-height: 36px;
	padding: 0.25rem 0.9rem;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ocwi-ink);
	background: var(--ocwi-soft);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ocwi-copy:hover,
.ocwi-share:hover {
	background: #e4e6ea;
}

.ocwi-share {
	width: 100%;
	min-height: 46px;
	margin-top: 0.6rem;
	font-size: 0.9375rem;
}

/* Sale terms in one line under the buttons; shows once Terms is published. */
.ocwi-terms-line {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--ocwi-muted);
}

.ocwi-terms-line a {
	color: var(--ocwi-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Vehicle page ---------- */

.ocwi-vehicle {
	padding-top: var(--wp--preset--spacing--40, 1.5rem);
}

.ocwi-back {
	margin: 0 0 1rem;
	font-weight: 600;
}

.ocwi-back a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 1rem;
	color: var(--ocwi-ink);
	text-decoration: none;
	background: #fff;
	border-radius: 999px;
	box-shadow: var(--ocwi-shadow);
}

.ocwi-sold {
	margin: 0 0 1.25rem;
	padding: 0.9rem 1.1rem;
	font-weight: 600;
	color: #fff;
	background: var(--ocwi-ink);
	border-radius: var(--ocwi-radius-sm);
}

.ocwi-sold a {
	color: #ff8a8d;
}

.ocwi-vehicle__grid {
	display: grid;
	gap: 1.5rem;
	align-items: start;
}

@media (min-width: 900px) {
	.ocwi-vehicle__grid {
		grid-template-columns: minmax(0, 1.6fr) minmax(330px, 1fr);
		gap: 2rem;
	}

	.ocwi-summary {
		position: sticky;
		top: calc(24px + var(--ocwi-staff-shift, 0px));
	}
}

.ocwi-gallery__main {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: #e9eaed;
	border-radius: var(--ocwi-radius);
	overflow: hidden;
	box-shadow: var(--ocwi-shadow);
}

/* The photos sit side by side and slide (swipe, arrows, thumbnails), like the inventory cards. */
.ocwi-gallery__track {
	display: flex;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.ocwi-gallery__track::-webkit-scrollbar {
	display: none;
}

.ocwi-gallery__main img {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
	.ocwi-gallery__track {
		scroll-behavior: auto;
	}
}

.ocwi-gallery__main--empty span {
	display: grid;
	place-items: center;
	height: 100%;
	font-weight: 600;
	color: var(--ocwi-muted);
}

.ocwi-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.ocwi-gallery__thumbs button {
	display: block;
	width: 100%;
	padding: 0;
	aspect-ratio: 4 / 3;
	background: none;
	border: 0;
	border-radius: var(--ocwi-radius-sm);
	overflow: hidden;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.15s ease;
}

.ocwi-gallery__thumbs button:hover {
	opacity: 1;
}

.ocwi-gallery__thumbs button[aria-current="true"] {
	opacity: 1;
	box-shadow: 0 0 0 2.5px var(--ocwi-ink);
}

.ocwi-gallery__thumbs img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ocwi-summary {
	padding: 1.5rem;
	background: #fff;
	border-radius: var(--ocwi-radius);
	box-shadow: var(--ocwi-shadow);
}

.ocwi-summary__title {
	margin: 0 0 1.1rem;
	font-size: clamp(1.6rem, 2.6vw, 2.05rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.03em;
}

.ocwi-summary__year {
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--ocwi-muted);
}

.ocwi-summary__trim {
	font-weight: 500;
	color: var(--ocwi-muted);
}

.ocwi-prices--page {
	margin-bottom: 1.1rem;
	padding: 1rem 1.1rem;
	background: var(--ocwi-soft);
	border-radius: var(--ocwi-radius-sm);
}

.ocwi-prices--page .ocwi-prices__mmr strong {
	font-size: 1.2rem;
}

.ocwi-prices--page .ocwi-prices__ours strong {
	font-size: 2.1rem;
}

.ocwi-keyfacts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0 0 1rem;
}

.ocwi-keyfacts > div {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--ocwi-rule);
}

.ocwi-keyfacts__wide {
	grid-column: 1 / -1;
}

.ocwi-keyfacts dt,
.ocwi-specs dt {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--ocwi-muted);
}

.ocwi-keyfacts dd {
	margin: 0.1rem 0 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ocwi-keyfacts__vin dd {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--ocwi-mono);
	letter-spacing: 0.04em;
	overflow-wrap: anywhere;
}

.ocwi-keyfacts__vin .ocwi-copy {
	font-family: var(--wp--preset--font-family--inter, inherit);
	letter-spacing: 0;
}

.ocwi-summary__desc {
	margin: 0 0 1rem;
	padding: 0.75rem 0.9rem;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	background: var(--ocwi-soft);
	border-left: 3px solid var(--ocwi-ink);
	border-radius: 6px;
}

.ocwi-actions {
	display: grid;
	gap: 0.6rem;
}

/* Details, full width under the photos and prices. */
.ocwi-vehicle__lower {
	display: grid;
	gap: 1.5rem;
	margin-top: 2rem;
}

.ocwi-deal,
.ocwi-specs {
	padding: 1.4rem 1.5rem;
	background: #fff;
	border-radius: var(--ocwi-radius);
	box-shadow: var(--ocwi-shadow);
}

.ocwi-deal__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.9rem;
}

.ocwi-deal h2,
.ocwi-specs h2 {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.ocwi-specs h2 {
	margin-bottom: 0.6rem;
}

.ocwi-deal .ocwi-copy {
	color: #fff;
	background: var(--ocwi-ink);
}

.ocwi-deal .ocwi-copy:hover {
	background: var(--ocwi-ink-2);
}

.ocwi-deal__text {
	margin: 0;
	padding: 1rem 1.1rem;
	font-family: var(--ocwi-mono);
	font-size: 0.875rem;
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	color: #e8e9eb;
	background: var(--ocwi-ink);
	border: 0;
	border-radius: var(--ocwi-radius-sm);
}

.ocwi-specs dl {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
	gap: 0 1.5rem;
	margin: 0;
}

.ocwi-specs dl > div {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--ocwi-rule);
}

.ocwi-specs dd {
	margin: 0.1rem 0 0;
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.ocwi-card,
	.ocwi-carousel__btn {
		transition: none;
	}

	.ocwi-card:hover,
	.ocwi-card:focus-within {
		transform: none;
	}
}

/* ---------- Vehicle page gallery: arrows, count, All photos ---------- */

.ocwi-gallery__main img {
	cursor: zoom-in;
}

.ocwi-gallery__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: #fff;
	background: var(--ocwi-glass);
	border: 1px solid var(--ocwi-glass-edge);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgb(11 12 14 / 0.25);
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
	backdrop-filter: blur(10px) saturate(1.4);
	transform: translateY(-50%);
	cursor: pointer;
}

.ocwi-gallery__nav:hover {
	background: var(--ocwi-glass-hi);
}

.ocwi-gallery__nav svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ocwi-gallery__nav--prev {
	left: 12px;
}

.ocwi-gallery__nav--next {
	right: 12px;
}

.ocwi-gallery__count {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 2;
	padding: 0.2rem 0.65rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #fff;
	background: var(--ocwi-glass);
	border: 1px solid var(--ocwi-glass-edge);
	border-radius: 999px;
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
	backdrop-filter: blur(10px) saturate(1.4);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.ocwi-gallery__all {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	padding: 0.4rem 0.85rem;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	color: #fff;
	background: var(--ocwi-glass);
	border: 1px solid var(--ocwi-glass-edge);
	border-radius: 999px;
	box-shadow: 0 2px 8px rgb(11 12 14 / 0.25);
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
	backdrop-filter: blur(10px) saturate(1.4);
	cursor: pointer;
}

.ocwi-gallery__all:hover {
	color: #fff;
	background: var(--ocwi-glass-hi);
}

.ocwi-carfax-btn {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 0.85rem;
	font-family: var(--wp--preset--font-family--inter, inherit);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--ocwi-ink);
	text-decoration: none;
	border: 1px solid var(--ocwi-rule);
	border-radius: 999px;
}

.ocwi-carfax-btn:hover {
	color: #fff;
	background: var(--ocwi-ink);
	border-color: var(--ocwi-ink);
}

/* VINs: site font, equal-width numbers, a little spacing so long codes stay easy to read. */
.ocwi-card__ids code,
.ocwi-keyfacts__vin dd span,
.ocwi-deal__text {
	font-variant-numeric: tabular-nums;
}

.ocwi-card__ids code {
	font-weight: 500;
	letter-spacing: 0.04em;
}

.ocwi-keyfacts__vin dd {
	font-weight: 600;
	letter-spacing: 0.05em;
}