/* tapeminded, nieuw ontwerp · winkelmand en checkout. Ronde 2026-10-03-checkout-philosophy, kaart 1 en 2, variant A:
   alleen de krantheader en -footer (lijm.css), de rest strak en neutraal. Bron: bron/css/winkel.css van de ronde,
   hier op de echte WooCommerce-opmaak (met de checkout-indeling van Astra Pro).
   Harde regel: geen serif-knoppen, geen drukeffect of misregistratie, geen korrel, geen mono-letter in tabellen.
   Lopende tekst, tabellen, velden en knoppen in Inter Tight. Alleen vormgeving: niets hier verbergt een veld, knop
   of betaalmethode die WooCommerce, Mollie of PayPal nodig heeft. */
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/inter-tight-300-700.woff2) format('woff2'); }
:root {
  --papier: #e9e6dc; --inkt: #161514; --grijs: #5a5750;
  --tm-papier: var(--papier); --tm-inkt: var(--inkt);
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lijn: rgba(22, 21, 20, .2); --vlak: #f3f1ea;
}
body { margin: 0; background: var(--papier); color: var(--inkt); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
.winkel, .winkel *, .winkel *::before, .winkel *::after { box-sizing: border-box; }
.winkel :where(h1, h2, h3, p, table, figure, ul) { margin: 0; }
.winkel a { color: inherit; }
.winkel :where(button, input, select, textarea) { font: inherit; color: inherit; }
.winkel input[type="radio"], .winkel input[type="checkbox"] { accent-color: var(--inkt); }
.winkel .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.winkel { width: min(1180px, 100% - 2 * var(--tm-marge)); margin: 0 auto; padding: 56px 0 120px; }
.winkel-titel { font: 600 34px/1.15 var(--sans); letter-spacing: -.01em; margin-bottom: 32px; }
.winkel-titel::first-letter { text-transform: uppercase; }
.winkel h2, .winkel h3 { font: 600 19px/1.3 var(--sans); margin-bottom: 16px; }

/* de WPBakery-rij om de shortcode: geen eigen marges of achtergrond (Ultimate Addons zet er wit op) */
.winkel :where(.vc_row, .vc_column_container, .vc_column-inner, .wpb_wrapper, .wpb_content_element, .wpb_text_column) { margin: 0; padding: 0; width: auto; background: none !important; }
.winkel .upb_color, .winkel .upb_row_bg { display: none !important; }
.winkel .vc_row::before, .winkel .vc_row::after { content: none; }

/* ---------- meldingen ---------- */
/* monochroom (3 oktober 2026): dunne zwarte lijn, zwarte tekst op het beige, geen kleur en geen iconen; een fout
   krijgt een iets dikkere zwarte lijn */
.winkel :where(.woocommerce-message, .woocommerce-info, .woocommerce-error) { list-style: none; margin: 0 0 30px; padding: 14px 16px; border: 1px solid var(--inkt); background: transparent; color: var(--inkt); }
.winkel :where(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { content: none; display: none; }
.winkel .woocommerce-error { border-width: 2px; }
/* WooCommerce zet de focus op een nieuwe melding; geen blauwe focusring, de zwarte lijn is genoeg */
.winkel :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-NoticeGroup):focus { outline: none; }
.winkel :where(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) { color: var(--inkt); }
.winkel .woocommerce-error li + li { margin-top: 6px; }
.winkel :where(.woocommerce-message, .woocommerce-info) .button { float: right; margin-left: 16px; padding: 8px 14px; }
.winkel .woocommerce-notices-wrapper:empty, .winkel .ast-customer-info__notice:empty { display: none; }
.winkel .woocommerce-NoticeGroup { grid-column: 1 / -1; }

/* ---------- knoppen: rechthoekig, Inter Tight; de hoofdknop zwart met lichte letters ---------- */
.winkel :where(.button, button[type="submit"], input[type="button"], input[type="submit"]) {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border: 1px solid var(--inkt);
  border-radius: 0; background: transparent; color: var(--inkt); font: 600 15px/1 var(--sans); text-decoration: none; cursor: pointer; }
.winkel :where(.button, button[type="submit"]):disabled, .winkel .button.disabled { opacity: .4; cursor: default; }
.winkel :where(.button.alt, .checkout-button, #place_order) { width: 100%; padding: 18px 22px; background: var(--inkt); color: var(--papier); font-size: 16px; }
.winkel :where(.button, button[type="submit"]):not(:disabled):hover { background: var(--inkt); color: var(--papier); }
.winkel :where(.button.alt, .checkout-button, #place_order):not(:disabled):hover { background: #000; }

/* De twee afrekenknoppen (winkelmand: "Continue to checkout", checkout: "Complete purchase"): groen met witte tekst,
   grotere letter, een slot-icoon en in de checkout ook een klein kaarticoon. Groen komt alleen op deze twee knoppen.
   De iconen zijn CSS, omdat WooCommerce de knoptekst vervangt als je een betaalmethode kiest. Usertest, 3 oktober 2026. */
.winkel :is(.wc-proceed-to-checkout .checkout-button, #place_order) { --groen: #1d7a3e; gap: 12px; padding: 20px 22px; border-color: var(--groen); background: var(--groen); color: #fff; font: 600 19px/1.1 var(--sans); }
.winkel :is(.wc-proceed-to-checkout .checkout-button, #place_order):not(:disabled):hover,
.winkel :is(.wc-proceed-to-checkout .checkout-button, #place_order):focus-visible { --groen: #166331; background: var(--groen); border-color: var(--groen); color: #fff; }
.winkel :is(.wc-proceed-to-checkout .checkout-button, #place_order)::before,
.winkel #place_order::after { content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--icoon) center / contain no-repeat; mask: var(--icoon) center / contain no-repeat; }
.winkel :is(.wc-proceed-to-checkout .checkout-button, #place_order)::before { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h1zm2 0h6V7a3 3 0 0 0-6 0v3z'/%3E%3C/svg%3E"); margin-top: -2px; }
.winkel #place_order::after { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6zm2 0v2h16V6H4zm0 5v7h16v-7H4zm2 3h5v2H6v-2z'/%3E%3C/svg%3E"); width: 16px; height: 16px; opacity: .85; }

/* ---------- velden ---------- */
.winkel :where(input.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select, textarea) {
  display: block; width: 100%; padding: 12px 14px; border: 1px solid var(--lijn); border-radius: 0; background: #fff; font-size: 16px; line-height: 1.3; }
.winkel input::placeholder { color: #8a867e; }
/* de focusring komt uit lijm.css: alleen bij toetsenbordbediening, 2 px zwart met 2 px ruimte */
.winkel .form-row { margin: 0; }
.winkel .form-row label { display: block; font: 500 14px/1.3 var(--sans); margin-bottom: 6px; }
.winkel .form-row :where(.required, .optional) { color: var(--grijs); font-weight: 400; text-decoration: none; }
.winkel .woocommerce-invalid :where(input.input-text, select) { border: 2px solid var(--inkt); }
.winkel .select2-container { width: 100% !important; }
.winkel .select2-container .select2-selection--single { height: auto; border: 1px solid var(--lijn); border-radius: 0; background: #fff; }
.winkel .select2-container .select2-selection--single .select2-selection__rendered { padding: 12px 40px 12px 14px; line-height: 1.3; color: var(--inkt); }
.winkel .select2-container .select2-selection--single .select2-selection__arrow { height: 100%; right: 8px; }

/* ================= winkelmand ================= */
#ast-cart-wrapper { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.winkel .shop_table { width: 100%; border-collapse: collapse; font-size: 16px; }
.winkel .shop_table.cart th { text-align: left; font: 600 13px/1.3 var(--sans); color: var(--grijs); padding: 0 12px 12px; border-bottom: 1px solid var(--lijn); }
.winkel .shop_table.cart td { padding: 18px 12px; border-bottom: 1px solid var(--lijn); vertical-align: middle; }
.winkel .shop_table.cart :where(th, td):first-child { padding-left: 0; }
.winkel .shop_table.cart :where(th, td):last-child { padding-right: 0; }
.winkel .shop_table.cart :where(.product-price, .product-subtotal) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.winkel .shop_table.cart .product-subtotal { text-align: right; }
.winkel .shop_table.cart .product-remove { width: 40px; }
.winkel .shop_table.cart .product-thumbnail { width: 80px; }
.winkel .shop_table.cart .product-thumbnail img { display: block; width: 56px; height: 80px; object-fit: cover; object-position: top; border: 1px solid var(--lijn); }
.winkel .shop_table.cart .product-name { font-weight: 600; }
.winkel .shop_table.cart .product-name a { text-decoration: none; }
/* een product dat maar één keer in de mand kan heeft een verborgen aantal: dan geen lege kolom */
.winkel .shop_table.cart:has(td.product-quantity input[type="hidden"]) .product-quantity { display: none; }
.winkel .quantity input.qty { width: 64px; padding: 8px 10px; font-variant-numeric: tabular-nums; }
.winkel a.remove { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--lijn); border-radius: 50%; color: var(--grijs); text-decoration: none; font-size: 16px; line-height: 1; }
.winkel a.remove:hover { border-color: var(--inkt); color: var(--inkt); }
.winkel a.remove svg { display: block; width: 12px; height: 12px; fill: currentColor; }
.winkel .shop_table.cart td.actions { padding: 22px 0 0; border-bottom: 0; }
.winkel td.actions::after { content: ""; display: table; clear: both; }
.winkel td.actions .coupon { float: left; display: flex; gap: 10px; align-items: center; }
.winkel td.actions .coupon input { width: 220px; }
.winkel td.actions > .button { float: right; }

/* blok rechts: totalen */
.winkel .cart_totals .shop_table, .winkel #order_review { background: var(--vlak); border: 1px solid var(--lijn); }
.winkel .cart_totals .shop_table { border-collapse: separate; border-spacing: 0; padding: 14px 26px 0; }
.winkel .cart_totals .shop_table :where(th, td) { padding: 12px 0; border-bottom: 1px solid var(--lijn); text-align: left; font-weight: 400; vertical-align: top; }
.winkel .cart_totals .shop_table td { text-align: right; font-variant-numeric: tabular-nums; }
.winkel .cart_totals .order-total :where(th, td) { font-weight: 600; border-bottom: 0; }
.winkel :where(.cart_totals, #order_review) small.includes_tax { display: block; font-weight: 400; color: var(--grijs); font-size: 13px; }
.winkel .wc-proceed-to-checkout { background: var(--vlak); border: 1px solid var(--lijn); border-top: 0; padding: 10px 26px 28px; }
.winkel .wc-proceed-to-checkout .checkout-button { margin-top: 12px; }
/* Astra zet een tweede couponveld onder de totalen; het couponveld bij de tabel blijft */
.winkel #ast-checkout-coupon { display: none; }
/* PayPal-knoppen onder de checkout-knop (live) */
.winkel .wc-proceed-to-checkout :where(.ppcp-button-container, [id^="ppc-button"], .paypal-buttons) { margin-top: 18px; }
.winkel .tm-recaptcha-note { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--grijs); }
.winkel .tm-recaptcha-note a { color: inherit; }
.grecaptcha-badge { visibility: hidden !important; }

/* lege mand */
.winkel .cart-empty { margin-bottom: 24px; }
.winkel .return-to-shop .button { width: auto; }

/* ================= checkout =================
   De klassieke WooCommerce-checkout (de modern checkout van Astra staat uit, nieuw/winkel-inc.php). Usertest,
   3 oktober 2026: inloggen als klein tekstlinkje boven het formulier, het e-mailveld eerst, geen kop "Billing details". */
.winkel form.checkout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 0 56px; align-items: start; }
.winkel form.checkout > wc-order-attribution-inputs { display: none; }
.winkel #customer_details { grid-column: 1; grid-row: 1 / span 2; }
.winkel #order_review_heading { grid-column: 2; grid-row: 1; }
.winkel #order_review { grid-column: 2; grid-row: 2; }
.winkel #customer_details :where(.col-2, .woocommerce-account-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields):not(:has(> :not(wc-order-attribution-inputs))) { display: none; }

/* inloggen: een klein tekstlinkje, geen meldingsblok */
.winkel .woocommerce-form-login-toggle .woocommerce-info { margin: 0 0 28px; padding: 0; border: 0; background: none; font-size: 15px; color: var(--grijs); }
.winkel .woocommerce-form-login-toggle a { color: var(--inkt); font-weight: 600; }
.winkel form.woocommerce-form-login { margin: -12px 0 32px; padding: 20px; border: 1px solid var(--lijn); background: var(--vlak); display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.winkel form.woocommerce-form-login > :where(p:first-child, .form-row:not(.form-row-first):not(.form-row-last), .lost_password) { grid-column: 1 / -1; }
.winkel form.woocommerce-form-login .clear { display: none; }
.winkel form.woocommerce-form-login .form-row:not(.form-row-first):not(.form-row-last) { display: flex; gap: 18px; align-items: center; justify-content: space-between; }
.winkel .woocommerce-form-coupon-toggle .woocommerce-info { margin: -18px 0 28px; padding: 0; border: 0; background: none; font-size: 15px; color: var(--grijs); }
.winkel form.checkout_coupon { margin: -12px 0 32px; padding: 20px; border: 1px solid var(--lijn); background: var(--vlak); display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.winkel form.checkout_coupon p:first-child { flex-basis: 100%; }
.winkel form.checkout_coupon .form-row { flex: 1 1 200px; }

/* klantgegevens: geen kop, het e-mailadres eerst; verplicht duidelijk gemarkeerd */
.winkel .woocommerce-billing-fields > h3 { display: none; }
.winkel .form-row label .required { color: var(--inkt); font-weight: 700; }
.winkel .woocommerce-billing-fields__field-wrapper, .winkel .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.winkel .woocommerce-billing-fields__field-wrapper .form-row,
.winkel .woocommerce-shipping-fields__field-wrapper .form-row { grid-column: 1 / -1; }
.winkel :where(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) :where(.form-row-first, .form-row-last, #billing_postcode_field, #billing_city_field) { grid-column: auto; }
.winkel #billing_email_field { padding-bottom: 22px; margin-bottom: 4px; border-bottom: 1px solid var(--lijn); }
.winkel .woocommerce-account-fields { margin-top: 24px; }
.winkel .checkbox, .winkel .woocommerce-form__label-for-checkbox { display: flex; gap: 10px; align-items: center; font-weight: 400; }

/* betalen */
.winkel #payment { background: none; margin-top: 26px; }
.winkel #payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 18px; border: 1px solid var(--lijn); background: #fff; }
.winkel #payment ul.payment_methods > li { padding: 0; }
.winkel #payment ul.payment_methods > li + li { border-top: 1px solid var(--lijn); }
.winkel #payment ul.payment_methods > li > .woocommerce-info { margin: 0; border: 0; }
.winkel #payment .wc_payment_method > label { display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 16px 14px 6px; font-weight: 500; cursor: pointer; }
.winkel #payment .wc_payment_method > input[type="radio"] { margin: 0 0 0 16px; vertical-align: middle; }
.winkel #payment .wc_payment_method > label img { max-height: 24px; width: auto; vertical-align: middle; }
.winkel #payment .payment_box { padding: 0 16px 16px 44px; font-size: 15px; color: var(--grijs); }
.winkel #payment .payment_box p + * { margin-top: 10px; }
.winkel #payment .payment_box fieldset { border: 0; padding: 0; margin: 10px 0 0; }
.winkel .woocommerce-privacy-policy-text, .winkel .woocommerce-terms-and-conditions-wrapper { font-size: 13px; color: var(--grijs); margin-bottom: 22px; }
.winkel .place-order { padding: 0; }

/* blok rechts: de bestelling */
.winkel #order_review { padding: 14px 26px 28px; }
.winkel #order_review .shop_table { border-collapse: collapse; }
.winkel #order_review .shop_table :where(th, td) { padding: 12px 0; border-bottom: 1px solid var(--lijn); text-align: left; font-weight: 400; vertical-align: top; }
.winkel #order_review .shop_table thead th { font-weight: 600; }
.winkel #order_review .shop_table :where(.product-total, tfoot td) { text-align: right; font-variant-numeric: tabular-nums; }
.winkel #order_review .shop_table .product-name > div { display: inline; }
.winkel #order_review .shop_table .product-quantity { font-weight: 400; }
.winkel #order_review .shop_table .order-total :where(th, td) { font-weight: 600; border-bottom: 0; }
/* de geruststelling onder het totaal (functions.php: tapeminded_reassurance_block) */
.winkel #order_review tr.tm-reassurance-row td { padding: 12px 0 0; border-bottom: 0; text-align: left; }
.winkel .tm-reassurance-item { padding-left: 18px; border-left: 2px solid var(--inkt); }
.winkel .tm-reassurance-item + .tm-reassurance-item { margin-top: 16px; }
.winkel .tm-reassurance-label { display: block; font-weight: 600; }
.winkel .tm-reassurance-text { display: block; color: var(--grijs); font-size: 15px; }

/* laden (blockUI van WooCommerce) */
.winkel .blockUI.blockOverlay { background: var(--papier) !important; opacity: .6 !important; }

/* ---------- mobiel ---------- */
@media (max-width: 1023px) {
  .winkel { padding: 34px 0 72px; }
  .winkel-titel { font-size: 28px; margin-bottom: 22px; }
  #ast-cart-wrapper, .winkel form.checkout { grid-template-columns: 1fr; gap: 40px; }
  .winkel #customer_details, .winkel #order_review_heading, .winkel #order_review { grid-column: 1; grid-row: auto; }
  .winkel form.checkout { gap: 0; }
  .winkel #order_review_heading { margin-top: 40px; }
  .winkel form.woocommerce-form-login { grid-template-columns: 1fr; }
  .winkel .shop_table.cart :where(.product-price, .product-thumbnail) { display: none; }
  .winkel .shop_table.cart .product-remove { width: 36px; }
  .winkel td.actions .coupon { float: none; }
  .winkel td.actions .coupon input { flex: 1; width: auto; min-width: 0; }
  .winkel td.actions > .button { float: none; width: 100%; margin-top: 10px; }
  .winkel .woocommerce-billing-fields__field-wrapper, .winkel .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
  .winkel .cart_totals .shop_table { padding: 8px 18px 0; }
  .winkel .wc-proceed-to-checkout { padding: 10px 18px 22px; }
  .winkel #order_review { padding: 8px 18px 22px; }
  .winkel :where(.woocommerce-message, .woocommerce-info) .button { float: none; display: flex; margin: 12px 0 0; }
}

/* responsive (3 oktober 2026): tussen 1024 en 1199 px de rechterkolom iets breder, zodat knoppen en tekst er ruim in passen */
@media (min-width: 1024px) and (max-width: 1199px) {
  #ast-cart-wrapper, .winkel form.checkout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 40px; }
}

/* ---------- smalle telefoons (4 oktober 2026) ----------
   Op smalle Android-schermen (360 en 320 px) liep de winkelmand rechts uit beeld: de rasterkolom (1fr) kon niet smaller
   worden dan de tabel, de couponknop en de totalen. Nu krimpt alles mee: de producten onder elkaar als blokjes
   (product, prijs, subtotaal), coupon en knop onder elkaar, het totalenblok en de betaalknoppen (PayPal, Google Pay,
   Apple Pay) nooit breder dan het scherm. Alleen vormgeving, geen veld of knop verborgen. */
@media (max-width: 1023px) {
  #ast-cart-wrapper, .winkel form.checkout { grid-template-columns: minmax(0, 1fr); }
  .winkel :where(#ast-cart-wrapper > *, .cart-collaterals, .cart_totals, #customer_details, #order_review, #payment) { min-width: 0; max-width: 100%; }
  .winkel { overflow-wrap: break-word; }
  /* de betaalknoppen en hun iframes volgen de breedte van het blok */
  .winkel :where(.ppcp-button-container, [id^="ppc-button"], .paypal-buttons, .ppcp-messages, .wc_stripe_cart_payment_methods, .wc-stripe-payment-method, .payment-box, .StripeElement, .__PrivateStripeElement, #payment .payment_box, .wc-proceed-to-checkout) { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
  .winkel iframe { max-width: 100% !important; }
  .winkel .wc_stripe_cart_payment_methods { padding: 0; margin: 0; }
}
@media (max-width: 767px) {
  /* producttabel: elk product een blokje, de kolomkoppen als label voor elke waarde */
  .winkel .shop_table.cart, .winkel .shop_table.cart :where(tbody, tr, td) { display: block; width: 100%; }
  .winkel .shop_table.cart thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .winkel .shop_table.cart tr.cart_item { position: relative; padding: 16px 0 14px; border-bottom: 1px solid var(--lijn); }
  .winkel .shop_table.cart tr.cart_item:first-child { border-top: 1px solid var(--lijn); }
  .winkel .shop_table.cart tr.cart_item td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; border: 0; text-align: right; }
  .winkel .shop_table.cart tr.cart_item td[data-title]::before { content: attr(data-title); flex: none; text-align: left; font: 500 14px/1.3 var(--sans); color: var(--grijs); }
  .winkel .shop_table.cart tr.cart_item td.product-name { display: block; padding: 0 44px 8px 0; text-align: left; font-size: 17px; }
  .winkel .shop_table.cart tr.cart_item td.product-name::before { content: none; }
  .winkel .shop_table.cart tr.cart_item td.product-price { display: flex; }
  .winkel .shop_table.cart tr.cart_item td.product-thumbnail { display: none; }
  .winkel .shop_table.cart tr.cart_item td.product-remove { position: absolute; top: 12px; right: 0; width: auto; padding: 0; }
  .winkel .shop_table.cart .product-subtotal { font-weight: 600; }
  .winkel .shop_table.cart td.product-quantity .quantity { margin-left: auto; }
  /* coupon en knoppen onder elkaar, volle breedte */
  .winkel .shop_table.cart td.actions { padding-top: 22px; }
  .winkel td.actions .coupon { flex-direction: column; align-items: stretch; }
  .winkel td.actions .coupon :where(input, .button) { width: 100%; }
  .winkel td.actions > .button { width: 100%; }
  /* totalen: volle breedte, bedragen rechts en mogen afbreken in plaats van uit beeld te lopen */
  .winkel .cart_totals .shop_table { width: 100%; table-layout: fixed; }
  .winkel .cart_totals .shop_table th { width: 40%; padding-right: 12px; }
  .winkel :where(.cart_totals, #order_review) .shop_table td { overflow-wrap: anywhere; }
  .winkel #order_review .shop_table { width: 100%; }
  .winkel #order_review .shop_table .product-name { overflow-wrap: anywhere; padding-right: 12px; }
  .winkel :is(.wc-proceed-to-checkout .checkout-button, #place_order) { padding: 18px 16px; font-size: 18px; }
  .winkel #payment .payment_box { padding-left: 16px; }
  .winkel #payment .wc_payment_method > label { max-width: calc(100% - 40px); }
}
@media (max-width: 359px) {
  .winkel-titel { font-size: 26px; }
  .winkel .cart_totals .shop_table, .winkel #order_review { padding-left: 14px; padding-right: 14px; }
  .winkel .wc-proceed-to-checkout { padding-left: 14px; padding-right: 14px; }
  .winkel :is(.wc-proceed-to-checkout .checkout-button, #place_order) { font-size: 17px; gap: 10px; padding-left: 12px; padding-right: 12px; }
  .winkel form.woocommerce-form-login, .winkel form.checkout_coupon { padding: 16px 14px; }
}

/* ================= bedankpagina (order-received) =================
   Voorstel thankyou-page-voorstel, 6 oktober 2026 (woocommerce/checkout/thankyou.php). Eén rustige kolom: bevestiging,
   licentiecode, downloads, installeren, beveiligingsmelding, sidechain, factuur, hulp. Groen alleen op de knop om de
   code te kopiëren, zoals de afrekenknoppen; de downloadknoppen zijn neutraal (ronde 2, 6 oktober 2026). */
.tm-bedankt { max-width: 760px; }
.tm-bedankt .winkel-titel { margin-bottom: 10px; }
.tm-bedankt-order { font-size: 17px; color: var(--grijs); }
.tm-bedankt-order strong { color: var(--inkt); font-weight: 600; font-variant-numeric: tabular-nums; }
.tm-bedankt-deel { padding: 36px 0; border-top: 1px solid var(--lijn); }
.tm-bedankt-kop + .tm-bedankt-deel { margin-top: 36px; border-top: 0; padding-top: 0; }
.tm-bedankt-deel h2 { font: 600 21px/1.3 var(--sans); margin-bottom: 18px; }
.tm-bedankt-deel p + p { margin-top: 10px; }

/* 2. licentiecode: nieuw/css/licentie.css (gedeeld met de bestelling in het account) */

/* 3. downloads: één brede knop per besturingssysteem dat aan het product hangt, naast elkaar; neutraal (rand, geen vulkleur) */
.tm-download-knoppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.winkel .tm-download { justify-content: flex-start; gap: 16px; padding: 20px 22px; text-align: left; border: 1px solid var(--inkt); background: transparent; color: var(--inkt); }
.winkel .tm-download:hover { background: var(--vlak); color: var(--inkt); }
.tm-download svg { flex: none; width: 24px; height: 24px; }
.tm-download-tekst { display: grid; gap: 5px; }
.tm-download-os { font: 600 19px/1.15 var(--sans); }
.tm-download-detail { font: 400 14px/1.3 var(--sans); color: var(--grijs); }

/* 4. installeren in drie stappen */
.tm-stappen ol { list-style: none; counter-reset: stap; margin: 0; padding: 0; display: grid; gap: 14px; }
.tm-stappen li { counter-increment: stap; display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: baseline; font-size: 17px; }
.tm-stappen li::before { content: counter(stap); display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--inkt);
  border-radius: 50%; font: 600 15px/1 var(--sans); align-self: start; margin-top: -3px; }

/* 5. beveiligingsmelding: rustig, met de lijn links zoals de geruststelling in de checkout */
.tm-beveiliging p { padding-left: 18px; border-left: 2px solid var(--inkt); }

/* 6. sidechain: een tekstlink met pijl */
.tm-tekstlink { display: inline-flex; align-items: center; gap: 10px; font: 600 18px/1.3 var(--sans); text-decoration: underline; text-underline-offset: 4px; }
.tm-tekstlink .pijl { width: 22px; height: 10px; flex: none; }
.tm-tekstlink:hover { text-decoration-thickness: 2px; }

/* 7. factuur: de gewone zwarte knop */
.winkel .tm-factuur-knop { background: var(--inkt); color: var(--papier); }
.winkel .tm-factuur-knop:hover { background: #000; }

@media (max-width: 767px) {
  .tm-bedankt-deel { padding: 28px 0; }
  .tm-bedankt-kop + .tm-bedankt-deel { margin-top: 28px; }
  .winkel .tm-factuur-knop { width: 100%; justify-self: stretch; }
}

/* betaallogo's direct onder de afrekenknop in de winkelmand (nieuw/winkel-inc.php, tm_betaallogos) */
.winkel .wc-proceed-to-checkout .tm-betaal--mand { margin-top: 14px; justify-content: center; }