/* ==========================================================================
   WINKEL IN DE HUISSTIJL
   Winkelwagen, afrekenen, bedankpagina en mijn-account (WooCommerce).

   WooCommerce laadt zijn eigen basisopmaak; die blijft staan voor de
   indeling van formulieren, en wordt hier overschreven waar het er in de
   huisstijl anders uit moet zien. Alles hangt onder .dp-winkel (winkel.php).
   ========================================================================== */

.dp-winkel .dp-winkel__kop {
	padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.dp-winkel .dp-winkel__inhoud {
	padding-bottom: var(--dp-section-y-tight);
}

.dp-winkel .dp-winkel__uitleg {
	max-width: 30rem;
	margin: 0 auto 1.25rem;
	text-align: center;
	color: var(--dp-text-muted);
}

/* --------------------------------------------------------------------------
   1. Formuliervelden
   -------------------------------------------------------------------------- */

.dp-winkel .woocommerce form .form-row {
	margin: 0 0 1rem;
	padding: 0;
}

.dp-winkel .woocommerce form .form-row label,
.dp-winkel .woocommerce-form label:not(.woocommerce-form__label-for-checkbox) {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	line-height: 1.4;
	color: var(--dp-text-strong);
}

.dp-winkel .woocommerce form .form-row .required {
	color: var(--dp-link);
	text-decoration: none;
}

.dp-winkel .woocommerce :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select, textarea),
.dp-winkel .woocommerce .select2-container .select2-selection--single {
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 1rem;
	border: var(--dp-border) solid var(--dp-line-strong);
	border-radius: var(--dp-radius-s);
	background: #fff;
	box-shadow: none;
	font: inherit;
	font-size: var(--dp-size-body);
	color: var(--dp-text-strong);
	transition:
		border-color var(--dp-transition),
		box-shadow var(--dp-transition);
}

.dp-winkel .woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.5;
	color: var(--dp-text-strong);
}

.dp-winkel .woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 0.6rem;
	transform: translateY(-50%);
}

.dp-winkel .woocommerce :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select, textarea):focus,
.dp-winkel .woocommerce .select2-container--focus .select2-selection--single {
	border-color: var(--dp-forest);
	outline: 0;
	box-shadow: 0 0 0 3px rgb(230 255 86 / 0.7);
}

.dp-winkel .woocommerce form .form-row.woocommerce-invalid :is(input, select) {
	border-color: #c0392b;
}

.dp-winkel .woocommerce :is(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--dp-forest);
}

/* --------------------------------------------------------------------------
   2. Knoppen
   Gewone knoppen donkergroen; de ene hoofdknop per scherm (Afrekenen,
   Bestelling plaatsen, Inloggen) lime met de donkere schijf, zoals op de site.
   -------------------------------------------------------------------------- */

.dp-winkel .woocommerce :is(a.button, button.button, input.button, .button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.85em 1.5em;
	border: var(--dp-border) solid var(--dp-forest);
	border-radius: var(--dp-radius-pill);
	background: var(--dp-forest);
	box-shadow: none;
	font-family: var(--dp-font-body);
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-bold);
	line-height: 1.2;
	color: var(--dp-paper);
	text-decoration: none;
	transition:
		background-color var(--dp-transition),
		transform var(--dp-transition),
		box-shadow var(--dp-transition);
}

.dp-winkel .woocommerce :is(a.button, button.button, input.button, .button):hover {
	background: #050a03;
	color: var(--dp-paper);
}

.dp-winkel .woocommerce :is(a.button, button.button, input.button, .button):disabled,
.dp-winkel .woocommerce :is(a.button, button.button, input.button, .button).disabled {
	opacity: 0.45;
}

.dp-winkel .woocommerce :is(.checkout-button, #place_order, .woocommerce-form-login__submit, .lost_reset_password button[type="submit"]) {
	width: 100%;
	padding: 1em 1.5em;
	border-color: var(--dp-pil-rand);
	background: var(--dp-lime);
	box-shadow:
		3px 3px 0 0 var(--dp-forest),
		0 14px 26px -14px rgb(18 43 7 / 0.45);
	font-size: var(--dp-size-body);
	color: var(--dp-forest);
}

.dp-winkel .woocommerce :is(.checkout-button, #place_order, .woocommerce-form-login__submit, .lost_reset_password button[type="submit"]):hover {
	background: var(--dp-lime);
	box-shadow: 0 0 0 0 var(--dp-forest);
	color: var(--dp-forest);
	transform: translate(3px, 3px);
}

/* --------------------------------------------------------------------------
   3. Meldingen ("Toegevoegd aan je winkelmand", fouten)
   -------------------------------------------------------------------------- */

.dp-winkel .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem 1rem 3.25rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-m);
	background: #fff;
	box-shadow: var(--dp-shadow-s);
	font-size: var(--dp-size-small);
	color: var(--dp-text);
}

.dp-winkel .woocommerce :is(.woocommerce-message, .woocommerce-info)::before {
	top: 1rem;
	left: 1.1rem;
	color: var(--dp-link);
}

.dp-winkel .woocommerce .woocommerce-error {
	border-color: rgb(192 57 43 / 0.3);
	background: #fff6f2;
}

.dp-winkel .woocommerce .woocommerce-error::before {
	top: 1rem;
	left: 1.1rem;
	color: #c0392b;
}

.dp-winkel .woocommerce :is(.woocommerce-message, .woocommerce-info) .button {
	float: right;
	padding: 0.5em 1em;
	font-size: var(--dp-size-xs);
}

/* --------------------------------------------------------------------------
   4. Tabellen en kaarten (winkelwagen, bestellingen, besteloverzicht)
   -------------------------------------------------------------------------- */

.dp-winkel .woocommerce table.shop_table {
	margin: 0 0 1.5rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
	box-shadow: var(--dp-shadow-m);
	font-size: var(--dp-size-small);
}

