/* ============================================================
   mbs — woocommerce.css
   Laag 5: alles wat WooCommerce zelf uitspuugt, in de taal van het
   concept getrokken. Winkelwagen / afrekenen / account draaien op de
   WC-shortcodes; de shortcode zet ZIJN EIGEN div.woocommerce neer en
   dat is de raster-ouder — niet .woowrap (les § 53).
   ============================================================ */

/* ── wrapper ────────────────────────────────────────────── */
.woowrap{max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut) 100px}
.woowrap--narrow{max-width:1040px}

.pagehead{padding:56px 0 34px}
.pagehead .eyebrow{margin-bottom:16px}
.pagehead h1{font-size:clamp(30px,4.2vw,52px);font-weight:200;letter-spacing:-.035em;line-height:1.05}
.pagehead p{margin:16px 0 0;color:var(--mocha);font-size:14.5px;font-weight:300;max-width:60ch}

/* Lettertype nooit erven op deze drie pagina's: select2 rendert buiten .woowrap. */
body.woocommerce-cart .woowrap,body.woocommerce-cart .woowrap *,
body.woocommerce-checkout .woowrap,body.woocommerce-checkout .woowrap *,
body.woocommerce-account .woowrap,body.woocommerce-account .woowrap *,
body.woocommerce-cart .pagehead,body.woocommerce-cart .pagehead *,
body.woocommerce-checkout .pagehead,body.woocommerce-checkout .pagehead *,
body.woocommerce-account .pagehead,body.woocommerce-account .pagehead *,
.select2-container,.select2-container *{
  font-family:var(--font);
}

/* ── WC-knoppen ─────────────────────────────────────────── */
/* De shortcode-div meenemen in de keten wint op specificiteit van
   WC's eigen .woocommerce … a.button.alt — geen gelijkspel, geen loterij. */
.woowrap .woocommerce a.button,
.woowrap .woocommerce button.button,
.woowrap .woocommerce input.button,
.woowrap .woocommerce a.button.alt,
.woowrap .woocommerce button.button.alt,
.woowrap .woocommerce input.button.alt,
.woowrap .woocommerce #respond input#submit{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:17px 32px;border:1px solid var(--ink);border-radius:var(--r);
  background:var(--ink);color:#fff;
  font-family:var(--font);font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  line-height:1;text-shadow:none;box-shadow:none;
  transition:background .4s var(--ease-s),color .4s var(--ease-s),border-color .4s var(--ease-s);
}
.woowrap .woocommerce a.button:hover,
.woowrap .woocommerce button.button:hover,
.woowrap .woocommerce input.button:hover,
.woowrap .woocommerce a.button.alt:hover,
.woowrap .woocommerce button.button.alt:hover,
.woowrap .woocommerce input.button.alt:hover,
.woowrap .woocommerce #respond input#submit:hover{
  background:var(--cocoa);border-color:var(--cocoa);color:#fff;
}
.woowrap .woocommerce a.button.wc-backward,
.woowrap .woocommerce button[name=update_cart]{
  background:transparent;color:var(--ink);border-color:var(--line);
}
.woowrap .woocommerce a.button.wc-backward:hover,
.woowrap .woocommerce button[name=update_cart]:hover{
  background:var(--cream);border-color:var(--ink);color:var(--ink);
}
.woowrap .woocommerce button.button:disabled,
.woowrap .woocommerce button.button:disabled[disabled]{opacity:.4;cursor:not-allowed}

/* ── meldingen ──────────────────────────────────────────── */
/* WC zet een ::before-icoon neer dat als zwart blok over de tekst valt. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-notice::before{content:none}

.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews,
ul.woocommerce-error{
  list-style:none;margin:0 0 26px;padding:18px 22px;
  background:var(--cream);border:0;border-left:2px solid var(--sand);
  font-size:13.5px;font-weight:300;line-height:1.7;color:var(--ink);
}
.woocommerce-error,ul.woocommerce-error{border-left-color:#a33a26}
.woocommerce-message a.button,.woocommerce-info a.button{float:right;margin-left:20px}

.woocommerce-notices-wrapper:empty{display:none}
.woocommerce form .form-row.woocommerce-invalid input.input-text{border-color:#a33a26}

/* ── formulieren ────────────────────────────────────────── */
.woowrap .woocommerce form .form-row{
  margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:7px;
}
.woowrap .woocommerce form .form-row label{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cocoa);
}
.woowrap .woocommerce form .form-row label .required{color:var(--sand);text-decoration:none;border:0}
.woowrap .woocommerce form .form-row .input-text,
.woowrap .woocommerce form .form-row select,
.woowrap .woocommerce .select2-container .select2-selection--single{
  width:100%;height:auto;padding:14px 16px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);
  font-size:14px;font-weight:300;line-height:1.5;color:var(--ink);
}
.woowrap .woocommerce .select2-container .select2-selection--single{display:flex;align-items:center;min-height:50px}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:0;line-height:1.5;color:var(--ink);
}
.select2-container--default .select2-selection--single .select2-selection__arrow{top:50%;transform:translateY(-50%);right:12px}
.select2-dropdown{border-color:var(--line);border-radius:0}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--cream);color:var(--ink)}
.woowrap .woocommerce form .form-row textarea{min-height:120px}
.woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%;float:none}

