Verzendadres

← de zichtbare kop We verbergen de hele heading-CONTAINER, ENKEL binnen #shipping-fields. We laten de bewust STAAN (a11y: screenreaders houden hun sectielabel). De contact-stap-kop ("Contactgegevens") en de betaal-stap blijven dus ongemoeid — dit is strak gescoped op #shipping-fields, niet op de generieke __title. DELETE-ON-CHANGE: bij een WC-update die #shipping-fields of de step-heading-class hernoemt, her-dump de DOM en herstel de selector. -------------------------------------------------------------------------- */ .gelevb-checkout--kaal #wc-guest-checkout-notice, .gelevb-checkout--kaal .wc-block-checkout__guest-checkout-notice { display: none !important; } .gelevb-checkout--kaal #shipping-fields .wc-block-components-checkout-step__heading-container { display: none !important; } /* -------------------------------------------------------------------------- WENS F (2026-06-09) — "Voeg een notitie toe aan je bestelling"-checkbox weg. Stef wil het order-note-veld uit de kale checkout (consistent met de bestaande kaal-lijn). Dit is het WooCommerce order-note FORMSTEP-blok: een checkbox-rij ("Add a note to your order") die een optionele

uitklapt.

>>> SAFE: het order-note-veld is OPTIONEEL (niet verplicht). <<<
   SOURCE-VERIFIED tegen de GEHYDRATEERDE React-DOM (Chrome --headless --dump-dom van
   de homepage waar de checkout-pattern staat, 2026-06-09) — NIET uit memory:
     <div class="wc-block-checkout__order-notes wp-block-woocommerce-checkout-order-note-block
                 wc-block-components-checkout-step" id="order-notes">
       <div class="wc-block-checkout__add-note"> … checkbox "Voeg een notitie toe aan je
       bestelling" … </div>
   De dump bevat GEEN `required` / `aria-required="true"` op dit veld. WooCommerce levert
   het order-note als optionele customer-note; de submit (StoreApiCheckout → "Plaats
   bestelling") leest geen verplichte waarde uit deze node. Visueel verbergen verandert
   de orderverwerking dus niet — exact hetzelfde hide-mechanisme als WENS B/C/D/E hierboven:
   de node blijft in de DOM, alleen de rendering verdwijnt, de order submit onveranderd.

STRAK GESCOPED op het order-note FormStep (#order-notes / .wc-block-checkout__order-notes).
   Dit is een EIGEN FormStep-blok; de terms-checkbox + "Plaats bestelling"-knop liggen in een
   APART blok (de actions-/terms-block, niet hieronder genest), dus die worden NIET geraakt.

DELETE-ON-CHANGE: als Stef ooit een besteller-notitie/opmerkingenveld wil tonen, of als een
   WC-update #order-notes / de wrapper-class hernoemt, her-dump de gehydrateerde DOM en herstel.
   -------------------------------------------------------------------------- */
.gelevb-checkout--kaal #order-notes,
.gelevb-checkout--kaal .wc-block-checkout__order-notes,
.gelevb-checkout--kaal .wp-block-woocommerce-checkout-order-note-block {
	display: none !important;
}

/* --------------------------------------------------------------------------
   WENS A — Land/regio-veld weg.
   The block renders a country combobox even with one allowed country. No PHP route
   removes it (country is a required address pivot). We hide the whole field ROW; the
   field stays in the DOM and submits the default NL value (correct: NL-only, taxes
   off). If a 2nd country is ever allowed, DELETE this block first.
   SOURCE-VERIFIED hook: .wc-block-components-country-input.
   -------------------------------------------------------------------------- */
.gelevb-checkout--kaal .wc-block-components-country-input {
	display: none !important;
}
.gelevb-checkout--kaal #shipping-country,
.gelevb-checkout--kaal #billing-country {
	display: none !important;
}

/* --------------------------------------------------------------------------
   WENS C — Betaal-STAP-kop weg (de "Betalingsopties" heading + step number).
   The payment AREA stays (you must be able to pay). We remove only the redundant
   step heading so there is no "options" framing.
   SOURCE-VERIFIED hooks: #payment-method / .wc-block-checkout__payment-method,
   .wc-block-components-checkout-step__title / __heading (checkout-frontend.js +
   checkout.css, WC 10.8.1). [GENERIC — the step heading is WC chrome, not Mollie's.]
   -------------------------------------------------------------------------- */
.gelevb-checkout--kaal #payment-method .wc-block-components-checkout-step__title,
.gelevb-checkout--kaal .wc-block-checkout__payment-method .wc-block-components-checkout-step__title,
.gelevb-checkout--kaal .wp-block-woocommerce-checkout-payment-block .wc-block-components-checkout-step__title {
	display: none !important;
}
/* Collapse the now-empty heading row spacing so there is no orphan gap. */
.gelevb-checkout--kaal #payment-method .wc-block-components-checkout-step__heading,
.gelevb-checkout--kaal .wc-block-checkout__payment-method .wc-block-components-checkout-step__heading,
.gelevb-checkout--kaal .wp-block-woocommerce-checkout-payment-block .wc-block-components-checkout-step__heading {
	margin-block: 0 !important;
	min-height: 0 !important;
}

/* ==========================================================================
   WENS C2 (NEW in v6) — hide the ENTIRE single-method box-chrome.
   Goal: the payment area shows effectively nothing. No visible method label, no radio
   dot, no box border/separator lines. The method stays AUTO-SELECTED + payable; the
   "Plaats bestelling" button + the static iDEAL/Wero lockup do the communicating.

ALL rules scoped under .gelevb-checkout--kaal AND under the payment FormStep
   (#payment-method / .wc-block-checkout__payment-method) so nothing touches shipping
   or any other radio control on the page.

>>> SAFE ONLY BECAUSE THERE IS EXACTLY ONE METHOD BY DESIGN. <<<
   If a 2nd payment method (Mollie credit card, Bancontact, …) is ever enabled, DELETE
   this entire WENS C2 block first — otherwise the customer cannot choose or even see
   that there is a choice.
   ========================================================================== */

/* C2.1 — the radio DOT.  A11y-SAFE HIDE: visually clipped, NOT display:none.
   Input stays in the DOM, stays :checked, stays focusable → selection + submit intact.
   [GENERIC — matches cod & iDEAL: it is WC's own radio input, rendered by WC, not Mollie.]
   Source: checkout.css `.wc-block-components-radio-control__input{…}` +
   `…__input:checked:before{…}` (WC 10.8.1). */
.gelevb-checkout--kaal #payment-method .wc-block-components-radio-control__input,
.gelevb-checkout--kaal .wc-block-checkout__payment-method .wc-block-components-radio-control__input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	/* NOTE: deliberately NO display:none and NO appearance reset that would re-show it. */
}
/* Kill the inner ::before dot too (belt-and-braces; the clip above already hides it). */
.gelevb-checkout--kaal #payment-method .wc-block-components-radio-control__input:checked:before,
.gelevb-checkout--kaal .wc-block-checkout__payment-method .wc-block-components-radio-control__input:checked:before {
	display: none !important;
}

