/* Opmaak van de productgalerij: verticale thumbnail-slider links, hoofdfoto rechts, horizontaal op mobiel. */
.pgs {
	--pgs-gap: 12px;
	display: grid;
	grid-template-columns: var(--pgs-thumb-w, 90px) minmax(0, 1fr);
	gap: var(--pgs-gap);
	width: 100%;
}
.pgs--single { grid-template-columns: minmax(0, 1fr); }
.pgs *, .pgs *::before, .pgs *::after { box-sizing: border-box; }

/* Thumbnails: kolom even hoog als hoofdfoto */
.pgs-thumbs { position: relative; min-height: 0; }
.pgs-thumbs > .pgs-viewport {
	position: absolute; inset: 0;
	overflow-y: auto; overflow-x: hidden;
	scrollbar-width: none; scroll-behavior: smooth;
	overscroll-behavior: contain;
}
.pgs-viewport::-webkit-scrollbar { display: none; }
.pgs-track { display: flex; flex-direction: column; gap: var(--pgs-gap); }

.pgs-thumb {
	display: block; width: 100%; padding: 0; margin: 0;
	border: 2px solid transparent; background: none; cursor: pointer;
	opacity: .65; transition: opacity .2s, border-color .2s; line-height: 0;
	border-radius: var(--pgs-radius, 0); overflow: hidden;
}
.pgs-thumb:hover, .pgs-thumb:focus-visible { opacity: 1; }
.pgs-thumb.is-active { opacity: 1; border-color: var(--pgs-active, #222); }
.pgs-thumb img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

/* Pijltjes (thumbnails + hoofdfoto) */
.pgs-nav, .pgs-arrow {
	display: flex; align-items: center; justify-content: center;
	padding: 0; border: 0; cursor: pointer;
	color: var(--pgs-arrow, #fff); background: var(--pgs-arrow-bg, #222);
	transition: opacity .2s; z-index: 2;
}
.pgs-nav svg, .pgs-arrow svg { width: 18px; height: 18px; display: block; }
.pgs-nav[disabled], .pgs-arrow[disabled] { opacity: .3; cursor: default; }

.pgs-nav { position: absolute; left: 50%; width: 32px; height: 32px; border-radius: 50%; transform: translateX(-50%); }
.pgs-nav--prev { top: 6px; }
.pgs-nav--next { bottom: 6px; }
.pgs-nav--next svg { transform: rotate(180deg); }
.pgs-thumbs:not(.has-overflow) .pgs-nav { display: none; }

/* Hoofdfoto */
.pgs-main { position: relative; line-height: 0; }
.pgs-main-link { display: block; cursor: zoom-in; overflow: hidden; border-radius: var(--pgs-radius, 0); background: var(--pgs-main-bg, #fff); }
.pgs[data-lightbox="0"] .pgs-main-link { cursor: default; }
.pgs-main-img { width: 100%; height: auto; display: block; transition: opacity .2s; }
.pgs-main-img.is-loading { opacity: .4; }

/* Vaste hoogte grote afbeelding (vanaf tablet) */
@media (min-width: 768px) {
	.pgs--fixed .pgs-main-img { height: var(--pgs-main-h); object-fit: contain; }
}

.pgs-arrow {
	position: absolute; top: 50%; width: 40px; height: 40px; border-radius: 50%;
	transform: translateY(-50%); opacity: 0;
}
.pgs-arrow--prev { left: 12px; }
.pgs-arrow--prev svg { transform: rotate(-90deg); }
.pgs-arrow--next { right: 12px; }
.pgs-arrow--next svg { transform: rotate(90deg); }
.pgs-main:hover .pgs-arrow, .pgs-arrow:focus-visible { opacity: 1; }

/* Mobiel: thumbnails onder de hoofdfoto, horizontaal */
@media (max-width: 767px) {
	.pgs { grid-template-columns: minmax(0, 1fr); }
	.pgs-thumbs { order: 2; }
	.pgs-thumbs > .pgs-viewport { position: static; overflow-x: auto; overflow-y: hidden; }
	.pgs-track { flex-direction: row; }
	.pgs-thumb { flex: 0 0 72px; width: 72px; }
	.pgs-nav { display: none !important; }
	.pgs-arrow { opacity: 1; width: 34px; height: 34px; }
}

/* Lightbox */
.pgs-lb {
	position: fixed; inset: 0; z-index: 999999;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, .9); line-height: 0;
}
.pgs-lb img { max-width: 92vw; max-height: 90vh; width: auto; height: auto; }
.pgs-lb .pgs-arrow { opacity: 1; }
.pgs-lb-close {
	position: absolute; top: 16px; right: 16px; width: 40px; height: 40px;
	border: 0; border-radius: 50%; cursor: pointer; font-size: 26px; line-height: 40px;
	color: var(--pgs-arrow, #fff); background: var(--pgs-arrow-bg, #222);
}