.woocommerce-form__label-for-checkbox{flex-direction:row!important;align-items:flex-start;gap:10px}
.woocommerce-form__label-for-checkbox span{
  font-size:12.5px;font-weight:300;letter-spacing:0;text-transform:none;color:var(--mocha);
}

/* Verborgen herkomst-velden van WC nemen ruimte in een raster in. */
.wc-order-attribution-inputs,wc-order-attribution-inputs,.woocommerce-privacy-policy-text:empty{display:none}

/* ── gedeelde aantal-stepper ────────────────────────────── */
/* Deze markup staat op de PDP, in de winkelwagen én in de zijwagen:
   de stijl hoort dus in een laag die overal laadt (les § 10d). */
.quantity.qty,.woocommerce .quantity.qty{
  display:flex;align-items:center;border:1px solid var(--line);width:auto;max-width:none;flex:none;
}
.qty__btn{
  width:44px;height:52px;display:grid;place-items:center;flex:none;
  font-size:16px;font-weight:300;color:var(--mocha);background:none;border:0;cursor:pointer;
  transition:color .35s var(--ease-s),background .35s var(--ease-s);
}
.qty__btn:hover{color:var(--ink);background:var(--cream)}
.woocommerce .qty__input,.qty__input{
  width:46px;height:52px;padding:0;border:0;background:none;box-shadow:none;
  text-align:center;font-family:var(--font);font-size:14px;font-weight:400;color:var(--ink);
  -moz-appearance:textfield;
}
.qty__input:focus{outline:0}
.qty__input::-webkit-outer-spin-button,.qty__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ── winkelwagen ────────────────────────────────────────── */
body.woocommerce-cart .woowrap .woocommerce{
  display:grid;grid-template-columns:1fr 380px;gap:64px;align-items:start;
}
body.woocommerce-cart .woowrap .woocommerce > .woocommerce-notices-wrapper{grid-column:1 / -1;grid-row:1}
body.woocommerce-cart .woowrap .woocommerce > form.woocommerce-cart-form{grid-column:1;grid-row:2}
body.woocommerce-cart .woowrap .woocommerce > .cart-collaterals{grid-column:2;grid-row:2}
body.woocommerce-cart .woowrap .woocommerce > .cart-empty,
body.woocommerce-cart .woowrap .woocommerce > .return-to-shop,
body.woocommerce-cart .woowrap .woocommerce > .wc-empty-cart-message{grid-column:1 / -1}

/* :not(.sum) — deze selector is (0,3,0) en won van .sum (0,1,0), waardoor de
   samenvatting op /winkelwagen/ haar padding kwijtraakte. De reset is alleen
   bedoeld voor Woo's eigen cart_totals-markup, niet voor onze .sum. */
.woocommerce .cart-collaterals,.woocommerce .cart-collaterals .cart_totals:not(.sum),
.woocommerce .cart-collaterals .cross-sells,.woocommerce-page .cart-collaterals .cart_totals:not(.sum){
  width:100%!important;float:none!important;padding:0;
}
.woocommerce .cart-collaterals .cart_totals.sum{width:100%!important;float:none!important}
.woocommerce .cart_totals h2{
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--cocoa);
  margin:0 0 18px;
}
.woocommerce .cart_totals table.shop_table{
  border:0;border-collapse:collapse;margin:0;background:var(--cream);width:100%;
}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td{
  border:0;border-bottom:1px solid var(--line-soft);padding:16px 22px;
  font-size:13.5px;font-weight:300;color:var(--ink);
}
.woocommerce .cart_totals table.shop_table th{
  font-weight:400;color:var(--mocha);width:45%;text-transform:none;letter-spacing:0;font-size:13px;
}
.woocommerce .cart_totals .order-total th,.woocommerce .cart_totals .order-total td{
  border-bottom:0;font-size:17px;font-weight:400;color:var(--ink);
}
.woocommerce .cart_totals .checkout-button{width:100%;margin-top:20px}

/* Zonder table-layout:fixed rekt WC de miniatuurkolom onbeperkt op.
   Scoped op het cart-formulier — nooit op .shop_table in het algemeen. */