.dp-winkel .woocommerce table.shop_table :is(th, td) {
	padding: 1rem 1.25rem;
	border: 0;
	border-top: var(--dp-border) solid var(--dp-line);
	vertical-align: middle;
}

.dp-winkel .woocommerce table.shop_table thead th {
	border-top: 0;
	border-bottom: var(--dp-border) solid var(--dp-line);
	background: transparent;
	font-size: 0.72rem;
	font-weight: var(--dp-weight-bold);
	letter-spacing: var(--dp-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--dp-text-muted);
}

.dp-winkel .woocommerce table.shop_table tbody tr:first-child :is(th, td) {
	border-top: 0;
}

.dp-winkel .woocommerce table.shop_table :is(tfoot th, .cart-subtotal th, .order-total th) {
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

.dp-winkel .woocommerce table.shop_table .order-total :is(th, td) {
	background: var(--dp-moss);
	font-size: var(--dp-size-body);
	color: var(--dp-text-strong);
}

.dp-winkel .woocommerce table.shop_table a:not(.button, .remove) {
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
	text-decoration: none;
}

.dp-winkel .woocommerce table.shop_table a:not(.button, .remove):hover {
	text-decoration: underline;
}

.dp-winkel .woocommerce table.shop_table img {
	width: 4rem;
	border-radius: var(--dp-radius-s);
}

.dp-winkel .woocommerce table.cart a.remove {
	display: grid;
	place-items: center;
	width: 1.8rem;
	height: 1.8rem;
	border: var(--dp-border) solid var(--dp-line-strong);
	border-radius: 50%;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--dp-text-muted) !important;
}

.dp-winkel .woocommerce table.cart a.remove:hover {
	border-color: #c0392b;
	background: #c0392b;
	color: #fff !important;
}

.dp-winkel .woocommerce table.cart .quantity .qty {
	width: 4.5rem;
	min-height: 2.6rem;
	padding: 0.4rem 0.5rem;
	text-align: center;
}

.dp-winkel .woocommerce table.cart td.actions {
	background: var(--dp-paper);
}

.dp-winkel .woocommerce table.cart td.actions .coupon {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.dp-winkel .woocommerce table.cart td.actions .coupon .input-text {
	width: 12rem;
	min-height: 2.6rem;
}

/* --------------------------------------------------------------------------
   5. Winkelwagen: producten links, totaal rechts
   -------------------------------------------------------------------------- */

.dp-winkel .woocommerce:has(> .woocommerce-cart-form) {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

.dp-winkel .woocommerce:has(> .woocommerce-cart-form) > :not(.woocommerce-cart-form, .cart-collaterals) {
	grid-column: 1 / -1;
}

.dp-winkel .woocommerce .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
	padding: 1.5rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
	box-shadow: var(--dp-shadow-m);
}

.dp-winkel .woocommerce .cart-collaterals .cart_totals h2 {
	margin: 0 0 1rem;
	font-size: var(--dp-size-h5);
}

.dp-winkel .woocommerce .cart-collaterals .cart_totals table.shop_table {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.dp-winkel .woocommerce .cart-collaterals .cart_totals table.shop_table :is(th, td) {
	padding-inline: 0;
	background: transparent;
}

.dp-winkel .woocommerce .cart-collaterals .cross-sells {
	display: none;
}

/* De lege winkelmand. */
.dp-winkel .woocommerce .cart-empty.woocommerce-info {
	text-align: center;
}

.dp-winkel .woocommerce .return-to-shop {
	text-align: center;
}

/* --------------------------------------------------------------------------
   6. Afrekenen: gegevens links, overzicht en betalen rechts
   -------------------------------------------------------------------------- */

.dp-winkel .woocommerce form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	grid-template-areas:
		"klant kop"
		"klant overzicht";
	grid-template-rows: auto 1fr;
	gap: 0 clamp(1.5rem, 1rem + 2.5vw, 3rem);
	align-items: start;
}

.dp-winkel .woocommerce form.checkout > * {
	grid-column: 1 / -1;
}

.dp-winkel .woocommerce form.checkout > #customer_details {
	grid-area: klant;
}

.dp-winkel .woocommerce form.checkout > #order_review_heading {
	grid-area: kop;
	margin: 0 0 1rem;
	font-size: var(--dp-size-h5);
}

.dp-winkel .woocommerce form.checkout > #order_review {
	grid-area: overzicht;
	position: sticky;
	top: 7rem;
	padding: 1.5rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
	box-shadow: var(--dp-shadow-m);
}

.dp-winkel .woocommerce #customer_details :is(.col-1, .col-2) {
	float: none;
	width: 100%;
}

.dp-winkel .woocommerce #customer_details h3 {
	margin: 0 0 1rem;
	font-size: var(--dp-size-h5);
}

.dp-winkel .woocommerce #customer_details .col-2 h3 {
	margin-top: 1.5rem;
}

/* Het besteloverzicht in de kaart: een rustige lijst, geen tabel-in-een-kaart. */
.dp-winkel .woocommerce #order_review table.shop_table {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.dp-winkel .woocommerce #order_review table.shop_table thead th {
	padding: 0 0 0.75rem;
	background: transparent;
	color: var(--dp-text-muted);
}

.dp-winkel .woocommerce #order_review table.shop_table :is(th, td) {
	padding-inline: 0;
}

.dp-winkel .woocommerce #order_review table.shop_table .order-total :is(th, td) {
	background: transparent;
	font-size: var(--dp-size-h5);
}

/* Betaalmethodes (Mollie). */
.dp-winkel .woocommerce #payment {
	border-radius: var(--dp-radius-m);
	background: var(--dp-moss);
}

.dp-winkel .woocommerce #payment ul.payment_methods {
	padding: 1rem 1.25rem;
	border-bottom: var(--dp-border) solid var(--dp-line);
}

.dp-winkel .woocommerce #payment ul.payment_methods li {
	padding: 0.35rem 0;
	line-height: 1.5;
}

.dp-winkel .woocommerce #payment ul.payment_methods li label {
	display: inline;
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

