/* Webshop op de designtokens van dorcas-theme/assets/css/base.css.
   Alles wat hier px-shop-* heet is nieuw; de rest (btn--*, heading__divider,
   px-menu-link, px-footer, tokens) komt rechtstreeks uit het thema.
   Rondingen alleen op knoppen en invoervelden; vlakken en kaarten zijn recht,
   zoals overal op dorcas.nl.

   Twee soorten regels staan hier door elkaar:
   - de px-shop-* opmaak uit de goedgekeurde mockups;
   - de opmaak van de WooCommerce-schermen die we niet met een eigen template
     vervangen (afrekenen, meldingen, mijn account).
   Het grid van het productoverzicht staat niet hier maar in
   modules/px-shop-products/css/frontend.css: dat hangt aan een module-instelling. */


/* ─── Kop ────────────────────────────────────────────────────────────────── */

/* Eigen webshopkop: dezelfde witte balk als de dorcas.nl header in gescrolde
   staat, maar zonder megamenu. */

.px-shop-kop {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--white);
	box-shadow: var(--shadow-elevated);
}

.px-shop-kop__binnen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-d2);
	max-width: var(--row-width);
	margin: 0 auto;
	padding: var(--space-d1) var(--space-d3);
}

.px-shop-kop__logo {
	display: flex;
	align-items: center;
	gap: var(--space-d075);
}

.px-shop-kop__logo img { height: var(--space-d3); width: auto; }

.px-shop-kop__label {
	font-family: var(--font-display);
	font-size: var(--text-d125);
	font-weight: var(--weight-semibold);
	color: var(--navy);
	border-left: 3px solid var(--action);
	padding-left: var(--space-d075);
	line-height: 1.1;
}

.px-shop-kop__acties {
	display: flex;
	align-items: center;
	gap: var(--space-d075);
}

.px-shop-kop__acties .btn--prim,
.px-shop-kop__acties .btn--sec {
	font-size: var(--text-d1);
}

.px-shop-kop__mandje { position: relative; }

.px-shop-kop__teller {
	display: grid;
	place-items: center;
	min-width: 1.5em;
	height: 1.5em;
	padding: 0 0.3em;
	border-radius: var(--radius-pill);
	background: var(--coral);
	color: var(--white);
	font-size: 0.8em;
	font-weight: var(--weight-semibold);
}


/* ─── Paginabouwstenen ───────────────────────────────────────────────────── */

.px-shop-producten__binnen,
.px-shop-product__binnen,
.px-shop-mandje__binnen {
	max-width: var(--row-width);
	margin: 0 auto;
	padding: var(--space-d3) var(--space-d3);
	width: 100%;
}

/* Koppen volgen het themapatroon: .heading + .heading__divider uit base.css
   (zelfde markup als px_render_heading en de nieuwskaarten). */

/* Blauwe regel voor wie niet is ingelogd. Staat in de mockup in de introtekst
   en wordt hier door px-shop-products boven het raster gezet: alleen die
   module weet of er iemand is ingelogd. */

.px-shop-intro__loginhint {
	display: flex;
	align-items: center;
	gap: var(--space-d05);
	margin: var(--space-d15) 0 0;
	padding: var(--space-d075) var(--space-d1);
	background: var(--blue-light);
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
	width: fit-content;
}

.px-shop-intro__loginhint svg { width: 1.2em; height: 1.2em; flex: none; }


/* ─── Links: dezelfde overgang als in het thema ──────────────────────────── */

/* base.css laat kleur en schaduw van een knop of themalink oplopen; de links
   die WooCommerce en deze plugin renderen sprongen meteen naar hun hoverkleur.
   Eén regel geeft ze allemaal dezelfde duur en curve als het thema. */

.px-shop-kaart__titel a,
.px-shop-kaart__login a,
.px-shop-kruimel a,
.px-shop-regel__titel,
.px-shop-terug,
.px-account__uitloggen a,
.px-account-login .woocommerce-LostPassword a,
.px-account-login__aanmaken a,
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a,
.woocommerce-Address-title .edit,
.woocommerce-pagination a,
.woocommerce .show-password-input,
.gform_wrapper .password_input_container .gform_show_password {
	transition: color var(--duration-normal) var(--ease-smooth),
		box-shadow var(--duration-normal) var(--ease-smooth);
}


/* ─── Chip ───────────────────────────────────────────────────────────────── */

.px-shop-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--navy);
	font-family: var(--font-display);
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	white-space: nowrap;
}

.px-shop-chip svg { width: 1.2em; height: 1.2em; }


/* ─── Aantalknoppen: witte knoppen zoals btn--sec ────────────────────────── */

.px-stepper {
	display: flex;
	align-items: center;
	gap: var(--space-d025);
}

.px-stepper__knop {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 3px solid var(--transparent);
	border-radius: var(--radius-s);
	background: var(--white);
	box-shadow: var(--shadow-subtle);
	color: var(--gray-dark);
	cursor: pointer;
	transition: var(--transition-btn);
}

.px-stepper__knop:hover {
	border-color: var(--action);
	box-shadow: var(--shadow-hover);
}

.px-stepper__knop:active {
	background: var(--sky-blue);
	border-color: var(--transparent);
	box-shadow: var(--shadow-pressed);
}

.px-stepper__knop:focus-visible {
	outline: solid 5px var(--btn-focus-ring);
	outline-offset: 0;
	border-color: var(--action);
	box-shadow: none;
}

.px-stepper__knop svg { width: 1rem; height: 1rem; }

.px-stepper__veld {
	width: 2.75rem;
	height: 2.75rem;
	border: 3px solid var(--transparent);
	border-radius: var(--radius-s);
	background: var(--white);
	box-shadow: var(--shadow-subtle);
	text-align: center;
	font-family: var(--font-display);
	font-size: var(--text-d1);
	font-weight: var(--weight-semibold);
	color: var(--text-base);
	-moz-appearance: textfield;
	appearance: textfield;
}

.px-stepper__veld:focus-visible {
	outline: solid 3px var(--btn-focus-ring);
	outline-offset: 0;
	border-color: var(--action);
	box-shadow: none;
}

.px-stepper__veld::-webkit-outer-spin-button,
.px-stepper__veld::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }


/* ─── Productkaarten: kaartpatroon van px-posts (nieuwskaarten homepage) ─── */

/* Vlakke kaart zoals .px-post-card: beeld, blauw streepje, titel, tekst,
   bestelregel. Geen kaartvlak, geen schaduw, geen ronde hoeken.
   Productbeelden passen altijd volledig in het kader (contain op een wit
   vlak): het zijn drukwerkproducten met wisselende verhoudingen, die mogen
   nooit afgesneden worden. */

.px-shop-kaart {
	display: flex;
	flex-direction: column;
	gap: var(--space-d15);
}

.px-shop-kaart__beeldlink {
	display: block;
	overflow: hidden;
	background: var(--white);
}