.woocommerce table.shop_table.woocommerce-cart-form__contents{
  table-layout:fixed;width:100%;border:0;border-collapse:collapse;
}
.woocommerce-cart-form__contents thead th{
  border:0;border-bottom:1px solid var(--line);padding:0 14px 14px;
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--cocoa);
  text-align:left;
}
.woocommerce-cart-form__contents td{
  border:0;border-bottom:1px solid var(--line-soft);padding:22px 14px;vertical-align:middle;
  font-size:14px;font-weight:300;
}
.woocommerce-cart-form__contents td.product-remove{width:44px;padding-left:0}
.woocommerce-cart-form__contents td.product-thumbnail{width:96px}
.woocommerce-cart-form__contents td.product-thumbnail img{
  width:80px;min-width:80px;max-width:80px;height:107px;object-fit:cover;background:var(--shell);
}
.woocommerce-cart-form__contents td.product-quantity{width:150px}
.woocommerce-cart-form__contents td.product-subtotal{width:130px;text-align:right;font-weight:400}
.woocommerce-cart-form__contents td.product-price{width:120px}
.woocommerce-cart-form__contents td.product-name a{font-size:14.5px;font-weight:400;color:var(--ink)}
.woocommerce-cart-form__contents .variation{margin:6px 0 0;font-size:11.5px;color:var(--mocha)}
.woocommerce-cart-form__contents .variation dt,.woocommerce-cart-form__contents .variation dd{
  display:inline;margin:0;font-weight:300;
}
.woocommerce a.remove{
  width:24px;height:24px;line-height:22px;font-size:20px;font-weight:200;
  color:var(--mocha);background:none;text-align:center;
}
.woocommerce a.remove:hover{color:var(--ink);background:none}
.woocommerce-cart-form__contents td.actions{padding:24px 0 0;border-bottom:0}
.woocommerce-cart-form__contents td.actions .coupon{
  display:flex;gap:10px;align-items:center;float:none;margin-bottom:16px;
}
.woocommerce-cart-form__contents td.actions .coupon .input-text{
  width:220px;max-width:100%;padding:14px 16px;border:1px solid var(--line);font-size:13px;font-weight:300;
}
.woocommerce .cross-sells{margin-top:70px}
.woocommerce .cross-sells h2{
  font-size:clamp(20px,2.4vw,28px);font-weight:200;letter-spacing:-.03em;margin:0 0 26px;
}

/* ── afrekenen ──────────────────────────────────────────── */
body.woocommerce-checkout .woowrap form.checkout{
  display:grid;grid-template-columns:1fr 400px;column-gap:64px;row-gap:0;align-items:start;
}
body.woocommerce-checkout .woowrap form.checkout > .woocommerce-notices-wrapper{grid-column:1 / -1;grid-row:1}
body.woocommerce-checkout .woowrap form.checkout > .col2-set,
body.woocommerce-checkout .woowrap form.checkout > #customer_details{grid-column:1;grid-row:2 / span 8}
body.woocommerce-checkout .woowrap form.checkout > h3#order_review_heading{grid-column:2;grid-row:2;align-self:start;margin-bottom:16px}
/* Sommige verzendplugins hangen een eigen blok direct in form.checkout;
   zonder plek pakt het een willekeurige rastercel. */
body.woocommerce-checkout .woowrap form.checkout > .wcmp__shipping-data{grid-column:2;grid-row:3}
body.woocommerce-checkout .woowrap form.checkout > #order_review{grid-column:2;grid-row:4}

.woocommerce form.checkout .col2-set,.woocommerce form.checkout #customer_details{width:100%!important;float:none!important}
.woocommerce form.checkout .col2-set .col-1,
.woocommerce form.checkout .col2-set .col-2,
.woocommerce #customer_details .col-1,
.woocommerce #customer_details .col-2{width:100%!important;float:none!important;margin:0}
.woocommerce #customer_details .col-2{margin-top:34px}
.woocommerce form.checkout #order_review{width:100%!important;float:none!important}
.woocommerce form.checkout h3,.woocommerce-checkout h3#order_review_heading{
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--cocoa);
  margin:0 0 20px;
}
.woocommerce-checkout #order_review{background:var(--cream);padding:28px}
.woocommerce-checkout table.shop_table{border:0;border-collapse:collapse;width:100%;margin:0}
.woocommerce-checkout table.shop_table th,.woocommerce-checkout table.shop_table td{
  border:0;border-bottom:1px solid var(--line-soft);padding:13px 0;
  font-size:13.5px;font-weight:300;color:var(--ink);
}
.woocommerce-checkout table.shop_table thead th{
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--cocoa);
}
.woocommerce-checkout table.shop_table tfoot .order-total th,
.woocommerce-checkout table.shop_table tfoot .order-total td{
  border-bottom:0;font-size:17px;font-weight:400;padding-top:18px;
}
.woocommerce-checkout #payment{background:transparent;border-radius:0;margin-top:22px}
.woocommerce-checkout #payment ul.payment_methods{
  border-bottom:1px solid var(--line);padding:0 0 18px;margin:0 0 18px;list-style:none;
}
.woocommerce-checkout #payment ul.payment_methods li{margin:0 0 10px;font-size:13.5px;font-weight:300}
.woocommerce-checkout #payment ul.payment_methods li img{max-height:22px;width:auto;display:inline-block;vertical-align:middle}
.woocommerce-checkout #payment div.payment_box{
  background:var(--white);border:1px solid var(--line);margin:10px 0 0;padding:14px 16px;
  font-size:12.5px;font-weight:300;color:var(--mocha);
}
.woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce-checkout #payment .form-row.place-order{padding:0;margin:20px 0 0}
.woowrap .woocommerce #payment #place_order{width:100%}
.woocommerce-terms-and-conditions-wrapper{margin-bottom:16px}

