/*
 * Winkelwagen, afrekenen, bedankpagina (+ gedeelde basis voor Mijn account)
 * in de stijl van ontwerp G (verbeterplan/ontwerpen/g-complete-webshop.html).
 * Verbeterplan: VM-17, SHOP-13, VER-03 (knoptekst/voorwaarden staan in
 * functions.php; hier alleen opmaak).
 *
 * - Laadt ná design-tokens.css (inc/enqueue-winkelwagen-afrekenen.php,
 *   prioriteit 1000) en alleen op winkelwagen, afrekenen (incl.
 *   order-received) en Mijn account. Het oude child-theme style.css laadt niet
 *   meer (inc/g-oude-stijl-uit.php), dus alles wat deze pagina's nodig hebben
 *   staat hier.
 * - Uitsluitend design-tokens (geen losse hexcodes). Selectors zijn
 *   gescoped op de bodyclasses en zwaar genoeg om woocommerce.css,
 *   woocommerce-smallscreen.css en het moederthema te verslaan; !important
 *   alleen waar WooCommerce zelf !important gebruikt (staat erbij).
 * - Mobile-first; breekpunten 640px (regels naast elkaar) en 1024px
 *   (twee kolommen met samenvatting rechts).
 *
 * Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
 */

/* ==========================================================================
   0. Pagina: breedte gelijk aan de header (1280px), kop in G-maat
   Hello Elementor beperkt .site-main tot 500/600/800/1140px per breekpunt;
   voor een afrekenpagina met twee kolommen is dat te smal.
   ========================================================================== */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) {
  background-color: var(--kleur-pagina);
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main.site-main {
  max-width: var(--cs-header-max-width, 1280px);
  width: 100%;
  margin-inline: auto;
  padding-inline: 16px;
  padding-bottom: clamp(40px, 5vw, 72px);
  box-sizing: border-box;
}

@media (min-width: 576px) {
  body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main.site-main {
    padding-inline: 20px;
  }
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .page-header .entry-title {
  max-width: none;
  padding-inline: 0;
  margin: clamp(20px, 3vw, 32px) 0 clamp(16px, 2vw, 24px);
  font-family: var(--font-koppen);
  font-size: clamp(30px, 2vw + 18px, 44px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--kleur-inkt);
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .page-content {
  font-family: var(--font-tekst);
  color: var(--kleur-inkt);
}

/* ==========================================================================
   1. Knoppen (ontwerp G .knop / .knop-rand)
   ========================================================================== */
/* Primair: groen, pil, vet. */
body.woocommerce-cart .woocommerce a.checkout-button,
body.woocommerce-checkout .woocommerce button#place_order,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce .return-to-shop a.button,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button.codex-knop:not(.codex-knop--rand),
body.woocommerce-account .woocommerce button.woocommerce-form-login__submit,
body.woocommerce-account .woocommerce form button.woocommerce-Button,
body.woocommerce-account .woocommerce form.lost_reset_password button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  height: auto;
  padding: 12px 26px;
  border: 0;
  border-radius: var(--radius-rond);
  background: var(--kleur-groen);
  background-color: var(--kleur-groen);
  color: var(--kleur-wit);
  font-family: var(--font-tekst);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow: visible;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s ease-out, transform 0.15s ease-out;
}

body.woocommerce-cart .woocommerce a.checkout-button:hover,
body.woocommerce-cart .woocommerce a.checkout-button:focus,
body.woocommerce-checkout .woocommerce button#place_order:hover,
body.woocommerce-checkout .woocommerce button#place_order:focus,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce .return-to-shop a.button:hover,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce .return-to-shop a.button:focus,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button.codex-knop:not(.codex-knop--rand):hover,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button.codex-knop:not(.codex-knop--rand):focus,
body.woocommerce-account .woocommerce button.woocommerce-form-login__submit:hover,
body.woocommerce-account .woocommerce button.woocommerce-form-login__submit:focus,
body.woocommerce-account .woocommerce form button.woocommerce-Button:hover,
body.woocommerce-account .woocommerce form button.woocommerce-Button:focus,
body.woocommerce-account .woocommerce form.lost_reset_password button.button:hover,
body.woocommerce-account .woocommerce form.lost_reset_password button.button:focus {
  background: var(--kleur-groen-donker);
  background-color: var(--kleur-groen-donker);
  color: var(--kleur-wit);
  border-color: transparent;
  box-shadow: none;
}

body.woocommerce-cart .woocommerce a.checkout-button:active,
body.woocommerce-checkout .woocommerce button#place_order:active,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce .return-to-shop a.button:active {
  transform: scale(0.98);
}

/* Geen pijltje of icoonfont achter knopteksten. */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button::after,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button::before {
  content: none;
}

/* Secundair: omlijnd in inkt (G .knop-rand). */
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce button[name="apply_coupon"],
body.woocommerce-cart .woocommerce button[name="update_cart"],
body.woocommerce-cart .woocommerce button[name="calc_shipping"],
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce :is(.woocommerce-message, .woocommerce-info) a.button,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button.codex-knop--rand,
body.woocommerce-account .woocommerce table a.button,
body.woocommerce-account .woocommerce .woocommerce-pagination .button,
body.woocommerce-account .woocommerce .order-again a.button,
body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce .order-actions-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  height: auto;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--radius-rond);
  background: transparent;
  background-color: transparent;
  color: var(--kleur-inkt);
  box-shadow: inset 0 0 0 2px var(--kleur-inkt);
  font-family: var(--font-tekst);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce button[name="apply_coupon"]:hover,
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce button[name="apply_coupon"]:focus,
body.woocommerce-cart .woocommerce button[name="update_cart"]:hover,
body.woocommerce-cart .woocommerce button[name="update_cart"]:focus,
body.woocommerce-cart .woocommerce button[name="calc_shipping"]:hover,
body.woocommerce-cart .woocommerce button[name="calc_shipping"]:focus,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce :is(.woocommerce-message, .woocommerce-info) a.button:hover,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce :is(.woocommerce-message, .woocommerce-info) a.button:focus,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button.codex-knop--rand:hover,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button.codex-knop--rand:focus,
body.woocommerce-account .woocommerce table a.button:hover,
body.woocommerce-account .woocommerce table a.button:focus,
body.woocommerce-account .woocommerce .woocommerce-pagination .button:hover,
body.woocommerce-account .woocommerce .order-again a.button:hover,
body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce .order-actions-button:hover {
  background: var(--kleur-vlak);
  background-color: var(--kleur-vlak);
  color: var(--kleur-inkt);
  box-shadow: inset 0 0 0 2px var(--kleur-inkt);
}

/* Uitgeschakelde secundaire knop (bv. "Winkelwagen bijwerken" vóór een wijziging). */
body.woocommerce-cart .woocommerce button[name="update_cart"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: transparent;
}

