/* ==========================================================================
   Workmed — account.css
   Mijn account: inloggen/registreren, navigatie, dashboard, bestellingen,
   Mijn zorg, adressen, accountgegevens, wachtwoord vergeten.
   Selectors beginnen met .account-page zodat ze woocommerce.css (later geladen) overrulen.
   ========================================================================== */

/* Pagina ------------------------------------------------------------------- */

.account-page {
	padding: 30px 0 110px;
}

.account-page .account-page__breadcrumb {
	margin-bottom: 40px;
}

.account-page--in .account-page__breadcrumb {
	margin-bottom: 36px;
}

.account-page .woocommerce-notices-wrapper:not(:empty) {
	margin-bottom: 8px;
}

/* Typografie */

.account-page .account-title {
	font-size: 36px;
	line-height: 1.12;
	font-weight: 500;
	margin: 0 0 24px;
	overflow-wrap: anywhere;
}

.account-page .account-title strong {
	font-weight: 800;
}

.account-page .account-title--h2 {
	margin-bottom: 14px;
}

.account-page .account-lead {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--c-body);
	margin: 0 0 24px;
}

.account-page .account-title + .account-lead {
	margin-top: -16px;
}

.account-page .account-lead--dashboard {
	margin-bottom: 30px;
}

.account-page .account-lead a {
	color: var(--c-green);
	font-weight: 600;
}

.account-page .account-lead a:hover {
	color: var(--c-petrol);
}

.account-page .account-subtitle {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}

.account-page .account-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--c-green);
}

.account-page .account-back:hover {
	color: var(--c-petrol);
}

.account-page .account-back--bottom {
	margin: 22px 0 0;
}

/* Knoppen */

.account-page .button.account-btn-primary,
.account-page .btn.account-btn-primary {
	min-height: 52px;
	padding: 0 28px;
	border-radius: 26px;
	font-size: 15.5px;
	background: var(--c-green);
	border-color: var(--c-green);
	color: #fff;
}

.account-page .button.account-btn-primary:hover,
.account-page .button.account-btn-primary:focus-visible {
	background: var(--c-petrol);
	border-color: var(--c-petrol);
	color: #fff;
}

.account-page .account-btn-ink {
	min-height: 52px;
	padding: 0 28px;
	border-radius: 26px;
	border: 1px solid var(--c-petrol);
	background: transparent;
	color: var(--c-petrol);
	font-size: 15.5px;
}

.account-page .account-btn-ink:hover,
.account-page .account-btn-ink:focus-visible {
	background: var(--c-petrol);
	border-color: var(--c-petrol);
	color: #fff;
}

/* Formulieren (gedeeld) */

.account-page .form-row {
	margin: 0 0 14px;
}

.account-page .form-row label:not(.woocommerce-form__label-for-checkbox) {
	margin-bottom: 6px;
}

.account-page .input-text,
.account-page input[type="text"],
.account-page input[type="email"],
.account-page input[type="password"],
.account-page input[type="tel"],
.account-page select {
	background-color: var(--c-white);
}

/* Status-pill */

.status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px;
	border-radius: 14px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	background: var(--c-sand);
	color: var(--c-body);
}

.status-pill::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: currentColor;
	flex-shrink: 0;
}

.status-pill--green {
	background: var(--c-green-tint);
	color: var(--c-green);
}

.status-pill--salmon {
	background: #FBE6DC;
	color: #8A4A2E;
}

.status-pill--red {
	background: #F7E2DF;
	color: var(--c-red);
}

/* Inloggen / registreren ---------------------------------------------------- */

.account-auth {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: stretch;
}

.account-auth--single {
	grid-template-columns: minmax(0, 620px);
	justify-content: center;
}

.account-auth__card {
	min-width: 0;
}

.account-auth__card--login {
	border: 1px solid var(--c-line);
	border-radius: 16px;
	padding: 44px 48px;
}

.account-auth__card--register {
	background: var(--c-sand);
	border-radius: 160px 160px 16px 16px;
	padding: 64px 48px 44px;
}

.account-page .account-auth__eyebrow {
	margin-bottom: 14px;
}

.account-auth__intro {
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--c-body-2);
	margin: 0 0 22px;
}

.account-auth__note {
	font-size: 13px;
	line-height: 1.5;
	color: var(--c-muted);
	margin: 6px 0 20px;
}

.account-auth__note a {
	font-weight: 600;
}

.account-auth__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin: 16px 0 22px;
	font-size: 14px;
}

