/* Occasions-overzicht (plugin): toolbar, chips, filterpaneel en zwevende knop.
   Kleuren uit het thema (--color-primary); de kaarten zelf blijven van het thema. */

.dv-occasions {
	--dv-primary: var(--color-primary, #bcb09b);
	--dv-secondary: #a9a9a9;
	--dv-panel: #131313;
	--dv-field: #1b1b1b;
	--dv-line: rgba(255, 255, 255, .1);
	--dv-line-strong: rgba(255, 255, 255, .18);
	--dv-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Op html: dat gaat naar het venster. Body moet dan visible zijn, anders wordt body (met de
   overflow-x van het thema) een eigen scrollvlak en verspringt de header bij de WP-adminbalk. */
html.dv-noscroll {
	overflow: hidden;
}

html.dv-noscroll body {
	overflow: visible;
}

/* CookieYes (melding en knopje linksonder) lag over het filterpaneel; terug zodra het dicht is */
html.dv-noscroll .cky-consent-container,
html.dv-noscroll .cky-btn-revisit-wrapper {
	visibility: hidden;
}

/* ---------- toolbar ---------- */
.dv-occ-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 14px;
}

.dv-occ-count {
	font-size: 15px;
	color: var(--dv-secondary);
}

.dv-occ-count b {
	color: #fff;
	font-weight: 400;
}

.dv-occ-actions {
	margin-left: auto;
	display: flex;
	gap: 10px;
	min-width: 0;
}

.dv-occ-btn,
.dv-occ-sort {
	height: 46px;
	border: 1px solid var(--dv-line-strong);
	border-radius: 12px;
	background-color: transparent;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 300;
	cursor: pointer;
	transition: border-color .2s, background-color .2s;
}

.dv-occ-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 16px;
	line-height: 1;
}

.dv-occ-btn svg,
.dv-occ-fab svg {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

.dv-occ-sort {
	appearance: none;
	-webkit-appearance: none;
	padding: 0 42px 0 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23fff' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	min-width: 0;
	max-width: 100%;
	text-overflow: ellipsis;
}

.dv-occ-sort option {
	background: #111;
	color: #fff;
}

.dv-occ-btn:hover,
.dv-occ-sort:hover {
	border-color: rgba(255, 255, 255, .4);
	background-color: rgba(255, 255, 255, .04);
}

.dv-occ-btn:focus-visible,
.dv-occ-sort:focus-visible {
	outline: none;
	border-color: var(--dv-primary);
	box-shadow: 0 0 0 3px rgba(188, 176, 155, .25);
}

.dv-occ-badge {
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: var(--dv-primary);
	color: #111;
	font-size: 12px;
	font-weight: 500;
	display: inline-grid;
	place-items: center;
	line-height: 1;
}

.dv-occ-badge[hidden] {
	display: none;
}

/* ---------- actieve filters ---------- */
.dv-occ-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
}

.dv-occ-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--dv-line-strong);
	border-radius: 999px;
	padding: 5px 8px 5px 14px;
	font-size: 14px;
	font-weight: 300;
	color: #fff;
	text-decoration: none;
	transition: border-color .2s, background-color .2s;
}

/* Tijdens het wegklikken: niet nog een keer klikken, overzicht dimt tot de nieuwe pagina er is */
.dv-occ-chips.dv-bezig {
	pointer-events: none;
}

.dv-occ-chips .dv-occ-chip {
	overflow: hidden;
	white-space: nowrap;
}

#dv-occasions .grid-container {
	transition: opacity .25s;
}

#dv-occasions .grid-container.dv-laden {
	opacity: .45;
}

.dv-occ-chip .dv-x {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .08);
	font-size: 12px;
	line-height: 1;
	transition: background-color .2s;
}

.dv-occ-chip:hover {
	border-color: rgba(255, 255, 255, .4);
	color: #fff;
}

.dv-occ-chip:hover .dv-x {
	background: rgba(255, 255, 255, .18);
}

.dv-occ-clear {
	border-color: transparent;
	color: var(--dv-primary);
	padding-right: 14px;
}

.dv-occ-clear:hover {
	color: #fff;
	border-color: transparent;
}

.dv-occ-empty {
	max-width: 560px;
	margin: 0 auto;
	padding: 56px 0;
	text-align: center;
	color: var(--dv-secondary);
}

.dv-occ-empty h3 {
	margin: 0 0 10px;
	font-size: 24px;
	font-weight: 300;
	color: #fff;
}