/* Focus: ring in het accent (amber/huid) met een binnenring in inkt, net als
   toegankelijkheid.css. De binnenring zorgt dat de focus in elk palet
   zichtbaar is (huid op linnen haalt alleen geen 3:1). Zwaar gemaakt met
   :not(#\#), omdat de knoppen hierboven hun eigen box-shadow hebben. */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account):not(#\#) .woocommerce :is(a, button, input, select, textarea, summary):focus-visible,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account):not(#\#) .select2-container .select2-selection:focus-visible {
  outline: 3px solid var(--kleur-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--kleur-inkt);
}

/* design-tokens.css (sectie 4, oude style.css-overrides) zet op deze twee
   knoppen `box-shadow: none !important`, ook bij :focus. Alleen de
   focus-binnenring hier terugzetten; daarvoor is !important nodig. */
body.woocommerce-cart .woocommerce a.checkout-button.button.alt.wc-forward:focus-visible,
body.woocommerce-checkout .woocommerce button#place_order:focus-visible {
  box-shadow: 0 0 0 2px var(--kleur-inkt) !important;
}

/* Omlijnde knoppen: eigen rand behouden tijdens focus. */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account):not(#\#) .woocommerce :is(button[name="apply_coupon"], button[name="update_cart"], button[name="calc_shipping"], .woocommerce-message a.button, .woocommerce-info a.button, a.button.codex-knop--rand, table a.button, .order-actions-button, .woocommerce-pagination .button, .order-again a.button):focus-visible {
  box-shadow: inset 0 0 0 2px var(--kleur-inkt), 0 0 0 2px var(--kleur-inkt);
}