.account-auth__row .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--c-body-2);
}

.account-auth__row .woocommerce-form-login__rememberme input {
	width: 17px;
	height: 17px;
	margin: 0;
}

.account-auth__row .lost_password {
	margin: 0;
}

.account-auth__row .lost_password a {
	font-weight: 600;
}

.account-page .account-auth__submit {
	margin: 0;
}

.account-auth__card--register .woocommerce-form-register .form-row-wide:last-of-type {
	margin-bottom: 0;
}

.account-auth__card--info .account-auth__intro {
	margin-bottom: 26px;
}

/* Layout ingelogd ------------------------------------------------------------ */

.account-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

.account-content {
	min-width: 0;
}

/* Navigatie */

.account-nav {
	position: sticky;
	top: calc(var(--header-h) + 24px);
}

.account-nav__profile {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 6px 22px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--c-line);
}

.account-nav__avatar {
	width: 52px;
	height: 60px;
	border-radius: 26px 26px 4px 4px;
	background: var(--c-green);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	flex-shrink: 0;
}

.account-nav__who {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.account-nav__name {
	font-size: 16px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.account-nav__since {
	font-size: 13px;
	color: var(--c-muted);
}

.account-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.account-nav__list a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--c-petrol);
	transition: background-color .15s var(--ease), color .15s var(--ease);
}

.account-nav__list a .icon {
	flex-shrink: 0;
}

.account-nav__list a:hover {
	background: var(--c-sand);
	color: var(--c-petrol);
}

.account-nav__list .is-active a,
.account-nav__list a[aria-current="page"] {
	background: var(--c-petrol);
	color: #fff;
}

.account-nav__logout-item {
	margin-top: 8px;
}

.account-nav .account-nav__logout {
	color: var(--c-muted);
}

.account-nav .account-nav__logout:hover {
	background: transparent;
	color: var(--c-red);
}

.account-nav__logout--top {
	display: none;
}

/* Dashboard ---------------------------------------------------------------- */

.account-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 36px;
}

.account-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--c-sand);
	border-radius: 100px 100px 12px 12px;
	padding: 36px 22px 24px;
	text-align: center;
	color: var(--c-petrol);
	transition: background-color .18s var(--ease);
}

.account-tile:hover {
	background: var(--c-sand-deep);
	color: var(--c-petrol);
}

.account-tile__label {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-muted-2);
	margin-bottom: 10px;
}

.account-tile__value {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.account-tile__meta {
	font-size: 13.5px;
	color: var(--c-body);
	margin-top: 8px;
}

.account-tile__meta .status-pill {
	margin-top: 2px;
	padding: 5px 10px;
}

.account-tile__link {
	color: var(--c-green);
	font-weight: 600;
}

.account-tile__short {
	display: none;
}

.account-section-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 6px;
}

.account-section-head__link {
	font-size: 14px;
	font-weight: 600;
	color: var(--c-green);
	white-space: nowrap;
}

/* Bestellingen ------------------------------------------------------------- */

.account-page .account-orders {
	display: block;
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.account-page .account-orders thead:not(.screen-reader-text),
.account-page .account-orders tbody {
	display: block;
}

.account-page .account-orders tr {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr) 150px 110px auto;
	gap: 20px;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid var(--c-line);
}

.account-page .account-orders .account-orders__head {
	padding: 0 0 10px;
}

.account-page .account-orders th,
.account-page .account-orders td {
	display: block;
	padding: 0;
	border: 0;
	text-align: left;
	vertical-align: middle;
	min-width: 0;
}

.account-page .account-orders__head th {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--c-muted-2);
}

.account-page .account-orders__cell--number a {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--c-petrol);
}

.account-page .account-orders__cell--number a:hover {
	color: var(--c-green);
}

.account-page .account-orders__cell--number time {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 400;
	color: var(--c-muted);
}

.account-page .account-orders__cell--items {
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--c-body-2);
	overflow-wrap: anywhere;
}

.account-page .account-orders__cell--total {
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
}

.account-page .account-orders__cell--total small {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--c-muted);
}

.order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.account-page .order-action {
	padding: 9px 14px;
	border-radius: 18px;
	border: 1px solid var(--c-input);
	background: transparent;
	color: var(--c-petrol);
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
}

.account-page .order-action:hover {
	border-color: var(--c-green);
	color: var(--c-petrol);
}

.account-page .order-action--order-again {
	background: var(--c-green-tint);
	border-color: var(--c-green-tint);
	color: var(--c-green);
}