.px-shop-kaart__beeld {
	width: 100%;
	height: auto;
	aspect-ratio: 35 / 26;
	object-fit: contain;
	padding: var(--space-d075);
	display: block;
	transition: transform var(--duration-normal) var(--ease-smooth);
}

.px-shop-kaart__beeldlink:hover .px-shop-kaart__beeld { transform: scale(1.03); }

.px-shop-kaart__inhoud {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-d075);
	flex: 1;
}

/* Titel met blauw streepje: identiek aan de nieuwskaarten
   (heading heading--h4 heading__divider in px-posts). */

.px-shop-kaart__titel a {
	color: inherit;
	text-decoration: none;
}

.px-shop-kaart__titel a:hover { color: var(--action); }

.px-shop-kaart__tekst {
	margin: 0;
	font-size: var(--text-body);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.px-shop-kaart__actie {
	display: flex;
	align-items: center;
	gap: var(--space-d075);
	margin-top: auto;
	padding-top: var(--space-d025);
}

.px-shop-kaart__knop { font-size: var(--text-d1); }

.px-shop-kaart__login {
	display: flex;
	align-items: center;
	gap: var(--space-d05);
	margin: auto 0 0;
	color: var(--gray-mid);
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
}

.px-shop-kaart__login svg { width: 1.2em; height: 1.2em; flex: none; }

.px-shop-kaart__login a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.px-shop-kaart__login a:hover { color: var(--action); }


/* ─── Productdetail ──────────────────────────────────────────────────────── */

.px-shop-kruimel {
	display: flex;
	align-items: center;
	gap: var(--space-d05);
	margin-bottom: var(--space-d2);
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
}

.px-shop-kruimel a:hover { color: var(--action); }

.px-shop-kruimel svg { width: 0.9em; height: 0.9em; color: var(--gray-mid); }

.px-shop-kruimel [aria-current] { color: var(--gray-mid); }

/* Vlakke tweekoloms indeling, geen kaartvlak. Beeld recht, zoals de
   kaartbeelden in het overzicht. */

.px-shop-product__indeling {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: var(--space-d3);
	align-items: start;
}

.px-shop-product__beeldvak {
	overflow: hidden;
	background: var(--white);
}

.px-shop-product__beeldvak img {
	width: 100%;
	aspect-ratio: 35 / 26;
	object-fit: contain;
	padding: var(--space-d1);
	display: block;
}

.px-shop-product__inhoud {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-d1);
}

.px-shop-product__tekst > *:first-child { margin-top: 0; }
.px-shop-product__tekst > *:last-child { margin-bottom: 0; }

.px-shop-product__punten {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-d05);
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
}

.px-shop-product__punten li {
	display: flex;
	align-items: center;
	gap: var(--space-d05);
}

.px-shop-product__punten svg { width: 1.3em; height: 1.3em; color: var(--action); flex: none; }

.px-shop-product__actie {
	display: flex;
	align-items: center;
	gap: var(--space-d1);
	margin: var(--space-d05) 0 0;
}

/* Teruglink onder het mandje en het afrekenscherm. */

.px-shop-terug {
	display: inline-flex;
	align-items: center;
	gap: var(--space-d05);
	margin-top: var(--space-d2);
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
	color: var(--gray-dark);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.px-shop-terug:hover { color: var(--action); text-decoration: none; }

/* De pijl schuift mee, zoals de pijl van btn--tert in het thema. */
.px-shop-terug svg {
	width: 1em;
	height: 1em;
	transition: transform var(--duration-normal) var(--ease-smooth);
}

.px-shop-terug:hover svg { transform: translateX(calc(var(--space-d025) * -1)); }


/* ─── Mandje ─────────────────────────────────────────────────────────────── */

.px-shop-mandje__indeling,
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: var(--space-d3);
	align-items: start;
	margin-top: var(--space-d2);
}

/* Elke bestelregel is een los wit vakje met subtiele schaduw, met de
   zandachtergrond zichtbaar tussen de vakjes. De hoeken zijn afgerond zoals
   op de rest van dorcas.nl: --radius-m is daar de afronding van een groot
   wit vlak, --radius-s die van de knoppen erin. */

.px-shop-mandje__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-d075);
}

.px-shop-regel {
	display: flex;
	align-items: center;
	gap: var(--space-d15);
	padding: var(--space-d1) var(--space-d15);
	background: var(--white);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-subtle);
}

.px-shop-regel__beeld {
	width: 88px;
	height: 66px;
	object-fit: contain;
	flex: none;
}

.px-shop-regel__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-d025);
	flex: 1;
	min-width: 0;
}

.px-shop-regel__titel {
	font-family: var(--font-display);
	font-size: var(--text-d125);
	font-weight: var(--weight-semibold);
	color: var(--text-heading);
	text-decoration: none;
}

.px-shop-regel__titel:hover { color: var(--action); }

.px-shop-regel__weg {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	border: 3px solid var(--transparent);
	border-radius: var(--radius-s);
	background: transparent;
	color: var(--gray-mid);
	cursor: pointer;
	transition: var(--transition-btn);
}

.px-shop-regel__weg:hover {
	background: var(--white);
	border-color: var(--action);
	box-shadow: var(--shadow-hover);
	color: var(--gray-dark);
}

.px-shop-regel__weg:focus-visible {
	outline: solid 3px var(--btn-focus-ring);
	outline-offset: 0;
}

.px-shop-regel__weg svg { width: 1.3rem; height: 1.3rem; }

/* De knop "Mandje bijwerken" is er alleen voor bezoekers zonder JavaScript.
   px-shop.js zet px-shop-js op <html> en verstuurt het mandje dan zelf. */

.px-shop-js .px-shop-mandje__update { display: none; }

.px-shop-mandje__update { justify-content: center; width: 100%; }


/* ─── Overzichtsvak (mandje en afrekenen) ────────────────────────────────── */

/* Wit vlak met subtiele schaduw en rechte hoeken: hetzelfde kaartrecept als
   de actiegroep-kaartjes op de actiepagina. Op het afrekenscherm is dat vlak
   het Woo-blok #order_review; de eigen kop staat in review-order.php, de
   standaardkop van WooCommerce verdwijnt. */

.px-shop-overzicht,
.woocommerce-checkout #order_review {
	position: sticky;
	top: calc(var(--space-d5) + var(--space-d2));
	display: flex;
	flex-direction: column;
	gap: var(--space-d1);
	background: var(--white);
	box-shadow: var(--shadow-subtle);
	padding: var(--space-d2);
}

.woocommerce-checkout #order_review_heading { display: none; }

.px-shop-overzicht__inhoud {
	display: flex;
	flex-direction: column;
	gap: var(--space-d1);
}

.px-shop-overzicht__producten {
	list-style: none;
	margin: 0;
	padding: 0 0 var(--space-d075);
	display: flex;
	flex-direction: column;
	gap: var(--space-d025);
	border-bottom: 1px solid var(--sand-light);
}