/* ==========================================================================
   2. Velden: labels boven, 48px hoog, zichtbare rand, amber focus-ring
   ========================================================================== */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row {
  margin: 0 0 16px;
  padding: 0;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row label:not(.checkbox):not(.woocommerce-form__label-for-checkbox) {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-tekst);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--kleur-inkt);
  text-transform: none;
  letter-spacing: normal;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row .required {
  color: var(--kleur-sale);
  text-decoration: none;
  border: 0;
  font-weight: 700;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row .optional {
  color: var(--kleur-zacht);
  font-weight: 400;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row :is(input.input-text, textarea, select),
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce #coupon_code {
  display: block;
  width: 100%;
  min-height: 48px;
  height: 48px;
  margin: 0;
  padding: 0 14px;
  box-sizing: border-box;
  border: 1px solid var(--kleur-veldrand);
  border-radius: var(--radius-klein);
  background: var(--kleur-wit);
  color: var(--kleur-inkt);
  font-family: var(--font-tekst);
  font-size: 16px; /* 16px voorkomt inzoomen op iOS */
  line-height: 1.4;
  box-shadow: none;
  transition: border-color 0.15s ease-out;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row textarea {
  height: auto;
  min-height: 104px;
  padding: 12px 14px;
  resize: vertical;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row :is(input.input-text, textarea, select):hover,
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce #coupon_code:hover {
  border-color: var(--kleur-inkt);
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row :is(input.input-text, textarea, select):focus,
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce #coupon_code:focus {
  border-color: var(--kleur-groen);
  outline: 3px solid var(--kleur-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px var(--kleur-groen);
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row ::placeholder {
  color: var(--kleur-zacht);
  opacity: 1;
}

/* Foutstatus na validatie (WooCommerce zet .woocommerce-invalid). */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row.woocommerce-invalid :is(input.input-text, select, textarea),
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row.woocommerce-invalid .select2-container .select2-selection {
  border-color: var(--kleur-sale);
  border-width: 2px;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce form .form-row.woocommerce-invalid label {
  color: var(--kleur-inkt);
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce .checkout-inline-error-message {
  margin: 6px 0 0;
  color: var(--kleur-sale);
  font-size: 14px;
  font-weight: 600;
}

/* Land-selectie (select2) in dezelfde vorm als de velden. De keuzelijst
   (.select2-dropdown) hangt aan <body>, vandaar de body-scope. */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .select2-container--default .select2-selection--single {
  height: 48px;
  border: 1px solid var(--kleur-veldrand);
  border-radius: var(--radius-klein);
  background: var(--kleur-wit);
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 40px 0 14px;
  line-height: 46px;
  color: var(--kleur-inkt);
  font-size: 16px;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 1px;
  right: 10px;
  height: 46px;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-top-color: var(--kleur-inkt);
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .select2-container--default:is(.select2-container--focus, .select2-container--open) .select2-selection--single {
  border-color: var(--kleur-groen);
  outline: 3px solid var(--kleur-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px var(--kleur-groen);
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .select2-dropdown {
  border: 1px solid var(--kleur-veldrand);
  border-radius: var(--radius-klein);
  overflow: hidden;
  font-family: var(--font-tekst);
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .select2-container--default .select2-search--dropdown .select2-search__field {
  min-height: 44px;
  border: 1px solid var(--kleur-veldrand);
  border-radius: var(--radius-klein);
  padding: 0 12px;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .select2-results__option {
  padding: 10px 14px;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .select2-container--default .select2-results__option--highlighted[aria-selected],
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--kleur-groen);
  color: var(--kleur-wit);
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .select2-container--default .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
  background: var(--kleur-groen-licht);
  color: var(--kleur-inkt);
}

/* Vinkjes en keuzerondjes: groot genoeg, in groen. */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce :is(input[type="radio"], input[type="checkbox"]) {
  accent-color: var(--kleur-groen);
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: none;
}

/* ==========================================================================
   3. Meldingen (bovenaan winkelwagen/afrekenen/account)
   ========================================================================== */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 0 20px;
  padding: 14px 18px;
  border: 0;
  border-left: 4px solid var(--kleur-groen);
  border-radius: var(--radius);
  background: var(--kleur-wit);
  color: var(--kleur-inkt);
  font-size: 15.5px;
  line-height: 1.5;
  box-shadow: none;
  list-style: none;
  outline: 0;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce .woocommerce-message {
  background: var(--kleur-groen-licht);
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce .woocommerce-error {
  display: block;
  border: 1px solid var(--kleur-lijn);
  border-left: 4px solid var(--kleur-sale);
  background: var(--kleur-wit);
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce .woocommerce-error li {
  margin: 0;
  padding: 2px 0;
  list-style: none;
}

/* ::before = icoonfont van WooCommerce, ::after = clearfix; in een flexbox
   worden die anders lege flex-items die de inhoud verschuiven. */
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before,
body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::after {
  content: none;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) {
  color: var(--kleur-groen-donker);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* "Bekijk winkelwagen" in de toegevoegd-melding is op de winkelwagen zelf overbodig. */
body.woocommerce-cart .woocommerce .woocommerce-message a.button.wc-forward {
  display: none;
}

/* ==========================================================================
   4. WINKELWAGEN — indeling: regels links, sticky samenvatting rechts
   ========================================================================== */
@media (min-width: 1024px) {
  body.woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    grid-template-areas:
      "melding melding"
      "regels samenvatting";
    column-gap: 40px;
    align-items: start;
  }

  body.woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) > .woocommerce-notices-wrapper {
    grid-area: melding;
  }

  body.woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) > .woocommerce-cart-form {
    grid-area: regels;
  }

  body.woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) > .cart-collaterals {
    grid-area: samenvatting;
    position: sticky;
    top: 24px;
  }
}

body.woocommerce-cart .woocommerce .cart-collaterals {
  width: 100%;
  margin-top: 24px;
}

@media (min-width: 1024px) {
  body.woocommerce-cart .woocommerce .cart-collaterals {
    margin-top: 0;
  }
}

/* --- 4a. Gratis-verzending-voortgang --- */
body.woocommerce-cart .codex-gratis-verzending {
  margin: 0 0 8px;
  padding: 14px 16px 16px;
  border-radius: var(--radius);
  background: var(--kleur-amber-licht);
}

body.woocommerce-cart .codex-gratis-verzending.is-gehaald {
  background: var(--kleur-groen-licht);
}

body.woocommerce-cart .codex-gratis-verzending__tekst {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 10px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--kleur-inkt);
}

body.woocommerce-cart .codex-gratis-verzending__tekst svg {
  flex: none;
  margin-top: 1px;
  color: var(--kleur-groen);
}

body.woocommerce-cart .codex-gratis-verzending__tekst strong {
  font-weight: 700;
}

body.woocommerce-cart .codex-gratis-verzending__sub {
  color: var(--kleur-zacht);
  font-size: 14.5px;
}

body.woocommerce-cart .codex-gratis-verzending__balk {
  height: 8px;
  border-radius: var(--radius-rond);
  background: var(--kleur-wit);
  overflow: hidden;
}

body.woocommerce-cart .codex-gratis-verzending__balk span {
  display: block;
  height: 100%;
  min-width: 8px;
  max-width: 100%;
  border-radius: var(--radius-rond);
  background: var(--kleur-groen);
}

/* --- 4b. Tabel → productregels (geen tabelopmaak meer) --- */
body.woocommerce-cart .woocommerce table.shop_table.cart {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-collapse: separate;
  background: none;
}

body.woocommerce-cart .woocommerce table.shop_table.cart thead {
  /* Visueel verborgen, blijft beschikbaar voor schermlezers. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

body.woocommerce-cart .woocommerce table.shop_table.cart tbody {
  display: block;
}

body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  grid-template-areas:
    "foto naam verwijder"
    "foto prijs prijs"
    "foto aantal subtotaal";
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--kleur-lijn);
  background: none;
}

body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item td {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  text-align: left !important; /* woocommerce-smallscreen.css zet text-align:right !important */
  line-height: 1.4;
  min-width: 0;
}

body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item td::before {
  content: none;
  display: none;
}

body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item:hover > td,
body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item:nth-child(n) > td {
  background: none;
}

/* Foto op een vlak-tegel (G .kaart-beeld). Ook op mobiel zichtbaar
   (woocommerce-smallscreen.css verbergt .product-thumbnail standaard). */
body.woocommerce-cart:not(#\#) .woocommerce table.shop_table.cart tr.cart_item td.product-thumbnail {
  grid-area: foto;
  display: block;
  width: auto;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-thumbnail a {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background: var(--kleur-vlak);
  overflow: hidden;
}

body.woocommerce-cart:not(#\#) .woocommerce table.shop_table.cart td.product-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 10%;
  box-sizing: border-box;
  object-fit: contain;
  mix-blend-mode: multiply;
  box-shadow: none;
}

body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item td.product-name {
  grid-area: naam;
  font-size: 16px;
  font-weight: 700;
  color: var(--kleur-inkt);
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-name a {
  color: var(--kleur-inkt);
  text-decoration: none;
  overflow-wrap: anywhere;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-name a:hover {
  color: var(--kleur-groen-donker);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-name .codex-regel-inhoud {
  display: block;
  margin-top: 2px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--kleur-zacht);
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-name :is(dl.variation, .backorder_notification) {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--kleur-zacht);
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-name dl.variation :is(dt, dd, p) {
  display: inline;
  margin: 0;
  padding: 0;
  font-weight: 400;
}

body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item td.product-price {
  grid-area: prijs;
  font-size: 14.5px;
  color: var(--kleur-zacht);
}

body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item td.product-price::after {
  content: " per stuk";
}

body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item td.product-quantity {
  grid-area: aantal;
  align-self: center;
  margin-top: 8px;
}

body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item td.product-subtotal {
  grid-area: subtotaal;
  align-self: center;
  margin-top: 8px;
  text-align: right !important; /* zie boven */
  font-size: 17px;
  font-weight: 800;
  color: var(--kleur-inkt);
  white-space: nowrap;
}

body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item td.product-remove {
  grid-area: verwijder;
  justify-self: end;
}

/* Verwijderen: op mobiel alleen het icoon (44×44), vanaf 640px met tekst. */
body.woocommerce-cart .woocommerce table.shop_table.cart td.product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  margin: -10px -10px 0 0;
  padding: 0;
  border-radius: var(--radius-rond);
  background: transparent;
  color: var(--kleur-zacht) !important; /* woocommerce.css: color:var(--wc-red) !important */
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-remove a.remove:hover,
body.woocommerce-cart .woocommerce table.shop_table.cart td.product-remove a.remove:focus-visible {
  background: var(--kleur-vlak);
  color: var(--kleur-sale) !important; /* zie boven */
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.product-remove .codex-verwijder-tekst {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 640px) {
  body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item {
    grid-template-columns: 104px minmax(0, 1fr) auto minmax(88px, auto);
    grid-template-areas:
      "foto naam aantal subtotaal"
      "foto prijs aantal subtotaal"
      "foto verwijder aantal subtotaal";
    grid-template-rows: auto auto 1fr;
    column-gap: 20px;
    padding: 20px 0;
  }

  body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item td.product-name {
    font-size: 17px;
  }

  body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item :is(td.product-quantity, td.product-subtotal) {
    align-self: start;
    margin-top: 0;
  }

  body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item td.product-subtotal {
    line-height: 48px; /* op één lijn met het midden van de stepper */
  }

  body.woocommerce-cart .woocommerce table.shop_table.cart tr.cart_item td.product-remove {
    justify-self: start;
    align-self: end;
  }

  body.woocommerce-cart .woocommerce table.shop_table.cart td.product-remove a.remove {
    width: auto;
    margin: 6px 0 0 -12px;
    padding: 0 12px;
  }

  body.woocommerce-cart .woocommerce table.shop_table.cart td.product-remove .codex-verwijder-tekst {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
  }
}

/* --- 4c. Aantal: stepper (JS) of gewoon getalveld (zonder JS) --- */
body.woocommerce-cart .woocommerce table.shop_table.cart .quantity {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

body.woocommerce-cart .woocommerce table.shop_table.cart .quantity input.qty {
  width: 72px;
  height: 48px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--kleur-veldrand);
  border-radius: var(--radius-klein);
  background: var(--kleur-wit);
  color: var(--kleur-inkt);
  font-family: var(--font-tekst);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

body.woocommerce-cart .woocommerce table.shop_table.cart .quantity.codex-stepper {
  height: 48px;
  padding: 1px;
  box-sizing: border-box;
  border: 1px solid var(--kleur-veldrand);
  border-radius: var(--radius-rond);
  background: var(--kleur-wit);
}

body.woocommerce-cart .woocommerce table.shop_table.cart .quantity.codex-stepper input.qty {
  width: 36px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

body.woocommerce-cart .woocommerce table.shop_table.cart .quantity.codex-stepper input.qty::-webkit-inner-spin-button,
body.woocommerce-cart .woocommerce table.shop_table.cart .quantity.codex-stepper input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

body.woocommerce-cart .woocommerce table.shop_table.cart .quantity.codex-stepper input.qty:focus-visible {
  outline: 3px solid var(--kleur-focus);
  outline-offset: 0;
}

body.woocommerce-cart .woocommerce .quantity.codex-stepper button.codex-stap {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-rond);
  background: transparent;
  color: var(--kleur-inkt);
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}

body.woocommerce-cart .woocommerce .quantity.codex-stepper button.codex-stap:hover,
body.woocommerce-cart .woocommerce .quantity.codex-stepper button.codex-stap:focus {
  background: var(--kleur-vlak);
  color: var(--kleur-inkt);
  border: 0;
}

body.woocommerce-cart .woocommerce .quantity.codex-stepper button.codex-stap[aria-disabled="true"] {
  color: var(--kleur-veldrand);
  background: transparent;
  cursor: not-allowed;
}

/* --- 4d. Onder de regels: kortingscode (inklapbaar) + bijwerken --- */
body.woocommerce-cart .woocommerce table.shop_table.cart tbody > tr:not(.cart_item) {
  display: block;
  background: none;
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 16px 0 0;
  border: 0;
  background: none;
  text-align: left !important; /* zie 4b */
}

body.woocommerce-cart .woocommerce table.shop_table.cart td.actions::before {
  content: none;
}

/* De knop die het kortingsveld open/dicht klapt (winkelwagen-afrekenen.js). */
body.woocommerce-cart .woocommerce-cart-form button.codex-toon-waardebon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--kleur-groen-donker);
  font-family: var(--font-tekst);
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none;
  cursor: pointer;
}

body.woocommerce-cart .woocommerce-cart-form button.codex-toon-waardebon:hover,
body.woocommerce-cart .woocommerce-cart-form button.codex-toon-waardebon:focus {
  background: none;
  color: var(--kleur-inkt);
  border: 0;
}

body.woocommerce-cart .woocommerce-cart-form button.codex-toon-waardebon svg {
  transition: transform 0.15s ease-out;
}

body.woocommerce-cart .woocommerce-cart-form button.codex-toon-waardebon[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

body.woocommerce-cart:not(#\#) .woocommerce table.shop_table.cart td.actions .coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1 1 100%;
  max-width: 560px;
  float: none;
  margin: 0;
  padding: 0;
}

body.woocommerce-cart:not(#\#) .woocommerce table.shop_table.cart td.actions .coupon #coupon_code {
  flex: 1 1 220px;
  width: auto;
  float: none;
  margin: 0;
}

body.woocommerce-cart:not(#\#) .woocommerce table.shop_table.cart td.actions .coupon button[name="apply_coupon"] {
  flex: 0 0 auto;
  min-height: 48px;
  float: none;
  width: auto;
}

/* Ingeklapt (klasse van het script; zonder JS blijft het veld zichtbaar). */
body.woocommerce-cart:not(#\#) .woocommerce table.shop_table.cart td.actions .coupon.codex-ingeklapt {
  display: none;
}

body.woocommerce-cart:not(#\#) .woocommerce table.shop_table.cart td.actions button[name="update_cart"] {
  display: inline-flex;
  width: auto;
  float: none;
  margin: 0 0 0 auto;
}

/* Met JS werkt de winkelwagen zichzelf bij na een wijziging in het aantal;
   de knop blijft in de DOM (het script klikt hem), maar hoeft niet zichtbaar. */
body.woocommerce-cart:not(#\#) .woocommerce .woocommerce-cart-form.codex-automatisch-bijwerken table.shop_table.cart td.actions button[name="update_cart"] {
  display: none;
}

@media (max-width: 479px) {
  body.woocommerce-cart:not(#\#) .woocommerce table.shop_table.cart td.actions .coupon :is(#coupon_code, button[name="apply_coupon"]) {
    flex: 1 1 100%;
    width: 100%;
  }

  body.woocommerce-cart:not(#\#) .woocommerce table.shop_table.cart td.actions button[name="update_cart"] {
    width: 100%;
    margin: 0;
  }
}

/* --- 4e. Samenvatting (cart_totals) --- */
body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
  padding: clamp(20px, 2.4vw, 28px);
  box-sizing: border-box;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  background: var(--kleur-wit);
}

body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals > h2 {
  margin: 0 0 8px;
  font-family: var(--font-koppen);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--kleur-inkt);
}

/* Gedeelde opmaak van de totalenrijen: winkelwagen-samenvatting én
   besteloverzicht op de afrekenpagina. */
body.woocommerce-cart .woocommerce .cart_totals table.shop_table,
body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

body.woocommerce-cart .woocommerce .cart_totals table.shop_table :is(tbody, tfoot),
body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table :is(tbody, tfoot) {
  display: block;
}

body.woocommerce-cart .woocommerce .cart_totals table.shop_table tr,
body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot tr {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--kleur-lijn);
  background: none;
}

body.woocommerce-cart .woocommerce .cart_totals table.shop_table :is(th, td),
body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table :is(th, td) {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--kleur-inkt);
  vertical-align: baseline;
}

body.woocommerce-cart .woocommerce .cart_totals table.shop_table th,
body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot th {
  font-weight: 500;
  color: var(--kleur-zacht);
  text-align: left;
}

body.woocommerce-cart .woocommerce .cart_totals table.shop_table td,
body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot td {
  flex: 1 1 auto;
  text-align: right !important; /* woocommerce-smallscreen.css */
  font-weight: 600;
}

body.woocommerce-cart .woocommerce .cart_totals table.shop_table td::before,
body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table td::before {
  content: none;
  display: none;
}

/* woocommerce-smallscreen.css verbergt th in responsive tabellen. */
body.woocommerce-cart .woocommerce .cart_totals table.shop_table_responsive tbody th {
  display: block;
}

body.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.order-total,
body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total {
  padding-top: 16px;
  border-bottom: 0;
}

body.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.order-total :is(th, td),
body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.order-total :is(th, td) {
  font-size: 20px;
  font-weight: 800;
  color: var(--kleur-inkt);
}

body.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.order-total td strong,
body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.order-total td strong {
  font-weight: 800;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce tr.order-total small.includes_tax {
  display: block;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--kleur-zacht);
}

/* Korting (coupon-rij) in groen-donker, met de verwijderlink klein ernaast. */
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce tr.cart-discount td {
  color: var(--kleur-groen-donker);
}

body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce tr.cart-discount a.woocommerce-remove-coupon {
  display: inline-block;
  margin-left: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--kleur-zacht);
}

/* --- 4f. Verzendkeuze als keuzetegels (winkelwagen + afrekenen) --- */
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce ul#shipping_method {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce ul#shipping_method li {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.45;
  text-indent: 0;
}

/* Meerdere methoden: tegels. */
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce ul#shipping_method li:has(> input[type="radio"]) {
  border: 2px solid var(--kleur-lijn);
  border-radius: var(--radius);
  background: var(--kleur-wit);
  transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce ul#shipping_method li:has(> input[type="radio"]):hover {
  border-color: var(--kleur-veldrand);
}

body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce ul#shipping_method li:has(> input[type="radio"]:checked) {
  border-color: var(--kleur-groen);
  background: var(--kleur-groen-licht);
}

body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce ul#shipping_method li > input[type="radio"] {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--kleur-groen);
  cursor: pointer;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce ul#shipping_method li > input[type="radio"] + label {
  display: block;
  min-height: 44px;
  padding: 12px 14px 12px 44px;
  box-sizing: border-box;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--kleur-inkt);
  cursor: pointer;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce ul#shipping_method li .amount {
  font-weight: 700;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce ul#shipping_method li .shipping-method-description {
  margin: -8px 0 0;
  padding: 0 14px 12px 44px;
  font-size: 14px;
  font-weight: 400;
  color: var(--kleur-zacht);
}

/* Eén methode (verborgen input): gewoon tekst; "Gratis verzending" in groen. */
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce ul#shipping_method li:has(> input[type="hidden"]) {
  text-align: right;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce ul#shipping_method li > input[type="hidden"] + label {
  display: inline;
  padding: 0;
  font-weight: 600;
}

body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce ul#shipping_method li > input[value^="free_shipping"] + label {
  color: var(--kleur-groen-donker);
  font-weight: 700;
}

/* Rij "Verzending" met tegels: label boven, tegels over de volle breedte. */
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce tr.woocommerce-shipping-totals:has(input[type="radio"]) td {
  flex-basis: 100%;
  text-align: left !important; /* woocommerce-smallscreen.css */
  margin-top: 6px;
}

/* Verzendbestemming + rekenhulp (alleen winkelwagen). */
body.woocommerce-cart .woocommerce .cart_totals .woocommerce-shipping-destination {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--kleur-zacht);
}

