/**
 * ILSA Listings - base styles.
 * Branded for SBMA Groep:
 *   Primary (maroon):    #4E1619
 *   Secondary (cream):   #FDE2BF — used for text/icons on the maroon accent
 *   Primary (dark text): #313233
 *   Dark (deep navy/black): #12181F
 *   Secondary (off-white bg): #F6F5F3
 *   Grey (muted teal-grey): #9BABB0
 *   Font: Outfit (Google Font)
 *
 * Scoped under .ilsa-* classes and namespaced selectors to avoid
 * clashing with theme/Elementor styles. Uses CSS custom properties so
 * these can be tweaked in one place if the site's branding changes.
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

.ilsa-listings-wrap,
.ilsa-vehicle-detail,
.ilsa-filters-form {
	--ilsa-accent: #4E1619;
	--ilsa-on-accent: #FDE2BF; /* SBMA secondary — text/icons on the maroon accent */
	--ilsa-accent-hover: #6B1F23; /* slightly darker than accent, since the
	                                  site's own "Accent Hover" token is
	                                  identical to Accent - hover state is
	                                  likely handled via opacity/darken in
	                                  the theme's own CSS, so this is a
	                                  reasonable darker variant for our
	                                  buttons rather than a literal match */
	--ilsa-text: #313233;
	--ilsa-dark: #12181F;
	--ilsa-muted: #9BABB0;
	--ilsa-border: #e5e5e5;
	--ilsa-bg-card: #ffffff;
	--ilsa-bg-section: #F6F5F3;
	--ilsa-radius: 12px;
	font-family: inherit;
	box-sizing: border-box;
	color: var(--ilsa-text);
}

.ilsa-listings-wrap *,
.ilsa-vehicle-detail *,
.ilsa-filters-form * {
	box-sizing: inherit;
	font-family: inherit;
}

/* ---------- Results count + errors ---------- */

.ilsa-results-count {
	font-size: 0.95rem;
	color: var(--ilsa-muted);
	margin: 0 0 1rem;
}

.ilsa-error,
.ilsa-no-results {
	padding: 1.5rem;
	text-align: center;
	color: var(--ilsa-muted);
	border: 1px dashed var(--ilsa-border);
	border-radius: var(--ilsa-radius);
}

.ilsa-error-debug {
	font-size: 0.8rem;
	color: #b3261e;
}

/* ---------- Grid + cards ---------- */

.ilsa-listings-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
}

.ilsa-vehicle-card {
	display: flex;
	flex-direction: column;
	background: var(--ilsa-bg-card);
	border-radius: var(--ilsa-radius);
	box-shadow: 0 2px 12px rgba(18, 24, 31, 0.07);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ilsa-vehicle-card:hover {
	box-shadow: 0 10px 28px rgba(18, 24, 31, 0.12);
	transform: translateY(-3px);
}

/* ---------- Orange variant: matches the homepage's solid-orange
   vehicle preview cards (image floats directly on orange background,
   white text, white pill button). Activate with
   [ilsa_listings card_style="orange"] ---------- */

.ilsa-vehicle-card--orange {
	background: var(--ilsa-accent);
}

.ilsa-vehicle-card--orange .ilsa-vehicle-card__image-link {
	background: transparent;
	aspect-ratio: 16 / 11;
	padding: 1rem 1rem 0;
}

.ilsa-vehicle-card--orange .ilsa-vehicle-card__image {
	object-fit: contain;
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18));
}

.ilsa-vehicle-card--orange .ilsa-vehicle-card__title a,
.ilsa-vehicle-card--orange .ilsa-vehicle-card__type,
.ilsa-vehicle-card--orange .ilsa-vehicle-card__meta,
.ilsa-vehicle-card--orange .ilsa-vehicle-card__price-amount {
	color: #fff;
}

.ilsa-vehicle-card--orange .ilsa-vehicle-card__title a:hover {
	color: var(--ilsa-on-accent);
}

.ilsa-vehicle-card--orange .ilsa-vehicle-card__price-label {
	color: rgba(255, 255, 255, 0.75);
}

.ilsa-vehicle-card--orange .ilsa-vehicle-card__price {
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.ilsa-vehicle-card--orange .ilsa-vehicle-card__cta {
	background: #fff;
	color: var(--ilsa-text);
}

.ilsa-vehicle-card--orange .ilsa-vehicle-card__cta:hover {
	background: var(--ilsa-bg-section);
}

.ilsa-vehicle-card__image-link {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ilsa-bg-section);
}

.ilsa-vehicle-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ilsa-vehicle-card__image--placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #f0f0ee 25%, #f6f5f3 25%, #f6f5f3 50%, #f0f0ee 50%, #f0f0ee 75%, #f6f5f3 75%, #f6f5f3 100%);
	background-size: 24px 24px;
}

.ilsa-vehicle-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.25rem;
	flex: 1;
}

.ilsa-vehicle-card__title {
	margin: 0;
	font-size: 26px !important;
	font-weight: 600;
	line-height: 1.3;
}

.ilsa-vehicle-card__title a {
	color: var(--ilsa-text);
	text-decoration: none;
}

.ilsa-vehicle-card__title a:hover {
	color: var(--ilsa-accent);
}

.ilsa-vehicle-card__type {
	display: none !important;
}

/* Year + mileage meta row — hidden to keep cards compact.
   Remove display:none to show them again. */
.ilsa-vehicle-card__meta {
	display: none !important;
	list-style: none;
	gap: 0.75rem;
	padding: 0;
	margin: 0.25rem 0;
	font-size: 0.85rem;
	color: var(--ilsa-muted);
}

.ilsa-vehicle-card__meta li::before {
	content: "";
}

.ilsa-vehicle-card__price {
	margin-top: auto;
	padding-top: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.ilsa-vehicle-card__price-info {
	display: flex;
	flex-direction: column;
}

.ilsa-vehicle-card__price-amount {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ilsa-text);
}

.ilsa-vehicle-card__price-label {
	font-size: 0.7rem;
	color: var(--ilsa-muted);
}

