/*
 * Mobilox-voorraad in de huisstijl (proef).
 * Wordt alleen geladen als de schakelaar in functions.php (nk_mobilox_skin) aanstaat.
 * Terugdraaien: schakelaar uit; dit bestand en assets/js/mobilox-skin.js worden dan niet meer geladen.
 * Alles staat onder #nk-occasions zodat het niets anders raakt.
 */

/* Rasterweergave als vier kaarten naast elkaar, net als onze eigen productkaarten. */
/* Mobilox zet op desktop drie kaarten per rij (.mox-gridview-row) en op kleinere schermen alles in één rij;
   de rijen laten we "verdwijnen" zodat alle kaarten in één raster komen. */
#nk-occasions .mox .mox-gridview-row { display: contents; }
#nk-occasions .mox .d-lg-none.row:has(> .mox-product-column) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
	gap: 24px;
	margin: 0;
}
@media (min-width: 992px) {
	#nk-occasions .mox .d-lg-block:has(> .mox-gridview-row) {
		display: grid !important;
		grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
		gap: 24px;
	}
}
#nk-occasions .mox .mox-product-column {
	width: auto;
	max-width: none;
	flex: none;
	padding: 0;
	margin: 0;
}
#nk-occasions .mox .mox-product-column > div {
	background: #fff;
	border: 1px solid var(--nk-rand);
	border-radius: var(--nk-radius);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
#nk-occasions .mox .mox-product-column:hover > div {
	transform: translateY(-4px);
	box-shadow: var(--nk-schaduw-hover);
	border-color: transparent;
}

/* Foto */
#nk-occasions .mox .mox-product-column > div > a:first-child { display: block; flex: none; background: none; line-height: 0; }
#nk-occasions .mox .mox-image-column {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 11;
	object-fit: cover;
	border-radius: 0 !important;
}

/* Titel */
#nk-occasions .mox .mox-product-column-body { padding: 16px 20px 0; }
#nk-occasions .mox .mox-product-column .mox-title {
	margin: 0;
	font-family: var(--nk-font-kop);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--nk-donker);
}
#nk-occasions .mox .mox-product-column a:hover .mox-title { color: var(--nk-merk); }

/* Kenmerken als grijze labels */
#nk-occasions .mox .mox-product-column-body > .d-flex:last-child {
	flex-wrap: wrap;
	justify-content: flex-start !important;
	gap: 6px;
	margin-bottom: 16px !important;
}
#nk-occasions .mox .mox-spec-column {
	display: inline-flex;
	flex-direction: row !important;
	align-items: baseline;
	gap: .35em;
	padding: .25em .7em;
	font-size: .8rem;
	background: var(--nk-licht);
	border-radius: 999px;
	color: var(--nk-gedempt);
}
#nk-occasions .mox .mox-spec-column > .d-flex { display: none !important; }
#nk-occasions .mox .mox-spec-label { margin: 0; font-size: inherit; color: var(--nk-gedempt); }
#nk-occasions .mox .mox-attribute-text { margin: 0; font-size: inherit; font-weight: 600; color: var(--nk-tekst); }

/* Voet: prijs links, "Bekijk details" rechts */
#nk-occasions .mox .mox-product-column > div > div:last-child { margin-top: auto; padding: 0 20px 20px; }
#nk-occasions .mox .mox-column-financing-price {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	height: auto;
	padding: 14px 0 0;
	background: none !important;
	border: 0;
	border-top: 1px solid var(--nk-rand);
	border-radius: 0 !important;
}
#nk-occasions .mox .mox-column-financing-price .mox-price {
	order: -1;
	margin: 0;
	padding: 0;
	width: auto;
	background: none !important;
	clip-path: none !important;
	border: 0;
	text-align: left;
}
#nk-occasions .mox .mox-column-financing-price .mox-price a {
	display: block;
	padding: 0;
	background: none !important;
	border: 0;
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--nk-donker) !important;
	text-decoration: none;
}
#nk-occasions .mox .mox-price a::after { display: none; }
#nk-occasions .mox .mox-tax-type { position: static !important; display: block; font-size: .75rem; font-weight: 400; color: var(--nk-gedempt) !important; }
#nk-occasions .mox .mox-lease-price {
	font-size: .85rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: right;
	color: var(--nk-merk);
	text-decoration: none;
}
#nk-occasions .mox .mox-lease-price::after { content: " \2192"; }
#nk-occasions .mox .mox-lease-price:hover { color: var(--nk-merk-donker); }

/* Bovenbalk: aantal, filters en sortering in dezelfde toon */
#nk-occasions .mox .mox-results { font-weight: 700; color: var(--nk-gedempt); }
#nk-occasions .mox .mox-btn-outline,
#nk-occasions .mox .mox-filter-toggle {
	border-color: var(--nk-merk);
	color: var(--nk-merk);
	border-radius: 999px;
	font-weight: 700;
}
#nk-occasions .mox .mox-btn-outline:hover,
#nk-occasions .mox .mox-filter-toggle:hover { background: var(--nk-merk); color: #fff; }
/* Lijstweergave is niet in huisstijl gezet: alleen het raster blijft beschikbaar. */
#nk-occasions .mox .mox-layout-toggle { display: none; }
#nk-occasions .mox .mox-product-row { display: none; }
#nk-occasions .mox .mox-mobile-column-seperator { display: none; }

/* Homepage: eerst twee rijen tonen, de rest staat op /occasions/. */
#nk-occasions.nk-occasions--home { max-height: 860px; }
@media (max-width: 700px) {
	#nk-occasions.nk-occasions--home { max-height: 1000px; }
}

/* Tijdens het laden: grijze placeholder-kaarten; het overzicht van Mobilox blijft verborgen tot het raster er staat. */
/* Niet met display:none of visibility:hidden verbergen: Mobilox schakelt dan niet door naar het raster. */
#nk-occasions.nk-mox-laden { position: relative; overflow: hidden; }
#nk-occasions.nk-mox-laden .mox { position: absolute; top: 0; left: 0; right: 0; opacity: 0; pointer-events: none; }
.nk-mox-skelet {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
	gap: 24px;
	padding: 4px 12px;
}
.nk-mox-skelet__kaart {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 20px;
	background: #fff;
	border: 1px solid var(--nk-rand);
	border-radius: var(--nk-radius);
	overflow: hidden;
}
.nk-mox-skelet__foto { display: block; aspect-ratio: 16 / 11; background: var(--nk-licht); }
.nk-mox-skelet__regel { display: block; height: 16px; margin: 0 20px; border-radius: 8px; background: var(--nk-licht); }
.nk-mox-skelet__regel--kort { width: 45%; }
.nk-mox-skelet__foto, .nk-mox-skelet__regel { animation: nk-mox-puls 1.4s ease-in-out infinite; }
@keyframes nk-mox-puls { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) {
	.nk-mox-skelet__foto, .nk-mox-skelet__regel { animation: none; }
}