body.woocommerce-cart .woocommerce .cart_totals form.woocommerce-shipping-calculator {
  margin: 0;
  text-align: inherit;
}

body.woocommerce-cart .woocommerce .cart_totals a.shipping-calculator-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--kleur-groen-donker);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.woocommerce-cart .woocommerce .cart_totals a.shipping-calculator-button::after {
  content: none;
}

body.woocommerce-cart .woocommerce .cart_totals .shipping-calculator-form {
  margin-top: 8px;
  text-align: left;
}

body.woocommerce-cart .woocommerce .cart_totals .shipping-calculator-form .form-row {
  margin-bottom: 12px;
}

/* --- 4g. Knop + punten onder de samenvatting --- */
body.woocommerce-cart .woocommerce .cart_totals .wc-proceed-to-checkout {
  padding: 16px 0 0;
}

body.woocommerce-cart .woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  width: 100%;
  min-height: 54px;
  margin: 0;
  font-size: 17px;
  box-sizing: border-box;
}

body.woocommerce-cart .codex-samenvatting-punten {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  color: var(--kleur-inkt);
}

body.woocommerce-cart .codex-samenvatting-punten li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

body.woocommerce-cart .codex-samenvatting-punten svg {
  flex: none;
  color: var(--kleur-groen);
}