/* ── account ────────────────────────────────────────────── */
body.woocommerce-account .woowrap .woocommerce{
  display:grid;grid-template-columns:250px 1fr;gap:60px;align-items:start;
}
body.woocommerce-account .woowrap .woocommerce > .woocommerce-notices-wrapper{grid-column:1 / -1;grid-row:1}
/* WC's restfloat wisselt kolommen om onder grid — expliciet vastzetten. */
body.woocommerce-account .woowrap .woocommerce > .woocommerce-MyAccount-navigation{
  grid-column:1!important;grid-row:2;float:none!important;width:100%!important;
}
body.woocommerce-account .woowrap .woocommerce > .woocommerce-MyAccount-content{
  grid-column:2!important;grid-row:2;float:none!important;width:100%!important;
}
/* Niet ingelogd: het login/registratieblok mag de volle breedte hebben. */
body.woocommerce-account:not(.logged-in) .woowrap .woocommerce{display:block}
/* .endcta in de accountinhoud zit al binnen een kolom: de .wrap-insprong daar weer uit. */
.woocommerce-MyAccount-content .wrap{max-width:none;padding:0}

.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--line-soft)}
.woocommerce-MyAccount-navigation li a{
  display:block;padding:15px 2px;font-size:13px;font-weight:300;color:var(--mocha);
  transition:color .3s var(--ease-s),padding .3s var(--ease-s);
}
.woocommerce-MyAccount-navigation li a:hover{color:var(--ink);padding-left:8px}
.woocommerce-MyAccount-navigation li.is-active a{color:var(--ink);font-weight:500}
.woocommerce-MyAccount-content p{font-size:14px;font-weight:300;line-height:1.8}
.woocommerce-MyAccount-content table.shop_table{border:0;width:100%;border-collapse:collapse}
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td{
  border:0;border-bottom:1px solid var(--line-soft);padding:15px 12px;font-size:13.5px;font-weight:300;
}
.woocommerce-MyAccount-content table.shop_table thead th{
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--cocoa);
}
.woocommerce-EditAccountForm fieldset{border:1px solid var(--line);padding:24px;margin:30px 0 0}
.woocommerce-EditAccountForm legend{
  padding:0 10px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cocoa);
}
.woocommerce-address-fields__field-wrapper{margin-bottom:20px}
.woocommerce .woocommerce-form-login,.woocommerce .woocommerce-form-register{
  border:1px solid var(--line);border-radius:0;padding:34px;margin:0;
}
.woocommerce .col2-set.addresses .col-1,.woocommerce .col2-set.addresses .col-2{width:100%!important;float:none!important}
.woocommerce .col2-set.addresses{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.woocommerce .woocommerce-Address-title h3{margin-bottom:12px}

/* ── bestelbevestiging ──────────────────────────────────── */
.woocommerce-order .woocommerce-order-overview{
  list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin:30px 0;padding:0;
}
.woocommerce-order .woocommerce-order-overview li{
  background:var(--white);padding:20px;margin:0;border:0;float:none;
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cocoa);
}
.woocommerce-order .woocommerce-order-overview li strong{
  display:block;margin-top:8px;font-size:15px;font-weight:300;letter-spacing:0;text-transform:none;color:var(--ink);
}

/* ── prijzen & voorraad ─────────────────────────────────── */
.woocommerce .price,.woocommerce span.amount{font-weight:400;color:var(--ink)}
.woocommerce .price del,.woocommerce del span.amount{color:var(--mocha);font-weight:300;opacity:1}
.woocommerce .price ins,.woocommerce ins span.amount{text-decoration:none;font-weight:400}
.woocommerce .stock.in-stock{color:var(--cocoa)}
.woocommerce .stock.out-of-stock{color:#a33a26}

/* ── kruimelpad ─────────────────────────────────────────────
   Deze regel is niet gescoped en overschrijft dus óók de .crumbs uit
   components.css — inclusief de padding die daar stond. Op de PDP plakte
   het kruimelpad daardoor tegen de onderrand van de kop en viel het
   visueel weg (go-live punt 9). Padding hier expliciet meenemen. */
.crumbs{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:24px 0 20px;
  font-size:11px;font-weight:300;color:var(--mocha);letter-spacing:.04em;
}
.crumbs a{color:var(--mocha);transition:color .3s var(--ease-s)}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.5}

