. */
.woocommerce-checkout .form-row {
display: flex;
flex-direction: column;
margin-bottom: 0.9rem;
}
.woocommerce-checkout .form-row label {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mauve);
margin-bottom: 0.35rem;
}
.woocommerce-checkout .form-row .required { color: var(--wine); text-decoration: none; }
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row .select2-container .select2-selection {
width: 100%;
padding: 0.8rem 0.9rem;
border: 1px solid var(--lijn);
border-radius: 8px;
background: var(--wit);
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--noir);
box-sizing: border-box;
}
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(200, 169, 126, 0.18);
}
/* Country en State worden door selectWoo vervangen door een select2-widget, en
die brengt eigen maten mee die niet met onze padding samengaan:
.select2-selection--single height: 28px box-sizing: border-box
.select2-selection__rendered line-height: 28px padding-left: 8px
Onze regel hierboven zet daar padding: 0.8rem 0.9rem overheen. Met een vaste
hoogte van 28px en border-box blijft er dan nog geen halve pixel contentruimte
over, terwijl de tekst met een line-height van 28px gewoon zijn eigen hoogte
houdt. Die tekst zakt daardoor onder de rand uit. De tekstvelden hebben geen
vaste hoogte en groeien wel met de padding mee, en die klopten daarom wel.
Dus: de vaste hoogte eraf en de tekst laten meelopen met de padding. De
line-height staat bewust op inherit en niet op een getal. Hij komt dan uit
body, waar 1.6 staat, en dat is precies wat de tekstvelden ook krijgen via
de `font: inherit` in base.css. Zo is de widget even hoog als het veld
ernaast, ook als die 1.6 ooit verandert.
De padding-left van select2 moet er ook af, anders staat de tekst 8px verder
naar binnen dan bij de tekstvelden ernaast. De negatieve margin van select2
trok het veld bovendien 4px omhoog ten opzichte van de rij. */
.woocommerce-checkout .form-row .select2-container .select2-selection--single {
height: auto;
margin: 0;
}
.woocommerce-checkout .form-row .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: inherit;
padding-left: 0;
padding-right: 1.4rem;
color: var(--noir);
}
.woocommerce-checkout .form-row .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 100%;
top: 0;
right: 0.55rem;
}
/* Twee velden naast elkaar, zoals .veld-rij.twee in v52. */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
width: calc(50% - 0.45rem);
display: inline-flex;
vertical-align: top;
}
.woocommerce-checkout .form-row-first { margin-right: 0.9rem; }
@media (max-width: 600px) {
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last { width: 100%; margin-right: 0; }
}
/* De koppen boven de blokken, zoals .co-sectie h2. */
.woocommerce-checkout .co-sectie h3,
.woocommerce-checkout #order_review_heading {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: 1.5rem;
color: var(--noir);
margin-bottom: 1rem;
}
/* De verzendmethodes, zoals .keuzelijst en .keuze in v52. */
.woocommerce-checkout #shipping_method,
.tgp-winkelwagen #shipping_method {
list-style: none;
margin: 0;
padding: 0;
}
.woocommerce-checkout #shipping_method li,
.tgp-winkelwagen #shipping_method li {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0;
}
/* De betaalmethodes, zelfde vorm als een verzendkeuze. */
.wc_payment_methods {
list-style: none;
margin: 1.2rem 0 0;
padding: 0;
border-top: 1px solid var(--lijn-zacht);
}
.wc_payment_methods li {
padding: 0.8rem 0;
border-bottom: 1px solid var(--lijn-zacht);
}
.wc_payment_methods label {
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--noir);
cursor: pointer;
}
.wc_payment_methods .payment_box {
font-size: 0.78rem;
color: var(--mauve);
margin-top: 0.5rem;
}
.wc_payment_methods .payment_box p:last-child { margin-bottom: 0; }
/* De verzendregel in de totalen komt uit een
van Woo. */
.samenvatting .woocommerce-shipping-totals,
.samenvatting .woocommerce-shipping-totals th,
.samenvatting .woocommerce-shipping-totals td,
.samenvatting .shop_table {
display: block;
width: 100%;
border: none;
padding: 0;
text-align: left;
}
.samenvatting .woocommerce-shipping-totals {
display: flex;
justify-content: space-between;
gap: 1rem;
font-size: 0.85rem;
padding: 0.5rem 0;
}
.samenvatting .woocommerce-shipping-destination { font-size: 0.72rem; color: var(--mauve); }
/* De winkelwagenpagina leent de opmaak van de checkout. */
.tgp-wagen-aantal {
display: flex;
align-items: center;
gap: 0.8rem;
margin-top: 0.5rem;
}
.tgp-wagen-aantal .quantity input {
width: 4rem;
padding: 0.4rem 0.5rem;
border: 1px solid var(--lijn);
border-radius: 6px;
font-family: var(--font-body);
}
.tgp-wagen-acties {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.8rem;
margin-top: 1.6rem;
}
.tgp-wagen-bijwerken {
background: transparent;
border: 1px solid var(--lijn);
border-radius: 100px;
padding: 0.6rem 1.2rem;
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mauve);
cursor: pointer;
}
.tgp-wagen-bijwerken:hover { border-color: var(--gold); color: var(--wine); }
.wc-proceed-to-checkout { margin-top: 1.2rem; }
.wc-proceed-to-checkout .checkout-button {
display: block;
text-align: center;
text-decoration: none;
background: var(--gold);
color: var(--noir);
border-radius: 8px;
padding: 0.95rem;
font-family: var(--font-body);
font-size: 0.8rem;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.wc-proceed-to-checkout .checkout-button:hover { background: var(--wine); color: var(--cream); }
/* Meldingen van WooCommerce, in de stijl van de site. */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
list-style: none;
border: 1px solid var(--lijn);
border-left: 3px solid var(--gold);
border-radius: 8px;
background: var(--cream);
padding: 0.9rem 1.1rem;
margin: 0 auto 1.4rem;
max-width: 1180px;
font-size: 0.85rem;
}
.woocommerce-error { border-left-color: var(--wine); }
/* ── De bedankpagina ──────────────────────────────────────────────────
Bestond niet in v52. Leent van de ordersamenvatting. */
.co-bedankt {
max-width: 640px;
margin: 0 auto;
padding: 3.5rem 5% 5rem;
text-align: center;
}
.co-bedankt h1 {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: clamp(2rem, 5vw, 3rem);
color: var(--noir);
margin-bottom: 0.8rem;
}
.co-bedankt-lead {
font-size: 0.9rem;
color: var(--mauve);
margin-bottom: 2.2rem;
}
.co-bedankt-kaart { position: static; text-align: left; }
.co-bedankt-kaart .sv-totalen { border-top: none; padding-top: 0; }
.co-bedankt-kaart .sv-regels { margin-top: 1.4rem; }
.co-bedankt-acties { margin-top: 2rem; }
.co-bedankt-acties .pay-knop { display: inline-block; width: auto; padding: 0.9rem 2.4rem; text-decoration: none; }
/* ── Mobiele tikdoelen op 44x44 ──────────────────────────────────────
Zelfde richtlijn en zelfde vorm als het bestaande blok in cart.css.
Alles staat in een mediaquery, dus de desktopweergave verandert niet.
Zie mobiel-audit.md voor de meting per element. */
@media (max-width: 600px) {
.tgp-wagen-aantal .quantity input {
min-height: 44px;
}
.tgp-wagen-bijwerken {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
/* ── Het kortingsveld ────────────────────────────────────────────────
.korting is een grid van 1fr auto: invoerveld naast de knop. Zonder
min-width: 0 mag een grid-item niet kleiner worden dan zijn inhoud, en
dan wint de knop op een smal scherm. Dit is dezelfde ingreep die
.email-signup input in footer.css al had. */
@media (max-width: 600px) {
.korting input {
min-width: 0;
}
}
/* ── 16px op alle invoervelden van een touchscreen ───────────────────
Safari op iOS zoomt bij focus in op elk invoerveld met een lettergrootte
onder 16px, en zoomt daarna niet vanzelf terug. Je staat dan met een
uitvergrote checkout die je zelf moet terugknijpen, bij elk volgend veld
opnieuw. Gemeten op 22 augustus 2026: alle elf velden van de checkout
stonden op 14,4px (0,9rem).
De query is breder dan de gebruikelijke 600px van dit theme. Zoomen doet
iOS op elk formaat, dus ook op een iPad in liggende stand, en daar is
600px te smal voor. `(hover: none) and (pointer: coarse)` is precies de
groep waar het om gaat: apparaten die je aanraakt in plaats van aanwijst.
De 600px blijft ernaast staan voor smalle vensters op een gewone muis, en
voor browsers die de pointer-query niet ondersteunen.
Alleen de lettergrootte gaat omhoog. De velden zijn al 51px hoog, dus de
layout schuift niet. */
@media (max-width: 600px), (hover: none) and (pointer: coarse) {
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row input[type="number"],
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row .select2-container .select2-selection,
.woocommerce-checkout .form-row .select2-container--default .select2-selection--single .select2-selection__rendered,
.veld input,
.veld select,
.korting input,
.checkout_coupon input,
.shipping-calculator-form input,
.shipping-calculator-form select,
.tgp-wagen-aantal .quantity input {
font-size: 16px;
}
/* Het zoekveld in de landen- en provincielijst van select2 staat in een
dropdown die aan hangt, dus buiten .woocommerce-checkout. */
.select2-container .select2-search--dropdown .select2-search__field {
font-size: 16px;
}
}
/* ── De tikdoelen die na de vorige ronde nog over waren ──────────────
Gemeten op de live checkout op 375px, 22 augustus 2026. Zelfde vorm als
de bestaande blokken: wat een eigen box mag hebben wordt hoger, wat in
een lopende zin staat krijgt een onzichtbaar tikvlak via ::before, zodat
de tekst niet uit elkaar geduwd wordt. */
@media (max-width: 600px) {
/* "Click here to enter your code", 164x19,5px. Staat op een eigen regel
in de meldingsbalk, dus die mag gewoon hoger. */
.woocommerce-form-coupon-toggle a.showcoupon,
a.showcoupon {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* De twee links staan midden in een lopende zin boven de knop. Een hogere
box zou de regelafstand van die zin oprekken, dus hier het tikvlak. */
.woocommerce-terms-and-conditions-link,
.woocommerce-privacy-policy-link,
a.restore-item {
position: relative;
}
.woocommerce-terms-and-conditions-link::before,
.woocommerce-privacy-policy-link::before,
a.restore-item::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 44px;
min-width: 44px;
}
/* De vinkjes en de radioknoppen van de betaalmethode zijn 13x13. Een
::before helpt hier niet: een is een vervangen element en toont
geen pseudo-elementen. Dus het vakje zelf groter, en het label eromheen
op 44px. Bij het label werkt dat sowieso beter, want een tik op het
label schakelt het vakje net zo goed. */
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"],
.tgp-winkelwagen input[type="checkbox"] {
width: 20px;
height: 20px;
}
.wc_payment_methods label,
.woocommerce-form__label-for-checkbox,
label[for="ship-to-different-address-checkbox"] {
display: flex;
align-items: center;
gap: 0.5rem;
min-height: 44px;
}
/* De tekst naast een vinkje mag afbreken, het vakje niet krimpen. */
.woocommerce-form__label-for-checkbox input[type="checkbox"],
.wc_payment_methods label input {
flex: 0 0 auto;
}
.woocommerce-terms-and-conditions-checkbox-text {
flex: 1 1 auto;
}
}
/* ── Het kortingsformulier van WooCommerce ───────────────────────────
Klik je "Click here to enter your code", dan schuift .checkout_coupon
open. Dat is Woo's eigen formulier en het theme raakte het nooit aan:
invoerveld en knop stonden van rand tot rand zonder marge, en de knop was
de kale grijze van 30px hoog. Het theme had wel opmaak voor .korting,
maar die klasse rendert op deze pagina niet. Hier krijgt het formulier
van Woo dezelfde opmaak als .korting. */
.woocommerce-form-coupon-toggle,
form.checkout_coupon {
padding-left: 1.4rem;
padding-right: 1.4rem;
box-sizing: border-box;
}
form.checkout_coupon {
margin: 0 0 1.6rem;
}
form.checkout_coupon p {
margin: 0 0 0.6rem;
}
form.checkout_coupon .form-row {
width: 100%;
margin: 0 0 0.6rem;
padding: 0;
float: none;
}
form.checkout_coupon input[type="text"] {
width: 100%;
padding: 0.8rem 0.9rem;
font-family: var(--font-body);
font-weight: 300;
font-size: 0.85rem;
color: var(--noir);
background: var(--wit);
border: 1px solid var(--lijn);
border-radius: 8px;
box-sizing: border-box;
}
form.checkout_coupon input[type="text"]::placeholder { color: var(--dusty); }
form.checkout_coupon input[type="text"]:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(200, 169, 126, 0.18);
}
form.checkout_coupon button {
padding: 0 1.4rem;
min-height: 44px;
background: transparent;
border: 1px solid var(--mauve);
color: var(--mauve);
border-radius: 8px;
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.25s;
}
form.checkout_coupon button:hover { background: var(--mauve); color: var(--cream); }
/* Op een scherm met ruimte staan veld en knop naast elkaar, net als
.korting. Daaronder onder elkaar, want 375px is te smal voor allebei. */
@media (min-width: 601px) {
form.checkout_coupon {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.6rem;
align-items: start;
}
form.checkout_coupon p:first-of-type { grid-column: 1 / -1; }
form.checkout_coupon .form-row { margin-bottom: 0; }
form.checkout_coupon input[type="text"] { min-width: 0; }
}