body.woocommerce-cart .codex-samenvatting-punten a {
  color: var(--kleur-groen-donker);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Cross-sells (als die ooit zijn ingesteld): onder de samenvatting, zonder float. */
body.woocommerce-cart .woocommerce .cart-collaterals .cross-sells {
  float: none;
  width: 100%;
  margin-top: 24px;
}

/* ==========================================================================
   5. LEGE WINKELWAGEN (G .leeg)
   ========================================================================== */
body.woocommerce-cart .woocommerce:has(> .wc-empty-cart-message) {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 720px;
  padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 40px);
  box-sizing: border-box;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  background: var(--kleur-wit);
  text-align: center;
}

body.woocommerce-cart .woocommerce:has(> .wc-empty-cart-message) > .woocommerce-notices-wrapper {
  justify-self: stretch;
  text-align: left;
}

body.woocommerce-cart .woocommerce:has(> .wc-empty-cart-message) > .woocommerce-notices-wrapper:empty {
  display: none;
}

body.woocommerce-cart .woocommerce .wc-empty-cart-message {
  display: grid;
  justify-items: center;
  gap: 16px;
}

/* Winkelwagen-icoon boven de tekst (mask = kleur uit het token). */
body.woocommerce-cart .woocommerce .wc-empty-cart-message::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-rond);
  background:
    var(--kleur-groen)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6'/%3E%3Ccircle cx='10' cy='20.5' r='1.3'/%3E%3Ccircle cx='17' cy='20.5' r='1.3'/%3E%3C/svg%3E")
    center / 30px no-repeat;
}

body.woocommerce-cart .woocommerce .wc-empty-cart-message .cart-empty.woocommerce-info {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-koppen);
  font-size: clamp(20px, 1vw + 16px, 24px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--kleur-inkt);
  text-align: center;
}

body.woocommerce-cart .woocommerce .codex-leeg-uitleg {
  max-width: 44ch;
  margin: 0;
  color: var(--kleur-zacht);
  font-size: 16px;
}

body.woocommerce-cart .woocommerce p.return-to-shop {
  margin: 8px 0 0;
}

