/* =============================================================================
   SG Producten – Grid + Categoriefilter + Modal
   Prefix: sg-  (WooCommerce-veilig)
   ============================================================================= */

/* ── CSS Custom Properties ───────────────────────────────────────────────── */

:root {
	--sg-wit:          #ffffff;
	--sg-achtergrond:  #f8f8f6;
	--sg-tekst:        #1a1a1a;
	--sg-tekst-licht:  #6b6b6b;
	--sg-lijn:         #e8e6e1;
	--sg-accent:       #1a1a1a;     /* Sluit aan op Salient primaire kleur */
	--sg-hover-bg:     #f2f0ec;
	--sg-modal-schaduw: 0 24px 64px rgba(0, 0, 0, .16), 0 4px 16px rgba(0, 0, 0, .08);
	--sg-radius:       1rem;
	--sg-transitie:    .22s ease;
}


/* ── Leeg bericht ─────────────────────────────────────────────────────────── */

.sg-producten-leeg {
	text-align: center;
	color: var(--sg-tekst-licht);
	padding: 3rem 1rem;
}


/* =============================================================================
   CATEGORIEFILTER
   ============================================================================= */

.sg-producten-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 40px;
}

.sg-producten-filter--links   { justify-content: flex-start; }
.sg-producten-filter--midden  { justify-content: center; }
.sg-producten-filter--rechts  { justify-content: flex-end; }

.sg-filter-knop {
	display: inline-block;
	padding: 8px 20px;
	background: transparent;
	border: 1px solid var(--sg-lijn);
	border-radius: 100px !important; /* !important: overschrijft Salient button-stijlen */
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .03em;
	color: var(--sg-tekst-licht);
	cursor: pointer;
	transition: background var(--sg-transitie), color var(--sg-transitie), border-color var(--sg-transitie);
	white-space: nowrap;
}
button.sg-filter-knop, body[data-button-style*="slightly_rounded"] button.sg-filter-knop {
	border-radius: 100px !important;
}

.sg-filter-knop:hover {
	background: var(--sg-hover-bg);
	color: var(--sg-tekst);
	border-color: transparent;
}

.sg-filter-knop.is-actief {
	background: var(--sg-accent);
	color: var(--sg-wit);
	border-color: var(--sg-accent);
}

.sg-filter-knop.is-actief:hover {
	opacity: .85;
}


/* =============================================================================
   PRODUCTEN GRID
   ============================================================================= */

.sg-producten-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(var(--sg-cols, 3), 1fr);
}

.sg-producten-grid--cols-2 { --sg-cols: 2; }
.sg-producten-grid--cols-3 { --sg-cols: 3; }
.sg-producten-grid--cols-4 { --sg-cols: 4; }

/* Tablet: max 2 kolommen */
@media (max-width: 960px) {
	.sg-producten-grid--cols-3,
	.sg-producten-grid--cols-4 {
		--sg-cols: 2;
	}
}

/* Mobiel: altijd 1 kolom */
@media (max-width: 560px) {
	.sg-producten-grid {
		--sg-cols: 1 !important;
		gap: 16px;
	}
}

/* Verborgen kaart (filter) */
.sg-product-kaart[data-verborgen="true"] {
	display: none;
}


/* ── Product kaart ────────────────────────────────────────────────────────── */

.sg-product-kaart {
	background: var(--sg-wit);
	border: 1px solid var(--sg-lijn);
	border-radius: var(--sg-radius);
	overflow: hidden;
	cursor: pointer;
	transition: transform var(--sg-transitie), box-shadow var(--sg-transitie);
	outline: none;
}

.sg-product-kaart:hover,
.sg-product-kaart:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .09);
}

.sg-product-kaart:focus-visible {
	outline: 2px solid var(--sg-accent);
	outline-offset: 2px;
}


/* Afbeelding – 7:5 verhouding (originele fotoproportie, liggend), volledig zichtbaar */
.sg-product-kaart__afbeelding {
	position: relative;
	overflow: hidden;
	aspect-ratio: 7 / 5;
	background: var(--sg-achtergrond);
}

.sg-product-kaart__afbeelding img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform .4s ease;
}

.sg-product-kaart:hover .sg-product-kaart__afbeelding img {
	transform: scale(1.04);
}

.sg-product-kaart__afbeelding--placeholder {
	width: 100%;
	height: 100%;
	background: var(--sg-achtergrond);
}


/* Info */
.sg-product-kaart__info {
	padding: 18px 20px 20px;
}