.px-shop-overzicht__producten li {
	display: flex;
	justify-content: space-between;
	gap: var(--space-d05);
}

.px-shop-overzicht__qr svg { width: 1.1em; height: 1.1em; color: var(--navy); }

.px-shop-overzicht__regels {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-d025);
}

.px-shop-overzicht__regels > div {
	display: flex;
	justify-content: space-between;
	gap: var(--space-d05);
}

.px-shop-overzicht__regels dt { font-family: var(--font-display); font-weight: var(--weight-medium); }

.px-shop-overzicht__regels dd { margin: 0; font-weight: var(--weight-bold); }

.px-shop-overzicht__knop {
	justify-content: center;
	width: 100%;
	font-size: var(--text-d125);
}

.px-shop-overzicht__hint {
	display: flex;
	align-items: flex-start;
	gap: var(--space-d05);
	margin: 0;
	font-size: calc(var(--text-body) * 0.88);
	color: var(--gray-mid);
}

.px-shop-overzicht__hint svg { width: 1.2em; height: 1.2em; flex: none; margin-top: 0.2em; }

/* Bezorgmethode: alleen zichtbaar als er echt iets te kiezen valt. */

.px-shop-overzicht__verzending {
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-d025);
}

.px-shop-overzicht__verzending legend {
	padding: 0;
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
}

.px-shop-overzicht__verzending label {
	display: flex;
	align-items: center;
	gap: var(--space-d05);
	cursor: pointer;
}


/* ─── Afrekenen: het Woo-formulier in de vorm van de mockup ──────────────── */

/* Vlak formulier zonder kaart, in de stijl van de Gravity Forms formulieren
   op dorcas.nl (px-forms). De opmaak hangt aan de echte Woo-selectors; alleen
   het overzichtsvak rechts heeft een eigen template. */

.woocommerce-checkout .site-main { padding-inline: var(--space-d3); }

.woocommerce-checkout .site-main .woocommerce {
	max-width: var(--row-width);
	margin: 0 auto;
	padding: var(--space-d3) var(--space-d3);
}

.woocommerce-checkout #customer_details { grid-column: 1; }

.woocommerce-checkout #order_review { grid-column: 2; }

.woocommerce-checkout .woocommerce-NoticeGroup,
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle { grid-column: 1 / -1; }

.woocommerce-checkout .col2-set {
	display: flex;
	flex-direction: column;
	gap: var(--space-d2);
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100%; }

/* Kop van een formulierblok ("Factuurgegevens", "Verzendgegevens"): zelfde
   maat en streepje als heading--h4 met heading__divider uit base.css. */

.woocommerce-checkout form.checkout h3 {
	display: flex;
	flex-direction: column;
	margin: 0 0 var(--space-d1);
	font-family: var(--font-display);
	font-size: var(--text-d125);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: var(--text-heading);
}

.woocommerce-checkout form.checkout h3::before {
	content: "";
	display: block;
	width: 2.4em;
	height: 0.2em;
	margin-bottom: var(--space-d05);
	background-color: var(--divider-primary);
}

/* Vier kolommen, zodat postcode, huisnummer en toevoeging naast elkaar
   passen zoals in de adresvelden op dorcas.nl. Alles staat standaard over de
   volle breedte; alleen de velden hieronder krijgen een smallere plek. */

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-d1) var(--space-d15);
	align-content: start;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > .form-row,
.woocommerce-address-fields__field-wrapper > .form-row { grid-column: span 4; }

.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last,
.woocommerce-address-fields__field-wrapper .form-row-first,
.woocommerce-address-fields__field-wrapper .form-row-last,
.woocommerce #billing_postcode_field,
.woocommerce #shipping_postcode_field { grid-column: span 2; }

.woocommerce #billing_house_number_field,
.woocommerce #shipping_house_number_field,
.woocommerce #billing_address_2_field,
.woocommerce #shipping_address_2_field { grid-column: span 1; }

.woocommerce .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-d025);
	margin: 0;
	padding: 0;
}

.woocommerce .form-row-wide,
.woocommerce .form-row.notes { grid-column: 1 / -1; }

.woocommerce .form-row label {
	font-family: var(--font-display);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-normal);
	letter-spacing: var(--ls-tight);
}

.woocommerce .form-row .optional { font-weight: var(--weight-regular); color: var(--gray-mid); }

.woocommerce .form-row abbr.required {
	text-decoration: none;
	border: 0;
	color: var(--navy);
}

/* Invoervelden volgen het Gravity Forms patroon uit base.css. */

.woocommerce .form-row input.input-text,
.woocommerce .form-row textarea,
.woocommerce .form-row select {
	width: 100%;
	padding: var(--space-d075) var(--space-d1);
	border-radius: var(--space-d05);
	border: var(--space-d001) solid var(--navy);
	background-color: var(--white);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--weight-regular);
	line-height: var(--lh-relaxed);
	color: var(--text-base);
	transition: border-color var(--duration-normal) var(--ease-smooth);
}

.woocommerce .form-row textarea {
	height: calc(2lh + 2 * var(--space-d075));
	max-height: 200px;
	resize: none;
}

.woocommerce .form-row input.input-text:hover,
.woocommerce .form-row textarea:hover,
.woocommerce .form-row select:hover { border-color: var(--action); }

.woocommerce .form-row input.input-text:focus-visible,
.woocommerce .form-row textarea:focus-visible,
.woocommerce .form-row select:focus-visible {
	outline: solid 3px var(--btn-focus-ring);
	outline-offset: 1px;
	border-color: var(--action);
}

.woocommerce .form-row input::placeholder,
.woocommerce .form-row textarea::placeholder { color: var(--gray-mid); }

/* Het landenkeuzeveld (selectWoo) in dezelfde vorm als de andere velden. */

.woocommerce .select2-container--default .select2-selection--single {
	height: auto;
	padding: var(--space-d075) var(--space-d1);
	border-radius: var(--space-d05);
	border: var(--space-d001) solid var(--navy);
	background-color: var(--white);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--lh-relaxed);
	color: var(--text-base);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: var(--space-d075);
	transform: translateY(-50%);
}

/* De blauwe melding voor kerken en andere vaste toelichtingen. */

.px-shop-melding {
	grid-column: 1 / -1;
	display: flex;
	align-items: flex-start;
	gap: var(--space-d075);
	margin: 0 0 var(--space-d1);
	padding: var(--space-d075) var(--space-d1);
	background: var(--blue-light);
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
}

.px-shop-melding svg { width: 1.4em; height: 1.4em; flex: none; margin-top: 0.15em; color: var(--navy); }

.px-shop-afrekenen__titel { margin-bottom: var(--space-d2); }

/* Betaalblok: alles is gratis, dus er valt niets te kiezen. Alleen de
   bestelknop en de tekst dat er niet betaald hoeft te worden blijven over. */

.woocommerce-checkout #payment {
	background: none;
	border: 0;
	padding: 0;
}