.ilsa-vehicle-card__cta {
	display: inline-block;
	flex-shrink: 0;
	padding: 0.6rem 1.1rem;
	text-align: center;
	background: var(--ilsa-accent);
	color: var(--ilsa-on-accent);
	border-radius: 999px;
	text-decoration: none;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.ilsa-vehicle-card__cta:hover {
	background: var(--ilsa-accent-hover);
}

/* ---------- Detail icons (mileage, year) ---------- */

.ilsa-vehicle-card__details {
	list-style: none;
	padding: 0;
	margin: 0.5rem 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
}

.ilsa-vehicle-card__detail {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.85rem;
	color: var(--ilsa-muted);
}

.ilsa-detail-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--ilsa-muted);
}

/* ---------- Load more ---------- */

.ilsa-load-more-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin-top: 2.5rem;
}

.ilsa-load-more-count {
	margin: 0;
	font-size: 0.85rem;
	color: var(--ilsa-muted);
}

.ilsa-load-more-btn {
	padding: 0.75rem 2.5rem;
	background: var(--ilsa-accent);
	color: var(--ilsa-on-accent);
	border: none;
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: background 0.2s ease;
}

.ilsa-load-more-btn:hover {
	background: var(--ilsa-accent-hover);
}

.ilsa-load-more-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ---------- Filter bar ---------- */

.ilsa-filter-bar {
	background: #1e1e1e;
	border-radius: 14px;
	padding: 1.25rem 1.5rem 1.5rem;
	margin-bottom: 2rem;
}

.ilsa-filter-bar__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.ilsa-filter-bar__title {
	color: #fff;
	font-size: 1.1rem;
	font-weight: 600;
}

.ilsa-filter-bar__count {
	color: #fff;
	font-size: 0.85rem;
	opacity: 0.75;
}

.ilsa-filter-bar__form {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.ilsa-filter-bar__fields {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.65rem;
}

@media (max-width: 1100px) {
	.ilsa-filter-bar__fields {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 700px) {
	.ilsa-filter-bar__fields {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ilsa-filter-field {
	display: flex;
	flex-direction: column;
}

.ilsa-filter-field label {
	display: none; /* labels hidden — placeholder text acts as label */
}

.ilsa-filter-field select,
.ilsa-filter-field input {
	padding: 0.6rem 2rem 0.6rem 0.85rem;
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
	font-size: 0.85rem;
	color: #1a1a1a;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.7rem center;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ilsa-filter-field input {
	background-image: none;
	padding-right: 0.85rem;
}

.ilsa-filter-field select:focus,
.ilsa-filter-field input:focus {
	outline: none;
	border-color: var(--ilsa-accent);
}

.ilsa-filter-bar__clear-btn,
.ilsa-filter-bar__clear-btn:link,
.ilsa-filter-bar__clear-btn:visited {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0.6rem 1.5rem !important;
	background: #4E1619 !important;
	background-color: #4E1619 !important;
	color: #FDE2BF !important;
	border: none !important;
	border-radius: 8px !important;
	font-family: inherit !important;
	font-size: 0.85rem !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	align-self: end !important;
}

.ilsa-filter-bar__clear-btn:hover,
.ilsa-filter-bar__clear-btn:focus {
	background: #6B1F23 !important;
	background-color: #6B1F23 !important;
	color: #FDE2BF !important;
	text-decoration: none !important;
}

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

.ilsa-detail {
	max-width: 1100px;
	margin: 0 auto;
	padding: 1rem 0 3rem;
}

.ilsa-detail-back {
	display: inline-block;
	margin-bottom: 1rem;
	color: var(--ilsa-muted);
	text-decoration: none;
	font-size: 0.88rem;
}

.ilsa-detail-back:hover { color: var(--ilsa-accent); }

.ilsa-detail__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 1.25rem;
	line-height: 1.25;
}

/* Hero two-column */
.ilsa-detail__hero {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 1.5rem;
	margin-bottom: 1.75rem;
}

@media (max-width: 860px) {
	.ilsa-detail__hero { grid-template-columns: 1fr; }
}

.ilsa-detail__hero-image-wrap {
	position: relative;
	border-radius: var(--ilsa-radius);
	overflow: hidden;
	background: var(--ilsa-bg-section);
	aspect-ratio: 16/10;
}

.ilsa-detail__hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ilsa-detail__all-photos {
	position: absolute;
	bottom: 0.75rem;
	right: 0.75rem;
	padding: 0.4rem 0.9rem;
	background: rgba(0,0,0,0.6);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.8rem;
	cursor: pointer;
}

/* Hero panel */
.ilsa-detail__hero-panel {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.ilsa-detail__price-block {
	padding: 1.25rem;
	background: var(--ilsa-bg-section);
	border-radius: var(--ilsa-radius);
}

.ilsa-detail__price-main {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--ilsa-text);
}

.ilsa-detail__price-label {
	font-size: 0.8rem;
	color: var(--ilsa-muted);
	margin-top: 0.2rem;
}

.ilsa-detail__lead-form {
	padding: 1.25rem;
	background: var(--ilsa-bg-section);
	border-radius: var(--ilsa-radius);
	flex: 1;
}

.ilsa-detail__lead-form h3 {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.ilsa-detail__lead-placeholder {
	font-size: 0.85rem;
	color: var(--ilsa-muted);
	margin: 0 0 1rem;
}

.ilsa-detail__cta-btn {
	display: block;
	padding: 0.75rem 1rem;
	background: var(--ilsa-accent);
	color: var(--ilsa-on-accent) !important;
	border-radius: 8px;
	text-align: center;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ilsa-detail__cta-btn:hover { background: var(--ilsa-accent-hover); }

/* Key specs bar */
.ilsa-detail__specs-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0;
	padding: 1rem 0;
	border-top: 1px solid var(--ilsa-border);
	border-bottom: 1px solid var(--ilsa-border);
	margin-bottom: 2rem;
}

.ilsa-detail__spec-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 1 1 160px;
	padding: 0.5rem 1rem;
	border-right: 1px solid var(--ilsa-border);
}

.ilsa-detail__spec-item:last-child { border-right: none; }

.ilsa-detail__spec-icon svg {
	width: 22px;
	height: 22px;
	color: var(--ilsa-accent);
	flex-shrink: 0;
}

.ilsa-detail__spec-text {
	display: flex;
	flex-direction: column;
}

.ilsa-detail__spec-label {
	font-size: 0.72rem;
	color: var(--ilsa-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ilsa-detail__spec-value {
	font-size: 0.9rem;
	font-weight: 600;
}

/* Section headings */
.ilsa-detail__section {
	margin-bottom: 2rem;
}

.ilsa-detail__section-title {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--ilsa-accent);
	display: inline-block;
}

.ilsa-detail__subsection-title {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ilsa-muted);
	margin: 1rem 0 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Spec grid — two columns of key:value rows */
.ilsa-spec-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0 2rem;
	margin: 0;
}

.ilsa-spec-grid__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--ilsa-border);
	font-size: 0.88rem;
}

.ilsa-spec-grid__row dt { color: var(--ilsa-muted); }
.ilsa-spec-grid__row dd { margin: 0; font-weight: 500; text-align: right; }

/* Equipment columns */
.ilsa-detail__section--equipment .ilsa-feature-cols {
	columns: 3;
	column-gap: 2rem;
}

@media (max-width: 700px) {
	.ilsa-detail__section--equipment .ilsa-feature-cols { columns: 2; }
}

.ilsa-feature-cols {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ilsa-feature-cols li {
	font-size: 0.88rem;
	padding: 0.3rem 0 0.3rem 1.3rem;
	position: relative;
	break-inside: avoid;
}

.ilsa-feature-cols li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--ilsa-accent);
	font-weight: 700;
}

