/* PRODUCTINFORMATIE-POP-UP */
/* De inhoud van deze pop-up is dezelfde markup als de productpagina; zie
   inc/productinformatie.php. De opmaak van die pagina geldt hier dus ook - die
   stylesheet staat op een productpagina toch al in het document, ook als de tool
   open is. Dit bestand doet alleen wat daarvoor nog mist: de pop-up zelf op maat,
   en de paar plekken waar paginaopmaak binnen een pop-up niet uitkomt. */

/* De laag eromheen legt zijn pop-ups tegen de onderrand (align-items: end), wat
   klopt voor de kleine pop-ups die vanaf de balk onderin opkomen. Deze is 80dvh
   hoog en hoort midden op het scherm te staan. Alleen terwijl juist deze pop-up
   openstaat, dus de andere houden hun eigen plek. */
.pop-up-open-productinformation .pop-up-over-all {
	align-items: center;
}

.pop-up-productinformation {
	/* 45px lucht rondom, en niet verder groeien dan een scherm van 1920x1080:
	   1920 - 2x45 = 1830 breed, 1080 - 2x45 = 990 hoog. Op een kleiner scherm
	   houdt de min() diezelfde 45px aan de randen over.

	   De gedeelde regel in customizer-main.css zet height: 80dvh voor deze
	   pop-up; die staat in een eerder ingeladen bestand, dus deze wint. */
	--productinfo-breedte: min(1830px, calc(100vw - 90px));
	--productinfo-hoogte: min(990px, calc(100dvh - 90px));
}

.pop-up-open-productinformation .pop-up-productinformation {
	width: var(--productinfo-breedte);
	height: var(--productinfo-hoogte);
	/* .pop-ups-mobile eromheen is 100vw breed en legt zijn kinderen gewoon als
	   blokken neer. Zonder deze marges plakt de pop-up tegen de linkerrand; de
	   45px boven en onder komt van align-items: center hierboven. */
	margin-inline: auto;
	/* .tool-pop-up zet 13px rondom. Hier loopt de kop tot aan de rand, met een
	   scheidingslijn eronder; de binnenmarge zit op de delen zelf. */
	padding: 0;
	align-items: stretch;
}

/* De gedeelde .pop-up-content centreert zijn kind en is zo hoog als die inhoud.
   Hier moet hij juist de volle hoogte van de pop-up vullen, want de kop staat
   vast en alleen het middenstuk scrollt. */
.pop-up-productinformation .pop-up-content {
	height: 100%;
	align-items: stretch;
	justify-content: flex-start;
	overflow: hidden;
	border-radius: inherit;
}

/* --- kop --- */

.pop-up-productinformation .pop-up-tabs-buttons {
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	padding: 14px 24px;
	gap: 16px;
}

.pop-up-productinformation .productinformation-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	/* Altijd één regel: motProductinfoTekstenPassen() verkleint de letter tot
	   het past, en wat daarna nog te lang is wordt afgekapt met "…". Zonder
	   min-width: 0 krimpt een flexitem niet onder zijn tekst. */
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* "Sluiten" en het kruisje geven nooit ruimte af aan de titel. */
.pop-up-productinformation .pop-up-tabs-buttons .close-button {
	flex-shrink: 0;
}

/* --- inhoud --- */

/* De gedeelde regel zet display: flex, height: 100% en een max-height die op de
   tabbladen van de afbeeldingspop-up is gemaakt. De productinformatie is een
   gewone pagina-indeling die van boven naar beneden loopt en zelf bepaalt hoe
   hoog hij is. */
.pop-up-productinformation .pop-up-tabs-content {
	display: block;
	flex: 1 1 auto;
	height: auto;
	max-height: none;
	padding: 20px 24px 28px;
}

/* Lege overblijfselen van de productpagina. Ze staan er altijd, ook zonder
   inhoud, en zouden hier alleen een gat opleveren. */
.pop-up-productinformation .woocommerce-notices-wrapper:empty,
.pop-up-productinformation .product_meta {
	display: none;
}