.sg-product-kaart__titel {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sg-tekst);
}

.sg-product-kaart__prijs {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--sg-tekst-licht);
	letter-spacing: .01em;
}

.sg-product-kaart__cta-hint {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sg-tekst);
	border-bottom: 1px solid var(--sg-accent);
	padding-bottom: 1px;
	transition: opacity var(--sg-transitie);
}

.sg-product-kaart:hover .sg-product-kaart__cta-hint {
	opacity: .6;
}


/* =============================================================================
   MODAL
   ============================================================================= */

#sg-product-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	pointer-events: none;
	visibility: hidden;
}

#sg-product-modal.is-open {
	pointer-events: auto;
	visibility: visible;
}


/* Backdrop */
.sg-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	transition: opacity .28s ease;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

#sg-product-modal.is-open .sg-modal__backdrop {
	opacity: 1;
}


/* Container – liggend 7:5; afbeeldingsbreedte = hoogte × 7/5.
   Hoogte:              min(35.7vw, 560px, 70vh)
   Afbeeldingsbreedte:  min(50vw, 784px)              (= hoogte × 7/5)
   Bij 1200px viewport: afbeelding 600px, inhoud 480px ✓
   Bij 1400px max-width: afbeelding 784px, inhoud 616px ✓ */
.sg-modal__container {
	position: relative;
	z-index: 1;
	background: var(--sg-wit);
	border-radius: var(--sg-radius);
	box-shadow: var(--sg-modal-schaduw);
	width: 90vw;
	max-width: 1400px;
	height: min(35.7vw, 560px, 70vh);
	overflow: hidden;
	display: grid;
	grid-template-columns: min(50vw, 784px) 1fr;
	grid-template-rows: minmax(0, 1fr);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .28s ease, transform .28s ease;
}

#sg-product-modal.is-open .sg-modal__container {
	opacity: 1;
	transform: translateY(0);
}


/* Sluit-knop */
.sg-modal__sluiten {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 10;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sg-wit);
	border: 1px solid var(--sg-lijn);
	border-radius: 50%;
	cursor: pointer;
	color: var(--sg-tekst);
	padding: 0;
	transition: background var(--sg-transitie), color var(--sg-transitie);
}

.sg-modal__sluiten:hover {
	background: var(--sg-accent);
	color: var(--sg-wit);
	border-color: var(--sg-accent);
}

.sg-modal__sluiten:focus-visible {
	outline: 2px solid var(--sg-accent);
	outline-offset: 2px;
}


/* Afbeeldingskolom – vult de volledige kolomhoogte (= containerhoogte = vierkant) */
.sg-modal__afbeelding-kolom {
	grid-column: 1;
	grid-row: 1;
	position: relative;
	background: var(--sg-achtergrond);
	overflow: hidden;
}

/* Lightbox-link vult de volledige afbeeldingskolom */
.sg-modal__lightbox-trigger {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	cursor: zoom-in;
	text-decoration: none;
}

.sg-modal__lightbox-trigger:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/* Zoom-vergrotingsglas – verschijnt op hover/focus rechtsonder in de afbeelding */
.sg-modal__zoom-icoon {
	position: absolute;
	bottom: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, .88);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sg-tekst);
	opacity: 0;
	transform: scale(.85);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.sg-modal__lightbox-trigger:hover .sg-modal__zoom-icoon,
.sg-modal__lightbox-trigger:focus-visible .sg-modal__zoom-icoon {
	opacity: 1;
	transform: scale(1);
}

.sg-modal__afbeelding {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.sg-modal__afbeelding[src=""] {
	display: none;
}

.sg-modal__afbeelding--placeholder {
	position: absolute;
	inset: 0;
	background: var(--sg-achtergrond);
}

.sg-modal__afbeelding--placeholder.is-verborgen {
	display: none;
}


/* Inhoud – container is overflow:hidden; alleen tekst scrollt */
.sg-modal__inhoud {
	grid-column: 2;
	grid-row: 1;
	padding: 40px 36px 32px 32px;
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow: hidden;
	min-height: 0;
}

.sg-modal__titel {
	margin: 0 0 12px;
	font-size: clamp(18px, 2.5vw, 24px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--sg-tekst);
	padding-right: 32px; /* ruimte voor sluit-knop */
}

.sg-modal__prijs {
	margin: 0 0 1em;
    padding: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--sg-tekst-licht);
	letter-spacing: .02em;
}

.sg-modal__prijs:empty {
	display: none;
}

