/* =========================================================================
   Popup en lijst van 'stel je box zelf samen'

   Kwam uit Elementor Custom Code #3079. Stond als <style> in de database,
   werd op elke pagina meegestuurd en was niet te lezen in Git, niet te
   controleren en niet terug te draaien. Nu een bestand in het thema.
   ========================================================================= */

/* Bundled products	 */

	.popup-overlay {
		display: none;
		opacity: 0;
		visibility: hidden;
		position: fixed;
		top: 0;
		right: 0;
		bottom:0;
		left: 0;
		height: 100vh;
		width: 100vw;
		background: rgba(0,0,0, 0.5);
		z-index: 999;
	}

	.popup-wrapper {
		position: fixed;
		top: 50%;
		right: 50%;
		bottom: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80vw;
		max-width: 1280px;
		height: 90vh;
		display: none;
		opacity: 0;
		visibility: hidden;
		align-items: center;
		flex-wrap: wrap;
		background: #fff;
		z-index: 1000;
		border-radius: 10px;
		margin: 0;
		padding: 32px;
		overflow-y: scroll;
		-ms-overflow-style: none;
  	scrollbar-width: none;
	}

	.popup-overlay.visible,
	.popup-wrapper.visible {
		display: block;
		opacity: 1;
		visibility: visible;
	}

	.popup-wrapper::-webkit-scrollbar {
		display: none;
	}

	.popup-wrapper .popup-header {
		border-bottom: 2px solid #5D3529;
		width: 100%;
		height: max-content;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.popup-wrapper .popup-header .popup-heading {
		margin :0;
		font-family: "Brevia", sans-serif;
		font-size: 20px;
		color: #5D3529;
		margin-bottom: 16px;
	}

	.popup-wrapper .popup-header .close-btn {
/* 		position: absolute;
		top: 16px;
		right: 16px;
		font-family: "Brevia", sans-serif;
		font-size: 14px;
		color: #5D3529; */
	}

	.popup-wrapper .popup-header .close-btn:hover {
		cursor: pointer;
	}

	#show-assemble-popup {
		cursor: pointer;
	}

	#show-assemble-popup .elementor-button {
		background-color: #FBFAF5;
	}

	#show-assemble-popup .elementor-button-text {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 3px;
	}

	.popup-wrapper .popup-content ul.bundled_products {
		margin: 60px 0 0 0;
		padding: 0;
/* 		height: auto; */
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px;
	}

	.woocommerce ul.products li.first, .woocommerce-page ul.products li.first {
    clear: none !important;
	}
	.bundled_product_excerpt.product_excerpt{
		display:none;
	}

	.popup-wrapper ul.bundled_products li.bundled_product {
		position: relative;
		height: max-content !important;
		width: 270px !important;
		margin: 0 !important;
	}

	.popup-wrapper ul.bundled_products li.bundled_product figure img {
		transition: 0.2s all;
	}

	.popup-wrapper ul.bundled_products li.bundled_product:hover figure img {
		opacity: 0.7
	}

	.popup-wrapper ul.bundled_products li.bundled_product figure {
		width: 250px;
		height: max-content;
		position: relative;
	}

	.popup-wrapper ul.bundled_products li.bundled_product figure:after {
		content: "+";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #fff;
		font-size: 62px;
		opacity: 0;
		text-shadow: 1px 1px 5px #000;
	}

	.popup-wrapper ul.bundled_products li.bundled_product:hover figure:after {
		opacity: 1;
	}
	.details{
		margin-top:18px;
		margin-bottom:-20px;
	}
	.popup-wrapper ul.bundled_products li.bundled_product .bundled_product_images, ul.bundled_products li.bundled_product .details {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

	}

	.popup-wrapper .ul.bundled_products li.bundled_product .details {
		position: relative;
	}

	.popup-wrapper ul.bundled_products li.bundled_product .details .cart {
		position: absolute;
		top: 0;
		right: 0;
	}

	.popup-wrapper ul.bundled_products li.bundled_product .details .cart .qty {
		padding: 8px !important;
		font-size: 16px !important;
	}

	.popup-wrapper ul.bundled_products li.bundled_product .details .bundled_product_title {
		min-height: 60px; 
		margin: 0;
		font-family: "Brevia", sans-serif;
		font-size: 20px;
		color: #5D3529;
		letter-spacing: -1px;
	}

	.popup-wrapper ul.bundled_products li.bundled_product .remove-button {
		position: absolute;
		top: 0;
		left: 16px;
		width: max-content;
	}

	.popup-wrapper ul.bundled_products li.bundled_product .remove-button svg {
		height: 24px;
	}

	.popup-wrapper ul.bundled_products li.bundled_product .remove-button:hover,
	.popup-wrapper ul.bundled_products li.bundled_product .bundled_product_image:hover{
		cursor: pointer;
	}

	.save-and-close-btn {
		display: none;
		position: fixed;
		bottom: 10vh;
		width: max-content;
		z-index: 1002;
		left: 50%;
		transform: translateX(-50%);
		margin: 0;
		font-family: "Brevia", Sans-serif;
    font-size: 18px;
    letter-spacing: -1px;
		color: #C56068;
    border: 3px solid #C56068;
		background-color: #fff;
    border-radius: 100px 100px 100px 100px;
    padding: 14px 40px 14px 40px;
		filter: drop-shadow(3px 3px 0px #C56068);
		transition: all 0.2s;
	}

	.save-and-close-btn:hover {
		cursor: pointer;
	}

	.save-and-close-btn.visible {
		display: block;
	}

	.selected-options {
		display: flex;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 0 !important;
	}

	.selected-options {
		font-size: 16px;
		font-family: "AmericanTypeWriter", serif;
		font-weight: 600;
		color: #5D3529;
		margin-bottom: 16px;
	}

	.selected-options span.bundled_product_title_inner:first-child {
		margin-left: 8px;
	}

	.selected-options span.bundled_product_title_inner {
		margin-right: 4px;
	}

	.selected-options span.bundled_product_title_inner::after {
		content: ',';
	}

	.selected-options span.bundled_product_title_inner:last-child::after {
		content: '';
	}

	ul.bundled_products li.bundled_product {
/* 		display: flex; */
/* 		flex-direction: column-reverse; */
	}

	.bundle_wrap .bundle_button {
/* 		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap; */
	}

	.bundle_wrap .bundle_error {
		display: none;
		opacity: 0;
		visibility: hidden;
		position: fixed;
		bottom: 2%;
		width: 80vw;
		max-width: 1280px;
		z-index: 1001;
		left: 50%;
		transform: translateX(-50%);
	}

	.bundle_wrap .bundle_error.visible {
		display: block;
		opacity: 1;
		visibility: visible;
	}

	.bundle_wrap .bundle_error .woocommerce-info {
		background-color: #fff;
		border-radius: 0 0 10px 10px;
		border: none !important;
		font-family: "AmericanTypeWriter", monospace;
		color: #5D3529;
	}

	.bundle_wrap .bundle_error .woocommerce-info::before {
		display: none;
	}

	.bundled_items_selection_status.highlight {
		color: #cf2e2e;
		text-decoration: underline;
		font-weight: 600;
	}

	.bundled_items_selection_status.highlight::before {
		content: "Te veel! ";
		color: #cf2e2e;
		text-decoration: underline;
		font-weight: 600;
	}

	@media screen and (max-width: 1400px) {
			.popup-wrapper ul.bundled_products li.bundled_product {
				width: 20% !important;
			}
	}

	@media screen and (max-width: 1024px) {
			.popup-wrapper {
				width: 90vw;
				height: 90vh;
				padding: 16px;
			}

			.popup-wrapper ul.bundled_products li.bundled_product {
				width: 203px !important;
			}

			.bundle_wrap .bundle_error {
				width: 90vw;
			}

/* 			.popup-wrapper .popup-header .close-btn {
				position: absolute;
				top: 16px;
				right: 16px;
				font-family: "Brevia", sans-serif;
				font-size: 14px;
				color: #5D3529;
			} */
	}

	@media screen and (max-width: 767px) {
			.popup-wrapper {
				width: 95vw;
				height: 95vh;
			}

		.save-and-close-btn {
			bottom: 48px;
		}

			.popup-wrapper ul.bundled_products li.bundled_product {
				width: 45% !important;
			}

			.bundle_wrap .bundle_error {
				width: 95vw;
				bottom: -3px;
			}
	}

/* =========================================================================
   Bundelkiezer in de huisstijl

   De regels hierboven komen ongewijzigd uit Elementor Custom Code #3079 en
   houden de popup op zijn plek. Wat eronder staat is nieuw: het brengt de
   kiezer in dezelfde vormtaal als de rest van de site - dezelfde kaarten als
   in de shop, dezelfde knopvorm, dezelfde kleuren uit de tokens.

   Er wordt bewust niets hierboven veranderd. Zo blijft te zien wat er uit de
   database kwam en wat wij erbij hebben gezet, en kan het oude blok in een keer
   weg zodra alles hieronder het overgenomen heeft.
   ========================================================================= */

.popup-wrapper {
	/*
	 * Let op de insets. Het blok hierboven zet top, right, bottom en left alle
	 * vier op 50% en trekt het daarna met translate(-50%, -50%) terug. Dat werkt
	 * alleen zolang breedte en hoogte allebei vastgezet zijn - stond er 80vw bij
	 * 90vh. Met `height: auto` rekent de browser de hoogte uit top en bottom en
	 * komt op nul uit: de popup ging open en was leeg.
	 *
	 * Daarom right en bottom hier op auto. Dan bepalen breedte en inhoud de maat,
	 * en blijft de popup gecentreerd.
	 */
	right: auto;
	bottom: auto;
	width: min(92vw, 1200px);
	max-width: none;
	height: auto;
	max-height: min(88vh, 900px);
	padding: 0;
	border-radius: var(--sp-radius);
	background: var(--sp-creme);
	box-shadow: var(--sp-schaduw-op);
	/* auto in plaats van scroll: anders staat er een lege schuifbalk in een
	   popup die kort genoeg is om helemaal te passen. */
	overflow-y: auto;
}

/* De kop blijft staan bij het scrollen. In een lijst van veertien smaken ben
   je anders na drie rijen kwijt waar je bent en hoe je de popup sluit. */
.popup-header {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-ruimte-2);
	margin: 0;
	padding: var(--sp-ruimte-3) var(--sp-ruimte-4);
	border-bottom: 1px solid var(--sp-zand);
	background: var(--sp-creme);
}