.dp-winkel .woocommerce #payment ul.payment_methods li img {
	max-height: 1.5rem;
	margin-left: 0.4rem;
	vertical-align: middle;
}

.dp-winkel .woocommerce #payment div.payment_box {
	margin: 0.6rem 0 0.4rem;
	border-radius: var(--dp-radius-s);
	background: #fff;
	font-size: var(--dp-size-small);
	color: var(--dp-text);
}

.dp-winkel .woocommerce #payment div.payment_box::before {
	border-bottom-color: #fff;
}

.dp-winkel .woocommerce #payment div.form-row.place-order {
	margin: 0;
	padding: 1.25rem;
}

.dp-winkel .woocommerce .woocommerce-terms-and-conditions-wrapper {
	font-size: var(--dp-size-small);
}

/* "Heb je een kortingscode?" en "Al klant? Log in". */
.dp-winkel .woocommerce :is(.woocommerce-form-coupon-toggle, .woocommerce-form-login-toggle) .woocommerce-info {
	margin-bottom: 1rem;
	box-shadow: none;
}

.dp-winkel .woocommerce form.checkout_coupon,
.dp-winkel .woocommerce form.woocommerce-form-login {
	margin: 0 0 1.5rem;
	padding: 1.25rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-m);
	background: #fff;
}

/* --------------------------------------------------------------------------
   7. Bedankpagina
   -------------------------------------------------------------------------- */

.dp-winkel .dp-bedankt {
	padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.dp-winkel .dp-bedankt__kaart {
	position: relative;
	overflow: hidden;
	margin-bottom: 1.5rem;
	padding: clamp(2rem, 1.25rem + 3vw, 3.5rem);
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-section);
	background:
		radial-gradient(90% 70% at 100% 0%, rgb(230 255 86 / 0.45), transparent 60%),
		linear-gradient(160deg, var(--dp-moss) 0%, #fff 70%);
	box-shadow: var(--dp-shadow-l);
	text-align: center;
}

.dp-winkel .dp-bedankt__titel {
	max-width: 22ch;
	margin: 0.5rem auto 1rem;
	font-size: var(--dp-size-h2);
	line-height: var(--dp-leading-heading);
	text-wrap: balance;
}

.dp-winkel .dp-bedankt__lead {
	max-width: 34rem;
	margin: 0 auto;
	font-size: var(--dp-size-lead);
	color: var(--dp-text-strong);
}

.dp-winkel .dp-bedankt__tekst {
	max-width: 34rem;
	margin: 0.5rem auto 0;
	color: var(--dp-text-muted);
}

.dp-winkel .dp-bedankt__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 2rem;
}

.dp-winkel .woocommerce ul.dp-bedankt__overzicht {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 0.75rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.dp-winkel .woocommerce ul.dp-bedankt__overzicht li {
	float: none;
	margin: 0;
	padding: 1rem 1.25rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-m);
	background: #fff;
	font-size: var(--dp-size-xs);
	font-weight: var(--dp-weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dp-text-muted);
}

.dp-winkel .woocommerce ul.dp-bedankt__overzicht li strong {
	display: block;
	margin-top: 0.3rem;
	font-size: var(--dp-size-body);
	letter-spacing: 0;
	text-transform: none;
	color: var(--dp-text-strong);
}

.dp-winkel .woocommerce :is(.woocommerce-order-details, .woocommerce-customer-details) {
	margin-top: 2rem;
}

.dp-winkel .woocommerce :is(.woocommerce-order-details__title, .woocommerce-column__title) {
	margin: 0 0 1rem;
	font-size: var(--dp-size-h5);
}

.dp-winkel .woocommerce .woocommerce-customer-details address {
	padding: 1.25rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-m);
	background: #fff;
	font-style: normal;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   8. Mijn account: menu links, inhoud rechts
   -------------------------------------------------------------------------- */

.dp-winkel .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 15rem minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
	align-items: start;
}

.dp-winkel .woocommerce :is(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) {
	float: none;
	width: auto;
}

.dp-winkel .woocommerce .woocommerce-MyAccount-navigation {
	position: sticky;
	top: 7rem;
}

.dp-winkel .woocommerce .woocommerce-MyAccount-navigation ul {
	display: grid;
	gap: 0.25rem;
	margin: 0;
	padding: 0.5rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
	box-shadow: var(--dp-shadow-s);
	list-style: none;
}

.dp-winkel .woocommerce .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.65rem 0.9rem;
	border: var(--dp-border) solid transparent;
	border-radius: var(--dp-radius-s);
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text);
	text-decoration: none;
	transition: background-color var(--dp-transition);
}

.dp-winkel .woocommerce .woocommerce-MyAccount-navigation li a:hover {
	background: rgb(230 238 194 / 0.55);
}

.dp-winkel .woocommerce .woocommerce-MyAccount-navigation li.is-active a {
	border-color: rgb(18 43 7 / 0.12);
	background: var(--dp-leaf-soft);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

.dp-winkel .woocommerce .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 0.25rem;
	padding-top: 0.25rem;
	border-top: var(--dp-border) solid var(--dp-line);
}

.dp-winkel .woocommerce .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--dp-text-muted);
}

.dp-winkel .woocommerce .woocommerce-MyAccount-content > * + * {
	margin-top: 1rem;
}

.dp-winkel .dp-account__groet {
	font-size: var(--dp-size-lead);
	color: var(--dp-text-strong);
}

.dp-winkel .dp-account__klein {
	font-size: var(--dp-size-small);
	color: var(--dp-text-muted);
}

.dp-winkel .woocommerce .woocommerce-MyAccount-content a:not(.button, .ld-item-name, .ld-table-list-item-preview, .ld-button) {
	font-weight: var(--dp-weight-medium);
	color: var(--dp-link);
	text-decoration: underline;
	text-decoration-color: rgb(67 112 31 / 0.4);
	text-underline-offset: 0.2em;
}

