/*
 * Waste2Green: productpagina (template "Single product 2026").
 * Geen Figma-ontwerp voor deze pagina; maten en kleuren volgen de Groenshop (frame 257:5094),
 * Home new (1725) en de header/footer 2026. Zie _redesign/productpagina/FIGMA-CHECK.md.
 */

.w2g-productkop,
.w2g-keuze,
.w2g-omschrijving {
	--w2g-green: var(--e-global-color-e76fdad, #339941);
	--w2g-green-dark: #1F5C3D;
	--w2g-green-soft: var(--e-global-color-2e6689a, #E3F0DC);
	--w2g-yellow: var(--e-global-color-da4ab8f, #F7C548);
	--w2g-black: #040404;
	--w2g-text: #1E2B22;
	--w2g-muted: #5D5D5D;
	--w2g-track: #EEEEEE;
	--w2g-head: "Fredoka", sans-serif;
	--w2g-body: "Prompt", sans-serif;
	box-sizing: border-box;
	font-family: var(--w2g-body);
	color: var(--w2g-text);
}

.w2g-productkop *,
.w2g-keuze *,
.w2g-omschrijving * {
	box-sizing: border-box;
}

.w2g-product-leeg {
	margin: 0;
	padding: 16px;
	border: 1px dashed #CCCCCC;
	border-radius: 12px;
	color: var(--w2g-muted, #5D5D5D);
}

/* ---------- Productkop ---------- */

.w2g-productkop__crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 24px;
	color: var(--w2g-muted);
}

.w2g-productkop__crumbs a {
	color: var(--w2g-muted);
	text-decoration: none;
}

.w2g-productkop__crumbs a:hover { color: var(--w2g-green); }
.w2g-productkop__crumbs [aria-current] { color: var(--w2g-text); }

.w2g-productkop__label {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--w2g-green);
}

.w2g-productkop__title {
	margin: 0 0 16px;
	font-family: var(--w2g-head);
	font-weight: 600;
	font-size: 64px;
	line-height: 1;
	color: var(--w2g-black);
	overflow-wrap: anywhere;
}

.w2g-productkop__price {
	margin: 0 0 16px;
	font-family: var(--w2g-head);
	font-size: 24px;
	line-height: 28px;
	font-weight: 500;
	color: var(--w2g-green);
}

.w2g-productkop__text,
.w2g-productkop__text p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--w2g-muted);
}

.w2g-productkop__text p + p { margin-top: 12px; }

/* ---------- Keuzeblok ---------- */

.w2g-keuze {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px;
	border-radius: 24px;
	background: #FFFFFF;
}

.w2g-keuze__melding {
	margin: 0;
	padding: 12px 16px;
	border-radius: 12px;
	font-size: 15px;
	line-height: 22px;
}

.w2g-keuze__melding--ok { background: var(--w2g-green-soft); color: var(--w2g-green-dark); }
.w2g-keuze__melding--fout { background: #FBE2DB; color: #8A2C1A; }

.w2g-keuze__kop {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.w2g-keuze__icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--w2g-green);
	color: #FFFFFF;
}

.w2g-keuze--niet-beschikbaar .w2g-keuze__icoon { background: var(--w2g-yellow); color: var(--w2g-black); }
.w2g-keuze--gast .w2g-keuze__icoon,
.w2g-keuze--geen-school .w2g-keuze__icoon { background: var(--w2g-green-soft); color: var(--w2g-green); }

.w2g-keuze__titel {
	margin: 0 0 4px;
	font-family: var(--w2g-head);
	font-weight: 500;
	font-size: 24px;
	line-height: 28px;
	color: var(--w2g-black);
}

.w2g-keuze__tekst {
	margin: 0;
	font-size: 16px;
	line-height: 22px;
	color: var(--w2g-muted);
}

.w2g-keuze__saldo {
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid #EBEBEB;
	font-size: 16px;
	line-height: 22px;
}

.w2g-keuze__saldo strong { color: var(--w2g-green-dark); }

.w2g-keuze__voortgang-tekst {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 20px;
	font-weight: 500;
}

.w2g-keuze__balk {
	height: 12px;
	border-radius: 999px;
	background: var(--w2g-track);
	overflow: hidden;
}

.w2g-keuze__balk span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--w2g-green);
}

.w2g-keuze__nog {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--w2g-muted);
}

