/**
 * Blokken onder de artikelgegevens en de pop-up na het toevoegen.
 */

/* ------------------------------------------------------------- Tabbladen */
.artikelblokken {
	margin-top: var(--ruimte-m);
	padding-top: var(--ruimte-m);
	border-top: 1px solid var(--kleur-lijn);
}

.artikeltabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: var(--ruimte-m);
}

.artikeltab {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1.2rem;
	border: 1px solid var(--kleur-lijn);
	border-radius: 999px;
	background: var(--kleur-wit);
	color: var(--kleur-tekst);
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.artikeltab:hover,
.artikeltab:focus-visible {
	border-color: var(--kleur-primair);
	background: var(--kleur-primair);
	color: var(--kleur-wit);
}

/* --------------------------------------------------------------- Blokken */
.artikelblok + .artikelblok {
	margin-top: var(--ruimte-m);
	padding-top: var(--ruimte-m);
	border-top: 1px solid var(--kleur-lijn);
}
.artikelblok__kop { margin: 0 0 1rem; }
.artikelblok__tekst > *:first-child { margin-top: 0; }
.artikelblok__tekst > *:last-child { margin-bottom: 0; }

.artikelblok ul.products { margin: 0; }

/* ------------------------------------------------------ Veelgestelde vragen
 *
 * Zelfde opmaak als op de contactpagina (.vraag in assets/css/contact.css):
 * een lijn boven en onder elke vraag, en rechts een gele cirkel met een plus
 * die bij het openklappen een min wordt. Maat en kleuren komen uit
 * variables.css (--teken-*).
 */
.artikelvragen {
	border-top: 1px solid var(--kleur-lijn);
}

.artikelvraag {
	border-bottom: 1px solid var(--kleur-lijn);
}
.artikelvraag__vraag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ruimte-s);
	padding: 1.1rem 0;
	font-size: var(--h5);
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
}
.artikelvraag__vraag::-webkit-details-marker { display: none; }

.artikelvraag__vraag:focus-visible {
	outline: 2px solid var(--kleur-primair);
	outline-offset: 2px;
}

/*
 * Het plusje: twee streepjes in een gele cirkel, getekend met twee
 * achtergronden. Bij [open] krimpt het staande streepje weg, dus blijft de
 * min over. Geen extra element nodig in de PHP.
 */
.artikelvraag__vraag::after {
	content: "";
	flex: 0 0 auto;
	width: var(--teken-maat);
	height: var(--teken-maat);
	border-radius: 50%;
	background-color: var(--teken-bg);
	background-image:
		linear-gradient(var(--teken-streep), var(--teken-streep)),
		linear-gradient(var(--teken-streep), var(--teken-streep));
	background-repeat: no-repeat;
	background-position: center, center;
	background-size: calc(100% - 2 * var(--teken-inset)) var(--teken-dikte),
		var(--teken-dikte) calc(100% - 2 * var(--teken-inset));
	transition: background-size 0.2s ease;
}
.artikelvraag[open] .artikelvraag__vraag::after {
	background-size: calc(100% - 2 * var(--teken-inset)) var(--teken-dikte),
		var(--teken-dikte) 0;
}

@media (prefers-reduced-motion: reduce) {
	.artikelvraag__vraag::after { transition: none; }
}

.artikelvraag__antwoord {
	padding: 0 0 1.1rem;
	max-width: 70ch;
	color: var(--kleur-tekst-zacht);
}
.artikelvraag__antwoord > *:first-child { margin-top: 0; }
.artikelvraag__antwoord > *:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------- Pop-up */
.wagenpop {
	position: fixed;
	inset: 0;
	z-index: 320;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.wagenpop[hidden] { display: none; }

.wagenpop__scherm {
	position: absolute;
	inset: 0;
	padding: 0;
	border: 0;
	background: rgba(17, 19, 24, 0.45);
	cursor: pointer;
}

.wagenpop__venster {
	position: relative;
	width: min(46rem, 100%);
	max-height: 90vh;
	overflow-y: auto;
	padding: 1.6rem;
	border: 1px solid var(--kleur-lijn);
	border-radius: 14px;
	background: var(--kleur-wit);
}

.wagenpop__x {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--kleur-licht);
	color: var(--kleur-tekst);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}
.wagenpop__x:hover { background: var(--kleur-accent); color: var(--kleur-wit); }