.dp-winkel .woocommerce .woocommerce-MyAccount-content :is(h2, h3) {
	font-size: var(--dp-size-h5);
}

.dp-winkel .woocommerce .woocommerce-Addresses .woocommerce-Address {
	float: none;
	width: auto;
	padding: 1.25rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-m);
	background: #fff;
}

.dp-winkel .woocommerce .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
}

.dp-winkel .woocommerce .woocommerce-Addresses::before,
.dp-winkel .woocommerce .woocommerce-Addresses::after {
	display: none;
}

.dp-winkel .woocommerce fieldset {
	margin: 1.5rem 0;
	padding: 1.25rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-m);
}

.dp-winkel .woocommerce fieldset legend {
	padding: 0 0.4rem;
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-strong);
}

/* --------------------------------------------------------------------------
   9. Inloggen (mijn-account als je niet bent ingelogd)
   -------------------------------------------------------------------------- */

.dp-winkel .woocommerce > h2:first-child:not(:only-child) {
	display: none;
}

.dp-winkel .woocommerce form.woocommerce-form-login.login {
	max-width: 28rem;
	margin: 0 auto;
	padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
	border-radius: var(--dp-radius-l);
	box-shadow: var(--dp-shadow-l);
}

.dp-winkel .woocommerce form.woocommerce-form-login .woocommerce-form-login__rememberme {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 1rem;
	font-size: var(--dp-size-small);
}

.dp-winkel .woocommerce form.woocommerce-form-login .lost_password {
	margin: 1rem 0 0;
	text-align: center;
	font-size: var(--dp-size-small);
}

.dp-winkel .woocommerce form.woocommerce-form-login .lost_password a {
	color: var(--dp-link);
}

/* --------------------------------------------------------------------------
   10. Smalle schermen: alles onder elkaar
   -------------------------------------------------------------------------- */

@media (width < 56rem) {
	.dp-winkel .woocommerce:has(> .woocommerce-cart-form),
	.dp-winkel .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: minmax(0, 1fr);
	}

	.dp-winkel .woocommerce form.checkout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"klant"
			"kop"
			"overzicht";
	}

	.dp-winkel .woocommerce form.checkout > #order_review,
	.dp-winkel .woocommerce .woocommerce-MyAccount-navigation {
		position: static;
	}

	.dp-winkel .woocommerce form.checkout > #order_review_heading {
		margin-top: 1.5rem;
	}

	.dp-winkel .woocommerce table.shop_table_responsive tr td::before {
		font-weight: var(--dp-weight-bold);
		color: var(--dp-text-strong);
	}
}


/* --------------------------------------------------------------------------
   11. Ronde 4
   -------------------------------------------------------------------------- */

/* Inloggen: WooCommerce zet er nog een kopje "Login" boven; dat staat al in de
   paginakop. De kop staat op deze pagina in het midden, net als het formulier. */
.dp-winkel .woocommerce > h2:has(+ form.woocommerce-form-login) {
	display: none;
}

.dp-winkel:has(form.woocommerce-form-login.login):not(:has(form.checkout)) .dp-winkel__kop {
	text-align: center;
}

/* Onder het inlogformulier ruim lucht tot de footer. */
.dp-winkel:has(form.woocommerce-form-login.login):not(:has(form.checkout)) .dp-winkel__inhoud {
	padding-bottom: calc(var(--dp-section-y-tight) + 6.25rem);
}

/* Mijn account: WooCommerce zet een (lege) meldingenbalk vóór het menu; die
   krijgt de hele breedte, zodat menu en inhoud netjes naast elkaar staan. */
.dp-winkel .woocommerce:has(> .woocommerce-MyAccount-navigation) > :not(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) {
	grid-column: 1 / -1;
}

.dp-winkel .woocommerce > .woocommerce-MyAccount-navigation {
	grid-column: 1;
}

.dp-winkel .woocommerce > .woocommerce-MyAccount-content {
	grid-column: 2;
}

@media (width < 56rem) {
	.dp-winkel .woocommerce > :is(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) {
		grid-column: 1;
	}
}

/* De lege winkelmand: melding en knop als één rustig blok in het midden. */
.dp-winkel .woocommerce .cart-empty.woocommerce-info {
	max-width: 32rem;
	margin-inline: auto;
	padding-left: 1.25rem;
	font-size: var(--dp-size-body);
}

.dp-winkel .woocommerce .cart-empty.woocommerce-info::before {
	display: none;
}

.dp-winkel .dp-winkel__leeg {
	max-width: none;
	text-align: center;
}

/* De kop lijnt uit met de inhoud eronder (de gewone paginakop is smaller). */
.dp-winkel.dp-pagina-tekst .dp-artikel__kop .dp-container {
	max-width: calc(var(--dp-container) + 2 * var(--dp-gutter));
}

/* Zonder kop (de bedankpagina) moet de inhoud zelf onder het menu vandaan. */
.dp-winkel > .dp-winkel__inhoud:first-child {
	padding-top: clamp(8rem, 6.5rem + 4vw, 10.5rem);
}

.dp-winkel .dp-bedankt {
	padding-top: 0;
}

/* WooCommerce zet een clearfix op het besteloverzicht; in een grid worden
   dat lege tegels. */
.dp-winkel .woocommerce ul.dp-bedankt__overzicht::before,
.dp-winkel .woocommerce ul.dp-bedankt__overzicht::after {
	display: none;
}

/* Een leeg uitlegvak onder een betaalmethode (iDEAL heeft er geen tekst in). */
.dp-winkel .woocommerce #payment div.payment_box:empty {
	display: none !important;
}


/* --------------------------------------------------------------------------
   12. Ronde 5: rustiger tabellen, afrekenen als losse kaarten (zoals de
   RC-checkout van Simone), account en inloggen bijgeschaafd
   -------------------------------------------------------------------------- */

/* Tabelkop: geen donkergroene balk meer, gewoon de kaartkleur met een dun
   lijntje eronder. */