.popup-heading {
	margin: 0;
	color: var(--sp-bruin);
	font-family: var(--sp-kop);
	font-size: var(--sp-h3);
	line-height: var(--sp-regelhoogte-kop);
}

/* Was een div van 31px zonder toetsenbordbediening. Nu een echt klikgebied
   van 44px met een focusring. */
.close-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--sp-raak);
	height: var(--sp-raak);
	border-radius: var(--sp-radius-knop);
	cursor: pointer;
	transition: background var(--sp-motion-fast) var(--sp-ease-out);
}

.close-btn:hover,
.close-btn:focus-visible {
	background: var(--sp-roze);
}

.close-btn svg {
	width: 18px;
	height: 18px;
}

.popup-content {
	padding: var(--sp-ruimte-4);
}

/* Hetzelfde raster als in de shop: vier naast elkaar waar het past. De
   columns-3 die WooCommerce meegeeft slaan we bewust over - dat aantal hoort
   bij de breedte van het scherm, niet bij een instelling in de beheerder. */
.popup-content ul.bundled_products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-ruimte-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1000px) {
	.popup-content ul.bundled_products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.popup-content ul.bundled_products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.popup-content li.bundled_product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	padding: 0 0 var(--sp-ruimte-2);
	border-radius: var(--sp-radius);
	background: var(--sp-wit);
	box-shadow: var(--sp-schaduw);
	overflow: hidden;
	cursor: pointer;
	transition: box-shadow var(--sp-motion-base) var(--sp-ease-out),
	            transform var(--sp-motion-base) var(--sp-ease-out);
}