.account-page .order-action--order-again:hover {
	background: var(--c-green);
	border-color: var(--c-green);
	color: #fff;
}

.account-page .order-action--pay {
	background: var(--c-green);
	border-color: var(--c-green);
	color: #fff;
}

.account-page .order-action--pay:hover {
	background: var(--c-petrol);
	border-color: var(--c-petrol);
	color: #fff;
}

.account-page .order-action--cancel {
	color: var(--c-red);
}

.account-page .order-action--cancel:hover {
	border-color: var(--c-red);
	color: var(--c-red);
}

.account-pagination {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
}

.account-page .account-pagination .button {
	padding: 11px 18px;
	font-size: 14px;
	border-radius: 22px;
}

.account-page .account-pagination .woocommerce-button--next {
	margin-left: auto;
}

/* Lege staat --------------------------------------------------------------- */

.account-empty {
	max-width: 640px;
	padding: 60px 48px 44px;
	border: 1.5px dashed var(--c-line-2);
	border-radius: 180px 180px 16px 16px;
	text-align: center;
}

.account-page .account-empty__title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 10px;
}

.account-empty__text {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--c-body);
	margin: 0 auto 24px;
	max-width: 480px;
}

.account-empty .btn-row {
	justify-content: center;
}

/* Adressen ----------------------------------------------------------------- */

.account-addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.account-address {
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 26px 28px;
	min-width: 0;
}

.account-address__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.account-page .account-address__title {
	font-size: 17px;
	font-weight: 700;
	margin: 0;
}

.account-address__edit {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--c-green);
}

.account-address__body {
	font-style: normal;
	font-size: 15px;
	line-height: 1.6;
	color: var(--c-body-2);
	overflow-wrap: anywhere;
}

.account-address__phone {
	color: var(--c-muted);
}

/* Accountgegevens / adres bewerken ------------------------------------------ */

.account-form {
	max-width: 640px;
}

.account-page .account-form .form-row-first,
.account-page .account-form .form-row-last {
	width: calc(50% - 7px);
}

.account-form__hint {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--c-muted);
}

.account-form__hint--top {
	margin: 0 0 14px;
}

.account-form__fieldset {
	border: 0;
	padding: 0;
	margin: 32px 0 0;
	min-width: 0;
}

.account-page .account-form__fieldset legend {
	font-size: 18px;
	padding: 0;
	margin-bottom: 6px;
}

.account-page .account-form__submit {
	margin: 24px 0 0;
	clear: both;
}

.account-page .woocommerce-address-fields__field-wrapper::after {
	content: "";
	display: table;
	clear: both;
}

/* Bestelling bekijken ------------------------------------------------------ */

.account-order-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: -12px 0 30px;
}

.account-order-meta__text {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--c-body);
}

.account-order-meta mark {
	background: none;
	color: var(--c-petrol);
	font-weight: 600;
}

.account-updates {
	list-style: none;
	margin: 12px 0 32px;
	padding: 0 0 0 18px;
	border-left: 2px solid var(--c-green-4);
}

.account-updates li {
	position: relative;
	padding: 0 0 16px 4px;
}

.account-updates li::before {
	content: "";
	position: absolute;
	left: -25px;
	top: 5px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--c-green);
	box-shadow: 0 0 0 3px var(--c-white);
}

.account-updates .meta {
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--c-muted);
}

.account-updates .description p {
	margin: 0;
	font-size: 15px;
	color: var(--c-body-2);
}

.account-content .woocommerce-order-details,
.account-content .woocommerce-customer-details {
	margin-top: 8px;
}

.account-content .woocommerce-order-details__title,
.account-content .woocommerce-column__title,
.account-content .woocommerce-order-downloads__title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 12px;
}

.account-page .account-content .order_details {
	margin-bottom: 20px;
}

.account-page .account-content .order_details th,
.account-page .account-content .order_details td {
	padding: 14px 0;
}

.account-page .account-content .order_details td:last-child,
.account-page .account-content .order_details tfoot th + td,
.account-page .account-content .order_details thead th:last-child {
	text-align: right;
}

.account-page .account-content .order_details tfoot tr:last-child th,
.account-page .account-content .order_details tfoot tr:last-child td {
	font-size: 17px;
	font-weight: 800;
	color: var(--c-petrol);
	border-bottom: 0;
}

.account-content .order_details .product-name a {
	color: var(--c-petrol);
	font-weight: 600;
}