.sg-modal__tekst {
	flex: 1;
	font-size: 14px;
	line-height: 1.7;
	color: var(--sg-tekst);
	margin-bottom: 0;
	overflow-y: auto;
	min-height: 0;
	/* Dunne scrollbar op desktop */
	scrollbar-width: thin;
	scrollbar-color: var(--sg-lijn) transparent;
	/* Gradient fade onderaan als scroll-hint */
	-webkit-mask-image: linear-gradient(to bottom, black calc(100% - 48px), transparent 100%);
	mask-image: linear-gradient(to bottom, black calc(100% - 48px), transparent 100%);
	transition: mask-image .2s ease, -webkit-mask-image .2s ease;
}

/* Verberg fade als er niets meer te scrollen is */
.sg-modal__tekst.is-uitgeschreven {
	-webkit-mask-image: none;
	mask-image: none;
}

.sg-modal__tekst::-webkit-scrollbar {
	width: 4px;
}

.sg-modal__tekst::-webkit-scrollbar-track {
	background: transparent;
}

.sg-modal__tekst::-webkit-scrollbar-thumb {
	background: var(--sg-lijn);
	border-radius: 2px;
}

.sg-modal__tekst p:first-child { margin-top: 0; }
.sg-modal__tekst p:last-child  { margin-bottom: 0; }

.sg-modal__tekst ul {
    margin-left: 12px;
    column-count: 2;
    column-gap: 24px;
}

.sg-modal__tekst ul li {
    break-inside: avoid;
}


/* CTA knop – altijd zichtbaar onderaan, buiten de scroll */
.sg-modal__cta.nectar-button {
	display: inline-block;
	align-self: flex-start;
	flex-shrink: 0;
	margin-top: 24px;
	padding: 12px 28px;
	background: var(--sg-accent);
	color: var(--sg-wit) !important;
	text-decoration: none !important;
	border-radius: var(--sg-radius);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: opacity var(--sg-transitie);
	border: none;
}

.sg-modal__cta:hover {
	opacity: .82;
	color: var(--sg-wit) !important;
}

.sg-modal__cta:focus-visible {
	outline: 2px solid var(--sg-accent);
	outline-offset: 3px;
}


/* ── Modal mobiel (≤ 767px) ───────────────────────────────────────────────── */

@media (max-width: 767px) {

	#sg-product-modal {
		padding: 0;
		align-items: flex-end;
	}

	.sg-modal__container {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr; /* afbeelding auto, content vult de rest */
		width: 100%;
		height: 100vh;
		overflow: hidden;
		border-radius: 0; /* vult volledig scherm, ronde hoeken niet zichtbaar */
		transform: translateY(24px);
	}

	#sg-product-modal.is-open .sg-modal__container {
		transform: translateY(0);
	}

	.sg-modal__afbeelding-kolom {
		grid-column: 1;
		grid-row: 1;
		aspect-ratio: 7 / 5;
		width: 100%;
	}

	.sg-modal__inhoud {
		grid-column: 1;
		grid-row: 2;
		padding: 20px 20px 24px;
		overflow: hidden; /* tekst scrollt intern, CTA blijft altijd onderin zichtbaar */
	}

	.sg-modal__tekst ul {
		column-count: 1;
	}

	.sg-modal__sluiten {
		top: 12px;
		right: 12px;
	}

	.sg-modal__titel {
		padding-right: 44px;
	}
}

/* ── Modal portrait-tablet (768px–1023px, staand) ───────────────────────── */

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {

	.sg-modal__container {
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(0, 1fr);
		width: min(90vw, 600px); /* popup-breedte = afbeeldingsbreedte */
		height: 90vh;
		overflow: hidden;
	}

	.sg-modal__afbeelding-kolom {
		grid-column: 1;
		grid-row: 1;
		aspect-ratio: 7 / 5;
		width: 100%;
	}

	.sg-modal__inhoud {
		grid-column: 1;
		grid-row: 2;
		padding: 28px 32px 28px 32px;
		min-height: 0;
	}
}


/* ── Scrollbar stijl (webkit) ────────────────────────────────────────────── */

.sg-modal__container::-webkit-scrollbar,
.sg-modal__inhoud::-webkit-scrollbar {
	width: 4px;
}

.sg-modal__container::-webkit-scrollbar-thumb,
.sg-modal__inhoud::-webkit-scrollbar-thumb {
	background: var(--sg-lijn);
	border-radius: 2px;
}