@media (max-width:1080px){
  body.woocommerce-cart .woowrap .woocommerce,
  body.woocommerce-checkout .woowrap form.checkout{grid-template-columns:1fr;gap:44px}
  body.woocommerce-cart .woowrap .woocommerce > form.woocommerce-cart-form,
  body.woocommerce-cart .woowrap .woocommerce > .cart-collaterals{grid-column:1}
  body.woocommerce-cart .woowrap .woocommerce > .cart-collaterals{grid-row:3}
  body.woocommerce-checkout .woowrap form.checkout > .col2-set,
  body.woocommerce-checkout .woowrap form.checkout > #customer_details{grid-column:1;grid-row:2}
  body.woocommerce-checkout .woowrap form.checkout > h3#order_review_heading{grid-column:1;grid-row:3}
  body.woocommerce-checkout .woowrap form.checkout > .wcmp__shipping-data{grid-column:1;grid-row:4}
  body.woocommerce-checkout .woowrap form.checkout > #order_review{grid-column:1;grid-row:5}
  body.woocommerce-account .woowrap .woocommerce{grid-template-columns:1fr;gap:34px}
  body.woocommerce-account .woowrap .woocommerce > .woocommerce-MyAccount-navigation,
  body.woocommerce-account .woowrap .woocommerce > .woocommerce-MyAccount-content{grid-column:1!important}
  body.woocommerce-account .woowrap .woocommerce > .woocommerce-MyAccount-content{grid-row:3}
  .woocommerce .col2-set.addresses{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════
   PDP — variatieformulier van WooCommerce
   De echte <select>'s blijven staan: wc-add-to-cart-variation leest ze uit
   en zonder die selects matcht er nooit een variatie. Ze worden alleen
   visueel verborgen (NOOIT display:none) zodra JS draait. Draait er geen
   JS, dan tonen we juist de selects en verbergen we de chips — zo blijft
   het product ook zonder JS te bestellen.
   ═══════════════════════════════════════════════════════════════════════ */
.variations_form.cart{display:block;margin:0}
.variations_form .variations{margin:0 0 18px;border:0}
.variations_form .variations .label label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mocha)}
.variations_form .variations select{
  width:100%;max-width:340px;height:52px;padding:0 14px;border:1px solid var(--line);
  background:#fff;font-family:var(--font);font-size:14px;color:var(--ink);
}
.reset_variations_alert{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

html.js-anim .variations_form .variations,
html.js-anim .variations_form .reset_variations{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
html:not(.js-anim) .opt__row,
html:not(.js-anim) .opt__h .lnk,
html:not(.js-anim) .opt__err{display:none}

.single_variation_wrap{display:block}
.woocommerce-variation.single_variation{margin:0}
.woocommerce-variation-price,.woocommerce-variation-availability{display:none}
.woocommerce-variation-description{
  margin:0 0 14px;font-size:14px;font-weight:300;line-height:1.9;color:var(--mocha);
}
.wc-no-matching-variations{
  margin:0 0 14px;font-size:13px;font-weight:400;color:var(--cocoa);
}
form.cart .stock{margin:0}
form.cart p.stock.out-of-stock{
  margin:0 0 18px;font-size:13px;letter-spacing:.02em;color:var(--cocoa);
}

/* Knop die WooCommerce als "nog geen keuze gemaakt" markeert. */
.btn.disabled,.btn:disabled{opacity:.45;cursor:not-allowed}

/* De prijs van een gekozen variatie komt als price_html binnen. */
.buy__price ins{text-decoration:none;background:none}
.buy__price bdi{text-decoration:inherit}
/* Rij in het native variatieformulier (alleen zichtbaar zonder JS). */
.variations_form .mbs-var-row{display:block;margin:0 0 16px}
.variations_form .mbs-var-row .label{display:block;margin:0 0 8px}
.variations_form .mbs-var-row .value{display:block}
.variations_form .reset_variations{display:inline-block;margin-top:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mocha);border-bottom:1px solid currentColor}


/* ── winkelwagenpagina (concept-opmaak) ──────────────────── */
/* Woo's collaterals-wrapper blijft bestaan voor plugins, maar mag de grid
   niet breken: display:contents maakt .sum een direct kind van .cartpg,
   zodat position:sticky een hoge genoege container houdt. */
.cartpg > .cart-collaterals{display:contents}
.cartpg__list{min-width:0}

/* Variatie- en add-on-regels van WooCommerce binnen een winkelwagenrij. */
.crow__vars dl.variation{
  display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;
  font-size:12px;font-weight:300;color:var(--mocha)}
.crow__vars dl.variation dt{margin:0;font-weight:300}
.crow__vars dl.variation dd{margin:0 0 0 5px;font-weight:500;color:var(--ink)}
.crow__vars dl.variation dd p{margin:0}
.crow__vars dl.variation dt::after{content:""}

.crow__unit{font-variant-numeric:tabular-nums}
.crow__unit .amount{color:var(--ink)}
.crow__x{background:none;border:1px solid transparent;cursor:pointer}
.crow.is-busy{opacity:.45;pointer-events:none}

/* Zonder JavaScript blijft de bijwerken-knop de enige manier om het aantal
   te wijzigen; met JavaScript gaat dat vanzelf en is de knop overbodig. */
.cart-submit{padding:24px 0 0}
.js-anim .cart-submit{display:none}

/* Verzendkeuze binnen de samenvatting. */
.sum__ship{text-align:right;font-size:12.5px;font-weight:300;color:var(--mocha)}
.sum__ship ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.sum__ship li{display:flex;gap:8px;align-items:baseline;justify-content:flex-end}
.sum__ship label{color:var(--ink);font-size:13px}
.sum__ship .woocommerce-shipping-destination{margin:9px 0 0;font-size:11.5px}
.sum__ship .shipping-calculator-button{color:var(--cocoa);text-decoration:underline;text-underline-offset:3px}
.sum__ship .shipping-calculator-form{margin:12px 0 0;text-align:left;display:grid;gap:10px}
.sum__ship .shipping-calculator-form .button{margin:0}

/* ═══════════════════════════════════════════════════════════
   AFREKENEN — lijm tussen WooCommerce-markup en het concept.

   De .co-grid ligt op form.checkout zélf. Het formulier moet om
   álle invoer heen (ook de betaalmethode), maar de samenvatting
   moet ernaast staan; een wrapper eromheen zou een <form> in een
   <form> forceren en de browser gooit de binnenste dan weg.
   ═══════════════════════════════════════════════════════════ */
form.checkout.co{margin:0}
.co__main{min-width:0}
.co>#order_review{min-width:0}

/* ── velden ─────────────────────────────────────────────── */
.woocommerce-checkout .form-row{display:block;margin:0 0 18px;position:relative;padding:0}
.woocommerce-checkout .form-row.form-row-first,
.woocommerce-checkout .form-row.form-row-last,
.woocommerce-checkout .form-row.form-row-wide{float:none;width:auto}
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper,
.woocommerce-account-fields .create-account{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:640px){
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-additional-fields__field-wrapper,
  .woocommerce-account-fields .create-account{grid-template-columns:1fr}
}
.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .form-row.notes,
.woocommerce-checkout .form-row.create-account{grid-column:1/-1}
.woocommerce-input-wrapper{display:block}
.woocommerce-checkout .form-row .required,
.woocommerce-checkout .form-row abbr[title]{border:0;text-decoration:none;color:var(--cocoa)}
.woocommerce-checkout .form-row .optional{color:var(--sand)}
.woocommerce-checkout input[name="woocommerce-process-checkout-nonce"],
.woocommerce-checkout input[name="_wp_http_referer"],
.woocommerce-checkout .clear{display:none}
.cosec__note{margin:0 0 18px;font-size:12.5px;font-weight:300;line-height:1.8;color:var(--mocha)}

/* Woo's eigen checkbox-markup (account aanmaken, voorwaarden). */
.woocommerce-form__label-for-checkbox{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  font-size:13px;font-weight:300;line-height:1.7;color:var(--mocha);margin:0}
.woocommerce-form__input-checkbox{
  appearance:none;-webkit-appearance:none;width:16px;height:16px;flex:none;
  border:1px solid var(--line);margin:3px 0 0;position:relative;background:transparent;
  cursor:pointer;transition:background .3s var(--ease-s),border-color .3s var(--ease-s)}
.woocommerce-form__input-checkbox:checked{background:var(--ink);border-color:var(--ink)}
.woocommerce-form__input-checkbox:checked::after{
  content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;
  border:solid var(--white);border-width:0 1.4px 1.4px 0;transform:rotate(45deg)}

/* ── keuzerijen: zonder JS via :has(), met JS via .is-on ── */
.opt-row:has(input:checked){border-color:var(--ink);background:var(--white)}
.opt-row:has(input:checked) .rad{border-color:var(--ink)}
.opt-row:has(input:checked) .rad::after{transform:scale(1)}
.opt-row__pkg{margin:0 0 10px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--sand)}

