/* =============================================================================
   Hinke. Trendstore — Mijn account (login + 5 ingelogde views).

   1:1 met Figma (file NVT61IBlNbt4LyTpo3CVlI, canvas 1920px):
     Login                 node 2197:3027
     Dashboard             node 2197:3162
     Bestellingen          node 2197:3969
     Adressen              node 2197:4089
     Accountgegevens       node 2197:4217
     Verlanglijstje        node 2197:4349

   Alle px-waarden komen uit de design-data (get_metadata), niet uit een
   screenshot. Coördinaten in commentaar zijn absoluut op het 1920-canvas:
   header 0…150, titelbalk 150…292, inhoud vanaf y=336.

   SPECIFICITEIT: WooCommerce' eigen stylesheets laden ná dit bestand en zetten
   o.a. `.woocommerce form .form-row .input-text` (0,3,1) en
   `.woocommerce-account .woocommerce-MyAccount-navigation` (0,2,0). Elke regel
   hieronder staat daarom achter de scope `.woocommerce-account .hinke-page__body`
   (of `.hinke-page__head`) plus minstens één eigen class, zodat we altijd op
   minimaal (0,3,0) — en bij velden/knoppen op (0,4,0) — uitkomen.
   ========================================================================== */

.woocommerce-account {
	/* Twee kleuren uit het ontwerp zonder token in main.css — bewust lokaal. */
	--hinke-acc-grey: #aaaaaa;      /* secundaire (grijze) knop verlanglijstje */
	--hinke-acc-checklabel: #212121; /* label naast de onthouden-checkbox       */
}

/* =============================================================================
   1. Gedeelde schil — titelbalk 1920×142 op y=150 (#efc2bd)

   page.php rendert de paginakop; op endpoints (/bestellingen/, /adressen/, …)
   vervangt WooCommerce de <h1> door de endpoint-titel. Het ontwerp toont op ALLE
   vijf de views dezelfde titel "Mijn account".

   Dat werd hier eerder met CSS opgelost. Inmiddels heeft page.php daar een filter
   voor (`hinke_page_title`) en zet inc/account.php de kop als echte tekst, dus is
   die truc weg — zienden en schermlezers krijgen nu dezelfde kop.
   ========================================================================== */

.woocommerce-account .hinke-page__head {
	display: flex;
	align-items: center;
	height: 142px;
	margin: 0;
	padding: 0;
	background: var(--hinke-pink);
}

.woocommerce-account .hinke-page__head > .hinke-container {
	width: min(100% - (2 * var(--hinke-gutter)), var(--hinke-container-max));
}

/* Glyph-top y=194: (142 − 55) / 2 = 43,5 onder de bandtop. */
/* De kop staat nu als echte tekst in de HTML — zie inc/account.php. Hier stond
   hem eerder als `::after { content: "Mijn account" }` met de `<h1>` op
   `color: transparent`; zienden lazen daardoor "Mijn account" en een schermlezer
   de endpointtitel ("Bestellingen"). */
.woocommerce-account .hinke-page__title {
	margin: 0;
	font-family: var(--hinke-font-heading);
	font-weight: 400;
	font-size: 40px;
	line-height: 55px;
	color: var(--hinke-white);
	text-align: center;
}

/* Login (uitgelogd) heeft géén titelbalk: inhoud begint direct onder de header. */
.woocommerce-account:not(.logged-in) .hinke-page__head {
	display: none;
}

/* =============================================================================
   2. Inhoudsbreedte + verticale start

   Het ontwerp loopt van x=299 tot x=1621 → 1322px, gecentreerd op 1920.
   Ingelogd: eerste navregel op y=336 → 44px onder de band (292).
   Uitgelogd: koppen op y=221 → 71px onder de header (150).
   ========================================================================== */

.woocommerce-account .hinke-page__body {
	padding: 44px 0 100px;
}

.woocommerce-account:not(.logged-in) .hinke-page__body {
	padding-top: 71px;
}

.woocommerce-account .hinke-page__body > .hinke-container {
	width: min(100% - (2 * var(--hinke-gutter)), 1322px);
}

/* =============================================================================
   3. Raster: zijbalk 282px op x=299 + inhoud 1014px op x=607 (tussen 26px)
   ========================================================================== */

.woocommerce-account .hinke-page__body .hinke-account {
	display: grid;
	grid-template-columns: 282px minmax(0, 1fr);
	column-gap: 26px;
	align-items: start;
}

/* woocommerce-layout.css zet hier float + 30%/68% — dat moet eruit. */
.woocommerce-account .hinke-page__body .hinke-account .woocommerce-MyAccount-navigation,
.woocommerce-account .hinke-page__body .hinke-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	margin: 0;
}

/* =============================================================================
   4. Zijbalk — Outfit 400 16px #4e4e4e, regelhoogte 49px, actief = onderstreept
   ========================================================================== */

.woocommerce-account .hinke-page__body .hinke-accnav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .hinke-page__body .hinke-accnav__item {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 49px;
	color: var(--hinke-body);
}

.woocommerce-account .hinke-page__body .hinke-accnav__link {
	color: inherit;
	text-decoration: none;
}

.woocommerce-account .hinke-page__body .hinke-accnav__item.is-active > .hinke-accnav__link,
.woocommerce-account .hinke-page__body .hinke-accnav__link:hover,
.woocommerce-account .hinke-page__body .hinke-accnav__link:focus-visible {
	text-decoration: underline;
}

/* =============================================================================
   5. Verticale start van de inhoudskolom, per view

   De zijbalk begint op y=336; de inhoud start per view iets lager:
   dashboard/bestellingen/adressen y=351, accountgegevens y=355 (veldtop),
   verlanglijstje y=344 (bovenkant thumbnail).
   ========================================================================== */

.woocommerce-dashboard .hinke-account__content,
.woocommerce-orders .hinke-account__content,
.woocommerce-edit-address .hinke-account__content {
	padding-top: 15px;
}

.woocommerce-edit-account .hinke-account__content {
	padding-top: 19px;
}

.woocommerce-verlanglijstje .hinke-account__content {
	padding-top: 8px;
}

