/**
 * Mijn account in de huisstijl.
 */

/* ------------------------------------------------------------ Mijn account */
.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 16rem minmax(0, 1fr);
	gap: var(--ruimte-m);
	align-items: start;
}
.woocommerce-account.woocommerce-page:not(.logged-in) .woocommerce { display: block; max-width: var(--container-smal); }

.woocommerce-MyAccount-navigation {
	padding: 1rem 1.1rem;
	border-radius: 10px;
	background: var(--kleur-wit);
	border: 1px solid var(--kleur-lijn);
}
.woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
.woocommerce-MyAccount-navigation li + li { border-top: 1px solid var(--kleur-lijn); }
.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.6rem 0;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation a:hover { color: var(--kleur-accent); }

.woocommerce-MyAccount-content {
	padding: 1.3rem 1.4rem;
	border-radius: 10px;
	background: var(--kleur-wit);
	border: 1px solid var(--kleur-lijn);
}
.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	padding: 1.4rem 1.5rem;
	border: 0;
	border-radius: 10px;
	background: var(--kleur-wit);
	border: 1px solid var(--kleur-lijn);
}
.woocommerce-account form .form-row { margin-bottom: 0.9rem; }
.woocommerce-account label { display: block; margin-bottom: 0.25rem; font-weight: 600; }
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="password"],
.woocommerce-account select {
	width: 100%;
	padding: 0.7rem 1rem;
	border: 1px solid var(--kleur-lijn);
	border-radius: var(--btn-radius);
	background: var(--kleur-wit);
	color: var(--kleur-tekst);
	font: inherit;
}
.woocommerce-account .woocommerce-form-login__rememberme { font-weight: 400; }

.woocommerce-account .u-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ruimte-m);
}
.woocommerce-account .u-columns .col-1,
.woocommerce-account .u-columns .col-2 { width: auto; float: none; }

.woocommerce-account .woocommerce-orders-table,
.woocommerce-account table.shop_table {
	width: 100%;
	border-collapse: collapse;
}
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
	padding: 0.6rem 0.4rem;
	text-align: left;
	border-bottom: 1px solid var(--kleur-lijn);
}

@media (max-width: 1024px) {
	/* minmax(0, 1fr): lange inhoud mag de kolom niet breder dan het scherm maken. */
	.woocommerce-account .woocommerce { grid-template-columns: minmax(0, 1fr); }
	.woocommerce-account .u-columns { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Artikelpagina, winkelwagen en afrekenen — versie 2
   ========================================================================== */

/* -------------------------------------------- Correctie indeling Mijn account */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after { content: none; display: none; }

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-content p:first-child { margin-top: 0; }

/*
 * Mobiel: meldingen met een knop (bijv. "Blader door producten") onder elkaar,
 * zodat de knop niet naast de tekst over de rand van het scherm valt.
 */
@media (max-width: 600px) {
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button,
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button {
		float: none;
		order: 2;
		white-space: normal;
	}
}