/* ── betaalmethoden ─────────────────────────────────────── */
.payment_methods{list-style:none;margin:0;padding:0}
li.wc_payment_method{margin:0 0 12px}
li.wc_payment_method>label{display:block;cursor:pointer;margin:0}
li.wc_payment_method img{max-height:22px;width:auto;opacity:.9}
.payment_box{
  margin:18px 0 0;padding:18px 0 0;border-top:1px solid var(--line-soft);
  font-size:13px;font-weight:300;line-height:1.75;color:var(--mocha)}
.payment_box p{margin:0 0 12px}
.payment_box p:last-child{margin:0}
.payment_box select,
.payment_box input[type=text],
.payment_box input[type=tel],
.payment_box input[type=email]{
  width:100%;font:inherit;font-size:14.5px;font-weight:300;color:var(--ink);
  background:transparent;border:1px solid var(--line);border-radius:var(--r);
  padding:12px 16px;appearance:none;-webkit-appearance:none}

/* ── bestelknop ─────────────────────────────────────────── */
.woocommerce-checkout .place-order{
  display:grid;grid-template-columns:1fr auto;gap:18px 20px;align-items:center;
  margin:38px 0 0;padding:30px 0 0;border-top:1px solid var(--line)}
.woocommerce-checkout .place-order>noscript,
.woocommerce-checkout .place-order .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout .place-order .co__secure{grid-column:1/-1}
.woocommerce-checkout .place-order .co__foot{margin:0;padding:0;border:0;justify-content:flex-start}
@media(max-width:640px){.woocommerce-checkout .place-order{grid-template-columns:1fr}}
.woocommerce-terms-and-conditions-wrapper .form-row{margin:0}
.woocommerce-privacy-policy-text{font-size:12.5px;font-weight:300;line-height:1.8;color:var(--mocha)}
.woocommerce-privacy-policy-text p{margin:0 0 12px}