/* =============================================================================
   6. Dashboard — één tekstblok, b=896, 16px/20px, witregel van 20px
   ========================================================================== */

.woocommerce-account .hinke-page__body .hinke-dash {
	max-width: 896px;
}

.woocommerce-account .hinke-page__body .hinke-dash__text {
	margin: 0;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: var(--hinke-body);
}

.woocommerce-account .hinke-page__body .hinke-dash__text + .hinke-dash__text {
	margin-top: 20px;
}

.woocommerce-account .hinke-page__body .hinke-dash__text a {
	color: inherit;
}

/* =============================================================================
   7. Bestellingen — kaart 924×90 met koprij 42px en datarij 48px

   Kolomranden (binnenwerk 608…1530): 608 | 828 | 1090 | 1345 | 1530.
   Ordernummer 16px ingesprongen → x=624; Status-kolom is gecentreerd
   (kop x=1414, waarde x=1371 vallen beide op midden 1437,5).
   ========================================================================== */

.woocommerce-account .hinke-page__body .hinke-orders__card {
	width: 924px;
	max-width: 100%;
	margin: 0;
	border: 1px solid var(--hinke-line);
	border-collapse: separate;
	border-spacing: 0;
	background: var(--hinke-white);
	table-layout: fixed;
}

.woocommerce-account .hinke-page__body .hinke-orders__card + .hinke-orders__card {
	margin-top: 20px;
}

.woocommerce-account .hinke-page__body .hinke-orders__cell {
	border: 0;
	vertical-align: top;
	text-align: left;
	font-family: var(--hinke-font-body);
	color: var(--hinke-body);
}

.woocommerce-account .hinke-page__body .hinke-orders__cell--head {
	height: 42px;
	padding: 9px 0 0;
	border-bottom: 1px solid var(--hinke-line);
	font-weight: 700;
	font-size: 16px;
	line-height: 19px;
}

.woocommerce-account .hinke-page__body .hinke-orders__cell--data {
	height: 46px;
	padding: 12px 0 0;
	font-weight: 400;
	font-size: 14px;
	line-height: 19px;
}

.woocommerce-account .hinke-page__body .hinke-orders__cell--order-number {
	width: 220px;
	padding-left: 16px;
}

.woocommerce-account .hinke-page__body .hinke-orders__cell--order-date {
	width: 262px;
}

.woocommerce-account .hinke-page__body .hinke-orders__cell--order-total {
	width: 255px;
}

.woocommerce-account .hinke-page__body .hinke-orders__cell--order-status {
	width: 185px;
	text-align: center;
}

.woocommerce-account .hinke-page__body .hinke-orders__link {
	color: inherit;
	text-decoration: none;
}

.woocommerce-account .hinke-page__body .hinke-orders__pagination {
	margin-top: 24px;
	display: flex;
	gap: 18px;
}

.woocommerce-account .hinke-page__body .hinke-orders__pagelink,
.woocommerce-account .hinke-page__body .hinke-orders__shoplink {
	color: var(--hinke-gold);
	font-size: 16px;
	text-decoration: none;
}

/* =============================================================================
   8. Adressen — intro b=509 (16px/29px) + twee kale kolommen op x=607 / x=1066
   ========================================================================== */

.woocommerce-account .hinke-page__body .hinke-address__intro {
	max-width: 509px;
	margin: 0 0 26px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 29px;
	color: var(--hinke-body);
}

.woocommerce-account .hinke-page__body .hinke-address {
	display: grid;
	grid-template-columns: 437px;
	column-gap: 22px;
}

.woocommerce-account .hinke-page__body .hinke-address--two {
	grid-template-columns: 437px 437px;
}

.woocommerce-account .hinke-page__body .hinke-address__col {
	min-width: 0;
	float: none;
	width: auto;
}

.woocommerce-account .hinke-page__body .hinke-address__title {
	margin: 0 0 8px;
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 20px;
	line-height: 25px;
	text-transform: uppercase;
	color: var(--hinke-body);
}

.woocommerce-account .hinke-page__body .hinke-address__body {
	margin: 0 0 11px;
	font-family: var(--hinke-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 29px;
	color: var(--hinke-body);
}

/* Blok (met inhoudsbreedte) i.p.v. inline-block: een inline-block wordt op de
   baseline van de omringende regel gezet en zakt daardoor 2px weg. */
.woocommerce-account .hinke-page__body .hinke-address__edit {
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: var(--hinke-gold);
	text-decoration: none;
}

.woocommerce-account .hinke-page__body .hinke-address__edit:hover {
	text-decoration: underline;
}

/* =============================================================================
   9. Velden (login + accountgegevens) — 53px hoog, 1px #d9d9d9, geen vulling
   ========================================================================== */

.woocommerce-account .hinke-page__body .hinke-field {
	margin: 0;
	padding: 0;
	width: auto;
	float: none;
	overflow: visible;
}

/* woocommerce.css hangt een clearfix (`content:" ";display:table`) aan
   `.woocommerce form .form-row`. In een flex-rij worden die pseudo-elementen
   flex-items en schuiven ze de knop een `gap` naar rechts. */
.woocommerce-account .hinke-page__body .hinke-field::before,
.woocommerce-account .hinke-page__body .hinke-field::after,
.woocommerce-account .hinke-page__body .hinke-auth__submitrow::before,
.woocommerce-account .hinke-page__body .hinke-auth__submitrow::after {
	display: none;
	content: none;
}

/* Technisch element van WooCommerce (order attribution): alleen verborgen
   velden, mag geen regelhoogte innemen. */
.woocommerce-account .hinke-page__body wc-order-attribution-inputs {
	display: none;
}

.woocommerce-account .hinke-page__body .hinke-field__label {
	display: block;
	margin: 0 0 8px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 19px;
	color: var(--hinke-body);
}

/* WooCommerce verbergt `.required`; in het ontwerp hoort de * er juist bij. */
.woocommerce-account .hinke-page__body .hinke-field__label .required {
	visibility: visible;
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.woocommerce-account .hinke-page__body .hinke-field .hinke-input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 53px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--hinke-line);
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 51px;
	color: var(--hinke-body);
	-webkit-appearance: none;
	appearance: none;
}