/* Blokken van de productpagina die in dit ontwerp niet in de pop-up horen.
   Bewust met CSS en niet met de pop-up-vlag in PHP: ze komen van elders
   (trusted, levertijden, de korte omschrijving) en het is niet na te gaan of ze
   net als het gender-swapblok in functions.php een sluitende </div> meedragen
   die de opbouw eromheen nodig heeft. Zie de val bij stap 6 in
   PRODUCTINFORMATIE-POPUP-PLAN.md.

   customer-designs heet in de pop-up motinfo-customer-designs;
   motProductinfoIdsHernoemen() zet dat voorvoegsel er bij het invoegen voor. */
#motinfo-customer-designs,
.pop-up-productinformation .trusted-widget,
.pop-up-productinformation .sdvz,
.pop-up-productinformation .description-short-display,
.pop-up-productinformation .sd_rating2_container,
.pop-up-productinformation .ai-chatbot-button,
.pop-up-productinformation .extend-icons,
/* De "Bewerken"-knop van de Fancy Product Designer-plugin. Op de pagina wordt
   die verborgen met #fpd-start-customizing-button.fpd-block - een id-selector,
   en het id heet hier motinfo-... Vandaar deze regel op de class, die het
   hernoemen wel overleeft. Zie "Prijs van het hernoemen" hieronder. */
.pop-up-productinformation .fpd-block {
	display: none;
}

/* PRIJS VAN HET HERNOEMEN
   motProductinfoIdsHernoemen() zet motinfo- voor elk id in de opgehaalde markup,
   anders pakt elke getElementById() de productpagina onder de tool. Daardoor
   missen opmaakregels die op zo'n id staan hun doel. Twee van de zes hernoemde
   id's dragen opmaak: fpd-start-customizing-button (hierboven) en shirt-info.
   Die tweede staat hieronder overgenomen uit features/colorslider/colorslider.css.
   Komt er een id bij, loop dan na of er CSS op hangt. */
.pop-up-productinformation #motinfo-shirt-info {
	font-weight: initial;
	font-size: 1.3rem;
}

@media (max-width: 768px) {
	.pop-up-productinformation #motinfo-shirt-info {
		padding-left: 10px;
	}
}

/* Blijft staan waar hij staat. Op de productpagina kleeft dit blok aan de
   bovenkant van het scherm terwijl je langs de omschrijving scrollt; in een
   pop-up van 80dvh levert dat alleen een samenvatting op die met je meereist
   terwijl de galerij ernaast wegloopt. */
.pop-up-productinformation .slide-with-top {
	position: static;
	top: auto;
}

/* --- galerij --- */

/* De galerij is zijn eigen scrollvlak: de afbeeldingen lopen binnen die hoogte
   langs, terwijl de pop-up eromheen gewoon zijn eigen gang gaat. Niet sticky -
   hij schuift dus mee als je de pop-up doorscrollt. De hoogte is die van de
   pop-up (80dvh) min de kop en de binnenmarges van het middenstuk. */
.pop-up-productinformation .woocommerce-product-gallery {
	/* Zonder dit rekt de kolom mee met de rij en heeft de max-height hieronder
	   niets om zich toe te verhouden. */
	align-self: flex-start;
}

/* De scrollbalk zelf is die van de kleurenlijst in de zijbalk:
   motProductinfoGalerijScrollbalk() laat addScrollProgressBar() hem bouwen en
   zet .scroll-container erop, wat de scrollbalk van de browser weghaalt. */
.pop-up-productinformation .woocommerce-product-gallery__wrapper {
	/* Bovengrens: de hoogte van de pop-up min de kop en de binnenmarges van het
	   middenstuk. De werkelijke hoogte is die van één afbeelding en wordt
	   gemeten door motProductinfoHermeten(); die zet een inline max-height die
	   deze grens meeneemt. Dit blijft staan als terugval zolang er nog niets
	   gemeten is. */
	max-height: calc(var(--productinfo-hoogte, 80dvh) - 150px);
	overflow-y: auto;
}

/* Wat .scroll-container van de tool ook doet: de scrollbalk van de browser weg,
   want de galerij heeft die van addScrollProgressBar(). Een eigen class en niet
   die van de tool, omdat .scroll-container in een .scroll-container de fade van
   het buitenste vlak uitzet; zie motProductinfoGalerijScrollbalk(). */