.dp-winkel .woocommerce table.shop_table thead th {
	border-bottom: var(--dp-border) solid var(--dp-line);
	background: transparent;
	color: var(--dp-text-muted);
}

/* "Winkelwagen bijwerken" alleen als er iets te bijwerken valt (na het
   veranderen van een aantal); uitgeschakeld zegt hij niemand iets. */
.dp-winkel .woocommerce button[name="update_cart"]:disabled {
	display: none;
}

/* Bedragen rechts uitgelijnd, in de winkelwagen en bij afrekenen. */
.dp-winkel .woocommerce .cart_totals table.shop_table td,
.dp-winkel .woocommerce .woocommerce-checkout-review-order-table :is(th.product-total, td.product-total, tfoot td) {
	text-align: right;
}

/* Afrekenen: de wrapper is het raster. Het formulier en het besteloverzicht
   doen met display: contents mee, zodat de waardebon (een eigen formulier,
   buiten het afrekenformulier) als losse kaart tussen bestelling en betalen
   kan staan. */
.dp-winkel .woocommerce:has(> form.checkout) {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	grid-template-areas:
		"melding   melding"
		"melding2  melding2"
		"inlog     ."
		"inlogform ."
		"klantkop  kop"
		"klant     overzicht"
		"klant     bon"
		"klant     bonform"
		"klant     betalen"
		"klant     vertrouwen"
		"klant     .";
	grid-template-rows: repeat(10, auto) 1fr;
	column-gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
	align-items: start;
}

.dp-winkel .woocommerce:has(> form.checkout) > form.checkout,
.dp-winkel .woocommerce form.checkout > #order_review {
	display: contents;
}

.dp-winkel .woocommerce:has(> form.checkout) > .woocommerce-notices-wrapper {
	grid-area: melding;
}

.dp-winkel .woocommerce form.checkout > .woocommerce-NoticeGroup {
	grid-area: melding2;
}

.dp-winkel .woocommerce form.checkout > wc-order-attribution-inputs {
	display: none;
}

.dp-winkel .woocommerce:has(> form.checkout) > .woocommerce-form-coupon-toggle {
	grid-area: bon;
}

.dp-winkel .woocommerce:has(> form.checkout) > form.checkout_coupon {
	grid-area: bonform;
}

.dp-winkel .woocommerce #order_review > table.woocommerce-checkout-review-order-table {
	grid-area: overzicht;
}

.dp-winkel .woocommerce #order_review > #payment {
	grid-area: betalen;
}

.dp-winkel .woocommerce form.checkout > .dp-afreken-vertrouwen {
	grid-area: vertrouwen;
}

/* "Factuurgegevens" boven de kaart, op dezelfde hoogte en in dezelfde maat
   als "Je bestelling". De kop die WooCommerce in de kaart zet, vervalt. */
.dp-winkel .woocommerce form.checkout > .dp-afreken-klantkop {
	grid-area: klantkop;
	margin: 0 0 1rem;
	font-size: var(--dp-size-h5);
}

.dp-winkel .woocommerce form.checkout #customer_details .woocommerce-billing-fields > h3 {
	display: none;
}

/* Privacytekst en het vinkje voor de voorwaarden: dezelfde letter, en wat
   lucht ertussen. */
.dp-winkel .woocommerce form.checkout .woocommerce-terms-and-conditions-wrapper :is(.woocommerce-privacy-policy-text p, label.woocommerce-form__label-for-checkbox) {
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-body) !important;
	line-height: 1.6;
	color: var(--dp-text);
}

.dp-winkel .woocommerce .woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text p {
	margin: 0 0 1.1rem;
}

.dp-winkel .woocommerce .woocommerce-terms-and-conditions-wrapper .form-row {
	margin: 0;
	padding: 0;
}

/* De kaarten. */
.dp-winkel .woocommerce form.checkout #customer_details,
.dp-winkel .woocommerce #order_review > table.woocommerce-checkout-review-order-table,
.dp-winkel .woocommerce #order_review > #payment,
.dp-winkel .woocommerce:has(> form.checkout) > .woocommerce-form-coupon-toggle .woocommerce-info {
	margin: 0 0 1rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
	box-shadow: var(--dp-shadow-m);
}

.dp-winkel .woocommerce form.checkout #customer_details {
	padding: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
}

.dp-winkel .woocommerce #order_review > table.woocommerce-checkout-review-order-table {
	padding: 0.75rem 1.5rem;
}

.dp-winkel .woocommerce #order_review > #payment {
	padding: 1.25rem;
}

/* Waardebon: een losse, rustige kaart zonder icoontje. */
.dp-winkel .woocommerce:has(> form.checkout) > .woocommerce-form-coupon-toggle .woocommerce-info {
	padding: 1.1rem 1.5rem;
	font-size: var(--dp-size-small);
}

.dp-winkel .woocommerce:has(> form.checkout) > .woocommerce-form-coupon-toggle .woocommerce-info::before {
	display: none;
}

.dp-winkel .woocommerce:has(> form.checkout) > form.checkout_coupon {
	margin-top: -0.5rem;
	border-radius: var(--dp-radius-l);
}

/* Velden in het afrekenformulier: lichtgroen in de witte kaart. */
.dp-winkel .woocommerce form.checkout :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select, textarea),
.dp-winkel .woocommerce form.checkout .select2-container .select2-selection--single {
	border-color: transparent;
	background: var(--dp-paper);
}

.dp-winkel .woocommerce form.checkout :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select, textarea):focus,
.dp-winkel .woocommerce form.checkout .select2-container--focus .select2-selection--single {
	border-color: var(--dp-forest);
	background: #fff;
}

/* Betaalmethodes: elk een eigen rij met een rand, de gekozen licht uitgelicht. */
.dp-winkel .woocommerce #order_review > #payment ul.payment_methods {
	display: grid;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