.woocommerce-account .hinke-page__body .hinke-field .hinke-input::placeholder {
	color: var(--hinke-muted);
	opacity: 1;
}

.woocommerce-account .hinke-page__body .hinke-field .hinke-input:focus {
	border-color: var(--hinke-ink);
	outline: none;
}

/* =============================================================================
   10. Knop — 53px hoog, goud, Outfit 700 16px wit HOOFDLETTERS
   ========================================================================== */

.woocommerce-account .hinke-page__body .hinke-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 53px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--hinke-gold);
	color: var(--hinke-white);
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
	cursor: pointer;
}

.woocommerce-account .hinke-page__body .hinke-btn:hover,
.woocommerce-account .hinke-page__body .hinke-btn:focus {
	background: var(--hinke-gold);
	color: var(--hinke-white);
	opacity: .9;
}

/* =============================================================================
   11. Login / Registreren — twee kolommen van 557px, tussenruimte 115px
   ========================================================================== */

.woocommerce-account .hinke-page__body .hinke-auth--split {
	display: grid;
	grid-template-columns: 557px 557px;
	column-gap: 115px;
	justify-content: start;
}

.woocommerce-account .hinke-page__body .hinke-auth__col {
	min-width: 0;
}

/* Kop y=221; label y=310 → 276 + 34. */
.woocommerce-account .hinke-page__body .hinke-auth__title {
	margin: 0 0 34px;
	font-family: var(--hinke-font-heading);
	font-weight: 400;
	font-size: 40px;
	line-height: 55px;
	color: var(--hinke-pink);
}

/* woocommerce.css zet op `form.login`/`form.register` een kader met 20px padding
   (`.woocommerce form.login{border:1px solid …;padding:20px;margin:2em 0;
   border-radius:5px}`, (0,2,1)) — dat schoof de velden 21px op. Weg ermee. */
.woocommerce-account .hinke-page__body .hinke-auth__form {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	text-align: left;
}

/* Veldsteek 98px: 53px veld + 18px + 19px label + 8px. */
.woocommerce-account .hinke-page__body .hinke-auth__form .hinke-field + .hinke-field {
	margin-top: 18px;
}

/* Knoprij y=518 (wachtwoordveld eindigt op 488). */
.woocommerce-account .hinke-page__body .hinke-auth__submitrow {
	display: flex;
	align-items: center;
	margin: 30px 0 0;
	padding: 0;
	gap: 34px;
}

.woocommerce-account .hinke-page__body .hinke-auth__submitrow .hinke-btn {
	flex: 0 0 220px;
	width: 220px;
	margin: 0;
	float: none;
}

/* Checkbox 16×16 op x=553/y=535, label #212121 op x=577.
   De groep staat in het ontwerp 1,5px boven het midden van de knoprij; de
   negatieve/extra ondermarge verschuift het gecentreerde marge-vak precies zo. */
.woocommerce-account .hinke-page__body .hinke-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 20px;
	margin: 0 0 3px;
	padding: 0;
	line-height: 20px;
}

.woocommerce-account .hinke-page__body .hinke-remember__box {
	position: relative;
	flex: 0 0 16px;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--hinke-line);
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.woocommerce-account .hinke-page__body .hinke-remember__box:checked::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 5px;
	width: 4px;
	height: 8px;
	border: solid var(--hinke-ink);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.woocommerce-account .hinke-page__body .hinke-remember__text {
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: var(--hinke-acc-checklabel);
}

/* "Je wachtwoord vergeten?" y=593 (knoprij eindigt op 571). */
.woocommerce-account .hinke-page__body .hinke-auth__lost {
	margin: 22px 0 0;
	padding: 0;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
}

.woocommerce-account .hinke-page__body .hinke-auth__lost a {
	color: var(--hinke-pink);
	text-decoration: none;
}

/* Registreren: hulptekst y=402 (b=431, 2 regels van 20px), knop y=461. */
.woocommerce-account .hinke-page__body .hinke-auth__hint {
	max-width: 431px;
	margin: 12px 0 0;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: var(--hinke-body);
}

/* Registreerknop y=461 = hulptekst (eindigt op 442) + 19px. Niet via `+`, want
   WooCommerce schuift er nog een (leeg) privacy-blok en de order-attribution
   tussen. */
.woocommerce-account .hinke-page__body .hinke-auth__col--register .hinke-auth__submitrow {
	margin-top: 19px;
}

/* =============================================================================
   12. Accountgegevens — 2×437px + volle velden van 896px, steek 74–75px
   ========================================================================== */

.woocommerce-account .hinke-page__body .hinke-editaccount {
	display: grid;
	grid-template-columns: 437px 437px;
	column-gap: 22px;
	margin: 0;
}

.woocommerce-account .hinke-page__body .hinke-editaccount .hinke-field {
	grid-column: 1 / -1;
}

.woocommerce-account .hinke-page__body .hinke-editaccount .hinke-field--half {
	grid-column: auto;
	margin-bottom: 22px;
}

/* Het volle e-mailveld: 483 + 38 = 521 (kop "Wachtwoordwijziging"). */
.woocommerce-account .hinke-page__body .hinke-editaccount > .hinke-field:not(.hinke-field--half) {
	margin-bottom: 38px;
}

.woocommerce-account .hinke-page__body .hinke-editaccount__pw {
	grid-column: 1 / -1;
	min-width: 0;
	margin: 0 0 36px;
	padding: 0;
	border: 0;
}

.woocommerce-account .hinke-page__body .hinke-editaccount__legend {
	display: block;
	float: none;
	width: 100%;
	margin: 0 0 20px;
	padding: 0;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: var(--hinke-body);
}

.woocommerce-account .hinke-page__body .hinke-editaccount__pw .hinke-field {
	margin-bottom: 21px;
}

.woocommerce-account .hinke-page__body .hinke-editaccount__pw .hinke-field--last {
	margin-bottom: 0;
}

.woocommerce-account .hinke-page__body .hinke-editaccount__actions {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
}