.account-content .order_details .wc-item-meta {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	font-size: 13px;
	color: var(--c-muted);
}

.account-content .order_details .wc-item-meta p {
	display: inline;
	margin: 0;
}

.account-content .order-again {
	margin: 0 0 32px;
}

.account-page .account-content .order-again .button {
	padding: 11px 20px;
	font-size: 14px;
	border-radius: 22px;
	background: var(--c-green-tint);
	border-color: var(--c-green-tint);
	color: var(--c-green);
}

.account-page .account-content .order-again .button:hover {
	background: var(--c-green);
	border-color: var(--c-green);
	color: #fff;
}

.account-content .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.account-content .woocommerce-customer-details address {
	font-style: normal;
	font-size: 15px;
	line-height: 1.6;
	color: var(--c-body-2);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 22px 24px;
}

.account-content .woocommerce-customer-details address p {
	margin: 6px 0 0;
	color: var(--c-muted);
}

/* Mijn zorg ---------------------------------------------------------------- */

.care-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 16px;
}

.care-card {
	border-radius: var(--radius);
	padding: 26px 28px;
	min-width: 0;
}

.care-card--sand {
	background: var(--c-sand);
}

.care-card--tint {
	background: var(--c-green-tint);
}

.care-card__label {
	display: block;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-muted-2);
	margin-bottom: 10px;
}

.care-card__label--green {
	color: var(--c-green-2);
}

.account-page .care-card__title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 6px;
	overflow-wrap: anywhere;
}

.care-card__text {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--c-body-2);
	margin: 0;
}

.care-card--tint .care-card__text {
	margin-bottom: 16px;
}

.care-card__short {
	display: none;
}

.care-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}

.care-card__link {
	font-size: 14.5px;
	font-weight: 600;
}

.account-page .care-btn {
	min-height: 44px;
	padding: 0 20px;
	border-radius: 22px;
	font-size: 14.5px;
}

.care-reminder__on {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--c-green);
}

.care-reminder__on .icon {
	flex-shrink: 0;
}

.care-reminder__off {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--c-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.care-reminder__off:hover {
	color: var(--c-petrol);
}

.care-empty {
	margin-bottom: 16px;
}

.care-empty__icon {
	width: 56px;
	height: 64px;
	margin: 0 auto 18px;
	border-radius: 28px 28px 4px 4px;
	background: var(--c-green-tint);
	color: var(--c-green);
	display: flex;
	align-items: center;
	justify-content: center;
}

.care-empty__icon .icon {
	width: 24px;
	height: 24px;
}

.care-insurance {
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 22px 28px;
}

.care-insurance__summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

.account-page .care-insurance__title {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 4px;
}

.care-insurance__text {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--c-body-2);
	margin: 0;
}

.care-insurance__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 20px;
	border-radius: 23px;
	border: 1px solid var(--c-input);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--c-petrol);
	white-space: nowrap;
	flex-shrink: 0;
	transition: border-color .15s var(--ease);
}

.care-insurance__toggle:hover,
.care-insurance__toggle[aria-expanded="true"] {
	border-color: var(--c-green);
	color: var(--c-petrol);
}

.care-form {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--c-line);
}

.care-form[hidden] {
	display: none;
}

.care-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 14px;
}

.care-form__choices {
	border: 0;
	padding: 0;
	margin: 4px 0 16px;
	min-width: 0;
}

.care-form__choices legend {
	padding: 0;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-body-2);
}

.care-form__radios {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.account-page .care-form__radio {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid var(--c-input);
	border-radius: 20px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--c-petrol);
	cursor: pointer;
	transition: border-color .15s, background-color .15s;
}

.care-form__radio input {
	margin: 0 8px 0 0;
	width: 16px;
	height: 16px;
}

.care-form__radio:has(input:checked) {
	border-color: var(--c-green);
	background: var(--c-green-tint);
}

.care-form__radio:focus-within {
	outline: 2px solid var(--c-green);
	outline-offset: 2px;
}

.account-page .care-form__check {
	display: flex;
	align-items: flex-start;
	margin: 0 0 22px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--c-ink);
	cursor: pointer;
}

.care-form__check input {
	flex-shrink: 0;
	margin-top: 1px;
}

.care-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

.care-form__cancel {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--c-muted);
}

.care-form__cancel:hover {
	color: var(--c-petrol);
}

/* ==========================================================================
   iPad liggend (1024–1199)
   ========================================================================== */