/* ── ordersamenvatting ──────────────────────────────────── */
#order_review.sum{margin:0}
.mini__r .mini__x{
  grid-column:3;justify-self:end;margin:4px 0 0;font-size:11px;color:var(--sand);
  text-decoration:underline;text-underline-offset:3px}
.mini__r .mini__x:hover{color:var(--cocoa)}
.sum__msg{margin:10px 0 0;font-size:12px;font-weight:300;line-height:1.7;color:var(--cocoa)}
.sum__msg.is-bad{color:#B4472F}
.promo__row .btn{white-space:nowrap}
.sum__edit{margin-top:22px}

/* ── select2 (land/provincie) ───────────────────────────── */
.select2-container--default .select2-selection--single{
  height:auto;border:1px solid var(--line);border-radius:var(--r);background:transparent}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:14px 16px;line-height:1.5;color:var(--ink);font-size:14.5px;font-weight:300}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:100%;right:12px}
.select2-container--default.select2-container--open .select2-selection--single{border-color:var(--cocoa)}
.select2-dropdown{border-color:var(--line);border-radius:var(--r)}
.select2-container--default .select2-results__option{font-size:14px;font-weight:300;padding:9px 16px}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--ink);color:var(--white)}
.select2-search--dropdown .select2-search__field{border:1px solid var(--line);padding:10px 12px;font-size:14px}

/* ── inlog-/berichtblokken boven het formulier ──────────── */
.woocommerce-NoticeGroup{margin:0 0 26px}

/* ═══════════════════════════════════════════════════════════
   GO-LIVE CORRECTIES — augustus 2026
   ═══════════════════════════════════════════════════════════ */

/* ── 6. shop: hoofdkolom ────────────────────────────────────
   Alles wat woocommerce_before_shop_loop uitspuugt (meldingen, de
   stapelkortingbanner) zat tot nu toe rechtstreeks in het .shop-raster
   en werd dus een eigen cel; het productgrid schoof daardoor naar rij 2
   en viel buiten beeld. archive-product.php zet er nu .shop__main
   omheen — hier alleen nog de raster-eigenschappen. */
.shop__main{min-width:0}

/* ── 10 + 12. knoppen die al .btn dragen ────────────────────
   WooCommerce's eigen skin (.woocommerce a.button.alt → paars #a46497)
   is met drie klassen specifieker dan .btn/.btn--solid, dus won hij op
   de winkelwagen- en afrekenpagina. De bestaande overrides in dit
   bestand zitten allemaal achter .woowrap, en de headless cart/checkout
   templates gebruiken .wrap — die vuurden dus nooit. Hover werkte wél,
   want dat is de ::after-vulling van .btn zelf; vandaar "paars, maar on
   hover goed". Hieronder zonder .woowrap, en alleen voor elementen die
   expliciet .btn meekrijgen — WC-knoppen zonder .btn blijven ongemoeid. */
.woocommerce a.button.btn,
.woocommerce button.button.btn,
.woocommerce input.button.btn,
.woocommerce a.button.alt.btn,
.woocommerce button.button.alt.btn,
.woocommerce input.button.alt.btn,
.woocommerce #respond input#submit.btn,
form.checkout.co > .place-order #place_order.btn,
.woocommerce #payment #place_order.btn,
#payment #place_order.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;
  padding:17px 34px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  border-radius:var(--r);overflow:hidden;isolation:isolate;
  font-family:var(--font);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  line-height:1;text-shadow:none;box-shadow:none;
  transition:color .55s var(--ease),border-color .55s var(--ease);
}
.woocommerce a.button.btn:hover,
.woocommerce button.button.btn:hover,
.woocommerce input.button.btn:hover,
.woocommerce a.button.alt.btn:hover,
.woocommerce button.button.alt.btn:hover,
.woocommerce input.button.alt.btn:hover,
.woocommerce #respond input#submit.btn:hover,
form.checkout.co > .place-order #place_order.btn:hover,
.woocommerce #payment #place_order.btn:hover,
#payment #place_order.btn:hover{
  background:var(--bg);color:var(--fgh);border-color:var(--fill);
}
.woocommerce button.button.btn:disabled,
.woocommerce button.button.btn:disabled[disabled]{opacity:.4;cursor:not-allowed}

/* 12. De bestelknop stond in de rechterkolom van het .place-order-raster
   en kreeg dus alleen contentbreedte — "te klein". Eigen rij, vol breed. */