.woocommerce-account .hinke-page__body .hinke-editaccount__submit {
	flex: 0 0 281px;
	width: 281px;
}

/* Wachtwoordsterkte-meter (JS van WooCommerce, verschijnt tijdens typen). */
.woocommerce-account .hinke-page__body .woocommerce-password-strength,
.woocommerce-account .hinke-page__body .woocommerce-password-hint {
	display: block;
	margin: 6px 0 0;
	font-family: var(--hinke-font-body);
	font-size: 14px;
	line-height: 18px;
	color: var(--hinke-muted);
}

/* =============================================================================
   13. Verlanglijstje — LIJST (geen grid), rijen x=635 b=986, steek 236px

   Markup komt uit de core (inc/wishlist.php → sellabees_wishlist_render()); die
   blijft ongewijzigd zodat AJAX-actienamen, nonces en data-attributen intact
   blijven. Hieronder alleen presentatie.
   ========================================================================== */

.woocommerce-account .hinke-page__body .sellabees-wishlist {
	margin-left: 28px;
}

.woocommerce-account .hinke-page__body .sellabees-wishlist__form {
	margin: 0;
}

.woocommerce-account .hinke-page__body .sellabees-wishlist__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .hinke-page__body .sellabees-wishlist__item {
	position: relative;
	display: flex;
	height: 236px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Haarlijn op 200px onder de rijtop (y=545 bij rij 1, y=780 bij rij 2). */
.woocommerce-account .hinke-page__body .sellabees-wishlist__item::after {
	content: "";
	position: absolute;
	top: 200px;
	right: 0;
	left: 0;
	height: 1px;
	background: var(--hinke-line);
}

.woocommerce-account .hinke-page__body .sellabees-wishlist__thumb {
	display: block;
	flex: 0 0 130px;
	width: 130px;
	height: 159px;
	line-height: 0;
}

.woocommerce-account .hinke-page__body .sellabees-wishlist__thumb img {
	display: block;
	width: 130px;
	height: 159px;
	max-width: none;
	object-fit: cover;
}

/* Titel y=379, maat y=402, stepper y=434 → 35/4/14 vanaf de rijtop. */
.woocommerce-account .hinke-page__body .sellabees-wishlist__info {
	min-width: 0;
	margin-left: 22px;
	padding-top: 35px;
}

.woocommerce-account .hinke-page__body .sellabees-wishlist__name {
	display: block;
	max-width: 387px;
	margin: 0 0 4px;
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 19px;
	color: var(--hinke-body);
	text-decoration: none;
}

.woocommerce-account .hinke-page__body .sellabees-wishlist__meta {
	margin: 0 0 14px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: var(--hinke-body);
}

.woocommerce-account .hinke-page__body .sellabees-wishlist__meta a {
	color: inherit;
}

/* Stepper 81×35, ronding 2px (de enige uitzondering in het ontwerp);
   scheidingslijnen op x=809 en x=845. */
.woocommerce-account .hinke-page__body .sellabees-wishlist__qty {
	display: flex;
	box-sizing: border-box;
	width: 81px;
	height: 35px;
	border: 1px solid var(--hinke-line);
	border-radius: 2px;
	background: var(--hinke-white);
	overflow: hidden;
}

.woocommerce-account .hinke-page__body .sellabees-wishlist__qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: 0 0 21px;
	width: 21px;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1;
	color: var(--hinke-body);
	cursor: pointer;
}

.woocommerce-account .hinke-page__body .sellabees-wishlist__qty-btn:last-child {
	flex: 0 0 22px;
	width: 22px;
	border-left: 1px solid var(--hinke-line);
}

.woocommerce-account .hinke-page__body .sellabees-wishlist__qty-input {
	box-sizing: border-box;
	flex: 0 0 36px;
	width: 36px;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--hinke-line);
	border-radius: 0;
	background: none;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1;
	color: var(--hinke-body);
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.woocommerce-account .hinke-page__body .sellabees-wishlist__qty-input::-webkit-inner-spin-button,
.woocommerce-account .hinke-page__body .sellabees-wishlist__qty-input::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

/* Rechterkolom: prullenbak 19×19 op y=367, prijs rechts uitgelijnd op x=1621. */
.woocommerce-account .hinke-page__body .sellabees-wishlist__end {
	position: absolute;
	top: 0;
	right: 0;
	text-align: right;
}

.woocommerce-account .hinke-page__body .sellabees-wishlist__remove {
	display: block;
	box-sizing: border-box;
	width: 19px;
	height: 19px;
	margin: 23px 0 0 auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--hinke-body);
	line-height: 0;
	cursor: pointer;
}

.woocommerce-account .hinke-page__body .sellabees-wishlist__remove svg {
	display: block;
	width: 19px;
	height: 19px;
}

.woocommerce-account .hinke-page__body .sellabees-wishlist__price {
	display: block;
	margin-top: 34px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 19px;
	color: var(--hinke-body);
}

/* Knoprij y=817 (de laatste rij eindigt op 816). */
.woocommerce-account .hinke-page__body .sellabees-wishlist__actions {
	display: flex;
	align-items: stretch;
	gap: 18px;
	margin-top: 1px;
}

.woocommerce-account .hinke-page__body .sellabees-wishlist__btn {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 53px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: var(--hinke-white);
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: none;
	cursor: pointer;
}

.woocommerce-account .hinke-page__body .sellabees-wishlist__btn svg {
	display: block;
	flex: none;
}

/* 1 — updaten: roze, 255px, icoon 22×22 op x=649, tekst op x=683. */
.woocommerce-account .hinke-page__body .sellabees-wishlist__btn[name="wishlist_update"] {
	flex: 0 0 255px;
	width: 255px;
	padding-left: 14px;
	gap: 12px;
	background: var(--hinke-pink);
}

.woocommerce-account .hinke-page__body .sellabees-wishlist__btn[name="wishlist_update"] svg {
	width: 22px;
	height: 22px;
}