/* =============================================================================
   SG CATEGORIEËN GRID – [sg_categorieen_grid]
   Twee layouts: 'kaarten' (pakkettenpagina) en 'carrousel' (homepage Flickity)
   ============================================================================= */

/* ── Kaarten layout ───────────────────────────────────────────────────────── */

/* Wrapper: flex-raster met kolommen.
   justify-content: center zorgt dat een onvolledige rij (bv. 2 kaarten bij 3-kolom)
   gecentreerd staat i.p.v. uitgesmeerd over de volle breedte. */
.sg-cat-wrapper--kaarten {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
}

/* Kaart: verticale flex-kolom, geheel klikbaar */
.sg-cat-kaart {
	display: flex;
	flex-direction: column;
	text-decoration: none !important;
	color: inherit !important;
}

/* Kolom-breedte.
   flex-grow: 0 voorkomt dat kaarten in een onvolledige rij uitrekken (bv. 2 van 3).
   max-width borgt de breedte ook als er minder items zijn dan kolommen. */
.sg-cat-wrapper--cols-1 .sg-cat-kaart { flex: 0 1 100%;             max-width: 100%; }
.sg-cat-wrapper--cols-2 .sg-cat-kaart { flex: 0 1 calc(50% - 12px); max-width: calc(50% - 12px); }
.sg-cat-wrapper--cols-3 .sg-cat-kaart { flex: 0 1 calc(33.333% - 16px); max-width: calc(33.333% - 16px); }

/* Icoon boven de afbeelding (80px, gecentreerd – matching .custom-width-80px) */
.sg-cat-kaart__icoon {
	width: 80px;
	height: 80px;
	margin: 0 auto 12px;
	flex-shrink: 0;
}

.sg-cat-kaart__icoon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Afbeelding: vierkant, border-radius 16px, hover-overlay via ::after */
.sg-cat-kaart__media {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	aspect-ratio: 1 / 1;
}

.sg-cat-kaart__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition:
		box-shadow .45s cubic-bezier(.22, 1, .36, 1),
		filter     .45s cubic-bezier(.22, 1, .36, 1);
}

/* Hover: knoplabel verschijnt gecentreerd over de afbeelding (alleen voor link-kaarten) */
.sg-cat-kaart:is(a) .sg-cat-kaart__media::after {
	content: attr(data-label);
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 5;
	transform: translate(-50%, -40%);
	opacity: 0;
	pointer-events: none;
	padding: 12px 22px;
	border-radius: 999px;
	border: 1px solid #fff;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 8px 25px rgba(0, 0, 0, .18);
	transition: opacity .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}

.sg-cat-kaart:is(a):hover .sg-cat-kaart__img {
	box-shadow: 0 0 25px rgba(0, 0, 0, .15);
	filter: brightness(.9);
}

.sg-cat-kaart:is(a):hover .sg-cat-kaart__media::after {
	opacity: 1;
	transform: translate(-50%, -50%);
}

/* Tekst onder de afbeelding */
.sg-cat-kaart__body {
	padding: 16px 4px 0;
}

.sg-cat-kaart__naam {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sg-tekst);
	margin: 0 0 8px;
}

.sg-cat-kaart__omschrijving {
	font-size: 14px;
	line-height: 1.6;
	color: var(--sg-tekst-licht);
	margin: 0;
}

/* Tablet */
@media (max-width: 960px) {
	.sg-cat-wrapper--cols-3 .sg-cat-kaart {
		flex: 1 1 calc(50% - 12px);
	}
}

/* Mobiel */
@media (max-width: 600px) {
	.sg-cat-wrapper--cols-2 .sg-cat-kaart,
	.sg-cat-wrapper--cols-3 .sg-cat-kaart {
		flex: 1 1 100%;
	}

	.sg-cat-kaart__naam { font-size: 18px; }
}


/* ── Carrousel layout (Salient nectar-flickity + data-desktop-columns) ────── */

.sg-cat-carrousel {
	outline: none;
}

/*
 * Pre-init: toon cellen horizontaal vóórdat Salient/Flickity de carrousel initialiseert.
 * Structuur is identiek aan WPBakery carousel:
 *   .sg-cat-carrousel > .flickity-viewport > .flickity-slider > .cell
 * Salient's flickity.css past .flickity-slider .cell al aan via data-desktop-columns.
 * Deze regels zorgen alleen dat .flickity-viewport de juiste hoogte heeft vóór init.
 *
 * Peek-offset via padding (Flickity compatible):
 * - Voeg padding toe aan viewport zodat cells inset verschijnen
 * - Compenseer met negative margins op carousel container
 * - Dit zorgt dat carousel full-width blijft en peek-effect werkt
 */
