/**
 * Het vergrootvenster van de fotogalerij (PhotoSwipe).
 *
 * Larissa vroeg om wit in plaats van zwart, een zichtbare sluitknop en de
 * navigatie onder de foto. De standaardopmaak van PhotoSwipe is daar niet op
 * gemaakt: die tekent alle knoppen met één witte sprite, en wit op wit is niets.
 * Daarom staan de pictogrammen hieronder als SVG in de regel zelf, in dezelfde
 * donkere kleur als de tekst op de site. Dat scheelt ook een extra bestand.
 *
 * WooCommerce zet die sprite met !important terug, zodat een thema het venster
 * niet kan slopen. Vandaar dat de achtergrond van de knoppen hieronder ook met
 * !important staat; specificiteit alleen wint het daar niet van.
 *
 * PhotoSwipe houdt boven en onder de foto een band vrij en rekent de foto daar
 * zelf omheen. Standaard is die band 44 px en plakken de knoppen tegen de
 * onderrand van het scherm. fotovenster.js zet de onderste band op 88 px; de
 * maten hieronder gaan daarvan uit, zodat de knoppen hoger staan en de foto
 * nog steeds vrij blijft.
 */


/* ------------------------------------------------------------ de achtergrond */

.pswp.pswp--open .pswp__bg {
	background: #ffffff;
	opacity: 1 !important;
}


/* ---------------------------------------------------------------- de knoppen */

.pswp .pswp__ui .pswp__button {
	width: 40px;
	height: 40px;
	margin: 2px;

	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 50%;

	opacity: 1;

	background-color: #ffffff !important;
	background-image: none !important;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 20px 20px;

	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
}

.pswp .pswp__ui .pswp__button:hover,
.pswp .pswp__ui .pswp__button:focus-visible {
	background-color: #f2f2f2 !important;
	opacity: 1;
}


/* Delen, volledig scherm en zoom niet tonen */

.pswp .pswp__ui .pswp__button--share,
.pswp .pswp__ui .pswp__button--fs,
.pswp .pswp__ui .pswp__button--zoom {
	display: none;
}


/* ---------------------------------------------------------------- sluitknop */

.pswp .pswp__ui .pswp__button--close {
	position: absolute;

	top: auto;
	left: calc(50% - 22px);
	right: auto;
	bottom: 24px;

	width: 44px;
	height: 44px;
	margin: 0;

	background-size: 22px 22px;

	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1b1b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") !important;
}


/* ------------------------------------------------ navigatie onder de foto */

.pswp .pswp__ui .pswp__button--arrow--left,
.pswp .pswp__ui .pswp__button--arrow--right {
	top: auto;
	bottom: 26px;

	width: 40px;
	height: 40px;
	margin: 0;

	opacity: 1;
}

.pswp .pswp__ui .pswp__button--arrow--left {
	left: calc(50% - 92px);
	right: auto;

	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1b1b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") !important;
}

.pswp .pswp__ui .pswp__button--arrow--right {
	left: calc(50% + 52px);
	right: auto;

	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1b1b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") !important;
}


/* Bij één foto geen pijlen of teller */

.pswp .pswp__ui--one-slide .pswp__button--arrow--left,
.pswp .pswp__ui--one-slide .pswp__button--arrow--right,
.pswp .pswp__ui--one-slide .pswp__counter {
	display: none;
}


/* Standaard PhotoSwipe-pijlen uitschakelen */

.pswp .pswp__ui .pswp__button--arrow--left::before,
.pswp .pswp__ui .pswp__button--arrow--right::before {
	display: none;
}


/* ------------------------------------------------------- bovenbalk en teller */

.pswp .pswp__ui .pswp__top-bar,
.pswp .pswp__ui--fit .pswp__top-bar {
	background: transparent;
}

.pswp .pswp__ui .pswp__top-bar {
	position: static;
}

.pswp .pswp__ui .pswp__counter {
	padding: 0 14px;

	color: #1b1b1b;

	font-size: 14px;
	line-height: 44px;

	opacity: 1;
}


/* Geen bijschrift */

.pswp .pswp__ui .pswp__caption {
	display: none;
}


/* Wachtrondje zichtbaar op witte achtergrond */

.pswp .pswp__ui .pswp__preloader__donut {
	border-color: #1b1b1b;
	border-bottom-color: transparent;
	border-right-color: transparent;
}


/* Knoppen zichtbaar houden */

.pswp .pswp__ui--idle .pswp__top-bar,
.pswp .pswp__ui--idle .pswp__button--arrow--left,
.pswp .pswp__ui--idle .pswp__button--arrow--right {
	opacity: 1;
}


/* ============================================================
   PHOTOSWIPE NAVIGATIE OOK OP MOBIEL
   ============================================================ */

@media (max-width: 767px) {

	.pswp
	.pswp__ui:not(.pswp__ui--one-slide)
	.pswp__button--arrow--left,

	.pswp
	.pswp__ui:not(.pswp__ui--one-slide)
	.pswp__button--arrow--right {
		display: block;
		visibility: visible;
		opacity: 1;

		top: auto;
		bottom: 26px;

		width: 40px;
		height: 40px;

		pointer-events: auto;
	}

	.pswp
	.pswp__ui:not(.pswp__ui--one-slide)
	.pswp__button--arrow--left {
		left: calc(50% - 92px);
		right: auto;
	}

	.pswp
	.pswp__ui:not(.pswp__ui--one-slide)
	.pswp__button--arrow--right {
		left: calc(50% + 52px);
		right: auto;
	}
}