.popup-content li.bundled_product:hover {
	box-shadow: var(--sp-schaduw-op);
	transform: translateY(-2px);
}

/* Gekozen smaken krijgen een rand in de accentkleur en niet alleen een getal
   in een hoek: op een raster van veertien tegels wil je in een oogopslag zien
   wat je al hebt. */
.popup-content li.bundled_product.is-gekozen {
	box-shadow: 0 0 0 2px var(--sp-accent-ui), var(--sp-schaduw-op);
}

.popup-content li.bundled_product img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.popup-content .bundled_product_images {
	margin: 0;
}

.popup-content .details {
	padding: var(--sp-ruimte-2) var(--sp-ruimte-2) 0;
}

.popup-content .bundled_product_title {
	margin: 0;
	color: var(--sp-bruin);
	font-family: var(--sp-kop);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: var(--sp-regelhoogte-kop);
	text-align: left;
}

/* Het aantal: een rond plaatje rechtsboven op de foto. Leeg zolang er niets
   gekozen is, gevuld zodra dat wel zo is. */
.popup-content .bundled_qty {
	position: absolute;
	top: var(--sp-ruimte-1);
	right: var(--sp-ruimte-1);
	z-index: 1;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--sp-radius-knop);
	background: var(--sp-wit);
	color: var(--sp-bruin);
	font-family: var(--sp-lijf);
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	box-shadow: var(--sp-schaduw);
	cursor: pointer;
	/* De pijltjes van een number-veld zijn hier zinloos: het veld is readonly
	   en het script telt op via een klik op de tegel. */
	appearance: textfield;
	-moz-appearance: textfield;
}