.w2g-keuze__acties {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.w2g-keuze__acties form { margin: 0; }

.w2g-keuze__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 24px;
	border: 0;
	border-radius: 100px;
	font-family: var(--w2g-body);
	font-size: 15px;
	line-height: 15px;
	font-weight: 400;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.w2g-keuze__knop--groen,
.w2g-keuze__knop--groen:visited { background: var(--w2g-green); color: #FFFFFF; }
.w2g-keuze__knop--groen:hover,
.w2g-keuze__knop--groen:focus { background: var(--w2g-green-dark); color: #FFFFFF; }

.w2g-keuze__knop--zacht,
.w2g-keuze__knop--zacht:visited { background: var(--w2g-green-soft); color: var(--w2g-green-dark); }
.w2g-keuze__knop--zacht:hover,
.w2g-keuze__knop--zacht:focus { background: #D3E8CA; color: var(--w2g-green-dark); }

.w2g-keuze__knop:focus-visible,
.w2g-keuze__link:focus-visible {
	outline: 2px solid var(--w2g-green);
	outline-offset: 3px;
}

.w2g-keuze__doel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 16px;
	border-radius: 100px;
	background: var(--w2g-green-soft);
	color: var(--w2g-green-dark);
	font-weight: 500;
}

.w2g-keuze__link {
	color: var(--w2g-green-dark);
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Niet ingelogd: zelfde opmaak als het blok "Wat kan jouw school al kiezen?" op de Groenshop (1799). */
.w2g-keuze--uitgelogd {
	padding: 40px;
	border-radius: 32px;
	background: var(--w2g-green-soft);
}

.w2g-keuze--uitgelogd .w2g-keuze__icoon {
	flex-basis: 64px;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--w2g-green);
	color: #FFFFFF;
}

.w2g-keuze--uitgelogd .w2g-keuze__icoon svg {
	width: 32px;
	height: 32px;
}

.w2g-keuze--uitgelogd.w2g-keuze--niet-beschikbaar .w2g-keuze__icoon {
	background: var(--w2g-yellow);
	color: var(--w2g-black);
}

.w2g-keuze--uitgelogd .w2g-keuze__titel { line-height: 1.2; }
.w2g-keuze--uitgelogd .w2g-keuze__tekst { line-height: 1.67; }

/* Knoppen onder de tekst, niet onder het icoon. */
.w2g-keuze--uitgelogd .w2g-keuze__acties { padding-left: 78px; gap: 12px 20px; }

.w2g-keuze__knop--wit,
.w2g-keuze__knop--wit:visited { background: #FFFFFF; color: var(--w2g-green); }
.w2g-keuze__knop--wit:hover,
.w2g-keuze__knop--wit:focus { background: var(--w2g-green); color: #FFFFFF; }

/* ---------- Omschrijving ---------- */

.w2g-omschrijving__kop {
	margin: 0 0 16px;
	font-family: var(--w2g-head);
	font-weight: 600;
	font-size: 32px;
	line-height: 1.15;
	color: var(--w2g-black);
}

.w2g-omschrijving__tekst {
	max-width: 760px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--w2g-muted);
}

/* Sectie zonder lange omschrijving: helemaal weg. */
.w2g-sectie-omschrijving:not(:has(.w2g-omschrijving)) {
	display: none;
}

/* ---------- Kleinere schermen ---------- */

@media (max-width: 1024px) {
	.w2g-productkop__title { font-size: 48px; }
}

@media (max-width: 767px) {
	.w2g-productkop__title { font-size: 40px; line-height: 1.05; }
	.w2g-productkop__price { font-size: 22px; }
	.w2g-keuze { padding: 20px; border-radius: 20px; }
	.w2g-keuze--uitgelogd { padding: 24px 20px; border-radius: 24px; }
	.w2g-keuze--uitgelogd .w2g-keuze__kop { flex-direction: column; }
	.w2g-keuze--uitgelogd .w2g-keuze__icoon { flex-basis: auto; width: 56px; height: 56px; }
	.w2g-keuze--uitgelogd .w2g-keuze__icoon svg { width: 28px; height: 28px; }
	.w2g-keuze--uitgelogd .w2g-keuze__acties { padding-left: 0; }
	.w2g-keuze__titel { font-size: 21px; line-height: 26px; }
	.w2g-keuze__acties { flex-direction: column; align-items: stretch; }
	.w2g-keuze__knop,
	.w2g-keuze__doel { width: 100%; justify-content: center; }
	.w2g-keuze__link { align-self: center; }
	.w2g-omschrijving__kop { font-size: 26px; }
}