.dv-occ-empty p {
	margin: 0 0 24px;
	font-weight: 300;
}

.dv-occ-empty-acties {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.dv-occ-empty-acties a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: 12px;
	font-size: 15px;
	transition: background-color .2s, border-color .2s, color .2s;
}

.dv-occ-empty-acties a[hidden] {
	display: none;
}

.dv-occ-empty .dv-occ-empty-knop {
	background: var(--dv-primary);
	color: #111;
}

.dv-occ-empty .dv-occ-empty-knop:hover {
	background: #cfc4b0;
	color: #111;
}

.dv-occ-empty .dv-occ-empty-wa {
	border: 1px solid var(--dv-line-strong);
	color: #fff;
}

.dv-occ-empty .dv-occ-empty-wa:hover {
	border-color: rgba(255, 255, 255, .4);
	color: #fff;
}

.dv-occ-empty .dv-occ-empty-alles {
	color: var(--dv-secondary);
}

.dv-occ-empty .dv-occ-empty-alles:hover {
	color: #fff;
}

/* ---------- filterpaneel ---------- */
.dv-occ-overlay {
	position: fixed;
	inset: 0;
	z-index: 99990;
	background: rgba(0, 0, 0, .55);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity .3s;
}

.dv-occ-overlay.is-open {
	opacity: 1;
}

.dv-occ-panel {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 99991;
	width: min(460px, 100%);
	height: 100%;
	height: 100dvh;
	background: var(--dv-panel);
	border-left: 1px solid var(--dv-line);
	box-shadow: -30px 0 60px rgba(0, 0, 0, .5);
	color: #fff;
	transform: translateX(100%);
	transition: transform .38s var(--dv-ease);
}

.dv-occ-panel.is-open {
	transform: none;
}

.dv-occ-overlay[hidden],
.dv-occ-panel[hidden] {
	display: none;
}

.dv-occ-form {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
}

.dv-occ-head {
	padding: 28px 30px 10px;
}

.dv-occ-head-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.dv-occ-head h2 {
	margin: 0;
	font-size: 40px;
	font-weight: 300;
	line-height: 1.2;
	color: #fff;
}

.dv-occ-link {
	background: none;
	border: 0;
	padding: 6px 0;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 300;
	cursor: pointer;
	transition: color .2s;
}

.dv-occ-link:hover {
	background: none;
	color: var(--dv-primary);
}

.dv-occ-wissen {
	display: inline-block;
	margin-top: 10px;
	padding: 7px 14px;
	border-radius: 10px;
	background: rgba(188, 176, 155, .12);
	color: var(--dv-primary);
	font-size: 14px;
	font-weight: 300;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

.dv-occ-wissen:hover {
	background: rgba(188, 176, 155, .2);
	color: #fff;
}

.dv-occ-wissen[hidden] {
	display: none;
}

.dv-occ-body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px 30px 30px;
}

.dv-occ-group {
	padding: 20px 0;
	border-bottom: 1px solid var(--dv-line);
}

.dv-occ-group:last-child {
	border-bottom: 0;
}

.dv-occ-group h4 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 28px;
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 400;
	color: #fff;
}