/* ==========================================================================
   6. AFREKENEN — kortingscode bovenaan
   WA-01: GEEN display-regel op <form class="checkout_coupon">. WooCommerce
   zet daar inline display:none en togglet dat met slideToggle; een
   display-regel hier zou die overschrijven (veld permanent open, link doet
   niets). De indeling staat daarom op de kindelementen.
   ========================================================================== */
body.woocommerce-checkout .woocommerce .woocommerce-form-coupon-toggle .woocommerce-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 6px 16px;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  background: var(--kleur-wit);
}

body.woocommerce-checkout .woocommerce .woocommerce-form-coupon-toggle .woocommerce-info::before {
  content: "";
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  position: static;
  background-color: var(--kleur-groen);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.woocommerce-checkout .woocommerce a.showcoupon {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--kleur-groen-donker);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.woocommerce-checkout .woocommerce a.showcoupon:hover {
  color: var(--kleur-inkt);
}

body.woocommerce-checkout .woocommerce form.checkout_coupon.woocommerce-form-coupon {
  width: 100%;
  max-width: 640px;
  float: none;
  margin: 0 0 24px;
  padding: 16px;
  box-sizing: border-box;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  background: var(--kleur-wit);
  text-align: left;
}

body.woocommerce-checkout .woocommerce form.checkout_coupon.woocommerce-form-coupon p.form-row {
  margin: 0;
  padding: 0;
}

body.woocommerce-checkout .woocommerce form.checkout_coupon.woocommerce-form-coupon p.form-row-first {
  float: left;
  width: calc(100% - 152px);
}

body.woocommerce-checkout .woocommerce form.checkout_coupon.woocommerce-form-coupon p.form-row-last {
  float: right;
  width: 140px;
}

body.woocommerce-checkout .woocommerce form.checkout_coupon.woocommerce-form-coupon button[name="apply_coupon"] {
  width: 100%;
  min-height: 48px;
}

@media (max-width: 479px) {
  body.woocommerce-checkout .woocommerce form.checkout_coupon.woocommerce-form-coupon :is(p.form-row-first, p.form-row-last) {
    float: none;
    width: 100%;
  }

  body.woocommerce-checkout .woocommerce form.checkout_coupon.woocommerce-form-coupon p.form-row-last {
    margin-top: 10px;
  }
}

/* ==========================================================================
   7. AFREKENEN — indeling: gegevens links (stap 1), overzicht rechts (stap 2)
   ========================================================================== */
@media (min-width: 1024px) {
  body.woocommerce-checkout .woocommerce form.checkout.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    grid-template-areas:
      "melding melding"
      "gegevens kop"
      "gegevens overzicht";
    grid-template-rows: auto auto 1fr;
    column-gap: 40px;
    align-items: start;
  }

  body.woocommerce-checkout .woocommerce form.checkout > .woocommerce-NoticeGroup {
    grid-area: melding;
  }

  body.woocommerce-checkout .woocommerce form.checkout > #customer_details {
    grid-area: gegevens;
  }

  body.woocommerce-checkout .woocommerce form.checkout > #order_review_heading {
    grid-area: kop;
  }

  body.woocommerce-checkout .woocommerce form.checkout > #order_review {
    grid-area: overzicht;
  }
}

body.woocommerce-checkout .woocommerce #customer_details.col2-set {
  width: 100%;
  margin: 0;
}

body.woocommerce-checkout .woocommerce #customer_details.col2-set :is(.col-1, .col-2) {
  float: none;
  width: 100%;
  max-width: none;
  padding: 0;
}

body.woocommerce-checkout .woocommerce #customer_details.col2-set::before,
body.woocommerce-checkout .woocommerce #customer_details.col2-set::after {
  content: none;
}

/* Kaarten (G .service-stappen): gegevens en opmerkingen. */
body.woocommerce-checkout .woocommerce .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce .woocommerce-shipping-fields:has(*),
body.woocommerce-checkout .woocommerce .woocommerce-additional-fields {
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  background: var(--kleur-wit);
}

/* Verzendadres-blok is leeg (verzending gaat naar het factuuradres). */
body.woocommerce-checkout .woocommerce .woocommerce-shipping-fields:not(:has(*)) {
  display: none;
}

body.woocommerce-checkout .woocommerce #customer_details .col-2 {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

/* Genummerde stapkoppen (G .service-stappen li::before). */
body.woocommerce-checkout .woocommerce .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce #order_review_heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 6px;
  font-family: var(--font-koppen);
  font-size: clamp(20px, 0.8vw + 16px, 24px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--kleur-inkt);
}

body.woocommerce-checkout .woocommerce .woocommerce-billing-fields > h3::before,
body.woocommerce-checkout .woocommerce #order_review_heading::before {
  content: "1";
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-rond);
  background: var(--kleur-groen);
  color: var(--kleur-wit);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0;
}

body.woocommerce-checkout .woocommerce #order_review_heading::before {
  content: "2";
}

body.woocommerce-checkout .woocommerce .codex-afreken-uitleg {
  margin: 0 0 20px 48px;
  font-size: 14px;
  color: var(--kleur-zacht);
}

body.woocommerce-checkout .woocommerce .woocommerce-additional-fields > h3 {
  margin: 0 0 12px;
  font-family: var(--font-koppen);
  font-size: 18px;
  font-weight: 700;
  color: var(--kleur-inkt);
}

body.woocommerce-checkout .woocommerce .woocommerce-additional-fields .form-row {
  margin-bottom: 0;
}

/* Velden in een raster: twee kolommen vanaf 600px, paren naast elkaar. */
body.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

body.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper::before,
body.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper::after {
  content: none;
}

body.woocommerce-checkout .woocommerce :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) > .form-row {
  grid-column: 1 / -1;
  float: none;
  width: auto;
  margin: 0;
}

@media (min-width: 600px) {
  body.woocommerce-checkout .woocommerce :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > :is(#billing_first_name_field, #billing_last_name_field, #billing_postcode_field, #billing_city_field),
  body.woocommerce-checkout .woocommerce .woocommerce-shipping-fields__field-wrapper > :is(#shipping_first_name_field, #shipping_last_name_field, #shipping_postcode_field, #shipping_city_field) {
    grid-column: auto;
  }

  /* Witregel tussen contact (e-mail) en naam/adres. */
  body.woocommerce-checkout .woocommerce .woocommerce-billing-fields__field-wrapper > :is(#billing_first_name_field, #billing_last_name_field) {
    margin-top: 8px;
  }
}

/* --- Overzicht rechts: één kaart (kop + inhoud) --- */
body.woocommerce-checkout .woocommerce #order_review_heading {
  margin: 24px 0 0;
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px) 8px;
  border: 1px solid var(--kleur-lijn);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--kleur-wit);
}

body.woocommerce-checkout .woocommerce #order_review {
  padding: 0 clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--kleur-lijn);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--kleur-wit);
}