.woocommerce-checkout #payment .form-row.place-order {
	display: flex;
	flex-direction: column;
	gap: var(--space-d075);
	margin: 0;
	padding: 0;
}

.woocommerce-checkout #payment .wc_payment_methods {
	list-style: none;
	margin: 0 0 var(--space-d1);
	padding: 0;
}


/* ─── Meldingen van WooCommerce ──────────────────────────────────────────── */

/* Recht vlak in themakleuren, zelfde vorm als de blauwe melding hierboven.
   Geldt ook voor de kerkmelding op het afrekenscherm, die de class
   woocommerce-info meekrijgt. */

/* WooCommerce zet zelf een absoluut gepositioneerd fonticoon (::before) in de
   melding; dat valt over de tekst omdat onze padding kleiner is. De meldingen
   die een icoon nodig hebben (zoals de kerkmelding) brengen hun eigen svg mee. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-d05) var(--space-d1);
	list-style: none;
	margin: 0 0 var(--space-d15);
	padding: var(--space-d075) var(--space-d1);
	border: 0;
	border-radius: 0;
	background: var(--blue-light);
	color: var(--text-base);
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
}

.woocommerce-error { background: color-mix(in srgb, var(--coral) 35%, var(--white)); }

.woocommerce-error li { list-style: none; width: 100%; }

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.woocommerce-message a:hover,
.woocommerce-info a:hover,
.woocommerce-error a:hover { color: var(--action); }

/* De knop die WooCommerce soms in een melding zet ("Bekijk winkelwagen",
   "E-mailadres bevestigen"). Die knop staat in de HTML soms vóór de tekst;
   order zet hem altijd achteraan, zodat je eerst leest en dan pas klikt. */

.woocommerce-message .button,
.woocommerce-info .button {
	order: 1;
	margin-left: auto;
	text-decoration: none;
}


/* ─── Knoppen die uit WooCommerce zelf komen ─────────────────────────────── */

/* Dezelfde vorm als .btn--sec uit base.css. De bestelknop op het
   afrekenscherm krijgt in PHP de echte class btn--prim mee. */

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce-account .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	column-gap: var(--space-d05);
	width: fit-content;
	padding: var(--btn-pad);
	border: 3px solid var(--transparent);
	border-radius: var(--radius-s);
	background-color: var(--white);
	box-shadow: var(--shadow-subtle);
	color: var(--gray-dark);
	font-family: var(--font-display);
	font-size: var(--text-d1);
	font-weight: var(--weight-medium);
	line-height: var(--lh-snug);
	cursor: pointer;
	transition: var(--transition-btn);
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover {
	border-color: var(--action);
	box-shadow: var(--shadow-hover);
}

.woocommerce .button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce a.button:focus-visible {
	outline: solid 5px var(--btn-focus-ring);
	outline-offset: 0;
	border-color: var(--action);
	box-shadow: none;
}


/* ─── Wat WooCommerce zelf zou meebrengen ───────────────────────────────── */

/* De eigen stylesheets van WooCommerce laden niet (zie includes/frontend.php).
   Twee dingen daaruit hebben we wel nodig: verborgen hulpteksten en het
   oogje waarmee je een wachtwoord zichtbaar maakt. */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.woocommerce .password-input {
	position: relative;
	display: block;
}

.woocommerce .password-input input.input-text { padding-right: 2.75rem; }

.woocommerce .show-password-input {
	position: absolute;
	top: 50%;
	right: var(--space-d075);
	transform: translateY(-50%);
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gray-mid);
	cursor: pointer;
}

/* Het oog is een masker, zodat de kleur uit color komt en hover gewoon werkt. */
.woocommerce .show-password-input::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: currentColor;
	-webkit-mask: center / 1.4rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.16,133.16,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z'/%3E%3C/svg%3E");
	mask: center / 1.4rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.16,133.16,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z'/%3E%3C/svg%3E");
}

.woocommerce .show-password-input:hover { color: var(--action); }

.woocommerce .show-password-input:focus-visible {
	outline: solid 3px var(--btn-focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-s);
}

/* Streep door het oog zodra het wachtwoord zichtbaar is. */
.woocommerce .show-password-input.display-password::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom right, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
}

/* Aankruisvakje met label ernaast (Ingelogd blijven). */

.woocommerce .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: var(--space-d05);
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
}

.woocommerce .woocommerce-form__input-checkbox { width: 1.1rem; height: 1.1rem; accent-color: var(--action); }

/* Toelichting onder een veld. */

.woocommerce .form-row span[id$="_description"] {
	font-size: calc(var(--text-body) * 0.9);
	color: var(--gray-mid);
}

.woocommerce .form-row span[id$="_description"] em { font-style: normal; }

/* Sterkte-oordeel over een nieuw wachtwoord. */

.woocommerce-password-strength,
.woocommerce-password-hint {
	margin-top: var(--space-d05);
	padding: var(--space-d05) var(--space-d075);
	background: var(--sand-light);
	font-family: var(--font-display);
	font-size: calc(var(--text-body) * 0.9);
	font-weight: var(--weight-medium);
}

.woocommerce-password-strength.short,
.woocommerce-password-strength.bad { background: color-mix(in srgb, var(--coral) 35%, var(--white)); }

.woocommerce-password-strength.good,
.woocommerce-password-strength.strong { background: var(--blue-light); }


/* ─── Mijn account ───────────────────────────────────────────────────────── */

.woocommerce-account .site-main { padding-inline: var(--space-d3); }

.woocommerce-account .site-main .woocommerce {
	max-width: var(--row-width);
	margin: 0 auto;
	padding: var(--space-d3) var(--space-d3);
}

/* Titel over de volle breedte, daaronder links de navigatie en rechts de
   inhoud. De titel is een kind van dezelfde container (zie includes/account.php),
   dus hij hoort bij hetzelfde grid. */

body.woocommerce-account.logged-in .site-main .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: 0 var(--space-d3);
	align-items: start;
}

.px-account__titel { grid-column: 1 / -1; margin-bottom: var(--space-d2); }

body.woocommerce-account.logged-in .woocommerce-notices-wrapper { grid-column: 1 / -1; }

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-d025);
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--space-d05) var(--space-d075);
	background: var(--white);
	box-shadow: var(--shadow-subtle);
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
	color: var(--text-base);
	transition: var(--transition-btn);
}

.woocommerce-MyAccount-navigation a:hover { color: var(--action); box-shadow: var(--shadow-hover); }

.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--white);
	background: var(--navy);
}

.woocommerce-MyAccount-content {
	background: var(--white);
	box-shadow: var(--shadow-subtle);
	padding: var(--space-d2);
}

.woocommerce-MyAccount-content > *:first-child { margin-top: 0; }
.woocommerce-MyAccount-content > *:last-child { margin-bottom: 0; }