.dv-occ-reset {
	padding: 4px 10px;
	border: 0;
	border-radius: 8px;
	background: var(--dv-field);
	color: var(--dv-secondary);
	font-family: inherit;
	font-size: 13px;
	font-weight: 300;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

.dv-occ-reset:hover {
	background: #262626;
	color: #fff;
}

.dv-occ-reset[hidden] {
	display: none;
}

.dv-occ-field select {
	width: 100%;
	height: 54px;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	padding: 0 44px 0 18px;
	border: 1px solid var(--dv-line);
	border-radius: 12px;
	background: var(--dv-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Cpath d='M1 1.5l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 300;
	cursor: pointer;
	transition: border-color .2s, background-color .2s;
}

.dv-occ-field select option {
	background: #111;
	color: #fff;
}

.dv-occ-field select:hover:not(:disabled) {
	border-color: var(--dv-line-strong);
	background-color: #202020;
}

.dv-occ-field select:focus-visible {
	outline: none;
	border-color: var(--dv-primary);
	box-shadow: 0 0 0 3px rgba(188, 176, 155, .2);
}

.dv-occ-field select:disabled {
	opacity: .45;
	cursor: not-allowed;
}

.dv-occ-group > .dv-occ-field + .dv-occ-field {
	margin-top: 10px;
}

/* knoppen voor transmissie en brandstof (radio's: één keuze tegelijk) */
.dv-occ-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dv-occ-pill {
	position: relative;
	margin: 0;
	cursor: pointer;
}

.dv-occ-pill input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.dv-occ-pill > span {
	display: inline-block;
	padding: 11px 16px;
	border: 1px solid var(--dv-line-strong);
	border-radius: 12px;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.3;
	color: #fff;
	transition: background-color .2s, border-color .2s, color .2s;
}

.dv-occ-pill .dv-n {
	color: var(--dv-secondary);
	transition: color .2s;
}

.dv-occ-pill:hover > span {
	border-color: rgba(255, 255, 255, .4);
	background: rgba(255, 255, 255, .04);
}

.dv-occ-pill input:checked + span {
	border-color: var(--dv-primary);
	background: rgba(188, 176, 155, .14);
}

.dv-occ-pill input:checked + span .dv-n {
	color: var(--dv-primary);
}

.dv-occ-pill input:focus-visible + span {
	box-shadow: 0 0 0 3px rgba(188, 176, 155, .3);
}

.dv-occ-pill input:disabled + span {
	opacity: .35;
	cursor: not-allowed;
}

.dv-occ-pill:has(input:disabled):hover > span {
	border-color: var(--dv-line-strong);
	background: transparent;
}

/* schuif met twee handvatten */
.dv-occ-range {
	position: relative;
	height: 28px;
	margin: 4px 11px 10px;
}

.dv-occ-track,
.dv-occ-fill {
	position: absolute;
	top: 13px;
	height: 2px;
	border-radius: 2px;
}

.dv-occ-track {
	left: -11px;
	right: -11px;
	background: var(--dv-line-strong);
}

.dv-occ-fill {
	background: var(--dv-primary);
}

.dv-occ-range input {
	position: absolute;
	top: 0;
	left: -11px;
	width: calc(100% + 22px);
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}

/* Astra geeft range-inputs een eigen spoor; dat moet hier weg, anders zie je twee lijnen */
.dv-occasions .dv-occ-range input[type="range"],
.dv-occasions .dv-occ-range input[type="range"]:focus {
	background: transparent;
	box-shadow: none;
	outline: none;
}

.dv-occasions .dv-occ-range input[type="range"]::-webkit-slider-runnable-track {
	height: 28px;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.dv-occasions .dv-occ-range input[type="range"]::-moz-range-track {
	height: 28px;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.dv-occasions .dv-occ-range input[type="range"]::-moz-range-progress {
	background: transparent;
}

.dv-occasions .dv-occ-range input[type="range"]::-webkit-slider-thumb {
	margin-top: 3px;
}

.dv-occ-range input::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--dv-panel);
	border: 2px solid var(--dv-primary);
	cursor: grab;
	transition: transform .15s, box-shadow .15s;
}

.dv-occ-range input::-moz-range-thumb {
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--dv-panel);
	border: 2px solid var(--dv-primary);
	cursor: grab;
	transition: transform .15s, box-shadow .15s;
}

.dv-occ-range input::-webkit-slider-thumb:hover {
	transform: scale(1.12);
	box-shadow: 0 0 0 6px rgba(188, 176, 155, .12);
}

.dv-occ-range input::-moz-range-thumb:hover {
	transform: scale(1.12);
	box-shadow: 0 0 0 6px rgba(188, 176, 155, .12);
}

.dv-occ-range input:active::-webkit-slider-thumb {
	cursor: grabbing;
}

.dv-occ-range input:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px rgba(188, 176, 155, .3);
}

.dv-occ-range-val {
	font-size: 15px;
	font-weight: 300;
}

.dv-occ-years {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	align-items: end;
}

.dv-occ-year label {
	display: block;
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--dv-secondary);
}

.dv-occ-foot {
	padding: 16px 30px calc(16px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--dv-line);
	background: var(--dv-panel);
}

.dv-occ-geen {
	margin: 10px 0 0;
	text-align: center;
	font-size: 14px;
	font-weight: 300;
	color: var(--dv-secondary);
}

.dv-occ-geen[hidden] {
	display: none;
}

#dv-occasions .dv-occ-geen a {
	color: var(--dv-primary);
	text-decoration: none;
}

#dv-occasions .dv-occ-geen a:hover {
	color: #fff;
}