.wagenpop__titel {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1.1rem;
	padding-right: 2.4rem;
	font-family: var(--font-kop);
	font-size: 1.2rem;
	font-weight: 800;
}
.wagenpop__vink { color: #1b7f3b; flex: 0 0 auto; }

.wagenpop__artikel {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--kleur-lijn);
}
.wagenpop__beeld img {
	display: block;
	width: 4.4rem;
	height: 4.4rem;
	object-fit: cover;
	border-radius: 8px;
}
.wagenpop__gegevens { display: flex; flex-direction: column; gap: 0.2rem; }
.wagenpop__naam { font-family: var(--font-kop); font-weight: 800; }
.wagenpop__aantal { color: var(--kleur-tekst-zacht); font-size: 0.92rem; }

.wagenpop__combineren { margin-top: 1.2rem; }
.wagenpop__kop {
	margin: 0 0 0.8rem;
	font-family: var(--font-kop);
	font-size: 1.05rem;
	font-weight: 800;
}
.wagenpop__combineren ul.products { margin: 0; }
.wagenpop__combineren ul.products li.product .artikel__acties,
.wagenpop__combineren ul.products li.product .artikel__voorraad { display: none; }

.wagenpop__acties {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.3rem;
}
.wagenpop__acties .btn { flex: 1 1 10rem; text-align: center; }

@media ( max-width: 600px ) {
	.wagenpop__venster { padding: 1.1rem; }
	.wagenpop__acties .btn { flex: 1 1 100%; }
}

/* De blokken staan onder beide kolommen. */
.artikelpagina div.product > .artikelblokken,
.artikelpagina div.product > .related,
.artikelpagina div.product > .upsells { grid-column: 1 / -1; }

/* WooCommerce zet er zelf een link achter; die hoeft niet, wij tonen de pop-up. */
.artikel__acties .added_to_cart { display: none; }

.wagenpop__acties .btn--outline {
	border: 1px solid var(--kleur-lijn);
	background: var(--kleur-wit);
	color: var(--kleur-tekst);
}
.wagenpop__acties .btn--outline:hover {
	border-color: var(--kleur-primair);
	background: var(--kleur-primair);
	color: var(--kleur-wit);
}

.artikel__acties .added_to_cart,
.woocommerce ul.products li.product a.added_to_cart { display: none !important; }