/* Koppen binnen een accountscherm: maat van heading--h4 met het blauwe
   streepje uit base.css, zonder dat de markup die classes meekrijgt. */

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-order-details__title,
.woocommerce-column__title {
	display: flex;
	flex-direction: column;
	margin: var(--space-d2) 0 var(--space-d1);
	font-family: var(--font-display);
	font-size: var(--text-d125);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: var(--text-heading);
}

.woocommerce-MyAccount-content h2::before,
.woocommerce-MyAccount-content h3::before,
.woocommerce-order-details__title::before,
.woocommerce-column__title::before {
	content: "";
	display: block;
	width: 2.4em;
	height: 0.2em;
	margin-bottom: var(--space-d05);
	background-color: var(--divider-primary);
}


/* ─── Dashboard ──────────────────────────────────────────────────────────── */

.px-account__hallo { margin: 0 0 var(--space-d15); }

.px-account-snel {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--space-d075);
}

/* Vlak binnen een wit vlak: zandkleur in plaats van nog een witte kaart. */

.px-account-snel__kaart {
	display: flex;
	flex-direction: column;
	gap: var(--space-d025);
	height: 100%;
	padding: var(--space-d1);
	background: var(--sand-light);
	color: var(--text-base);
	text-decoration: none;
	transition: var(--transition-btn);
}

.px-account-snel__kaart:hover { background: var(--blue-light); }

.px-account-snel__icoon svg { width: var(--space-d15); height: var(--space-d15); color: var(--action); }

.px-account-snel__titel {
	font-family: var(--font-display);
	font-size: var(--text-d1);
	font-weight: var(--weight-semibold);
	color: var(--text-heading);
}

.px-account-snel__tekst { font-size: calc(var(--text-body) * 0.95); }

.px-account__uitloggen {
	margin: var(--space-d15) 0 0;
	font-size: calc(var(--text-body) * 0.95);
	color: var(--gray-mid);
}

.px-account__uitloggen a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }

.px-account__uitloggen a:hover { color: var(--action); }


/* ─── Inloggen ───────────────────────────────────────────────────────────── */

.px-account-login {
	max-width: 34rem;
	display: flex;
	flex-direction: column;
	gap: var(--space-d15);
	padding: var(--space-d2);
	background: var(--white);
	box-shadow: var(--shadow-subtle);
}

.px-account-login__intro {
	display: flex;
	align-items: flex-start;
	gap: var(--space-d075);
	margin: 0;
	padding: var(--space-d075) var(--space-d1);
	background: var(--blue-light);
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
}

.px-account-login__intro svg { width: 1.4em; height: 1.4em; flex: none; margin-top: 0.15em; color: var(--navy); }

.px-account-login form {
	display: flex;
	flex-direction: column;
	gap: var(--space-d1);
}

.px-account-login__acties {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-d1);
	margin: 0;
}

.px-account-login .woocommerce-LostPassword,
.px-account-login__aanmaken { margin: 0; }

.px-account-login .woocommerce-LostPassword a,
.px-account-login__aanmaken a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.px-account-login .woocommerce-LostPassword a:hover,
.px-account-login__aanmaken a:hover { color: var(--action); }


/* ─── Adressen en accountgegevens ───────────────────────────────────────── */

.woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: var(--space-d1);
}

.woocommerce-Address {
	padding: var(--space-d15);
	background: var(--sand-light);
}

.woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-d1);
}

.woocommerce-Address-title h2 { margin-top: 0; }

.woocommerce-Address-title .edit {
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	white-space: nowrap;
}

.woocommerce-Address-title .edit:hover { color: var(--action); }

.woocommerce-Address address {
	margin: 0;
	font-style: normal;
	line-height: var(--lh-relaxed);
}

/* Formulieren met twee kolommen: adres aanpassen en accountgegevens. */

.woocommerce-EditAccountForm {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-d1) var(--space-d15);
	align-items: start;
}

.woocommerce-address-fields__field-wrapper { gap: var(--space-d1) var(--space-d15); align-items: start; }

.woocommerce .form-row-first { grid-column: 1; }
.woocommerce .form-row-last { grid-column: 2; }

.woocommerce-EditAccountForm > p:not([class]),
.woocommerce-EditAccountForm > fieldset,
.woocommerce-address-fields > p:not([class]) { grid-column: 1 / -1; }

.woocommerce-EditAccountForm > .clear,
.woocommerce-address-fields .clear { display: none; }

.woocommerce-EditAccountForm > fieldset {
	margin: 0;
	padding: var(--space-d15);
	border: 0;
	background: var(--sand-light);
	display: grid;
	gap: var(--space-d1);
}

.woocommerce-EditAccountForm > fieldset legend {
	padding: 0;
	font-family: var(--font-display);
	font-size: var(--text-d1);
	font-weight: var(--weight-semibold);
	color: var(--text-heading);
}

/* De knop onderaan een accountformulier. */

.woocommerce-EditAccountForm .woocommerce-Button,
.woocommerce-address-fields button[type="submit"],
.woocommerce-address-fields .button { margin-top: var(--space-d05); }


/* ─── Tabellen: bestellingen en besteldetails ───────────────────────────── */

/* Bedragen blijven overal weg: alles in deze webshop is gratis. */

/* De regels Subtotaal en Totaal haalt includes/account.php uit de tabel; hier
   blijven alleen de kolommen met bedragen over. */

.woocommerce-orders-table__header-order-total,
.woocommerce-orders-table__cell-order-total,
.woocommerce-table__product-total,
.woocommerce-table--order-details .product-total { display: none; }

.woocommerce-orders-table,
.woocommerce-table,
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-orders-table th,
.woocommerce-table th,
.woocommerce table.shop_table th {
	text-align: left;
	font-family: var(--font-display);
	font-weight: var(--weight-semibold);
	color: var(--text-heading);
}

.woocommerce-orders-table th,
.woocommerce-orders-table td,
.woocommerce-table th,
.woocommerce-table td,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--space-d05) var(--space-d075);
	border-bottom: 1px solid var(--sand-light);
	vertical-align: top;
}

.woocommerce-orders-table td:first-child,
.woocommerce-table td:first-child { padding-left: 0; }

/* De tweede kolom van deze tabel is de kolom met bedragen en staat dus altijd
   uit. Door de productkolom de volle breedte te geven lopen de scheidingslijnen
   door tot de rand en staan de waarden in de voet netjes rechts. */

.woocommerce-table--order-details .product-name { width: 100%; }

.woocommerce-table--order-details tfoot td { text-align: right; }

/* De QR-regel hoort onder de productnaam, niet erachteraan. */

.woocommerce-table--order-details .px-shop-chip {
	display: flex;
	margin-top: var(--space-d025);
}

/* WooCommerce zet bestelnummer, datum en status in een mark-element. Zonder
   de stylesheet van WooCommerce geeft de browser die een gele markering. */

.woocommerce-MyAccount-content mark,
.woocommerce mark {
	background: none;
	color: var(--text-heading);
	font-family: var(--font-display);
	font-weight: var(--weight-semibold);
}