/* Tooltip */
.ilsa-tooltip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--ilsa-border);
	color: var(--ilsa-muted);
	font-size: 0.65rem;
	margin-left: 0.3rem;
	cursor: help;
}

/* Gallery grid */
.ilsa-detail__gallery { margin-bottom: 2rem; }

.ilsa-detail__gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
}

@media (max-width: 600px) {
	.ilsa-detail__gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

.ilsa-detail__gallery-thumb {
	display: block;
	aspect-ratio: 4/3;
	overflow: hidden;
	border-radius: 6px;
}

.ilsa-detail__gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease;
}

.ilsa-detail__gallery-thumb:hover img { transform: scale(1.04); }

/* Advertiser block */
.ilsa-detail__advertiser-block { margin-bottom: 2rem; }

.ilsa-detail__advertiser-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.75rem 1.5rem;
}

.ilsa-detail__adv-item {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.ilsa-detail__adv-label {
	font-size: 0.72rem;
	color: var(--ilsa-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ilsa-detail__adv-value {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--ilsa-text);
	text-decoration: none;
}

a.ilsa-detail__adv-value:hover { color: var(--ilsa-accent); }

/* ---------- Loading state ---------- */

.ilsa-listings-grid-container.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

/* ── Card: monthly price as primary, purchase price secondary ── */
.ilsa-vehicle-card__purchase-price {
	font-size: 12px;
	color: #888;
	display: block;
	margin-bottom: 2px;
}
.ilsa-vehicle-card__monthly {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 2px;
}
.ilsa-vehicle-card__monthly-amount {
	font-size: 20px;
	font-weight: 800;
	color: #1a1a1a;
}
.ilsa-vehicle-card__monthly-label {
	font-size: 12px;
	font-weight: 600;
	color: #555;
}
.ilsa-vehicle-card__monthly-note {
	font-size: 10px;
	color: #aaa;
	margin-bottom: 6px;
}
/* Hide old price-amount since we replaced it */
.ilsa-vehicle-card__price-amount { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   SBMA Groep — wide listing cards + slim filter bar
   Overrides the stacked-grid card styles above. Keep this block last.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-listings-wrap,
.ilsa-filters-form {
	--ilsa-card-ink: #2B2B2B;
	--ilsa-card-muted: #9A9A9A;
	--ilsa-card-line: #ECECEC;
}

/* One wide card per row */
.ilsa-listings-grid {
	grid-template-columns: 1fr;
	gap: 1.75rem;
}

.ilsa-vehicle-card--wide {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	min-height: 400px;
	background: #fff;
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
}

.ilsa-vehicle-card--wide:hover {
	box-shadow: 0 14px 40px rgba(78, 22, 25, 0.10);
	transform: none;
}

/* The image fills its half of the card edge to edge. aspect-ratio is
   deliberately NOT used here: combined with the grid's stretch it left
   white gaps above and below. The card's min-height sets the floor and
   the text column sets the ceiling. */
.ilsa-vehicle-card--wide .ilsa-vehicle-card__image-link {
	display: block;
	position: relative;
	height: 100%;
	min-height: 100%;
	aspect-ratio: auto;
	background: #F4F5F7;
	overflow: hidden;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.5s ease;
}

.ilsa-vehicle-card--wide:hover .ilsa-vehicle-card__image {
	transform: scale(1.03);
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__image--placeholder {
	position: absolute;
	inset: 0;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	padding: 3rem 3rem 3.25rem;
	justify-content: center;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__title {
	margin: 0;
	font-size: clamp(1.5rem, 2.1vw, 2rem) !important;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	line-height: 1.15;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__title a {
	color: var(--ilsa-card-ink);
	text-decoration: none;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__title a:hover {
	color: var(--ilsa-accent);
}

/* Spec grid — 3 across, matching the reference */
.ilsa-vehicle-card__specs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.4rem 1.5rem;
	margin: 0;
	padding: 0;
}

.ilsa-vehicle-card__spec dt {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.4rem;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ilsa-card-muted);
}

.ilsa-vehicle-card__spec-icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: var(--ilsa-accent);
}

.ilsa-vehicle-card__spec dd {
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
	color: var(--ilsa-card-ink);
	text-transform: uppercase;
}

/* CTAs */
.ilsa-vehicle-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
}

.ilsa-vehicle-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.95rem 1.6rem;
	border-radius: 2px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.ilsa-vehicle-card__btn--primary {
	background: var(--ilsa-accent);
	color: var(--ilsa-on-accent) !important;
	border: 1px solid var(--ilsa-accent);
}

.ilsa-vehicle-card__btn--primary:hover {
	background: var(--ilsa-accent-hover);
	border-color: var(--ilsa-accent-hover);
}

.ilsa-vehicle-card__btn--ghost {
	background: transparent;
	color: var(--ilsa-card-ink) !important;
	/* Longhand + !important: several themes (Elementor included) reset
	   border-bottom on anchors, which dropped the bottom edge only. */
	border-style: solid !important;
	border-width: 1px !important;
	border-color: #D8D8D8 !important;
	border-bottom-style: solid !important;
	border-bottom-width: 1px !important;
	box-sizing: border-box;
}

.ilsa-vehicle-card__btn--ghost:hover {
	border-color: var(--ilsa-accent) !important;
	color: var(--ilsa-accent) !important;
}

/* Make logo, bottom-right */
.ilsa-vehicle-card__brand {
	position: absolute;
	right: 3rem;
	bottom: 2rem;
	width: 34px;
	height: auto;
	opacity: 0.55;
}

/* ── Slim filter bar ─────────────────────────────────────────────────── */

.ilsa-filter-bar {
	background: transparent;
	border-radius: 0;
	padding: 0;
	margin-bottom: 3rem;
}

.ilsa-filter-bar__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.ilsa-filter-bar__title { display: none; }

.ilsa-filter-bar__count {
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ilsa-card-muted);
}

.ilsa-filter-bar__fields {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
}

.ilsa-filter-bar .ilsa-filter-field {
	flex: 0 1 240px;
	margin: 0;
}

.ilsa-filter-bar .ilsa-filter-field label { display: none; }

.ilsa-filter-bar .ilsa-filter-field select,
.ilsa-filter-bar .ilsa-filter-field input[type="text"] {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background: #fff;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234E1619' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	border: none;
	border-radius: 0;
	padding: 1.05rem 2.75rem 1.05rem 1.25rem;
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ilsa-card-ink);
	cursor: pointer;
}

.ilsa-filter-bar .ilsa-filter-field select:focus,
.ilsa-filter-bar .ilsa-filter-field input:focus {
	outline: 2px solid var(--ilsa-accent);
	outline-offset: -2px;
	border-color: transparent;
}

/* Reset is a plain text link, not a filled button */
.ilsa-filter-bar__clear-btn,
.ilsa-filter-bar__clear-btn:link,
.ilsa-filter-bar__clear-btn:visited {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--ilsa-card-ink) !important;
	padding: 0 0.5rem !important;
	border: none !important;
	border-radius: 0 !important;
	font-size: 0.78rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.06em !important;
	text-transform: none !important;
}