.dp-winkel .woocommerce #order_review > #payment ul.payment_methods > li {
	margin: 0;
	padding: 0.9rem 1rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-m);
	background: #fff;
	transition:
		border-color var(--dp-transition),
		background-color var(--dp-transition);
}

.dp-winkel .woocommerce #order_review > #payment ul.payment_methods > li:has(input:checked) {
	border-color: var(--dp-forest);
	background: var(--dp-paper);
}

.dp-winkel .woocommerce #order_review > #payment ul.payment_methods > li img {
	float: right;
	max-height: 1.6rem;
}

.dp-winkel .woocommerce #payment div.payment_box {
	background: var(--dp-paper);
}

.dp-winkel .woocommerce #payment div.payment_box::before {
	display: none;
}

/* Een leeg uitlegvak (iDEAL) verbergen, ook als er alleen witruimte in staat. */
.dp-winkel .woocommerce #payment div.payment_box:not(:has(*)) {
	display: none !important;
}

.dp-winkel .woocommerce #order_review > #payment div.form-row.place-order {
	padding: 0;
	background: transparent;
}

/* Lucht tussen het vinkje voor de voorwaarden en de bestelknop. */
.dp-winkel .woocommerce #payment .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 1.5rem;
}

/* Onder betalen: vertrouwen en de Mollie-badge. */
.dp-winkel .dp-afreken-vertrouwen {
	display: grid;
	gap: 1rem;
	justify-items: center;
	padding: 0.75rem 0 1rem;
	text-align: center;
}

.dp-winkel .dp-afreken-vertrouwen .dp-trust {
	justify-content: center;
}

.dp-winkel .dp-mollie {
	display: inline-flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: center;
	margin: 0;
	padding: 0.75rem 1.1rem;
	border-radius: var(--dp-radius-m);
	background: var(--dp-ink);
	font-size: var(--dp-size-xs);
	color: #fff;
}

.dp-winkel .dp-mollie__tekst {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
}

.dp-winkel .dp-mollie__tekst strong {
	font-size: 0.95rem;
	letter-spacing: -0.02em;
}

.dp-winkel .dp-mollie__iconen {
	display: flex;
	gap: 0.4rem;
	align-items: center;
}

.dp-winkel .dp-mollie__iconen img {
	height: 1.35rem;
	padding: 0.1rem 0.2rem;
	border-radius: 4px;
	background: #fff;
}

/* Mijn account: de begroeting iets kleiner, "Jouw cursussen" juist groter. */
.dp-winkel .dp-account__groet {
	font-size: var(--dp-size-body);
}

.dp-winkel .woocommerce .woocommerce-MyAccount-content .ld-section-heading :is(h2, h3) {
	font-size: var(--dp-size-h4);
	font-weight: var(--dp-weight-display);
}

/* Inloggen: ook de titel in het midden. */
.dp-winkel:has(form.woocommerce-form-login.login):not(:has(form.checkout)) .dp-winkel__kop :is(.dp-eyebrow, h1) {
	margin-inline: auto;
	text-align: center;
}

@media (width < 56rem) {
	.dp-winkel .woocommerce:has(> form.checkout) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"melding"
			"melding2"
			"inlog"
			"inlogform"
			"klantkop"
			"klant"
			"kop"
			"overzicht"
			"bon"
			"bonform"
			"betalen"
			"vertrouwen";
		grid-template-rows: none;
	}
}

/* De Mollie-badge: vet in de badge blijft wit (niet de donkere tekstkleur). */
.dp-winkel .dp-mollie strong {
	color: #fff;
}

/* De vertrouwensbalk onder betalen: alles onder elkaar in het midden. */
.dp-winkel .dp-afreken-vertrouwen .dp-trust,
.dp-winkel .dp-afreken-vertrouwen .dp-trust__tekst {
	flex-direction: column;
	gap: 0.4rem;
	align-items: center;
	text-align: center;
}

.dp-winkel .dp-afreken-vertrouwen .dp-trust__tekst {
	font-size: var(--dp-size-xs);
}

.dp-winkel .dp-afreken-vertrouwen .dp-trust__tekst {
	justify-items: center;
}


/* --------------------------------------------------------------------------
   13. Ronde 6: eigen vinkjes, waardebon in dezelfde kaart
   -------------------------------------------------------------------------- */

/* Vinkjes bij afrekenen: groter en in de huisstijl, met een gewone (niet vette)
   tekst ernaast. */
.dp-winkel .woocommerce form.checkout label.checkbox,
.dp-winkel .woocommerce form.checkout .woocommerce-form__label-for-checkbox {
	display: flex !important;
	gap: 0.75rem;
	align-items: flex-start;
	margin: 0;
	font-size: var(--dp-size-body);
	font-weight: var(--dp-weight-body) !important;
	line-height: 1.5;
	color: var(--dp-text);
	cursor: pointer;
}

.dp-winkel .woocommerce form.checkout input[type="checkbox"] {
	flex: none;
	width: 1.45rem;
	height: 1.45rem;
	margin: 0.05rem 0 0;
	border: 1.5px solid var(--dp-line-strong);
	border-radius: 0.4rem;
	background: #fff center / 0.95rem no-repeat;
	cursor: pointer;
	appearance: none;
	transition:
		background-color var(--dp-transition),
		border-color var(--dp-transition);
}

.dp-winkel .woocommerce form.checkout input[type="checkbox"]:hover {
	border-color: var(--dp-forest);
}

.dp-winkel .woocommerce form.checkout input[type="checkbox"]:checked {
	border-color: var(--dp-forest);
	background-color: var(--dp-forest);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f9ed' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
}

.dp-winkel .woocommerce form.checkout input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--dp-focus);
	outline-offset: 2px;
}

.dp-winkel .woocommerce form.checkout .dp-verklaring {
	margin-top: 1.25rem;
}

/* Waardebon: het invulveld klapt uit in dezelfde kaart, niet in een nieuwe.
   WooCommerce toont het formulier met display: block; zolang het dicht is
   staat er display: none. */