.woocommerce-orders-table th:first-child,
.woocommerce-table th:first-child { padding-left: 0; }

.woocommerce-orders-table .woocommerce-button,
.woocommerce-orders-table .button { padding: var(--space-d025) var(--space-d075); }

/* Adresblokken onder een bestelling. */

.woocommerce-customer-details .col2-set,
.woocommerce-order-details + .woocommerce-customer-details .col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: var(--space-d1);
}

.woocommerce-customer-details address {
	margin: 0;
	padding: var(--space-d15);
	background: var(--sand-light);
	font-style: normal;
	line-height: var(--lh-relaxed);
}

/* Paginering onder een lange bestellijst. */

.woocommerce-pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-d025);
	margin: var(--space-d15) 0 0;
	padding: 0;
}

.woocommerce-pagination a,
.woocommerce-pagination span {
	display: block;
	padding: var(--space-d025) var(--space-d075);
	background: var(--white);
	box-shadow: var(--shadow-subtle);
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
	color: var(--text-base);
}

.woocommerce-pagination a:hover { color: var(--action); box-shadow: var(--shadow-hover); }

.woocommerce-pagination .current { background: var(--navy); color: var(--white); }


/* ─── Bestelling aanpassen (Addify) ──────────────────────────────────────── */

/* Addify Edit Order by Customer tekent dit scherm zelf: een eigen tabel, de
   knoppen van de browser en een venster in het paars van die plugin. Het viel
   daarmee buiten het ontwerp, en helemaal nu de stylesheets van WooCommerce
   uitstaan. Hier krijgt het de opbouw van de rest van de webshop.
   De knopklassen van het thema zet assets/js/addify-vertalingen.js erop. */

.adfy_order_edit h3 {
	font-family: var(--font-display);
	font-size: var(--text-d125);
	font-weight: var(--weight-semibold);
	color: var(--text-heading);
	margin: 0 0 var(--space-d1);
}

.adfy_order_edit .popup_table {
	width: 100%;
	border-collapse: collapse;
}

/* Kolom 4 en 6 zijn Price en Subtotal. Alles in deze webshop is gratis; die
   kolommen tonen overal 0 en staan hier net zo uit als in de andere tabellen. */

.adfy_order_edit .popup_table th:nth-child(4),
.adfy_order_edit .popup_table td:nth-child(4),
.adfy_order_edit .popup_table th:nth-child(6),
.adfy_order_edit .popup_table td:nth-child(6) { display: none; }

.adfy_order_edit .popup_table th {
	padding: 0 var(--space-d075) var(--space-d05);
	border-bottom: 1px solid var(--sand-light);
	text-align: left;
	font-family: var(--font-display);
	font-weight: var(--weight-semibold);
	color: var(--text-heading);
}

.adfy_order_edit .popup_table td {
	padding: var(--space-d075);
	border-bottom: 1px solid var(--sand-light);
	vertical-align: middle;
}

.adfy_order_edit .popup_table th:first-child,
.adfy_order_edit .popup_table td:first-child {
	width: 2.75rem;
	padding-left: 0;
}

/* De naamkolom pakt de vrije ruimte, zodat het aantal rechts uitkomt. */

.adfy_order_edit .popup_table td:nth-child(3) {
	width: 100%;
	font-family: var(--font-display);
	font-size: var(--text-d125);
	font-weight: var(--weight-semibold);
	color: var(--text-heading);
}

/* De beeldkolom heeft een eigen breedte nodig: zonder die maat knijpt de
   naamkolom hiernaast de cel dicht en houdt het beeld nul breedte over. */

.adfy_order_edit .popup_table th:nth-child(2),
.adfy_order_edit .popup_table td:nth-child(2) { width: 88px; }

.adfy_order_edit .popup_table .btn2 {
	width: 88px;
	margin: 0;
}

.adfy_order_edit .popup_table img {
	display: block;
	width: 88px;
	height: 66px;
	object-fit: contain;
}

/* Weghaalknop: dezelfde knop als in het mandje. Addify zet hem absoluut met
   een clip-rechthoek; beide moeten terug naar normaal. */

.adfy_order_edit .remove-order-item {
	position: static;
	clip: auto;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 3px solid var(--transparent);
	border-radius: var(--radius-s);
	background: transparent;
	color: var(--gray-mid);
	cursor: pointer;
	transition: var(--transition-btn);
}

.adfy_order_edit .remove-order-item:hover {
	background: var(--white);
	border-color: var(--action);
	box-shadow: var(--shadow-hover);
	color: var(--gray-dark);
}

.adfy_order_edit .remove-order-item:focus-visible {
	outline: solid 3px var(--btn-focus-ring);
	outline-offset: 0;
}

.adfy_order_edit .remove-order-item svg { width: 1.3rem; height: 1.3rem; }

/* Aantalveld: hetzelfde veld als tussen de aantalknoppen. De uitroeptekens
   zijn er omdat hide.css van Addify ze op dezelfde regels zet. */

.adfy_order_edit .adfy_eobc_number,
.adfy_order_edit .adf_eobc_quantity input[type="number"] {
	width: 3.5rem;
	height: 2.75rem !important;
	padding: 0 !important;
	border: 3px solid var(--transparent) !important;
	border-radius: var(--radius-s);
	background: var(--white) !important;
	box-shadow: var(--shadow-subtle) !important;
	text-align: center;
	font-family: var(--font-display);
	font-size: var(--text-d1);
	font-weight: var(--weight-semibold);
	color: var(--text-base);
}

.adfy_order_edit .adfy_eobc_number:focus-visible,
.adfy_order_edit .adf_eobc_quantity input[type="number"]:focus-visible {
	outline: solid 3px var(--btn-focus-ring);
	outline-offset: 0;
	border-color: var(--action);
}

/* De twee knoppen onder de tabel. Addify geeft ze een procentbreedte mee. */

.adfy_order_edit .add_product {
	width: auto;
	margin-top: var(--space-d15);
}

.adfy_order_edit .save_changes {
	width: auto;
	padding: 0;
	margin-top: var(--space-d2);
}

/* Het venster om een product toe te voegen. */

.adfy_order_edit .popup-modal-box {
	border-radius: var(--radius-m);
	overflow: hidden;
	box-shadow: var(--shadow-hover);
}

.adfy_order_edit .popup-modal-header {
	padding: var(--space-d1) var(--space-d15);
	background: var(--sand-light);
	border-bottom: 0;
	box-shadow: none;
	border-radius: 0;
}

.adfy_order_edit .popup-modal-header h3 {
	margin: 0;
	font-size: var(--text-d125);
}

.adfy_order_edit .close_popup {
	color: var(--gray-dark);
	border-radius: var(--radius-s);
	transition: var(--transition-btn);
}

.adfy_order_edit .close_popup:hover,
.adfy_order_edit .close_popup:focus,
.adfy_order_edit .close_popup:active {
	background: var(--action);
	color: var(--white);
}

.adfy_order_edit .popup-modal-content {
	padding: var(--space-d15);
}