.ilsa-filter-bar__clear-btn:hover {
	color: var(--ilsa-accent) !important;
	text-decoration: underline !important;
}

/* Secondary filters, collapsed by default */
.ilsa-filter-bar__more {
	width: 100%;
	display: none;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-top: 1.25rem;
}

.ilsa-filter-bar__more.is-open { display: flex; }

.ilsa-filter-bar__more-toggle {
	background: none;
	border: none;
	padding: 0 0.5rem;
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--ilsa-card-muted);
	cursor: pointer;
}

.ilsa-filter-bar__more-toggle:hover { color: var(--ilsa-accent); }

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 980px) {
	.ilsa-vehicle-card--wide .ilsa-vehicle-card__body { padding: 2rem; gap: 1.25rem; }
	.ilsa-vehicle-card__brand { right: 2rem; bottom: 1.25rem; }
}

@media (max-width: 860px) {
	.ilsa-vehicle-card--wide { grid-template-columns: 1fr; }
	.ilsa-vehicle-card--wide .ilsa-vehicle-card__image-link { aspect-ratio: 16 / 10; }
	.ilsa-vehicle-card__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ilsa-filter-bar .ilsa-filter-field { flex: 1 1 100%; }
}

@media (max-width: 480px) {
	.ilsa-vehicle-card--wide .ilsa-vehicle-card__body { padding: 1.5rem; }
	.ilsa-vehicle-card__actions { flex-direction: column; }
	.ilsa-vehicle-card__btn { width: 100%; }
	.ilsa-vehicle-card__brand { display: none; }
}