.dp-winkel .woocommerce:has(> form.checkout_coupon:not([style*="none"])) > .woocommerce-form-coupon-toggle .woocommerce-info {
	margin-bottom: 0;
	border-bottom: 0;
	border-radius: var(--dp-radius-l) var(--dp-radius-l) 0 0;
	box-shadow: none;
}

.dp-winkel .woocommerce:has(> form.checkout) > form.checkout_coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
	margin: 0 0 1rem;
	padding: 0 1.5rem 1.25rem;
	border: var(--dp-border) solid var(--dp-line);
	border-top: 0;
	border-radius: 0 0 var(--dp-radius-l) var(--dp-radius-l);
	background: #fff;
	box-shadow: var(--dp-shadow-m);
}

.dp-winkel .woocommerce:has(> form.checkout) > form.checkout_coupon p {
	margin: 0;
}

.dp-winkel .woocommerce:has(> form.checkout) > form.checkout_coupon > p:first-child {
	width: 100%;
	font-size: var(--dp-size-small);
	color: var(--dp-text-muted);
}

.dp-winkel .woocommerce:has(> form.checkout) > form.checkout_coupon .form-row {
	float: none;
	width: auto;
	margin: 0;
}

.dp-winkel .woocommerce:has(> form.checkout) > form.checkout_coupon .form-row-first {
	flex: 1;
}

.dp-winkel .woocommerce form.checkout_coupon input.input-text {
	border-color: transparent;
	background: var(--dp-paper);
}

.dp-winkel .woocommerce form.checkout_coupon input.input-text::placeholder,
.dp-winkel .woocommerce input::placeholder,
.dp-winkel .woocommerce textarea::placeholder {
	color: var(--dp-text-muted);
	opacity: 0.8;
}

/* WooCommerce zet bij openen display: block inline; zolang het vak open is
   houden we de nette rij (veld en knop naast elkaar). */
.dp-winkel .woocommerce:has(> form.checkout) > form.checkout_coupon:not([style*="none"]) {
	display: flex !important;
}

/* Het sterretje bij een verplicht vinkje belandt in de flexrij los aan de
   rechterkant; het vinkje zelf is verplicht (WooCommerce meldt het anders),
   dus het sterretje mag weg. */
.dp-winkel .woocommerce form.checkout :is(label.checkbox, .woocommerce-form__label-for-checkbox) .required {
	display: none;
}

/* --------------------------------------------------------------------------
   14. Mobiel
   -------------------------------------------------------------------------- */

/* "Winkelwagen bijwerken" ook op mobiel verbergen zolang hij uitgeschakeld is
   (WooCommerce maakt hem daar met een zwaardere regel blokbreed zichtbaar). */
.dp-winkel .woocommerce table.cart td.actions button[name="update_cart"]:disabled {
	display: none !important;
}

@media (width < 48rem) {
	.dp-winkel .woocommerce table.shop_table {
		width: 100%;
		table-layout: fixed;
	}

	.dp-winkel .woocommerce table.shop_table td {
		overflow-wrap: anywhere;
	}

	/* De waardebonrij: veld en knop onder elkaar, allebei de volle breedte. */
	.dp-winkel .woocommerce table.cart td.actions .coupon {
		flex-wrap: wrap;
	}

	.dp-winkel .woocommerce table.cart td.actions .coupon :is(.input-text, .button) {
		flex: 1 1 100%;
		width: 100%;
		margin: 0;
	}

	.dp-winkel .woocommerce table.cart td.actions .coupon + .button {
		width: 100%;
		margin-top: 0.6rem;
	}

	.dp-winkel .woocommerce table.cart .product-thumbnail {
		display: none;
	}
}

/* Mijn account op mobiel: het menu als één rij pillen die je opzij schuift,
   zodat je cursussen meteen in beeld staan. */
@media (width < 56rem) {
	.dp-winkel .woocommerce .woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: 0.4rem;
		overflow-x: auto;
		margin-inline: calc(-1 * var(--dp-gutter));
		padding: 0.25rem var(--dp-gutter) 0.5rem;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		scrollbar-width: none;
	}

	.dp-winkel .woocommerce .woocommerce-MyAccount-navigation li {
		flex: none;
	}

	.dp-winkel .woocommerce .woocommerce-MyAccount-navigation li a {
		padding: 0.55rem 0.95rem;
		border-color: var(--dp-line);
		border-radius: var(--dp-radius-pill);
		background: #fff;
		white-space: nowrap;
	}

	.dp-winkel .woocommerce .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
		margin: 0;
		padding: 0;
		border: 0;
	}
}

/* --------------------------------------------------------------------------
   15. Kale winkelwagen en afrekenen, wachtwoord vergeten
   -------------------------------------------------------------------------- */

/* Alleen het logo bovenaan, geen menubalk. */
.dp-kaalkop {
	display: flex;
	justify-content: center;
	padding: 1.75rem var(--dp-gutter) 0;
}

.dp-kaalkop img {
	width: auto;
	height: 2.3rem;
}