/* C2.2 — the visible method LABEL ("iDEAL" text + Mollie's gateway icon).
   Stef wants the box to show effectively nothing, so hide the label too.
   [GENERIC for the WC label wrapper] + [TO-RE-VERIFY on staging vs real iDEAL DOM]:
   Mollie 8.1.6 injects its label content INTO .wc-block-components-payment-method-label;
   confirm on staging that the iDEAL label/icon actually sits inside these wrappers and
   is fully hidden (the cod placeholder has only plain text, no icon). */
.gelevb-checkout--kaal #payment-method .wc-block-components-radio-control__label,
.gelevb-checkout--kaal .wc-block-checkout__payment-method .wc-block-components-radio-control__label,
.gelevb-checkout--kaal #payment-method .wc-block-components-payment-method-label,
.gelevb-checkout--kaal .wc-block-checkout__payment-method .wc-block-components-payment-method-label {
	display: none !important;
}

/* C2.3 — the BOX chrome: accordion separator line(s) + the last-option 1px border.
   These draw the visible rectangle around the method. Removing them flattens the area.
   [GENERIC — matches cod & iDEAL: WC draws these regardless of gateway.]
   Source: checkout.css `.wc-block-components-radio-control-accordion-option:after{…}`
   and `…__payment-method …accordion-option:last-child:after{border-width:1px}`. */
.gelevb-checkout--kaal #payment-method .wc-block-components-radio-control-accordion-option:after,
.gelevb-checkout--kaal .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:after,
.gelevb-checkout--kaal #payment-method .wc-block-components-radio-control__option:after,
.gelevb-checkout--kaal .wc-block-checkout__payment-method .wc-block-components-radio-control__option:after {
	display: none !important;
	border-width: 0 !important;
}

