/* ── Mobile overflow fix ──────────────────────────────────────── */
.ilsa-d-nav,
.ilsa-d,
.ilsa-d-hero,
.ilsa-d-left,
.ilsa-d-gallery,
.ilsa-d-gallery__main,
.ilsa-d-gallery__thumbs,
.ilsa-d-specs-strip,
.ilsa-d-tabs,
.ilsa-d-panel {
	max-width: 100%;
	box-sizing: border-box;
}
@media (max-width: 860px) {
	.ilsa-d { padding: 0 12px 3rem; overflow-x: hidden; }
	.ilsa-d-nav { padding: .6rem 0; }
	.ilsa-d-gallery__main { width: 100%; }
	.ilsa-d-gallery__thumbs { width: 100%; }
	.ilsa-d-specs-strip { width: 100%; }
}

/*
 * ILSA Vehicle Detail v1.6.2 — clean rewrite
 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── NAV ─────────────────────────────────────────────────────────── */
.ilsa-d-nav { max-width: 1100px; margin: 0 auto; padding: .75rem 1.5rem; }
.ilsa-d-nav__back {
	display: inline-flex; align-items: center; gap: 6px;
	color: #888; text-decoration: none !important;
	font-size: 13px; font-weight: 500; transition: color .15s;
}
.ilsa-d-nav__back:hover { color: #4E1619; }

/* ─── PAGE WRAPPER ────────────────────────────────────────────────── */
.ilsa-d {
	max-width: 1100px; margin: 0 auto;
	padding: .25rem 1.5rem 4rem;
	font-family: inherit;
	color: #1a1a1a; -webkit-font-smoothing: antialiased;
	box-sizing: border-box; width: 100%;
}
@media (max-width: 860px) {
	.ilsa-d { padding: .25rem 12px 3rem; overflow-x: clip; }
}

/* ─── HERO GRID ───────────────────────────────────────────────────── */
.ilsa-d-hero {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 40px;
	align-items: start;
}
@media (max-width: 860px) {
	.ilsa-d-hero {
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
		width: 100% !important;
		overflow-x: hidden !important;
	}
	/* Gallery stays first (natural order) */
	.ilsa-d-gallery { order: 1; }
	/* Thumbnails stay with gallery */
	.ilsa-d-gallery__thumbs { order: 2; }
	/* Calculator panel moves up — BEFORE specs and tabs */
	.ilsa-d-panel {
	display: flex; flex-direction: column; gap: 0;
	position: sticky; top: 20px;
}
@media (max-width: 860px) {
	.ilsa-d-panel { order: 2; position: static !important; width: 100% !important; }
}
	/* Specs and tabs go after calculator */
	.ilsa-d-specs-strip { order: 3; }
	.ilsa-d-tabs { order: 4; }
}

.ilsa-d-left { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 860px) {
	.ilsa-d-left { display: contents !important; }
}
@media (max-width: 860px) {
	.ilsa-d-left {
		display: contents !important; /* let children participate in hero flex order */
	}
}

/* ─── GALLERY ─────────────────────────────────────────────────────── */
.ilsa-d-gallery { display: flex; flex-direction: column; gap: 8px; }

.ilsa-d-gallery__main {
	position: relative; border-radius: 12px; overflow: hidden;
	background: #f2f2f2; aspect-ratio: 16/11;
}
@media (max-width: 860px) { .ilsa-d-gallery__main { aspect-ratio: 16/10; max-height: 260px; } }

.ilsa-d-gallery__active-img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: opacity .18s;
}
.ilsa-d-gallery__placeholder { width: 100%; height: 100%; background: #e8e8e8; }

/* Nav arrows */
.ilsa-d-gallery__nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
	width: 36px; height: 36px; background: rgba(255,255,255,.9);
	border: none; border-radius: 50%; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,.15); transition: background .15s;
}
.ilsa-d-gallery__nav:hover { background: #fff; }
.ilsa-d-gallery__nav--prev { left: 10px; }
.ilsa-d-gallery__nav--next { right: 10px; }
.ilsa-d-gallery__counter {
	position: absolute; bottom: 10px; right: 12px;
	background: rgba(0,0,0,.48); color: #fff;
	font-size: 11px; font-weight: 600; padding: 2px 8px;
	border-radius: 20px; pointer-events: none;
}

/* Thumbnails — no border, just images side by side */
.ilsa-d-gallery__thumbs {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.ilsa-d-gallery__thumb {
	aspect-ratio: 4/3; border-radius: 8px; overflow: hidden;
	border: none !important; outline: none !important; box-shadow: none !important;
	background: #f0f0f0 !important; padding: 0 !important; cursor: pointer;
	transition: opacity .15s; opacity: .55;
	/* display controlled by PHP (inline style="display:none" for i>=4) and JS */
}
.ilsa-d-gallery__thumb.is-active,
.ilsa-d-gallery__thumb:hover { opacity: 1; }
.ilsa-d-gallery__thumb img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ─── QUICK SPECS STRIP ───────────────────────────────────────────── */
.ilsa-d-specs-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
@media (max-width: 500px) { .ilsa-d-specs-strip { grid-template-columns: repeat(2, 1fr); } }

.ilsa-d-spec {
	display: flex; align-items: center; gap: 10px;
	background: #fafafa; border: 1px solid #eeeeee;
	border-radius: 8px; padding: 12px 14px;
}
.ilsa-d-spec__icon {
	width: 32px; height: 32px; border-radius: 50%;
	background: #FDE2BF; display: flex; align-items: center;
	justify-content: center; flex-shrink: 0;
}
.ilsa-d-spec__label {
	font-size: 10px; font-weight: 600; color: #aaa;
	text-transform: uppercase; letter-spacing: .05em; display: block; line-height: 1.2;
}
.ilsa-d-spec__value {
	font-size: 13px; font-weight: 700; color: #1a1a1a; display: block; margin-top: 2px;
}

/* ─── TABS ────────────────────────────────────────────────────────── */
.ilsa-d-tabs { margin-top: 4px; }

.ilsa-d-tabs__nav {
	display: flex; overflow-x: auto; scrollbar-width: none;
	border-bottom: 1px solid #e8e8e8;
	gap: 0; padding: 0; background: transparent;
	/* no top border */
}
.ilsa-d-tabs__nav::-webkit-scrollbar { display: none; }

.ilsa-d-tabs__tab {
	flex: 0 0 auto; padding: 12px 20px;
	font-size: 12px; font-weight: 600; color: #bbb !important;
	background: transparent !important; border: none !important;
	border-bottom: 2px solid transparent !important;
	cursor: pointer; white-space: nowrap;
	text-transform: uppercase; letter-spacing: .06em;
	transition: color .15s, border-color .15s;
	margin-bottom: -1px; border-radius: 0 !important;
	outline: none;
}
.ilsa-d-tabs__tab:hover { color: #888 !important; }
.ilsa-d-tabs__tab.is-active {
	color: #4E1619 !important;
	border-bottom: 3px solid #4E1619 !important;
	font-weight: 700 !important;
}

.ilsa-d-tabs__panel { display: none; padding: 20px 0 0; }
.ilsa-d-tabs__panel.is-active { display: block; }

/* ─── SPEC TABLE (2-col) ──────────────────────────────────────────── */
.ilsa-d-table-2col {
	display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px;
}
@media (max-width: 640px) { .ilsa-d-table-2col { grid-template-columns: 1fr; } }

.ilsa-d-table {
	width: 100%; border-collapse: collapse; font-size: 14px;
}
.ilsa-d-table tr { background: transparent !important; }
.ilsa-d-table td {
	padding: 10px 0; border-bottom: 1px solid #f0f0f0;
	border-top: none !important; border-left: none !important; border-right: none !important;
	vertical-align: top; background: transparent !important;
}
.ilsa-d-table tr:last-child td { border-bottom: none; }
.ilsa-d-table__label { font-weight: 700 !important; color: #1a1a1a; width: 46%; padding-right: 12px; }
.ilsa-d-table td:last-child { color: #555; }
.ilsa-d-tooltip {
	display: inline-flex; align-items: center; justify-content: center;
	width: 14px; height: 14px; border-radius: 50%;
	background: #eee; color: #888; font-size: 9px;
	margin-left: 4px; cursor: help; font-style: normal;
}

/* Equipment grid */
.ilsa-d-equip-section-title { font-size: 14px; font-weight: 700; color: #1a1a1a; margin: 0 0 12px; }
.ilsa-d-equip-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
@media (max-width: 700px) { .ilsa-d-equip-grid { grid-template-columns: repeat(2, 1fr); } }
.ilsa-d-equip-item {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 12px; background: #f7f9fc; border-radius: 8px;
	font-size: 13px; color: #1a1a1a;
}
.ilsa-d-equip-item::before {
	content: ''; width: 18px; height: 18px; min-width: 18px; flex-shrink: 0;
	background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
	border-radius: 50%;
}

/* ─── RIGHT PANEL ─────────────────────────────────────────────────── */
.ilsa-d-panel {
	display: flex; flex-direction: column; gap: 0;
	position: sticky; top: 20px;
}
@media (max-width: 860px) {
	.ilsa-d-panel { position: static !important; width: 100% !important; }
	.ilsa-d-panel__title { font-size: 22px !important; }
}

.ilsa-d-panel__title {
	font-size: 28px !important; font-weight: 800 !important;
	color: #1a1a1a !important; line-height: 1.25 !important;
	margin: 0 0 6px !important;
}
.ilsa-d-panel__subtitle { font-size: 13px; color: #888; margin-bottom: 16px; }

.ilsa-d-panel__price-row {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 2px;
}
.ilsa-d-panel__price-label { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.ilsa-d-panel__price-amount { font-size: 18px; font-weight: 800; color: #1a1a1a; }
.ilsa-d-panel__price-note { font-size: 12px; color: #4E1619; display: block; margin-bottom: 16px; }
.ilsa-d-panel__divider { border: none; border-top: 1px solid #eee; margin: 16px 0; }

/* ─── CALCULATOR ──────────────────────────────────────────────────── */
.ilsa-calc { display: flex; flex-direction: column; gap: 0; }

.ilsa-calc__row { margin-bottom: 16px; }

/* Side-by-side: label left, input right */
.ilsa-calc__row--inline {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin-bottom: 12px !important;
}
.ilsa-calc__row--inline .ilsa-calc__field-label {
	margin: 0 !important;
	flex-shrink: 0 !important;
	min-width: 90px !important;
	display: flex !important;
	align-items: center !important;
	height: 46px !important;
	line-height: 1.2 !important;
}
/* The input wrapper on Leasebedrag is direct child — keep it sized */
.ilsa-calc__row--inline > .ilsa-calc__input-wrap,
.ilsa-calc__row--inline > div > .ilsa-calc__input-wrap {
	width: 160px !important;
	flex-shrink: 0 !important;
}
/* Slottermijn: the outer wrapper div (holds input + error msg) */
.ilsa-calc__row--inline > div:not(.ilsa-calc__input-wrap) {
	display: flex;
	flex-direction: column;
	width: 160px;
	flex-shrink: 0;
}
/* Leasebedrag: input-wrap sits directly in row */
.ilsa-calc__row--inline > .ilsa-calc__input-wrap {
	width: 160px;
	flex-shrink: 0;
	/* Ensure flex row inside the wrap */
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
}
.ilsa-calc__field-label {
	display: block; font-size: 13px; font-weight: 700; color: #1a1a1a; margin-bottom: 6px;
}

/* Duration buttons */
.ilsa-calc__durations { display: flex; gap: 6px; }
.ilsa-calc__dur-btn {
	flex: 1; padding: 10px 4px; font-size: 13px !important; font-weight: 700 !important;
	color: #444 !important; background: #fff !important;
	border: 1px solid #ddd !important; border-radius: 6px !important;
	cursor: pointer; text-align: center; transition: all .15s;
	outline: none !important; display: flex !important;
	align-items: center; justify-content: center;
}
.ilsa-calc__dur-btn:hover { border-color: #aaa !important; color: #222 !important; }
.ilsa-calc__dur-btn.is-active {
	background: #4E1619 !important; border-color: #4E1619 !important;
	color: #FDE2BF !important;
}

/* Input — single unified box, no inner divider */
.ilsa-calc__input-wrap {
	display: flex; align-items: center;
	border: 1px solid #ddd !important; border-radius: 8px !important;
	background: #fff !important; overflow: hidden !important;
	transition: border-color .15s; height: 46px !important;
	box-shadow: none !important;
}
.ilsa-calc__input-wrap:focus-within { border-color: #aaa !important; }
.ilsa-calc__prefix {
	padding: 0 4px 0 10px !important; font-size: 14px !important;
	color: #bbb !important; font-weight: 400 !important;
	flex-shrink: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important; border-right: none !important;
	box-shadow: none !important; outline: none !important;
	display: flex !important; align-items: center !important;
}
.ilsa-calc__input {
	flex: 1 !important; border: none !important; outline: none !important;
	background: transparent !important; background-color: transparent !important;
	padding: 0 12px 0 0 !important; font-size: 15px !important; font-weight: 500 !important;
	color: #1a1a1a !important; text-align: right !important;
	-moz-appearance: textfield !important; height: 100% !important;
	box-shadow: none !important;
}
.ilsa-calc__input::-webkit-outer-spin-button,
.ilsa-calc__input::-webkit-inner-spin-button { -webkit-appearance: none; }


/* Toggle switch */
.ilsa-calc__toggle { position: relative; display: inline-flex; cursor: pointer; }
.ilsa-calc__toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.ilsa-calc__toggle-slider {
	display: block; width: 44px; height: 24px;
	background: #d1d5db; border-radius: 12px;
	transition: background .2s; position: relative;
}
.ilsa-calc__toggle-slider::after {
	content: ''; position: absolute; top: 3px; left: 3px;
	width: 18px; height: 18px; background: #fff; border-radius: 50%;
	transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.ilsa-calc__toggle input:checked ~ .ilsa-calc__toggle-slider { background: #1a1a1a; }
.ilsa-calc__toggle input:checked ~ .ilsa-calc__toggle-slider::after { transform: translateX(20px); }

/* Trade-in form — flat, no box-in-box */

/* License plate — unified pill: NL block + yellow input as ONE element */

/* Inruilwaarde input inside trade-in — flat, no extra box */

/* Monthly result */
.ilsa-calc__result-row {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 16px; margin: 12px 0 16px;
	background: #eef2f2; border-radius: 8px;
}
.ilsa-calc__result-label { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.ilsa-calc__result-amount { font-size: 20px; font-weight: 800; color: #1a1a1a; }

/* CTA buttons */
.ilsa-calc__cta-primary {
	width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
	background: #4E1619; color: #FDE2BF !important;
	font-size: 13px; font-weight: 800; letter-spacing: .05em;
	padding: 14px 20px; border: none; border-radius: 8px;
	cursor: pointer; transition: background .15s; margin-bottom: 8px;
}
.ilsa-calc__cta-primary:hover { background: #6B1F23; }

.ilsa-calc__cta-secondary {
	width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
	background: #fff !important; color: #1a1a1a !important;
	font-size: 13px; font-weight: 600;
	padding: 12px 20px; border: 1px solid #e0e0e0 !important; border-radius: 8px !important;
	text-decoration: none !important; cursor: pointer;
	transition: border-color .15s; margin-bottom: 8px;
}
.ilsa-calc__cta-secondary:last-child { margin-bottom: 0; }
.ilsa-calc__cta-secondary:hover { border-color: #bbb !important; }
.ilsa-calc__cta-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* ─── MODAL ───────────────────────────────────────────────────────── */
.ilsa-modal-overlay {
	position: fixed; inset: 0; z-index: 99999;
	background: rgba(0,0,0,.5); backdrop-filter: blur(3px);
	display: flex; align-items: center; justify-content: center;
	padding: 20px; animation: ilsaFadeIn .2s ease;
}
@keyframes ilsaFadeIn { from { opacity: 0; } to { opacity: 1; } }

.ilsa-modal {
	background: #fff; border-radius: 12px;
	width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
	position: relative; padding: 28px;
	box-shadow: 0 24px 64px rgba(0,0,0,.18);
	animation: ilsaSlideUp .22s ease;
}
@keyframes ilsaSlideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@media (max-width: 560px) {
	.ilsa-modal { padding: 20px 16px; border-radius: 12px 12px 0 0; }
	.ilsa-modal-overlay { align-items: flex-end; padding: 0; }
}

/* Close button — orange rounded square with × */
.ilsa-modal__close {
	position: absolute; top: 16px; right: 16px;
	width: 32px; height: 32px;
	background: #4E1619; border: none; border-radius: 8px;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
	transition: background .15s; flex-shrink: 0;
}
.ilsa-modal__close:hover { background: #6B1F23; }
.ilsa-modal__close svg { display: block; }
.ilsa-modal__close path { stroke: #fff !important; }

.ilsa-modal__header { padding-right: 44px; margin-bottom: 16px; }
.ilsa-modal__title { font-size: 20px !important; font-weight: 800; color: #1a1a1a; margin: 0 0 4px; }
.ilsa-modal__subtitle { font-size: 13px; color: #888; }

/* Calc summary card */
.ilsa-modal__calc-summary {
	background: #1a1a1a; border-radius: 10px; padding: 16px 18px; margin-bottom: 20px;
}
.ilsa-modal__summary-car { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.ilsa-modal__summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ilsa-modal__summary-label {
	display: block; font-size: 10px; text-transform: uppercase;
	letter-spacing: .06em; color: #aaaaaa; margin-bottom: 4px;
}
.ilsa-modal__summary-val { font-size: 14px; font-weight: 700; color: #fff; display: block; }
.ilsa-modal__summary-val--highlight { font-size: 18px; color: #FDE2BF; }
.ilsa-modal__tradein-badge {
	display: flex; align-items: center; gap: 7px;
	background: #FDE2BF; border-radius: 6px; padding: 8px 12px;
	margin-top: 12px; font-size: 12px; color: #92400e;
}

/* Form */
.ilsa-modal__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.ilsa-modal__field { display: flex; flex-direction: column; gap: 5px; }
.ilsa-modal__field--full { grid-column: 1 / -1; }
.ilsa-modal__field label { font-size: 12px; font-weight: 600; color: #555; }
.ilsa-modal__field input,
.ilsa-modal__field textarea {
	border: 1px solid #e0e0e0; border-radius: 8px;
	padding: 10px 12px; font-size: 14px; color: #1a1a1a;
	background: #fafafa; outline: none; font-family: inherit;
	transition: border-color .15s; resize: vertical;
}
.ilsa-modal__field input:focus,
.ilsa-modal__field textarea:focus { border-color: #bbb; background: #fff; }
@media (max-width: 440px) { .ilsa-modal__fields { grid-template-columns: 1fr; } }

.ilsa-modal__privacy { font-size: 11px; color: #bbb; margin-bottom: 14px; }
.ilsa-modal__privacy a { color: #555; text-decoration: underline; }

.ilsa-modal__submit {
	width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
	background: #4E1619; color: #FDE2BF;
	font-size: 13px; font-weight: 800; letter-spacing: .05em;
	padding: 14px; border: none; border-radius: 8px; cursor: pointer; transition: background .15s;
}
.ilsa-modal__submit:hover { background: #6B1F23; }
.ilsa-modal__submit:disabled { opacity: .6; cursor: default; }

.ilsa-modal__msg {
	margin-top: 10px; padding: 10px 14px; border-radius: 8px;
	font-size: 13px; font-weight: 600; text-align: center;
}
.ilsa-modal__msg--success { background: #dcfce7; color: #166534; }
.ilsa-modal__msg--error   { background: #fee2e2; color: #991b1b; }

/* Vehicle title shortcode */
.ilsa-vehicle-title-wrap { text-align: center; }

/* Slottermijn validation message */
.ilsa-calc__field-error {
	font-size: 11px; color: #ef4444; margin-top: 4px;
	visibility: hidden; font-weight: 500; line-height: 1.3;
	display: block; /* always in flow, just invisible */
	height: 16px; /* reserve space so layout never shifts */
}
.ilsa-calc__field-error.is-visible { visibility: visible; }
.ilsa-calc__field-error.is-visible { display: block; }
.ilsa-calc__input-wrap.is-error { border-color: #ef4444 !important; }

/* ── Info tooltips ─────────────────────────────────────────────── */
.ilsa-tooltip-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin-left: 3px;
}
.ilsa-tooltip-btn {
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	color: #bbb;
	display: inline-flex;
	align-items: center;
	line-height: 1;
	vertical-align: middle;
}
.ilsa-tooltip-btn:hover { color: #4E1619; }
.ilsa-tooltip-text {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: #1a1a1a;
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	padding: 10px 14px;
	border-radius: 8px;
	width: 240px;
	text-align: left;
	z-index: 999;
	transition: opacity .15s, visibility .15s;
	pointer-events: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ilsa-tooltip-text::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #1a1a1a;
}
.ilsa-tooltip-btn:hover + .ilsa-tooltip-text,
.ilsa-tooltip-btn:focus + .ilsa-tooltip-text,
.ilsa-tooltip-wrap:hover .ilsa-tooltip-text {
	visibility: visible;
	opacity: 1;
}
/* On mobile, anchor tooltip to left edge so it doesn't go off-screen */
@media (max-width: 480px) {
	.ilsa-tooltip-text {
		left: 0;
		transform: none;
		width: 220px;
	}
	.ilsa-tooltip-text::after { left: 16px; transform: none; }
}




/* ═══════════════════════════════════════════════════════════════════════
   SBMA — brand palette on the maroon page (v1.24)

   No panels, no white cards: the component sits directly on the site's
   maroon background. Labels and headings are cream/gold, values are
   white. Only genuinely interactive surfaces (inputs, secondary CTA
   buttons, spec chips) keep a light fill.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-d {
	--sbma-gold: #FDE2BF;
	--sbma-maroon: #4E1619;
	background: transparent;
	color: #fff;
	padding: .25rem 1.5rem 4rem;
	border-radius: 0;
}

/* ── Headings, labels, links: gold ───────────────────────────────────── */

.ilsa-d-nav a,
.ilsa-d-nav a:visited,
.ilsa-d-panel__title,
.ilsa-d-panel__price-label,
.ilsa-d-panel__price-note,
.ilsa-calc__field-label,
.ilsa-calc__label,
.ilsa-d-table__label,
.ilsa-d-equip-section-title,
.ilsa-d-spec__label {
	color: var(--sbma-gold) !important;
}

/* ── Values: white ───────────────────────────────────────────────────── */

.ilsa-d-panel__price-amount,
.ilsa-d-table td:not(.ilsa-d-table__label),
.ilsa-d-equip-item {
	color: #fff !important;
}

.ilsa-d-panel__subtitle {
	color: rgba(255, 255, 255, 0.7) !important;
}

/* ── Tabs ────────────────────────────────────────────────────────────── */

.ilsa-d-tabs__nav { border-bottom-color: rgba(253, 226, 191, 0.25) !important; }

.ilsa-d-tabs__tab {
	background: transparent !important;
	color: rgba(253, 226, 191, 0.6) !important;
}

.ilsa-d-tabs__tab:hover { color: var(--sbma-gold) !important; }

.ilsa-d-tabs__tab.is-active,
.ilsa-d-tabs__tab[aria-selected="true"] {
	color: var(--sbma-gold) !important;
	border-bottom-color: var(--sbma-gold) !important;
}

.ilsa-d-tabs__panel { background: transparent; padding: 20px 0 0; }

/* Row dividers need to read against maroon, not white. */
.ilsa-d-table td,
.ilsa-d-table tr { border-color: rgba(253, 226, 191, 0.18) !important; }

.ilsa-d-panel__divider {
	border-color: rgba(253, 226, 191, 0.25) !important;
	background: rgba(253, 226, 191, 0.25);
}

/* ── Tooltip: the "?" chip and the (i) button ────────────────────────── */

.ilsa-d-tooltip {
	background: var(--sbma-gold) !important;
	color: var(--sbma-maroon) !important;
	font-weight: 700;
	font-size: 10px !important;
	width: 15px !important;
	height: 15px !important;
}

.ilsa-tooltip-btn { color: var(--sbma-gold) !important; }
.ilsa-tooltip-btn:hover { color: #fff !important; }

.ilsa-tooltip-btn svg,
.ilsa-tooltip-btn svg * {
	fill: none !important;
	stroke: currentColor !important;
}

.ilsa-tooltip-text {
	background: #2E0D0F !important;
	color: #fff !important;
	border: 1px solid rgba(253, 226, 191, 0.3);
}

.ilsa-tooltip-text::after { border-top-color: #2E0D0F !important; }

/* ── Spec chips stay light, so their ink stays dark ──────────────────── */

.ilsa-d-spec {
	background: rgba(255, 255, 255, 0.06) !important;
	border-color: rgba(253, 226, 191, 0.18) !important;
}

.ilsa-d-spec .ilsa-d-spec__label { color: var(--sbma-gold) !important; }
.ilsa-d-spec .ilsa-d-spec__value { color: #fff !important; }

.ilsa-d-spec__icon { background: var(--sbma-gold) !important; }

.ilsa-d-spec__icon svg,
.ilsa-d-spec__icon svg * {
	fill: none !important;
	stroke: var(--sbma-maroon) !important;
}

/* ── Calculator controls keep a light fill for legibility ────────────── */

.ilsa-calc__dur-btn {
	background: rgba(255, 255, 255, 0.92) !important;
	color: var(--sbma-maroon) !important;
	border-color: transparent !important;
}

.ilsa-calc__dur-btn.is-active {
	background: var(--sbma-gold) !important;
	border-color: var(--sbma-gold) !important;
	color: var(--sbma-maroon) !important;
}

.ilsa-calc__result-row {
	background: rgba(255, 255, 255, 0.08) !important;
}

.ilsa-calc__result-label { color: var(--sbma-gold) !important; }
.ilsa-calc__result-amount { color: #fff !important; }

/* ── CTAs ────────────────────────────────────────────────────────────── */

[data-calc-quote-btn] {
	background: var(--sbma-gold) !important;
	color: var(--sbma-maroon) !important;
}

[data-calc-quote-btn]:hover { background: #F8D4A6 !important; }

[data-calc-quote-btn] svg,
[data-calc-quote-btn] svg * {
	stroke: var(--sbma-maroon) !important;
	fill: none !important;
}

/* Genuine filled logos keep their fill. */
.ilsa-d-panel svg[fill="#25d366"],
.ilsa-d-panel svg[fill="#25d366"] * {
	fill: #25d366 !important;
	stroke: none !important;
}

/* Theme styles <button> with a gradient background-image, which showed
   through as those diagonal sheens behind the tab labels. */
.ilsa-d-tabs__nav .ilsa-d-tabs__tab,
.ilsa-d-tabs__tab,
.ilsa-d-tabs__tab:hover,
.ilsa-d-tabs__tab:focus,
.ilsa-d-tabs__tab.is-active {
	background-image: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	filter: none !important;
	text-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — square edges + outline CTAs (v1.26)
   The brand uses hard corners throughout, so every rounded surface in
   this stylesheet is squared off here rather than edited in 40 places.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-d,
.ilsa-d *,
.ilsa-d *::before,
.ilsa-d *::after {
	border-radius: 0 !important;
}

/* Two deliberate exceptions: circular by design, not "rounded corners". */
.ilsa-d .ilsa-d-spec__icon,
.ilsa-d .ilsa-d-tooltip,
.ilsa-d .ilsa-d-gallery__arrow,
.ilsa-d .ilsa-d-gallery__nav {
	border-radius: 50% !important;
}

/* ── Secondary CTAs: no fill, gold stroke, gold label ────────────────── */

.ilsa-d-panel a[href^="tel:"],
.ilsa-d-panel a[href^="mailto:"],
.ilsa-d-panel a[href^="https://wa.me"] {
	background: transparent !important;
	border: 1px solid #FDE2BF !important;
	color: #FDE2BF !important;
}

.ilsa-d-panel a[href^="tel:"]:hover,
.ilsa-d-panel a[href^="mailto:"]:hover,
.ilsa-d-panel a[href^="https://wa.me"]:hover {
	background: rgba(253, 226, 191, 0.12) !important;
}

.ilsa-d-panel a[href^="tel:"] span,
.ilsa-d-panel a[href^="mailto:"] span,
.ilsa-d-panel a[href^="https://wa.me"] span {
	color: #FDE2BF !important;
}

/* Button icons were dark glyphs sized for a white fill — restroke them
   gold and drop any theme-applied fill. */
.ilsa-d-panel a[href^="tel:"] svg,
.ilsa-d-panel a[href^="tel:"] svg *,
.ilsa-d-panel a[href^="mailto:"] svg,
.ilsa-d-panel a[href^="mailto:"] svg * {
	fill: none !important;
	stroke: #FDE2BF !important;
	stroke-width: 1.8 !important;
}

/* WhatsApp is a solid logo mark: keep it filled, but in gold so it sits
   with the others rather than shouting green on maroon. */
.ilsa-d-panel a[href^="https://wa.me"] svg,
.ilsa-d-panel a[href^="https://wa.me"] svg * {
	fill: #FDE2BF !important;
	stroke: none !important;
}

/* ── "Vanaf" monthly line (replaces the removed calculator) ──────────── */

.ilsa-d-panel__from-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 18px 0 6px;
}

.ilsa-d-panel__from-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #FDE2BF !important;
}

.ilsa-d-panel__from-amount {
	font-size: 26px;
	font-weight: 800;
	color: #fff !important;
}

.ilsa-d-panel__from-note {
	margin: 0 0 20px;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(253, 226, 191, 0.65) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — quote modal in brand colours (v1.32)
   Was a white card with a black summary block; now maroon with gold
   headings, square edges and the gold submit button.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-modal {
	background: #4E1619 !important;
	border: 1px solid rgba(253, 226, 191, 0.35) !important;
	border-radius: 0 !important;
	color: #fff;
}

.ilsa-modal * { border-radius: 0 !important; }

.ilsa-modal__title { color: #FDE2BF !important; }
.ilsa-modal__subtitle { color: rgba(255, 255, 255, 0.72) !important; }

.ilsa-modal__close {
	background: transparent !important;
	border: 1px solid rgba(253, 226, 191, 0.5) !important;
}

.ilsa-modal__close:hover { background: rgba(253, 226, 191, 0.15) !important; }
.ilsa-modal__close path { stroke: #FDE2BF !important; }

/* Car name block: outlined rather than a black slab. */
.ilsa-modal__calc-summary {
	background: transparent !important;
	border: 1px solid rgba(253, 226, 191, 0.35) !important;
}

.ilsa-modal__summary-car { color: #FDE2BF !important; }

/* Fields sit on the maroon, so they need a light fill and dark ink. */
.ilsa-modal__field label { color: #FDE2BF !important; }

.ilsa-modal__field input,
.ilsa-modal__field textarea {
	background: rgba(255, 255, 255, 0.95) !important;
	border: 1px solid rgba(253, 226, 191, 0.4) !important;
	color: #1a1a1a !important;
}

.ilsa-modal__field input:focus,
.ilsa-modal__field textarea:focus {
	background: #fff !important;
	border-color: #FDE2BF !important;
	outline: none;
}

.ilsa-modal__field input::placeholder,
.ilsa-modal__field textarea::placeholder { color: #8A8A8A !important; }

.ilsa-modal__privacy { color: rgba(255, 255, 255, 0.6) !important; }
.ilsa-modal__privacy a { color: #FDE2BF !important; }

/* Submit: gold fill, maroon label — same as the primary CTA. */
.ilsa-modal__submit,
#ilsa-modal-submit {
	background: #FDE2BF !important;
	color: #4E1619 !important;
	border: none !important;
}

.ilsa-modal__submit:hover,
#ilsa-modal-submit:hover { background: #F8D4A6 !important; }

.ilsa-modal__submit svg,
.ilsa-modal__submit svg *,
#ilsa-modal-submit svg,
#ilsa-modal-submit svg * {
	fill: #4E1619 !important;
	stroke: none !important;
}

.ilsa-modal__msg--error { color: #FFC9C9 !important; }
.ilsa-modal__msg--success { color: #C9F5D0 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — Opties tab (v1.36)
   The chips kept their pale background from the original light design
   while v1.24 turned their text white, leaving white-on-white. They now
   match the spec chips: translucent fill, gold hairline, gold tick.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-d-equip-item {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(253, 226, 191, 0.22) !important;
	color: #fff !important;
	padding: 10px 12px !important;
	line-height: 1.35;
}

/* Green circle replaced with a gold check, no disc. */
.ilsa-d-equip-item::before {
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23FDE2BF' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center !important;
	border-radius: 0 !important;
}

.ilsa-d-equip-section-title {
	color: #FDE2BF !important;
	margin-top: 22px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — gallery arrows + hero framing (v1.37)
   ═══════════════════════════════════════════════════════════════════════ */

/* Both arrows square and identical. The previous-arrow used to carry
   inline styles, so only the next-arrow picked up the class rules. */
.ilsa-d .ilsa-d-gallery__nav,
.ilsa-d .ilsa-d-gallery__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 0 !important;
	background: rgba(78, 22, 25, 0.85) !important;
	border: 1px solid rgba(253, 226, 191, 0.6) !important;
	box-shadow: none !important;
}

.ilsa-d .ilsa-d-gallery__nav:hover {
	background: #4E1619 !important;
	border-color: #FDE2BF !important;
}

.ilsa-d .ilsa-d-gallery__nav--prev { left: 14px; right: auto; }
.ilsa-d .ilsa-d-gallery__nav--next { right: 14px; left: auto; }

.ilsa-d .ilsa-d-gallery__nav svg,
.ilsa-d .ilsa-d-gallery__nav svg * {
	fill: none !important;
	stroke: #FDE2BF !important;
	stroke-width: 2 !important;
}

/* Hero: supplier photos carry a white bar at the top and a text banner
   at the bottom. Cropping from the centre leaves both visible, so the
   frame is zoomed and anchored slightly high — the car sits in the
   middle third of these showroom shots.

   NOTE: the clipping must sit on the image container, never on
   .ilsa-d-hero. That element is the two-column grid, and any overflow
   value other than `visible` on an ancestor silently disables
   position:sticky on the right-hand panel. */
.ilsa-d-gallery__main {
	overflow: hidden;
	position: relative;
}

.ilsa-d-hero img,
.ilsa-d-gallery__main img {
	--sbma-hero-zoom: 1.14;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	transform: scale(var(--sbma-hero-zoom));
	transform-origin: center 42%;
}

/* Thumbnails get the same treatment so they match the hero. */
.ilsa-d-gallery__thumb img {
	object-fit: cover;
	object-position: center 42%;
	transform: scale(1.14);
	transform-origin: center 42%;
}

.ilsa-d-gallery__thumb { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — quote modal corrections (v1.38)
   ═══════════════════════════════════════════════════════════════════════ */

/* Fields: no fill, gold hairline, white text. */
.ilsa-modal__field input,
.ilsa-modal__field textarea,
.ilsa-modal input[type="text"],
.ilsa-modal input[type="email"],
.ilsa-modal input[type="tel"],
.ilsa-modal textarea {
	background: transparent !important;
	background-image: none !important;
	border: 1px solid rgba(253, 226, 191, 0.55) !important;
	color: #fff !important;
	box-shadow: none !important;
}

.ilsa-modal__field input:focus,
.ilsa-modal__field textarea:focus,
.ilsa-modal input:focus,
.ilsa-modal textarea:focus {
	background: transparent !important;
	border-color: #FDE2BF !important;
	outline: none !important;
	box-shadow: none !important;
}

.ilsa-modal input::placeholder,
.ilsa-modal textarea::placeholder {
	color: rgba(253, 226, 191, 0.5) !important;
}

/* Browser autofill repaints the field white — override it. */
.ilsa-modal input:-webkit-autofill,
.ilsa-modal input:-webkit-autofill:hover,
.ilsa-modal input:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff !important;
	-webkit-box-shadow: 0 0 0 1000px #4E1619 inset !important;
	transition: background-color 9999s ease-in-out 0s;
}

/* Close button: the theme styles <button> with padding, a gradient and
   a min-width, which stretched it into a wide box. Pin the geometry. */
.ilsa-modal .ilsa-modal__close {
	position: absolute !important;
	top: 16px !important;
	right: 16px !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 0 !important;
	max-width: 34px !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	background: transparent !important;
	background-image: none !important;
	border: 1px solid rgba(253, 226, 191, 0.55) !important;
	box-shadow: none !important;
}

.ilsa-modal .ilsa-modal__close:hover {
	background: rgba(253, 226, 191, 0.15) !important;
	border-color: #FDE2BF !important;
}

.ilsa-modal .ilsa-modal__close svg {
	width: 14px !important;
	height: 14px !important;
	display: block !important;
}

.ilsa-modal .ilsa-modal__close svg path {
	stroke: #FDE2BF !important;
	fill: none !important;
}

/* Car-name block: tighten the empty space under the title. */
.ilsa-modal__calc-summary {
	padding: 14px 16px !important;
}

/* Submit button sizing — the theme's button padding applies here too. */
.ilsa-modal__submit,
#ilsa-modal-submit {
	background-image: none !important;
	box-shadow: none !important;
	width: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — gallery selection + modal summary (v1.39)
   ═══════════════════════════════════════════════════════════════════════ */

/* Clicking the arrows repeatedly was selecting the image and surrounding
   markup, which the browser paints with its blue selection colour. */
/* Scoped to the gallery only. `.ilsa-d-hero` was included here, but that
   is the two-column grid — it disabled text selection across the whole
   top of the page, including the car name, price and specs. */
.ilsa-d-gallery,
.ilsa-d-gallery *,
.ilsa-d-gallery__nav,
.ilsa-d-gallery__thumb {
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	user-select: none !important;
	-webkit-tap-highlight-color: transparent;
}

/* Everything else stays selectable. */
.ilsa-d-panel,
.ilsa-d-panel *,
.ilsa-d-specs-strip,
.ilsa-d-specs-strip *,
.ilsa-d-tabs__panel,
.ilsa-d-tabs__panel * {
	-webkit-user-select: text !important;
	-moz-user-select: text !important;
	user-select: text !important;
}

.ilsa-d-gallery img { pointer-events: none; }
.ilsa-d-gallery__nav { pointer-events: auto; }

.ilsa-d-gallery__nav:focus,
.ilsa-d-gallery__nav:focus-visible {
	outline: 2px solid #FDE2BF !important;
	outline-offset: 2px;
}

/* ── Modal summary lines ─────────────────────────────────────────────── */

.ilsa-modal__summary-lines {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(253, 226, 191, 0.25);
}

.ilsa-modal__summary-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.ilsa-modal__summary-lines .ilsa-modal__summary-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	color: #FDE2BF !important;
	display: inline;
	margin: 0;
}

.ilsa-modal__summary-lines .ilsa-modal__summary-val {
	font-size: 14px;
	font-weight: 700;
	color: #fff !important;
	display: inline;
}

.ilsa-modal__summary-lines .ilsa-modal__summary-val--highlight {
	font-size: 17px;
	color: #FDE2BF !important;
}

/* ── Close button: force a true square ───────────────────────────────── */

.ilsa-modal .ilsa-modal__close {
	width: 34px !important;
	min-width: 34px !important;
	max-width: 34px !important;
	height: 34px !important;
	min-height: 34px !important;
	max-height: 34px !important;
	box-sizing: border-box !important;
	aspect-ratio: 1 / 1 !important;
	flex: 0 0 34px !important;
	overflow: hidden !important;
}

/* ── Title weight (v1.42) ────────────────────────────────────────────── */

/* 800 read as heavy at 28px on the maroon; normal weight suits the
   brand's lighter display type. */
.ilsa-d-panel__title {
	font-weight: 400 !important;
	letter-spacing: 0.01em;
}

/* Headings use the theme's heading face, not the inherited body font. */
.ilsa-d h1,
.ilsa-d h2,
.ilsa-d h3,
.ilsa-d-panel__title {
	font-family: inherit;
}

/* ── Typography (v1.44) ──────────────────────────────────────────────── */

/* Base: DM Sans everywhere on the detail page and in the quote modal. */
.ilsa-d,
.ilsa-d *,
.ilsa-d-nav,
.ilsa-d-nav *,
.ilsa-modal,
.ilsa-modal * {
	font-family: "DM Sans", sans-serif !important;
}

/* Exception: the car name uses Epilogue at medium weight. */
.ilsa-d-panel__title,
.ilsa-d-hero__title,
.ilsa-vehicle-title {
	font-family: "Epilogue", sans-serif !important;
	font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — sticky panel (v1.49)

   position:sticky only works if no ancestor between the element and its
   scroll container has overflow other than `visible`. Guard the chain
   explicitly so a future image-crop fix can't silently break it again.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-d,
.ilsa-d-hero {
	overflow: visible !important;
}

.ilsa-d-panel {
	position: sticky !important;
	top: 24px;
	align-self: start;
	/* No max-height / overflow here. `overflow-y: auto` clips in BOTH
	   axes, which cut the tooltip off at the panel's left edge. The
	   panel is short enough to fit any viewport now that the calculator
	   is gone, so it does not need its own scroll area. */
	overflow: visible !important;
}

@media (max-width: 860px) {
	.ilsa-d-panel {
		position: static !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — form feedback messages (v1.51)
   The success box kept its pale-green fill from the light design while
   the text was recoloured for the dark modal, leaving it unreadable.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-modal__msg,
.ilsa-modal__msg--success,
.ilsa-modal__msg--error {
	padding: 14px 16px !important;
	margin-top: 16px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.45 !important;
	text-align: left !important;
	border-radius: 0 !important;
}

.ilsa-modal__msg--success {
	background: rgba(148, 216, 165, 0.12) !important;
	border: 1px solid rgba(148, 216, 165, 0.55) !important;
	color: #C9F5D0 !important;
}

.ilsa-modal__msg--error {
	background: rgba(255, 155, 155, 0.12) !important;
	border: 1px solid rgba(255, 155, 155, 0.55) !important;
	color: #FFC9C9 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — tooltip positioning (v1.55)

   The tooltip is centred on its icon with a fixed 240px width. Near the
   left edge of a phone screen that pushes half of it off-canvas, which
   clipped the first character of every line. On mobile it is anchored to
   the panel instead of the icon and allowed to span the full width.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-tooltip-text {
	/* Never wider than the viewport, whatever the anchor position. */
	max-width: calc(100vw - 32px);
	box-sizing: border-box;
}

@media (max-width: 860px) {

	.ilsa-tooltip-wrap {
		position: static !important;
	}

	/* Anchored to the panel, so it can't hang off either edge. */
	.ilsa-d-panel,
	.ilsa-d-spec {
		position: relative;
	}

	.ilsa-tooltip-text {
		left: 0 !important;
		right: 0 !important;
		transform: none !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 auto;
		bottom: auto;
		top: auto;
		font-size: 13px !important;
		padding: 12px 14px !important;
	}

	/* The arrow pointed at the icon; with the box moved it would sit in
	   an arbitrary spot, so it is dropped on small screens. */
	.ilsa-tooltip-text::after {
		display: none !important;
	}
}

/* Tap to toggle on touch devices — :hover is unreliable there and the
   tooltip could stick open or never appear. */
@media (hover: none) {
	.ilsa-tooltip-btn:focus + .ilsa-tooltip-text {
		visibility: visible !important;
		opacity: 1 !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — tooltip clipping (v1.56)
   Nothing between the tooltip and the page may clip its overflow, or it
   is cut off at that ancestor's edge rather than the viewport's.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-d-panel,
.ilsa-d-panel__price-row,
.ilsa-tooltip-wrap,
.ilsa-d-spec {
	overflow: visible !important;
}

/* Anchor the box to its icon and let it open rightwards, so it can
   never extend past the left edge of the column it sits in. */
.ilsa-tooltip-wrap {
	position: relative;
}

.ilsa-tooltip-text {
	left: 0 !important;
	right: auto !important;
	transform: none !important;
	max-width: min(280px, calc(100vw - 32px));
}

.ilsa-tooltip-text::after {
	left: 14px !important;
	transform: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   SBMA — fullscreen image viewer (v1.61)
   Arrows and counter sit in a bar beneath the photo rather than floating
   over it, so they never cover the car.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-d-gallery__main[data-ilsa-zoom] { cursor: zoom-in; }

.ilsa-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: rgba(26, 8, 9, 0.97);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px 20px 24px;
}

.ilsa-lightbox[hidden] { display: none !important; }

.ilsa-lightbox__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	max-width: 100%;
	max-height: 100%;
}

.ilsa-lightbox__img {
	max-width: 100%;
	max-height: calc(100vh - 160px);
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* Control bar: prev — counter — next */
.ilsa-lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.ilsa-lightbox__counter {
	min-width: 72px;
	text-align: center;
	color: #FDE2BF;
	font-size: 14px;
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
}

.ilsa-lightbox__nav,
.ilsa-lightbox__close {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	min-width: 42px !important;
	max-width: 42px !important;
	height: 42px !important;
	min-height: 42px !important;
	max-height: 42px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	background-image: none !important;
	border: 1px solid rgba(253, 226, 191, 0.55) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #FDE2BF !important;
	cursor: pointer;
	line-height: 1 !important;
}

.ilsa-lightbox__nav:hover,
.ilsa-lightbox__close:hover {
	background: rgba(253, 226, 191, 0.15) !important;
	border-color: #FDE2BF !important;
}

.ilsa-lightbox__nav svg,
.ilsa-lightbox__close svg {
	display: block !important;
}

.ilsa-lightbox__nav svg path,
.ilsa-lightbox__close svg path {
	stroke: currentColor !important;
	fill: none !important;
}

.ilsa-lightbox__close {
	position: absolute;
	top: 18px;
	right: 18px;
}

@media (max-width: 600px) {
	.ilsa-lightbox { padding: 56px 10px 18px; }
	.ilsa-lightbox__img { max-height: calc(100vh - 150px); }
	.ilsa-lightbox__bar { gap: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — quote form matched to the contact page (v1.61)
   Two columns, outlined fields on the maroon, full-width gold submit.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-modal__fields {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 18px 24px !important;
}

.ilsa-modal__field--full { grid-column: 1 / -1 !important; }

.ilsa-modal__field label {
	display: block;
	margin-bottom: 8px !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	color: #FDE2BF !important;
}

.ilsa-modal__field input,
.ilsa-modal__field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px !important;
	background: transparent !important;
	border: 1px solid rgba(253, 226, 191, 0.45) !important;
	color: #fff !important;
	font-size: 15px !important;
}

.ilsa-modal__field textarea {
	min-height: 150px;
	resize: vertical;
}

.ilsa-modal__field input::placeholder,
.ilsa-modal__field textarea::placeholder {
	color: rgba(253, 226, 191, 0.45) !important;
}

.ilsa-modal__field input:focus,
.ilsa-modal__field textarea:focus {
	border-color: #FDE2BF !important;
	outline: none !important;
}

/* Submit spans the form, as on the contact page. */
.ilsa-modal__submit,
#ilsa-modal-submit {
	display: block !important;
	width: 100% !important;
	margin-top: 22px !important;
	padding: 18px 20px !important;
	background: #FDE2BF !important;
	color: #4E1619 !important;
	border: none !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	text-align: center !important;
}

@media (max-width: 640px) {
	.ilsa-modal__fields {
		grid-template-columns: 1fr !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — icon buttons (v1.62)

   The close and arrow buttons carried `font-size: 0` to hide any stray
   text node. The theme sizes SVGs in em units, so a zero font-size
   collapsed every icon to 0x0 and left an empty outlined box. Font size
   is restored and the SVGs are given explicit pixel dimensions that
   cannot be overridden.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-lightbox__nav,
.ilsa-lightbox__close,
.ilsa-modal .ilsa-modal__close {
	font-size: 16px !important;
	line-height: 1 !important;
	text-indent: 0 !important;
}

.ilsa-lightbox__nav svg,
.ilsa-lightbox__close svg,
.ilsa-modal .ilsa-modal__close svg {
	display: block !important;
	flex: 0 0 auto !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
	opacity: 1 !important;
	visibility: visible !important;
	vertical-align: middle;
}

.ilsa-lightbox__nav svg *,
.ilsa-lightbox__close svg *,
.ilsa-modal .ilsa-modal__close svg * {
	stroke: #FDE2BF !important;
	stroke-width: 2 !important;
	fill: none !important;
	vector-effect: non-scaling-stroke;
}

/* The arrows sit in a bar under the photo; give them a little more
   presence than the close control. */
.ilsa-lightbox__nav svg {
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	max-width: 20px !important;
	max-height: 20px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — CSS-drawn icons (v1.63)

   Inline SVG kept being resized or recoloured by the theme (em-based
   sizing, blanket fill rules). These glyphs are built from borders on
   pseudo-elements instead: no SVG, no font glyph, nothing the theme
   knows how to override.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-icon-x,
.ilsa-icon-chev {
	display: block !important;
	position: relative;
	width: 16px !important;
	height: 16px !important;
	flex: 0 0 16px;
	pointer-events: none;
}

/* Close: two 2px bars crossed at 45 degrees. */
.ilsa-icon-x::before,
.ilsa-icon-x::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: #FDE2BF;
	border-radius: 0;
}

.ilsa-icon-x::before { transform: translateY(-50%) rotate(45deg); }
.ilsa-icon-x::after  { transform: translateY(-50%) rotate(-45deg); }

/* Chevron: a square with two borders, rotated. */
.ilsa-icon-chev::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-top: 2px solid #FDE2BF;
	border-right: 2px solid #FDE2BF;
}

.ilsa-icon-chev--right::before {
	transform: translate(-65%, -50%) rotate(45deg);
}

.ilsa-icon-chev--left::before {
	transform: translate(-35%, -50%) rotate(-135deg);
}

/* Buttons centre their glyph and carry no text of their own. */
.ilsa-modal .ilsa-modal__close,
.ilsa-lightbox__close,
.ilsa-lightbox__nav {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 0 !important;
}

.ilsa-modal .ilsa-modal__close:hover .ilsa-icon-x::before,
.ilsa-modal .ilsa-modal__close:hover .ilsa-icon-x::after,
.ilsa-lightbox__close:hover .ilsa-icon-x::before,
.ilsa-lightbox__close:hover .ilsa-icon-x::after {
	background: #fff;
}

.ilsa-lightbox__nav:hover .ilsa-icon-chev::before {
	border-color: #fff;
}

/* Longer disclaimer copy needs a little more breathing room (v1.64). */
.ilsa-d-panel__from-note {
	margin: 10px 0 22px !important;
	font-size: 12.5px !important;
	line-height: 1.6 !important;
}

/* Autobedrijf has only four rows — a single column reads better than
   two half-empty ones (v1.67). */
.ilsa-d-table-2col--single {
	grid-template-columns: 1fr !important;
	max-width: 520px;
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — 4px corner radius (v1.69)
   Supersedes the blanket `border-radius: 0` set earlier. Circular
   elements keep their 50%.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-d,
.ilsa-d *,
.ilsa-d *::before,
.ilsa-d *::after,
.ilsa-modal,
.ilsa-modal *,
.ilsa-lightbox,
.ilsa-lightbox * {
	border-radius: 4px !important;
}

/* Circles by design, not rounded rectangles. */
.ilsa-d .ilsa-d-spec__icon,
.ilsa-d .ilsa-d-tooltip,
.ilsa-d .ilsa-d-gallery__nav,
.ilsa-d .ilsa-d-gallery__arrow {
	border-radius: 50% !important;
}

/* The CSS-drawn glyphs must stay sharp — a radius on these rounds the
   ends of the strokes and distorts the shape. */
.ilsa-icon-x,
.ilsa-icon-x::before,
.ilsa-icon-x::after,
.ilsa-icon-chev,
.ilsa-icon-chev::before {
	border-radius: 0 !important;
}

/* Elements that clip content need the radius on the clipping box. */
.ilsa-d-gallery__main,
.ilsa-d-gallery__thumb,
.ilsa-lightbox__img,
.ilsa-d-hero img {
	border-radius: 4px !important;
	overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — no radius on rules and underlines (v1.70)

   The v1.69 blanket radius also hit elements that are a single line: the
   active tab underline, the panel divider, the rule above the spec row
   and every table row border. A radius on a 1px line curls its ends and
   reads as a defect, so those are reset to square.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-d-tabs__nav,
.ilsa-d-tabs__tab,
.ilsa-d-tabs__tab.is-active,
.ilsa-d-tabs__tab[aria-selected="true"],
.ilsa-d-panel__divider,
.ilsa-d-table,
.ilsa-d-table tr,
.ilsa-d-table td,
.ilsa-d-table__label,
.ilsa-d-panel__price-row,
.ilsa-modal__header,
.ilsa-modal__summary-lines,
.ilsa-modal__summary-line,
hr {
	border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SBMA — back link as a button (v1.71)
   As bare text it read as a caption rather than a way back to the grid.
   ═══════════════════════════════════════════════════════════════════════ */

.ilsa-d-nav a.ilsa-d-back-btn,
.ilsa-d-nav a.ilsa-d-back-btn:link,
.ilsa-d-nav a.ilsa-d-back-btn:visited {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 10px 18px !important;
	background: transparent !important;
	background-image: none !important;
	border: 1px solid rgba(253, 226, 191, 0.55) !important;
	border-radius: 4px !important;
	color: #FDE2BF !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em;
	text-decoration: none !important;
	opacity: 1 !important;
	box-shadow: none !important;
}

.ilsa-d-nav a.ilsa-d-back-btn:hover {
	background: rgba(253, 226, 191, 0.12) !important;
	border-color: #FDE2BF !important;
	color: #FDE2BF !important;
}

.ilsa-d-nav { padding-bottom: 14px; }

/* ── Aanbetaling row: 21% BTW on BTW vehicles (v1.84) ────────────────── */

.ilsa-d-panel__vat-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
}

.ilsa-d-panel__vat-label {
	font-size: 13px;
	color: #FDE2BF !important;
}

.ilsa-d-panel__vat-amount {
	font-size: 15px;
	font-weight: 700;
	color: #fff !important;
}

/* ── Heading trim line (v1.93) ───────────────────────────────────────── */

.ilsa-d-panel__trim {
	margin: 4px 0 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.72) !important;
}