/* Zonder zwevende menubalk hoeft de kop niet zo ver naar beneden. */
.dp-kaal .dp-winkel__kop {
	padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* Wachtwoord vergeten (en een nieuw wachtwoord kiezen): hetzelfde witte
   kaartje in het midden als het inlogformulier. */
.woocommerce-lost-password .dp-winkel__kop,
.woocommerce-lost-password .dp-winkel__kop :is(.dp-eyebrow, h1) {
	margin-inline: auto;
	text-align: center;
}

.woocommerce-lost-password .dp-winkel__inhoud {
	padding-bottom: calc(var(--dp-section-y-tight) + 6.25rem);
}

.dp-winkel .woocommerce form.lost_reset_password {
	max-width: 28rem;
	margin: 0 auto;
	padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
	box-shadow: var(--dp-shadow-l);
}

.dp-winkel .woocommerce form.lost_reset_password > p:first-child {
	margin: 0 0 1.25rem;
	font-size: var(--dp-size-small);
	color: var(--dp-text);
}

.dp-winkel .woocommerce form.lost_reset_password .form-row {
	float: none;
	width: 100%;
	margin: 0 0 1rem;
	padding: 0;
}

.dp-winkel .woocommerce form.lost_reset_password .form-row:last-of-type {
	margin: 0.5rem 0 0;
}

.dp-winkel .woocommerce form.lost_reset_password button[type="submit"] {
	width: 100%;
}

/* De bevestiging "we hebben je een mail gestuurd": ook in het midden. */
.woocommerce-lost-password .dp-winkel .woocommerce > :is(.woocommerce-message, p) {
	max-width: 28rem;
	margin-inline: auto;
	text-align: center;
}

/* --------------------------------------------------------------------------
   16. Inloggen bij afrekenen
   Net als de waardebon: "Terugkerende klant? Log hier in" is een rustige
   kaart links, boven de factuurgegevens, en het formulier klapt in dezelfde
   kaart open. Velden zoals in de rest van het afrekenformulier, en een
   donkergroene knop: de enige lime knop hier is "Plaats bestelling".
   -------------------------------------------------------------------------- */

.dp-winkel .woocommerce:has(> form.checkout) > .woocommerce-form-login-toggle {
	grid-area: inlog;
}

.dp-winkel .woocommerce:has(> form.checkout) > form.woocommerce-form-login {
	grid-area: inlogform;
}

.dp-winkel .woocommerce:has(> form.checkout) > .woocommerce-form-login-toggle .woocommerce-info {
	margin: 0 0 1rem;
	padding: 1.1rem 1.5rem;
	border: var(--dp-border) solid var(--dp-line);
	border-radius: var(--dp-radius-l);
	background: #fff;
	box-shadow: var(--dp-shadow-m);
	font-size: var(--dp-size-small);
}

.dp-winkel .woocommerce:has(> form.checkout) > .woocommerce-form-login-toggle .woocommerce-info::before {
	display: none;
}

.dp-winkel .woocommerce:has(> form.woocommerce-form-login:not([style*="none"])) > .woocommerce-form-login-toggle .woocommerce-info {
	margin-bottom: 0;
	border-bottom: 0;
	border-radius: var(--dp-radius-l) var(--dp-radius-l) 0 0;
	box-shadow: none;
}

.dp-winkel .woocommerce:has(> form.checkout) > form.woocommerce-form-login {
	max-width: none;
	margin: 0 0 1.5rem;
	padding: 0 1.5rem 1.5rem;
	border: var(--dp-border) solid var(--dp-line);
	border-top: 0;
	border-radius: 0 0 var(--dp-radius-l) var(--dp-radius-l);
	background: #fff;
	box-shadow: var(--dp-shadow-m);
}

.dp-winkel .woocommerce:has(> form.checkout) > form.woocommerce-form-login:not([style*="none"]) {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0 1rem;
	align-items: end;
}

.dp-winkel .woocommerce:has(> form.checkout) > form.woocommerce-form-login > :is(p:not(.form-row), .form-row:not(.form-row-first, .form-row-last), .clear) {
	grid-column: 1 / -1;
}

.dp-winkel .woocommerce:has(> form.checkout) > form.woocommerce-form-login > p:first-child {
	margin: 0 0 1rem;
	font-size: var(--dp-size-small);
	color: var(--dp-text-muted);
}

.dp-winkel .woocommerce:has(> form.checkout) > form.woocommerce-form-login .clear {
	display: none;
}

.dp-winkel .woocommerce:has(> form.checkout) > form.woocommerce-form-login .form-row {
	float: none;
	width: auto;
	margin: 0 0 1rem;
}

.dp-winkel .woocommerce:has(> form.checkout) > form.woocommerce-form-login :is(input[type="text"], input[type="email"], input[type="password"]) {
	border-color: transparent;
	background: var(--dp-paper);
}

/* WooCommerce zet overal clearfix-pseudo's (::before/::after). In een
   flex- of gridrij tellen die als extra vakjes mee en duwen ze alles naar
   het midden; hier horen ze er niet. */
.dp-winkel .woocommerce:has(> form.checkout) > form.woocommerce-form-login::before,
.dp-winkel .woocommerce:has(> form.checkout) > form.woocommerce-form-login::after,
.dp-winkel .woocommerce:has(> form.checkout) > form.woocommerce-form-login .form-row::before,
.dp-winkel .woocommerce:has(> form.checkout) > form.woocommerce-form-login .form-row::after {
	display: none;
}

/* Onthouden links, de knop rechts op één regel. */
.dp-winkel .woocommerce:has(> form.checkout) > form.woocommerce-form-login .form-row:not(.form-row-first, .form-row-last) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.dp-winkel .woocommerce:has(> form.checkout) > form.woocommerce-form-login .woocommerce-form-login__rememberme {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0;
	font-size: var(--dp-size-small);
	font-weight: var(--dp-weight-body);
}

.dp-winkel .woocommerce:has(> form.checkout) > form.woocommerce-form-login .woocommerce-form-login__submit {
	width: auto !important;
	margin: 0;
	padding: 0.7em 1.4em !important;
	border-color: var(--dp-forest) !important;
	background: var(--dp-forest) !important;
	box-shadow: none !important;
	font-size: var(--dp-size-small) !important;
	color: var(--dp-paper) !important;
	transform: none !important;
}

.dp-winkel .woocommerce:has(> form.checkout) > form.woocommerce-form-login .woocommerce-form-login__submit:hover {
	background: var(--dp-link) !important;
}

.dp-winkel .woocommerce:has(> form.checkout) > form.woocommerce-form-login .lost_password {
	margin: 0;
	text-align: left;
	font-size: var(--dp-size-small);
}

@media (width < 36rem) {
	.dp-winkel .woocommerce:has(> form.checkout) > form.woocommerce-form-login:not([style*="none"]) {
		grid-template-columns: minmax(0, 1fr);
	}
}