/* C2.4 — collapse the now-empty padding so no orphan whitespace block remains.
   The accordion option row + its layout still hold a little inset; zero it out.
   [GENERIC]. Source: checkout.css `…__option-layout{padding-bottom:0}` and the
   absolute-positioned input that created the left:16px inset (now hidden). */
.gelevb-checkout--kaal #payment-method .wc-block-components-radio-control__option,
.gelevb-checkout--kaal .wc-block-checkout__payment-method .wc-block-components-radio-control__option,
.gelevb-checkout--kaal #payment-method .wc-block-components-radio-control-accordion-option,
.gelevb-checkout--kaal .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option {
	padding: 0 !important;
	min-height: 0 !important;
}

/* C2.5 — Mollie's expanded accordion CONTENT (where fields would go if a method had any).
   Modern iDEAL has NO issuer dropdown, so this node is expected to be EMPTY and WC's own
   `…accordion-content:empty{display:none}` already collapses it. We force-hide it anyway
   as belt-and-braces, BUT this is the highest-risk spot:
   [TO-RE-VERIFY on staging vs real iDEAL DOM] — if Mollie ever renders REQUIRED fields
   here (it does NOT for plain iDEAL in 8.1.6, but DOES for e.g. Riverty/credit-card
   components), hiding this would break payment. For iDEAL-only it is safe. Re-check the
   live DOM that the accordion-content is empty for iDEAL before trusting this. */
.gelevb-checkout--kaal #payment-method .wc-block-components-radio-control-accordion-content:empty,
.gelevb-checkout--kaal .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content:empty {
	display: none !important;
}

/* C2.6 — belt-and-braces server wrapper, for any pre-hydration flash.
   [GENERIC]. The React app re-renders under #payment-method; this only catches the
   brief server-rendered state before hydration. Harmless if absent. */
.gelevb-checkout--kaal .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__input,
.gelevb-checkout--kaal .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__label {
	display: none !important;
}

/* --------------------------------------------------------------------------
   WENS B (revised 2026-06-04) — static "Gratis verzonden" line.
   Lives in the PATTERN markup, OUTSIDE the checkout block (see order-flow.php), so it
   is NOT scoped under .gelevb-checkout--kaal. Colour/align/size come from block presets
   in the markup; this class only adds breathing room. Purely cosmetic.
   -------------------------------------------------------------------------- */
.gelevb-free-shipping {
	margin-block-start: var(--wp--preset--spacing--sm, 0.75rem);
}

/* --------------------------------------------------------------------------
   NO "Besteloverzicht" IN THE RIGHT COLUMN — DECISION 2026-06-08 (FIX 4, supersedes FIX 3).

STEF'S CALL (the one FIX 3 flagged as "Stef's call"): hide the Woo order-summary ENTIRELY in the
   right column, so it becomes the clean form from the mockup. The price confirmation is carried by our
   OWN live "Totaal" in the LEFT column (gelevb-orderbox__total, server-rendered + driven by pricelist.js).
   That is the whole reason the summary may go: the price echo already exists outside the Woo block.

WHY VISUAL-HIDE, NOT MARKUP-DELETE (cardinal rule — do not break the order flow).
   The order-summary block is NOT removed from the Checkout inner-block set in order-box.php; it stays in
   the DOM. WooCommerce builds the order TOTALS + cart line items from CART STATE (the seeded cart on '/'),
   NOT from whether the summary block is visible. The submit path (StoreApiCheckout → "Plaats bestelling")
   reads cart/totals from the data store, independent of this presentational block. So `display:none` on the
   summary removes ONLY its rendering; subtotal/free-shipping/total stay computed server-side and the order
   submits unchanged. (Confirmed: the rendered homepage HTML has exactly ONE summary block, nested only in
   the single `wp-block-woocommerce-checkout-totals-block` sidebar — there is no second/“boven” summary in
   markup; the "two Besteloverzicht" Stef saw was the hydrated collapsible TITLE row + the expanded CONTENT
   list of that ONE block. Hiding the block kills both.)

SOURCE-VERIFIED selectors (installed WC 10.8.1 build — grepped from
   plugins/woocommerce/assets/client/blocks/checkout.css + the rendered homepage HTML on 2026-06-08):
     .wp-block-woocommerce-checkout-order-summary-block      — server wrapper of the summary block (pre + post hydration)
     .wc-block-components-checkout-order-summary             — the hydrated React summary presentation
   We hide BOTH: the server wrapper (catches the pre-hydration flash) AND the hydrated component (the React
   app re-renders the summary INSIDE `.wc-block-checkout__sidebar`; hitting the component class guarantees the
   title row + content list are both gone whatever the container-size mode). Belt-and-braces, both scoped
   under .gelevb-checkout--kaal so this can NEVER bleed onto a future classic /checkout/ page or the cart.

WHAT WE DO NOT HIDE: the `.wp-block-woocommerce-checkout-totals-block` / `.wc-block-checkout__sidebar`
   wrapper is left untouched. Only the order-SUMMARY inside it is hidden — keeping the surrounding
   totals/layout context intact, the most surgical hide.

DELETE-ON-CHANGE: if Stef ever wants the Woo price echo back, delete this FIX-4 block. If a WC update
   renames the summary classes, re-grep checkout.css / the rendered HTML.
   -------------------------------------------------------------------------- */