/* 2 — legen: grijs, 224px, prullenbak 19×19 op x=924, tekst op x=950. */
.woocommerce-account .hinke-page__body .sellabees-wishlist__btn[name="wishlist_clear"] {
	flex: 0 0 224px;
	width: 224px;
	padding-left: 16px;
	gap: 7px;
	background: var(--hinke-acc-grey);
}

.woocommerce-account .hinke-page__body .sellabees-wishlist__btn[name="wishlist_clear"] svg {
	width: 19px;
	height: 19px;
}

/* 3 — alles in de winkelwagen: goud, 389px, 16px, tegen de rechterkant (x=1232). */
.woocommerce-account .hinke-page__body .sellabees-wishlist__btn[name="wishlist_add_all"] {
	flex: 0 0 389px;
	width: 389px;
	margin-left: auto;
	justify-content: center;
	font-size: 16px;
	background: var(--hinke-gold);
}

.woocommerce-account .hinke-page__body .sellabees-wish-label-short {
	display: none;
}

/* Leeg verlanglijstje. */
.woocommerce-account .hinke-page__body .sellabees-wishlist__empty {
	margin: 0 0 20px;
	font-family: var(--hinke-font-body);
	font-size: 16px;
	line-height: 29px;
	color: var(--hinke-body);
}

/* "Verder winkelen" bij een leeg lijstje is een kale WooCommerce-knop (grijs,
   36px hoog). Zelfde gouden vorm als de rest én ≥44px om te tikken. */
.woocommerce-account .hinke-page__body .sellabees-wishlist > .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 220px;
	height: 53px;
	padding: 0 24px;
	border: 0;
	border-radius: 0;
	background: var(--hinke-gold);
	color: var(--hinke-white);
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
}

/* =============================================================================
   14. Meldingen (WooCommerce notices) binnen het account
   ========================================================================== */

.woocommerce-account .hinke-page__body .woocommerce-message,
.woocommerce-account .hinke-page__body .woocommerce-info,
.woocommerce-account .hinke-page__body .woocommerce-error {
	margin: 0 0 24px;
	padding: 14px 18px;
	border: 0;
	border-left: 3px solid var(--hinke-pink);
	border-radius: 0;
	background: var(--hinke-band);
	list-style: none;
	font-family: var(--hinke-font-body);
	font-size: 16px;
	line-height: 24px;
	color: var(--hinke-body);
}

.woocommerce-account .hinke-page__body .woocommerce-error {
	border-left-color: var(--hinke-sale);
}

.woocommerce-account .hinke-page__body .woocommerce-message::before,
.woocommerce-account .hinke-page__body .woocommerce-info::before,
.woocommerce-account .hinke-page__body .woocommerce-error::before {
	content: none;
}

/* =============================================================================
   14b. Adres BEWERKEN + wachtwoord vergeten — formulieren zonder eigen template

   /mijn-account/edit-address/<type>/ en /mijn-account/lost-password/ komen recht
   uit WooCommerce (geen override in dit thema, en geen frame in Figma). Ze kregen
   daardoor GEEN enkele opmaak: gemeten op 390px waren de velden 155×31 met
   font-size 13,3px (browserstandaard) en de knop 142×36. Op iOS Safari zoomt elk
   veld onder 16px bij focus in, en 31/36px is te klein om te raken.

   Daarom krijgen deze velden hier dezelfde vormtaal als "Accountgegevens"
   (53px hoog, haarlijn #d9d9d9, geen ronding, Outfit 16px) en de knop dezelfde
   gouden vorm. Zo blijft het één shop, ook op de pagina's zonder ontwerp.
   ========================================================================== */

.woocommerce-edit-address .hinke-page__body .woocommerce-address-fields p.form-row,
.woocommerce-lost-password .hinke-page__body .woocommerce-ResetPassword p.form-row {
	margin: 0 0 18px;
	padding: 0;
	overflow: visible;
}

.woocommerce-edit-address .hinke-page__body .woocommerce-address-fields label,
.woocommerce-lost-password .hinke-page__body .woocommerce-ResetPassword label {
	display: block;
	margin: 0 0 8px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 19px;
	color: var(--hinke-body);
}

.woocommerce-edit-address .hinke-page__body .woocommerce-address-fields label .required,
.woocommerce-lost-password .hinke-page__body .woocommerce-ResetPassword label .required {
	visibility: visible;
	color: inherit;
	text-decoration: none;
}

.woocommerce-edit-address .hinke-page__body .woocommerce-address-fields .input-text,
.woocommerce-edit-address .hinke-page__body .woocommerce-address-fields select,
.woocommerce-lost-password .hinke-page__body .woocommerce-ResetPassword .input-text {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 53px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--hinke-line);
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 51px;
	color: var(--hinke-body);
	-webkit-appearance: none;
	appearance: none;
}

.woocommerce-edit-address .hinke-page__body .woocommerce-address-fields .input-text:focus,
.woocommerce-lost-password .hinke-page__body .woocommerce-ResetPassword .input-text:focus {
	border-color: var(--hinke-ink);
	outline: none;
}

/* Select2 (landkeuze) vervangt de <select> door een eigen knop; die moet dezelfde
   hoogte en 16px krijgen, anders zoomt iOS bij het openen alsnog in. */
.woocommerce-edit-address .hinke-page__body .select2-container .select2-selection--single {
	height: 53px;
	border: 1px solid var(--hinke-line);
	border-radius: 0;
}

.woocommerce-edit-address .hinke-page__body .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 18px;
	font-family: var(--hinke-font-body);
	font-size: 16px;
	line-height: 51px;
	color: var(--hinke-body);
}

.woocommerce-edit-address .hinke-page__body .select2-container .select2-selection--single .select2-selection__arrow {
	height: 51px;
}

/* De lijst zelf hangt aan <body>, dus buiten .hinke-page__body. Regels van 36px
   zijn te klein om te tikken; 44px is de WCAG-ondergrens. */
.woocommerce-account .select2-container--open .select2-search__field,
.woocommerce-account .select2-container--open .select2-results__option {
	font-size: 16px;
}

.woocommerce-account .select2-container--open .select2-results__option {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 44px;
}

.woocommerce-account .select2-container--open .select2-search__field {
	box-sizing: border-box;
	min-height: 44px;
}