.dv-occ-apply {
	width: 100%;
	padding: 16px;
	border: 0;
	border-radius: 12px;
	background: var(--dv-primary);
	color: #111;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: filter .2s, transform .15s;
}

.dv-occ-apply:hover:not(:disabled) {
	background: var(--dv-primary);
	color: #111;
	filter: brightness(1.08);
}

.dv-occ-apply:active:not(:disabled) {
	transform: scale(.99);
}

.dv-occ-apply:disabled {
	opacity: .45;
	cursor: not-allowed;
}

/* ---------- zwevende knop (alleen mobiel) ---------- */
.dv-occ-fab {
	position: fixed;
	left: 50%;
	bottom: calc(20px + env(safe-area-inset-bottom));
	z-index: 9990;
	display: none;
	align-items: center;
	gap: 10px;
	padding: 13px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--dv-primary);
	color: #111;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
	cursor: pointer;
	/* Verborgen: helemaal onder de rand, inclusief de afstand tot de onderkant en de schaduw
	   (140% van de knop was op een iPhone met safe area te weinig, er bleef een randje over).
	   Visibility pas na de animatie, zodat hij ook niet meer met tab te bereiken is. */
	visibility: hidden;
	transform: translate(-50%, calc(100% + 60px + env(safe-area-inset-bottom)));
	transition: transform .3s var(--dv-ease), visibility 0s linear .3s;
}

.dv-occ-fab .dv-occ-badge {
	background: #111;
	color: var(--dv-primary);
}

.dv-occ-fab.is-visible {
	visibility: visible;
	transform: translate(-50%, 0);
	transition: transform .3s var(--dv-ease), visibility 0s;
}

.dv-occ-fab:hover {
	background: var(--dv-primary);
	color: #111;
}

@media (max-width: 767px) {
	.dv-occ-count {
		flex: 1 0 100%;
	}

	.dv-occ-actions {
		margin-left: 0;
		flex: 1 0 100%;
	}

	.dv-occ-btn {
		flex: 0 0 auto;
	}

	.dv-occ-sort {
		flex: 1 1 auto;
		width: 0;
	}

	.dv-occ-panel {
		top: auto;
		bottom: 0;
		width: 100%;
		height: calc(100% - 28px);
		height: calc(100dvh - 28px);
		border-left: 0;
		border-top: 1px solid var(--dv-line);
		border-radius: 22px 22px 0 0;
		transform: translateY(100%);
	}

	.dv-occ-head {
		padding: 12px 20px 6px;
	}

	.dv-occ-head::before {
		content: "";
		display: block;
		width: 40px;
		height: 4px;
		margin: 0 auto 14px;
		border-radius: 2px;
		background: rgba(255, 255, 255, .25);
	}

	.dv-occ-head h2 {
		font-size: 30px;
	}

	.dv-occ-body {
		padding: 6px 20px 24px;
	}

	.dv-occ-foot {
		padding: 12px 20px calc(14px + env(safe-area-inset-bottom));
	}

	.dv-occ-fab {
		display: inline-flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dv-occ-panel,
	.dv-occ-overlay,
	.dv-occ-fab {
		transition: none;
	}
}

/* Thema/Astra onderstreept links in de content; hier niet */
#dv-occasions a.dv-occ-wissen,
#dv-occasions a.dv-occ-chip,
#dv-occasions a.dv-occ-fav,
#dv-occasions .dv-occ-empty a {
	text-decoration: none;
}

/* Model onder de merkknoppen */
.dv-occ-merken + .dv-occ-field {
	margin-top: 14px;
}

.dv-occ-field select optgroup {
	background: #111;
	color: var(--dv-secondary);
	font-weight: 400;
}

/* ---------- Astra-knoppen neutraliseren ----------
   Astra zet op button:hover en button:focus zwarte tekst op een wit vlak met witte rand.
   Dat is specifieker dan één klasse en wint dus van onze knoppen; hier per knop de
   eigen kleuren terug. :focus:not(:hover) zodat hover ook na een klik blijft werken. */
.dv-occ-btn:hover {
	color: #fff;
}

.dv-occ-btn:focus:not(:hover) {
	color: #fff;
	background-color: transparent;
	border-color: var(--dv-line-strong);
}

.dv-occ-btn:focus-visible:not(:hover) {
	border-color: var(--dv-primary);
}

.dv-occ-link:focus:not(:hover) {
	color: #fff;
	background: none;
}

.dv-occ-reset:focus:not(:hover) {
	color: var(--dv-secondary);
	background: var(--dv-field);
}