@media (max-width: 1199px) {
	.account-layout {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 40px;
	}

	.account-auth__card--login {
		padding: 40px 36px;
	}

	.account-auth__card--register {
		padding: 60px 36px 40px;
	}

	.account-tile {
		border-radius: 80px 80px 12px 12px;
		padding: 32px 16px 22px;
	}

	/* Bestellingen in twee regels: nummer · status · totaal / artikelen · acties */
	.account-page .account-orders thead:not(.screen-reader-text) {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.account-page .account-orders tr {
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas:
			"number status total"
			"items items actions";
		gap: 10px 20px;
	}

	.account-page .account-orders__cell--number {
		grid-area: number;
	}

	.account-page .account-orders__cell--items {
		grid-area: items;
	}

	.account-page .account-orders__cell--status {
		grid-area: status;
	}

	.account-page .account-orders__cell--total {
		grid-area: total;
		text-align: right;
	}

	.account-page .account-orders__cell--actions {
		grid-area: actions;
		justify-self: end;
	}
}

/* ==========================================================================
   iPad staand (768–1023): navigatie als chips boven de inhoud
   ========================================================================== */

@media (max-width: 1023px) {
	.account-layout {
		display: block;
	}

	.account-nav {
		position: static;
		margin-bottom: 28px;
	}

	.account-nav__profile {
		gap: 12px;
		padding: 0;
		margin-bottom: 18px;
		border-bottom: 0;
	}

	.account-nav__avatar {
		width: 44px;
		height: 50px;
		border-radius: 22px 22px 4px 4px;
		font-size: 15px;
	}

	.account-nav__name {
		font-size: 15.5px;
	}

	.account-nav__since {
		font-size: 12.5px;
	}

	.account-nav .account-nav__logout--top {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-left: auto;
		font-size: 13.5px;
		font-weight: 600;
		white-space: nowrap;
	}

	.account-nav__list {
		flex-direction: row;
		gap: 6px;
		overflow-x: auto;
		scrollbar-width: none;
		margin: 0 calc(var(--gutter) * -1);
		padding: 0 var(--gutter) 4px;
		scroll-padding-inline: var(--gutter);
		position: relative;
	}

	.account-nav__list::-webkit-scrollbar {
		display: none;
	}

	.account-nav__list li {
		flex-shrink: 0;
	}

	.account-nav__list a {
		gap: 8px;
		padding: 10px 14px;
		border-radius: 20px;
		border: 1px solid var(--c-input);
		font-size: 13.5px;
		white-space: nowrap;
	}

	.account-nav__list a .icon {
		display: none;
	}

	.account-nav__list .is-active a,
	.account-nav__list a[aria-current="page"] {
		border-color: var(--c-petrol);
	}

	.account-nav__list a:hover {
		border-color: var(--c-green);
	}

	.account-nav__logout-item {
		display: none;
	}

	.account-auth__card--register {
		border-radius: 130px 130px 16px 16px;
		padding: 56px 28px 32px;
	}

	.account-auth__card--login {
		padding: 36px 28px;
	}

	.account-page .account-title {
		font-size: 32px;
	}
}

/* ==========================================================================
   Mobiel (≤767)
   ========================================================================== */

@media (max-width: 767px) {
	.account-page {
		padding: 24px 0 36px;
	}

	.account-page--in {
		padding-top: 20px;
	}

	.account-page .account-page__breadcrumb {
		display: none;
	}

	.account-page .account-title {
		font-size: 28px;
		margin-bottom: 16px;
	}

	.account-page--out .account-title {
		font-size: 30px;
		margin-bottom: 18px;
	}

	.account-page .account-title--h2,
	.account-page--out .account-title--h2 {
		font-size: 24px;
		line-height: 1.15;
		margin-bottom: 10px;
	}

	/* Het mobiele ontwerp toont geen introteksten onder de titels. */
	.account-page .account-lead {
		display: none;
	}

	.account-page .account-subtitle {
		font-size: 18px;
	}

	.account-page .button.account-btn-primary,
	.account-page .btn.account-btn-primary {
		width: 100%;
	}

	.account-page .form-row {
		margin-bottom: 12px;
	}

	/* Inloggen */
	.account-auth {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.account-auth__card--login {
		border: 0;
		border-radius: 0;
		padding: 0;
	}

	.account-auth__card--register {
		border-radius: 110px 110px 14px 14px;
		padding: 40px 22px 24px;
	}

	.account-page .account-auth__eyebrow {
		display: none;
	}

	.account-auth__intro {
		font-size: 14.5px;
		line-height: 1.6;
		margin-bottom: 16px;
	}

	.account-auth__row {
		margin: 14px 0 18px;
		font-size: 13.5px;
	}

	.account-page .account-btn-ink {
		min-height: 50px;
		border-radius: 25px;
		font-size: 15px;
	}

	/* Dashboard-tegels als rijen */
	.account-tiles {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		margin-bottom: 24px;
	}

	.account-tile {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 0 12px;
		border-radius: 12px;
		padding: 16px 18px;
		text-align: left;
	}

	.account-tile__label {
		grid-column: 1;
		font-size: 12.5px;
		letter-spacing: 0;
		text-transform: none;
		color: var(--c-muted);
		margin: 0;
	}

	.account-tile__value {
		grid-column: 1;
		font-size: 15.5px;
	}

	.account-tile__meta {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin: 0;
		font-size: 13px;
		text-align: right;
	}

	.account-tile__meta .status-pill {
		font-size: 12px;
	}

	.account-tile__long {
		display: none;
	}

	.account-tile__short {
		display: inline;
	}

	.account-tile--provider {
		display: none;
	}

	.account-section-head {
		margin-bottom: 4px;
	}

	/* Bestellingen als kaarten */
	.account-page .account-orders tr {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"number status"
			"items total"
			"actions actions";
		gap: 6px 10px;
		align-items: start;
		padding: 16px 0;
	}

	.account-page .account-orders__cell--number a {
		font-size: 15px;
	}

	.account-page .account-orders__cell--items {
		font-size: 13.5px;
		line-height: 1.4;
	}

	.account-page .account-orders__cell--status {
		justify-self: end;
	}

	.account-page .account-orders__cell--status .status-pill {
		padding: 5px 10px;
		font-size: 12px;
	}

	.account-page .account-orders__cell--total {
		font-size: 15px;
		align-self: start;
	}

	.account-page .account-orders__cell--actions {
		justify-self: start;
		margin-top: 6px;
	}

	.account-page .account-orders--compact .account-orders__cell--actions {
		display: none;
	}

	/* Lege staat */
	.account-empty {
		border-radius: 110px 110px 14px 14px;
		padding: 44px 22px 26px;
	}

	.account-page .account-empty__title {
		font-size: 19px;
	}

	.account-empty__text {
		font-size: 14.5px;
	}

	/* Adressen */
	.account-addresses {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.account-address {
		padding: 20px;
	}

	.account-page .account-address__title {
		font-size: 16px;
	}

	/* Formulieren */
	.account-page .account-form .form-row-first,
	.account-page .account-form .form-row-last {
		width: calc(50% - 6px);
	}

	.account-page .account-form .woocommerce-address-fields .form-row-first,
	.account-page .account-form .woocommerce-address-fields .form-row-last,
	.account-page .account-form__fieldset .form-row-first,
	.account-page .account-form__fieldset .form-row-last {
		width: 100%;
		float: none;
	}

	.account-form__fieldset {
		margin-top: 24px;
	}

	.account-page .account-form__fieldset legend {
		font-size: 17px;
	}

	.account-page .account-form__submit {
		margin-top: 20px;
	}

	/* Bestelling bekijken */
	.account-order-meta {
		margin: -6px 0 24px;
	}

	.account-order-meta__text {
		font-size: 14.5px;
	}

	.account-content .woocommerce-columns--addresses {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Mijn zorg */
	.care-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		margin-bottom: 12px;
	}

	.care-card {
		border-radius: 12px;
		padding: 20px;
	}

	.care-card__label {
		margin-bottom: 8px;
	}

	.account-page .care-card__title {
		font-size: 17px;
		margin-bottom: 4px;
	}

	.care-card__text {
		font-size: 14px;
		line-height: 1.55;
	}

	.care-card--tint .care-card__text {
		margin-bottom: 14px;
	}

	.care-card__long {
		display: none;
	}

	.care-card__short {
		display: inline;
	}

	.account-page .care-btn {
		width: 100%;
		min-height: 46px;
		border-radius: 23px;
	}

	.care-insurance {
		border-radius: 12px;
		padding: 18px 20px;
	}

	.care-insurance__summary {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.account-page .care-insurance__title {
		font-size: 15.5px;
	}

	.care-insurance__text {
		font-size: 14px;
	}

	.care-insurance__toggle {
		height: 42px;
	}

	.care-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}