/* Trim line under the model name, e.g. "6.0 W12 First Edition" */
.ilsa-vehicle-card__trim {
	margin: -1rem 0 0;
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--ilsa-card-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — layout hardening (v1.18)
   The theme was injecting padding onto the card and filling our inline
   SVGs, so these rules reset aggressively. Keep this block last.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Card must have zero padding — the theme was adding ~30px, which is
      what pushed the image away from the card edges. */
.ilsa-listings-grid .ilsa-vehicle-card--wide,
.ilsa-listings-grid article.ilsa-vehicle-card--wide {
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	min-height: 0 !important;
}

.ilsa-vehicle-card--wide > .ilsa-vehicle-card__image-link {
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	line-height: 0;
	/* Height floor lives here, not on the card, so the image can never be
	   letterboxed by white space above or below it. */
	min-height: 300px;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__image {
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	max-width: none !important;
	max-height: none !important;
}

/* 2. Icons: theme sets a fill on svg, which turned the outlines into
      solid blobs. Force stroke-only rendering. */
.ilsa-vehicle-card__spec-icon,
.ilsa-vehicle-card__spec-icon * {
	fill: none !important;
	stroke: currentColor !important;
}

.ilsa-vehicle-card__spec-icon {
	color: var(--ilsa-accent) !important;
	opacity: 0.85;
}

/* 3. Tighter, shorter card. */
.ilsa-vehicle-card--wide {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__body {
	gap: 1.15rem !important;
	padding: 2.25rem 2.5rem !important;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__title {
	font-size: clamp(1.25rem, 1.5vw, 1.6rem) !important;
	letter-spacing: 0.02em;
}

.ilsa-vehicle-card__trim {
	margin: -0.7rem 0 0 !important;
	font-size: 0.85rem;
}

.ilsa-vehicle-card__specs {
	gap: 1rem 1.25rem !important;
	padding-top: 0.25rem;
	border-top: 1px solid var(--ilsa-card-line);
	margin-top: 0.25rem !important;
}

.ilsa-vehicle-card__specs .ilsa-vehicle-card__spec dd {
	font-size: 0.95rem !important;
}

.ilsa-vehicle-card__btn {
	padding: 0.8rem 1.35rem !important;
	font-size: 0.75rem !important;
}

.ilsa-vehicle-card__brand {
	right: 2.5rem !important;
	bottom: 1.5rem !important;
	width: 28px !important;
}

/* Grid spacing between cards */
.ilsa-listings-grid {
	gap: 1.25rem !important;
}

/* ── Pagination ──────────────────────────────────────────────────────── */

.ilsa-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin-top: 2.5rem;
}

.ilsa-pagination__page,
.ilsa-pagination__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 0.6rem;
	background: #fff;
	color: var(--ilsa-card-ink) !important;
	border: 1px solid transparent;
	border-radius: 2px;
	font-size: 0.85rem;
	font-weight: 500;
	text-decoration: none !important;
	transition: background 0.15s ease, color 0.15s ease;
}

.ilsa-pagination__page:hover,
.ilsa-pagination__arrow:hover {
	background: var(--ilsa-on-accent);
	color: var(--ilsa-accent) !important;
}

.ilsa-pagination__page.is-current {
	background: var(--ilsa-accent);
	color: var(--ilsa-on-accent) !important;
	font-weight: 600;
}

.ilsa-pagination__arrow.is-disabled {
	opacity: 0.3;
	background: transparent;
	pointer-events: none;
}

.ilsa-pagination__gap {
	padding: 0 0.25rem;
	color: rgba(255, 255, 255, 0.5);
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 860px) {
	.ilsa-vehicle-card--wide > .ilsa-vehicle-card__image-link {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}
	.ilsa-vehicle-card--wide .ilsa-vehicle-card__body {
		padding: 1.75rem !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — image framing (v1.19)
   The image column was far wider than a dealership photo's natural 3:2,
   so `cover` had to crop the top and bottom off the car. Giving the
   column the photo's own aspect ratio means almost nothing is cut.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-vehicle-card--wide > .ilsa-vehicle-card__image-link {
	/* Photo shape, not container shape. Height now follows from the
	   column width, so no min-height fighting it. */
	aspect-ratio: 3 / 2 !important;
	min-height: 0 !important;
	height: auto !important;
}

/* Text column centres itself against the taller image. */
.ilsa-vehicle-card--wide .ilsa-vehicle-card__body {
	justify-content: center;
}

/* Cap the card so a very wide screen doesn't produce a giant row. */
.ilsa-vehicle-card--wide {
	max-height: 420px;
}

.ilsa-vehicle-card--wide > .ilsa-vehicle-card__image-link {
	max-height: 420px;
}

/* ── Optional: show the entire photo, never cropped ──────────────────────
   `cover` still trims a sliver on unusually tall or wide source images.
   If the client would rather see the whole car every time and accept
   light grey bars at the edges, swap the two declarations below. */
.ilsa-vehicle-card--wide .ilsa-vehicle-card__image {
	object-fit: cover;
	/* object-fit: contain; */
	object-position: center;
	background: #F4F5F7;
}

@media (max-width: 860px) {
	.ilsa-vehicle-card--wide,
	.ilsa-vehicle-card--wide > .ilsa-vehicle-card__image-link {
		max-height: none;
	}
	.ilsa-vehicle-card--wide > .ilsa-vehicle-card__image-link {
		aspect-ratio: 3 / 2 !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — supplier photo letterboxing (v1.22)

   Vos Exclusive exports listing photos with white bars baked into the
   top and bottom of the JPEG. Those are real pixels, so `cover` cannot
   crop them away on its own — the frame is zoomed slightly to push the
   bars outside the visible area. Raise --sbma-card-zoom if a listing
   still shows a white edge; set it to 1 for clean source images.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-vehicle-card--wide .ilsa-vehicle-card__image {
	--sbma-card-zoom: 1.10;
	transform: scale(var(--sbma-card-zoom));
	transform-origin: center center;
}

.ilsa-vehicle-card--wide:hover .ilsa-vehicle-card__image {
	transform: scale(calc(var(--sbma-card-zoom) + 0.03));
}

/* SBMA uses hard corners throughout — square off the listing side too. */
.ilsa-listings-grid .ilsa-vehicle-card--wide,
.ilsa-vehicle-card__btn,
.ilsa-pagination__page,
.ilsa-pagination__arrow,
.ilsa-filter-bar .ilsa-filter-field select,
.ilsa-filter-bar .ilsa-filter-field input[type="text"] {
	border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — gold listing cards (v1.27)
   Card body flips from white to the brand cream/gold, with maroon ink.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-listings-grid .ilsa-vehicle-card--wide {
	background: #FDE2BF !important;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__body {
	background: #FDE2BF;
}

/* Ink: maroon for headings and values, a softened maroon for labels. */
.ilsa-vehicle-card--wide .ilsa-vehicle-card__title a,
.ilsa-vehicle-card--wide .ilsa-vehicle-card__specs .ilsa-vehicle-card__spec dd {
	color: #4E1619 !important;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__title a:hover {
	color: #2E0D0F !important;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__trim,
.ilsa-vehicle-card--wide .ilsa-vehicle-card__spec dt {
	color: rgba(78, 22, 25, 0.62) !important;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__spec-icon {
	color: #4E1619 !important;
	opacity: 0.7;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__specs {
	border-top-color: rgba(78, 22, 25, 0.18) !important;
}

/* Primary: solid maroon with cream text. */
.ilsa-vehicle-card--wide .ilsa-vehicle-card__btn--primary {
	background: #4E1619 !important;
	border-color: #4E1619 !important;
	color: #FDE2BF !important;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__btn--primary:hover {
	background: #2E0D0F !important;
	border-color: #2E0D0F !important;
}

/* Secondary: maroon outline on the gold, no fill. */
.ilsa-vehicle-card--wide .ilsa-vehicle-card__btn--ghost {
	background: transparent !important;
	border-color: rgba(78, 22, 25, 0.45) !important;
	color: #4E1619 !important;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__btn--ghost:hover {
	background: rgba(78, 22, 25, 0.08) !important;
	border-color: #4E1619 !important;
	color: #4E1619 !important;
}

/* ── Supplier banner crop ────────────────────────────────────────────── */

/* Vos Exclusive burns a text strip ("Voor de ultieme beleving…") into the
   bottom of each photo. Anchoring the crop to the top of the image and
   zooming pushes that strip below the visible frame, while keeping the
   car — which always sits in the upper two-thirds — fully in view. */
.ilsa-vehicle-card--wide .ilsa-vehicle-card__image {
	--sbma-card-zoom: 1.16;
	object-position: center 32% !important;
	transform: scale(var(--sbma-card-zoom));
	transform-origin: center 32%;
}

.ilsa-vehicle-card--wide:hover .ilsa-vehicle-card__image {
	transform: scale(calc(var(--sbma-card-zoom) + 0.03));
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — outlined gold cards (v1.28)
   No fill: the maroon page shows through, with a gold hairline border,
   gold headings/labels and white values. Fonts inherit from the theme.
   ═══════════════════════════════════════════════════════════════════════ */

/* Inherit the site's typeface instead of the bundled Outfit stack. */
.ilsa-listings-wrap,
.ilsa-listings-wrap *,
.ilsa-filter-bar,
.ilsa-filter-bar * {
	font-family: inherit !important;
}

.ilsa-listings-grid .ilsa-vehicle-card--wide,
.ilsa-vehicle-card--wide .ilsa-vehicle-card__body {
	background: transparent !important;
}

/* Selector must include the element name: the v1.18 padding reset uses
   `article.ilsa-vehicle-card--wide { border: 0 !important }`, which
   outranks a plain two-class selector even with !important. */
.ilsa-listings-grid article.ilsa-vehicle-card--wide {
	border: 1px solid #FDE2BF !important;
}

.ilsa-listings-grid article.ilsa-vehicle-card--wide:hover {
	box-shadow: none;
	border-color: #fff !important;
}

/* Titles and labels gold; values white. */
.ilsa-vehicle-card--wide .ilsa-vehicle-card__title a,
.ilsa-vehicle-card--wide .ilsa-vehicle-card__spec dt {
	color: #FDE2BF !important;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__title a:hover {
	color: #fff !important;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__trim {
	color: rgba(253, 226, 191, 0.7) !important;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__specs .ilsa-vehicle-card__spec dd {
	color: #fff !important;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__spec-icon {
	color: #FDE2BF !important;
	opacity: 0.9;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__specs {
	border-top-color: rgba(253, 226, 191, 0.25) !important;
}

/* Primary: solid gold, maroon text. Secondary: gold outline, no fill. */
.ilsa-vehicle-card--wide .ilsa-vehicle-card__btn--primary {
	background: #FDE2BF !important;
	border-color: #FDE2BF !important;
	color: #4E1619 !important;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__btn--primary:hover {
	background: #F8D4A6 !important;
	border-color: #F8D4A6 !important;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__btn--ghost {
	background: transparent !important;
	border-color: rgba(253, 226, 191, 0.55) !important;
	color: #FDE2BF !important;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__btn--ghost:hover {
	background: rgba(253, 226, 191, 0.12) !important;
	border-color: #FDE2BF !important;
	color: #FDE2BF !important;
}

/* Filter bar and pagination follow the same outlined treatment. */
.ilsa-filter-bar .ilsa-filter-field select,
.ilsa-filter-bar .ilsa-filter-field input[type="text"] {
	background-color: transparent !important;
	border: 1px solid rgba(253, 226, 191, 0.55) !important;
	color: #FDE2BF !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FDE2BF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
}

/* Native dropdown lists render on the OS surface, so options need
   readable ink of their own. */
.ilsa-filter-bar .ilsa-filter-field select option { color: #1a1a1a; }

.ilsa-filter-bar__clear-btn,
.ilsa-filter-bar__more-toggle,
.ilsa-filter-bar__count {
	color: #FDE2BF !important;
}

.ilsa-pagination__page,
.ilsa-pagination__arrow {
	background: transparent;
	border: 1px solid rgba(253, 226, 191, 0.45);
	color: #FDE2BF !important;
}

.ilsa-pagination__page:hover,
.ilsa-pagination__arrow:hover {
	background: rgba(253, 226, 191, 0.12);
	color: #FDE2BF !important;
}

.ilsa-pagination__page.is-current {
	background: #FDE2BF;
	border-color: #FDE2BF;
	color: #4E1619 !important;
}

.ilsa-results-count { color: rgba(253, 226, 191, 0.75) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — restore missing bottom strokes (v1.32)
   The theme resets `border-bottom` on <a>, which dropped exactly one
   edge from the outlined buttons and every pagination box. Longhand
   properties are needed; a shorthand `border` is overridden by the
   theme's more specific border-bottom rule.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-listings-grid a.ilsa-vehicle-card__btn,
.ilsa-listings-grid a.ilsa-vehicle-card__btn--ghost,
.ilsa-pagination a.ilsa-pagination__page,
.ilsa-pagination a.ilsa-pagination__arrow,
.ilsa-pagination span.ilsa-pagination__page,
.ilsa-pagination span.ilsa-pagination__arrow {
	border-top-width: 1px !important;
	border-right-width: 1px !important;
	border-bottom-width: 1px !important;
	border-left-width: 1px !important;
	border-style: solid !important;
	box-sizing: border-box !important;
}

.ilsa-listings-grid a.ilsa-vehicle-card__btn--ghost,
.ilsa-pagination a.ilsa-pagination__page,
.ilsa-pagination a.ilsa-pagination__arrow {
	border-color: rgba(253, 226, 191, 0.55) !important;
}

.ilsa-pagination span.ilsa-pagination__page.is-current {
	border-color: #FDE2BF !important;
}

.ilsa-pagination span.ilsa-pagination__arrow.is-disabled {
	border-color: rgba(253, 226, 191, 0.2) !important;
}

/* The primary button has no visible outline — match its fill exactly. */
.ilsa-listings-grid a.ilsa-vehicle-card__btn--primary {
	border-color: #FDE2BF !important;
}

.ilsa-listings-grid a.ilsa-vehicle-card__btn--primary:hover {
	border-color: #F8D4A6 !important;
}

/* Hover must not drop an edge either. */
.ilsa-listings-grid a.ilsa-vehicle-card__btn--ghost:hover,
.ilsa-pagination a.ilsa-pagination__page:hover,
.ilsa-pagination a.ilsa-pagination__arrow:hover {
	border-bottom-width: 1px !important;
	border-bottom-style: solid !important;
	border-color: #FDE2BF !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — filter bar controls (v1.40)
   Reset becomes a proper secondary button; the "Meer filters" toggle was
   inheriting the theme's filled button style, which rendered it as a
   solid gold block with no visible label.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-filter-bar__fields {
	align-items: stretch;
}

/* Both controls share the outlined secondary treatment and the same
   height as the dropdowns beside them. */
.ilsa-filter-bar a.ilsa-filter-bar__clear-btn,
.ilsa-filter-bar button.ilsa-filter-bar__more-toggle {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 1.05rem 1.5rem !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: rgba(253, 226, 191, 0.55) !important;
	border-radius: 0 !important;
	color: #FDE2BF !important;
	font-family: inherit !important;
	font-size: 0.78rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.09em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	line-height: 1 !important;
	cursor: pointer;
	white-space: nowrap;
}

.ilsa-filter-bar a.ilsa-filter-bar__clear-btn:hover,
.ilsa-filter-bar button.ilsa-filter-bar__more-toggle:hover {
	background: rgba(253, 226, 191, 0.12) !important;
	border-color: #FDE2BF !important;
	color: #FDE2BF !important;
	text-decoration: none !important;
}

/* Loading state while a page or filter is fetched. */
[data-ilsa-grid].is-loading {
	opacity: 0.45;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — filter bar sizing (v1.41)
   Dropdowns share the row equally and Reset matches their height.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-filter-bar__fields {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 1rem;
	width: 100%;
}

/* Each dropdown takes an equal share of whatever width is available. */
.ilsa-filter-bar .ilsa-filter-field {
	flex: 1 1 0 !important;
	min-width: 0;
	margin: 0;
	display: flex;
}

.ilsa-filter-bar .ilsa-filter-field select,
.ilsa-filter-bar .ilsa-filter-field input[type="text"] {
	width: 100%;
	height: 100%;
	min-height: 56px;
	box-sizing: border-box;
}

/* Reset sits at its natural width but stretches to the same height. */
.ilsa-filter-bar a.ilsa-filter-bar__clear-btn {
	flex: 0 0 auto !important;
	min-height: 56px;
	height: auto;
	align-self: stretch;
	padding: 0 2rem !important;
	box-sizing: border-box !important;
}

@media (max-width: 860px) {
	.ilsa-filter-bar__fields {
		flex-wrap: wrap;
	}
	.ilsa-filter-bar .ilsa-filter-field {
		flex: 1 1 100% !important;
	}
	.ilsa-filter-bar a.ilsa-filter-bar__clear-btn {
		flex: 1 1 100% !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — heading typography (v1.42)

   The v1.28 rule forced `font-family: inherit` on everything inside the
   listings wrapper. For headings that was wrong: an <h3> inherited the
   body font from its parent instead of using the theme's heading font.
   `revert` hands these back to the theme stylesheet.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-listings-wrap h1,
.ilsa-listings-wrap h2,
.ilsa-listings-wrap h3,
.ilsa-listings-wrap h4,
.ilsa-vehicle-card__title,
.ilsa-vehicle-card__title a {
	font-family: inherit;
}

/* Lighter weight, matching the detail page. */
.ilsa-vehicle-card--wide .ilsa-vehicle-card__title,
.ilsa-vehicle-card--wide .ilsa-vehicle-card__title a {
	font-weight: 400 !important;
	letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — typography (v1.44)

   Two faces, applied explicitly rather than inherited: Epilogue for car
   titles only, DM Sans for everything else. Earlier versions used
   `inherit`, which resolved to whatever the surrounding Elementor
   section happened to set — usually DM Sans, hence everything matching.
   ═══════════════════════════════════════════════════════════════════════ */

/* Base: DM Sans across the whole listings UI. */
.ilsa-listings-wrap,
.ilsa-listings-wrap *,
.ilsa-filter-bar,
.ilsa-filter-bar *,
.ilsa-pagination,
.ilsa-pagination * {
	font-family: "DM Sans", sans-serif !important;
}

/* Exception: the car name uses Epilogue at medium weight. */
.ilsa-vehicle-card__title,
.ilsa-vehicle-card__title a,
.ilsa-vehicle-card--wide .ilsa-vehicle-card__title,
.ilsa-vehicle-card--wide .ilsa-vehicle-card__title a {
	font-family: "Epilogue", sans-serif !important;
	font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — mobile card layout (v1.53)

   The 860px stacking rule was declared early, then later blocks re-set
   grid-template-columns on .ilsa-vehicle-card--wide without a media
   query — so the two-column desktop layout applied on phones too and
   the text sat on top of the photo. This block is last and wins.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {

	/* Photo on top, details underneath. */
	.ilsa-listings-grid article.ilsa-vehicle-card--wide,
	.ilsa-vehicle-card--wide {
		display: block !important;
		grid-template-columns: none !important;
		min-height: 0 !important;
		max-height: none !important;
	}

	.ilsa-vehicle-card--wide > .ilsa-vehicle-card__image-link {
		display: block !important;
		width: 100% !important;
		aspect-ratio: 3 / 2 !important;
		max-height: none !important;
		min-height: 0 !important;
		height: auto !important;
	}

	.ilsa-vehicle-card--wide .ilsa-vehicle-card__body {
		width: 100% !important;
		padding: 1.5rem 1.25rem 1.75rem !important;
		gap: 1rem !important;
	}

	.ilsa-vehicle-card--wide .ilsa-vehicle-card__title {
		font-size: 1.35rem !important;
	}

	/* Two spec columns, not three — three wraps every value onto its own
	   line at phone widths, which is what made KM-STAND unreadable. */
	.ilsa-vehicle-card__specs {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0.9rem 1rem !important;
	}

	.ilsa-vehicle-card__spec dt {
		font-size: 0.68rem;
		white-space: nowrap;
	}

	.ilsa-vehicle-card__spec dd {
		font-size: 0.95rem !important;
		white-space: nowrap;
	}

	/* Full-width stacked buttons — easier tap targets. */
	.ilsa-vehicle-card__actions {
		flex-direction: column !important;
	}

	.ilsa-listings-grid a.ilsa-vehicle-card__btn {
		width: 100% !important;
		padding: 0.95rem 1rem !important;
	}

	.ilsa-vehicle-card__brand {
		display: none !important;
	}
}

@media (max-width: 420px) {
	/* Single column below this: two columns start clipping longer
	   values such as "2.761 KM" beside a wrapped label. */
	.ilsa-vehicle-card__specs {
		grid-template-columns: 1fr 1fr !important;
	}

	.ilsa-vehicle-card--wide .ilsa-vehicle-card__title {
		font-size: 1.2rem !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — mobile filter bar (v1.54)
   Four full-width controls stacked took most of a phone screen before
   any car was visible. A 2x2 grid at reduced height keeps the whole bar
   under ~120px, so the first listing stays above the fold.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {

	.ilsa-filter-bar {
		margin-bottom: 1.5rem !important;
	}

	.ilsa-filter-bar__fields {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 0.6rem !important;
		align-items: stretch;
	}

	/* Merk, Bouwjaar, Bodytype, Reset — one per cell. */
	.ilsa-filter-bar .ilsa-filter-field,
	.ilsa-filter-bar a.ilsa-filter-bar__clear-btn {
		flex: unset !important;
		width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
	}

	.ilsa-filter-bar .ilsa-filter-field select,
	.ilsa-filter-bar .ilsa-filter-field input[type="text"],
	.ilsa-filter-bar a.ilsa-filter-bar__clear-btn {
		min-height: 44px !important;
		height: 44px !important;
		padding: 0 2rem 0 0.85rem !important;
		font-size: 0.68rem !important;
		letter-spacing: 0.06em !important;
		background-position: right 0.7rem center !important;
		background-size: 13px !important;
	}

	/* Reset has no chevron, so it centres its own label. */
	.ilsa-filter-bar a.ilsa-filter-bar__clear-btn {
		padding: 0 0.85rem !important;
		text-align: center;
	}

	.ilsa-results-count {
		font-size: 0.8rem !important;
		margin-bottom: 0.75rem !important;
	}
}

@media (max-width: 380px) {
	/* Very narrow screens: shrink the label rather than let it clip. */
	.ilsa-filter-bar .ilsa-filter-field select,
	.ilsa-filter-bar a.ilsa-filter-bar__clear-btn {
		font-size: 0.62rem !important;
		padding-right: 1.7rem !important;
	}
}


/* ═══════════════════════════════════════════════════════════════════════
   SBMA — filter bar with six controls (v1.57)
   Merk, Model, Bouwjaar, Carrosserie, Brandstof, Prijs + Reset no longer
   fit one row, so the bar wraps to a grid.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-filter-bar__fields {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	gap: 0.75rem !important;
	align-items: stretch;
}

.ilsa-filter-bar .ilsa-filter-field {
	flex: unset !important;
	width: 100%;
}

@media (max-width: 1100px) {
	.ilsa-filter-bar__fields {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.ilsa-filter-bar a.ilsa-filter-bar__clear-btn {
		grid-column: 1 / -1;
	}
}

@media (max-width: 860px) {
	.ilsa-filter-bar__fields {
		grid-template-columns: 1fr 1fr !important;
	}
	.ilsa-filter-bar a.ilsa-filter-bar__clear-btn {
		grid-column: auto !important;
	}
}

/* Labels are sentence case now that the icons are gone. */
.ilsa-vehicle-card--wide .ilsa-vehicle-card__spec dt {
	text-transform: none !important;
	letter-spacing: 0.02em !important;
	font-size: 0.78rem !important;
}

.ilsa-vehicle-card--wide .ilsa-vehicle-card__spec dd {
	text-transform: none !important;
}

/* Reset spans the full width on mobile — it sits alone on the last row
   of the 2x2 grid, so a half-width button left an awkward gap. */
@media (max-width: 860px) {
	.ilsa-filter-bar a.ilsa-filter-bar__clear-btn {
		grid-column: 1 / -1 !important;
		width: 100% !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — Reset as a solid button (v1.66)
   Outlined, it read as a fourth dropdown. Gold fill separates the action
   from the filters beside it.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-filter-bar a.ilsa-filter-bar__clear-btn,
.ilsa-filter-bar a.ilsa-filter-bar__clear-btn:link,
.ilsa-filter-bar a.ilsa-filter-bar__clear-btn:visited {
	background: #FDE2BF !important;
	background-image: none !important;
	border-color: #FDE2BF !important;
	color: #4E1619 !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.ilsa-filter-bar a.ilsa-filter-bar__clear-btn:hover,
.ilsa-filter-bar a.ilsa-filter-bar__clear-btn:focus {
	background: #F8D4A6 !important;
	border-color: #F8D4A6 !important;
	color: #4E1619 !important;
	text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — 4px corner radius (v1.69)
   Supersedes the earlier square-corner rules. Applied broadly, with
   circular elements left alone.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-listings-wrap,
.ilsa-listings-wrap *,
.ilsa-filter-bar,
.ilsa-filter-bar *,
.ilsa-pagination,
.ilsa-pagination * {
	border-radius: 4px !important;
}

/* Specific overrides, since the blanket rule above is deliberately broad. */
.ilsa-listings-grid article.ilsa-vehicle-card--wide,
.ilsa-vehicle-card--wide .ilsa-vehicle-card__image-link,
.ilsa-vehicle-card--wide .ilsa-vehicle-card__image,
.ilsa-listings-grid a.ilsa-vehicle-card__btn,
.ilsa-filter-bar .ilsa-filter-field select,
.ilsa-filter-bar .ilsa-filter-field input[type="text"],
.ilsa-filter-bar a.ilsa-filter-bar__clear-btn,
.ilsa-pagination__page,
.ilsa-pagination__arrow {
	border-radius: 4px !important;
}

/* The card clips its image, so the wrapper needs the radius too. */
.ilsa-listings-grid article.ilsa-vehicle-card--wide {
	overflow: hidden;
}

/* Single-line rules must stay square — a radius on a 1px border curls
   its ends (v1.70). */
.ilsa-vehicle-card__specs,
.ilsa-vehicle-card__spec,
.ilsa-vehicle-card__spec dt,
.ilsa-vehicle-card__spec dd,
.ilsa-vehicle-card__title,
.ilsa-vehicle-card__trim,
.ilsa-vehicle-card__body,
.ilsa-filter-bar__fields,
.ilsa-results-count,
.ilsa-pagination,
hr {
	border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — equal-width filter grid (v1.73)
   Six filters plus Reset, every cell the same width. Reset was sized to
   its own content ("auto"), which made it narrower than the dropdowns.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-filter-bar__fields {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 0.75rem !important;
	align-items: stretch !important;
}

.ilsa-filter-bar .ilsa-filter-field,
.ilsa-filter-bar a.ilsa-filter-bar__clear-btn {
	grid-column: auto !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
}

.ilsa-filter-bar a.ilsa-filter-bar__clear-btn {
	/* Was `flex: 0 0 auto` with horizontal padding, so it hugged its
	   label instead of filling the cell. */
	flex: unset !important;
	padding-left: 0.85rem !important;
	padding-right: 0.85rem !important;
	text-align: center;
}

@media (max-width: 1100px) {
	.ilsa-filter-bar__fields {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 860px) {
	.ilsa-filter-bar__fields {
		grid-template-columns: 1fr 1fr !important;
	}
	/* Reset alone on the final row, full width. */
	.ilsa-filter-bar a.ilsa-filter-bar__clear-btn {
		grid-column: 1 / -1 !important;
	}
}