.gelevb-checkout--kaal .wp-block-woocommerce-checkout-order-summary-block,
.gelevb-checkout--kaal .wc-block-components-checkout-order-summary {
	display: none !important;
}

/* --------------------------------------------------------------------------
   FIX ROUND 2026-06-05 (FIX 2) — the relaxed, Woo-NATIVE form layout.

Stef relaxed the form spec (D-24) to fit the Woo Checkout block cleanly. The TARGET flow
   is: E-mail / [Voornaam | Achternaam] / [Straat-en-huisnummer full width] / [Postcode | Plaats].

WHAT IS ALREADY NATIVE (no CSS needed, documented so a takeover dev knows it's intentional):
   - Woo's block address form is a flex row: `.wc-block-components-address-form{display:flex;
     flex-wrap:wrap;gap:0 12px}` and every text input gets `flex:1 0 calc(50% - 12px)`
     (source: woocommerce/assets/client/blocks/checkout.css, WC 10.8.1). So fields pair up
     two-per-row automatically. first_name(index 10) + last_name(20) -> "Voornaam | Achternaam".
   - For the NL locale WooCommerce sets postcode priority 65 (BEFORE city 70) and hides `state`
     (source: includes/class-wc-countries.php, NL locale). So postcode renders left of city ->
     "Postcode | Plaats", exactly the mockup order. No reorder hack required.
   - Phone + Address 2 are hidden via the official options (see functions.php FIX 2).

THE ONE THING CSS MUST FIX: because EVERY input is `flex: 1 0 calc(50% - 12px)`, a field that
   ends up ALONE on its row (address_1, now that address_2 is hidden; and the email field in the
   contact step) would render at ~50% width with empty space beside it. We force those lone fields
   to FULL width. Scoped under .gelevb-checkout--kaal so it never bleeds to another checkout.

SOURCE-VERIFIED field-wrapper class: `.wc-block-components-address-form__address_1`
   (woocommerce/assets/client/blocks/checkout.css, WC 10.8.1). The email field lives in the
   contact step wrapper `.wc-block-components-address-form__email` / the contact information block.
   Same delete-on-change discipline: if a 2nd address line is ever re-enabled, drop the address_1
   rule so the pair can sit side-by-side again.
   -------------------------------------------------------------------------- */
.gelevb-checkout--kaal .wc-block-components-address-form__address_1 {
	flex: 1 0 100% !important;   /* street+number on its own full-width row (no stranded 50%) */
	max-width: 100% !important;
}
/* The contact-step email is already in its own block, but belt-and-braces in case it ever shares
   the address grid: keep it full width too. Harmless if the selector is absent. */
.gelevb-checkout--kaal .wc-block-components-address-form__email {
	flex: 1 0 100% !important;
	max-width: 100% !important;
}

/* Q1 (DesignBaas open point) — on very narrow screens let the two-column pairs STACK cleanly
   instead of squeezing. Below ~390px the 50% basis becomes too tight for Dutch labels; allow
   each field to take the full row. Woo's flex-wrap already does most of this; this makes it
   deterministic at our smallest target width. */
@media (max-width: 390px) {
	.gelevb-checkout--kaal .wc-block-components-address-form > * {
		flex: 1 0 100% !important;
		max-width: 100% !important;
	}
}