@media (min-width: 1024px) {
  body.woocommerce-checkout .woocommerce #order_review_heading {
    margin-top: 0;
  }
}

/* Productregels in het overzicht: mini-foto + naam × aantal + bedrag. */
body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tbody tr.cart_item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--kleur-lijn);
  background: none;
}

body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tbody td.product-name {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 12px;
  align-content: center;
  align-items: end;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table td.product-name .codex-mini-foto {
  grid-row: 1 / span 2;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-klein);
  background: var(--kleur-vlak);
  overflow: hidden;
}

body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table td.product-name .codex-mini-foto img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 8%;
  box-sizing: border-box;
  object-fit: contain;
  mix-blend-mode: multiply;
}

body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table td.product-name .codex-mini-foto {
  align-self: center;
}

body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table td.product-name .product-quantity {
  grid-column: 2;
  align-self: start;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--kleur-zacht);
}

body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table td.product-name dl.variation {
  grid-column: 2;
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--kleur-zacht);
}

body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tbody td.product-total {
  font-size: 15.5px;
  font-weight: 700;
  text-align: right !important; /* woocommerce-smallscreen.css */
  white-space: nowrap;
}

/* --- Betaalmethoden als keuzetegels --- */
body.woocommerce-checkout .woocommerce .codex-afreken-subkop {
  margin: 20px 0 10px;
  font-family: var(--font-koppen);
  font-size: 17px;
  font-weight: 700;
  color: var(--kleur-inkt);
}

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

body.woocommerce-checkout .woocommerce #payment ul.payment_methods {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  text-align: left;
}

body.woocommerce-checkout .woocommerce #payment ul.payment_methods::before,
body.woocommerce-checkout .woocommerce #payment ul.payment_methods::after {
  content: none;
}

body.woocommerce-checkout .woocommerce #payment ul.payment_methods li.wc_payment_method {
  position: relative;
  margin: 0;
  padding: 0;
  border: 2px solid var(--kleur-lijn);
  border-radius: var(--radius);
  background: var(--kleur-wit);
  line-height: 1.45;
  list-style: none;
  transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
}

body.woocommerce-checkout .woocommerce #payment ul.payment_methods li.wc_payment_method:hover {
  border-color: var(--kleur-veldrand);
}

body.woocommerce-checkout .woocommerce #payment ul.payment_methods li.wc_payment_method:has(> input:checked) {
  border-color: var(--kleur-groen);
  background: var(--kleur-groen-licht);
}

body.woocommerce-checkout .woocommerce #payment ul.payment_methods li.wc_payment_method > input.input-radio {
  position: absolute;
  left: 14px;
  top: 15px;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--kleur-groen);
  cursor: pointer;
}

body.woocommerce-checkout .woocommerce #payment ul.payment_methods li.wc_payment_method > label {
  display: block;
  min-height: 48px;
  padding: 13px 14px 13px 44px;
  box-sizing: border-box;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--kleur-inkt);
  cursor: pointer;
}

body.woocommerce-checkout .woocommerce #payment ul.payment_methods li.wc_payment_method > label img {
  display: inline-block;
  max-height: 24px;
  margin: 0 0 0 8px;
  vertical-align: middle;
}

body.woocommerce-checkout .woocommerce #payment div.payment_box {
  margin: -6px 0 0;
  padding: 0 14px 14px 44px;
  border-radius: 0;
  background: none;
  color: var(--kleur-inkt);
  font-size: 14.5px;
  line-height: 1.5;
}

body.woocommerce-checkout .woocommerce #payment div.payment_box::before {
  content: none;
}

body.woocommerce-checkout .woocommerce #payment div.payment_box p {
  margin: 0;
}

body.woocommerce-checkout .woocommerce #payment div.payment_box p + p {
  margin-top: 8px;
}

/* --- Voorwaarden, bestelknop --- */
body.woocommerce-checkout .woocommerce #payment div.form-row.place-order {
  margin: 0;
  padding: 20px 0 0;
}

body.woocommerce-checkout .woocommerce .woocommerce-terms-and-conditions-wrapper {
  font-size: 14px;
  line-height: 1.55;
  color: var(--kleur-zacht);
}

body.woocommerce-checkout .woocommerce .woocommerce-privacy-policy-text p {
  margin: 0 0 12px;
}

body.woocommerce-checkout .woocommerce .woocommerce-terms-and-conditions-wrapper a {
  color: var(--kleur-groen-donker);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.woocommerce-checkout .woocommerce .woocommerce-terms-and-conditions {
  margin: 0 0 12px;
  padding: 16px;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  background: var(--kleur-wit);
  color: var(--kleur-inkt);
}

body.woocommerce-checkout .woocommerce .woocommerce-terms-and-conditions-wrapper .form-row.validate-required {
  margin: 0 0 14px;
}

body.woocommerce-checkout .woocommerce label.woocommerce-form__label-for-checkbox {
  position: relative;
  display: block;
  min-height: 44px;
  padding: 10px 0 10px 32px;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--kleur-inkt);
  cursor: pointer;
}

body.woocommerce-checkout .woocommerce label.woocommerce-form__label-for-checkbox input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 11px;
}

body.woocommerce-checkout .woocommerce label.woocommerce-form__label-for-checkbox .required {
  margin-left: 2px;
}

/* Vóór een bestelpoging: het akkoordvakje niet als fout tonen, ook al zet
   WooCommerce bij het verlaten (focusout) al .woocommerce-invalid. */
body.woocommerce-checkout .woocommerce form.checkout:not(.cs-geprobeerd) .woocommerce-terms-and-conditions-wrapper .woocommerce-invalid label {
  color: var(--kleur-inkt);
}

body.woocommerce-checkout .woocommerce form.checkout:not(.cs-geprobeerd) .woocommerce-invalid #terms {
  outline: none;
}

/* Akkoordvakje pas rood ná een bestelpoging (form.cs-geprobeerd, gezet in
   winkelwagen-afrekenen.js), niet al bij het verlaten van het vakje. */
body.woocommerce-checkout .woocommerce form.cs-geprobeerd .woocommerce-invalid label.woocommerce-form__label-for-checkbox {
  color: var(--kleur-sale);
}

body.woocommerce-checkout .woocommerce button#place_order {
  display: flex;
  width: 100%;
  min-height: 56px;
  float: none;
  margin: 0;
  font-size: 17px;
}

/* Twee korte regels rond de bestelknop, als lijst zonder middenpunten.
   - .codex-checkout-herroeping: bedenktijd/retour/voorwaarden VÓÓR de knop
     (BW 6:230m; markup uit functions.php, via output-buffer in
     inc/enqueue-winkelwagen-afrekenen.php omgezet van <p> met "·" naar <ul>).
   - .codex-checkout-vertrouwen: gratis verzending + WhatsApp ONDER de knop. */