.nectar-flickity.sg-cat-carrousel {
	margin-left: -8%;
	margin-right: -8%;
}

.sg-cat-carrousel .flickity-viewport {
	width: 100%;
	padding-left: 8%;
	padding-right: 8%;
	box-sizing: border-box;
}

/* Tablet: 4 items zichtbaar → ~12.5% per item */
@media (max-width: 1299px) {
	.nectar-flickity.sg-cat-carrousel {
		margin-left: -12.5%;
		margin-right: -12.5%;
	}

	.sg-cat-carrousel .flickity-viewport {
		padding-left: 12.5%;
		padding-right: 12.5%;
	}
}

/* Kleine schermen: 2 items zichtbaar → ~20% per item */
@media (max-width: 999px) {
	.nectar-flickity.sg-cat-carrousel {
		margin-left: -20%;
		margin-right: -20%;
	}

	.sg-cat-carrousel .flickity-viewport {
		padding-left: 20%;
		padding-right: 20%;
	}
}

/* Mobiel: 3 items (1 volledig + peeks) */
@media (max-width: 689px) {
	.nectar-flickity.sg-cat-carrousel {
		margin-left: -60%;
		margin-right: -60%;
	}

	.sg-cat-carrousel .flickity-viewport {
		padding-left: 60%;
		padding-right: 60%;
	}
}

/* Elk slideitem: flex-kolom, afbeelding → naam → icoon */
.sg-cat-slide__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none !important;
	color: var(--sg-tekst) !important;
	gap: 10px;
}

/* Hover effect alleen voor link-slides */
.sg-cat-slide__link:is(a) {
	cursor: pointer;
}

/* Afbeelding: vierkant met border-radius 16px */
.sg-cat-slide__image-wrap {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 16px;
	overflow: hidden;
	position: relative;
}

.sg-cat-slide__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: filter .35s ease;
}

.sg-cat-slide__link:is(a):hover .sg-cat-slide__image-wrap img {
	filter: brightness(.9);
	box-shadow: 0 0 25px rgba(0, 0, 0, .15);
}

/* Overlay knop op carousel slide (alleen voor links) */
.sg-cat-slide__link:is(a) .sg-cat-slide__image-wrap::after {
	content: attr(data-label);
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 5;
	transform: translate(-50%, -40%);
	opacity: 0;
	pointer-events: none;
	padding: 12px 22px;
	border-radius: 999px;
	border: 1px solid #fff;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 8px 25px rgba(0, 0, 0, .18);
	transition: opacity .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}

.sg-cat-slide__link:is(a):hover .sg-cat-slide__image-wrap::after {
	opacity: 1;
	transform: translate(-50%, -50%);
}

/* Naam onder de afbeelding */
.sg-cat-slide__naam {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #98a1a6;
    color: #fff;
    padding: clamp(3px, 0.5vw, 6px) clamp(6px, 1vw, 10px);
    font-weight: bold;
    font-size: clamp(14px, 2vw, 28px);
    z-index: 10;
    white-space: nowrap;
}

/* Icoon onderaan de slide (80px, matching WPBakery custom-width-80px) */
.sg-cat-slide__icoon {
	width: 80px;
	height: 80px;
	margin-top: 8px;
	flex-shrink: 0;
}

.sg-cat-slide__icoon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}


/* =============================================================================
   LIGHTBOX  –  Volledige afbeelding overlay (eigen implementatie, geen Magnific)
   ============================================================================= */

#sg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	transition: opacity .25s ease, visibility .25s ease;
}

#sg-lightbox.is-open {
	pointer-events: auto;
	visibility: visible;
	opacity: 1;
}

.sg-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .65);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	cursor: zoom-out;
}

.sg-lightbox__afbeelding {
	position: relative;
	z-index: 1;
	max-width: 100%;
	max-height: calc(100vh - 80px);
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 32px 80px rgba(0, 0, 0, .5);
	opacity: 0;
	transform: scale(.97);
	transition: opacity .25s ease .05s, transform .25s ease .05s;
	pointer-events: none;
}

#sg-lightbox.is-open .sg-lightbox__afbeelding {
	opacity: 1;
	transform: scale(1);
}

.sg-lightbox__sluiten {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .15);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	padding: 0;
	transition: background .2s ease;
}

.sg-lightbox__sluiten:hover {
	background: rgba(255, 255, 255, .28);
}

.sg-lightbox__sluiten:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}