/* --------------------------------------- Kaarten: rand, en lichten op hover */
.woocommerce ul.products li.product .artikel,
.artikel {
	box-shadow: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/*
 * Alleen op apparaten met een echte muis. Op touch geldt de eerste aanraking
 * als hover: dan gaat de kaart eerst omhoog en hapert het vegen in de slider.
 */
@media (hover: hover) and (pointer: fine) {
	.artikel:hover {
		transform: translateY(-6px);
		box-shadow: 0 12px 28px rgba(17, 19, 24, 0.14);
	}
}

/* ------------------------------ De gele plusknop op een artikelkaart
 *
 * Het plusje is niet de letter "+" maar twee streepjes, precies zoals bij de
 * veelgestelde vragen op de contactpagina. Daardoor staat er een fors, strak
 * kruis in de cirkel in plaats van een klein lettertekentje. Maat, kleur en
 * dikte staan in variables.css onder --teken-*.
 *
 * Geldt overal waar de kaart staat: de winkelpagina, de homepagina en de
 * pop-up na het toevoegen.
 */
.artikel__plus {
	width: var(--teken-kaart);
	height: var(--teken-kaart);
	background: var(--teken-bg);
	color: var(--teken-streep);
}

/* De span bevat het teken "+"; die tekst verbergen we en tekenen we zelf. */
.artikel__plus > span {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	font-size: 0;
	line-height: 0;
	color: transparent;
}
.artikel__plus > span::before,
.artikel__plus > span::after {
	content: "";
	position: absolute;
	inset: 50% var(--teken-inset);
	height: var(--teken-dikte);
	margin-top: calc(var(--teken-dikte) / -2);
	background: var(--teken-streep);
}
.artikel__plus > span::after { transform: rotate(90deg); }

.artikel__plus.is-bezig,
.single_add_to_cart_button.is-bezig { opacity: 0.6; pointer-events: none; }

/* ------------------------- Knoppen: geen kleurwissel op hover, wel een lift */
.artikel__bekijk,
.artikel__plus,
.artikelpagina .woocommerce .button,
.artikelpagina .btn,
.wagenpop .btn,
.wagenpop .artikel__plus {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.artikel__bekijk:hover,
.artikel__bekijk:focus,
.wagenpop .btn:hover,
.wagenpop .btn:focus {
	background: var(--btn-bg);
	color: var(--btn-tekst);
	transform: translateY(-2px);
}
.wagenpop .btn--outline:hover,
.wagenpop .btn--outline:focus {
	border-color: var(--kleur-lijn);
	background: var(--kleur-wit);
	color: var(--kleur-tekst);
}
.artikel__plus:hover,
.artikel__plus:focus {
	background: var(--teken-bg);
	color: var(--teken-streep);
	transform: translateY(-2px);
}
.artikelpagina .woocommerce .button:hover,
.artikelpagina .woocommerce .button:focus,
.artikelpagina div.product form.cart .button:hover,
.artikelpagina div.product form.cart .button:focus {
	background: var(--kleur-accent);
	color: var(--kleur-wit);
	transform: translateY(-2px);
}

.wagenpop .btn { font-weight: 700; }

/* --------------------------------------- Groene succesbalk in de pop-up */
.wagenpop__titel {
	margin: 0 0 1.2rem;
	padding: 0.8rem 1rem;
	border-radius: 10px;
	background: #eaf7ee;
	color: #17693a;
	font-size: 1.05rem;
}
.wagenpop__vink { color: #17693a; }

/* Het toegevoegde artikel met rechts het aantal in de winkelwagen */
.wagenpop__artikel { justify-content: space-between; gap: 1.5rem; }
.wagenpop__regel { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.wagenpop__totaal {
	flex: 0 0 auto;
	color: var(--kleur-tekst-zacht);
	font-size: 0.88rem;
	text-align: right;
}
.wagenpop__totaal strong {
	display: block;
	color: var(--kleur-tekst);
	font-family: var(--font-kop);
	font-size: 1.05rem;
}

/* Plusknop rechtsonder op de kaarten in de pop-up */
.wagenpop__combineren ul.products li.product .artikel__acties {
	display: flex;
	justify-content: flex-end;
	padding-top: 0.4rem;
}
.wagenpop__combineren ul.products li.product .artikel__bekijk { display: none; }

/* ------------------------------------- Sorteren even hoog als de iconen */
.shopbalk__rechts { align-items: center; }
.woocommerce-ordering,
.shopweergave { display: flex; align-items: center; }
.woocommerce-ordering select {
	height: 2.9rem;
	min-height: 2.9rem;
	line-height: 2.9rem;
	margin: 0;
}

/* Ook zonder .woocommerce-wikkel: geen kleurwissel, wel een lift. */
.artikelpagina .button:hover,
.artikelpagina .button:focus,
.artikelpagina button.button:hover,
.artikelpagina button.button:focus {
	background: var(--kleur-accent);
	color: var(--kleur-wit);
	transform: translateY(-2px);
}
.wagenpop .button:hover,
.wagenpop .button:focus { transform: translateY(-2px); }

/* --------------------------------- Sorteren op één lijn met de icoonknoppen */
.woocommerce .woocommerce-ordering,
.shopbalk .woocommerce-ordering { margin: 0; }

/* ------------------------ Slim combineren in de pop-up: drie naast elkaar */
.wagenpop__combineren ul.products {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wagenpop__combineren ul.products li.product { height: 100%; }

/* De gele plusknop staat altijd rechtsonder, hoe lang de titel ook is. */
.wagenpop__combineren ul.products li.product .artikel__acties { margin-top: auto; }

/* Knoppen in de pop-up: een <button> krijgt dezelfde letter als een <a>. */
.wagenpop__acties .btn,
.wagenpop__acties button.btn {
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
}

/* ------------------------------------------- Label "Aanbieding" (productpagina)
 *
 * Dezelfde stijl en kleur als het label "Actie" op de kaarten in de webshop
 * (.artikel__vlag in shop.css): een rood blokje met witte letters linksboven
 * op de foto, in plaats van de olijfgroene cirkel van WooCommerce.
 */
:root {
	--label-actie-bg:    var(--kleur-accent, #e30613);
	--label-actie-tekst: var(--kleur-wit, #ffffff);
	--label-actie-plek:  0.6rem;   /* afstand tot de rand van de foto */
	--label-actie-maat:  0.85rem;
}

.woocommerce div.product span.onsale,
.woocommerce-page div.product span.onsale {
	position: absolute;
	top: var(--label-actie-plek);
	left: var(--label-actie-plek);
	right: auto;
	z-index: 9;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0.2rem 0.7rem;
	border-radius: var(--btn-radius);
	background: var(--label-actie-bg);
	color: var(--label-actie-tekst);
	font-family: var(--font-kop);
	font-size: var(--label-actie-maat);
	font-weight: 700;
	line-height: 1.65;
	text-align: left;
}