.adfy_order_edit .popup-modal-content h4 {
	margin: 0 0 var(--space-d05);
	font-family: var(--font-display);
	font-size: var(--text-d1);
	font-weight: var(--weight-semibold);
	color: var(--text-heading);
}

.adfy_order_edit .adf_add_btn {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--space-d15);
}

/* De knop in het venster staat bij Addify vast op een grijs vlak met een
   paarse hover; die twee kleuren staan er met een uitroepteken in. */

.adfy_order_edit .modal-popup-btn {
	float: none;
	width: auto;
	max-width: none;
	height: auto;
	margin: 0;
	padding: var(--space-d075) var(--space-d15) !important;
	background-color: var(--action) !important;
	color: var(--white) !important;
}

.adfy_order_edit .modal-popup-btn:hover {
	background-color: var(--navy) !important;
	color: var(--white) !important;
}

/* De achtergrond van het venster in de tint van het thema. */

.adfy_order_edit .popup_modal { background-color: rgba(41, 44, 51, 0.7); }


/* ─── Tabellen op een smal scherm ────────────────────────────────────────── */

/* Vijf kolommen passen niet op een telefoon. Elke regel wordt een blokje met
   het kolomlabel links (WooCommerce zet dat in data-title) en de waarde
   rechts. */

@media (max-width: 767px) {
	.woocommerce-orders-table thead,
	.woocommerce-table--order-details thead { display: none; }

	.woocommerce-orders-table tr,
	.woocommerce-table--order-details tr {
		display: block;
		padding: var(--space-d075) 0;
		border-bottom: 1px solid var(--sand-light);
	}

	.woocommerce-orders-table tr:last-child,
	.woocommerce-table--order-details tfoot tr:last-child { border-bottom: 0; }

	.woocommerce-orders-table th,
	.woocommerce-orders-table td,
	.woocommerce-table--order-details th,
	.woocommerce-table--order-details td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-d1);
		width: auto;
		padding: var(--space-d025) 0;
		border: 0;
		text-align: right;
	}

	.woocommerce-orders-table th[data-title]::before,
	.woocommerce-orders-table td[data-title]::before {
		content: attr(data-title);
		flex: none;
		font-family: var(--font-display);
		font-weight: var(--weight-semibold);
		color: var(--text-heading);
		text-align: left;
	}

	/* De productregels van een bestelling blijven gewoon links uitgelijnd. */
	.woocommerce-table--order-details .product-name {
		display: block;
		text-align: left;
	}

	/* Het label plus twee knoppen op één regel is te breed voor de smalste
	   telefoons; dan zakken de knoppen naar de regel eronder. */
	.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
		flex-wrap: wrap;
		row-gap: var(--space-d05);
	}

	/* De regel hierboven zet elke cel op flex en wint van een losse class; de
	   bedragen blijven alleen weg als het celtype er in deze regels bij staat. */
	.woocommerce-orders-table th.woocommerce-orders-table__header-order-total,
	.woocommerce-orders-table td.woocommerce-orders-table__cell-order-total,
	.woocommerce-table--order-details td.woocommerce-table__product-total,
	.woocommerce-table--order-details th.woocommerce-table__product-total,
	.woocommerce-table--order-details td.product-total,
	.woocommerce-table--order-details th.product-total { display: none; }
}

/* ─── Leeg mandje ────────────────────────────────────────────────────────── */

.px-shop-leeg {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-d075);
	margin-top: var(--space-d2);
	padding: var(--space-d3) var(--space-d2);
	background: var(--white);
	box-shadow: var(--shadow-subtle);
	text-align: center;
}

.px-shop-leeg__icoon svg { width: var(--space-d3); height: var(--space-d3); color: var(--action); }

.px-shop-leeg__kop {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-d125);
	font-weight: var(--weight-semibold);
	color: var(--text-heading);
}

.px-shop-leeg__tekst {
	margin: 0;
	max-width: 34rem;
	color: var(--gray-mid);
}

.px-shop-leeg .btn--prim { margin-top: var(--space-d05); }

/* Meldingen op de mandjepagina staan buiten de eigen sectie; ze volgen
   daarom hier dezelfde containermaat als de inhoud eronder. */

.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper:not(:empty) {
	max-width: var(--row-width);
	margin: 0 auto;
	padding: var(--space-d3) var(--space-d3) 0;
}


/* ─── Account aanmaken (Gravity Forms) ───────────────────────────────────── */

/* De pagina met formulier 1. Het thema levert de opmaak van de velden; hier
   staat alleen de indeling van de pagina en wat het thema niet kent: een
   wachtwoordveld. Op dorcas.nl komt dat veld niet voor, dus base.css noemt
   input[type="password"] nergens. */

.px-shop-aanmaken__binnen {
	max-width: var(--row-width);
	width: 100%;
	margin: 0 auto;
	padding: var(--space-d3) var(--space-d3);
}

.px-shop-aanmaken__tekst { max-width: 44rem; margin-top: var(--space-d1); }

.px-shop-aanmaken__formulier {
	max-width: 40rem;
	margin-top: var(--space-d2);
	padding: var(--space-d2);
	background: var(--white);
	box-shadow: var(--shadow-subtle);
}

.px-shop-aanmaken .gform_wrapper { width: 100%; }

/* Wachtwoordvelden krijgen dezelfde vorm als de andere velden in base.css. */

.gform_wrapper input[type="password"] {
	display: flex;
	align-items: center;
	align-self: stretch;
	width: 100%;
	padding: var(--space-d075) var(--space-d1);
	padding-right: 2.75rem;
	border-radius: var(--space-d05);
	border: var(--space-d001) solid var(--navy);
	background-color: var(--white);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--weight-regular);
	line-height: var(--lh-relaxed);
	color: var(--text-base);
	transition: border-color var(--duration-normal) var(--ease-smooth);
}

.gform_wrapper input[type="password"]:hover { border-color: var(--action); }

.gform_wrapper input[type="password"]:focus { border-color: var(--action); outline: none; }

.gform_wrapper input[type="password"]:focus-visible {
	outline: solid 3px var(--btn-focus-ring);
	outline-offset: 1px;
	border-color: var(--action);
}

.gform_wrapper input[type="password"]::placeholder { color: var(--gray-mid); }

/* Twee wachtwoordvelden naast elkaar, met het oogje binnen het veld. */

/* Zelfde raster als .gform_fields in base.css (twaalf kolommen, gap d1),
   zodat beide wachtwoordvelden precies onder de velden erboven uitkomen. */

.gform_wrapper .ginput_container_password {
	display: flex;
	gap: var(--space-d1);
}

.gform_wrapper .ginput_container_password > .gform-grid-col {
	flex: 1 1 0;
	width: auto;
	max-width: none;
	padding: 0;
}

.gform_wrapper .password_input_container { position: relative; display: block; padding: 0; }