.woocommerce-edit-address .hinke-page__body button[name="save_address"],
.woocommerce-lost-password .hinke-page__body .woocommerce-ResetPassword button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 220px;
	height: 53px;
	margin: 0;
	padding: 0 24px;
	border: 0;
	border-radius: 0;
	background: var(--hinke-gold);
	color: var(--hinke-white);
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	text-transform: uppercase;
	box-shadow: none;
	cursor: pointer;
}

/* =============================================================================
   15. Kleinere schermen — het ontwerp is alleen op 1920 vastgelegd; hieronder
   worden de vaste kolombreedtes vloeiend zodat er niets buiten beeld valt.
   ========================================================================== */

@media (max-width: 1370px) {

	.woocommerce-account .hinke-page__body .hinke-account {
		grid-template-columns: 240px minmax(0, 1fr);
		column-gap: 24px;
	}

	.woocommerce-account .hinke-page__body .hinke-auth--split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 48px;
	}

	.woocommerce-account .hinke-page__body .hinke-orders__card {
		width: 100%;
	}

	/* De vier vaste kolommen (220+262+255+185 = 922px) passen niet meer in de
	   smallere inhoudskolom: bij 1024px is die maar ~712px breed, waardoor de tabel
	   met `table-layout: fixed` naar 1212px uitliep en de pagina 188px overliep
	   (gemeten). Percentages houden dezelfde verhouding, maar krimpen mee. */
	.woocommerce-account .hinke-page__body .hinke-orders__cell--order-number {
		width: 24%;
	}

	.woocommerce-account .hinke-page__body .hinke-orders__cell--order-date {
		width: 28%;
	}

	.woocommerce-account .hinke-page__body .hinke-orders__cell--order-total {
		width: 28%;
	}

	.woocommerce-account .hinke-page__body .hinke-orders__cell--order-status {
		width: 20%;
	}

	.woocommerce-account .hinke-page__body .hinke-address--two,
	.woocommerce-account .hinke-page__body .hinke-editaccount {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.woocommerce-account .hinke-page__body .hinke-address {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-account .hinke-page__body .sellabees-wishlist {
		margin-left: 0;
	}

	.woocommerce-account .hinke-page__body .sellabees-wishlist__btn[name="wishlist_add_all"] {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	/* `white-space: nowrap` (uit de basisregel) liet "Alles toevoegen aan
	   winkelwagen" bij 1024px 34px buiten beeld lopen; het label mag hier over twee
	   regels van 14px — dat past nog in de 53px hoge knop. */
	.woocommerce-account .hinke-page__body .sellabees-wishlist__btn {
		white-space: normal;
		text-align: center;
		line-height: 1.2;
	}

	.woocommerce-account .hinke-page__body .sellabees-wishlist__btn > span {
		min-width: 0;
	}
}

/* -----------------------------------------------------------------------------
   Aanraakmaten (≤1024px). 768 en 1024 zijn tablet-breedtes: óók aanraakschermen,
   maar de indeling van het ontwerp past daar nog. Dit blok vergroot dus alleen de
   raakvlakken en de invoervelden, zonder de indeling aan te raken. Alle waarden
   zijn gemeten: navregel 20px hoog, ordernummer-link 32×18, prullenbak 19×19,
   stepper 21×33 met een veld van 14px (iOS zoomt daarop in).
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

	/* De regelhoogte van 49px uit het ontwerp blijft; alleen de <a> vult die nu,
	   zodat het raakvlak 240×49 wordt in plaats van ~80×20. */
	.woocommerce-account .hinke-page__body .hinke-accnav__link {
		display: flex;
		align-items: center;
		min-height: 49px;
	}

	.woocommerce-account .hinke-page__body .hinke-orders__cell--data {
		height: auto;
		min-height: 46px;
	}

	.woocommerce-account .hinke-page__body .hinke-orders__link {
		display: inline-flex;
		align-items: center;
		min-width: 44px;
		min-height: 44px;
	}

	.woocommerce-account .hinke-page__body .hinke-address__edit {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* De inhoud blijft midden in de 53px hoge knoprij staan; alleen het raakvlak
	   van het label groeit (een tik op de tekst zet het vinkje ook om). */
	.woocommerce-account .hinke-page__body .hinke-remember {
		height: auto;
		min-height: 44px;
	}

	.woocommerce-account .hinke-page__body .hinke-remember__box {
		font-size: 16px;
	}

	.woocommerce-account .hinke-page__body .hinke-auth__lost a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.woocommerce-account .hinke-page__body .sellabees-wishlist__qty {
		width: 134px;
		height: 46px;
	}

	.woocommerce-account .hinke-page__body .sellabees-wishlist__qty-btn,
	.woocommerce-account .hinke-page__body .sellabees-wishlist__qty-btn:last-child {
		flex: 0 0 44px;
		width: 44px;
		font-size: 18px;
	}

	.woocommerce-account .hinke-page__body .sellabees-wishlist__qty-input {
		flex: 0 0 44px;
		width: 44px;
		font-size: 16px;
	}

	/* Icoon blijft 19×19 en optisch op dezelfde plek (11 + 22 ≈ 23 + 9,5);
	   het raakvlak wordt 44×44. */
	.woocommerce-account .hinke-page__body .sellabees-wishlist__remove {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 11px -12px 0 auto;
	}
}

@media (max-width: 900px) {

	.woocommerce-account .hinke-page__head {
		height: 110px;
	}

	.woocommerce-account .hinke-page__title {
		font-size: 30px;
		line-height: 40px;
	}

	.woocommerce-account .hinke-page__body {
		padding: 32px 0 64px;
	}

	.woocommerce-account:not(.logged-in) .hinke-page__body {
		padding-top: 40px;
	}

	.woocommerce-account .hinke-page__body .hinke-account {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}

	.woocommerce-dashboard .hinke-account__content,
	.woocommerce-orders .hinke-account__content,
	.woocommerce-edit-address .hinke-account__content,
	.woocommerce-edit-account .hinke-account__content,
	.woocommerce-verlanglijstje .hinke-account__content {
		padding-top: 0;
	}

	/* ---------------------------------------------------------------------------
	   Accountnavigatie op mobiel.

	   Op desktop is dit een verticale zijbalk naast de inhoud. Zodra die onder de
	   titelbalk schuift, kost dezelfde lijst 6 × 49px = ~294px en begint de eigen
	   inhoud van de pagina pas ver onder de fold; bovendien is een regel van 20px
	   hoog veel te klein om te tikken (gemeten: 79×20 t/m 125×20).

	   Keuze: dezelfde zes items als WRAPPENDE strook "pillen". Dat is
	   - volledig zichtbaar (geen horizontale scrolstrook met verstopte items),
	   - compact: 3 regels van 46px ≈ 154px in plaats van ~294px,
	   - en elk item is minimaal 46px hoog en ruim 44px breed (WCAG 2.5.8).
	   Er is geen mobiel Figma-frame, dus dit is een vertaling: de opmaak blijft
	   binnen de huisstijl (haarlijn #d9d9d9, geen ronding, Outfit 16px #4e4e4e) en
	   de actieve regel blijft onderstreept zoals in het ontwerp.
	   --------------------------------------------------------------------------- */

	.woocommerce-account .hinke-page__body .hinke-accnav__list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.woocommerce-account .hinke-page__body .hinke-accnav__item {
		display: flex;
		line-height: 1.25;
	}

	.woocommerce-account .hinke-page__body .hinke-accnav__link {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		min-height: 46px;
		padding: 0 14px;
		border: 1px solid var(--hinke-line);
		background: var(--hinke-white);
	}

	.woocommerce-account .hinke-page__body .hinke-accnav__item.is-active > .hinke-accnav__link {
		border-color: var(--hinke-pink);
	}

	.woocommerce-account .hinke-page__body .hinke-auth--split,
	.woocommerce-account .hinke-page__body .hinke-address--two,
	.woocommerce-account .hinke-page__body .hinke-editaccount {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
	}

	.woocommerce-account .hinke-page__body .hinke-auth__col + .hinke-auth__col {
		margin-top: 48px;
	}

	/* ---------------------------------------------------------------------------
	   Inloggen/registreren: knoprij.

	   De rij was `knop 220px + gap 34px + "Onthouden" (104px)` = 358px + 2×24px
	   marge → 382px, en liep bij 360px dus 22px buiten beeld (gemeten). Op mobiel
	   gaat de knop over de volle breedte (meteen een royaal raakvlak) en zakt
	   "Onthouden" naar een eigen regel.
	   --------------------------------------------------------------------------- */

	.woocommerce-account .hinke-page__body .hinke-auth__submitrow {
		flex-wrap: wrap;
		gap: 4px;
		margin-top: 24px;
	}

	.woocommerce-account .hinke-page__body .hinke-auth__submitrow .hinke-btn {
		flex: 1 1 100%;
		width: 100%;
	}

	/* Het label staat nu op een eigen regel; de optische correctie van 3px uit het
	   ontwerp (die hoorde bij het naast-de-knop staan) kan eraf. */
	.woocommerce-account .hinke-page__body .hinke-remember {
		margin: 0;
		gap: 12px;
	}

	.woocommerce-account .hinke-page__body .hinke-auth__lost {
		margin-top: 8px;
	}

	.woocommerce-account .hinke-page__body .hinke-address__col + .hinke-address__col {
		margin-top: 40px;
	}

	/* Adres bewerken: WooCommerce zet voor-/achternaam en postcode/plaats met
	   floats op 47% naast elkaar (0,2,1). Bij 360px zijn dat velden van ~155px:
	   onder elkaar is dat prettiger typen. */
	.woocommerce-edit-address .hinke-page__body .woocommerce-address-fields p.form-row {
		float: none;
		width: 100%;
	}

	.woocommerce-edit-address .hinke-page__body button[name="save_address"],
	.woocommerce-lost-password .hinke-page__body .woocommerce-ResetPassword button[type="submit"] {
		width: 100%;
	}

	.woocommerce-account .hinke-page__body .hinke-editaccount .hinke-field--half {
		grid-column: 1 / -1;
	}

	.woocommerce-account .hinke-page__body .hinke-editaccount__actions {
		justify-content: flex-start;
	}

	/* ---------------------------------------------------------------------------
	   Bestellingen: kaart per bestelling in plaats van een tabel.

	   De vier kolommen halen samen ~940px en passen op geen enkele telefoon. Elke
	   bestelling is al een eigen <table>, dus we zetten de tabelrol uit en maken van
	   elke cel een regel "label — waarde". Het label komt uit het `data-title` dat
	   WooCommerce (en dit template) op elke <td> zet, zodat er geen dubbele tekst
	   in de markup hoeft.

	   LET OP (specificiteit): `… .hinke-orders__card tr` is (0,3,1) en won hiervoor
	   van `… .hinke-orders__row--head { display: none }` (0,3,0) — de koprij bleef
	   daardoor op mobiel zichtbaar als een blok "Ordernummer / Datum / Totaal /
	   Status" boven de gegevens (gemeten: 116px hoog). Daarom staat `thead` niet
	   meer in de display:block-lijst en wordt de koprij op het element zelf
	   verborgen: (0,3,1) tegen (0,3,1), en deze regel staat later.
	   --------------------------------------------------------------------------- */

	.woocommerce-account .hinke-page__body .hinke-orders__card,
	.woocommerce-account .hinke-page__body .hinke-orders__card tbody,
	.woocommerce-account .hinke-page__body .hinke-orders__card tr,
	.woocommerce-account .hinke-page__body .hinke-orders__cell {
		display: block;
		width: auto;
		height: auto;
	}

	.woocommerce-account .hinke-page__body .hinke-orders__card thead {
		display: none;
	}

	.woocommerce-account .hinke-page__body .hinke-orders__row--data {
		padding: 4px 0;
	}

	.woocommerce-account .hinke-page__body .hinke-orders__cell--data {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		box-sizing: border-box;
		min-height: 44px;
		padding: 4px 16px;
		text-align: right;
		font-size: 15px;
	}

	.woocommerce-account .hinke-page__body .hinke-orders__cell--data + .hinke-orders__cell--data {
		border-top: 1px solid var(--hinke-line);
	}

	.woocommerce-account .hinke-page__body .hinke-orders__cell--data::before {
		content: attr(data-title);
		flex: 0 1 auto;
		font-weight: 700;
		font-size: 15px;
		text-align: left;
	}

	/* Het ordernummer is de enige link in de kaart: de linkerhelft van de regel
	   wordt meegenomen in het raakvlak zodat het doel ≥44×44 is (was 32×18). */
	.woocommerce-account .hinke-page__body .hinke-orders__cell--data .hinke-orders__link {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		min-width: 44px;
		min-height: 44px;
		padding-left: 24px;
		text-decoration: underline;
	}

	.woocommerce-account .hinke-page__body .sellabees-wishlist__item {
		height: auto;
		padding: 0 0 24px;
		margin-bottom: 24px;
	}

	.woocommerce-account .hinke-page__body .sellabees-wishlist__item::after {
		top: auto;
		bottom: 0;
	}

	.woocommerce-account .hinke-page__body .sellabees-wishlist__info {
		padding-top: 0;
	}

	.woocommerce-account .hinke-page__body .sellabees-wishlist__end {
		position: static;
		margin-left: auto;
	}

	/* `__end` staat hier niet meer absoluut, dus de bovenmarge van het raakvlak eraf. */
	.woocommerce-account .hinke-page__body .sellabees-wishlist__remove {
		margin-top: 0;
	}

	.woocommerce-account .hinke-page__body .sellabees-wishlist__price {
		margin-top: 12px;
	}

	.woocommerce-account .hinke-page__body .sellabees-wishlist__actions {
		flex-wrap: wrap;
		gap: 12px;
	}

	.woocommerce-account .hinke-page__body .sellabees-wishlist__btn[name="wishlist_add_all"] {
		margin-left: 0;
	}
}

/* =============================================================================
   16. Telefoon (≤600px) — verlanglijst-rij op twee regels

   Tot 900px staan thumbnail, gegevens en de prijs/prullenbak-kolom nog naast
   elkaar. Bij 390px hield de middelste kolom daardoor maar ~139px over: de
   producttitel viel in twee of drie regels uiteen (gemeten). Daarom hier een
   raster: de afbeelding links over twee regels, rechts eerst de gegevens en
   daaronder prijs + prullenbak. De middenkolom wordt zo ~232px bij 390px.
   ========================================================================== */

@media (max-width: 600px) {

	.woocommerce-account .hinke-page__body .sellabees-wishlist__item {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		grid-template-areas:
			"thumb info"
			"thumb end";
		align-items: start;
		column-gap: 14px;
		row-gap: 10px;
		padding-bottom: 18px;
		margin-bottom: 18px;
	}

	.woocommerce-account .hinke-page__body .sellabees-wishlist__thumb {
		grid-area: thumb;
		flex: none;
		width: 96px;
		height: 117px;
	}

	/* 96 × 117 houdt dezelfde verhouding als de 130 × 159 uit het ontwerp. */
	.woocommerce-account .hinke-page__body .sellabees-wishlist__thumb img {
		width: 96px;
		height: 117px;
	}

	.woocommerce-account .hinke-page__body .sellabees-wishlist__info {
		grid-area: info;
		margin-left: 0;
	}

	/* DOM-orde is prullenbak → prijs; met row-reverse staat de prijs links en de
	   prullenbak rechts, zonder de markup uit de core aan te raken. */
	.woocommerce-account .hinke-page__body .sellabees-wishlist__end {
		grid-area: end;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		justify-content: space-between;
		margin: 0;
		text-align: left;
	}

	.woocommerce-account .hinke-page__body .sellabees-wishlist__price {
		margin-top: 0;
	}

	/* Drie knoppen van 224–389px passen niet naast elkaar: onder elkaar, elk over
	   de volle breedte. */
	.woocommerce-account .hinke-page__body .sellabees-wishlist__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.woocommerce-account .hinke-page__body .sellabees-wishlist__btn,
	.woocommerce-account .hinke-page__body .sellabees-wishlist__btn[name="wishlist_update"],
	.woocommerce-account .hinke-page__body .sellabees-wishlist__btn[name="wishlist_clear"],
	.woocommerce-account .hinke-page__body .sellabees-wishlist__btn[name="wishlist_add_all"] {
		flex: 0 0 auto;
		width: 100%;
		justify-content: center;
		padding: 0 14px;
	}

	/* Accountgegevens: de opslaanknop van 281px over de volle breedte. */
	.woocommerce-account .hinke-page__body .hinke-editaccount__submit {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* =============================================================================
   17. Inlog-popup van de core (inc/account-auth.php, markup + gedrag daar)

   Deze popup hangt in wp_footer en staat dus BUITEN .hinke-page__body; de scope
   is daarom `.woocommerce-account` (deze stylesheet laadt alleen op het account).
   Alleen opmaak — mechaniek (openen, Escape, AJAX) blijft van de core.

   Gemeten in de core-opmaak (assets/css/sellabees-shops-core.css):
     - velden 14px  → iOS Safari zoomt bij focus in
     - kruisje 30×30 → onder de 44×44 van WCAG 2.5.8
     - het vak heeft geen maximale hoogte: met het toetsenbord open (visuele
       viewport ~400px) valt de onderkant weg zonder te kunnen scrollen.
   Deze drie punten gelden op ELKE pagina; hier worden ze alleen op het account
   opgelost. Zie rapport: hoort sitebreed (layout.css) of in de core.
   ========================================================================== */

/* Deze opmaak staat nu in assets/css/layout.css, zónder `.woocommerce-account`
   ervoor. Reden: de popup hangt in `wp_footer` en staat dus op élke pagina in de
   DOM, terwijl dit bestand alleen op /mijn-account/ laadt — overal elders viel hij
   daardoor terug op de standaardopmaak van de core, mét de drie problemen (velden
   van 14px, kruisje van 30×30, vak niet scrollbaar) die hier juist werden
   opgelost. */