.dv-occ-apply:hover,
.dv-occ-apply:focus,
.dv-occ-fab:focus {
	color: #111;
	background: var(--dv-primary);
}

/* ---------- paginering ----------
   Afgeronde vakjes in plaats van de omlijnde vierkantjes van het thema */
#dv-occasions .grid-container .pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 36px auto 12px;
}

/* Met #dv-occasions winnen deze regels van die van het thema (ook van hun :not(.next)-variant) */
#dv-occasions .grid-container .pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: pre;
	width: auto;
	min-width: 44px;
	height: 44px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: #262626;
	color: #fff;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	transition: background-color .2s, border-color .2s, color .2s;
}

#dv-occasions .grid-container .pagination a.page-numbers:hover {
	border-color: rgba(255, 255, 255, .4);
	background: #000;
	color: #fff;
}

#dv-occasions .grid-container .pagination .page-numbers.current {
	background: var(--dv-primary);
	color: #111 !important;
}

#dv-occasions .grid-container .pagination .page-numbers.dots {
	min-width: 0;
	padding: 0 4px;
	background: none;
	color: var(--dv-secondary);
}

#dv-occasions .grid-container .pagination .page-numbers.next,
#dv-occasions .grid-container .pagination .page-numbers.prev {
	padding: 0 18px;
}

@media (max-width: 500px) {
	#dv-occasions .grid-container .pagination {
		gap: 5px;
	}

	#dv-occasions .grid-container .pagination .page-numbers,
	#dv-occasions .grid-container .pagination .page-numbers.next,
	#dv-occasions .grid-container .pagination .page-numbers.prev {
		min-width: 36px;
		height: 40px;
		padding: 0 8px;
		border-radius: 9px;
	}

	#dv-occasions .grid-container .pagination .dv-pg-tekst {
		display: none;
	}
}

/* Sorteren: Astra maakt select:focus wit met blauwe rand en grijsblauwe tekst, en de select
   houdt na een keuze de focus. Hier de eigen kleuren terug. */
.dv-occ-sort:focus:not(:hover),
.dv-occ-sort:active {
	color: #fff;
	background-color: transparent;
	border-color: var(--dv-line-strong);
	box-shadow: none;
	outline: none;
}

.dv-occ-sort:focus-visible:not(:hover) {
	border-color: var(--dv-primary);
}

.dv-occ-sort:focus:hover {
	color: #fff;
	background-color: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .4);
	box-shadow: none;
	outline: none;
}

/* ---------- favorieten ---------- */
#dv-occasions .dv-occ-fav,
#dv-occasions .dv-occ-fav:hover,
#dv-occasions .dv-occ-fav:focus {
	color: #fff;
}

#dv-occasions .dv-occ-fav.is-actief {
	border-color: var(--dv-primary);
	color: var(--dv-primary);
}

#dv-occasions .dv-occ-fav.is-actief .dv-hart {
	fill: currentColor;
}

.dv-occ-fav-weg {
	margin: -4px 0 18px;
	color: var(--color-secondary, #c2c2c2);
	font-size: 14px;
}

/* Telefoon: alleen het hartje met het aantal, zodat de rij op één regel blijft */
@media (max-width: 500px) {
	.dv-occ-fav-tekst {
		display: none;
	}

	/* Drie knoppen naast elkaar: iets compacter, anders wordt "Standaard" afgekapt */
	#dv-occasions .dv-occ-btn {
		gap: 8px;
		padding: 0 12px;
	}

	#dv-occasions .dv-occ-sort {
		padding: 0 30px 0 12px;
		background-position: right 11px center;
	}
}

/* ---------- overgang binnen het overzicht (zie occasions.js, aankomst) ----------
   Filters, chips, sorteren, paginanummers en Favorieten laden een nieuwe pagina. Browsers met
   view transitions laten oude en nieuwe pagina in elkaar overvloeien; de kaarten komen daarna
   kort na elkaar binnen. Alleen op deze pagina: occasions.css staat nergens anders. */
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: .25s;
}

#dv-occasions.dv-occ-aankomst .grid-container .list > .item.occasion {
	animation: dv-kaart-in .45s cubic-bezier(.2, .7, .2, 1) both;
	animation-delay: calc(var(--dv-i, 0) * 45ms);
}

@keyframes dv-kaart-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	#dv-occasions.dv-occ-aankomst .grid-container .list > .item.occasion {
		animation: none;
	}
}