/* Gravity Forms geeft het veld zelf een smallere breedte om plaats te maken
   voor het oogje; die ruimte zit hier al in de padding. */

.gform_wrapper .password_input_container input[type="password"] { width: 100%; }

/* Gravity Forms zet de binnenruimte van dit veld met een eigen selector die
   van de regel hierboven wint, waardoor de tekst onder het oogje doorliep.
   Deze regel is een klasse specifieker en houdt die ruimte vrij. */

.px-shop-aanmaken .gform_wrapper .gfield--type-password input[type="password"] {
	padding: var(--space-d075) var(--space-d1);
	padding-right: 2.75rem;
}

.gform_wrapper .password_input_container .gform_show_password {
	position: absolute;
	top: 50%;
	right: var(--space-d05);
	transform: translateY(-50%);
	padding: var(--space-d025);
	border: 0;
	background: none;
	color: var(--gray-mid);
	cursor: pointer;
}

.gform_wrapper .password_input_container .gform_show_password:hover { color: var(--action); }


/* ─── Voet ───────────────────────────────────────────────────────────────── */

/* Alle stijl komt uit px-footer/css/frontend.css en base.css. Hier alleen
   ruimte boven de voet en de logomaat: het thema kent zijn clamp-breedte
   alleen toe aan een inline svg, de webshopvoet gebruikt een img. */

.px-footer { margin-top: var(--space-d3); }

/* WooCommerce legt op Woo-pagina's een generieke regel over alle beelden
   (.woocommerce-page img { height: auto }) die met één class plus type wint
   van .px-footer-base__cert. Twee classes winnen weer terug; zelfde maat
   als base.css. */
.px-footer-base__certs .px-footer-base__cert {
	height: calc((var(--space-d2) + var(--space-d3)) / 2);
	width: auto;
}

.px-footer-base__logo img {
	width: clamp(165px, 15vw, 263px);
	height: auto;
}


/* ─── Responsief ─────────────────────────────────────────────────────────── */

@media (max-width: 992px) {
	.px-shop-mandje__indeling,
	.woocommerce-checkout form.checkout,
	.px-shop-product__indeling { grid-template-columns: 1fr; }

	.px-shop-overzicht,
	.woocommerce-checkout #order_review { position: static; }

	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review { grid-column: 1; }

	/* minmax(0, 1fr) en niet 1fr: anders duwt een brede tabel de kolom
	   voorbij de schermrand. */
	body.woocommerce-account.logged-in .site-main .woocommerce { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-d15); }

	.px-shop-kop__binnen { padding: var(--space-d1) var(--space-d2); }

	.woocommerce-checkout .site-main,
	.woocommerce-account .site-main { padding-inline: var(--space-d2); }

	.px-shop-aanmaken__binnen { padding-inline: var(--space-d2); }
}

@media (max-width: 767px) {
	.px-shop-kop__binnen,
	.px-shop-producten__binnen,
	.px-shop-product__binnen,
	.px-shop-mandje__binnen,
	.px-shop-aanmaken__binnen,
	.woocommerce-checkout .site-main .woocommerce,
	.woocommerce-account .site-main .woocommerce { padding-left: var(--space-d1); padding-right: var(--space-d1); }

	/* Zonder deze regel houdt het formulier op een telefoon nog geen twee
	   derde van de breedte over: sectieruimte plus kaartruimte aan beide
	   kanten. */
	.px-shop-aanmaken__formulier { padding: var(--space-d15); }

	.woocommerce-checkout .site-main,
	.woocommerce-account .site-main { padding-inline: var(--space-d1); }

	.px-shop-kop__logo img { height: var(--space-d2); }
	.px-shop-kop__label { font-size: var(--text-d1); }
	.px-shop-kop__acties a > span:not(.px-shop-kop__teller) { display: none; }
	.px-shop-kop__acties .btn--prim span { display: inline; }

	/* Eén kolom: elk veld pakt de volle breedte. Zonder de tweede regel maken
	   de span-waarden hierboven extra kolommen aan die er niet zijn. */
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-additional-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); }

	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row,
	.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > .form-row,
	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last,
	.woocommerce #billing_postcode_field,
	.woocommerce #billing_house_number_field,
	.woocommerce #billing_address_2_field { grid-column: 1 / -1; }

	.woocommerce-address-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); }

	.woocommerce-address-fields__field-wrapper > .form-row { grid-column: 1 / -1; }

	.woocommerce-EditAccountForm,
	.woocommerce-address-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); }

	.woocommerce .form-row-first,
	.woocommerce .form-row-last { grid-column: 1 / -1; }

	/* De bestelregel wordt een raster: het beeld links over de volle hoogte,
	   daarnaast de titel met de QR-chip en daaronder de aantalknoppen met de
	   weghaalknop rechts op dezelfde regel. */
	.px-shop-regel {
		display: grid;
		grid-template-columns: 5rem minmax(0, 1fr) auto;
		grid-template-areas:
			"beeld info info"
			"beeld aantal weg";
		align-items: center;
		column-gap: var(--space-d1);
		row-gap: var(--space-d075);
		padding: var(--space-d1);
	}

	.px-shop-regel__beeld {
		grid-area: beeld;
		align-self: start;
		width: 5rem;
		height: 6.5rem;
	}

	.px-shop-regel__info { grid-area: info; align-self: end; }
	.px-shop-regel .px-stepper { grid-area: aantal; }
	.px-shop-regel__weg { grid-area: weg; justify-self: end; }

	/* Bestelling aanpassen: dezelfde indeling als de bestelregel hierboven.
	   Vier kolommen naast elkaar passen niet op een telefoon. */
	.adfy_order_edit .popup_table,
	.adfy_order_edit .popup_table tbody { display: block; }

	.adfy_order_edit .popup_table tr:first-child { display: none; }

	.adfy_order_edit .popup_table tr {
		display: grid;
		grid-template-columns: 5rem minmax(0, 1fr) auto;
		grid-template-areas:
			"beeld naam naam"
			"beeld aantal weg";
		align-items: center;
		column-gap: var(--space-d1);
		row-gap: var(--space-d075);
		padding: var(--space-d1) 0;
		border-bottom: 1px solid var(--sand-light);
	}

	.adfy_order_edit .popup_table td {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
	}

	.adfy_order_edit .popup_table td:first-child { grid-area: weg; justify-self: end; }
	.adfy_order_edit .popup_table td:nth-child(2) { grid-area: beeld; align-self: start; }
	.adfy_order_edit .popup_table td:nth-child(3) { grid-area: naam; align-self: end; }
	.adfy_order_edit .popup_table td:nth-child(5) { grid-area: aantal; }

	.adfy_order_edit .popup_table .btn2,
	.adfy_order_edit .popup_table img { width: 5rem; height: 6.5rem; }
}

/* Op de smalste schermen passen de drie iconknoppen niet naast de volledige
   logo-lockup; dan blijft alleen het beeldmerk over. */
@media (max-width: 480px) {
	.px-shop-kop__label { display: none; }
}