.popup-content .bundled_qty::-webkit-outer-spin-button,
.popup-content .bundled_qty::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.popup-content li.bundled_product.is-gekozen .bundled_qty {
	background: var(--sp-accent-ui);
	color: var(--sp-wit);
}

/* Het kruisje om er weer een af te halen. Zat linksboven zonder achtergrond en
   viel weg tegen een lichte foto. */
.popup-content .remove-button {
	position: absolute;
	top: var(--sp-ruimte-1);
	left: var(--sp-ruimte-1);
	z-index: 1;
	display: none;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--sp-radius-knop);
	background: var(--sp-bruin);
	color: var(--sp-creme);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.popup-content .remove-button:hover {
	background: var(--sp-accent-ui);
}

/* De knop die de kiezer opent, in dezelfde vorm als elke andere knop. */
#show-assemble-popup {
	/* Exact dezelfde vorm als .sp-knop; alleen de breedte wordt hier
	   afgeknepen, want de knop staat in een flexkolom en werd anders zo breed
	   als de hele productkolom. */
	display: inline-flex;
	align-self: flex-start;
	width: auto;
	align-items: center;
	justify-content: center;
	gap: var(--sp-ruimte-1);
	min-height: var(--sp-knop-hoogte);
	min-width: var(--sp-raak);
	padding: .75rem 1.75rem;
	border: 0;
	border-radius: var(--sp-radius-knop);
	background: var(--sp-accent-ui);
	color: var(--sp-wit);
	font-family: var(--sp-lijf);
	font-size: var(--sp-text-base);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--sp-motion-fast) var(--sp-ease-out),
	            transform var(--sp-motion-fast) var(--sp-ease-out);
}

#show-assemble-popup:hover {
	background: var(--sp-bruin);
	color: var(--sp-wit);
}

/* "Kies 12 artikelen." stond als grijze WooCommerce-melding onder de knop.
   Het is geen fout maar een opdracht, dus geen foutkleur - wel duidelijk. */
.bundle_error .woocommerce-info {
	margin: 0;
	padding: var(--sp-ruimte-2) var(--sp-ruimte-3);
	border: 0;
	border-radius: var(--sp-radius);
	background: var(--sp-zand);
	color: var(--sp-bruin);
	font-family: var(--sp-lijf);
}

.bundle_error .woocommerce-info::before {
	content: none;
}