.woocommerce-checkout .place-order #place_order,
.woocommerce-checkout #payment #place_order{grid-column:1 / -1;width:100%;margin:0}

/* ── 11. miniaturen in de ordersamenvatting ─────────────────
   De <img> draagt width="480" height="640" als presentational hint.
   .mini__r img zette wél width:58px, maar liet de height-hint van 640px
   staan — en aspect-ratio vult alleen een ONTBREKENDE maat in, dus die
   deed niks. Resultaat: een 58 x 640 sliert. height:auto geeft de
   verhouding terug aan aspect-ratio. */
.mini__r img{height:auto}

/* ── 10. winkelwagen: grijze lijnen uit de rechterkolom ─────
   Zonder rand zou het witte blok op een witte pagina wegvallen, dus
   krijgt het dezelfde crème vlak als de samenvatting op de
   afrekenpagina. Zo blijft het één herkenbaar paneel. */
.cartpg .sum{border:0;background:var(--cream)}
.cartpg .sum h2{border-bottom:0;padding-bottom:0;margin-bottom:20px}
.cartpg .sum__tot{border-top:0}
.cartpg .sum__pays{border-top:0}
.cartpg .sum__pays span{border-color:var(--line-soft)}
.cartpg .promo{border-top:0;padding-top:0;margin-top:18px}


/* ── go-live 23-08 — ordersamenvatting winkelwagen + afrekenen ────────────
   1. wc_cart_totals_order_total_html() zet de btw-melding als
      <small class="includes_tax"> ÍN de totaalregel. Inline naast een
      26px-bedrag las dat als een tweede, grotere prijs. Eigen regel eronder.
   2. Plugins/snippets die een <tr> aan woocommerce_*_order_total hangen,
      worden nu server-side naar .sum__l omgezet (mbs_totals_hook()). Een los
      <tr> wordt door de HTML-parser weggegooid en liet alleen kale tekst over. */
.sum__tot{flex-wrap:wrap}
.sum__tot b{display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right}
.sum__tot b>strong{font-weight:inherit}
.sum__tot .includes_tax{
  font-size:11px;font-weight:300;letter-spacing:.04em;line-height:1.5;
  color:var(--mocha);white-space:nowrap;
}
.sum__tot .includes_tax .woocommerce-Price-amount{font-size:11px;font-weight:300;color:inherit}

/* stapelkorting-regel (snippet) in dezelfde ritmiek als de rest */
.sum__l.mbs-savings-row{padding-top:4px;color:#855A27}
.sum__l.mbs-savings-row b{color:#855A27;font-weight:500}

/* ── betaal-logo's in de methodekeuze ─────────────────────────────────────
   Mollie levert een <img> zonder afmetingen; het iDEAL-logo heeft een
   viewBox van 750x661 en zou anders op ware grootte in de rij landen.
   Kapotte bronnen worden server-side al weggefilterd (inc/pay-icons.php). */
.opt-row em img,.opt-row em .mollie-gateway-icon{
  display:block;width:auto;height:24px;max-width:70px;object-fit:contain;
}
@media(max-width:600px){.opt-row em img,.opt-row em .mollie-gateway-icon{height:20px;max-width:56px}}

/* Single-column checkout: submit follows the order summary. */
@media(max-width:1080px){
  form.checkout.co > #order_review.sum--sticky{position:static}
  form.checkout.co > .place-order{min-width:0;margin:-28px 0 0;padding:0;border-top:0}
}

/* Compact mobile cart rows; keep price and discount within the page. */
@media(max-width:760px){
  body.woocommerce-cart .phead{padding:24px 0 22px}
  body.woocommerce-cart .phead__meta{margin-top:16px}
  .cartpg{padding-top:24px;row-gap:24px}
  .cartpg .crow{grid-template-columns:64px minmax(0,1fr) auto 44px;grid-template-areas:"m i i x" "m q s s";gap:8px 12px;padding:14px 0;align-items:start}
  .cartpg .crow__media{width:64px}
  .cartpg .crow__cat{display:none}
  .cartpg .crow__t{font-size:14px;line-height:1.45}
  .cartpg .crow__vars{margin-top:5px}
  .cartpg .crow__unit{margin-top:5px}
  .cartpg .crow .qty{margin-top:0}
  .cartpg .crow .qty__btn{width:44px;height:44px}
  .cartpg .crow .qty__input{width:30px;height:44px}
  .cartpg .crow__sum{min-width:0;font-size:14px;align-self:center}
  .cartpg .crow__sum .mbs-tag{display:block;white-space:normal;font-size:10px;padding:2px 5px}
  .cartpg .crow__sum del{display:block;font-size:11px}
  .cartpg .crow__x{width:44px;height:44px}
  .cartpg .shipbar{margin-top:18px;padding:14px 16px}
  .cartpg .cart-acts{padding-top:18px}
  body.woocommerce-cart .mbs-discount-notice{padding:12px 16px;margin-bottom:0;font-size:12.5px}
}