body.woocommerce-checkout .codex-checkout-herroeping,
body.woocommerce-checkout .codex-checkout-vertrouwen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  clear: both;
  float: none;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.5;
  color: var(--kleur-zacht);
  text-align: center;
}

body.woocommerce-checkout .codex-checkout-herroeping {
  margin: 0 0 12px;
}

body.woocommerce-checkout .codex-checkout-vertrouwen {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--kleur-lijn);
}

/* Geen scheidingslijnen tussen de items: in de smalle overzichtskolom
   breken ze af en staat er dan een losse lijn vooraan de tweede regel. */
body.woocommerce-checkout .codex-checkout-herroeping,
body.woocommerce-checkout .codex-checkout-vertrouwen {
  gap: 2px 16px;
}

body.woocommerce-checkout .codex-checkout-herroeping li,
body.woocommerce-checkout .codex-checkout-vertrouwen li {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}

body.woocommerce-checkout .codex-checkout-herroeping a,
body.woocommerce-checkout .codex-checkout-vertrouwen a {
  color: var(--kleur-groen-donker);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.woocommerce-checkout .codex-checkout-herroeping a:hover,
body.woocommerce-checkout .codex-checkout-vertrouwen a:hover {
  color: var(--kleur-inkt);
}

@media (max-width: 600px) {
  body.woocommerce-checkout .codex-checkout-herroeping,
  body.woocommerce-checkout .codex-checkout-vertrouwen {
    flex-direction: column;
    align-items: center;
  }

  body.woocommerce-checkout .codex-checkout-herroeping,
  body.woocommerce-checkout .codex-checkout-vertrouwen {
    gap: 6px;
  }
}

/* Laad-overlay van WooCommerce (blockUI) in het G-vlak i.p.v. wit/grijs. */
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce .blockUI.blockOverlay {
  border-radius: var(--radius);
}

/* ==========================================================================
   8. BEDANKPAGINA (order-received) + besteldetails (ook in Mijn account)
   ========================================================================== */
body.woocommerce-order-received .woocommerce .woocommerce-order {
  display: grid;
  gap: 24px;
  max-width: 880px;
}

body.woocommerce-order-received .woocommerce .woocommerce-order > * {
  margin: 0;
}

body.woocommerce-order-received .woocommerce p.woocommerce-thankyou-order-received {
  position: relative;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 24px 24px 24px 84px;
  border-radius: var(--radius);
  background: var(--kleur-groen-licht);
  color: var(--kleur-inkt);
  font-size: 16px;
}

/* Groen vinkje (G .service-stappen-rondje). */
body.woocommerce-order-received .woocommerce p.woocommerce-thankyou-order-received::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 24px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-rond);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
    center / 24px no-repeat,
    var(--kleur-groen);
}

body.woocommerce-order-received .woocommerce .codex-bedankt-kop {
  display: block;
  font-family: var(--font-koppen);
  font-size: clamp(22px, 1vw + 17px, 28px);
  font-weight: 800;
  line-height: 1.2;
}

body.woocommerce-order-received .woocommerce .codex-bedankt-sub {
  display: block;
}

/* Ordernummer, datum, totaal, betaalmethode — en de bankgegevens (BACS). */
body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce ul.order_details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0;
  padding: 0;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  background: var(--kleur-wit);
  list-style: none;
  overflow: hidden;
}

body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce ul.order_details::before,
body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce ul.order_details::after {
  content: none;
}

body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce ul.order_details li {
  float: none;
  margin: 0;
  padding: 14px 18px;
  border: 0;
  box-shadow: -1px -1px 0 var(--kleur-lijn);
  font-size: 13.5px;
  line-height: 1.4;
  text-transform: none;
  color: var(--kleur-zacht);
  list-style: none;
}

body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce ul.order_details li strong {
  display: block;
  margin-top: 4px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--kleur-inkt);
  overflow-wrap: anywhere;
}

body.woocommerce-order-received .woocommerce .woocommerce-bacs-bank-details {
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--radius);
  background: var(--kleur-amber-licht);
}

body.woocommerce-order-received .woocommerce .woocommerce-bacs-bank-details ul.order_details {
  border-color: transparent;
  background: var(--kleur-wit);
}

body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce :is(.woocommerce-order-details__title, .woocommerce-column__title, .wc-bacs-bank-details-heading, .woocommerce-order > section > h2) {
  margin: 0 0 12px;
  font-family: var(--font-koppen);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--kleur-kop);
}

body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce .wc-bacs-bank-details-account-name {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
}

body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce table.order_details {
  width: 100%;
  margin: 0;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--kleur-wit);
}

body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce table.order_details :is(th, td) {
  padding: 12px 16px;
  border: 0;
  border-top: 1px solid var(--kleur-lijn);
  background: none;
  font-size: 15px;
  line-height: 1.45;
  color: var(--kleur-inkt);
  text-align: left;
  vertical-align: top;
}

body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce table.order_details thead th {
  border-top: 0;
  background: var(--kleur-vlak);
  font-weight: 700;
}

body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce table.order_details :is(td.product-total, tfoot td) {
  text-align: right;
  white-space: nowrap;
}

body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce table.order_details tfoot th {
  font-weight: 500;
  color: var(--kleur-zacht);
}

body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce table.order_details tfoot tr:last-child :is(th, td) {
  font-size: 17px;
  font-weight: 800;
  color: var(--kleur-inkt);
}

body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce table.order_details td.product-name a {
  color: var(--kleur-inkt);
  font-weight: 600;
}

body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce .woocommerce-customer-details .col2-set {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  width: 100%;
}

@media (min-width: 640px) {
  body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce .woocommerce-customer-details .col2-set {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce .woocommerce-customer-details .col2-set::before,
body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce .woocommerce-customer-details .col2-set::after {
  content: none;
}

body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce .woocommerce-customer-details .col2-set > div {
  float: none;
  width: auto;
}

body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce .woocommerce-customer-details address {
  margin: 0;
  padding: 16px 20px;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  background: var(--kleur-wit);
  font-style: normal;
  line-height: 1.6;
  color: var(--kleur-inkt);
}

body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce .woocommerce-customer-details address p {
  margin: 6px 0 0;
}

body.woocommerce-order-received .woocommerce .codex-bedankt-acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 0;
}

body.woocommerce-order-received .woocommerce .codex-bedankt-acties a:not(.button) {
  color: var(--kleur-groen-donker);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   9. Beweging beperken
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce *,
  body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce *::before,
  body:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce *::after {
    transition: none !important;
    animation: none !important;
  }

  body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce a.checkout-button:active,
  body.woocommerce-checkout .woocommerce button#place_order:active {
    transform: none;
  }
}