.bundle_error .msg {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* -------------------------------------------------------------------------
   Het raster wint het van de oude flexregels

   De regels uit #3079 staan hierboven met een selector die één klasse langer
   is (`.popup-wrapper .popup-content ul...` tegen `.popup-content ul...`) en
   met `width: 270px !important` op de tegels. Daardoor bleef de oude
   flex-indeling actief en kreeg de eerste rij drie tegels en de tweede vier.

   Hieronder dezelfde selectors, zodat het raster het overneemt. Niet met een
   hogere specificiteit dan nodig - gelijke specificiteit later in het bestand
   is genoeg - en `!important` alleen waar het origineel dat ook gebruikt.
   ------------------------------------------------------------------------- */

.popup-wrapper .popup-content ul.bundled_products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-ruimte-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.popup-wrapper ul.bundled_products li.bundled_product {
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
}

.popup-wrapper ul.bundled_products li.bundled_product figure {
	width: 100%;
	margin: 0;
}

.popup-wrapper ul.bundled_products li.bundled_product .bundled_product_images {
	display: block;
	margin: 0;
}

.popup-wrapper ul.bundled_products li.bundled_product .details {
	display: block;
	margin: 0;
	padding: var(--sp-ruimte-2) var(--sp-ruimte-2) 0;
}

.popup-wrapper ul.bundled_products li.bundled_product .details .bundled_product_title {
	min-height: 0;
	font-size: 1.05rem;
	letter-spacing: -.5px;
}

@media screen and (max-width: 1400px) {
	.popup-wrapper .popup-content ul.bundled_products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.popup-wrapper ul.bundled_products li.bundled_product {
		width: auto !important;
	}
}

@media screen and (max-width: 1024px) {
	.popup-wrapper ul.bundled_products li.bundled_product {
		width: auto !important;
	}
}

@media screen and (max-width: 767px) {
	.popup-wrapper .popup-content ul.bundled_products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.popup-wrapper ul.bundled_products li.bundled_product {
		width: auto !important;
	}
}

/* De "klaar"-knop stond al in #3079 met de roze merkrand en de harde schaduw.
   Die vorm blijft; alleen het klikgebied en de focusring komen erbij, want een
   knop van 3px rand zonder zichtbare focus is met het toetsenbord niet te
   vinden. */
.save-and-close-btn:focus-visible {
	outline: 3px solid var(--sp-focus);
	outline-offset: 3px;
}

/*
 * WooCommerce hangt aan `ul.products` een clearfix: ::before en ::after met
 * `content: " "`. In een floatlayout is dat onzichtbaar, maar in een
 * gridcontainer wordt elk pseudo-element een gewone gridcel. Die twee lege
 * cellen duwden de eerste rij een plek op, waardoor er drie tegels stonden
 * waar er vier passen en de rij niet uitlijnde met de rest.
 */
.popup-wrapper .popup-content ul.bundled_products::before,
.popup-wrapper .popup-content ul.bundled_products::after {
	display: none;
}

/*
 * Het aantalveld nog een keer, met dezelfde specificiteit als de regels uit
 * #3079. De basisstijl voor invoervelden in style.css geeft elk veld de
 * cremekleur, en die selector is langer dan `.popup-content .bundled_qty` -
 * dus de gekozen tegel bleef een creme rondje houden in plaats van een
 * accentkleurig.
 */
.popup-wrapper ul.bundled_products li.bundled_product .bundled_qty {
	background: var(--sp-wit);
	color: var(--sp-bruin);
	border: 0;
	box-shadow: var(--sp-schaduw);
}

.popup-wrapper ul.bundled_products li.bundled_product.is-gekozen .bundled_qty {
	background: var(--sp-accent-ui);
	color: var(--sp-wit);
}

.popup-wrapper ul.bundled_products li.bundled_product.is-gekozen .remove-button {
	display: inline-flex;
}

/*
 * De knop staat in de producttemplate en die geldt voor elk product. Alleen op
 * een bundelproduct heeft hij betekenis; ProductScripts zet daarvoor de class
 * sp-bundelproduct op de body.
 *
 * Bewust in CSS en niet in JavaScript: de knop hoort er op een gewoon product
 * nooit te staan, ook niet heel even voordat een script hem weghaalt.
 */
body:not( .sp-bundelproduct ) #show-assemble-popup {
	display: none;
}