.pop-up-productinformation .productinformation-galerij-scroll {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.pop-up-productinformation .productinformation-galerij-scroll::-webkit-scrollbar {
	display: none;
}

/* De balk staat standaard rechts náást zijn scrollvlak (right: -32px, volle
   hoogte). Hier hoort hij links over de afbeelding heen, op halve hoogte en in
   het midden. Het element waar hij aan hangt is .woocommerce-product-gallery;
   addScrollProgressBar() zet daar position: relative op. */
.pop-up-productinformation .woocommerce-product-gallery .scroll-progress {
	right: auto;
	/* De kolom heeft zelf nog een binnenmarge, dus dit valt net over de
	   linkerrand van de afbeelding. */
	left: 20px;
	top: 50%;
	bottom: auto;
	height: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

@media (min-width: 768px) {
	/* Twee naast elkaar. De kolomindeling van de pagina (col-md-6) doet dit al;
	   dit legt het vast zodat het niet afhangt van een rasterregel die elders
	   kan veranderen. */
	.pop-up-productinformation .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* --- de groene knop --- */

/* Staat in de rechterkolom, onder de kleurstalen: motProductinfoVullen()
   verplaatst hem daarheen zodra de inhoud er is. Lukt dat niet - bijvoorbeeld
   als het ophalen mislukte - dan blijft hij onderaan de pop-up staan, waar hij
   in de markup begint. */
.productinformation-bevestigen {
	flex: 0 0 auto;
	padding: 0 24px 20px;
}

.single-product-middle .productinformation-bevestigen {
	padding: 0;
	margin: 16px 0 4px;
}

/* Zelfde maatvoering als de winkelmandknop van de tool
   (customizer-prijsopbouw.css), zodat de twee groene knoppen familie van elkaar
   zijn. Het pijltje erin erft die opmaak letterlijk. */
/* De selector telt drie classes met opzet. Het thema heeft
   ".woocommerce button.button { background: #D8127D !important }" - twee classes
   plus een element, en ook !important. Twee keer !important laat de specificiteit
   beslissen, dus met .pop-up-productinformation + .productinformation-bevestigen-knop
   + .button wint deze. --confirm-color is het groen van de andere pop-ups. */
.pop-up-productinformation .productinformation-bevestigen-knop.button {
	position: relative;
	width: 100%;
	height: 50px;
	border: 0;
	border-radius: 4px;
	background-color: var(--confirm-color) !important;
	color: #fff !important;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pop-up-productinformation .productinformation-bevestigen-knop.button:hover {
	background-color: var(--confirm-color) !important;
	opacity: 0.8;
}

/* Ook de knoptekst blijft op één regel (zie de titel hierboven). De knop houdt
   aan beide kanten de ruimte van het pijltje vrij - 16px rand, 28px rondje en
   4px lucht - zodat de tekst in het midden blijft en nooit onder het pijltje
   loopt. Met 4px past "Terug naar de ontwerptool" ook op 300px nog zonder
   afkappen. */
.pop-up-productinformation .productinformation-bevestigen-knop.button {
	padding-left: 48px;
	padding-right: 48px;
	box-sizing: border-box;
}

.productinformation-bevestigen-label {
	display: block;
	/* Een themaregel op spans in een .button maakte dit 900; de knop zelf
	   bepaalt het gewicht. */
	font-weight: inherit !important;
	min-width: 0;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.productinformation-bevestigen-knop .add-to-cart-icon {
	position: absolute;
	right: 16px;
	top: 11px;
	height: 28px;
	width: 28px;
	border-radius: 50%;
	background-color: #fff;
	color: var(--confirm-color);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- laden --- */

/* Het product van de tool wordt na het laden van de pagina alvast opgehaald, dus
   meestal is er niets te wachten. Deze stand is voor de keren dat dat niet
   gelukt is: twee vlakken in de vorm van de indeling eronder, zodat de pop-up
   niet leeg staat te zijn. */
.pop-up-productinformation.productinformation-laadt .pop-up-tabs-content::before {
	content: "";
	display: block;
	height: min(420px, 50dvh);
	border-radius: 6px;
	background: linear-gradient(100deg,
		var(--background-color) 30%,
		#f0f0f0 50%,
		var(--background-color) 70%);
	background-size: 300% 100%;
	animation: productinformatie-skelet 1.4s ease-in-out infinite;
}

@keyframes productinformatie-skelet {
	from { background-position: 150% 0; }
	to   { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.pop-up-productinformation.productinformation-laadt .pop-up-tabs-content::before {
		animation: none;
	}
}

.productinformation-fout {
	padding: 40px 0;
	text-align: center;
	color: var(--light-text-color);
}

/* --- smalle schermen --- */

@media (max-width: 767px) {
	/* De 45px rondom is voor desktop bedoeld. Op een telefoon is dat weggegooide
	   ruimte: daar vult de pop-up het hele scherm. */
	.pop-up-productinformation {
		--productinfo-hoogte: 100dvh;
	}

	.pop-up-open-productinformation .pop-up-productinformation {
		width: 100%;
		/* Rand en ronde hoeken horen bij een pop-up die ergens middenin staat.
		   Schermvullend raakt hij alle vier de randen, net als .pop-up-faq en
		   .pop-up-grafische-service verderop in customizer-main.css. */
		border: none;
		border-radius: 0;
	}

	/* De bevestigknop blijft onderin beeld zolang zijn eigen plek in de pagina
	   nog niet in zicht is; zie motProductinfoKnopZweven(). De omhulling blijft
	   in de tekstloop staan en houdt die plek vrij - vandaar de min-height, want
	   een zwevende knop telt zelf niet meer mee voor de hoogte. */
	.productinformation-bevestigen {
		min-height: 50px;
	}

	.productinformation-bevestigen.is-zwevend .productinformation-bevestigen-knop {
		position: fixed;
		left: 16px;
		right: 16px;
		bottom: 16px;
		width: auto;
		/* Boven de vervagingslaag hieronder, die anders over de knop heen valt:
		   een ::after wordt na de kinderen geschilderd. */
		z-index: 2;
	}

	/* Alleen de vervaging weg bij de galerij. Die scrollt op deze breedte
	   horizontaal, en dan slaat een verloop aan de onderkant nergens op. Het
	   scrollen zelf en de rest van .show-fade blijven.
	   !important omdat de regel die dit masker zet met een id begint
	   (#tool-main-container .show-fade) en dus zwaarder weegt dan classes. */
	.pop-up-productinformation .woocommerce-product-gallery__wrapper.show-fade {
		mask-image: none !important;
		-webkit-mask-image: none !important;
	}

	/* De galerij is hier een horizontale carrousel met scroll-snap, waarbij elke
	   afbeelding precies het scrollvlak breed hoort te zijn. Twee dingen samen
	   maakten de slides breder dan dat vlak, waardoor het snappen naast het
	   midden uitkwam: de paginaopmaak geeft de afbeelding max-width: 100vw mee,
	   en een flexitem krimpt niet onder zijn inhoud (min-width: auto). Op de
	   productpagina valt dat samen, want daar ís het scrollvlak 100vw; in de
	   pop-up is het smaller.

	   De selectors tellen drie classes met opzet: die van de pagina
	   (figure.woocommerce-product-gallery__wrapper.row > div) heeft er twee plus
	   twee elementen en gebruikt !important, dus lichter komt er niet langs. */
	.pop-up-productinformation .woocommerce-product-gallery__wrapper.productinformation-galerij-scroll > div {
		min-width: 100%;
		max-width: 100% !important;
	}

	.pop-up-productinformation .woocommerce-product-gallery__wrapper.productinformation-galerij-scroll > div img {
		max-width: 100% !important;
	}

	/* Dezelfde soort fout als bij de slides hierboven: de balk onder de galerij
	   krijgt van de paginaopmaak min-width: 85vw en max-width: calc(100vw - 50px)
	   mee. Op de productpagina klopt dat, want daar loopt de galerij van rand tot
	   rand; in de pop-up is de kolom smaller, dus werd de balk breder dan zijn
	   eigen left/right en schoof hij uit het midden. Zonder die twee grenzen
	   bepalen left en right hem, en staat hij weer netjes tussen de randen. */
	.pop-up-productinformation .slider-bar {
		min-width: 0;
		max-width: none;
	}

	/* Hier geen masker op het scrollvlak. Een mask-image geldt voor het hele
	   element inclusief alles wat erin zweeft, en de bevestigknop staat daar met
	   position: fixed onderin - die werd er dus mee weggepoetst. Op deze breedte
	   komt de vervaging daarom als eigen laag, die niets maskeert. */
	.pop-up-productinformation .pop-up-tabs-content.show-fade {
		mask-image: none !important;
		-webkit-mask-image: none !important;
	}

	.pop-up-productinformation .pop-up-content {
		position: relative;
	}

	/* Alleen zolang de knop zweeft; zit hij op zijn plek in de tekst, dan is er
	   niets af te dekken. Hoogte: 16px ondermarge plus 50px knop, plus 44px
	   waarin de tekst uitdooft. */
	.pop-up-productinformation:has(.productinformation-bevestigen.is-zwevend) .pop-up-content::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 110px;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 44px, #fff 100%);
		pointer-events: none;
		z-index: 1;
	}

	.pop-up-productinformation .pop-up-tabs-buttons {
		padding: 12px 16px;
	}

	.pop-up-productinformation .productinformation-title {
		font-size: 15px;
		font-weight: 600;
	}

	.pop-up-productinformation .pop-up-tabs-content {
		padding: 16px 16px 24px;
	}

	.productinformation-bevestigen {
		padding: 0 16px 16px;
	}

	/* ── Maten uit het Figma-ontwerp (428px breed scherm) ─────────────────
	   Kop 50px hoog, alles 10px van de schermrand, de galerij van rand tot
	   rand direct onder de kop. Deze regels staan na de algemene mobiele
	   regels hierboven en winnen daarvan. */
	.pop-up-productinformation .pop-up-tabs-buttons {
		height: 50px;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.pop-up-productinformation .pop-up-tabs-content {
		padding: 0 10px 24px;
	}

	/* Van rand tot rand: de 10px van het scrollvlak eraf. */
	.pop-up-productinformation .woocommerce-product-gallery {
		position: relative;
		margin: 0 -10px;
		/* De kolom is een flexitem (flex: 0 0 100% van het raster); width alleen
		   doet dan niets. */
		flex: 0 0 calc(100% + 20px);
		width: calc(100% + 20px);
		max-width: none;
		padding: 0;
		background-color: #F6F6F6;
	}

	/* De korting staat al naast de prijs, dus niet ook nog op de foto. Het
	   eco-icoon (.product-labels) blijft wel staan. */
	.pop-up-productinformation .woocommerce-product-gallery .discount-amount {
		display: none !important;
	}

	/* De bediening onder in de galerij (motProductinfoGalerij()): ronde knop,
	   witte pil met de voortgang, ronde knop; 30px hoog, 16px ertussen en 15px
	   boven de onderrand van de foto. */
	.pop-up-productinformation .productinformation-galerij-bediening {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 16px;
		z-index: 2;
	}

	.pop-up-productinformation .productinformation-galerij-knop {
		width: 30px;
		height: 30px;
		padding: 0;
		border: none;
		border-radius: 50%;
		background-color: #fff;
		color: #000;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.pop-up-productinformation .productinformation-galerij-pil {
		width: 208px;
		height: 30px;
		padding: 0 19px;
		box-sizing: border-box;
		border-radius: 15px;
		background-color: #fff;
		display: flex;
		align-items: center;
	}

	/* De balk zelf: een grijs spoor van 4px met de actieve afbeelding in roze.
	   Hij stond los onder de foto (position: absolute van de productpagina);
	   hier vult hij de pil. */
	.pop-up-productinformation .productinformation-galerij-pil .slider-bar {
		position: static;
		width: 100%;
		height: 4px;
		background-color: var(--border-color);
		box-shadow: none;
		border-radius: 2px;
		overflow: hidden;
	}

	/* --- samenvatting --- */

	/* De titel staat al in de kop van de pop-up. */
	.pop-up-productinformation .product_title {
		display: none;
	}

	.pop-up-productinformation .single-product-middle,
	.pop-up-productinformation .slide-with-top {
		padding-left: 0;
		padding-right: 0;
	}

	/* De pagina geeft de samenvatting 25px boven; hier bepaalt de prijs zelf
	   de afstand tot de foto (zie .slide-with-top). */
	.pop-up-productinformation .single-product-middle {
		padding-top: 0;
	}

	.pop-up-productinformation .slide-with-top {
		padding-top: 14px;
	}

	/* Prijs: nu eerst en groot, dan de oude prijs kleiner en grijs, dan de
	   korting als roze label. */
	/* !important en een class meer: de pagina zet hier 10px opzij met
	   !important (.single-product-middle .single-price-linked), in een
	   stylesheet die later in het document staat. */
	.pop-up-productinformation .single-product-middle .single-price-linked {
		padding-left: 0 !important;
		padding-right: 0 !important;
		padding-bottom: 10px;
	}

	/* De regels met icoon onder de prijs: icoon op de 10px-lijn, tekst 7px
	   ernaast, het icoon bij de eerste regel tekst. */
	/* !important: de pagina zet de zijmarge met .single-product-middle ervoor
	   en !important, net als bij de prijs hierboven. */
	.pop-up-productinformation .single-product-middle .product-regels-container {
		padding: 0 !important;
	}

	.pop-up-productinformation .product-regel {
		align-items: flex-start;
		padding: 0 0 12px;
	}

	.pop-up-productinformation .product-regel svg {
		flex-shrink: 0;
		margin-top: 0;
	}

	.pop-up-productinformation .product-regel-text {
		padding-left: 7px;
		font-size: 14px;
		line-height: 20px;
	}

	.woocommerce .pop-up-productinformation div.product p.price {
		padding: 0;
		align-items: center;
		gap: 7px;
	}

	.woocommerce .pop-up-productinformation div.product p.price > * + * {
		margin-left: 0;
	}

	.woocommerce .pop-up-productinformation div.product p.price ins {
		order: 1;
		text-decoration: none;
	}

	.woocommerce .pop-up-productinformation div.product p.price del {
		order: 2;
	}

	.woocommerce .pop-up-productinformation div.product p.price .discount-amount {
		order: 3;
		margin: 0 0 0 -1px;
		padding: 0 10px;
		/* Op het midden van de cijfers, niet van de regel eromheen. */
		position: relative;
		top: -2px;
		height: 13px;
		line-height: 13px;
		border-radius: 3px;
		background-color: #DE3791;
		color: #fff;
		font-size: 10px;
		font-weight: 600;
		opacity: 1;
	}

	.woocommerce .pop-up-productinformation div.product p.price ins bdi,
	.woocommerce .pop-up-productinformation div.product p.price ins .woocommerce-Price-currencySymbol {
		font-size: 20px;
		font-weight: 700;
	}

	.woocommerce .pop-up-productinformation div.product p.price del bdi,
	.woocommerce .pop-up-productinformation div.product p.price del .woocommerce-Price-currencySymbol {
		font-size: 16px;
		font-weight: 500;
	}

	.woocommerce .pop-up-productinformation div.product p.price del bdi {
		color: #7D7D7D !important;
		opacity: 1;
	}

	.woocommerce .pop-up-productinformation div.product p.price del .woocommerce-Price-currencySymbol {
		color: inherit !important;
	}

	/* Knop: 10px van de zijkanten en 7px van de onderrand, tekst 18px. */
	.productinformation-bevestigen.is-zwevend .productinformation-bevestigen-knop {
		left: 10px;
		right: 10px;
		bottom: 7px;
	}

	.pop-up-productinformation .productinformation-bevestigen-knop.button {
		font-size: 18px;
		font-weight: 600;
	}
}

/* Op desktop staan de afbeeldingen onder elkaar; daar hoort deze bediening niet. */
@media (min-width: 768px) {
	.pop-up-productinformation .productinformation-galerij-bediening {
		display: none;
	}
}